@gravity-ui/navigation 3.11.0 → 4.0.0

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js

@@ -0,0 +1,32 @@
+import './MultipleTooltip.css';
+import React__default from 'react';
+import { Popup } from '@gravity-ui/uikit';
+import { createBlock } from '../../../../utils/cn.js';
+import { COLLAPSE_ITEM_ID } from '../constants.js';
+import { MultipleTooltipContext } from './MultipleTooltipContext.js';
+import styles from './MultipleTooltip.module.scss.js';
+
+const b = createBlock('multiple-tooltip', styles);
+const POPUP_OFFSET = { mainAxis: 4, crossAxis: -32 };
+const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
+    const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
+    const activeItem = activeIndex === undefined ? null : items[activeIndex];
+    return (React__default.createElement(Popup, { open: open, className: b('popup'), anchorElement: anchorRef.current, strategy: "fixed", placement: placement, offset: POPUP_OFFSET },
+        React__default.createElement("div", { className: b() },
+            React__default.createElement("div", { className: b('items-container') }, items
+                .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
+                (id !== COLLAPSE_ITEM_ID && type !== 'action'))
+                .map((currentItem, idx) => {
+                switch (currentItem.type) {
+                    case 'divider':
+                        return (React__default.createElement("div", { className: b('item', { divider: true }), key: idx }, currentItem.title));
+                    default:
+                        return (React__default.createElement("div", { className: b('item', {
+                                active: currentItem === activeItem,
+                            }), key: idx }, currentItem.title));
+                }
+            })))));
+};
+
+export { MultipleTooltip };
+//# sourceMappingURL=MultipleTooltip.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleTooltip.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Popup, PopupProps} from '@gravity-ui/uikit';\n\nimport {AsideHeaderItem} from 'src/components/AsideHeader/types';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {COLLAPSE_ITEM_ID} from '../constants';\n\nimport {MultipleTooltipContext} from './MultipleTooltipContext';\n\nimport styles from './MultipleTooltip.module.scss';\n\nconst b = createBlock('multiple-tooltip', styles);\n\nconst POPUP_OFFSET: PopupProps['offset'] = {mainAxis: 4, crossAxis: -32};\n\ntype MultipleTooltipProps = Pick<PopupProps, 'open' | 'placement'> & {\n    anchorRef: React.RefObject<HTMLElement>;\n    items: AsideHeaderItem[];\n};\n\nexport const MultipleTooltip: React.FC<MultipleTooltipProps> = ({\n    items,\n    open,\n    anchorRef,\n    placement,\n}) => {\n    const {activeIndex, hideCollapseItemTooltip} = React.useContext(MultipleTooltipContext);\n    const activeItem = activeIndex === undefined ? null : items[activeIndex];\n\n    return (\n        <Popup\n            open={open}\n            className={b('popup')}\n            anchorElement={anchorRef.current}\n            strategy=\"fixed\"\n            placement={placement}\n            offset={POPUP_OFFSET}\n        >\n            <div className={b()}>\n                <div className={b('items-container')}>\n                    {items\n                        .filter(\n                            ({type = 'regular', id}) =>\n                                !hideCollapseItemTooltip ||\n                                (id !== COLLAPSE_ITEM_ID && type !== 'action'),\n                        )\n                        .map((currentItem, idx) => {\n                            switch (currentItem.type) {\n                                case 'divider':\n                                    return (\n                                        <div className={b('item', {divider: true})} key={idx}>\n                                            {currentItem.title}\n                                        </div>\n                                    );\n                                default:\n                                    return (\n                                        <div\n                                            className={b('item', {\n                                                active: currentItem === activeItem,\n                                            })}\n                                            key={idx}\n                                        >\n                                            {currentItem.title}\n                                        </div>\n                                    );\n                            }\n                        })}\n                </div>\n            </div>\n        </Popup>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AAaA,MAAM,CAAC,GAAG,WAAW,CAAC,kBAAkB,EAAE,MAAM,CAAC;AAEjD,MAAM,YAAY,GAAyB,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAC;AAOjE,MAAM,eAAe,GAAmC,CAAC,EAC5D,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,EAAC,WAAW,EAAE,uBAAuB,EAAC,GAAGA,cAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC;AACvF,IAAA,MAAM,UAAU,GAAG,WAAW,KAAK,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;AAExE,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,YAAY,EAAA;QAEpBA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,EAAE,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC/B;AACI,iBAAA,MAAM,CACH,CAAC,EAAC,IAAI,GAAG,SAAS,EAAE,EAAE,EAAC,KACnB,CAAC,uBAAuB;iBACvB,EAAE,KAAK,gBAAgB,IAAI,IAAI,KAAK,QAAQ,CAAC;AAErD,iBAAA,GAAG,CAAC,CAAC,WAAW,EAAE,GAAG,KAAI;AACtB,gBAAA,QAAQ,WAAW,CAAC,IAAI;AACpB,oBAAA,KAAK,SAAS;wBACV,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,EAC/C,WAAW,CAAC,KAAK,CAChB;AAEd,oBAAA;AACI,wBAAA,QACIA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;gCACjB,MAAM,EAAE,WAAW,KAAK,UAAU;6BACrC,CAAC,EACF,GAAG,EAAE,GAAG,EAAA,EAEP,WAAW,CAAC,KAAK,CAChB;;AAGtB,aAAC,CAAC,CACJ,CACJ,CACF;AAEhB;;;;"}

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"g-root_theme_dark":"MultipleTooltip-module__g-root_theme_dark___C5nrp","gRootThemeDark":"MultipleTooltip-module__g-root_theme_dark___C5nrp","gn-multiple-tooltip":"MultipleTooltip-module__gn-multiple-tooltip___UCYs0","gnMultipleTooltip":"MultipleTooltip-module__gn-multiple-tooltip___UCYs0","g-root_theme_dark-hc":"MultipleTooltip-module__g-root_theme_dark-hc___sdXJ2","gRootThemeDarkHc":"MultipleTooltip-module__g-root_theme_dark-hc___sdXJ2","g-root_theme_light":"MultipleTooltip-module__g-root_theme_light___B7ecO","gRootThemeLight":"MultipleTooltip-module__g-root_theme_light___B7ecO","g-root_theme_light-hc":"MultipleTooltip-module__g-root_theme_light-hc___75Wfu","gRootThemeLightHc":"MultipleTooltip-module__g-root_theme_light-hc___75Wfu","g-popup":"MultipleTooltip-module__g-popup___GO-A5","gPopup":"MultipleTooltip-module__g-popup___GO-A5","gn-multiple-tooltip__popup":"MultipleTooltip-module__gn-multiple-tooltip__popup___wE4Fl","gnMultipleTooltipPopup":"MultipleTooltip-module__gn-multiple-tooltip__popup___wE4Fl","gn-multiple-tooltip__items-container":"MultipleTooltip-module__gn-multiple-tooltip__items-container___1N4u-","gnMultipleTooltipItemsContainer":"MultipleTooltip-module__gn-multiple-tooltip__items-container___1N4u-","gn-multiple-tooltip__item":"MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6","gnMultipleTooltipItem":"MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6","gn-multiple-tooltip__item_divider":"MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S","gnMultipleTooltipItemDivider":"MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S","gn-multiple-tooltip__item_active":"MultipleTooltip-module__gn-multiple-tooltip__item_active___CP4PC","gnMultipleTooltipItemActive":"MultipleTooltip-module__gn-multiple-tooltip__item_active___CP4PC"};
+
+export { styles as default };
+//# sourceMappingURL=MultipleTooltip.module.scss.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.module.scss.js.map

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

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+const multipleTooltipContextDefaults = {
+    active: false,
+    activeIndex: undefined,
+    hideCollapseItemTooltip: false,
+    lastClickedItemIndex: undefined,
+    setValue: () => { },
+};
+const MultipleTooltipContext = React__default.createContext(multipleTooltipContextDefaults);
+class MultipleTooltipProvider extends React__default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = Object.assign({}, multipleTooltipContextDefaults);
+        this.setValue = (value) => {
+            this.setState(Object.assign({}, value));
+        };
+    }
+    render() {
+        const { children } = this.props;
+        return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
+    }
+}
+
+export { MultipleTooltipContext, MultipleTooltipProvider };
+//# sourceMappingURL=MultipleTooltipContext.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleTooltipContext.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.tsx"],"sourcesContent":["import React from 'react';\n\ninterface MultipleTooltipContextProps {\n    active: boolean;\n    activeIndex: number | undefined;\n    hideCollapseItemTooltip: boolean;\n    lastClickedItemIndex: number | undefined;\n    setValue<K extends keyof Omit<MultipleTooltipContextProps, 'setValue'>>(\n        value:\n            | Pick<Omit<MultipleTooltipContextProps, 'setValue'>, K>\n            | Omit<MultipleTooltipContextProps, 'setValue'>,\n    ): void;\n}\n\nconst multipleTooltipContextDefaults = {\n    active: false,\n    activeIndex: undefined,\n    hideCollapseItemTooltip: false,\n    lastClickedItemIndex: undefined,\n    setValue: () => {},\n};\n\nexport const MultipleTooltipContext = React.createContext<MultipleTooltipContextProps>(\n    multipleTooltipContextDefaults,\n);\n\ntype MultipleTooltipProviderState = Omit<MultipleTooltipContextProps, 'setValue'>;\n\nexport class MultipleTooltipProvider extends React.PureComponent<\n    {children: React.ReactNode},\n    MultipleTooltipProviderState\n> {\n    state = {\n        ...multipleTooltipContextDefaults,\n    };\n\n    render() {\n        const {children} = this.props;\n\n        return (\n            <MultipleTooltipContext.Provider value={{...this.state, setValue: this.setValue}}>\n                {children}\n            </MultipleTooltipContext.Provider>\n        );\n    }\n\n    setValue: MultipleTooltipContextProps['setValue'] = (value) => {\n        this.setState({...value});\n    };\n}\n"],"names":["React"],"mappings":";;AAcA,MAAM,8BAA8B,GAAG;AACnC,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,uBAAuB,EAAE,KAAK;AAC9B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,QAAQ,EAAE,MAAK,GAAG;CACrB;AAEY,MAAA,sBAAsB,GAAGA,cAAK,CAAC,aAAa,CACrD,8BAA8B;AAKrB,MAAA,uBAAwB,SAAQA,cAAK,CAAC,aAGlD,CAAA;AAHD,IAAA,WAAA,GAAA;;QAII,IAAK,CAAA,KAAA,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,8BAA8B,CACnC;AAYF,QAAA,IAAA,CAAA,QAAQ,GAA4C,CAAC,KAAK,KAAI;AAC1D,YAAA,IAAI,CAAC,QAAQ,CAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAE;AAC7B,SAAC;;IAZD,MAAM,GAAA;AACF,QAAA,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK;QAE7B,QACIA,6BAAC,sBAAsB,CAAC,QAAQ,EAAC,EAAA,KAAK,kCAAM,IAAI,CAAC,KAAK,CAAE,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAC1E,CAAA,EAAA,EAAA,QAAQ,CACqB;;AAO7C;;;;"}

