@gravity-ui/navigation 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -0,0 +1,22 @@
+'use strict';
+
+function isSectionSelected(selected, pageId, section) {
+    var _a;
+    if (!selected.section || selected.setting) {
+        return false;
+    }
+    else if (selected.section.id && selected.section.id === section.id) {
+        return true;
+    }
+    else if (((_a = selected.page) === null || _a === undefined ? undefined : _a.id) === pageId &&
+        selected.section.title &&
+        selected.section.title === section.title) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+exports.isSectionSelected = isSectionSelected;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Settings/Selection/utils.ts"],"sourcesContent":["import {SelectedSettingsPart, SettingsPageSection} from '../collect-settings';\n\nexport function isSectionSelected(\n    selected: SelectedSettingsPart,\n    pageId: string,\n    section: SettingsPageSection,\n) {\n    if (!selected.section || selected.setting) {\n        return false;\n    } else if (selected.section.id && selected.section.id === section.id) {\n        return true;\n    } else if (\n        selected.page?.id === pageId &&\n        selected.section.title &&\n        selected.section.title === section.title\n    ) {\n        return true;\n    } else {\n        return false;\n    }\n}\n"],"names":[],"mappings":";;SAEgB,iBAAiB,CAC7B,QAA8B,EAC9B,MAAc,EACd,OAA4B,EAAA;;IAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;AACvC,QAAA,OAAO,KAAK;;AACT,SAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAE;AAClE,QAAA,OAAO,IAAI;;SACR,IACH,CAAA,MAAA,QAAQ,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,EAAE,MAAK,MAAM;QAC5B,QAAQ,CAAC,OAAO,CAAC,KAAK;QACtB,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAC1C;AACE,QAAA,OAAO,IAAI;;SACR;AACH,QAAA,OAAO,KAAK;;AAEpB;;;;"}

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

@@ -28,7 +28,7 @@ export interface SettingsGroupProps {
 }
 export interface SettingsPageProps {
     id?: string;
-    title: string;
+    title?: string;
     icon?: IconProps;
     children: React.ReactNode;
 }
@@ -38,8 +38,6 @@ export interface SettingsSectionProps {
     header?: React.ReactNode;
     children: React.ReactNode;
     withBadge?: boolean;
-    showTitle?: boolean;
-    onlyChild?: boolean;
 }
 export interface SettingsItemProps {
     id?: string;

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

@@ -0,0 +1,192 @@
+'use strict';
+
+var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var identity = require('../../_virtual/identity.js');
+var Title = require('../Title/Title.js');
+var cn = require('../utils/cn.js');
+var context = require('./Selection/context.js');
+var utils = require('./Selection/utils.js');
+var SettingsMenu = require('./SettingsMenu/SettingsMenu.js');
+var SettingsMenuMobile = require('./SettingsMenuMobile/SettingsMenuMobile.js');
+var SettingsSearch = require('./SettingsSearch/SettingsSearch.js');
+var collectSettings = require('./collect-settings.js');
+var helpers = require('./helpers.js');
+var index = require('./i18n/index.js');
+require('./Settings.scss.js');
+
+const b = cn.block('settings');
+const SettingsContext = React.createContext({});
+const useSettingsContext = () => React.useContext(SettingsContext);
+function Settings(_a) {
+    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib_es6.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
+    if (loading) {
+        return (React.createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b('loader'), size: "m" }))));
+    }
+    return (React.createElement(SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
+        React.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
+}
+const getPageTitleById = (menu, activePage) => {
+    for (const firstLevel of menu) {
+        if ('groupTitle' in firstLevel) {
+            for (const secondLevel of firstLevel.items)
+                if (secondLevel.id === activePage)
+                    return secondLevel.title;
+        }
+        else if (firstLevel.id === activePage)
+            return firstLevel.title;
+    }
+    return '';
+};
+function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = index('label_title'), filterPlaceholder = index('label_filter-placeholder'), emptyPlaceholder = index('label_empty-placeholder'), view, onPageChange, onClose, }) {
+    var _a, _b;
+    const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    const [search, setSearch] = React.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
+    const { menu, pages } = collectSettings.getSettingsFromChildren(children, search);
+    const selected = context.useSettingsSelectionProviderValue(pages, selection);
+    const pageKeys = Object.keys(pages);
+    const selectionInitialPage = selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;
+    const [selectedPage, setCurrentPage] = React.useState(selectionInitialPage ||
+        (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined));
+    const searchInputRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const isMobile = view === 'mobile';
+    React.useEffect(() => {
+        var _a;
+        (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
+    }, [search]);
+    React.useEffect(() => {
+        const handler = () => {
+            var _a;
+            (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
+        };
+        window.addEventListener('click', handler);
+        return () => {
+            window.removeEventListener('click', handler);
+        };
+    }, []);
+    let activePage = selectedPage;
+    if (!activePage || ((_a = pages[activePage]) === null || _a === undefined ? undefined : _a.hidden)) {
+        activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === undefined ? undefined : _b.id;
+    }
+    const handlePageChange = (newPage) => {
+        setCurrentPage((prevPage) => {
+            if (prevPage !== newPage) {
+                onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
+            }
+            return newPage;
+        });
+    };
+    React.useEffect(() => {
+        if (activePage !== selectedPage) {
+            handlePageChange(activePage);
+        }
+    });
+    React.useEffect(() => {
+        if (!selectionInitialPage)
+            return;
+        setCurrentPage(selectionInitialPage);
+    }, [selectionInitialPage]);
+    React.useEffect(() => {
+        var _a;
+        if ((_a = selected.selectedRef) === null || _a === undefined ? undefined : _a.current) {
+            selected.selectedRef.current.scrollIntoView();
+        }
+    }, [selected.selectedRef]);
+    const renderSetting = ({ title: settingTitle, element }) => {
+        return (React.createElement("div", { key: settingTitle, className: b('section-item') }, React.cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle }))));
+    };
+    const renderSection = (page, section) => {
+        const isSelected = utils.isSectionSelected(selected, page, section);
+        return (React.createElement("div", { key: section.title, className: b('section', { selected: isSelected }), ref: isSelected ? selected.selectedRef : undefined },
+            section.title && (React.createElement("h3", { className: b('section-heading') }, renderSectionRightAdornment ? (React.createElement(uikit.Flex, { gap: 2, alignItems: 'center' },
+                section.title,
+                React.createElement("div", { className: b('section-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderSectionRightAdornment(section)))) : (section.title))),
+            section.header &&
+                (isMobile ? (React.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
+            section.items.map((setting) => (setting.hidden ? null : renderSetting(setting)))));
+    };
+    const renderPageContent = (page) => {
+        if (!page) {
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React.createElement("div", { className: b('not-found') }, emptyPlaceholder));
+        }
+        const filteredSections = pages[page].sections.filter((section) => !section.hidden);
+        return (React.createElement(React.Fragment, null,
+            !isMobile && (React.createElement(Title.Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
+            React.createElement("div", { className: b('content') }, filteredSections.map((section) => renderSection(page, section)))));
+    };
+    return (React.createElement(context.SettingsSelectionContextProvider, { value: selected },
+        React.createElement("div", { className: b({ view }) },
+            isMobile ? (React.createElement(React.Fragment, null,
+                React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
+                React.createElement(SettingsMenuMobile.SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React.createElement("div", { className: b('menu'), onClick: () => {
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                }, onKeyDown: (event) => {
+                    if (menuRef.current) {
+                        if (menuRef.current.handleKeyDown(event)) {
+                            event.preventDefault();
+                        }
+                    }
+                } },
+                React.createElement(Title.Title, null, title),
+                React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+                React.createElement(SettingsMenu.SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
+            React.createElement("div", { className: b('page') }, renderPageContent(activePage)))));
+}
+Settings.Group = function SettingsGroup({ children }) {
+    return React.createElement(React.Fragment, null, children);
+};
+Settings.Page = function SettingsPage({ children }) {
+    return React.createElement(React.Fragment, null, children);
+};
+Settings.Section = function SettingsSection({ children }) {
+    return React.createElement(React.Fragment, null, children);
+};
+Settings.Item = function SettingsItem(setting) {
+    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity, mode, description, } = setting;
+    const selected = context.useSettingsSelectionContext();
+    const isSettingSelected = selected.setting && selected.setting.id === id;
+    const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    const titleNode = (React.createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
+    return (React.createElement("div", { className: b('item', { align, mode, selected: isSettingSelected }), ref: isSettingSelected ? selected.selectedRef : undefined },
+        React.createElement("label", { className: b('item-heading'), id: labelId },
+            renderRightAdornment ? (React.createElement(uikit.Flex, { className: b('item-title-wrapper'), gap: 3 },
+                titleNode,
+                React.createElement("div", { className: b('item-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderRightAdornment(setting)))) : (titleNode),
+            description ? React.createElement("span", { className: b('item-description') }, description) : null),
+        React.createElement("div", { className: b('item-content') }, children)));
+};
+function prepareTitle(string, search) {
+    let temp = string.slice(0);
+    const title = [];
+    const parts = helpers.escapeStringForRegExp(search).split(' ').filter(Boolean);
+    let key = 0;
+    for (const part of parts) {
+        const regex = new RegExp(part, 'ig');
+        const match = regex.exec(temp);
+        if (match) {
+            const m = match[0];
+            const i = match.index;
+            if (i > 0) {
+                title.push(temp.slice(0, i));
+            }
+            title.push(React.createElement("strong", { key: key++, className: b('found') }, m));
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}
+
+exports.Settings = Settings;
+exports.useSettingsContext = useSettingsContext;
+//# sourceMappingURL=Settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, IconProps, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\nimport {block} from '../utils/cn';\n\nimport {SettingsSelection} from './Selection';\nimport {\n    SettingsSelectionContextProvider,\n    useSettingsSelectionContext,\n    useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {isSectionSelected} from './Selection/utils';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport type {\n    SettingsItem,\n    SettingsMenu as SettingsMenuType,\n    SettingsPageSection,\n} from './collect-settings';\nimport {getSettingsFromChildren} from './collect-settings';\nimport {escapeStringForRegExp} from './helpers';\nimport i18n from './i18n';\n\nimport './Settings.scss';\n\nconst b = block('settings');\n\nexport interface SettingsProps {\n    children: React.ReactNode;\n    title?: string;\n    filterPlaceholder?: string;\n    emptyPlaceholder?: string;\n    initialPage?: string;\n    initialSearch?: string;\n    selection?: SettingsSelection;\n    onPageChange?: (page: string | undefined) => void;\n    renderNotFound?: () => React.ReactNode;\n    renderLoading?: () => React.ReactNode;\n    loading?: boolean;\n    view?: 'normal' | 'mobile';\n    onClose?: () => void;\n    renderRightAdornment?: (item: SettingsItemProps) => React.ReactNode;\n    renderSectionRightAdornment?: (section: SettingsPageSection) => React.ReactNode;\n    showRightAdornmentOnHover?: boolean;\n}\n\nexport interface SettingsGroupProps {\n    id?: string;\n    groupTitle: string;\n    children: React.ReactNode;\n}\n\nexport interface SettingsPageProps {\n    id?: string;\n    title?: string;\n    icon?: IconProps;\n    children: React.ReactNode;\n}\n\nexport interface SettingsSectionProps {\n    id?: string;\n    title: string;\n    header?: React.ReactNode;\n    children: React.ReactNode;\n    withBadge?: boolean;\n}\n\nexport interface SettingsItemProps {\n    id?: string;\n    labelId?: string;\n    title: string;\n    highlightedTitle?: React.ReactNode | null;\n    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;\n    align?: 'top' | 'center';\n    children: React.ReactNode;\n    withBadge?: boolean;\n    mode?: 'row';\n    description?: React.ReactNode;\n}\n\nexport interface SettingsContextType\n    extends Pick<\n        SettingsProps,\n        'renderRightAdornment' | 'renderSectionRightAdornment' | 'showRightAdornmentOnHover'\n    > {}\n\nconst SettingsContext = React.createContext<SettingsContextType>({});\n\nexport const useSettingsContext = () => React.useContext(SettingsContext);\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\nconst getPageTitleById = (menu: SettingsMenuType, activePage: string) => {\n    for (const firstLevel of menu) {\n        if ('groupTitle' in firstLevel) {\n            for (const secondLevel of firstLevel.items)\n                if (secondLevel.id === activePage) return secondLevel.title;\n        } else if (firstLevel.id === activePage) return firstLevel.title;\n    }\n\n    return '';\n};\n\ntype SettingsContentProps = Omit<SettingsProps, 'loading' | 'renderLoading'>;\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 {renderSectionRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n\n    const [search, setSearch] = React.useState(initialSearch ?? '');\n    const {menu, pages} = getSettingsFromChildren(children, search);\n\n    const selected = useSettingsSelectionProviderValue(pages, selection);\n\n    const pageKeys = Object.keys(pages);\n    const selectionInitialPage =\n        selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n        selectionInitialPage ||\n            (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n    );\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n    const menuRef = React.useRef<SettingsMenuInstance>(null);\n    const isMobile = view === 'mobile';\n\n    React.useEffect(() => {\n        menuRef.current?.clearFocus();\n    }, [search]);\n\n    React.useEffect(() => {\n        const handler = () => {\n            menuRef.current?.clearFocus();\n        };\n        window.addEventListener('click', handler);\n        return () => {\n            window.removeEventListener('click', handler);\n        };\n    }, []);\n\n    let activePage = selectedPage;\n    if (!activePage || pages[activePage]?.hidden) {\n        activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n    }\n\n    const handlePageChange = (newPage: string | undefined) => {\n        setCurrentPage((prevPage) => {\n            if (prevPage !== newPage) {\n                onPageChange?.(newPage);\n            }\n            return newPage;\n        });\n    };\n\n    React.useEffect(() => {\n        if (activePage !== selectedPage) {\n            handlePageChange(activePage);\n        }\n    });\n\n    React.useEffect(() => {\n        if (!selectionInitialPage) return;\n        setCurrentPage(selectionInitialPage);\n    }, [selectionInitialPage]);\n\n    React.useEffect(() => {\n        if (selected.selectedRef?.current) {\n            selected.selectedRef.current.scrollIntoView();\n        }\n    }, [selected.selectedRef]);\n\n    const renderSetting = ({title: settingTitle, element}: SettingsItem) => {\n        return (\n            <div key={settingTitle} className={b('section-item')}>\n                {React.cloneElement(element, {\n                    ...element.props,\n                    highlightedTitle:\n                        search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle,\n                })}\n            </div>\n        );\n    };\n\n    const renderSection = (page: string, section: SettingsPageSection) => {\n        const isSelected = isSectionSelected(selected, page, section);\n\n        return (\n            <div\n                key={section.title}\n                className={b('section', {selected: isSelected})}\n                ref={isSelected ? selected.selectedRef : undefined}\n            >\n                {section.title && (\n                    <h3 className={b('section-heading')}>\n                        {renderSectionRightAdornment ? (\n                            <Flex gap={2} alignItems={'center'}>\n                                {section.title}\n                                <div\n                                    className={b('section-right-adornment', {\n                                        hidden: showRightAdornmentOnHover,\n                                    })}\n                                >\n                                    {renderSectionRightAdornment(section)}\n                                </div>\n                            </Flex>\n                        ) : (\n                            section.title\n                        )}\n                    </h3>\n                )}\n\n                {section.header &&\n                    (isMobile ? (\n                        <div className={b('section-subheader')}>{section.header}</div>\n                    ) : (\n                        section.header\n                    ))}\n\n                {section.items.map((setting) => (setting.hidden ? null : renderSetting(setting)))}\n            </div>\n        );\n    };\n\n    const renderPageContent = (page: string | undefined) => {\n        if (!page) {\n            return typeof renderNotFound === 'function' ? (\n                renderNotFound()\n            ) : (\n                <div className={b('not-found')}>{emptyPlaceholder}</div>\n            );\n        }\n\n        const filteredSections = pages[page].sections.filter((section) => !section.hidden);\n\n        return (\n            <React.Fragment>\n                {!isMobile && (\n                    <Title hasSeparator onClose={onClose}>\n                        {getPageTitleById(menu, page)}\n                    </Title>\n                )}\n\n                <div className={b('content')}>\n                    {filteredSections.map((section) => renderSection(page, section))}\n                </div>\n            </React.Fragment>\n        );\n    };\n\n    return (\n        <SettingsSelectionContextProvider value={selected}>\n            <div className={b({view})}>\n                {isMobile ? (\n                    <React.Fragment>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            onChange={setSearch}\n                            autoFocus={false}\n                            inputSize={'xl'}\n                        />\n                        <SettingsMenuMobile\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                            className={b('tabs')}\n                        />\n                    </React.Fragment>\n                ) : (\n                    <div\n                        className={b('menu')}\n                        onClick={() => {\n                            if (searchInputRef.current) {\n                                searchInputRef.current.focus();\n                            }\n                        }}\n                        onKeyDown={(event) => {\n                            if (menuRef.current) {\n                                if (menuRef.current.handleKeyDown(event)) {\n                                    event.preventDefault();\n                                }\n                            }\n                        }}\n                    >\n                        <Title>{title}</Title>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            onChange={setSearch}\n                            placeholder={filterPlaceholder}\n                            autoFocus\n                        />\n                        <SettingsMenu\n                            ref={menuRef}\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                        />\n                    </div>\n                )}\n                <div className={b('page')}>{renderPageContent(activePage)}</div>\n            </div>\n        </SettingsSelectionContextProvider>\n    );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n    const {\n        id,\n        labelId,\n        highlightedTitle,\n        children,\n        align = 'center',\n        withBadge,\n        renderTitleComponent = identity,\n        mode,\n        description,\n    } = setting;\n\n    const selected = useSettingsSelectionContext();\n    const isSettingSelected = selected.setting && selected.setting.id === id;\n\n    const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n    const titleNode = (\n        <span className={b('item-title', {badge: withBadge})}>\n            {renderTitleComponent(highlightedTitle)}\n        </span>\n    );\n    return (\n        <div\n            className={b('item', {align, mode, selected: isSettingSelected})}\n            ref={isSettingSelected ? selected.selectedRef : undefined}\n        >\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 ? <span className={b('item-description')}>{description}</span> : null}\n            </label>\n            <div className={b('item-content')}>{children}</div>\n        </div>\n    );\n};\n\nfunction prepareTitle(string: string, search: string) {\n    let temp = string.slice(0);\n    const title: React.ReactNode[] = [];\n    const parts = escapeStringForRegExp(search).split(' ').filter(Boolean);\n    let key = 0;\n    for (const part of parts) {\n        const regex = new RegExp(part, 'ig');\n        const match = regex.exec(temp);\n        if (match) {\n            const m = match[0];\n            const i = match.index;\n            if (i > 0) {\n                title.push(temp.slice(0, i));\n            }\n            title.push(\n                <strong key={key++} className={b('found')}>\n                    {m}\n                </strong>,\n            );\n            temp = temp.slice(i + m.length);\n        }\n    }\n    if (temp) {\n        title.push(temp);\n    }\n    return title;\n}\n"],"names":["block","__rest","Loader","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","isSectionSelected","Flex","Title","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","SettingsMenu","useSettingsSelectionContext","escapeStringForRegExp"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-settings{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.gn-settings_view_mobile{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.gn-settings_view_mobile{height:calc(90dvh - 56px)}}.gn-settings_view_mobile.gn-settings_loading{text-align:center}.gn-settings_view_mobile .gn-settings__loader{margin-top:20px}.gn-settings_view_mobile .gn-settings__search{margin:4px 0 16px;padding:0 20px}.gn-settings_view_mobile .gn-settings__page{overflow-y:visible}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:first-child{margin-left:20px}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:last-child{margin-right:20px}.gn-settings_view_mobile .gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.gn-settings_view_mobile .gn-settings__section-subheader{color:var(--g-color-text-secondary)}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings-subheader{margin-top:8px}.gn-settings_view_mobile .gn-settings__section-item{margin-top:0}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings__section-item,.gn-settings_view_mobile .gn-settings__section-subheader+.gn-settings__section-item{margin-top:30px}.gn-settings_view_mobile .gn-settings__section-item+.gn-settings__section-item{margin-top:22px}.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row){gap:8px;grid-template-columns:1fr}.gn-settings_view_mobile .gn-settings__item-heading{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.gn-settings_view_mobile .gn-settings__item-description{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.gn-settings_view_mobile .gn-settings__item_mode_row{grid-template-columns:1fr auto}.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading{padding-right:20px}.gn-settings_view_mobile .gn-settings__item-content{width:100%}.gn-settings_view_mobile .gn-settings__not-found{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.gn-settings_loading{grid-template-columns:auto}.gn-settings__loader{place-self:center}.gn-settings__not-found{display:grid;height:100%;place-items:center}.gn-settings__menu{border-right:1px solid var(--g-color-line-generic)}.gn-settings__heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.gn-settings__search{margin:0 20px 16px}.gn-settings__page{overflow-y:auto}.gn-settings__content{padding:20px}.gn-settings__section-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__section-heading:hover .gn-settings__section-right-adornment_hidden{opacity:1}.gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.gn-settings__section-item{margin-top:24px}.gn-settings__section+.gn-settings__section{margin-top:32px}.gn-settings__section:only-child .gn-settings__section-item:first-of-type{margin-top:0}.gn-settings__section:only-child .gn-settings__section-heading{display:none}.gn-settings__item{display:grid;grid-template-columns:216px 1fr;justify-items:start}.gn-settings__item_align_top{align-items:start}.gn-settings__item_align_center{align-items:center}.gn-settings__item-title_badge{position:relative}.gn-settings__item-title_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.gn-settings__item-description{color:var(--g-color-text-secondary);display:block;font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-top:2px;padding-right:20px}.gn-settings__item-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__item:hover .gn-settings__item-right-adornment_hidden{opacity:1}.gn-settings__item_selected,.gn-settings__section_selected{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.gn-settings__found{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Settings.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../../utils/cn.js');
+var helpers = require('../helpers.js');
+require('./SettingsMenu.scss.js');
+
+const b = cn.block('settings-menu');
+const SettingsMenu = React.forwardRef(
+// eslint-disable-next-line prefer-arrow-callback
+function SettingsMenu({ items, onChange, activeItemId }, ref) {
+    const [focusItemId, setFocusId] = React.useState();
+    const containerRef = React.useRef(null);
+    const handleChange = helpers.useStableCallback(onChange);
+    const getFocused = helpers.useCurrent(focusItemId);
+    React.useImperativeHandle(ref, () => ({
+        handleKeyDown(event) {
+            if (!containerRef.current) {
+                return false;
+            }
+            const focused = getFocused();
+            if (focused && event.key === 'Enter') {
+                handleChange(focused);
+                return true;
+            }
+            else if (event.key === 'ArrowDown') {
+                setFocusId(focusNext(containerRef.current, focused, 1));
+                return true;
+            }
+            else if (event.key === 'ArrowUp') {
+                setFocusId(focusNext(containerRef.current, focused, -1));
+                return true;
+            }
+            return false;
+        },
+        clearFocus() {
+            setFocusId(undefined);
+        },
+    }), [getFocused, handleChange]);
+    return (React.createElement("div", { ref: containerRef, className: b() }, items.map((firstLevelItem) => {
+        if ('groupTitle' in firstLevelItem) {
+            return (React.createElement("div", { key: firstLevelItem.groupTitle, className: b('group') },
+                React.createElement("span", { className: b('group-heading') }, firstLevelItem.groupTitle),
+                firstLevelItem.items.map((item) => {
+                    return renderMenuItem(item, onChange, activeItemId, focusItemId);
+                })));
+        }
+        return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);
+    })));
+});
+function renderMenuItem(item, onChange, activeItemId, focusItemId) {
+    return (React.createElement("span", { key: item.title, className: b('item', {
+            selected: activeItemId === item.id,
+            disabled: item.disabled,
+            focused: focusItemId === item.id,
+            badge: item.withBadge,
+        }), onClick: () => {
+            if (!item.disabled) {
+                onChange(item.id);
+            }
+        }, "data-id": item.id },
+        item.icon ? React.createElement(uikit.Icon, Object.assign({ size: 16 }, item.icon, { className: b('item-icon') })) : undefined,
+        React.createElement("span", null, item.title)));
+}
+function focusNext(container, focused, direction) {
+    var _a;
+    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);
+    if (elements.length === 0) {
+        return undefined;
+    }
+    let currentIndex = direction > 0 ? -1 : 0;
+    if (focused) {
+        currentIndex = Array.prototype.findIndex.call(elements, (element) => element.getAttribute('data-id') === focused);
+    }
+    currentIndex = (elements.length + currentIndex + direction) % elements.length;
+    return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== undefined ? _a : undefined;
+}
+
+exports.SettingsMenu = SettingsMenu;
+//# sourceMappingURL=SettingsMenu.js.map

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-settings-menu__group-heading{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.gn-settings-menu__group+.gn-settings-menu__group{margin-top:24px}.gn-settings-menu__item{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.gn-settings-menu__item-icon{color:var(--g-color-text-misc);margin-right:5px}.gn-settings-menu__item:hover,.gn-settings-menu__item_focused{background:var(--g-color-base-simple-hover)}.gn-settings-menu__item_selected{background:var(--g-color-base-selection)}.gn-settings-menu__item_selected.gn-settings-menu__item_focused,.gn-settings-menu__item_selected:hover{background:var(--g-color-base-selection-hover)}.gn-settings-menu__item_disabled{color:var(--g-color-text-secondary);cursor:auto}.gn-settings-menu__item_disabled:hover{background:none}.gn-settings-menu__item_disabled .gn-settings-menu__item-icon{color:var(--g-color-base-misc-heavy)}.gn-settings-menu__item_badge{position:relative}.gn-settings-menu__item_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SettingsMenu.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenu.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../../utils/cn.js');
+require('./SettingsMenuMobile.scss.js');
+
+const b = cn.block('settings-menu-mobile');
+const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
+    const ref = React.useRef(null);
+    const tabItems = React.useMemo(() => {
+        const tabItems = [];
+        items.forEach((firstLevelItem) => {
+            if ('groupTitle' in firstLevelItem) {
+                tabItems.push(...firstLevelItem.items.map(({ id, title, disabled, withBadge }) => ({
+                    id,
+                    title,
+                    disabled,
+                    className: b('item', { badge: withBadge }),
+                })));
+            }
+            else {
+                const { id, title, disabled, withBadge } = firstLevelItem;
+                tabItems.push({ id, title, disabled, className: b('item', { badge: withBadge }) });
+            }
+        });
+        return tabItems;
+    }, [items]);
+    const handleTouchMove = (e) => {
+        e.stopPropagation();
+    };
+    return (React.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
+        React.createElement(uikit.Tabs, { items: tabItems, className: b(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
+};
+
+exports.SettingsMenuMobile = SettingsMenuMobile;
+//# sourceMappingURL=SettingsMenuMobile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenuMobile.js","sources":["../../../../../../src/components/Settings/SettingsMenuMobile/SettingsMenuMobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Tabs, TabsItemProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {SettingsMenuProps} from '../types';\n\nimport './SettingsMenuMobile.scss';\n\nconst b = block('settings-menu-mobile');\n\nexport const SettingsMenuMobile = ({\n    items,\n    onChange,\n    activeItemId,\n    className,\n}: SettingsMenuProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const tabItems = React.useMemo(() => {\n        const tabItems: TabsItemProps[] = [];\n\n        items.forEach((firstLevelItem) => {\n            if ('groupTitle' in firstLevelItem) {\n                tabItems.push(\n                    ...firstLevelItem.items.map(({id, title, disabled, withBadge}) => ({\n                        id,\n                        title,\n                        disabled,\n                        className: b('item', {badge: withBadge}),\n                    })),\n                );\n            } else {\n                const {id, title, disabled, withBadge} = firstLevelItem;\n                tabItems.push({id, title, disabled, className: b('item', {badge: withBadge})});\n            }\n        });\n        return tabItems;\n    }, [items]);\n\n    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n    };\n\n    return (\n        <div ref={ref} onTouchMove={handleTouchMove}>\n            <Tabs\n                items={tabItems}\n                className={b(null, className)}\n                size=\"l\"\n                activeTab={activeItemId}\n                onSelectTab={onChange}\n            />\n        </div>\n    );\n};\n"],"names":["block","Tabs"],"mappings":";;;;;;;AASA,MAAM,CAAC,GAAGA,QAAK,CAAC,sBAAsB,CAAC;AAEhC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,GACO,KAAI;IACpB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;QAChC,MAAM,QAAQ,GAAoB,EAAE;AAEpC,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,cAAc,KAAI;AAC7B,YAAA,IAAI,YAAY,IAAI,cAAc,EAAE;gBAChC,QAAQ,CAAC,IAAI,CACT,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM;oBAC/D,EAAE;oBACF,KAAK;oBACL,QAAQ;oBACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC;iBAC3C,CAAC,CAAC,CACN;;iBACE;gBACH,MAAM,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,cAAc;gBACvD,QAAQ,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,EAAC,CAAC;;AAEtF,SAAC,CAAC;AACF,QAAA,OAAO,QAAQ;AACnB,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,UAAI,EAAA,EACD,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,QAAQ,EACvB,CAAA,CACA;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-settings-menu-mobile.g-tabs_direction_horizontal{-ms-overflow-style:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:none;scrollbar-width:none}.gn-settings-menu-mobile.g-tabs_direction_horizontal::-webkit-scrollbar{display:none}.gn-settings-menu-mobile__item_badge{position:relative}.gn-settings-menu-mobile__item_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:-8px;top:11px;width:6px}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SettingsMenuMobile.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenuMobile.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var debounce = require('../../../_virtual/debounce.js');
+var cn = require('../../utils/cn.js');
+var helpers = require('../helpers.js');
+var index = require('../i18n/index.js');
+
+const b = cn.block('settings-search');
+function SettingsSearch({ className, initialValue, onChange, debounce: debounce$1 = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
+    const [value, setValue] = React.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
+    const onChangeDebounced = helpers.useStableCallback(debounce(onChange, debounce$1));
+    const handleUpdate = helpers.useStableCallback((updated) => {
+        setValue(updated);
+        onChangeDebounced(updated);
+    });
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement(uikit.TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
+                'aria-label': index('label_search'),
+            } })));
+}
+
+exports.SettingsSearch = SettingsSearch;
+//# sourceMappingURL=SettingsSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsSearch.js","sources":["../../../../../../src/components/Settings/SettingsSearch/SettingsSearch.tsx"],"sourcesContent":["import React from 'react';\n\nimport {TextInput, TextInputSize} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {block} from '../../utils/cn';\nimport {useStableCallback} from '../helpers';\nimport i18n from '../i18n';\n\nconst b = block('settings-search');\n\ninterface SettingsSearchProps {\n    className?: string;\n    initialValue?: string;\n    onChange: (search: string) => void;\n    debounce?: number;\n    inputRef?: React.Ref<HTMLInputElement>;\n    inputSize?: TextInputSize;\n    placeholder?: string;\n    autoFocus?: boolean;\n}\n\nexport function SettingsSearch({\n    className,\n    initialValue,\n    onChange,\n    debounce = 200,\n    inputRef,\n    inputSize,\n    placeholder,\n    autoFocus = true,\n}: SettingsSearchProps) {\n    const [value, setValue] = React.useState(initialValue ?? '');\n\n    const onChangeDebounced = useStableCallback(debounceFn(onChange, debounce));\n    const handleUpdate = useStableCallback((updated: string) => {\n        setValue(updated);\n        onChangeDebounced(updated);\n    });\n\n    return (\n        <div className={b(null, className)}>\n            <TextInput\n                value={value}\n                controlRef={inputRef}\n                hasClear\n                autoFocus={autoFocus}\n                size={inputSize}\n                placeholder={placeholder}\n                onUpdate={handleUpdate}\n                controlProps={{\n                    'aria-label': i18n('label_search'),\n                }}\n            />\n        </div>\n    );\n}\n"],"names":["block","debounce","useStableCallback","debounceFn","TextInput","i18n"],"mappings":";;;;;;;;;AASA,MAAM,CAAC,GAAGA,QAAK,CAAC,iBAAiB,CAAC;AAa5B,SAAU,cAAc,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,QAAQ,YACRC,UAAQ,GAAG,GAAG,EACd,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,IAAI,GACE,EAAA;AAClB,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAZ,YAAY,GAAI,EAAE,CAAC;IAE5D,MAAM,iBAAiB,GAAGC,yBAAiB,CAACC,QAAU,CAAC,QAAQ,EAAEF,UAAQ,CAAC,CAAC;AAC3E,IAAA,MAAM,YAAY,GAAGC,yBAAiB,CAAC,CAAC,OAAe,KAAI;QACvD,QAAQ,CAAC,OAAO,CAAC;QACjB,iBAAiB,CAAC,OAAO,CAAC;AAC9B,KAAC,CAAC;IAEF,QACI,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA;AAC9B,QAAA,KAAA,CAAA,aAAA,CAACE,eAAS,EAAA,EACN,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAA,IAAA,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE;AACV,gBAAA,YAAY,EAAEC,KAAI,CAAC,cAAc,CAAC;aACrC,EACH,CAAA,CACA;AAEd;;;;"}

package/build/cjs/components/Settings/__stories__/Settings.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const ViewMobile: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './SettingsDemo.scss';
+export interface DemoProps {
+    title: string;
+}
+export interface DemoRowProps {
+    title: string;
+}
+export declare const SettingsComponent: React.MemoExoticComponent<({ initialPage, withBadge, onClose, }: {
+    initialPage?: string;
+    withBadge?: boolean;
+    onClose: () => void;
+}) => React.JSX.Element>;
+export declare function SettingsDemo(): React.JSX.Element;

package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './SettingsMobileDemo.scss';
+export declare const SettingsMobileComponent: React.MemoExoticComponent<({ initialPage, withBadge, onClose, }: {
+    initialPage?: string;
+    withBadge?: boolean;
+    onClose?: () => void;
+}) => React.JSX.Element>;
+export declare function SettingsMobileDemo(): React.JSX.Element;

package/build/cjs/components/Settings/__tests__/helpersPlaywright.d.ts

@@ -1,2 +1,2 @@
 import * as DefaultSettingsStories from '../__stories__/Settings.stories';
-export declare const SettingsStories: Omit<import("@storybook/types").StoriesWithPartialProps<import("@storybook/react/dist/types-0fc72a6d").R, typeof DefaultSettingsStories>, keyof import("@storybook/types").Store_CSFExports<import("@storybook/types").Renderer, import("@storybook/types").Args>>;
+export declare const SettingsStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultSettingsStories>, keyof import("@storybook/core/types").Store_CSFExports>;

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

@@ -26,8 +26,6 @@ export interface SettingsPageSection {
     items: SettingsItem[];
     hidden?: boolean;
     withBadge?: boolean;
-    showTitle?: boolean;
-    onlyChild?: boolean;
 }
 export interface SettingsItem {
     id?: string;