@gravity-ui/navigation 3.11.0 → 4.0.0

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

@@ -0,0 +1,80 @@
+import './SettingsMenu.css';
+import React__default from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { createBlock } from '../../utils/cn.js';
+import { useStableCallback, useCurrent } from '../helpers.js';
+import styles from './SettingsMenu.module.scss.js';
+
+const b = createBlock('settings-menu', styles);
+const SettingsMenu = React__default.forwardRef(
+// eslint-disable-next-line prefer-arrow-callback
+function SettingsMenu({ items, onChange, activeItemId }, ref) {
+    const [focusItemId, setFocusId] = React__default.useState();
+    const containerRef = React__default.useRef(null);
+    const handleChange = useStableCallback(onChange);
+    const getFocused = useCurrent(focusItemId);
+    React__default.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__default.createElement("div", { ref: containerRef, className: b() }, items.map((firstLevelItem) => {
+        if ('groupTitle' in firstLevelItem) {
+            return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b('group') },
+                React__default.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__default.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__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b('item-icon') })) : undefined,
+        React__default.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;
+}
+
+export { SettingsMenu };
+//# sourceMappingURL=SettingsMenu.js.map

package/build/esm/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 {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n    handleKeyDown(event: React.KeyboardEvent): boolean;\n    clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n    // eslint-disable-next-line prefer-arrow-callback\n    function SettingsMenu({items, onChange, activeItemId}, ref) {\n        const [focusItemId, setFocusId] = React.useState<string>();\n        const 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":["React"],"mappings":"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"}

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"gn-settings-menu__group-heading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gnSettingsMenuGroupHeading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gn-settings-menu__group":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gnSettingsMenuGroup":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gn-settings-menu__item":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gnSettingsMenuItem":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gn-settings-menu__item-icon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gnSettingsMenuItemIcon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gn-settings-menu__item_focused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gnSettingsMenuItemFocused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gn-settings-menu__item_selected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gnSettingsMenuItemSelected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gn-settings-menu__item_disabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gnSettingsMenuItemDisabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gn-settings-menu__item_badge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X","gnSettingsMenuItemBadge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X"};
+
+export { styles as default };
+//# sourceMappingURL=SettingsMenu.module.scss.js.map

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.module.scss.js.map

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

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

@@ -0,0 +1 @@
+.SettingsMenuMobile-module__gn-settings-menu-mobile___B2EcN.SettingsMenuMobile-module__g-tabs_direction_horizontal___LDcWv{-ms-overflow-style:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:none;scrollbar-width:none}.SettingsMenuMobile-module__gn-settings-menu-mobile___B2EcN.SettingsMenuMobile-module__g-tabs_direction_horizontal___LDcWv::-webkit-scrollbar{display:none}.SettingsMenuMobile-module__gn-settings-menu-mobile__item_badge___UIX5Q{position:relative}.SettingsMenuMobile-module__gn-settings-menu-mobile__item_badge___UIX5Q:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:-8px;top:11px;width:6px}

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

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

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