package/build/esm/components/AsideHeader/components/CompositeBar/constants.js

@@ -0,0 +1,7 @@
+const ITEM_TYPE_REGULAR = 'regular';
+const COLLAPSE_ITEM_ID = 'collapse-item-id';
+const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
+const POPUP_ITEM_HEIGHT = 28;
+
+export { COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR, POPUP_ITEM_HEIGHT, POPUP_PLACEMENT };
+//# sourceMappingURL=constants.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/constants.ts"],"sourcesContent":["import {PopupPlacement} from '@gravity-ui/uikit';\n\nexport const ITEM_TYPE_REGULAR = 'regular';\nexport const COLLAPSE_ITEM_ID = 'collapse-item-id';\n\nexport const POPUP_PLACEMENT: PopupPlacement = ['right-start', 'right-end', 'right'];\nexport const POPUP_ITEM_HEIGHT = 28;\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB,GAAG;AAC1B,MAAM,gBAAgB,GAAG;AAEnB,MAAA,eAAe,GAAmB,CAAC,aAAa,EAAE,WAAW,EAAE,OAAO;AAC5E,MAAM,iBAAiB,GAAG;;;;"}

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

@@ -0,0 +1 @@
+export { CompositeBar } from './CompositeBar';

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

@@ -0,0 +1,10 @@
+import { AsideHeaderItem } from '../../types';
+export declare function getItemHeight(compositeItem: AsideHeaderItem): 40 | 50 | 15;
+export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[]): number;
+export declare function getSelectedItemIndex(compositeItems: AsideHeaderItem[]): number | undefined;
+export declare function getItemsMinHeight(compositeItems: AsideHeaderItem[]): number;
+export declare function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem;
+export declare function getAutosizeListItems(compositeItems: AsideHeaderItem[], height: number, collapseItem: AsideHeaderItem): {
+    listItems: AsideHeaderItem[];
+    collapseItems: AsideHeaderItem[];
+};

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js

