@gravity-ui/navigation 5.0.0 → 5.0.1

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

@@ -1,2 +1,2 @@
 .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
-.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-color,var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color)));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:0}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

@@ -2,11 +2,8 @@ import React, { PropsWithChildren } from 'react';
 import { ContentProps } from '../../../Content';
 import { LayoutProps } from '../../types';
 export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
-    onChangePinned?: (pinned: boolean) => void;
-    /** When `true`, menu items use compact height. */
-    isCompactMode?: boolean;
 }
-declare const PageLayout: (({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }: PageLayoutProps) => React.JSX.Element) & {
+declare const PageLayout: (({ compact, className, children, topAlert }: PageLayoutProps) => React.JSX.Element) & {
     Content: React.FC<React.PropsWithChildren<Pick<ContentProps, "renderContent">>>;
 };
 export { PageLayout };

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

@@ -1,10 +1,8 @@
 import './PageLayout.css';
 import React__default, { useMemo, Suspense } from 'react';
 import { Content } from '../../../Content/Content.js';
-import { ASIDE_HEADER_EXPANDED_WIDTH } from '../../../constants.js';
-import { getCollapsedWidth } from '../../../utils/getCollapsedWidth.js';
+import { ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH } from '../../../constants.js';
 import { AsideHeaderContextProvider, useAsideHeaderContext } from '../../AsideHeaderContext.js';
-import { useIsExpanded } from '../../hooks/useIsExpanded.js';
 import { b } from '../../utils.js';
 
 const TopAlert = React__default.lazy(() => import('../../../TopAlert/index.js').then((module) => ({ default: module.TopAlert })));
@@ -20,18 +18,9 @@ function calcEstimatedTopAlertHeight(topAlert) {
         (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -
         (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0));
 }
-const Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }) => {
-    const { isExpanded, onExpand, onFold, setCollapseBlocker } = useIsExpanded(pinned);
-    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);
-    const asideHeaderContextValue = useMemo(() => ({
-        size,
-        pinned,
-        isExpanded,
-        onChangePinned,
-        onExpand,
-        onFold,
-        setCollapseBlocker,
-    }), [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker]);
+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.
@@ -49,7 +38,7 @@ const Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompa
     };
     const preloadHeightValue = getPreloadHeightValue();
     return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React__default.createElement("div", { className: b({ collapsed: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        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,
@@ -58,9 +47,8 @@ const Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompa
             React__default.createElement("div", { className: b('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size, pinned, isExpanded } = useAsideHeaderContext();
-    const isExpandedByHover = !pinned && isExpanded;
-    return (React__default.createElement(Content, { size: size, className: b('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
+    const { size } = useAsideHeaderContext();
+    return (React__default.createElement(Content, { size: size, className: b('content'), renderContent: renderContent }, children));
 };
 const PageLayout = Object.assign(Layout, {
     Content: ConnectedContent,

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

@@ -1 +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_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {getCollapsedWidth} from '../../../utils/getCollapsedWidth';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {useIsExpanded} from '../../hooks/useIsExpanded';\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    onChangePinned?: (pinned: boolean) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n}\n\nconst Layout = ({\n    pinned,\n    className,\n    children,\n    topAlert,\n    onChangePinned,\n    isCompactMode,\n}: PageLayoutProps) => {\n    const {isExpanded, onExpand, onFold, setCollapseBlocker} = useIsExpanded(pinned);\n\n    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);\n\n    const asideHeaderContextValue = useMemo(\n        () => ({\n            size,\n            pinned,\n            isExpanded,\n            onChangePinned,\n            onExpand,\n            onFold,\n            setCollapseBlocker,\n        }),\n        [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker],\n    );\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({collapsed: !isExpanded}, 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, pinned, isExpanded} = useAsideHeaderContext();\n    const isExpandedByHover = !pinned && isExpanded;\n\n    return (\n        <Content\n            size={size}\n            className={b('content', {'expanded-by-hover': isExpandedByHover})}\n            renderContent={renderContent}\n        >\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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"}
+{"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.css

@@ -1,2 +1,2 @@
 .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
-.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-color,var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color)));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:0}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AsideHeaderProps } from '../../types';
-type Props = Omit<AsideHeaderProps, 'pinned' | 'size'>;
+type Props = Omit<AsideHeaderProps, 'compact' | 'size'>;
 export declare const PageLayoutAside: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -5,13 +5,8 @@ import { useAsideHeaderContext, AsideHeaderInnerContextProvider } from '../../As
 import { useAsideHeaderInnerContextValue } from '../../useAsideHeaderInnerContextValue.js';
 
 const PageLayoutAside = React__default.forwardRef((props, ref) => {
-    const { size, pinned, isExpanded, onExpand, onFold, setCollapseBlocker } = useAsideHeaderContext();
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size,
-        pinned,
-        isExpanded,
-        onExpand,
-        onFold,
-        setCollapseBlocker }, props));
+    const { size, compact } = useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size, compact }));
     return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
         React__default.createElement(FirstPanel, { ref: ref })));
 });

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

