@gravity-ui/navigation 0.14.0 → 0.16.0

package/build/cjs/index.js

@@ -94,28 +94,9 @@ function block(name) {
     return _default(`${NAMESPACE}${name}`);
 }
 
-exports.MobileHeaderDict = void 0;
-(function (MobileHeaderDict) {
-    MobileHeaderDict["CloseBurger"] = "button_close-burger";
-    MobileHeaderDict["OpenBurger"] = "button_open-burger";
-})(exports.MobileHeaderDict || (exports.MobileHeaderDict = {}));
-exports.Dict = void 0;
-(function (Dict) {
-    Dict["ExpandButton"] = "button_expand";
-    Dict["CollapseButton"] = "button_collapse";
-    Dict["MoreButton"] = "button_more";
-})(exports.Dict || (exports.Dict = {}));
-
 const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
 const ASIDE_HEADER_COMPACT_WIDTH = 56;
 const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-const defaultDict$2 = {
-    [exports.Dict.CollapseButton]: 'Collapse',
-    [exports.Dict.ExpandButton]: 'Expand',
-    [exports.Dict.MoreButton]: 'More',
-    [exports.MobileHeaderDict.CloseBurger]: 'Close menu',
-    [exports.MobileHeaderDict.OpenBurger]: 'Open menu',
-};
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -1384,7 +1365,7 @@ function removeClass$1(element, className) {
   }
 }
 