@@ -0,0 +1,94 @@
+import { Ellipsis } from '@gravity-ui/icons';
+import { ITEM_HEIGHT } from '../../../constants.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
+
+function getItemHeight(compositeItem) {
+    switch (compositeItem.type) {
+        case 'action':
+            return 50;
+        case 'divider':
+            return 15;
+        default:
+            return ITEM_HEIGHT;
+    }
+}
+function getItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+}
+function getSelectedItemIndex(compositeItems) {
+    const index = compositeItems.findIndex(({ current }) => Boolean(current));
+    return index === -1 ? undefined : index;
+}
+function getPinnedItems(compositeItems) {
+    const pinnedItems = [];
+    for (const compositeItem of compositeItems) {
+        if (compositeItem.pinned) {
+            pinnedItems.push(compositeItem);
+        }
+        else if (compositeItem.type === 'divider') {
+            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
+                pinnedItems.push(compositeItem);
+            }
+        }
+    }
+    return pinnedItems;
+}
+function getItemsMinHeight(compositeItems) {
+    const pinnedItems = getPinnedItems(compositeItems);
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    return (getItemsHeight(pinnedItems) +
+        getItemsHeight(afterMoreButtonItems) +
+        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT));
+}
+function getMoreButtonItem(menuMoreTitle) {
+    return {
+        id: COLLAPSE_ITEM_ID,
+        title: menuMoreTitle,
+        icon: Ellipsis,
+        iconSize: 18,
+    };
+}
+function getAutosizeListItems(compositeItems, height, collapseItem) {
+    var _a, _b, _c;
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    const regularItems = compositeItems.filter(({ afterMoreButton }) => !afterMoreButton);
+    const listItems = [...regularItems, ...afterMoreButtonItems];
+    const allItemsHeight = getItemsHeight(listItems);
+    if (allItemsHeight <= height) {
+        return { listItems, collapseItems: [] };
+    }
+    const collapseItemHeight = getItemHeight(collapseItem);
+    listItems.splice(regularItems.length, 0, collapseItem);
+    const collapseItems = [];
+    let listHeight = allItemsHeight + collapseItemHeight;
+    let index = listItems.length;
+    while (listHeight > height) {
+        if (index === 0) {
+            break;
+        }
+        index--;
+        const compositeItem = listItems[index];
+        if (compositeItem.pinned ||
+            compositeItem.id === COLLAPSE_ITEM_ID ||
+            compositeItem.afterMoreButton) {
+            continue;
+        }
+        if (compositeItem.type === 'divider') {
+            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === undefined ? undefined : _a.type) === 'divider') {
+                listHeight -= getItemHeight(compositeItem);
+                listItems.splice(index, 1);
+            }
+            continue;
+        }
+        listHeight -= getItemHeight(compositeItem);
+        collapseItems.unshift(...listItems.splice(index, 1));
+    }
+    if (((_b = listItems[index]) === null || _b === undefined ? undefined : _b.type) === 'divider' &&
+        (index === 0 || ((_c = listItems[index - 1]) === null || _c === undefined ? undefined : _c.type) === 'divider')) {
+        listItems.splice(index, 1);
+    }
+    return { listItems, collapseItems };
+}
+
+export { getAutosizeListItems, getItemHeight, getItemsHeight, getItemsMinHeight, getMoreButtonItem, getSelectedItemIndex };
+//# sourceMappingURL=utils.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID} from './constants';\n\nexport function getItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems: AsideHeaderItem[] = [];\n    for (const compositeItem of compositeItems) {\n        if (compositeItem.pinned) {\n            pinnedItems.push(compositeItem);\n        } else if (compositeItem.type === 'divider') {\n            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n                pinnedItems.push(compositeItem);\n            }\n        }\n    }\n    return pinnedItems;\n}\n\nexport function getItemsMinHeight(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems = getPinnedItems(compositeItems);\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n    return (\n        getItemsHeight(pinnedItems) +\n        getItemsHeight(afterMoreButtonItems) +\n        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT)\n    );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem {\n    return {\n        id: COLLAPSE_ITEM_ID,\n        title: menuMoreTitle,\n        icon: Ellipsis,\n        iconSize: 18,\n    };\n}\n\nexport function getAutosizeListItems(\n    compositeItems: AsideHeaderItem[],\n    height: number,\n    collapseItem: AsideHeaderItem,\n): {\n    listItems: AsideHeaderItem[];\n    collapseItems: AsideHeaderItem[];\n} {\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n    const regularItems = compositeItems.filter(({afterMoreButton}) => !afterMoreButton);\n    const listItems = [...regularItems, ...afterMoreButtonItems];\n\n    const allItemsHeight = getItemsHeight(listItems);\n    if (allItemsHeight <= height) {\n        return {listItems, collapseItems: []};\n    }\n\n    const collapseItemHeight = getItemHeight(collapseItem);\n\n    listItems.splice(regularItems.length, 0, collapseItem);\n    const collapseItems: AsideHeaderItem[] = [];\n\n    let listHeight = allItemsHeight + collapseItemHeight;\n    let index = listItems.length;\n    while (listHeight > height) {\n        if (index === 0) {\n            break;\n        }\n        index--;\n\n        const compositeItem = listItems[index];\n        if (\n            compositeItem.pinned ||\n            compositeItem.id === COLLAPSE_ITEM_ID ||\n            compositeItem.afterMoreButton\n        ) {\n            continue;\n        }\n        if (compositeItem.type === 'divider') {\n            if (index + 1 < listItems.length && listItems[index + 1]?.type === 'divider') {\n                listHeight -= getItemHeight(compositeItem);\n                listItems.splice(index, 1);\n            }\n            continue;\n        }\n        listHeight -= getItemHeight(compositeItem);\n        collapseItems.unshift(...listItems.splice(index, 1));\n    }\n    if (\n        listItems[index]?.type === 'divider' &&\n        (index === 0 || listItems[index - 1]?.type === 'divider')\n    ) {\n        listItems.splice(index, 1);\n    }\n\n    return {listItems, collapseItems};\n}\n"],"names":[],"mappings":";;;;AAOM,SAAU,aAAa,CAAC,aAA8B,EAAA;AACxD,IAAA,QAAQ,aAAa,CAAC,IAAI;AACtB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,EAAE;AACb,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,EAAE;AAEb,QAAA;AACI,YAAA,OAAO,WAAW;;AAE9B;AAEM,SAAU,cAAc,CAA4B,KAAU,EAAA;IAChE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE;AAEM,SAAU,oBAAoB,CAAC,cAAiC,EAAA;AAClE,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAC,OAAO,EAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AACvE,IAAA,OAAO,KAAK,KAAK,EAAE,GAAG,SAAS,GAAG,KAAK;AAC3C;AAEA,SAAS,cAAc,CAAC,cAAiC,EAAA;IACrD,MAAM,WAAW,GAAsB,EAAE;AACzC,IAAA,KAAK,MAAM,aAAa,IAAI,cAAc,EAAE;AACxC,QAAA,IAAI,aAAa,CAAC,MAAM,EAAE;AACtB,YAAA,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;AAC5B,aAAA,IAAI,aAAa,CAAC,IAAI,KAAK,SAAS,EAAE;AACzC,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;AAClF,gBAAA,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;;;AAI3C,IAAA,OAAO,WAAW;AACtB;AAEM,SAAU,iBAAiB,CAAC,cAAiC,EAAA;AAC/D,IAAA,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC;AAClD,IAAA,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAC,eAAe,EAAC,KAAK,eAAe,CAAC;AAE1F,IAAA,QACI,cAAc,CAAC,WAAW,CAAC;QAC3B,cAAc,CAAC,oBAAoB,CAAC;AACpC,SAAC,WAAW,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC;AAExE;AAEM,SAAU,iBAAiB,CAAC,aAAsB,EAAA;IACpD,OAAO;AACH,QAAA,EAAE,EAAE,gBAAgB;AACpB,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,QAAQ,EAAE,EAAE;KACf;AACL;SAEgB,oBAAoB,CAChC,cAAiC,EACjC,MAAc,EACd,YAA6B,EAAA;;AAK7B,IAAA,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAC,eAAe,EAAC,KAAK,eAAe,CAAC;AAC1F,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAC,eAAe,EAAC,KAAK,CAAC,eAAe,CAAC;IACnF,MAAM,SAAS,GAAG,CAAC,GAAG,YAAY,EAAE,GAAG,oBAAoB,CAAC;AAE5D,IAAA,MAAM,cAAc,GAAG,cAAc,CAAC,SAAS,CAAC;AAChD,IAAA,IAAI,cAAc,IAAI,MAAM,EAAE;AAC1B,QAAA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,EAAE,EAAC;;AAGzC,IAAA,MAAM,kBAAkB,GAAG,aAAa,CAAC,YAAY,CAAC;IAEtD,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC;IACtD,MAAM,aAAa,GAAsB,EAAE;AAE3C,IAAA,IAAI,UAAU,GAAG,cAAc,GAAG,kBAAkB;AACpD,IAAA,IAAI,KAAK,GAAG,SAAS,CAAC,MAAM;AAC5B,IAAA,OAAO,UAAU,GAAG,MAAM,EAAE;AACxB,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;YACb;;AAEJ,QAAA,KAAK,EAAE;AAEP,QAAA,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC;QACtC,IACI,aAAa,CAAC,MAAM;YACpB,aAAa,CAAC,EAAE,KAAK,gBAAgB;YACrC,aAAa,CAAC,eAAe,EAC/B;YACE;;AAEJ,QAAA,IAAI,aAAa,CAAC,IAAI,KAAK,SAAS,EAAE;YAClC,IAAI,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,IAAI,CAAA,CAAA,EAAA,GAAA,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,gDAAE,IAAI,MAAK,SAAS,EAAE;AAC1E,gBAAA,UAAU,IAAI,aAAa,CAAC,aAAa,CAAC;AAC1C,gBAAA,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;;YAE9B;;AAEJ,QAAA,UAAU,IAAI,aAAa,CAAC,aAAa,CAAC;AAC1C,QAAA,aAAa,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;;IAExD,IACI,CAAA,MAAA,SAAS,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,IAAI,MAAK,SAAS;AACpC,SAAC,KAAK,KAAK,CAAC,IAAI,CAAA,CAAA,EAAA,GAAA,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAI,MAAK,SAAS,CAAC,EAC3D;AACE,QAAA,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;;AAG9B,IAAA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAC;AACrC;;;;"}

