@gravity-ui/navigation 0.11.1 → 0.12.0

package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AsideHeaderContextType {
+    compact: boolean;
+    size: number;
+}
+export declare const AsideHeaderContext: React.Context<AsideHeaderContextType>;
+export declare const AsideHeaderContextProvider: React.Provider<AsideHeaderContextType>;
+export declare const useAsideHeaderContext: () => AsideHeaderContextType;
+export {};

package/build/esm/components/CompositeBar/CompositeBar.d.ts

@@ -1,10 +1,9 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { AsideHeaderDict, MenuItem } from '../types';
 import './CompositeBar.scss';
 interface CompositeBarBaseProps {
     items: MenuItem[];
-    compact: boolean;
-    onItemClick?: (item: MenuItem, collapsed: boolean) => void;
+    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     multipleTooltip?: boolean;
 }
 export interface CompositeBarProps extends CompositeBarBaseProps {

package/build/esm/components/CompositeBar/Item/Item.d.ts

@@ -17,7 +17,6 @@ export interface ItemProps extends ItemPopup {
     onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 interface ItemInnerProps extends ItemProps {
-    compact: boolean;
     className?: string;
     collapseItems?: MenuItem[];
     onMouseEnter?: () => void;

package/build/esm/components/Logo/Logo.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
 import { LogoProps } from '../types';
 import './Logo.scss';
-interface LogoInnerProps extends LogoProps {
-    compact: boolean;
-}
-export declare const Logo: React.FC<LogoInnerProps>;
-export {};
+export declare const Logo: React.FC<LogoProps>;

package/build/esm/components/index.d.ts

@@ -1,4 +1,5 @@
 export { AsideHeader, AsideHeaderProps } from './AsideHeader/AsideHeader';
+export { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeader/AsideHeaderContext';
 export { Drawer, DrawerProps, DrawerItemProps, DrawerItem } from './Drawer/Drawer';
 export { FooterItem, FooterItemProps } from './FooterItem/FooterItem';
 export * from './ActionBar';

package/build/esm/components/types.d.ts

@@ -14,7 +14,7 @@ export interface MenuItem {
     link?: string;
     current?: boolean;
     pinned?: boolean;
-    onItemClick?: (item: MenuItem, collapsed: boolean) => void;
+    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
         collapsed: boolean;
         compact: boolean;

package/build/esm/index.js

@@ -3189,11 +3189,19 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
+const AsideHeaderContext = React__default.createContext({
+    compact: false,
+    size: ASIDE_HEADER_COMPACT_WIDTH,
+});
+const AsideHeaderContextProvider = AsideHeaderContext.Provider;
+const useAsideHeaderContext = () => React__default.useContext(AsideHeaderContext);
+
 var css_248z$l = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
 styleInject(css_248z$l);
 
 const b$m = block('logo');
-const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+    const { compact } = useAsideHeaderContext();
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
     const linkProps = hasClickHandler
@@ -3710,7 +3718,8 @@ function renderItemTitle(item) {
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
 const Item$1 = (props) => {
-    const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
+    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
+    const { compact } = useAsideHeaderContext();
     if (item.type === 'divider') {
         return React__default.createElement("div", { className: b$l('menu-divider') });
     }
@@ -3776,7 +3785,8 @@ const Item$1 = (props) => {
         open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
 };
 Item$1.displayName = 'Item';
-function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
+function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
+    const { compact } = useAsideHeaderContext();
     return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
         React__default.createElement("div", { className: b$l('collapse-items-popup-content') },
             React__default.createElement(List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
@@ -3798,9 +3808,6 @@ function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClos
                 } })))) : null;
 }
 
-var css_248z$j = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$j);
-
 const multipleTooltipContextDefaults = {
     active: false,
     activeIndex: undefined,
@@ -3823,8 +3830,8 @@ class MultipleTooltipProvider extends React__default.PureComponent {
     }
 }
 
-var css_248z$i = ".yc-root_theme_dark .ycn-multiple-tooltip,\n.yc-root_theme_dark-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #313036 0%,\n      rgba(49, 48, 54, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.yc-root_theme_light .ycn-multiple-tooltip,\n.yc-root_theme_light-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      rgba(255, 255, 255, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.ycn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.ycn-multiple-tooltip::before {\n  content: \"\";\n  box-shadow: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background: var(--multiple-tooltip-backdrop-background);\n  filter: var(--multiple-tooltip-backdrop-filter);\n}\n.ycn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.ycn-multiple-tooltip__item {\n  display: flex;\n  box-sizing: border-box;\n  height: 30px;\n  padding: 8px 12px;\n  background-color: var(--multiple-tooltip-item-bg-color);\n  position: relative;\n  border-radius: 5px;\n  align-items: center;\n  color: var(--g-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider), .ycn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.ycn-multiple-tooltip__item_divider + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.ycn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.ycn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
-styleInject(css_248z$i);
+var css_248z$j = ".yc-root_theme_dark .ycn-multiple-tooltip,\n.yc-root_theme_dark-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #313036 0%,\n      rgba(49, 48, 54, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.yc-root_theme_light .ycn-multiple-tooltip,\n.yc-root_theme_light-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      rgba(255, 255, 255, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.ycn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.ycn-multiple-tooltip::before {\n  content: \"\";\n  box-shadow: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background: var(--multiple-tooltip-backdrop-background);\n  filter: var(--multiple-tooltip-backdrop-filter);\n}\n.ycn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.ycn-multiple-tooltip__item {\n  display: flex;\n  box-sizing: border-box;\n  height: 30px;\n  padding: 8px 12px;\n  background-color: var(--multiple-tooltip-item-bg-color);\n  position: relative;\n  border-radius: 5px;\n  align-items: center;\n  color: var(--g-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider), .ycn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.ycn-multiple-tooltip__item_divider + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.ycn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.ycn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
+styleInject(css_248z$j);
 
 const b$k = block('multiple-tooltip');
 const POPUP_OFFSET = [-32, 4];
@@ -3853,11 +3860,15 @@ const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
         }))));
 };
 