-var config = {
+var config$1 = {
   disabled: false
 };
 
@@ -1664,7 +1645,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
     // if we are mounting and running this it means appear _must_ be set
 
-    if (!mounting && !enter || config.disabled) {
+    if (!mounting && !enter || config$1.disabled) {
       this.safeSetState({
         status: ENTERED
       }, function () {
@@ -1696,7 +1677,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     var timeouts = this.getTimeouts();
     var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default["default"].findDOMNode(this); // no exit animation skip right to EXITED
 
-    if (!exit || config.disabled) {
+    if (!exit || config$1.disabled) {
       this.safeSetState({
         status: EXITED
       }, function () {
@@ -3635,6 +3616,9 @@ const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
 const POPUP_ITEM_HEIGHT = 28;
 
 function getItemHeight$1(item) {
+    if (!isMenuItem(item)) {
+        return ITEM_HEIGHT;
+    }
     switch (item.type) {
         case 'action':
             return 50;
@@ -3672,12 +3656,10 @@ function getItemsMinHeight(items) {
         getItemsHeight(afterMoreButtonItems) +
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
-function getMoreButtonItem(dict) {
-    var _a;
-    const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[exports.Dict.MoreButton];
+function getMoreButtonItem(menuMoreTitle) {
     return {
         id: COLLAPSE_ITEM_ID,
-        title,
+        title: menuMoreTitle,
         icon: icons.Ellipsis,
         iconSize: 18,
     };
@@ -3721,6 +3703,9 @@ function getAutosizeListItems(items, height, collapseItem) {
     }
     return { listItems, collapseItems };
 }
+function isMenuItem(item) {
+    return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
+}
 
 var css_248z$k = ".gn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n  color: var(--g-color-text-misc);\n}\n.gn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.gn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--g-color-line-generic);\n  cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--g-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n  background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-simple-hover);\n}";
 styleInject(css_248z$k);
@@ -3783,7 +3768,7 @@ const Item$1 = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default["default"].createElement("div", { className: b$l('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
+            React__default["default"].createElement("div", { className: b$l('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
                 React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$l('btn-icon') }, iconEl))) : (iconEl)),
             React__default["default"].createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
             renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
@@ -3884,7 +3869,7 @@ var css_248z$i = ".gn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-
 styleInject(css_248z$i);
 
 const b$j = block('composite-bar');
-const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip = true, }) => {
+const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
     const ref = React.useRef(null);
     const tooltipRef = React.useRef(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
@@ -3949,26 +3934,32 @@ const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
     }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default["default"].createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
-        React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items })));
+            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+                    const itemExtraProps = isMenuItem(item) ? { item } : item;
+                    const enableTooltip = isMenuItem(item)
+                        ? !multipleTooltip
+                        : item.enableTooltip;
+                    return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
+                } })),
+        type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-const CompositeBar = ({ items, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
     if (items.length === 0) {
         return null;
     }
     let node;
-    if (enableCollapsing) {
+    if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(dict);
+        const collapseItem = getMoreButtonItem(menuMoreTitle);
         node = (React__default["default"].createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
             const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
             return (React__default["default"].createElement("div", { style: { width, height } },
-                React__default["default"].createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+                React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
         }))));
     }
     else {
         node = (React__default["default"].createElement("div", { className: b$j() },
-            React__default["default"].createElement(CompositeBarView, { items: items, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
+            React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
     }
     return React__default["default"].createElement(MultipleTooltipProvider, null, node);
 };
@@ -3989,6 +3980,237 @@ function fakeDisplayName(newDisplayName, Component) {
     return Fake;
 }
 
+const PARAM_REGEXP = /{{(.*?)}}/g;
+function replaceParams(keyValue, params) {
+    let result = '';
+    let lastIndex = (PARAM_REGEXP.lastIndex = 0);
+    let match;
+    while ((match = PARAM_REGEXP.exec(keyValue))) {
+        if (lastIndex !== match.index) {
+            result += keyValue.slice(lastIndex, match.index);
+        }
+        lastIndex = PARAM_REGEXP.lastIndex;
+        const [all, key] = match;
+        if (Object.prototype.hasOwnProperty.call(params, key)) {
+            result += params[key];
+        }
+        else {
+            result += all;
+        }
+    }
+    if (lastIndex < keyValue.length) {
+        result += keyValue.slice(lastIndex);
+    }
+    return result;
+}
+
+var PluralForm;
+(function (PluralForm) {
+    PluralForm[PluralForm["One"] = 0] = "One";
+    PluralForm[PluralForm["Few"] = 1] = "Few";
+    PluralForm[PluralForm["Many"] = 2] = "Many";
+    PluralForm[PluralForm["None"] = 3] = "None";
+})(PluralForm || (PluralForm = {}));
+
+function pluralizerEn (count, pluralForms) {
+    if (count === 0) {
+        return pluralForms.None;
+    }
+    if (count === 1 || count === -1) {
+        return pluralForms.One;
+    }
+    return pluralForms.Many;
+}
+
+function pluralizerRu (count, pluralForms) {
+    // the rules for negative numbers are the same
+    const lastDigit = Math.abs(count % 10);
+    const last2Digits = Math.abs(count % 100);
+    if (count === 0) {
+        return pluralForms.None;
+    }
+    if (lastDigit === 1 && last2Digits !== 11) {
+        return pluralForms.One;
+    }
+    if ((lastDigit > 1 && lastDigit < 5) && (last2Digits < 10 || last2Digits > 20)) {
+        return pluralForms.Few;
+    }
+    return pluralForms.Many;
+}
+
+class I18N {
+    constructor(options) {
+        this.data = {};
+        this.lang = undefined;
+        this.pluralizers = {
+            en: pluralizerEn,
+            ru: pluralizerRu,
+        };
+        this.logger = null;
+        this.logger = (options === null || options === void 0 ? void 0 : options.logger) || null;
+    }
+    setLang(lang) {
+        this.lang = lang;
+    }
+    configurePluralization(pluralizers) {
+        this.pluralizers = Object.assign({}, this.pluralizers, pluralizers);
+    }
+    registerKeyset(lang, keysetName, data = {}) {
+        if (this.data[lang] && Object.prototype.hasOwnProperty.call(this.data[lang], keysetName)) {
+            throw new Error(`Keyset '${keysetName}' is already registered, aborting!`);
+        }
+        this.data[lang] = Object.assign({}, this.data[lang], { [keysetName]: data });
+    }
+    registerKeysets(lang, data) {
+        Object.keys(data).forEach((keysetName) => {
+            this.registerKeyset(lang, keysetName, data[keysetName]);
+        });
+    }
+    has(keysetName, key, lang) {
+        const languageData = this.getLanguageData(lang);
+        return Boolean(languageData && languageData[keysetName] && languageData[keysetName][key]);
+    }
+    i18n(keysetName, key, params) {
+        const languageData = this.getLanguageData(this.lang);
+        if (typeof languageData === 'undefined') {
+            throw new Error(`Language '${this.lang}' is not defined, make sure you call setLang for the same language you called registerKeysets for!`);
+        }
+        if (Object.keys(languageData).length === 0) {
+            this.warn('Language data is empty.');
+            return key;
+        }
+        const keyset = languageData[keysetName];
+        if (!keyset) {
+            this.warn('Keyset not found.', keysetName);
+            return key;
+        }
+        if (Object.keys(keyset).length === 0) {
+            this.warn('Keyset is empty.', keysetName);
+            return key;
+        }
+        const keyValue = keyset && keyset[key];
+        let result;
+        if (typeof keyValue === 'undefined') {
+            this.warn('Missing key.', keysetName, key);
+            return key;
+        }
+        if (Array.isArray(keyValue)) {
+            if (keyValue.length < 3) {
+                this.warn('Missing required plurals', keysetName, key);
+                return key;
+            }
+            const count = Number(params === null || params === void 0 ? void 0 : params.count);
+            if (Number.isNaN(count)) {
+                this.warn('Missing params.count for key.', keysetName, key);
+                return key;
+            }
+            const pluralizer = this.getLanguagePluralizer(this.lang);
+            result = keyValue[pluralizer(count, PluralForm)] || keyValue[PluralForm.Many];
+            if (keyValue[PluralForm.None] === undefined) {
+                this.warn('Missing key for 0', keysetName, key);
+            }
+        }
+        else {
+            result = keyValue;
+        }
+        if (params) {
+            result = replaceParams(result, params);
+        }
+        return result;
+    }
+    keyset(keysetName) {
+        return (key, params) => {
+            return this.i18n(keysetName, key, params);
+        };
+    }
+    warn(msg, keyset, key) {
+        var _a;
+        let cacheKey = '';
+        if (keyset) {
+            cacheKey += keyset;
+            if (key) {
+                cacheKey += `.${key}`;
+            }
+        }
+        else {
+            cacheKey = 'languageData';
+        }
+        (_a = this.logger) === null || _a === void 0 ? void 0 : _a.log(`I18n: ${msg}`, {
+            level: 'info',
+            logger: cacheKey,
+            extra: {
+                type: 'i18n'
+            }
+        });
+    }
+    getLanguageData(lang) {
+        const langCode = lang || this.lang;
+        return langCode ? this.data[langCode] : undefined;
+    }
+    getLanguagePluralizer(lang) {
+        const pluralizer = lang ? this.pluralizers[lang] : undefined;
+        if (!pluralizer) {
+            this.warn(`Pluralization is not configured for language '${lang}', falling back to the english ruleset`);
+        }
+        return pluralizer || pluralizerEn;
+    }
+}
+
+exports.Lang = void 0;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(exports.Lang || (exports.Lang = {}));
+let subs = [];
+const config = {
+    lang: exports.Lang.En,
+};
+const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+const getConfig = () => config;
+
+const i18n$4 = new I18N();
+i18n$4.setLang(getConfig().lang);
+subscribeConfigure((config) => {
+    i18n$4.setLang(config.lang);
+});
+
+function registerKeyset(data, keysetName) {
+    Object.entries(data).forEach(([lang, keys]) => i18n$4.registerKeyset(lang, keysetName, keys));
+    return i18n$4.keyset(keysetName);
+}
+
+var button_collapse$1 = "Collapse";
+var button_expand$1 = "Expand";
+var label_more$1 = "More";
+var en$3 = {
+	button_collapse: button_collapse$1,
+	button_expand: button_expand$1,
+	label_more: label_more$1
+};
+
+var button_collapse = "Свернуть";
+var button_expand = "Развернуть";
+var label_more = "Ещё";
+var ru$3 = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+const COMPONENT$3 = 'AsideHeader';
+var i18n$3 = registerKeyset({ en: en$3, ru: ru$3 }, COMPONENT$3);
+
 var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgControlMenuButton = function SvgControlMenuButton(props) {
@@ -4030,13 +4252,13 @@ class AsideHeader extends React__default["default"].Component {
         super(...arguments);
         this.asideRef = React__default["default"].createRef();
         this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems, headerDecoration, multipleTooltip } = this.props;
+            const { menuItems, panelItems, headerDecoration, multipleTooltip, menuMoreTitle } = this.props;
             return (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("div", { className: b$i('aside'), style: { width: size } },
                     React__default["default"].createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
                     React__default["default"].createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$i('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: menuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$i('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));
@@ -4047,7 +4269,7 @@ class AsideHeader extends React__default["default"].Component {
         this.renderLogo = () => React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
         this.renderHeader = () => (React__default["default"].createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
             this.renderLogo(),
-            React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, enableCollapsing: false, onItemClick: this.onItemClick }),
+            React__default["default"].createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
             React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
             const { renderFooter, compact } = this.props;
@@ -4062,10 +4284,11 @@ class AsideHeader extends React__default["default"].Component {
             return (React__default["default"].createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
         };
         this.renderCollapseButton = () => {
-            var _a;
-            const { dict, compact } = this.props;
-            const typeButton = compact ? exports.Dict.ExpandButton : exports.Dict.CollapseButton;
-            return (React__default["default"].createElement(uikit.Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
+            const { expandTitle, collapseTitle, compact } = this.props;
+            const buttonTitle = compact
+                ? expandTitle || i18n$3('button_expand')
+                : collapseTitle || i18n$3('button_collapse');
+            return (React__default["default"].createElement(uikit.Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: buttonTitle },
                 React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
         };
         this.onCollapseButtonClick = () => {
@@ -4196,18 +4419,28 @@ const PublicActionBar = Object.assign(ActionBar, {
     Separator: ActionBarSeparator,
 });
 
+var button_close$1 = "Close";
+var en$2 = {
+	button_close: button_close$1
+};
+
+var button_close = "Закрыть";
+var ru$2 = {
+	button_close: button_close
+};
+
+const COMPONENT$2 = 'Title';
+var i18n$2 = registerKeyset({ en: en$2, ru: ru$2 }, COMPONENT$2);
+
 var css_248z$a = ".gn-title {\n  box-sizing: border-box;\n  padding: 14px 10px 14px 20px;\n  min-height: 64px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.gn-title_separator {\n  border-bottom: 1px solid var(--g-color-line-generic);\n}\n.gn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
 styleInject(css_248z$a);
 
 const b$b = block('title');
-const defaultDict$1 = {
-    close: 'Close',
-};
-const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
+const Title = ({ children, closeIconSize = 23, hasSeparator, closeTitle = i18n$2('button_close'), onClose, }) => {
     return (React__default["default"].createElement("div", { className: b$b({ separator: hasSeparator }) },
         React__default["default"].createElement(uikit.Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
         onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
-                'aria-label': dict['close'],
+                'aria-label': closeTitle,
             } },
             React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
 };
@@ -4969,6 +5202,23 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         React__default["default"].createElement(uikit.Tabs, { items: tabItems, className: b$7(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
 };
 
+var label_title$1 = "Settings";
+var en$1 = {
+	label_title: label_title$1,
+	"label_filter-placeholder": "Search settings",
+	"label_empty-placeholder": "No results found"
+};
+
+var label_title = "Настройки";
+var ru$1 = {
+	label_title: label_title,
+	"label_filter-placeholder": "Найти настройки",
+	"label_empty-placeholder": "Ничего не найдено"
+};
+
+const COMPONENT$1 = 'Settings';
+var i18n$1 = registerKeyset({ en: en$1, ru: ru$1 }, COMPONENT$1);
+
 function getSettingsFromChildren(children, searchText = '') {
     // 'abc def fg' -> abc.*?cde.*?fg
     const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
@@ -5094,11 +5344,6 @@ var css_248z$6 = ".gn-settings {\n  display: grid;\n  grid-template-columns: 216
 styleInject(css_248z$6);
 
 const b$6 = block('settings');
-const defaultDict = {
-    heading_settings: 'Settings',
-    placeholder_search: 'Search settings',
-    not_found: 'No results found',
-};
 function Settings(_a) {
     var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
     if (loading) {
@@ -5118,10 +5363,7 @@ const getPageTitleById = (menu, activePage) => {
     }
     return '';
 };
-Settings.defaultProps = {
-    dict: defaultDict,
-};
-function SettingsContent({ initialPage, children, renderNotFound, dict, view, onPageChange, onClose, }) {
+function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
     var _a, _b;
     const [search, setSearch] = React__default["default"].useState('');
     const { menu, pages } = getSettingsFromChildren(children, search);
@@ -5163,7 +5405,7 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
     });
     const renderPageContent = () => {
         if (!activePage) {
-            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default["default"].createElement("div", { className: b$6('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default["default"].createElement("div", { className: b$6('not-found') }, emptyPlaceholder));
         }
         const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -5190,8 +5432,8 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
                     }
                 }
             } },
-            React__default["default"].createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
-            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
+            React__default["default"].createElement(Title, null, title),
+            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), 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$6('page') }, renderPageContent())));
 }
@@ -5254,7 +5496,7 @@ var css_248z$5 = ".gn-mobile-header-burger {\n  margin: 0;\n  padding: 0;\n  fon
 styleInject(css_248z$5);
 
 const b$5 = block('mobile-header-burger');
-const Burger = React__default["default"].memo(({ opened, className, onClick }) => (React__default["default"].createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? defaultDict$2['button_close-burger'] : defaultDict$2['button_open-burger'] },
+const Burger = React__default["default"].memo(({ closeTitle, openTitle, opened, className, onClick }) => (React__default["default"].createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? closeTitle : openTitle },
     React__default["default"].createElement("span", { className: b$5('icon') },
         React__default["default"].createElement("span", { className: b$5('icon-dash') })))));
 Burger.displayName = 'Burger';
@@ -5360,11 +5602,28 @@ const BurgerMenu = React__default["default"].memo(({ items = [], renderFooter, m
 });
 BurgerMenu.displayName = 'BurgerMenu';
 
+var burger_button_close$1 = "Close menu";
+var burger_button_open$1 = "Open menu";
+var en = {
+	burger_button_close: burger_button_close$1,
+	burger_button_open: burger_button_open$1
+};
+
+var burger_button_close = "Закрыть меню";
+var burger_button_open = "Открыть меню";
+var ru = {
+	burger_button_close: burger_button_close,
+	burger_button_open: burger_button_open
+};
+
+const COMPONENT = 'MobileHeader';
+var i18n = registerKeyset({ en, ru }, COMPONENT);
+
 var css_248z$1 = ".gn-mobile-header {\n  --mobile-header-min-heigth: 50px;\n  --mobile-header-icon-size: 20px;\n  background-color: var(--g-color-base-background);\n}\n.gn-mobile-header__header {\n  background-color: var(--g-color-base-background);\n  border-bottom: 1px solid var(--g-color-line-generic);\n  position: sticky;\n  top: 0;\n  padding: 0 10px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 100;\n}\n.gn-mobile-header__burger {\n  padding: 12px;\n}\n.gn-mobile-header__burger-menu, .gn-mobile-header__panel-item {\n  background-color: var(--g-color-base-background);\n  width: 320px;\n  max-width: 90vw;\n  max-height: 100%;\n}\n.gn-mobile-header__user-menu {\n  overflow-y: auto;\n}\n.gn-mobile-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: var(--mobile-header-min-heigth);\n  overflow: hidden;\n}\n.gn-mobile-header__content {\n  overflow: auto;\n}";
 styleInject(css_248z$1);
 
 const b$1 = block('mobile-header');
-const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
+const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
     const targetRef = useForwardRef(ref);
     const [compact] = React.useState(true);
     const [visiblePanel, setVisiblePanel] = React.useState(null);
@@ -5454,7 +5713,7 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, p
     }, [targetRef, onBurgerClose, onBurgerOpen]);
     return (React__default["default"].createElement("div", { className: b$1({ compact }, className), ref: targetRef },
         React__default["default"].createElement("header", { className: b$1('header'), style: { height: size } },
-            React__default["default"].createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger') }),
+            React__default["default"].createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
             React__default["default"].createElement(Logo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
             React__default["default"].createElement("div", { className: b$1('side-item') }, sideItemRenderContent === null || sideItemRenderContent === void 0 ? void 0 : sideItemRenderContent({ size }))),
         React__default["default"].createElement(Drawer, { className: b$1('panels'), onVeilClick: onCloseDrawer, onEscape: onCloseDrawer, style: { top: size } }, [burgerPanelItem, ...panelItems].map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({}, item, { key: item.id, visible: visiblePanel === item.id, className: b$1('panel-item', item.className) }))))),
@@ -5492,5 +5751,6 @@ exports.MobileHeader = MobileHeader;
 exports.MobileHeaderFooterItem = FooterItem;
 exports.Settings = Settings;
 exports.Title = Title;
+exports.configure = configure;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 //# sourceMappingURL=index.js.map