@@ -0,0 +1,36 @@
+import './SettingsMenuMobile.css';
+import React__default from 'react';
+import { Tabs } from '@gravity-ui/uikit/legacy';
+import { createBlock } from '../../utils/cn.js';
+import styles from './SettingsMenuMobile.module.scss.js';
+
+const b = createBlock('settings-menu-mobile', styles);
+const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
+    const ref = React__default.useRef(null);
+    const tabItems = React__default.useMemo(() => {
+        const result = [];
+        items.forEach((firstLevelItem) => {
+            if ('groupTitle' in firstLevelItem) {
+                result.push(...firstLevelItem.items.map(({ id, title, disabled, withBadge }) => ({
+                    id,
+                    title,
+                    disabled,
+                    className: b('item', { badge: withBadge }),
+                })));
+            }
+            else {
+                const { id, title, disabled, withBadge } = firstLevelItem;
+                result.push({ id, title, disabled, className: b('item', { badge: withBadge }) });
+            }
+        });
+        return result;
+    }, [items]);
+    const handleTouchMove = (e) => {
+        e.stopPropagation();
+    };
+    return (React__default.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
+        React__default.createElement(Tabs, { items: tabItems, className: b(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
+};
+
+export { SettingsMenuMobile };
+//# sourceMappingURL=SettingsMenuMobile.js.map

package/build/esm/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 {\n    Tabs as LegacyTabs,\n    type TabsItemProps as LegacyTabsItemProps,\n} from '@gravity-ui/uikit/legacy';\n\nimport {createBlock} from '../../utils/cn';\nimport {SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenuMobile.module.scss';\n\nconst b = createBlock('settings-menu-mobile', styles);\n\nexport const SettingsMenuMobile = ({\n    items,\n    onChange,\n    activeItemId,\n    className,\n}: SettingsMenuProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const tabItems = React.useMemo(() => {\n        const result: LegacyTabsItemProps[] = [];\n\n        items.forEach((firstLevelItem) => {\n            if ('groupTitle' in firstLevelItem) {\n                result.push(\n                    ...firstLevelItem.items.map(({id, title, disabled, withBadge}) => ({\n                        id,\n                        title,\n                        disabled,\n                        className: b('item', {badge: withBadge}),\n                    })),\n                );\n            } else {\n                const {id, title, disabled, withBadge} = firstLevelItem;\n                result.push({id, title, disabled, className: b('item', {badge: withBadge})});\n            }\n        });\n        return result;\n    }, [items]);\n\n    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n    };\n\n    return (\n        <div ref={ref} onTouchMove={handleTouchMove}>\n            <LegacyTabs\n                items={tabItems}\n                className={b(null, className)}\n                size=\"l\"\n                activeTab={activeItemId}\n                onSelectTab={onChange}\n            />\n        </div>\n    );\n};\n"],"names":["React","LegacyTabs"],"mappings":";;;;;AAYA,MAAM,CAAC,GAAG,WAAW,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,GACO,KAAI;IACpB,MAAM,GAAG,GAAGA,cAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAGA,cAAK,CAAC,OAAO,CAAC,MAAK;QAChC,MAAM,MAAM,GAA0B,EAAE;AAExC,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,cAAc,KAAI;AAC7B,YAAA,IAAI,YAAY,IAAI,cAAc,EAAE;gBAChC,MAAM,CAAC,IAAI,CACP,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM;oBAC/D,EAAE;oBACF,KAAK;oBACL,QAAQ;oBACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC;iBAC3C,CAAC,CAAC,CACN;;iBACE;gBACH,MAAM,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,cAAc;gBACvD,MAAM,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,EAAC,CAAC;;AAEpF,SAAC,CAAC;AACF,QAAA,OAAO,MAAM;AACjB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,eAAe,GAAG,CAAC,CAAmC,KAAI;QAC5D,CAAC,CAAC,eAAe,EAAE;AACvB,KAAC;IAED,QACIA,sCAAK,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAA;AACvC,QAAAA,cAAA,CAAA,aAAA,CAACC,IAAU,EAAA,EACP,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,QAAQ,EACvB,CAAA,CACA;AAEd;;;;"}

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

@@ -0,0 +1,4 @@
+var styles = {"gn-settings-menu-mobile":"SettingsMenuMobile-module__gn-settings-menu-mobile___B2EcN","gnSettingsMenuMobile":"SettingsMenuMobile-module__gn-settings-menu-mobile___B2EcN","g-tabs_direction_horizontal":"SettingsMenuMobile-module__g-tabs_direction_horizontal___LDcWv","gTabsDirectionHorizontal":"SettingsMenuMobile-module__g-tabs_direction_horizontal___LDcWv","gn-settings-menu-mobile__item_badge":"SettingsMenuMobile-module__gn-settings-menu-mobile__item_badge___UIX5Q","gnSettingsMenuMobileItemBadge":"SettingsMenuMobile-module__gn-settings-menu-mobile__item_badge___UIX5Q"};
+
+export { styles as default };
+//# sourceMappingURL=SettingsMenuMobile.module.scss.js.map

package/build/esm/components/Settings/SettingsMenuMobile/SettingsMenuMobile.module.scss.js.map

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

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

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { Title } from '../../Title/Title.js';
+import { isSectionSelected } from '../Selection/utils.js';
+import { SettingsSection } from '../SettingsSection.js';
+import { b } from '../b.js';
+import { getPageTitleById } from './getPageTitleById.js';
+
+const SettingsPageComponent = ({ menu, pages, selected, isMobile, search, page, renderNotFound, emptyPlaceholder, onClose, }) => {
+    if (!page) {
+        return typeof renderNotFound === 'function' ? (React__default.createElement(React__default.Fragment, null, renderNotFound())) : (React__default.createElement("div", { className: b('not-found') }, emptyPlaceholder));
+    }
+    const filteredSections = pages[page].sections.filter((section) => !section.hidden);
+    return (React__default.createElement(React__default.Fragment, null,
+        !isMobile && (React__default.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
+        React__default.createElement("div", { className: b('content') }, filteredSections.map((section) => {
+            const isSelected = isSectionSelected(selected, page, section);
+            return (React__default.createElement(SettingsSection, Object.assign({ isSelected: isSelected, isMobile: isMobile, search: search }, section, { key: section.title })));
+        }))));
+};
+
+export { SettingsPageComponent };
+//# sourceMappingURL=SettingsPageComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPageComponent.js","sources":["../../../../../../src/components/Settings/SettingsPage/SettingsPageComponent.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Title} from '../../Title';\nimport {SettingsSelectionProviderContextValue} from '../Selection/context';\nimport {isSectionSelected} from '../Selection/utils';\nimport {SettingsSection} from '../SettingsSection';\nimport {b} from '../b';\nimport {SettingsMenu as CollectSettingsSettingsMenu, SettingsPage} from '../collect-settings';\nimport {SettingsContentProps} from '../types';\n\nimport {getPageTitleById} from './getPageTitleById';\n\ntype Props = {\n    menu: CollectSettingsSettingsMenu;\n    pages: Record<string, SettingsPage>;\n    page: string | undefined;\n    isMobile: boolean;\n    search: string;\n    selected: SettingsSelectionProviderContextValue;\n} & Pick<SettingsContentProps, 'renderNotFound' | 'emptyPlaceholder' | 'onClose'>;\n\nexport const SettingsPageComponent = ({\n    menu,\n    pages,\n    selected,\n    isMobile,\n    search,\n    page,\n    renderNotFound,\n    emptyPlaceholder,\n    onClose,\n}: Props): React.ReactElement => {\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) => {\n                    const isSelected = isSectionSelected(selected, page, section);\n\n                    return (\n                        <SettingsSection\n                            isSelected={isSelected}\n                            isMobile={isMobile}\n                            search={search}\n                            {...section}\n                            key={section.title}\n                        />\n                    );\n                })}\n            </div>\n        </React.Fragment>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AAqBa,MAAA,qBAAqB,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,cAAc,EACd,gBAAgB,EAChB,OAAO,GACH,KAAwB;IAC5B,IAAI,CAAC,IAAI,EAAE;AACP,QAAA,OAAO,OAAO,cAAc,KAAK,UAAU,IACvCA,cAAG,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAE,CAAI,KAEvBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAG,EAAA,gBAAgB,CAAO,CAC3D;;IAGL,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;AAElF,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACV,QAAA,CAAC,QAAQ,KACNA,6BAAC,KAAK,EAAA,EAAC,YAAY,EAAC,IAAA,EAAA,OAAO,EAAE,OAAO,EAAA,EAC/B,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CACzB,CACX;AAED,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAA,EACvB,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,KAAI;YAC9B,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC;YAE7D,QACIA,cAAC,CAAA,aAAA,CAAA,eAAe,EACZ,MAAA,CAAA,MAAA,CAAA,EAAA,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACV,EAAA,OAAO,EACX,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,EACpB,CAAA,CAAA;AAEV,SAAC,CAAC,CACA,CACO;AAEzB;;;;"}

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

@@ -0,0 +1,15 @@
+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 '';
+};
+
+export { getPageTitleById };
+//# sourceMappingURL=getPageTitleById.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getPageTitleById.js","sources":["../../../../../../src/components/Settings/SettingsPage/getPageTitleById.tsx"],"sourcesContent":["import type {SettingsMenu as SettingsMenuType} from '../collect-settings';\n\nexport const 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"],"names":[],"mappings":"MAEa,gBAAgB,GAAG,CAAC,IAAsB,EAAE,UAAkB,KAAI;AAC3E,IAAA,KAAK,MAAM,UAAU,IAAI,IAAI,EAAE;AAC3B,QAAA,IAAI,YAAY,IAAI,UAAU,EAAE;AAC5B,YAAA,KAAK,MAAM,WAAW,IAAI,UAAU,CAAC,KAAK;AACtC,gBAAA,IAAI,WAAW,CAAC,EAAE,KAAK,UAAU;oBAAE,OAAO,WAAW,CAAC,KAAK;;AAC5D,aAAA,IAAI,UAAU,CAAC,EAAE,KAAK,UAAU;YAAE,OAAO,UAAU,CAAC,KAAK;;AAGpE,IAAA,OAAO,EAAE;AACb;;;;"}

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

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { b } from '../b.js';
+import { prepareTitle } from './prepareTitle.js';
+
+const SettingRow = ({ title: settingTitle, element, search, }) => {
+    return (React__default.createElement("div", { className: b('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle }))));
+};
+SettingRow.displayName = 'SettingRow';
+
+export { SettingRow };
+//# sourceMappingURL=SettingsRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsRow.js","sources":["../../../../../../src/components/Settings/SettingsRow/SettingsRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport {b} from '../b';\nimport type {SettingsItem} from '../collect-settings';\n\nimport {prepareTitle} from './prepareTitle';\n\nexport const SettingRow = ({\n    title: settingTitle,\n    element,\n    search,\n}: SettingsItem & {search: string}): React.ReactElement => {\n    return (\n        <div 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\nSettingRow.displayName = 'SettingRow';\n"],"names":["React"],"mappings":";;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACvB,KAAK,EAAE,YAAY,EACnB,OAAO,EACP,MAAM,GACwB,KAAwB;AACtD,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAA,EAC5BA,cAAK,CAAC,YAAY,CAAC,OAAO,kCACpB,OAAO,CAAC,KAAK,CAChB,EAAA,EAAA,gBAAgB,EACZ,MAAM,IAAI,YAAY,GAAG,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,YAAY,EAChF,CAAA,CAAA,CACA;AAEd;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { b } from '../b.js';
+import { escapeStringForRegExp } from '../helpers.js';
+
+function prepareTitle(string, search) {
+    let temp = string.slice(0);
+    const title = [];
+    const parts = 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__default.createElement("strong", { key: key++, className: b('found') }, m));
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}
+
+export { prepareTitle };
+//# sourceMappingURL=prepareTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prepareTitle.js","sources":["../../../../../../src/components/Settings/SettingsRow/prepareTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport {b} from '../b';\nimport {escapeStringForRegExp} from '../helpers';\n\nexport function 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":["React"],"mappings":";;;;AAKgB,SAAA,YAAY,CAAC,MAAc,EAAE,MAAc,EAAA;IACvD,IAAI,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1B,MAAM,KAAK,GAAsB,EAAE;AACnC,IAAA,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IACtE,IAAI,GAAG,GAAG,CAAC;AACX,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC;QACpC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,KAAK,EAAE;AACP,YAAA,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;AAClB,YAAA,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK;AACrB,YAAA,IAAI,CAAC,GAAG,CAAC,EAAE;AACP,gBAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;;AAEhC,YAAA,KAAK,CAAC,IAAI,CACNA,yCAAQ,GAAG,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,IACpC,CAAC,CACG,CACZ;YACD,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;;;IAGvC,IAAI,IAAI,EAAE;AACN,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;AAEpB,IAAA,OAAO,KAAK;AAChB;;;;"}

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

@@ -0,0 +1,67 @@
+import React__default from 'react';
+import { ListUl } from '@gravity-ui/icons';
+import last from '../../../_virtual/last.js';
+import i18n from '../i18n/index.js';
+
+const allSearchResultsId = 'allSearchResults';
+function useAllResultsPage({ pages, handlePageChange, }) {
+    const allSearchResultsPage = pages[allSearchResultsId];
+    const hasAllSearchResultsPage = Boolean(allSearchResultsPage);
+    React__default.useEffect(() => {
+        if (hasAllSearchResultsPage) {
+            handlePageChange(allSearchResultsId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasAllSearchResultsPage]);
+    return {
+        isAllSearchPage: (page) => page === allSearchResultsId,
+    };
+}
+function getSettingsDescriptionWithAllResultsPage(settingsDescription) {
+    const { menu, pages } = settingsDescription;
+    const menuWithoutAllResults = getMenuWithoutAllResults(menu);
+    const pagesList = Object.values(pages);
+    return Object.assign(Object.assign({}, settingsDescription), { menu: [createAllResultsMenuItem(), ...menuWithoutAllResults], pages: Object.assign(Object.assign({}, pages), { [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults) }) });
+}
+function getMenuWithoutAllResults(menu) {
+    return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);
+}
+function createAllResultsPage(pages, menu) {
+    const breadcrumbsMap = {};
+    for (const menuItem of menu) {
+        if ('items' in menuItem) {
+            for (const pageItem of menuItem.items) {
+                breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];
+            }
+        }
+        else {
+            breadcrumbsMap[menuItem.id] = [menuItem.title];
+        }
+    }
+    return {
+        id: allSearchResultsId,
+        sections: Object.values(pages)
+            .map((page) => {
+            return page.sections.map((section) => {
+                var _a;
+                const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
+                const lastBreadcrumb = last(breadcrumbs);
+                const breadcrumbsTitlePart = breadcrumbs.join(' / ');
+                return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
+                        ? breadcrumbsTitlePart
+                        : `${breadcrumbsTitlePart} / ${section.title}` });
+            });
+        })
+            .flat(),
+    };
+}
+function createAllResultsMenuItem() {
+    return {
+        id: allSearchResultsId,
+        title: i18n('label_all-results'),
+        icon: { data: ListUl },
+    };
+}
+
+export { getSettingsDescriptionWithAllResultsPage, useAllResultsPage };
+//# sourceMappingURL=AllResultsPage.js.map

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

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

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

@@ -0,0 +1,32 @@
+import React__default, { useEffect } from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import debounceFn from '../../../_virtual/debounce.js';
+import { cn } from '../../utils/cn.js';
+import { useStableCallback } from '../helpers.js';
+import i18n from '../i18n/index.js';
+
+const b = cn('settings-search');
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
+    const [value, setValue] = React__default.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
+    const onChangeDebounced = debounceFn(onChange, debounce);
+    const handleUpdate = useStableCallback((updated) => {
+        setValue(updated);
+        onChangeDebounced(updated);
+    });
+    useEffect(() => {
+        if (value && selection) {
+            onChangeDebounced.cancel();
+            setValue('');
+            onChange('');
+        }
+        // Remove any search, if selection is passed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selection]);
+    return (React__default.createElement("div", { className: b(null, className) },
+        React__default.createElement(TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
+                'aria-label': i18n('label_search'),
+            } })));
+}
+
+export { SettingsSearch };
+//# sourceMappingURL=SettingsSearch.js.map

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

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

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

@@ -0,0 +1,24 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { useSettingsContext } from './SettingsContext/useSettingsContext.js';
+import { SettingRow } from './SettingsRow/SettingsRow.js';
+import { b } from './b.js';
+
+const SettingsSection = React__default.forwardRef((_a, ref) => {
+    var { search, isMobile, isSelected } = _a, section = __rest(_a, ["search", "isMobile", "isSelected"]);
+    const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    return (React__default.createElement("div", { className: b('section', { selected: isSelected }), ref: isSelected ? ref : undefined },
+        section.title && !section.hideTitle && (React__default.createElement("h3", { className: b('section-heading') }, renderSectionRightAdornment ? (React__default.createElement(Flex, { gap: 2, alignItems: 'center' },
+            section.title,
+            React__default.createElement("div", { className: b('section-right-adornment', {
+                    hidden: showRightAdornmentOnHover,
+                }) }, renderSectionRightAdornment(section)))) : (section.title))),
+        section.header &&
+            (isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
+        section.items.map((setting) => setting.hidden ? null : (React__default.createElement(SettingRow, Object.assign({}, setting, { key: setting.title, search: search }))))));
+});
+SettingsSection.displayName = 'SettingsSection';
+
+export { SettingsSection };
+//# sourceMappingURL=SettingsSection.js.map

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

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

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

@@ -1 +1,6 @@
-export declare const b: import("@bem-react/classname").ClassNameFormatter;
+export declare const b: {
+    (): string;
+    (mods?: import("@bem-react/classname").NoStrictEntityMods | null, mix?: string | string[] | undefined): string;
+    (elemName: string, elemMix?: string | string[] | undefined): string;
+    (elemName: string, elemMods?: import("@bem-react/classname").NoStrictEntityMods | null, elemMix?: string | string[] | undefined): string;
+};

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

@@ -0,0 +1,7 @@
+import { createBlock } from '../utils/cn.js';
+import styles from './Settings.module.scss.js';
+
+const b = createBlock('settings', styles);
+
+export { b };
+//# sourceMappingURL=b.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"b.js","sources":["../../../../../src/components/Settings/b.tsx"],"sourcesContent":["import {createBlock} from '../utils/cn';\n\nimport styles from './Settings.module.scss';\n\nexport const b = createBlock('settings', styles);\n"],"names":[],"mappings":";;;AAIa,MAAA,CAAC,GAAG,WAAW,CAAC,UAAU,EAAE,MAAM;;;;"}