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

package/build/cjs/{Settings-8dc2a8ee.js → Settings-x0a3P0Vr.js}

@@ -1,18 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-705c6589.js');
+var tslib_es6 = require('./tslib.es6-D25eJ2i9.js');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var cn = require('./cn-9933321a.js');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var debounce = require('./debounce-8772fd80.js');
+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');
-var Title = require('./Title-54580605.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -25,12 +23,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function useStableCallback(func) {
     const funcRef = React__namespace.useRef();
@@ -72,13 +69,13 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
     const pages = {};
     let hasGroup = false;
     let hasItems = false;
-    React__default["default"].Children.forEach(children, (element) => {
+    React.Children.forEach(children, (element) => {
         var _a, _b;
-        if (!React__default["default"].isValidElement(element)) {
+        if (!React.isValidElement(element)) {
             // Ignore non-elements.
             return;
         }
-        if (element.type === React__default["default"].Fragment) {
+        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);
@@ -88,7 +85,7 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
             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 !== void 0 ? _a : element.props.groupTitle}`;
+            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') {
@@ -104,7 +101,7 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
         }
         else {
             hasItems = true;
-            const pageId = `${basepath}/${(_b = element.props.id) !== null && _b !== void 0 ? _b : element.props.title}`;
+            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');
@@ -125,12 +122,12 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
 }
 function getSettingsPageFromChildren(children, filterRe) {
     const page = { id: '', sections: [], hidden: true };
-    React__default["default"].Children.forEach(children, (element) => {
-        if (!React__default["default"].isValidElement(element)) {
+    React.Children.forEach(children, (element) => {
+        if (!React.isValidElement(element)) {
             // Ignore non-elements.
             return;
         }
-        if (element.type === React__default["default"].Fragment) {
+        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);
@@ -138,14 +135,13 @@ function getSettingsPageFromChildren(children, filterRe) {
             page.hidden = hidden && page.hidden;
         }
         else {
-            const { withBadge, showTitle = true } = element.props;
+            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,
-                showTitle }));
+                hidden }));
         }
     });
     return page;
@@ -153,12 +149,12 @@ function getSettingsPageFromChildren(children, filterRe) {
 function getSettingsItemsFromChildren(children, filterRe) {
     let hidden = true;
     const items = [];
-    React__default["default"].Children.forEach(children, (element) => {
-        if (!React__default["default"].isValidElement(element)) {
+    React.Children.forEach(children, (element) => {
+        if (!React.isValidElement(element)) {
             // Ignore non-elements.
             return;
         }
-        if (element.type === React__default["default"].Fragment) {
+        if (element.type === React.Fragment) {
             // Transparently support React.Fragment and its children.
             const fragmentItems = getSettingsItemsFromChildren(element.props.children, filterRe);
             items.push(...fragmentItems.items);
@@ -202,11 +198,11 @@ function getSelectedSettingsPart(pages, selection) {
 }
 
 const defaultValue = {};
-const context = React__default["default"].createContext(defaultValue);
+const context = React.createContext(defaultValue);
 context.displayName = 'SettingsSelectionContext';
 function useSettingsSelectionProviderValue(pages, selection) {
-    const selectedRef = React__default["default"].useRef(null);
-    const contextValue = React__default["default"].useMemo(() => {
+    const selectedRef = React.useRef(null);
+    const contextValue = React.useMemo(() => {
         if (!selection)
             return { selectedRef };
         return Object.assign({ selectedRef }, getSelectedSettingsPart(pages, selection));
@@ -215,7 +211,7 @@ function useSettingsSelectionProviderValue(pages, selection) {
 }
 const SettingsSelectionContextProvider = context.Provider;
 function useSettingsSelectionContext() {
-    return React__default["default"].useContext(context);
+    return React.useContext(context);
 }
 
 /**
@@ -235,11 +231,22 @@ function useSettingsSelectionContext() {
  * // => true
  */
 
-function identity(value) {
-  return value;
+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 identity_1 = identity;
+var identityExports = requireIdentity();
+var identity = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(identityExports);
 
 function isSectionSelected(selected, pageId, section) {
     var _a;
@@ -249,7 +256,7 @@ function isSectionSelected(selected, pageId, section) {
     else if (selected.section.id && selected.section.id === section.id) {
         return true;
     }
-    else if (((_a = selected.page) === null || _a === void 0 ? void 0 : _a.id) === pageId &&
+    else if (((_a = selected.page) === null || _a === undefined ? undefined : _a.id) === pageId &&
         selected.section.title &&
         selected.section.title === section.title) {
         return true;
@@ -263,14 +270,14 @@ var css_248z$2 = ".gn-settings-menu__group-heading{display:inline-block;font-wei
 styleInject_es.styleInject(css_248z$2);
 
 const b$3 = cn.block('settings-menu');
-const SettingsMenu = React__default["default"].forwardRef(
+const SettingsMenu = React.forwardRef(
 // eslint-disable-next-line prefer-arrow-callback
 function SettingsMenu({ items, onChange, activeItemId }, ref) {
-    const [focusItemId, setFocusId] = React__default["default"].useState();
-    const containerRef = React__default["default"].useRef(null);
+    const [focusItemId, setFocusId] = React.useState();
+    const containerRef = React.useRef(null);
     const handleChange = useStableCallback(onChange);
     const getFocused = useCurrent(focusItemId);
-    React__default["default"].useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(ref, () => ({
         handleKeyDown(event) {
             if (!containerRef.current) {
                 return false;
@@ -294,10 +301,10 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
             setFocusId(undefined);
         },
     }), [getFocused, handleChange]);
-    return (React__default["default"].createElement("div", { ref: containerRef, className: b$3() }, items.map((firstLevelItem) => {
+    return (React.createElement("div", { ref: containerRef, className: b$3() }, items.map((firstLevelItem) => {
         if ('groupTitle' in firstLevelItem) {
-            return (React__default["default"].createElement("div", { key: firstLevelItem.groupTitle, className: b$3('group') },
-                React__default["default"].createElement("span", { className: b$3('group-heading') }, firstLevelItem.groupTitle),
+            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);
                 })));
@@ -306,7 +313,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
     })));
 });
 function renderMenuItem(item, onChange, activeItemId, focusItemId) {
-    return (React__default["default"].createElement("span", { key: item.title, className: b$3('item', {
+    return (React.createElement("span", { key: item.title, className: b$3('item', {
             selected: activeItemId === item.id,
             disabled: item.disabled,
             focused: focusItemId === item.id,
@@ -316,8 +323,8 @@ function renderMenuItem(item, onChange, activeItemId, focusItemId) {
                 onChange(item.id);
             }
         }, "data-id": item.id },
-        item.icon ? React__default["default"].createElement(uikit.Icon, Object.assign({ size: 16 }, item.icon, { className: b$3('item-icon') })) : undefined,
-        React__default["default"].createElement("span", null, item.title)));
+        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;
@@ -330,7 +337,7 @@ function focusNext(container, focused, direction) {
         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 !== void 0 ? _a : undefined;
+    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}";
@@ -338,8 +345,8 @@ styleInject_es.styleInject(css_248z$1);
 
 const b$2 = cn.block('settings-menu-mobile');
 const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
-    const ref = React__default["default"].useRef(null);
-    const tabItems = React__default["default"].useMemo(() => {
+    const ref = React.useRef(null);
+    const tabItems = React.useMemo(() => {
         const tabItems = [];
         items.forEach((firstLevelItem) => {
             if ('groupTitle' in firstLevelItem) {
@@ -360,8 +367,8 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
     const handleTouchMove = (e) => {
         e.stopPropagation();
     };
-    return (React__default["default"].createElement("div", { ref: ref, onTouchMove: handleTouchMove },
-        React__default["default"].createElement(uikit.Tabs, { items: tabItems, className: b$2(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
+    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";
@@ -387,31 +394,31 @@ 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__default["default"].useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
-    const onChangeDebounced = useStableCallback(debounce.debounce_1(onChange, debounce$1));
+    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__default["default"].createElement("div", { className: b$1(null, className) },
-        React__default["default"].createElement(uikit.TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
+    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-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-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-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-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-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-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:only-child .gn-settings__section-item:first-of-type{margin-top:0}.gn-settings__section_only-child: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-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)}";
+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__default["default"].createContext({});
-const useSettingsContext = () => React__default["default"].useContext(SettingsContext);
+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__default["default"].createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default["default"].createElement(uikit.Loader, { className: b('loader'), size: "m" }))));
+        return (React.createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b('loader'), size: "m" }))));
     }
-    return (React__default["default"].createElement(SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
-        React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children)));
+    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) {
@@ -428,24 +435,24 @@ const getPageTitleById = (menu, activePage) => {
 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__default["default"].useState(initialSearch !== null && initialSearch !== void 0 ? initialSearch : '');
+    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__default["default"].useState(selectionInitialPage ||
+    const [selectedPage, setCurrentPage] = React.useState(selectionInitialPage ||
         (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined));
-    const searchInputRef = React__default["default"].useRef(null);
-    const menuRef = React__default["default"].useRef(null);
+    const searchInputRef = React.useRef(null);
+    const menuRef = React.useRef(null);
     const isMobile = view === 'mobile';
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         var _a;
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clearFocus();
+        (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
     }, [search]);
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         const handler = () => {
             var _a;
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clearFocus();
+            (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
         };
         window.addEventListener('click', handler);
         return () => {
@@ -453,62 +460,62 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
         };
     }, []);
     let activePage = selectedPage;
-    if (!activePage || ((_a = pages[activePage]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-        activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === void 0 ? void 0 : _b.id;
+    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 === void 0 ? void 0 : onPageChange(newPage);
+                onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
             }
             return newPage;
         });
     };
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         if (activePage !== selectedPage) {
             handlePageChange(activePage);
         }
     });
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         if (!selectionInitialPage)
             return;
         setCurrentPage(selectionInitialPage);
     }, [selectionInitialPage]);
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         var _a;
-        if ((_a = selected.selectedRef) === null || _a === void 0 ? void 0 : _a.current) {
+        if ((_a = selected.selectedRef) === null || _a === undefined ? undefined : _a.current) {
             selected.selectedRef.current.scrollIntoView();
         }
     }, [selected.selectedRef]);
     const renderSetting = ({ title: settingTitle, element }) => {
-        return (React__default["default"].createElement("div", { key: settingTitle, className: b('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle }))));
+        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__default["default"].createElement("div", { key: section.title, className: b('section', { selected: isSelected, 'only-child': section.onlyChild }), ref: isSelected ? selected.selectedRef : undefined },
-            section.showTitle && (React__default["default"].createElement("h3", { className: b('section-heading') }, renderSectionRightAdornment ? (React__default["default"].createElement(uikit.Flex, { gap: 2, alignItems: 'center' },
+        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__default["default"].createElement("div", { className: b('section-right-adornment', {
+                React.createElement("div", { className: b('section-right-adornment', {
                         hidden: showRightAdornmentOnHover,
                     }) }, renderSectionRightAdornment(section)))) : (section.title))),
             section.header &&
-                (isMobile ? (React__default["default"].createElement("div", { className: b('section-subheader') }, section.header)) : (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__default["default"].createElement("div", { className: b('not-found') }, emptyPlaceholder));
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React.createElement("div", { className: b('not-found') }, emptyPlaceholder));
         }
         const filteredSections = pages[page].sections.filter((section) => !section.hidden);
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            !isMobile && (React__default["default"].createElement(Title.Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
-            React__default["default"].createElement("div", { className: b('content') }, filteredSections.map((section) => renderSection(page, section)))));
+        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__default["default"].createElement(SettingsSelectionContextProvider, { value: selected },
-        React__default["default"].createElement("div", { className: b({ view }) },
-            isMobile ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
-                React__default["default"].createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React__default["default"].createElement("div", { className: b('menu'), onClick: () => {
+    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();
                     }
@@ -519,35 +526,35 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
                         }
                     }
                 } },
-                React__default["default"].createElement(Title.Title, null, title),
-                React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
-                React__default["default"].createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
-            React__default["default"].createElement("div", { className: b('page') }, renderPageContent(activePage)))));
+                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__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 };
 Settings.Page = function SettingsPage({ children }) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 };
 Settings.Section = function SettingsSection({ children }) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 };
 Settings.Item = function SettingsItem(setting) {
-    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, } = 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__default["default"].createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
-    return (React__default["default"].createElement("div", { className: b('item', { align, mode, selected: isSettingSelected }), ref: isSettingSelected ? selected.selectedRef : undefined },
-        React__default["default"].createElement("label", { className: b('item-heading'), id: labelId },
-            renderRightAdornment ? (React__default["default"].createElement(uikit.Flex, { className: b('item-title-wrapper'), gap: 3 },
+    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__default["default"].createElement("div", { className: b('item-right-adornment', {
+                React.createElement("div", { className: b('item-right-adornment', {
                         hidden: showRightAdornmentOnHover,
                     }) }, renderRightAdornment(setting)))) : (titleNode),
-            description ? React__default["default"].createElement("span", { className: b('item-description') }, description) : null),
-        React__default["default"].createElement("div", { className: b('item-content') }, children)));
+            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);
@@ -563,7 +570,7 @@ function prepareTitle(string, search) {
             if (i > 0) {
                 title.push(temp.slice(0, i));
             }
-            title.push(React__default["default"].createElement("strong", { key: key++, className: b('found') }, m));
+            title.push(React.createElement("strong", { key: key++, className: b('found') }, m));
             temp = temp.slice(i + m.length);
         }
     }
@@ -576,4 +583,4 @@ function prepareTitle(string, search) {
 exports.Settings = Settings;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=Settings-8dc2a8ee.js.map
+//# sourceMappingURL=Settings-x0a3P0Vr.js.map