@@ -1 +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, 'pinned' | 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n    const {size, pinned, isExpanded, onExpand, onFold, setCollapseBlocker} =\n        useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({\n        size,\n        pinned,\n        isExpanded,\n        onExpand,\n        onFold,\n        setCollapseBlocker,\n        ...props,\n    });\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;AAClF,IAAA,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAC,GAClE,qBAAqB,EAAE;AAE3B,IAAA,MAAM,4BAA4B,GAAG,+BAA+B,CAAA,MAAA,CAAA,MAAA,CAAA,EAChE,IAAI;QACJ,MAAM;QACN,UAAU;QACV,QAAQ;QACR,MAAM;QACN,kBAAkB,EAAA,EACf,KAAK,CAAA,CACV;AAEF,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;;;;"}
+{"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({...props, size, compact});\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,CAAK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,KAAE,IAAI,EAAE,OAAO,EAAA,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.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Panels: React.FC;
+export declare const Panels: () => React.JSX.Element | null;

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

@@ -1,28 +1,14 @@
-import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useCallback } from 'react';
+import { __rest } from 'tslib';
+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, size, onClosePanel, onFold } = useAsideHeaderInnerContext();
-    const handleVeilClick = useCallback(() => {
-        onFold === null || onFold === undefined ? undefined : onFold();
-        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-    }, [onClosePanel, onFold]);
-    const handleOpenChange = useCallback((open, _event, reason) => {
-        if (reason === 'outside-press') {
-            handleVeilClick();
-            return;
-        }
-        if (!open) {
-            onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-        }
-        return;
-    }, [handleVeilClick, onClosePanel]);
+    const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
     return panelItems ? (React__default.createElement(React__default.Fragment, null, panelItems.map((_a) => {
-        var { id, className, children } = _a, rest = __rest(_a, ["id", "className", "children"]);
-        return (React__default.createElement(Drawer, Object.assign({}, rest, { key: id, className: b('panels'), onOpenChange: handleOpenChange, style: { left: size }, contentClassName: b('panel', className) }), children));
+        var { id, className, style: itemStyle } = _a, rest = __rest(_a, ["id", "className", "style"]);
+        return (React__default.createElement(Drawer, Object.assign({}, rest, { key: id, className: b('panels'), onOpenChange: (open) => !open && (onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel()), style: Object.assign(Object.assign({}, itemStyle), { left: size, top: 'var(--gn-top-alert-height, 0px)' }), contentClassName: b('panel', className) })));
     }))) : null;
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Panels.js","sources":["../../../../../../src/components/AsideHeader/components/Panels.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Drawer, DrawerProps} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nexport const Panels: React.FC = () => {\n    const {panelItems, size, onClosePanel, onFold} = useAsideHeaderInnerContext();\n\n    const handleVeilClick = useCallback(() => {\n        onFold?.();\n        onClosePanel?.();\n    }, [onClosePanel, onFold]);\n\n    const handleOpenChange: Required<DrawerProps>['onOpenChange'] = useCallback(\n        (open, _event, reason) => {\n            if (reason === 'outside-press') {\n                handleVeilClick();\n                return;\n            }\n\n            if (!open) {\n                onClosePanel?.();\n            }\n\n            return;\n        },\n        [handleVeilClick, onClosePanel],\n    );\n\n    return panelItems ? (\n        <React.Fragment>\n            {panelItems.map(({id, className, children, ...rest}) => (\n                <Drawer\n                    {...rest}\n                    key={id}\n                    className={b('panels')}\n                    onOpenChange={handleOpenChange}\n                    style={{left: size}}\n                    contentClassName={b('panel', className)}\n                >\n                    {children}\n                </Drawer>\n            ))}\n        </React.Fragment>\n    ) : null;\n};\n"],"names":["React"],"mappings":";;;;;;AAOO,MAAM,MAAM,GAAa,MAAK;AACjC,IAAA,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,0BAA0B,EAAE;AAE7E,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;AACrC,QAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,EAAI;AACV,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;AACpB,KAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAE1B,MAAM,gBAAgB,GAA0C,WAAW,CACvE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,KAAI;AACrB,QAAA,IAAI,MAAM,KAAK,eAAe,EAAE;AAC5B,YAAA,eAAe,EAAE;YACjB;;QAGJ,IAAI,CAAC,IAAI,EAAE;AACP,YAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;;QAGpB;AACJ,KAAC,EACD,CAAC,eAAe,EAAE,YAAY,CAAC,CAClC;AAED,IAAA,OAAO,UAAU,IACbA,6BAACA,cAAK,CAAC,QAAQ,EAAA,IAAA,EACV,UAAU,CAAC,GAAG,CAAC,CAAC,EAAkC,KAAI;YAAtC,EAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,OAAU,EAAL,IAAI,GAAjC,MAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,UAAA,CAAkC,CAAD;AAAM,QAAA,QACpDA,cAAC,CAAA,aAAA,CAAA,MAAM,oBACC,IAAI,EAAA,EACR,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EACnB,gBAAgB,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KAEtC,QAAQ,CACJ;AACZ,KAAA,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}
+{"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(({id, className, style: itemStyle, ...rest}) => (\n                <Drawer\n                    {...rest}\n                    key={id}\n                    className={b('panels')}\n                    onOpenChange={(open) => !open && onClosePanel?.()}\n                    style={{...itemStyle, left: size, top: 'var(--gn-top-alert-height, 0px)'}}\n                    contentClassName={b('panel', className)}\n                />\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,6BAACA,cAAK,CAAC,QAAQ,EAAA,IAAA,EACV,UAAU,CAAC,GAAG,CAAC,CAAC,EAA0C,KAAI;AAA9C,QAAA,IAAA,EAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAU,EAAL,IAAI,GAAzC,MAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,OAAA,CAA0C,CAAD;QAAM,QAC5DA,cAAC,CAAA,aAAA,CAAA,MAAM,EACC,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,KAAI,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,EAAI,CAAA,EACjD,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,SAAS,CAAA,EAAA,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,iCAAiC,EAAA,CAAA,EACxE,gBAAgB,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EACzC,CAAA,CAAA;AACL,KAAA,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}

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

@@ -1,13 +1,11 @@
 var button_collapse = "Collapse";
 var button_expand = "Expand";
 var label_more = "More";
-var label_others = "Others";
 var en = {
 	button_collapse: button_collapse,
 	button_expand: button_expand,
-	label_more: label_more,
-	label_others: label_others
+	label_more: label_more
 };
 
-export { button_collapse, button_expand, en as default, label_more, label_others };
+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

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

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

@@ -1,14 +1,14 @@
-declare const _default: ((key: "button_collapse" | "button_expand" | "label_more" | "label_others", params?: import("@gravity-ui/i18n").Params) => string) & {
+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" | "label_others", params?: import("@gravity-ui/i18n").Params) => string;
+            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" | "label_others", params?: import("@gravity-ui/i18n").Params) => string;
+        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" | "label_others", import("@gravity-ui/i18n").KeyData>;
+        "gn-AsideHeader": Record<"button_collapse" | "button_expand" | "label_more", import("@gravity-ui/i18n").KeyData>;
     };
 };
 export default _default;

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