package/build/esm/components/AsideHeader/components/FirstPanel.js

@@ -0,0 +1,41 @@
+import React__default, { useRef } from 'react';
+import { setRef } from '@gravity-ui/uikit';
+import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import i18n from '../i18n/index.js';
+import { b } from '../utils.js';
+import './AllPagesPanel/AllPagesPanel.js';
+import '@gravity-ui/icons';
+import './AllPagesPanel/i18n/index.js';
+import { useVisibleMenuItems } from './AllPagesPanel/useVisibleMenuItems.js';
+import { CollapseButton } from './CollapseButton/CollapseButton.js';
+import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import { Header } from './Header.js';
+import { Panels } from './Panels.js';
+
+const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
+const FirstPanel = React__default.forwardRef((_props, ref) => {
+    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
+    const visibleMenuItems = useVisibleMenuItems();
+    const asideRef = useRef(null);
+    React__default.useEffect(() => {
+        setRef(ref, asideRef.current);
+    }, [ref]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa },
+            React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
+            customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
+            React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default.createElement(Header, null),
+                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b('menu-items') })),
+                React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+                    size,
+                    compact: Boolean(compact),
+                    asideRef,
+                })),
+                !hideCollapseButton && React__default.createElement(CollapseButton, null))),
+        React__default.createElement(Panels, null)));
+});
+FirstPanel.displayName = 'FirstPanel';
+
+export { FirstPanel };
+//# sourceMappingURL=FirstPanel.js.map

