@gravity-ui/navigation 5.0.0-beta.3 → 6.0.0-beta.0

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

@@ -1 +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';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\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\nconst asideTransitionClassNames = {\n    enter: b('aside-transition-enter'),\n    enterActive: b('aside-transition-enter-active'),\n    enterDone: b('aside-transition-enter-done'),\n    exit: b('aside-transition-exit'),\n    exitActive: b('aside-transition-exit-active'),\n};\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        onMenuMoreClick,\n        renderFooter,\n        onToggleGroupCollapsed,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        menuItems,\n        menuGroups,\n        qa,\n        onExpand,\n        onFold,\n        isExpanded,\n    } = useAsideHeaderInnerContext();\n\n    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    const isExpandedByHover = compact && isExpanded;\n\n    return (\n        <React.Fragment>\n            <CSSTransition\n                in={isExpandedByHover}\n                timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n                classNames={asideTransitionClassNames}\n            >\n                <div\n                    className={b('aside', className)}\n                    style={{width: size}}\n                    data-qa={qa}\n                    onMouseEnter={onExpand}\n                    onMouseLeave={onFold}\n                >\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\n                        {flatListItems?.length ? (\n                            <CompositeBar\n                                compositeId={MENU_ITEMS_COMPOSITE_ID}\n                                className={b('menu-items')}\n                                groupClassName={b('menu-items-group')}\n                                menuItemClassName={b('menu-item')}\n                                compact={!isExpanded}\n                                type=\"menu\"\n                                items={flatListItems}\n                                onItemClick={onItemClick}\n                                onMoreClick={onMenuMoreClick}\n                                onToggleGroupCollapsed={onToggleGroupCollapsed}\n                                multipleTooltip={multipleTooltip}\n                            />\n                        ) : (\n                            <div className={b('menu-items')} />\n                        )}\n\n                        <div className={b('footer')}>\n                            {renderFooter?.({\n                                size,\n                                compact: Boolean(!isExpanded),\n                                asideRef,\n                            })}\n                        </div>\n                    </div>\n                </div>\n            </CSSTransition>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["b","useAsideHeaderInnerContext","useGroupedMenuItems","useRef","setRef","CSSTransition","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","Header","CompositeBar","Panels"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAuB,GAAG,gDAAgD;AAEhF,MAAM,yBAAyB,GAAG;AAC9B,IAAA,KAAK,EAAEA,OAAC,CAAC,wBAAwB,CAAC;AAClC,IAAA,WAAW,EAAEA,OAAC,CAAC,+BAA+B,CAAC;AAC/C,IAAA,SAAS,EAAEA,OAAC,CAAC,6BAA6B,CAAC;AAC3C,IAAA,IAAI,EAAEA,OAAC,CAAC,uBAAuB,CAAC;AAChC,IAAA,UAAU,EAAEA,OAAC,CAAC,8BAA8B,CAAC;CAChD;AAEM,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAiB,CAAC,MAAM,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,OAAO,EACP,gBAAgB,EAChB,yBAAyB,EACzB,SAAS,EACT,SAAS,EACT,UAAU,EACV,EAAE,EACF,QAAQ,EACR,MAAM,EACN,UAAU,GACb,GAAGC,6CAA0B,EAAE;IAEhC,MAAM,aAAa,GAAGC,uCAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;AAEhE,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE7C,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAAC,YAAM,CAAiB,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;AACjD,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAET,IAAA,MAAM,iBAAiB,GAAG,OAAO,IAAI,UAAU;AAE/C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAA,KAAA,CAAA,aAAA,CAACC,kCAAa,EAAA,EACV,EAAE,EAAE,iBAAiB,EACrB,OAAO,EAAEC,8CAAoC,EAC7C,UAAU,EAAE,yBAAyB,EAAA;YAErC,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEN,OAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAChC,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,EAAA,SAAA,EACX,EAAE,EACX,YAAY,EAAE,QAAQ,EACtB,YAAY,EAAE,MAAM,EAAA;gBAEpB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAI,CAAA;AACzD,gBAAA,gBAAgB,KACb,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,EAClE,EAAA,gBAAgB,CACf,CACT;AAED,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AACvE,oBAAA,KAAA,CAAA,aAAA,CAACO,aAAM,EAAG,IAAA,CAAA;AAET,oBAAA,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,MAAM,KAClB,KAAC,CAAA,aAAA,CAAAC,yBAAY,IACT,WAAW,EAAE,uBAAuB,EACpC,SAAS,EAAER,OAAC,CAAC,YAAY,CAAC,EAC1B,cAAc,EAAEA,OAAC,CAAC,kBAAkB,CAAC,EACrC,iBAAiB,EAAEA,OAAC,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,CAAC,UAAU,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,eAAe,EAAE,eAAe,EAClC,CAAA,KAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,YAAY,CAAC,GAAI,CACtC;AAED,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,QAAQ,CAAC,EACtB,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAG;wBACZ,IAAI;AACJ,wBAAA,OAAO,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC;wBAC7B,QAAQ;qBACX,CAAC,CACA,CACJ,CACJ,CACM;AAChB,QAAA,KAAA,CAAA,aAAA,CAACS,aAAM,EAAA,IAAA,CAAG,CACG;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"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        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\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                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\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":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-.FooterItem-module__gn-footer-item___Hi7NH{--gn-aside-header-item-expanded-radius:6px;border-radius:var(--gn-aside-header-item-expanded-radius);height:36px;margin-bottom:2px;width:100%}.FooterItem-module__gn-footer-item___Hi7NH:last-child{margin-bottom:0}
+.FooterItem-module__gn-footer-item___Hi7NH{border-radius:var(--gn-aside-header-item-expanded-radius);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/cjs/components/AsideHeader/components/Header.js

@@ -6,27 +6,21 @@ var Logo = require('../../Logo/Logo.js');
 var constants = require('../../constants.js');
 var AsideHeaderContext = require('../AsideHeaderContext.js');
 var utils = require('../utils.js');
-var useGroupedMenuItems = require('./AllPagesPanel/useGroupedMenuItems.js');
-var CollapseButton = require('./CollapseButton/CollapseButton.js');
 var CompositeBar = require('./CompositeBar/CompositeBar.js');
 var dividerCollapsed = require('../../../assets/icons/divider-collapsed.svg.js');
 
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, isExpanded, onItemClick, onClosePanel, headerDecoration, subheaderItems, hideCollapseButton, } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const compact = !isExpanded;
-    const items = useGroupedMenuItems.useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact } = AsideHeaderContext.useAsideHeaderInnerContext();
     const onLogoClick = React.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.createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