@@ -1,13 +1,11 @@
 var button_collapse = "Свернуть";
 var button_expand = "Развернуть";
 var label_more = "Ещё";
-var label_others = "Другие";
 var ru = {
 	button_collapse: button_collapse,
 	button_expand: button_expand,
-	label_more: label_more,
-	label_others: label_others
+	label_more: label_more
 };
 
-export { button_collapse, button_expand, ru as default, label_more, label_others };
+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

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

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

@@ -1,8 +1,7 @@
 export { AsideHeader } from './AsideHeader';
-export type { AsideHeaderProps, AsideHeaderItem, PanelItemProps, MenuItemsWithGroups, SetCollapseBlocker, } from './types';
-export { AsideHeaderContextProvider, useAsideHeaderContext, useAsideHeaderContextOptional, } from './AsideHeaderContext';
+export type { AsideHeaderProps, AsideHeaderItem, PanelItemProps } from './types';
+export { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeaderContext';
 export { FooterItem, type FooterItemProps } from './components/FooterItem/FooterItem';
 export { PageLayout, type PageLayoutProps } from './components/PageLayout/PageLayout';
 export { PageLayoutAside } from './components/PageLayout/PageLayoutAside';
 export { AsideFallback } from './components/PageLayout/AsideFallback';
-export { FooterLayoutContext, useFooterLayout, type FooterLayoutContextValue, } from './FooterLayoutContext';

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

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { DrawerProps, PopupProps, QAProps } from '@gravity-ui/uikit';
 import { RenderContentType } from '../Content';
-import { LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps } from '../types';
+import { LogoProps, MenuItem, OpenModalSubscriber, TopAlertProps } from '../types';
 import { AsideHeaderContextType } from './AsideHeaderContext';
 export interface PanelItemProps extends DrawerProps {
     id: string;
 }
 export interface LayoutProps {
-    /** Navigation visual state. When `true`, the navigation is expanded (pinned open). When `false`, it is collapsed. */
-    pinned: boolean;
+    compact: boolean;
     className?: string;
     topAlert?: TopAlertProps;
 }
@@ -21,6 +20,7 @@ interface EditMenuProps {
 }
 interface AsideHeaderGeneralProps extends QAProps {
     logo?: LogoProps;
+    multipleTooltip?: boolean;
     className?: string;
     collapseTitle?: string;
     expandTitle?: string;
@@ -29,34 +29,19 @@ interface AsideHeaderGeneralProps extends QAProps {
     customBackground?: React.ReactNode;
     customBackgroundClassName?: string;
     hideCollapseButton?: boolean;
-    /** When `true`, menu items use compact height. */
-    isCompactMode?: boolean;
     renderContent?: RenderContentType;
-    /**
-     * Render function for the footer section.
-     *
-     * Return types:
-     * - `React.ReactNode` - Renders custom content as-is
-     * - `React.ReactNode[]` - Wraps in FooterBar with horizontal/vertical layout based on isPinned
-     */
     renderFooter?: (data: {
         size: number;
-        isExpanded: boolean;
-        isPinned: boolean;
+        compact: boolean;
         asideRef: React.RefObject<HTMLDivElement>;
-        isCompactMode?: boolean;
-    }) => React.ReactNode | React.ReactNode[];
-    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker to block sidebar collapse while a popup is open. */
-    renderFooterAfter?: (options?: {
-        setCollapseBlocker?: SetCollapseBlocker;
     }) => React.ReactNode;
     collapseButtonWrapper?: (defaultButton: React.ReactNode, data: {
-        isExpanded: boolean;
-        onChangePinned?: (pinned: boolean) => void;
+        compact: boolean;
+        onChangeCompact?: (compact: boolean) => void;
     }) => React.ReactNode;
     editMenuProps?: EditMenuProps;
     onClosePanel?: () => void;
-    onChangePinned?: (pinned: boolean) => void;
+    onChangeCompact?: (compact: boolean) => void;
     onMenuMoreClick?: () => void;
     onAllPagesClick?: () => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
@@ -66,10 +51,7 @@ interface AsideHeaderDefaultProps {
     subheaderItems?: AsideHeaderItem[];
     menuItems?: AsideHeaderItem[];
     defaultMenuItems?: AsideHeaderItem[];
-    menuGroups?: MenuGroup[];
-    defaultMenuGroups?: MenuGroup[];
     onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;
-    onMenuGroupsChanged?: (groups: MenuGroup[]) => void;
     headerDecoration?: boolean;
 }
 export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps & AsideHeaderContextType;
@@ -80,12 +62,9 @@ export declare enum InnerPanels {
 }
 export interface AsideHeaderItem extends MenuItem {
     enableTooltip?: boolean;
-    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
-        setCollapseBlocker: SetCollapseBlocker | undefined;
-    }) => void;
+    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     bringForward?: boolean;
-    /** When `true`, forces the item to display in expanded form. */
-    isExpanded?: boolean;
+    compact?: boolean;
     /**
      * @deprecated Use itemWrapper instead for popup functionality
      */
@@ -121,14 +100,4 @@ export interface AsideHeaderItem extends MenuItem {
      */
     onOpenChangePopup?: PopupProps['onOpenChange'];
 }
-export interface GroupedMenuItem extends MenuItem {
-    groupId: string;
-    collapsible: boolean;
-    isCollapsed: boolean;
-    collapsedByDefault?: boolean;
-    items: MenuItemsWithGroups[];
-}
-export type MenuItemsWithGroups = MenuItem | GroupedMenuItem;
-/** Toggles a collapse blocker: pass `true` to block collapsing, `false` to unblock. */
-export type SetCollapseBlocker = (isBlocked: boolean) => void;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    /** Navigation visual state. When `true`, the navigation is expanded (pinned open). When `false`, it is collapsed. */\n    pinned: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n}\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n    renderContent?: RenderContentType;\n    /**\n     * Render function for the footer section.\n     *\n     * Return types:\n     * - `React.ReactNode` - Renders custom content as-is\n     * - `React.ReactNode[]` - Wraps in FooterBar with horizontal/vertical layout based on isPinned\n     */\n    renderFooter?: (data: {\n        size: number;\n        isExpanded: boolean;\n        isPinned: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n        isCompactMode?: boolean;\n    }) => React.ReactNode | React.ReactNode[];\n    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker to block sidebar collapse while a popup is open. */\n    renderFooterAfter?: (options?: {setCollapseBlocker?: SetCollapseBlocker}) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            isExpanded: boolean;\n            onChangePinned?: (pinned: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangePinned?: (pinned: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    defaultMenuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    defaultMenuGroups?: MenuGroup[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    onMenuGroupsChanged?: (groups: MenuGroup[]) => void;\n    headerDecoration?: boolean;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\nexport interface AsideHeaderItem extends MenuItem {\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n        options: {setCollapseBlocker: SetCollapseBlocker | undefined},\n    ) => void;\n    bringForward?: boolean;\n    /** When `true`, forces the item to display in expanded form. */\n    isExpanded?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n\nexport interface GroupedMenuItem extends MenuItem {\n    groupId: string;\n    collapsible: boolean;\n    isCollapsed: boolean;\n    collapsedByDefault?: boolean;\n    items: MenuItemsWithGroups[];\n}\n\nexport type MenuItemsWithGroups = MenuItem | GroupedMenuItem;\n\n/** Toggles a collapse blocker: pass `true` to block collapsing, `false` to unblock. */\nexport type SetCollapseBlocker = (isBlocked: boolean) => void;\n"],"names":[],"mappings":"IA6FY;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFW,WAAW,KAAX,WAAW,GAEtB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n}\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    multipleTooltip?: boolean;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\nexport interface AsideHeaderItem extends MenuItem {\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":[],"mappings":"IA6EY;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFW,WAAW,KAAX,WAAW,GAEtB,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,10 +1,5 @@
 import { AsideHeaderInnerContextType } from './AsideHeaderContext';
-import { AsideHeaderProps, SetCollapseBlocker } from './types';
+import { AsideHeaderProps } from './types';
 export declare const useAsideHeaderInnerContextValue: (props: AsideHeaderProps & {
     size: number;
-    pinned: boolean;
-    isExpanded: boolean;
-    onExpand?: () => void;
-    onFold?: () => void;
-    setCollapseBlocker?: SetCollapseBlocker;
 }) => AsideHeaderInnerContextType;

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

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useCallback, useMemo } from 'react';
 import { AllPagesPanel } from './components/AllPagesPanel/AllPagesPanel.js';
 import { getAllPagesMenuItem } from './components/AllPagesPanel/constants.js';
+import './AsideHeaderContext.js';
 import { InnerPanels } from './types.js';
 
 const EMPTY_MENU_ITEMS = [];
 const useAsideHeaderInnerContextValue = (props) => {
-    var _a;
-    const { size, onClosePanel, menuItems, menuGroups, defaultMenuGroups, panelItems, isCompactMode = false, setCollapseBlocker, onMenuItemsChanged, onMenuGroupsChanged, onAllPagesClick, } = props;
+    const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = useState();
     const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
         return getAllPagesMenuItem();
@@ -22,7 +22,7 @@ const useAsideHeaderInnerContextValue = (props) => {
         setInnerVisiblePanel(undefined);
         onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
     }, [onClosePanel]);
-    const onItemClick = useCallback((item, collapsed, event, options) => {
+    const onItemClick = useCallback((item, collapsed, event) => {
         var _a;
         if (item.id === ALL_PAGES_MENU_ITEM.id) {
             onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
@@ -31,21 +31,8 @@ const useAsideHeaderInnerContextValue = (props) => {
         else {
             innerOnClosePanel();
         }
-        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event, options);
+        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
     }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
-    const onToggleGroupCollapsed = useCallback((groupId) => {
-        const updatedMenuGroups = menuGroups === null || menuGroups === undefined ? undefined : menuGroups.map((group) => {
-            var _a, _b;
-            if (group.id === groupId) {
-                const effectiveCollapsed = (_b = (_a = group.collapsed) !== null && _a !== undefined ? _a : group.collapsedByDefault) !== null && _b !== undefined ? _b : false;
-                return Object.assign(Object.assign({}, group), { collapsed: !effectiveCollapsed });
-            }
-            return group;
-        });
-        if (updatedMenuGroups) {
-            onMenuGroupsChanged === null || onMenuGroupsChanged === undefined ? undefined : onMenuGroupsChanged(updatedMenuGroups);
-        }
-    }, [menuGroups, onMenuGroupsChanged]);
     const innerMenuItems = useMemo(() => allPagesIsAvailable
         ? [
             ...(menuItems || EMPTY_MENU_ITEMS),
@@ -62,33 +49,12 @@ const useAsideHeaderInnerContextValue = (props) => {
                 id: InnerPanels.AllPages,
                 children: React__default.createElement(AllPagesPanel, null),
                 open: innerVisiblePanel === InnerPanels.AllPages,
+                size: 'auto',
             },
         ];
     }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
-    const hasPanelOpen = (_a = innerPanelItems === null || innerPanelItems === undefined ? undefined : innerPanelItems.some((p) => p.open)) !== null && _a !== undefined ? _a : false;
-    const didBlockRef = React__default.useRef(false);
-    useEffect(() => {
-        if (hasPanelOpen) {
-            setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(true);
-            didBlockRef.current = true;
-        }
-        else if (didBlockRef.current) {
-            setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(false);
-            didBlockRef.current = false;
-        }
-        return () => {
-            if (didBlockRef.current) {
-                setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(false);
-                didBlockRef.current = false;
-            }
-        };
-    }, [hasPanelOpen, setCollapseBlocker]);
-    return Object.assign(Object.assign({}, props), { setCollapseBlocker,
-        isCompactMode, onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, menuGroups,
-        defaultMenuGroups,
-        onMenuGroupsChanged, panelItems: innerPanelItems, size,
-        onItemClick,
-        onToggleGroupCollapsed });
+    return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
+        onItemClick });
 };
 
 export { useAsideHeaderInnerContextValue };