@gravity-ui/navigation 3.0.0-beta.2 → 3.0.0-beta.4

package/build/cjs/Settings-x0a3P0Vr.js

@@ -1,586 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-D25eJ2i9.js');
-var React = require('react');
-var uikit = require('@gravity-ui/uikit');
-var _commonjsHelpers = require('./_commonjsHelpers-BJu3ubxk.js');
-var Title = require('./Title-CzxcSMoP.js');
-var cn = require('./cn-DSlPZbcs.js');
-var styleInject_es = require('./style-inject.es-CsU6UJbw.js');
-var debounce = require('./debounce-RFF04eVR.js');
-var i18n$1 = require('@gravity-ui/uikit/i18n');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function useStableCallback(func) {
-    const funcRef = React__namespace.useRef();
-    React__namespace.useEffect(() => {
-        funcRef.current = func;
-        return () => {
-            funcRef.current = undefined;
-        };
-    }, [func]);
-    return React__namespace.useCallback((...args) => {
-        if (typeof funcRef.current === 'function') {
-            return funcRef.current(...args);
-        }
-        return undefined;
-    }, []);
-}
-function useCurrent(value) {
-    const ref = React__namespace.useRef(value);
-    ref.current = value;
-    return React__namespace.useCallback(() => ref.current, []);
-}
-function invariant(cond, message) {
-    if (!cond) {
-        throw new Error(message);
-    }
-}
-function escapeStringForRegExp(input) {
-    return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function getSettingsFromChildren(children, searchText = '') {
-    // 'abc def fg' -> abc.*?cde.*?fg
-    const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
-    const filterRe = new RegExp(preparedFilter, 'i');
-    return getSettingsFromChildrenRecursive(children, '', filterRe);
-}
-function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
-    const menu = [];
-    const pages = {};
-    let hasGroup = false;
-    let hasItems = false;
-    React.Children.forEach(children, (element) => {
-        var _a, _b;
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            const { menu: menuFragment, pages: pagesFragment } = getSettingsFromChildrenRecursive(element.props.children, basepath, filterRe);
-            menu.push(...menuFragment);
-            Object.assign(pages, pagesFragment);
-        }
-        else if (element.props.groupTitle) {
-            if (process.env.NODE_ENV === 'development') {
-                invariant(!hasItems, 'Setting menu must not mix groups and pages on one level');
-            }
-            const pageId = `${basepath}/${(_a = element.props.id) !== null && _a !== undefined ? _a : element.props.groupTitle}`;
-            hasGroup = true;
-            const { menu: menuFragment, pages: pagesFragment } = getSettingsFromChildrenRecursive(element.props.children, pageId, filterRe);
-            if (process.env.NODE_ENV === 'development') {
-                const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
-                invariant(!hasInnerGroup, `Group ${element.props.groupTitle} should not include groups`);
-            }
-            menu.push({
-                groupTitle: element.props.groupTitle,
-                // @ts-ignore
-                items: menuFragment,
-            });
-            Object.assign(pages, pagesFragment);
-        }
-        else {
-            hasItems = true;
-            const pageId = `${basepath}/${(_b = element.props.id) !== null && _b !== undefined ? _b : element.props.title}`;
-            if (process.env.NODE_ENV === 'development') {
-                invariant(Boolean(element.props.title), 'Component must include title prop');
-                invariant(!hasGroup, 'Setting menu must not mix groups and pages on one level');
-                invariant(!pages[pageId], `Setting menu page id must be uniq (${pageId})`);
-            }
-            pages[pageId] = getSettingsPageFromChildren(element.props.children, filterRe);
-            pages[pageId].id = pageId;
-            menu.push({
-                id: pageId,
-                title: element.props.title,
-                icon: element.props.icon,
-                withBadge: pages[pageId].withBadge,
-                disabled: pages[pageId].hidden,
-            });
-        }
-    });
-    return { menu, pages };
-}
-function getSettingsPageFromChildren(children, filterRe) {
-    const page = { id: '', sections: [], hidden: true };
-    React.Children.forEach(children, (element) => {
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            const { sections, withBadge, hidden } = getSettingsPageFromChildren(element.props.children, filterRe);
-            page.sections.push(...sections);
-            page.withBadge = withBadge || page.withBadge;
-            page.hidden = hidden && page.hidden;
-        }
-        else {
-            const { withBadge } = element.props;
-            const { items, hidden } = getSettingsItemsFromChildren(element.props.children, filterRe);
-            page.withBadge = withBadge || page.withBadge;
-            page.hidden = hidden && page.hidden;
-            page.sections.push(Object.assign(Object.assign({}, element.props), { withBadge,
-                items,
-                hidden }));
-        }
-    });
-    return page;
-}
-function getSettingsItemsFromChildren(children, filterRe) {
-    let hidden = true;
-    const items = [];
-    React.Children.forEach(children, (element) => {
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            const fragmentItems = getSettingsItemsFromChildren(element.props.children, filterRe);
-            items.push(...fragmentItems.items);
-            hidden = hidden && fragmentItems.hidden;
-        }
-        else {
-            const item = Object.assign(Object.assign({}, element.props), { element, hidden: !filterRe.test(element.props.title) });
-            items.push(item);
-            hidden = hidden && item.hidden;
-        }
-    });
-    return { items, hidden };
-}
-function getSelectedSettingsPart(pages, selection) {
-    if (!selection.settingId && !selection.section && !selection.page) {
-        return {};
-    }
-    for (const page of Object.values(pages)) {
-        if (!selection.settingId && !selection.section) {
-            if (selection.page !== page.id)
-                continue;
-            return { page };
-        }
-        for (const section of page.sections) {
-            if (selection.settingId) {
-                for (const setting of section.items) {
-                    if (setting.id === selection.settingId) {
-                        return { page, section, setting };
-                    }
-                }
-            }
-            else if (selection.section &&
-                ('id' in selection.section
-                    ? selection.section.id === section.id
-                    : selection.section.title === section.title)) {
-                return { page, section };
-            }
-        }
-    }
-    return {};
-}
-
-const defaultValue = {};
-const context = React.createContext(defaultValue);
-context.displayName = 'SettingsSelectionContext';
-function useSettingsSelectionProviderValue(pages, selection) {
-    const selectedRef = React.useRef(null);
-    const contextValue = React.useMemo(() => {
-        if (!selection)
-            return { selectedRef };
-        return Object.assign({ selectedRef }, getSelectedSettingsPart(pages, selection));
-    }, [pages, selection]);
-    return contextValue;
-}
-const SettingsSelectionContextProvider = context.Provider;
-function useSettingsSelectionContext() {
-    return React.useContext(context);
-}
-
-/**
- * This method returns the first argument it receives.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Util
- * @param {*} value Any value.
- * @returns {*} Returns `value`.
- * @example
- *
- * var object = { 'a': 1 };
- *
- * console.log(_.identity(object) === object);
- * // => true
- */
-
-var identity_1;
-var hasRequiredIdentity;
-
-function requireIdentity () {
-	if (hasRequiredIdentity) return identity_1;
-	hasRequiredIdentity = 1;
-	function identity(value) {
-	  return value;
-	}
-
-	identity_1 = identity;
-	return identity_1;
-}
-
-var identityExports = requireIdentity();
-var identity = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(identityExports);
-
-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;
-    }
-}
-
-var css_248z$2 = ".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.styleInject(css_248z$2);
-
-const b$3 = 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 = useStableCallback(onChange);
-    const getFocused = 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$3() }, items.map((firstLevelItem) => {
-        if ('groupTitle' in firstLevelItem) {
-            return (React.createElement("div", { key: firstLevelItem.groupTitle, className: b$3('group') },
-                React.createElement("span", { className: b$3('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$3('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$3('item-icon') })) : undefined,
-        React.createElement("span", null, item.title)));
-}
-function focusNext(container, focused, direction) {
-    var _a;
-    const elements = container.querySelectorAll(`.${b$3('item')}:not(.${b$3('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;
-}
-
-var css_248z$1 = ".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.styleInject(css_248z$1);
-
-const b$2 = 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$2('item', { badge: withBadge }),
-                })));
-            }
-            else {
-                const { id, title, disabled, withBadge } = firstLevelItem;
-                tabItems.push({ id, title, disabled, className: b$2('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$2(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
-};
-
-var label_title$1 = "Settings";
-var label_search$1 = "Search";
-var en = {
-	label_title: label_title$1,
-	"label_filter-placeholder": "Search settings",
-	"label_empty-placeholder": "No results found",
-	label_search: label_search$1
-};
-
-var label_title = "Настройки";
-var label_search = "Поиск";
-var ru = {
-	label_title: label_title,
-	"label_filter-placeholder": "Найти настройки",
-	"label_empty-placeholder": "Ничего не найдено",
-	label_search: label_search
-};
-
-const COMPONENT = 'Settings';
-var i18n = i18n$1.addComponentKeysets({ en, ru }, `${cn.NAMESPACE}${COMPONENT}`);
-
-const b$1 = 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 = useStableCallback(debounce.debounceFn(onChange, debounce$1));
-    const handleUpdate = useStableCallback((updated) => {
-        setValue(updated);
-        onChangeDebounced(updated);
-    });
-    return (React.createElement("div", { className: b$1(null, className) },
-        React.createElement(uikit.TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
-                'aria-label': i18n('label_search'),
-            } })));
-}
-
-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.styleInject(css_248z);
-
-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 = i18n('label_title'), filterPlaceholder = i18n('label_filter-placeholder'), emptyPlaceholder = i18n('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 } = getSettingsFromChildren(children, search);
-    const selected = 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 = 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(SettingsSelectionContextProvider, { value: selected },
-        React.createElement("div", { className: b({ view }) },
-            isMobile ? (React.createElement(React.Fragment, null,
-                React.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
-                React.createElement(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, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
-                React.createElement(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 = 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 = 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;
-exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=Settings-x0a3P0Vr.js.map