-        React.createElement("div", { className: utils.b('logo-container', { 'without-logo': !logo }) },
-            logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
-            !hideCollapseButton && React.createElement(CollapseButton.CollapseButton, { className: utils.b('pin-button', { compact }) })),
-        React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: utils.b('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
+        logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
+        React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", menuItemClassName: utils.b('menu-item'), compact: compact, items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
         headerDecoration && (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT }))));
 };
 

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

@@ -1 +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 {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\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 {\n        logo,\n        isExpanded,\n        onItemClick,\n        onClosePanel,\n        headerDecoration,\n        subheaderItems,\n        hideCollapseButton,\n    } = useAsideHeaderInnerContext();\n\n    const compact = !isExpanded;\n\n    const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);\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            <div className={b('logo-container', {'without-logo': !logo})}>\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                {!hideCollapseButton && <CollapseButton className={b('pin-button', {compact})} />}\n            </div>\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                menuItemClassName={b('menu-item')}\n                type=\"subheader\"\n                compact={compact}\n                items={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":["useAsideHeaderInnerContext","useGroupedMenuItems","useCallback","b","Logo","CollapseButton","CompositeBar","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACrB,GAAGA,6CAA0B,EAAE;AAEhC,IAAA,MAAM,OAAO,GAAG,CAAC,UAAU;IAE3B,MAAM,KAAK,GAAGC,uCAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAGC,iBAAW,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,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACD,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAEA,YAAA,CAAC,kBAAkB,IAAI,KAAA,CAAA,aAAA,CAACE,6BAAc,EAAA,EAAC,SAAS,EAAEF,OAAC,CAAC,YAAY,EAAE,EAAC,OAAO,EAAC,CAAC,GAAI,CAC/E;AAEN,QAAA,KAAA,CAAA,aAAA,CAACG,yBAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAEH,OAAC,CAAC,WAAW,CAAC,EACjC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACI,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEL,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEM,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}
+{"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 {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, compact} =\n        useAsideHeaderInnerContext();\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                menuItemClassName={b('menu-item')}\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":["useAsideHeaderInnerContext","useCallback","b","Logo","CompositeBar","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"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,EAAE,OAAO,EAAC,GAC9EA,6CAA0B,EAAE;AAEhC,IAAA,MAAM,WAAW,GAAGC,iBAAW,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,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACD,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAEF,OAAC,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACG,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEJ,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEK,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.css

@@ -0,0 +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-margin-inline:8px;--gn-aside-header-item-expanded-radius:8px;--_--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__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,8px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.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/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js

@@ -1,3 +1,4 @@
+import './AsideFallback.css';
 'use strict';
 
 var React = require('react');

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

@@ -0,0 +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-margin-inline:8px;--gn-aside-header-item-expanded-radius:8px;--_--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__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,8px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.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/cjs/components/AsideHeader/components/PageLayout/PageLayout.d.ts

@@ -2,9 +2,8 @@ import React, { PropsWithChildren } from 'react';
 import { ContentProps } from '../../../Content';
 import { LayoutProps } from '../../types';
 export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
-    onChangeCompact?: (compact: boolean) => void;
 }
-declare const PageLayout: (({ compact, className, children, topAlert, onChangeCompact }: 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/cjs/components/AsideHeader/components/PageLayout/PageLayout.js

@@ -1,10 +1,10 @@
+import './PageLayout.css';
 'use strict';
 
 var React = require('react');
 var Content = require('../../../Content/Content.js');
 var constants = require('../../../constants.js');
 var AsideHeaderContext = require('../../AsideHeaderContext.js');
-var useIsExpanded = require('../../hooks/useIsExpanded.js');
 var utils = require('../../utils.js');
 
 const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('../../../TopAlert/index.js'); }).then((module) => ({ default: module.TopAlert })));
@@ -20,17 +20,9 @@ function calcEstimatedTopAlertHeight(topAlert) {
         (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -
         (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0));
 }
-const Layout = ({ compact, className, children, topAlert, onChangeCompact }) => {
-    const { isExpanded, onExpand, onFold } = useIsExpanded.useIsExpanded(compact);
-    const size = isExpanded ? constants.ASIDE_HEADER_EXPANDED_WIDTH : constants.ASIDE_HEADER_COMPACT_WIDTH;
-    const asideHeaderContextValue = React.useMemo(() => ({
-        size,
-        compact,
-        isExpanded,
-        onChangeCompact,
-        onExpand,
-        onFold,
-    }), [size, compact, isExpanded, onChangeCompact, onExpand, onFold]);
+const Layout = ({ compact, className, children, topAlert }) => {
+    const size = compact ? constants.ASIDE_HEADER_COMPACT_WIDTH : constants.ASIDE_HEADER_EXPANDED_WIDTH;
+    const asideHeaderContextValue = React.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.
@@ -48,7 +40,7 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
     };
     const preloadHeightValue = getPreloadHeightValue();
     return (React.createElement(AsideHeaderContext.AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React.createElement("div", { className: utils.b({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        React.createElement("div", { className: utils.b({ compact }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
             typeof preloadHeightValue === 'number' ? (React.createElement("style", { dangerouslySetInnerHTML: {
                     __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,
                 } })) : null,
@@ -57,9 +49,8 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
             React.createElement("div", { className: utils.b('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size, compact, isExpanded } = AsideHeaderContext.useAsideHeaderContext();
-    const isExpandedByHover = compact && isExpanded;
-    return (React.createElement(Content.Content, { size: size, className: utils.b('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
+    const { size } = AsideHeaderContext.useAsideHeaderContext();
+    return (React.createElement(Content.Content, { size: size, className: utils.b('content'), renderContent: renderContent }, children));
 };
 const PageLayout = Object.assign(Layout, {
     Content: ConnectedContent,

package/build/cjs/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_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\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    onChangeCompact?: (compact: boolean) => void;\n}\n\nconst Layout = ({compact, className, children, topAlert, onChangeCompact}: PageLayoutProps) => {\n    const {isExpanded, onExpand, onFold} = useIsExpanded(compact);\n\n    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;\n\n    const asideHeaderContextValue = useMemo(\n        () => ({\n            size,\n            compact,\n            isExpanded,\n            onChangeCompact,\n            onExpand,\n            onFold,\n        }),\n        [size, compact, isExpanded, onChangeCompact, onExpand, onFold],\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({compact: !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, compact, isExpanded} = useAsideHeaderContext();\n    const isExpandedByHover = compact && 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":["useIsExpanded","ASIDE_HEADER_EXPANDED_WIDTH","ASIDE_HEADER_COMPACT_WIDTH","useMemo","AsideHeaderContextProvider","b","Suspense","useAsideHeaderContext","Content"],"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":["ASIDE_HEADER_COMPACT_WIDTH","ASIDE_HEADER_EXPANDED_WIDTH","useMemo","AsideHeaderContextProvider","b","Suspense","useAsideHeaderContext","Content"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.css

@@ -0,0 +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-margin-inline:8px;--gn-aside-header-item-expanded-radius:8px;--_--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__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,8px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.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/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.js

@@ -1,3 +1,4 @@
+import './PageLayoutAside.css';
 'use strict';
 
 var React = require('react');
@@ -6,12 +7,8 @@ var AsideHeaderContext = require('../../AsideHeaderContext.js');
 var useAsideHeaderInnerContextValue = require('../../useAsideHeaderInnerContextValue.js');
 
 const PageLayoutAside = React.forwardRef((props, ref) => {
-    const { size, compact, isExpanded, onExpand, onFold } = AsideHeaderContext.useAsideHeaderContext();
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue.useAsideHeaderInnerContextValue(Object.assign({ size,
-        compact,
-        isExpanded,
-        onExpand,
-        onFold }, props));
+    const { size, compact } = AsideHeaderContext.useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue.useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size, compact }));
     return (React.createElement(AsideHeaderContext.AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
         React.createElement(FirstPanel.FirstPanel, { ref: ref })));
 });

package/build/cjs/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, 'compact' | 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n    const {size, compact, isExpanded, onExpand, onFold} = useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({\n        size,\n        compact,\n        isExpanded,\n        onExpand,\n        onFold,\n        ...props,\n    });\n\n    return (\n        <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n            <FirstPanel ref={ref} />\n        </AsideHeaderInnerContextProvider>\n    );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["useAsideHeaderContext","useAsideHeaderInnerContextValue","AsideHeaderInnerContextProvider","FirstPanel"],"mappings":";;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;AAClF,IAAA,MAAM,EAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,GAAGA,wCAAqB,EAAE;AAE7E,IAAA,MAAM,4BAA4B,GAAGC,+DAA+B,CAAA,MAAA,CAAA,MAAA,CAAA,EAChE,IAAI;QACJ,OAAO;QACP,UAAU;QACV,QAAQ;QACR,MAAM,EAAA,EACH,KAAK,CAAA,CACV;AAEF,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,kDAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChE,KAAC,CAAA,aAAA,CAAAC,qBAAU,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":["useAsideHeaderContext","useAsideHeaderInnerContextValue","AsideHeaderInnerContextProvider","FirstPanel"],"mappings":";;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;IAClF,MAAM,EAAC,IAAI,EAAE,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAE/C,MAAM,4BAA4B,GAAGC,+DAA+B,CAAK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,KAAE,IAAI,EAAE,OAAO,EAAA,CAAA,CAAE;AAE/F,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,kDAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChE,KAAC,CAAA,aAAA,CAAAC,qBAAU,IAAC,GAAG,EAAE,GAAG,EAAI,CAAA,CACM;AAE1C,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/build/cjs/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/cjs/components/AsideHeader/components/Panels.js

@@ -1,28 +1,17 @@
 'use strict';
 
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var AsideHeaderContext = require('../AsideHeaderContext.js');
 var utils = require('../utils.js');
 
 const Panels = () => {
-    const { panelItems, size, onClosePanel, onExpand, onFold } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const handleVeilClick = React.useCallback(() => {
-        onFold === null || onFold === undefined ? undefined : onFold();
-        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-    }, [onClosePanel, onFold]);
-    const handleOpenChange = React.useCallback((open, _event, reason) => {
-        if (reason === 'outside-press') {
-            handleVeilClick();
-            return;
-        }
-        if (!open) {
-            onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-        }
-        return;
-    }, [handleVeilClick, onClosePanel]);
-    return panelItems ? (React.createElement(React.Fragment, null, panelItems.map((item) => (React.createElement(uikit.Drawer, { key: item.id, className: utils.b('panels'), open: item.visible, onOpenChange: handleOpenChange, style: { left: size }, contentClassName: utils.b('panel', item.className) },
-        React.createElement("div", { onMouseEnter: onExpand, className: utils.b('panel-content') }, item.content)))))) : null;
+    const { panelItems, onClosePanel, size } = AsideHeaderContext.useAsideHeaderInnerContext();
+    return panelItems ? (React.createElement(React.Fragment, null, panelItems.map((_a) => {
+        var { id, className, style: itemStyle } = _a, rest = tslib_es6.__rest(_a, ["id", "className", "style"]);
+        return (React.createElement(uikit.Drawer, Object.assign({}, rest, { key: id, className: utils.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: utils.b('panel', className) })));
+    }))) : null;
 };
 
 exports.Panels = Panels;

package/build/cjs/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, onExpand, 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((item) => (\n                <Drawer\n                    key={item.id}\n                    className={b('panels')}\n                    open={item.visible}\n                    onOpenChange={handleOpenChange}\n                    style={{left: size}}\n                    contentClassName={b('panel', item.className)}\n                >\n                    <div onMouseEnter={onExpand} className={b('panel-content')}>\n                        {item.content}\n                    </div>\n                </Drawer>\n            ))}\n        </React.Fragment>\n    ) : null;\n};\n"],"names":["useAsideHeaderInnerContext","useCallback","Drawer","b"],"mappings":";;;;;;;AAOO,MAAM,MAAM,GAAa,MAAK;AACjC,IAAA,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAC,GAAGA,6CAA0B,EAAE;AAEvF,IAAA,MAAM,eAAe,GAAGC,iBAAW,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,GAA0CA,iBAAW,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,IACb,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA,EACV,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,KAAC,CAAA,aAAA,CAAAC,YAAM,EACH,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAEC,OAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EACnB,gBAAgB,EAAEA,OAAC,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,EAAA;QAE5C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAEA,OAAC,CAAC,eAAe,CAAC,EACrD,EAAA,IAAI,CAAC,OAAO,CACX,CACD,CACZ,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":["useAsideHeaderInnerContext","__rest","Drawer","b"],"mappings":";;;;;;;;AAOO,MAAM,MAAM,GAAG,MAAK;IACvB,MAAM,EAAC,UAAU,EAAE,YAAY,EAAE,IAAI,EAAC,GAAGA,6CAA0B,EAAE;AAErE,IAAA,OAAO,UAAU,IACb,oBAAC,KAAK,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,GAAzCC,gBAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,OAAA,CAA0C,CAAD;QAAM,QAC5D,KAAC,CAAA,aAAA,CAAAC,YAAM,EACC,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,GAAG,EAAE,EAAE,EACP,SAAS,EAAEC,OAAC,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,EAAEA,OAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EACzC,CAAA,CAAA;AACL,KAAA,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}

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

@@ -1,5 +1,6 @@
 export { AsideHeader } from './AsideHeader';
 export type { AsideHeaderProps, AsideHeaderItem, PanelItemProps } from './types';
+export type { MenuGroup } from '../types';
 export { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeaderContext';
 export { FooterItem, type FooterItemProps } from './components/FooterItem/FooterItem';
 export { PageLayout, type PageLayoutProps } from './components/PageLayout/PageLayout';

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

@@ -1,13 +1,10 @@
 import * as React from 'react';
-import { PopupProps, QAProps } from '@gravity-ui/uikit';
+import { DrawerProps, PopupProps, QAProps } from '@gravity-ui/uikit';
 import { RenderContentType } from '../Content';
 import { LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps } from '../types';
 import { AsideHeaderContextType } from './AsideHeaderContext';
-export interface PanelItemProps {
+export interface PanelItemProps extends DrawerProps {
     id: string;
-    content?: React.ReactNode;
-    visible?: boolean;
-    className?: string;
 }
 export interface LayoutProps {
     compact: boolean;
@@ -23,7 +20,6 @@ interface EditMenuProps {
 }
 interface AsideHeaderGeneralProps extends QAProps {
     logo?: LogoProps;
-    multipleTooltip?: boolean;
     className?: string;
     collapseTitle?: string;
     expandTitle?: string;
@@ -53,11 +49,9 @@ interface AsideHeaderDefaultProps {
     panelItems?: PanelItemProps[];
     subheaderItems?: AsideHeaderItem[];
     menuItems?: AsideHeaderItem[];
-    defaultMenuItems?: AsideHeaderItem[];
     menuGroups?: MenuGroup[];
-    defaultMenuGroups?: MenuGroup[];
+    defaultMenuItems?: AsideHeaderItem[];
     onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;
-    onMenuGroupsChanged?: (groups: MenuGroup[]) => void;
     headerDecoration?: boolean;
 }
 export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps & AsideHeaderContextType;
@@ -106,13 +100,4 @@ export interface AsideHeaderItem extends MenuItem {
      */
     onOpenChangePopup?: PopupProps['onOpenChange'];
 }
-export interface GroupedMenuItem extends MenuItem {
-    groupId: string;
-    collapsible: boolean;
-    isCollapsed: boolean;
-    isDisabled: boolean;
-    collapsedByDefault?: boolean;
-    items: MenuItemsWithGroups[];
-}
-export type MenuItemsWithGroups = MenuItem | GroupedMenuItem;
 export {};

package/build/cjs/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 {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 {\n    id: string;\n    content?: React.ReactNode;\n    visible?: boolean;\n    className?: 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    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    ) => 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\nexport interface GroupedMenuItem extends MenuItem {\n    groupId: string;\n    collapsible: boolean;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    collapsedByDefault?: boolean;\n    items: MenuItemsWithGroups[];\n}\n\nexport type MenuItemsWithGroups = MenuItem | GroupedMenuItem;\n"],"names":["InnerPanels"],"mappings":";;AAmFYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,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, 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    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    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    menuGroups?: MenuGroup[];\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":["InnerPanels"],"mappings":";;AA6EYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;;"}

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

@@ -2,8 +2,4 @@ import { AsideHeaderInnerContextType } from './AsideHeaderContext';
 import { AsideHeaderProps } from './types';
 export declare const useAsideHeaderInnerContextValue: (props: AsideHeaderProps & {
     size: number;
-    compact: boolean;
-    isExpanded: boolean;
-    onExpand?: () => void;
-    onFold?: () => void;
 }) => AsideHeaderInnerContextType;

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

@@ -3,19 +3,20 @@
 var React = require('react');
 var AllPagesPanel = require('./components/AllPagesPanel/AllPagesPanel.js');
 var constants = require('./components/AllPagesPanel/constants.js');
+require('./AsideHeaderContext.js');
 var types = require('./types.js');
 
 const EMPTY_MENU_ITEMS = [];
 const useAsideHeaderInnerContextValue = (props) => {
-    const { size, onClosePanel, menuItems, menuGroups, defaultMenuGroups, panelItems, onMenuItemsChanged, onMenuGroupsChanged, onAllPagesClick, } = props;
+    const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = React.useState();
     const ALL_PAGES_MENU_ITEM = React.useMemo(() => {
         return constants.getAllPagesMenuItem();
     }, []);
     const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === undefined ? undefined : menuItems.length) > 0);
     React.useEffect(() => {
-        // If any user panel became visible we need to switch off all inner panels
-        if (panelItems === null || panelItems === undefined ? undefined : panelItems.some((x) => x.visible)) {
+        // If any user panel became open we need to switch off all inner panels
+        if (panelItems === null || panelItems === undefined ? undefined : panelItems.some((x) => x.open)) {
             setInnerVisiblePanel(undefined);
         }
     }, [panelItems]);
@@ -34,17 +35,6 @@ const useAsideHeaderInnerContextValue = (props) => {
         }
         (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
     }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
-    const onToggleGroupCollapsed = React.useCallback((groupId) => {
-        const updatedMenuGroups = menuGroups === null || menuGroups === undefined ? undefined : menuGroups.map((group) => {
-            if (group.id === groupId) {
-                return Object.assign(Object.assign({}, group), { collapsed: !group.collapsed });
-            }
-            return group;
-        });
-        if (updatedMenuGroups) {
-            onMenuGroupsChanged === null || onMenuGroupsChanged === undefined ? undefined : onMenuGroupsChanged(updatedMenuGroups);
-        }
-    }, [menuGroups, onMenuGroupsChanged]);
     const innerMenuItems = React.useMemo(() => allPagesIsAvailable
         ? [
             ...(menuItems || EMPTY_MENU_ITEMS),
@@ -59,16 +49,13 @@ const useAsideHeaderInnerContextValue = (props) => {
             ...(panelItems || []),
             {
                 id: types.InnerPanels.AllPages,
-                content: React.createElement(AllPagesPanel.AllPagesPanel, null),
-                visible: innerVisiblePanel === types.InnerPanels.AllPages,
+                children: React.createElement(AllPagesPanel.AllPagesPanel, null),
+                open: innerVisiblePanel === types.InnerPanels.AllPages,
             },
         ];
     }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
-    return Object.assign(Object.assign({}, props), { 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 });
 };
 
 exports.useAsideHeaderInnerContextValue = useAsideHeaderInnerContextValue;

package/build/cjs/components/AsideHeader/useAsideHeaderInnerContextValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAsideHeaderInnerContextValue.js","sources":["../../../../../src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {MenuItem} from '../types';\n\nimport {AsideHeaderInnerContextType} from './AsideHeaderContext';\nimport {AllPagesPanel, getAllPagesMenuItem} from './components/AllPagesPanel';\nimport {AsideHeaderItem, AsideHeaderProps, InnerPanels} from './types';\n\nconst EMPTY_MENU_ITEMS: AsideHeaderItem[] = [];\n\nexport const useAsideHeaderInnerContextValue = (\n    props: AsideHeaderProps & {\n        size: number;\n        compact: boolean;\n        isExpanded: boolean;\n        onExpand?: () => void;\n        onFold?: () => void;\n    },\n): AsideHeaderInnerContextType => {\n    const {\n        size,\n        onClosePanel,\n        menuItems,\n        menuGroups,\n        defaultMenuGroups,\n        panelItems,\n        onMenuItemsChanged,\n        onMenuGroupsChanged,\n        onAllPagesClick,\n    } = props;\n\n    const [innerVisiblePanel, setInnerVisiblePanel] = useState<InnerPanels | undefined>();\n    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {\n        return getAllPagesMenuItem();\n    }, []);\n\n    const allPagesIsAvailable =\n        Boolean(onMenuItemsChanged) && (!menuItems || menuItems?.length > 0);\n\n    useEffect(() => {\n        // If any user panel became visible we need to switch off all inner panels\n        if (panelItems?.some((x) => x.visible)) {\n            setInnerVisiblePanel(undefined);\n        }\n    }, [panelItems]);\n\n    const innerOnClosePanel = useCallback(() => {\n        setInnerVisiblePanel(undefined);\n        onClosePanel?.();\n    }, [onClosePanel]);\n\n    const onItemClick = useCallback(\n        (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (item.id === ALL_PAGES_MENU_ITEM.id) {\n                onClosePanel?.();\n                setInnerVisiblePanel((prev) =>\n                    prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages,\n                );\n            } else {\n                innerOnClosePanel();\n            }\n            item.onItemClick?.(item, collapsed, event);\n        },\n        [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel],\n    );\n\n    const onToggleGroupCollapsed = useCallback(\n        (groupId: string) => {\n            const updatedMenuGroups = menuGroups?.map((group) => {\n                if (group.id === groupId) {\n                    return {\n                        ...group,\n                        collapsed: !group.collapsed,\n                    };\n                }\n                return group;\n            });\n\n            if (updatedMenuGroups) {\n                onMenuGroupsChanged?.(updatedMenuGroups);\n            }\n        },\n        [menuGroups, onMenuGroupsChanged],\n    );\n\n    const innerMenuItems = useMemo(\n        () =>\n            allPagesIsAvailable\n                ? [\n                      ...(menuItems || EMPTY_MENU_ITEMS),\n                      {\n                          ...ALL_PAGES_MENU_ITEM,\n                          current: innerVisiblePanel === InnerPanels.AllPages,\n                          onItemClick: onAllPagesClick,\n                      },\n                  ]\n                : menuItems || EMPTY_MENU_ITEMS,\n        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick],\n    );\n\n    const innerPanelItems = useMemo(() => {\n        if (!allPagesIsAvailable) {\n            return panelItems;\n        }\n        return [\n            ...(panelItems || []),\n            {\n                id: InnerPanels.AllPages,\n                content: <AllPagesPanel />,\n                visible: innerVisiblePanel === InnerPanels.AllPages,\n            },\n        ];\n    }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);\n\n    return {\n        ...props,\n        onClosePanel: innerOnClosePanel,\n        allPagesIsAvailable,\n        menuItems: innerMenuItems,\n        menuGroups,\n        defaultMenuGroups,\n        onMenuGroupsChanged,\n        panelItems: innerPanelItems,\n        size,\n        onItemClick,\n        onToggleGroupCollapsed,\n    };\n};\n"],"names":["useState","getAllPagesMenuItem","useEffect","useCallback","InnerPanels","useMemo","AllPagesPanel"],"mappings":"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"}
+{"version":3,"file":"useAsideHeaderInnerContextValue.js","sources":["../../../../../src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {MenuItem} from '../types';\n\nimport {AsideHeaderInnerContextType} from './AsideHeaderContext';\nimport {AllPagesPanel, getAllPagesMenuItem} from './components/AllPagesPanel';\nimport {AsideHeaderItem, AsideHeaderProps, InnerPanels, PanelItemProps} from './types';\n\nconst EMPTY_MENU_ITEMS: AsideHeaderItem[] = [];\n\nexport const useAsideHeaderInnerContextValue = (\n    props: AsideHeaderProps & {size: number},\n): AsideHeaderInnerContextType => {\n    const {size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick} = props;\n    const [innerVisiblePanel, setInnerVisiblePanel] = useState<InnerPanels | undefined>();\n    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {\n        return getAllPagesMenuItem();\n    }, []);\n\n    const allPagesIsAvailable =\n        Boolean(onMenuItemsChanged) && (!menuItems || menuItems?.length > 0);\n\n    useEffect(() => {\n        // If any user panel became open we need to switch off all inner panels\n        if (panelItems?.some((x) => x.open)) {\n            setInnerVisiblePanel(undefined);\n        }\n    }, [panelItems]);\n\n    const innerOnClosePanel = useCallback(() => {\n        setInnerVisiblePanel(undefined);\n        onClosePanel?.();\n    }, [onClosePanel]);\n\n    const onItemClick = useCallback(\n        (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (item.id === ALL_PAGES_MENU_ITEM.id) {\n                onClosePanel?.();\n                setInnerVisiblePanel((prev) =>\n                    prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages,\n                );\n            } else {\n                innerOnClosePanel();\n            }\n            item.onItemClick?.(item, collapsed, event);\n        },\n        [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel],\n    );\n\n    const innerMenuItems = useMemo(\n        () =>\n            allPagesIsAvailable\n                ? [\n                      ...(menuItems || EMPTY_MENU_ITEMS),\n                      {\n                          ...ALL_PAGES_MENU_ITEM,\n                          current: innerVisiblePanel === InnerPanels.AllPages,\n                          onItemClick: onAllPagesClick,\n                      },\n                  ]\n                : menuItems || EMPTY_MENU_ITEMS,\n        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick],\n    );\n\n    const innerPanelItems = useMemo<PanelItemProps[] | undefined>(() => {\n        if (!allPagesIsAvailable) {\n            return panelItems;\n        }\n\n        return [\n            ...(panelItems || []),\n            {\n                id: InnerPanels.AllPages,\n                children: <AllPagesPanel />,\n                open: innerVisiblePanel === InnerPanels.AllPages,\n            },\n        ];\n    }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);\n\n    return {\n        ...props,\n        onClosePanel: innerOnClosePanel,\n        allPagesIsAvailable,\n        menuItems: innerMenuItems,\n        panelItems: innerPanelItems,\n        size,\n        onItemClick,\n    };\n};\n"],"names":["useState","getAllPagesMenuItem","useEffect","useCallback","InnerPanels","useMemo","AllPagesPanel"],"mappings":"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"}

package/build/cjs/components/HotkeysPanel/HotkeysPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { ListProps } from '@gravity-ui/uikit';
+import type { DrawerProps, HotkeyProps, ListProps } from '@gravity-ui/uikit';
 import type { HotkeysGroup, HotkeysListItem } from './types';
 export type HotkeysPanelProps<T> = {
     hotkeys: HotkeysGroup<T>[];
@@ -9,7 +9,7 @@ export type HotkeysPanelProps<T> = {
     filterable?: boolean;
     filterPlaceholder?: string;
     emptyState?: ReactNode;
-    visible: boolean;
+    open: boolean;
     onClose?: () => void;
     className?: string;
     drawerItemClassName?: string;
@@ -19,5 +19,9 @@ export type HotkeysPanelProps<T> = {
     listClassName?: string;
     leftOffset?: number | string;
     topOffset?: number | string;
+    style?: React.CSSProperties;
+    platform?: HotkeyProps['platform'];
+    drawerProps?: Omit<DrawerProps, 'style' | 'contentClassName' | 'open' | 'className'>;
+    disableNavigationOffset?: boolean;
 } & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
-export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
+export declare function HotkeysPanel<T = {}>({ open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, platform, drawerProps, style: styleProp, disableNavigationOffset, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;