+var css_248z$i = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$i);
+
 const b$j = block('composite-bar');
-const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multipleTooltip = true, }) => {
+const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip = true, }) => {
     const ref = useRef(null);
     const tooltipRef = useRef(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
+    const { compact } = useAsideHeaderContext();
     const onTooltipMouseEnter = useCallback((e) => {
         if (!multipleTooltipActive &&
             activeIndex !== lastClickedItemIndex &&
@@ -3904,7 +3915,7 @@ const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multiple
             }
         }
     }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
-    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed) => {
+    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
         if (compact &&
             multipleTooltip &&
             itemIndex !== lastClickedItemIndex &&
@@ -3914,14 +3925,14 @@ const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multiple
                 active: false,
             });
         }
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed);
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
     }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default.createElement(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.createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), compact: compact, collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
+            React__default.createElement(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.createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
         React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items })));
 };
-const CompositeBar = ({ items, compact, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
+const CompositeBar = ({ items, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
     if (items.length === 0) {
         return null;
     }
@@ -3932,12 +3943,12 @@ const CompositeBar = ({ items, compact, enableCollapsing, dict, onItemClick, mul
         node = (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
             const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
             return (React__default.createElement("div", { style: { width, height } },
-                React__default.createElement(CompositeBarView, { items: listItems, compact: compact, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+                React__default.createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
         }))));
     }
     else {
         node = (React__default.createElement("div", { className: b$j() },
-            React__default.createElement(CompositeBarView, { items: items, compact: compact, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
+            React__default.createElement(CompositeBarView, { items: items, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
     }
     return React__default.createElement(MultipleTooltipProvider, null, node);
 };
@@ -3947,7 +3958,8 @@ const RenderContent = React__default.memo(({ renderContent, size }) => {
     return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
 });
 RenderContent.displayName = 'RenderContent';
-const Content = ({ size, className, cssSizeVariableName = '--aside-header-size', renderContent, }) => {
+const Content = ({ size, // TODO: move to context when MobileHeader will support it
+className, cssSizeVariableName = '--aside-header-size', renderContent, }) => {
     return (React__default.createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default.createElement(RenderContent, { size: size, renderContent: renderContent }))));
 };
 
@@ -3998,13 +4010,13 @@ class AsideHeader extends React__default.Component {
         super(...arguments);
         this.asideRef = React__default.createRef();
         this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems, compact, headerDecoration, multipleTooltip } = this.props;
+            const { dict, menuItems, panelItems, headerDecoration, multipleTooltip } = this.props;
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
                     React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
                     React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));
@@ -4012,13 +4024,13 @@ class AsideHeader extends React__default.Component {
         this.renderSecondPane = (size) => {
             return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
         };
-        this.renderLogo = () => (React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
+        this.renderLogo = () => React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
         this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
             this.renderLogo(),
-            React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
+            React__default.createElement(CompositeBar, { items: this.props.subheaderItems, enableCollapsing: false, onItemClick: this.onItemClick }),
             React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
-            const { compact, renderFooter } = this.props;
+            const { renderFooter, compact } = this.props;
             return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
@@ -4031,7 +4043,7 @@ class AsideHeader extends React__default.Component {
         };
         this.renderCollapseButton = () => {
             var _a;
-            const { compact, dict } = this.props;
+            const { dict, compact } = this.props;
             const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
             return (React__default.createElement(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] },
                 React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
@@ -4044,10 +4056,10 @@ class AsideHeader extends React__default.Component {
             var _a, _b;
             (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
-        this.onItemClick = (item, collapsed) => {
+        this.onItemClick = (item, collapsed, event) => {
             var _a, _b, _c;
             (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
+            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
         };
         this.onLogoClick = (event) => {
             var _a, _b, _c, _d;
@@ -4058,10 +4070,11 @@ class AsideHeader extends React__default.Component {
     render() {
         const { className, compact } = this.props;
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement("div", { className: b$i({ compact }, className) },
-            React__default.createElement("div", { className: b$i('pane-container') },
-                this.renderFirstPane(size),
-                this.renderSecondPane(size))));
+        return (React__default.createElement(AsideHeaderContextProvider, { value: { compact, size } },
+            React__default.createElement("div", { className: b$i({ compact }, className) },
+                React__default.createElement("div", { className: b$i('pane-container') },
+                    this.renderFirstPane(size),
+                    this.renderSecondPane(size)))));
     }
 }
 AsideHeader.defaultProps = {
@@ -5464,5 +5477,5 @@ const configure = (newConfig) => {
     });
 };
 
-export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, configure };
+export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
 //# sourceMappingURL=index.js.map