package/build/esm/components/AsideHeader/components/FirstPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            multipleTooltip={multipleTooltip}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,uBAAuB,GAAG,gDAAgD;AAEzE,MAAM,UAAU,GAAGA,cAAK,CAAC,UAAU,CAAiB,CAAC,MAAM,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,yBAAyB,EACzB,SAAS,EACT,kBAAkB,EAClB,EAAE,GACL,GAAG,0BAA0B,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAiB,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;AACjD,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAET,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,aAAW,EAAE,EAAA;YACpEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAI,CAAA;AACzD,YAAA,gBAAgB,KACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,EAClE,EAAA,gBAAgB,CACf,CACT;AAED,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AACvE,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA;AACT,gBAAA,CAAA,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAA,SAAA,GAAhB,gBAAgB,CAAE,MAAM,KACrBA,cAAC,CAAA,aAAA,CAAA,YAAY,IACT,WAAW,EAAE,uBAAuB,EACpC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,gBAAgB,EACvB,aAAa,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAb,aAAa,GAAI,IAAI,CAAC,YAAY,CAAC,EAClD,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,eAAe,EAClC,CAAA,KAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,CACtC;AACD,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAG;oBACZ,IAAI;AACJ,oBAAA,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,QAAQ;AACX,iBAAA,CAAC,CACA;AACL,gBAAA,CAAC,kBAAkB,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACxC,CACJ;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACG;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.css

@@ -0,0 +1,2 @@
+.FooterItem-module__gn-footer-item___Hi7NH{height:40px;width:100%}
+.FooterItem-module__gn-mobile-header-footer-item___dk-Wo{flex-grow:1;position:relative}.FooterItem-module__gn-mobile-header-footer-item__button___KSu25{align-items:center;background:none;border:none;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;outline:none;padding:13px 10px;width:100%}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo .FooterItem-module__gn-mobile-header-footer-item__icon___Spltd{color:var(--g-color-text-misc)}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo+.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:before{border-left:1px solid var(--g-color-base-generic);bottom:8px;content:"";left:0;position:absolute;top:8px}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:empty{display:none}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AsideHeaderItem } from '../../types';
+export interface FooterItemProps extends AsideHeaderItem {
+}
+export declare function FooterItem(props: FooterItemProps): React.JSX.Element;

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js

@@ -0,0 +1,15 @@
+import './FooterItem.css';
+import React__default from 'react';
+import { ASIDE_HEADER_ICON_SIZE } from '../../../constants.js';
+import { createBlock, block } from '../../../utils/cn.js';
+import { Item } from '../CompositeBar/Item/Item.js';
+import styles from './FooterItem.module.scss.js';
+
+const b = createBlock('footer-item', styles);
+const bGlobal = block('footer-item');
+function FooterItem(props) {
+    return (React__default.createElement(Item, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal()}` })));
+}
+
+export { FooterItem };
+//# sourceMappingURL=FooterItem.js.map

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {}\n\nexport function FooterItem(props: FooterItemProps) {\n    return (\n        <Item\n            {...props}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            className={`${b({compact: props.compact})} ${bGlobal()}`}\n        />\n    );\n}\n"],"names":["React"],"mappings":";;;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAI9B,SAAU,UAAU,CAAC,KAAsB,EAAA;AAC7C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EAAA,EACT,QAAQ,EAAE,sBAAsB,EAChC,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAE,CAAA,EAAA,CAAA,CAC1D;AAEV;;;;"}

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
+
+export { styles as default };
+//# sourceMappingURL=FooterItem.module.scss.js.map

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js.map

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

package/build/esm/components/AsideHeader/components/Header.js

@@ -0,0 +1,27 @@
+import React__default, { useCallback } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { Logo } from '../../Logo/Logo.js';
+import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
+import { useAsideHeaderInnerContext, useAsideHeaderContext } from '../AsideHeaderContext.js';
+import { b } from '../utils.js';
+import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import SvgDividerCollapsed from '../../../assets/icons/divider-collapsed.svg.js';
+
+const DEFAULT_SUBHEADER_ITEMS = [];
+const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
+const Header = () => {
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
+    const { compact } = useAsideHeaderContext();
+    const onLogoClick = useCallback((event) => {
+        var _a;
+        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+        (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
+    }, [onClosePanel, logo]);
+    return (React__default.createElement("div", { className: b('header', { ['with-decoration']: headerDecoration }) },
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", compact: compact, items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

package/build/esm/components/AsideHeader/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {Logo} from '../../Logo';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {CompositeBar} from './CompositeBar';\n\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];\nconst HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';\n\nexport const Header = () => {\n    const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =\n        useAsideHeaderInnerContext();\n    const {compact} = useAsideHeaderContext();\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            {logo && (\n                <Logo\n                    {...logo}\n                    onClick={onLogoClick}\n                    compact={compact}\n                    buttonClassName={b('logo-button')}\n                    iconPlaceClassName={b('logo-icon-place')}\n                />\n            )}\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                type=\"subheader\"\n                compact={compact}\n                items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}\n                onItemClick={onItemClick}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={ASIDE_HEADER_COMPACT_WIDTH}\n                    height={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;;;AAcA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAC,GACrE,0BAA0B,EAAE;AAChC,IAAA,MAAM,EAAC,OAAO,EAAC,GAAG,qBAAqB,EAAE;AAEzC,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACDA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;QAEDA,cAAC,CAAA,aAAA,CAAA,YAAY,IACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT } from '../../../constants.js';
+import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { b } from '../../utils.js';
+import SvgDividerCollapsed from '../../../../assets/icons/divider-collapsed.svg.js';
+
+const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
+    const { compact } = useAsideHeaderContext();
+    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
+    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
+    return (React__default.createElement("div", { className: b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
+        React__default.createElement("div", { className: b('aside-content', { 'with-decoration': headerDecoration }) },
+            React__default.createElement("div", { className: b('header', { 'with-decoration': headerDecoration }) },
+                React__default.createElement("div", { style: { height: subheaderHeight } }),
+                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
+            React__default.createElement("div", { style: { flex: 1 } }))));
+};
+
+export { AsideFallback };
+//# sourceMappingURL=AsideFallback.js.map

package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAG,qBAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

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

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { ContentProps } from '../../../Content';
 import { LayoutProps } from '../../types';
-import '../../AsideHeader.scss';
 export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
 }
 declare const PageLayout: (({ compact, className, children, topAlert }: PageLayoutProps) => React.JSX.Element) & {

package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.js

@@ -0,0 +1,57 @@
+import React__default, { useMemo, Suspense } from 'react';
+import { Content } from '../../../Content/Content.js';
+import { ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH } from '../../../constants.js';
+import { AsideHeaderContextProvider, useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { b } from '../../utils.js';
+
+const TopAlert = React__default.lazy(() => import('../../../TopAlert/index.js').then((module) => ({ default: module.TopAlert })));
+// Constants for TopAlert height calculation (in pixels)
+const BASE_ALERT_HEIGHT = 60; // Base height of the alert component
+const TITLE_HEIGHT_BONUS = 14; // Additional height when title is present
+const DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled
+function calcEstimatedTopAlertHeight(topAlert) {
+    if (!topAlert || 'render' in topAlert) {
+        return 0;
+    }
+    return (BASE_ALERT_HEIGHT +
+        (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -
+        (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0));
+}
+const Layout = ({ compact, className, children, topAlert }) => {
+    const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
+    const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
+    const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);
+    // Reserve margin immediately on server render through inline variable on container.
+    // After TopAlert mount, the exact height will be set by hook.
+    const getPreloadHeightValue = () => {
+        if (!topAlert || 'render' in topAlert || typeof topAlert.preloadHeight === 'undefined') {
+            return undefined;
+        }
+        if (topAlert.preloadHeight === true) {
+            return estimatedTopAlertHeight;
+        }
+        if (typeof topAlert.preloadHeight === 'number') {
+            return topAlert.preloadHeight;
+        }
+        return undefined;
+    };
+    const preloadHeightValue = getPreloadHeightValue();
+    return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
+        React__default.createElement("div", { className: b({ compact }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+            typeof preloadHeightValue === 'number' ? (React__default.createElement("style", { dangerouslySetInnerHTML: {
+                    __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,
+                } })) : null,
+            topAlert && (React__default.createElement(Suspense, { fallback: null },
+                React__default.createElement(TopAlert, { className: b('top-alert'), alert: topAlert }))),
+            React__default.createElement("div", { className: b('pane-container') }, children))));
+};
+const ConnectedContent = ({ children, renderContent, }) => {
+    const { size } = useAsideHeaderContext();
+    return (React__default.createElement(Content, { size: size, className: b('content'), renderContent: renderContent }, children));
+};
+const PageLayout = Object.assign(Layout, {
+    Content: ConnectedContent,
+});
+
+export { PageLayout };
+//# sourceMappingURL=PageLayout.js.map

package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, Suspense, useMemo} from 'react';\n\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nconst TopAlert = React.lazy(() =>\n    import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\n// Constants for TopAlert height calculation (in pixels)\nconst BASE_ALERT_HEIGHT = 60; // Base height of the alert component\nconst TITLE_HEIGHT_BONUS = 14; // Additional height when title is present\nconst DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled\n\nfunction calcEstimatedTopAlertHeight(topAlert?: TopAlertProps) {\n    if (!topAlert || 'render' in topAlert) {\n        return 0;\n    }\n\n    return (\n        BASE_ALERT_HEIGHT +\n        (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -\n        (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0)\n    );\n}\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {}\n\nconst Layout = ({compact, className, children, topAlert}: PageLayoutProps) => {\n    const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;\n    const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);\n\n    const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);\n\n    // Reserve margin immediately on server render through inline variable on container.\n    // After TopAlert mount, the exact height will be set by hook.\n    const getPreloadHeightValue = (): number | undefined => {\n        if (!topAlert || 'render' in topAlert || typeof topAlert.preloadHeight === 'undefined') {\n            return undefined;\n        }\n\n        if (topAlert.preloadHeight === true) {\n            return estimatedTopAlertHeight;\n        }\n\n        if (typeof topAlert.preloadHeight === 'number') {\n            return topAlert.preloadHeight;\n        }\n\n        return undefined;\n    };\n\n    const preloadHeightValue = getPreloadHeightValue();\n\n    return (\n        <AsideHeaderContextProvider value={asideHeaderContextValue}>\n            <div\n                className={b({compact}, className)}\n                style={{\n                    ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n                }}\n            >\n                {typeof preloadHeightValue === 'number' ? (\n                    <style\n                        dangerouslySetInnerHTML={{\n                            __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,\n                        }}\n                    />\n                ) : null}\n                {topAlert && (\n                    <Suspense fallback={null}>\n                        <TopAlert className={b('top-alert')} alert={topAlert} />\n                    </Suspense>\n                )}\n                <div className={b('pane-container')}>{children}</div>\n            </div>\n        </AsideHeaderContextProvider>\n    );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n    children,\n    renderContent,\n}) => {\n    const {size} = useAsideHeaderContext();\n\n    return (\n        <Content size={size} className={b('content')} renderContent={renderContent}>\n            {children}\n        </Content>\n    );\n};\n\nconst PageLayout = Object.assign(Layout, {\n    Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { FirstPanel } from '../FirstPanel.js';
+import { useAsideHeaderContext, AsideHeaderInnerContextProvider } from '../../AsideHeaderContext.js';
+import { useAsideHeaderInnerContextValue } from '../../useAsideHeaderInnerContextValue.js';
+
+const PageLayoutAside = React__default.forwardRef((props, ref) => {
+    const { size, compact } = useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
+    return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
+        React__default.createElement(FirstPanel, { ref: ref })));
+});
+PageLayoutAside.displayName = 'PageLayoutAside';
+
+export { PageLayoutAside };
+//# sourceMappingURL=PageLayoutAside.js.map

package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayoutAside.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport {FirstPanel} from '..';\nimport {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {AsideHeaderProps} from '../../types';\nimport {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue';\n\ntype Props = Omit<AsideHeaderProps, 'compact' | 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n    const {size, compact} = useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({size, compact, ...props});\n\n    return (\n        <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n            <FirstPanel ref={ref} />\n        </AsideHeaderInnerContextProvider>\n    );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["React"],"mappings":";;;;;AASO,MAAM,eAAe,GAAGA,cAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;IAClF,MAAM,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,qBAAqB,EAAE;IAE/C,MAAM,4BAA4B,GAAG,+BAA+B,CAAE,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,OAAO,EAAA,EAAK,KAAK,CAAA,CAAE;AAE/F,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,+BAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChEA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,GAAG,EAAI,CAAA,CACM;AAE1C,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/build/esm/components/AsideHeader/components/Panels.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { Drawer } from '@gravity-ui/uikit';
+import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import { b } from '../utils.js';
+
+const Panels = () => {
+    const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
+    return panelItems ? (React__default.createElement(React__default.Fragment, null, panelItems.map((item) => (React__default.createElement(Drawer, { key: item.id, className: b('panels'), open: item.visible, onOpenChange: (open) => !open && (onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel()), style: { left: size }, contentClassName: b('panel', item.className) }, item.content))))) : null;
+};
+
+export { Panels };
+//# sourceMappingURL=Panels.js.map

package/build/esm/components/AsideHeader/components/Panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panels.js","sources":["../../../../../../src/components/AsideHeader/components/Panels.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Drawer} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nexport const Panels = () => {\n    const {panelItems, onClosePanel, size} = useAsideHeaderInnerContext();\n\n    return panelItems ? (\n        <React.Fragment>\n            {panelItems.map((item) => (\n                <Drawer\n                    key={item.id}\n                    className={b('panels')}\n                    open={item.visible}\n                    onOpenChange={(open) => !open && onClosePanel?.()}\n                    style={{left: size}}\n                    contentClassName={b('panel', item.className)}\n                >\n                    {item.content}\n                </Drawer>\n            ))}\n        </React.Fragment>\n    ) : null;\n};\n"],"names":["React"],"mappings":";;;;;AAOO,MAAM,MAAM,GAAG,MAAK;IACvB,MAAM,EAAC,UAAU,EAAE,YAAY,EAAE,IAAI,EAAC,GAAG,0BAA0B,EAAE;AAErE,IAAA,OAAO,UAAU,IACbA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,QACV,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACjBA,cAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,KAAI,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI,CAAA,EACjD,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EACnB,gBAAgB,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAE3C,IAAI,CAAC,OAAO,CACR,CACZ,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}

package/build/esm/components/AsideHeader/i18n/en.json.js

@@ -0,0 +1,11 @@
+var button_collapse = "Collapse";
+var button_expand = "Expand";
+var label_more = "More";
+var en = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+export { button_collapse, button_expand, en as default, label_more };
+//# sourceMappingURL=en.json.js.map

package/build/esm/components/AsideHeader/i18n/en.json.js.map

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

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

@@ -1,4 +1,12 @@
 declare const _default: ((key: "button_collapse" | "button_expand" | "label_more", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "button_collapse" | "button_expand" | "label_more", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "button_collapse" | "button_expand" | "label_more", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "gn-AsideHeader": Record<"button_collapse" | "button_expand" | "label_more", import("@gravity-ui/i18n").KeyData>;
     };

package/build/esm/components/AsideHeader/i18n/index.js

@@ -0,0 +1,10 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../utils/cn.js';
+import en from './en.json.js';
+import ru from './ru.json.js';
+
+const COMPONENT = 'AsideHeader';
+var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
+
+export { i18n as default };
+//# sourceMappingURL=index.js.map

package/build/esm/components/AsideHeader/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/AsideHeader/i18n/index.ts"],"sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst COMPONENT = 'AsideHeader';\nexport default addComponentKeysets({en, ru}, `${NAMESPACE}${COMPONENT}`);\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAS,GAAG,aAAa;AAC/B,WAAe,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,CAAA,EAAG,SAAS,CAAA,EAAG,SAAS,CAAA,CAAE,CAAC;;;;"}

package/build/esm/components/AsideHeader/i18n/ru.json.js

@@ -0,0 +1,11 @@
+var button_collapse = "Свернуть";
+var button_expand = "Развернуть";
+var label_more = "Ещё";
+var ru = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+export { button_collapse, button_expand, ru as default, label_more };
+//# sourceMappingURL=ru.json.js.map

package/build/esm/components/AsideHeader/i18n/ru.json.js.map

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