@gravity-ui/navigation 5.0.0-beta.2 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {}\n\nexport function FooterItem(props: FooterItemProps) {\n    return (\n        <Item\n            {...props}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            className={`${b({compact: props.compact})} ${bGlobal()}`}\n        />\n    );\n}\n"],"names":["createBlock","styles","block","Item","ASIDE_HEADER_ICON_SIZE"],"mappings":";;;;;;;;AASA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAI9B,SAAU,UAAU,CAAC,KAAsB,EAAA;AAC7C,IAAA,QACI,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EAAA,EACT,QAAQ,EAAEC,gCAAsB,EAChC,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAE,CAAA,EAAA,CAAA,CAC1D;AAEV;;;;"}
+{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContextOptional} from '../../AsideHeaderContext';\nimport {useFooterLayout} from '../../FooterLayoutContext';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {\n    /** Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used by FooterBar. */\n    layout?: 'horizontal' | 'vertical';\n}\n\nexport function FooterItem(props: FooterItemProps) {\n    const {layout, isExpanded: isExpandedProp, ...restProps} = props;\n    const context = useAsideHeaderContextOptional();\n    const contextIsExpanded = context?.isExpanded ?? true;\n\n    const footerLayoutCtx = useFooterLayout();\n    const effectiveLayout = layout ?? footerLayoutCtx?.layout ?? 'vertical';\n    const effectiveIsExpanded = isExpandedProp ?? footerLayoutCtx?.isExpanded ?? contextIsExpanded;\n    const isInFooterBar = Boolean(footerLayoutCtx);\n\n    return (\n        <Item\n            {...restProps}\n            layout={effectiveLayout}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            isExpanded={effectiveIsExpanded}\n            setCollapseBlocker={context?.setCollapseBlocker}\n            className={`${b({collapsed: !effectiveIsExpanded, layout: effectiveLayout, 'footer-bar': isInFooterBar})} ${bGlobal()}`}\n        />\n    );\n}\n"],"names":["createBlock","styles","block","__rest","useAsideHeaderContextOptional","useFooterLayout","Item","ASIDE_HEADER_ICON_SIZE"],"mappings":";;;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAO9B,SAAU,UAAU,CAAC,KAAsB,EAAA;;AAC7C,IAAA,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAA,GAAkB,KAAK,EAAlB,SAAS,GAAIC,gBAAA,CAAA,KAAK,EAA1D,CAAA,QAAA,EAAA,YAAA,CAAkD,CAAQ;AAChE,IAAA,MAAM,OAAO,GAAGC,gDAA6B,EAAE;AAC/C,IAAA,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,UAAU,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,IAAI;AAErD,IAAA,MAAM,eAAe,GAAGC,mCAAe,EAAE;AACzC,IAAA,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,iBAAN,MAAM,GAAI,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAE,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,UAAU;AACvE,IAAA,MAAM,mBAAmB,GAAG,CAAA,EAAA,GAAA,cAAc,KAAd,IAAA,IAAA,cAAc,iBAAd,cAAc,GAAI,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,iBAAiB;AAC9F,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,eAAe,CAAC;IAE9C,QACI,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,SAAS,IACb,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAEC,gCAAsB,EAChC,UAAU,EAAE,mBAAmB,EAC/B,kBAAkB,EAAE,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,kBAAkB,EAC/C,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,mBAAmB,EAAE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC,CAAI,CAAA,EAAA,OAAO,EAAE,CAAA,CAAE,EACzH,CAAA,CAAA;AAEV;;;;"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH","gn-footer-item_layout_horizontal":"FooterItem-module__gn-footer-item_layout_horizontal___WaBU0","gnFooterItemLayoutHorizontal":"FooterItem-module__gn-footer-item_layout_horizontal___WaBU0","gn-footer-item_layout_vertical":"FooterItem-module__gn-footer-item_layout_vertical___SjEa5","gnFooterItemLayoutVertical":"FooterItem-module__gn-footer-item_layout_vertical___SjEa5","gn-footer-item_footer-bar":"FooterItem-module__gn-footer-item_footer-bar___zcMtA","gnFooterItemFooterBar":"FooterItem-module__gn-footer-item_footer-bar___zcMtA"};
 
 exports.default = styles;
 //# sourceMappingURL=FooterItem.module.scss.js.map

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

@@ -4,25 +4,33 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var Logo = require('../../Logo/Logo.js');
 var constants = require('../../constants.js');
+var getCollapsedWidth = require('../../utils/getCollapsedWidth.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 dividerCollapsedCompact = require('../../../assets/icons/divider-collapsed-compact.svg.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, onItemClick, onClosePanel, headerDecoration, subheaderItems } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    const { logo, isExpanded, onItemClick, onClosePanel, setCollapseBlocker, headerDecoration, subheaderItems, hideCollapseButton, isCompactMode, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const items = useGroupedMenuItems.useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
     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 }) },
-        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", 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 }))));
+        React.createElement("div", { className: utils.b('logo-container', { 'without-logo': !logo }) },
+            logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { placement: "header", isCompactMode: isCompactMode, onClick: onLogoClick, isExpanded: isExpanded, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
+            !hideCollapseButton && (React.createElement(CollapseButton.CollapseButton, { className: utils.b('pin-button', { collapsed: !isExpanded }), isCompactMode: isCompactMode }))),
+        React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: utils.b('menu-item'), type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker }),
+        headerDecoration && (React.createElement(uikit.Icon, { data: isCompactMode
+                ? dividerCollapsedCompact.default
+                : dividerCollapsed.default, className: utils.b('header-divider'), width: getCollapsedWidth.getCollapsedWidth(isCompactMode), height: isCompactMode ? constants.HEADER_DIVIDER_HEIGHT_COMPACT : constants.HEADER_DIVIDER_HEIGHT }))));
 };
 
 exports.Header = Header;

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 {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {CompositeBar} from './CompositeBar';\n\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];\nconst HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';\n\nexport const Header = () => {\n    const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =\n        useAsideHeaderInnerContext();\n    const {compact} = useAsideHeaderContext();\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            {logo && (\n                <Logo\n                    {...logo}\n                    onClick={onLogoClick}\n                    compact={compact}\n                    buttonClassName={b('logo-button')}\n                    iconPlaceClassName={b('logo-icon-place')}\n                />\n            )}\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                type=\"subheader\"\n                compact={compact}\n                items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}\n                onItemClick={onItemClick}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={ASIDE_HEADER_COMPACT_WIDTH}\n                    height={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","useAsideHeaderContext","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,EAAC,GACrEA,6CAA0B,EAAE;AAChC,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGC,wCAAqB,EAAE;AAEzC,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;QAED,KAAC,CAAA,aAAA,CAAAE,yBAAY,IACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACC,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;;;;"}
+{"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 {HEADER_DIVIDER_HEIGHT, HEADER_DIVIDER_HEIGHT_COMPACT} from '../../constants';\nimport {getCollapsedWidth} from '../../utils/getCollapsedWidth';\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 headerDividerCollapsedCompactIcon from '../../../../assets/icons/divider-collapsed-compact.svg';\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        setCollapseBlocker,\n        headerDecoration,\n        subheaderItems,\n        hideCollapseButton,\n        isCompactMode,\n    } = useAsideHeaderInnerContext();\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                        placement=\"header\"\n                        isCompactMode={isCompactMode}\n                        onClick={onLogoClick}\n                        isExpanded={isExpanded}\n                        buttonClassName={b('logo-button')}\n                        iconPlaceClassName={b('logo-icon-place')}\n                    />\n                )}\n\n                {!hideCollapseButton && (\n                    <CollapseButton\n                        className={b('pin-button', {collapsed: !isExpanded})}\n                        isCompactMode={isCompactMode}\n                    />\n                )}\n            </div>\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                menuItemClassName={b('menu-item')}\n                type=\"subheader\"\n                isExpanded={isExpanded}\n                items={items}\n                onItemClick={onItemClick}\n                isCompactMode={isCompactMode}\n                setCollapseBlocker={setCollapseBlocker}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={\n                        isCompactMode\n                            ? headerDividerCollapsedCompactIcon\n                            : headerDividerCollapsedIcon\n                    }\n                    className={b('header-divider')}\n                    width={getCollapsedWidth(isCompactMode)}\n                    height={isCompactMode ? HEADER_DIVIDER_HEIGHT_COMPACT : HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","useGroupedMenuItems","useCallback","b","Logo","CollapseButton","CompositeBar","Icon","headerDividerCollapsedCompactIcon","headerDividerCollapsedIcon","getCollapsedWidth","HEADER_DIVIDER_HEIGHT_COMPACT","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;IACvB,MAAM,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,aAAa,GAChB,GAAGA,6CAA0B,EAAE;IAEhC,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,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EACR,EAAA,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;YAEA,CAAC,kBAAkB,KAChB,KAAC,CAAA,aAAA,CAAAE,6BAAc,IACX,SAAS,EAAEF,OAAC,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,CAAC,UAAU,EAAC,CAAC,EACpD,aAAa,EAAE,aAAa,EAC9B,CAAA,CACL,CACC;AAEN,QAAA,KAAA,CAAA,aAAA,CAACG,yBAAY,EACT,EAAA,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAEH,OAAC,CAAC,WAAW,CAAC,EACjC,IAAI,EAAC,WAAW,EAChB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,kBAAkB,EACxC,CAAA;AAED,QAAA,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACI,UAAI,EACD,EAAA,IAAI,EACA;AACI,kBAAEC;AACF,kBAAEC,wBAA0B,EAEpC,SAAS,EAAEN,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEO,mCAAiB,CAAC,aAAa,CAAC,EACvC,MAAM,EAAE,aAAa,GAAGC,uCAA6B,GAAGC,+BAAqB,EAAA,CAC/E,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-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-color,var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color)));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

@@ -1,3 +1,4 @@
+import './AsideFallback.css';
 'use strict';
 
 var React = require('react');
@@ -8,14 +9,14 @@ var utils = require('../../utils.js');
 var dividerCollapsed = require('../../../../assets/icons/divider-collapsed.svg.js');
 
 const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = AsideHeaderContext.useAsideHeaderContext();
-    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
+    const { pinned } = AsideHeaderContext.useAsideHeaderContext();
+    const widthVar = pinned ? '--gn-aside-header-size' : '--gn-aside-header-min-width';
     const subheaderHeight = (1 + subheaderItemsCount) * constants.ITEM_HEIGHT;
     return (React.createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
         React.createElement("div", { className: utils.b('aside-content', { 'with-decoration': headerDecoration }) },
             React.createElement("div", { className: utils.b('header', { 'with-decoration': headerDecoration }) },
                 React.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
+                !pinned && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COLLAPSED_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
             React.createElement("div", { style: { flex: 1 } }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxB,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}
+{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COLLAPSED_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {pinned} = useAsideHeaderContext();\n\n    const widthVar = pinned ? '--gn-aside-header-size' : '--gn-aside-header-min-width';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {!pinned && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COLLAPSED_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COLLAPSED_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,MAAM,EAAC,GAAGA,wCAAqB,EAAE;IAExC,MAAM,QAAQ,GAAG,MAAM,GAAG,wBAAwB,GAAG,6BAA6B;IAElF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,CAAC,MAAM,IAAI,gBAAgB,IACxB,KAAC,CAAA,aAAA,CAAAC,UAAI,IACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,sCAA4B,EACnC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

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

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

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

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

@@ -1,9 +1,12 @@
+import './PageLayout.css';
 'use strict';
 
 var React = require('react');
 var Content = require('../../../Content/Content.js');
 var constants = require('../../../constants.js');
+var getCollapsedWidth = require('../../../utils/getCollapsedWidth.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 })));
@@ -19,9 +22,18 @@ function calcEstimatedTopAlertHeight(topAlert) {
         (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -
         (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0));
 }
-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 Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }) => {
+    const { isExpanded, onExpand, onFold, setCollapseBlocker } = useIsExpanded.useIsExpanded(pinned);
+    const size = isExpanded ? constants.ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth.getCollapsedWidth(isCompactMode);
+    const asideHeaderContextValue = React.useMemo(() => ({
+        size,
+        pinned,
+        isExpanded,
+        onChangePinned,
+        onExpand,
+        onFold,
+        setCollapseBlocker,
+    }), [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker]);
     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.
@@ -39,7 +51,7 @@ const Layout = ({ compact, className, children, topAlert }) => {
     };
     const preloadHeightValue = getPreloadHeightValue();
     return (React.createElement(AsideHeaderContext.AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React.createElement("div", { className: utils.b({ compact }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        React.createElement("div", { className: utils.b({ collapsed: !isExpanded }, 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,
@@ -48,8 +60,9 @@ const Layout = ({ compact, className, children, topAlert }) => {
             React.createElement("div", { className: utils.b('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size } = AsideHeaderContext.useAsideHeaderContext();
-    return (React.createElement(Content.Content, { size: size, className: utils.b('content'), renderContent: renderContent }, children));
+    const { size, pinned, isExpanded } = AsideHeaderContext.useAsideHeaderContext();
+    const isExpandedByHover = !pinned && isExpanded;
+    return (React.createElement(Content.Content, { size: size, className: utils.b('content', { 'expanded-by-hover': isExpandedByHover }), 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 {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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"}
+{"version":3,"file":"PageLayout.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, Suspense, useMemo} from 'react';\n\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {getCollapsedWidth} from '../../../utils/getCollapsedWidth';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {useIsExpanded} from '../../hooks/useIsExpanded';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nconst TopAlert = React.lazy(() =>\n    import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\n// Constants for TopAlert height calculation (in pixels)\nconst BASE_ALERT_HEIGHT = 60; // Base height of the alert component\nconst TITLE_HEIGHT_BONUS = 14; // Additional height when title is present\nconst DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled\n\nfunction calcEstimatedTopAlertHeight(topAlert?: TopAlertProps) {\n    if (!topAlert || 'render' in topAlert) {\n        return 0;\n    }\n\n    return (\n        BASE_ALERT_HEIGHT +\n        (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -\n        (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0)\n    );\n}\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n    onChangePinned?: (pinned: boolean) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n}\n\nconst Layout = ({\n    pinned,\n    className,\n    children,\n    topAlert,\n    onChangePinned,\n    isCompactMode,\n}: PageLayoutProps) => {\n    const {isExpanded, onExpand, onFold, setCollapseBlocker} = useIsExpanded(pinned);\n\n    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);\n\n    const asideHeaderContextValue = useMemo(\n        () => ({\n            size,\n            pinned,\n            isExpanded,\n            onChangePinned,\n            onExpand,\n            onFold,\n            setCollapseBlocker,\n        }),\n        [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker],\n    );\n\n    const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);\n\n    // Reserve margin immediately on server render through inline variable on container.\n    // After TopAlert mount, the exact height will be set by hook.\n    const getPreloadHeightValue = (): number | undefined => {\n        if (!topAlert || 'render' in topAlert || typeof topAlert.preloadHeight === 'undefined') {\n            return undefined;\n        }\n\n        if (topAlert.preloadHeight === true) {\n            return estimatedTopAlertHeight;\n        }\n\n        if (typeof topAlert.preloadHeight === 'number') {\n            return topAlert.preloadHeight;\n        }\n\n        return undefined;\n    };\n\n    const preloadHeightValue = getPreloadHeightValue();\n\n    return (\n        <AsideHeaderContextProvider value={asideHeaderContextValue}>\n            <div\n                className={b({collapsed: !isExpanded}, className)}\n                style={{\n                    ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n                }}\n            >\n                {typeof preloadHeightValue === 'number' ? (\n                    <style\n                        dangerouslySetInnerHTML={{\n                            __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,\n                        }}\n                    />\n                ) : null}\n                {topAlert && (\n                    <Suspense fallback={null}>\n                        <TopAlert className={b('top-alert')} alert={topAlert} />\n                    </Suspense>\n                )}\n                <div className={b('pane-container')}>{children}</div>\n            </div>\n        </AsideHeaderContextProvider>\n    );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n    children,\n    renderContent,\n}) => {\n    const {size, pinned, isExpanded} = useAsideHeaderContext();\n    const isExpandedByHover = !pinned && isExpanded;\n\n    return (\n        <Content\n            size={size}\n            className={b('content', {'expanded-by-hover': isExpandedByHover})}\n            renderContent={renderContent}\n        >\n            {children}\n        </Content>\n    );\n};\n\nconst PageLayout = Object.assign(Layout, {\n    Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["useIsExpanded","ASIDE_HEADER_EXPANDED_WIDTH","getCollapsedWidth","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-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-color,var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color)));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

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

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

@@ -1,3 +1,4 @@
+import './PageLayoutAside.css';
 'use strict';
 
 var React = require('react');
@@ -6,8 +7,13 @@ var AsideHeaderContext = require('../../AsideHeaderContext.js');
 var useAsideHeaderInnerContextValue = require('../../useAsideHeaderInnerContextValue.js');
 
 const PageLayoutAside = React.forwardRef((props, ref) => {
-    const { size, compact } = AsideHeaderContext.useAsideHeaderContext();
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue.useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
+    const { size, pinned, isExpanded, onExpand, onFold, setCollapseBlocker } = AsideHeaderContext.useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue.useAsideHeaderInnerContextValue(Object.assign({ size,
+        pinned,
+        isExpanded,
+        onExpand,
+        onFold,
+        setCollapseBlocker }, props));
     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} = useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({size, compact, ...props});\n\n    return (\n        <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n            <FirstPanel ref={ref} />\n        </AsideHeaderInnerContextProvider>\n    );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["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,CAAE,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,OAAO,EAAA,EAAK,KAAK,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;;;;"}
+{"version":3,"file":"PageLayoutAside.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport {FirstPanel} from '..';\nimport {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {AsideHeaderProps} from '../../types';\nimport {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue';\n\ntype Props = Omit<AsideHeaderProps, 'pinned' | 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n    const {size, pinned, isExpanded, onExpand, onFold, setCollapseBlocker} =\n        useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({\n        size,\n        pinned,\n        isExpanded,\n        onExpand,\n        onFold,\n        setCollapseBlocker,\n        ...props,\n    });\n\n    return (\n        <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n            <FirstPanel ref={ref} />\n        </AsideHeaderInnerContextProvider>\n    );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["useAsideHeaderContext","useAsideHeaderInnerContextValue","AsideHeaderInnerContextProvider","FirstPanel"],"mappings":";;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;AAClF,IAAA,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAC,GAClEA,wCAAqB,EAAE;AAE3B,IAAA,MAAM,4BAA4B,GAAGC,+DAA+B,CAAA,MAAA,CAAA,MAAA,CAAA,EAChE,IAAI;QACJ,MAAM;QACN,UAAU;QACV,QAAQ;QACR,MAAM;QACN,kBAAkB,EAAA,EACf,KAAK,CAAA,CACV;AAEF,IAAA,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.JSX.Element | null;
+export declare const Panels: React.FC;

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

@@ -7,10 +7,24 @@ var AsideHeaderContext = require('../AsideHeaderContext.js');
 var utils = require('../utils.js');
 
 const Panels = () => {
-    const { panelItems, onClosePanel, size } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { panelItems, size, onClosePanel, 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((_a) => {
-        var { id, className } = _a, rest = tslib_es6.__rest(_a, ["id", "className"]);
-        return (React.createElement(uikit.Drawer, Object.assign({}, rest, { key: id, className: utils.b('panels'), onOpenChange: (open) => !open && (onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel()), style: { left: size }, contentClassName: utils.b('panel', className) })));
+        var { id, className, children } = _a, rest = tslib_es6.__rest(_a, ["id", "className", "children"]);
+        return (React.createElement(uikit.Drawer, Object.assign({}, rest, { key: id, className: utils.b('panels'), onOpenChange: handleOpenChange, style: { left: size }, contentClassName: utils.b('panel', className) }), children));
     }))) : null;
 };
 

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 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, ...rest}) => (\n                <Drawer\n                    {...rest}\n                    key={id}\n                    className={b('panels')}\n                    onOpenChange={(open) => !open && onClosePanel?.()}\n                    style={{left: size}}\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,EAAwB,KAAI;YAA5B,EAAC,EAAE,EAAE,SAAS,EAAA,GAAA,EAAU,EAAL,IAAI,GAAAC,gBAAA,CAAA,EAAA,EAAvB,mBAAwB,CAAD;QAAM,QAC1C,KAAC,CAAA,aAAA,CAAAC,YAAM,EACC,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,GAAG,EAAE,EAAE,EACP,SAAS,EAAEC,OAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,KAAI,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,EAAI,CAAA,EACjD,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EACnB,gBAAgB,EAAEA,OAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EACzC,CAAA,CAAA;AACL,KAAA,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}
+{"version":3,"file":"Panels.js","sources":["../../../../../../src/components/AsideHeader/components/Panels.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Drawer, DrawerProps} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nexport const Panels: React.FC = () => {\n    const {panelItems, size, onClosePanel, onFold} = useAsideHeaderInnerContext();\n\n    const handleVeilClick = useCallback(() => {\n        onFold?.();\n        onClosePanel?.();\n    }, [onClosePanel, onFold]);\n\n    const handleOpenChange: Required<DrawerProps>['onOpenChange'] = useCallback(\n        (open, _event, reason) => {\n            if (reason === 'outside-press') {\n                handleVeilClick();\n                return;\n            }\n\n            if (!open) {\n                onClosePanel?.();\n            }\n\n            return;\n        },\n        [handleVeilClick, onClosePanel],\n    );\n\n    return panelItems ? (\n        <React.Fragment>\n            {panelItems.map(({id, className, children, ...rest}) => (\n                <Drawer\n                    {...rest}\n                    key={id}\n                    className={b('panels')}\n                    onOpenChange={handleOpenChange}\n                    style={{left: size}}\n                    contentClassName={b('panel', className)}\n                >\n                    {children}\n                </Drawer>\n            ))}\n        </React.Fragment>\n    ) : null;\n};\n"],"names":["useAsideHeaderInnerContext","useCallback","__rest","Drawer","b"],"mappings":";;;;;;;;AAOO,MAAM,MAAM,GAAa,MAAK;AACjC,IAAA,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,GAAGA,6CAA0B,EAAE;AAE7E,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,oBAAC,KAAK,CAAC,QAAQ,EAAA,IAAA,EACV,UAAU,CAAC,GAAG,CAAC,CAAC,EAAkC,KAAI;YAAtC,EAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,OAAU,EAAL,IAAI,GAAjCC,gBAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,UAAA,CAAkC,CAAD;AAAM,QAAA,QACpD,KAAC,CAAA,aAAA,CAAAC,YAAM,oBACC,IAAI,EAAA,EACR,GAAG,EAAE,EAAE,EACP,SAAS,EAAEC,OAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EACnB,gBAAgB,EAAEA,OAAC,CAAC,OAAO,EAAE,SAAS,CAAC,KAEtC,QAAQ,CACJ;AACZ,KAAA,CAAC,CACW,IACjB,IAAI;AACZ;;;;"}

package/build/cjs/components/AsideHeader/hooks/useDelayedToggle.d.ts

@@ -0,0 +1,6 @@
+interface ToggleDelayConfig {
+    enableDelay: number;
+    disableDelay: number;
+}
+export declare function useDelayedToggle(currentValue: boolean, config?: ToggleDelayConfig, maybeShouldThrottleFn?: (value: boolean, previousValue: boolean) => boolean): boolean;
+export {};

package/build/cjs/components/AsideHeader/hooks/useDelayedToggle.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+
+function defaultComparator(value, previousValue) {
+    return value !== previousValue;
+}
+function isTogglingOn(currentValue, previousValue) {
+    return !previousValue && Boolean(currentValue);
+}
+function isTogglingOff(currentValue, previousValue) {
+    return Boolean(previousValue) && !currentValue;
+}
+function useDelayedToggle(currentValue, config, maybeShouldThrottleFn) {
+    const shouldThrottleFn = defaultComparator;
+    const timerRef = React.useRef(null);
+    const valueCacheRef = React.useRef(currentValue);
+    const [value, setValue] = React.useState(currentValue);
+    const delayConfig = config;
+    React.useEffect(() => {
+        function clear() {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+        if (currentValue !== valueCacheRef.current) {
+            clear();
+            const shouldThrottle = shouldThrottleFn(currentValue, valueCacheRef.current);
+            const previousValue = valueCacheRef.current;
+            valueCacheRef.current = currentValue;
+            if (shouldThrottle) {
+                let delay;
+                if (isTogglingOn(currentValue, previousValue)) {
+                    delay = delayConfig.enableDelay;
+                }
+                else if (isTogglingOff(currentValue, previousValue)) {
+                    delay = delayConfig.disableDelay;
+                }
+                else {
+                    delay = delayConfig.enableDelay;
+                }
+                timerRef.current = setTimeout(() => {
+                    setValue(currentValue);
+                }, delay);
+            }
+            else {
+                setValue(currentValue);
+            }
+        }
+        return clear;
+    }, [currentValue, delayConfig.enableDelay, delayConfig.disableDelay, shouldThrottleFn]);
+    return value;
+}
+
+exports.useDelayedToggle = useDelayedToggle;
+//# sourceMappingURL=useDelayedToggle.js.map

package/build/cjs/components/AsideHeader/hooks/useDelayedToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayedToggle.js","sources":["../../../../../../src/components/AsideHeader/hooks/useDelayedToggle.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\ninterface ToggleDelayConfig {\n    enableDelay: number;\n    disableDelay: number;\n}\n\nconst DEFAULT_CONFIG: ToggleDelayConfig = {\n    enableDelay: 500,\n    disableDelay: 200,\n};\n\nfunction defaultComparator(value: boolean, previousValue: boolean): boolean {\n    return value !== previousValue;\n}\n\nfunction isTogglingOn(currentValue: boolean, previousValue: boolean): boolean {\n    return !previousValue && Boolean(currentValue);\n}\n\nfunction isTogglingOff(currentValue: boolean, previousValue: boolean): boolean {\n    return Boolean(previousValue) && !currentValue;\n}\n\nexport function useDelayedToggle(\n    currentValue: boolean,\n    config?: ToggleDelayConfig,\n    maybeShouldThrottleFn?: (value: boolean, previousValue: boolean) => boolean,\n): boolean {\n    const shouldThrottleFn = maybeShouldThrottleFn || defaultComparator;\n    const timerRef = useRef<NodeJS.Timeout | null>(null);\n    const valueCacheRef = useRef(currentValue);\n    const [value, setValue] = useState(currentValue);\n\n    const delayConfig = config || DEFAULT_CONFIG;\n\n    useEffect(() => {\n        function clear() {\n            if (timerRef.current) {\n                clearTimeout(timerRef.current);\n                timerRef.current = null;\n            }\n        }\n\n        if (currentValue !== valueCacheRef.current) {\n            clear();\n\n            const shouldThrottle = shouldThrottleFn(currentValue, valueCacheRef.current);\n            const previousValue = valueCacheRef.current;\n\n            valueCacheRef.current = currentValue;\n\n            if (shouldThrottle) {\n                let delay: number;\n\n                if (isTogglingOn(currentValue, previousValue)) {\n                    delay = delayConfig.enableDelay;\n                } else if (isTogglingOff(currentValue, previousValue)) {\n                    delay = delayConfig.disableDelay;\n                } else {\n                    delay = delayConfig.enableDelay;\n                }\n\n                timerRef.current = setTimeout(() => {\n                    setValue(currentValue);\n                }, delay);\n            } else {\n                setValue(currentValue);\n            }\n        }\n\n        return clear;\n    }, [currentValue, delayConfig.enableDelay, delayConfig.disableDelay, shouldThrottleFn]);\n\n    return value;\n}\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;AAYA,SAAS,iBAAiB,CAAC,KAAc,EAAE,aAAsB,EAAA;IAC7D,OAAO,KAAK,KAAK,aAAa;AAClC;AAEA,SAAS,YAAY,CAAC,YAAqB,EAAE,aAAsB,EAAA;AAC/D,IAAA,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC;AAClD;AAEA,SAAS,aAAa,CAAC,YAAqB,EAAE,aAAsB,EAAA;AAChE,IAAA,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY;AAClD;SAEgB,gBAAgB,CAC5B,YAAqB,EACrB,MAA0B,EAC1B,qBAA2E,EAAA;AAE3E,IAAA,MAAM,gBAAgB,GAA4B,iBAAiB;AACnE,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACpD,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAC,YAAY,CAAC;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,YAAY,CAAC;AAEhD,IAAA,MAAM,WAAW,GAAG,MAAwB;IAE5CC,eAAS,CAAC,MAAK;AACX,QAAA,SAAS,KAAK,GAAA;AACV,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,gBAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;AAC9B,gBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;;;AAI/B,QAAA,IAAI,YAAY,KAAK,aAAa,CAAC,OAAO,EAAE;AACxC,YAAA,KAAK,EAAE;YAEP,MAAM,cAAc,GAAG,gBAAgB,CAAC,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC;AAC5E,YAAA,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO;AAE3C,YAAA,aAAa,CAAC,OAAO,GAAG,YAAY;YAEpC,IAAI,cAAc,EAAE;AAChB,gBAAA,IAAI,KAAa;AAEjB,gBAAA,IAAI,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,EAAE;AAC3C,oBAAA,KAAK,GAAG,WAAW,CAAC,WAAW;;AAC5B,qBAAA,IAAI,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,EAAE;AACnD,oBAAA,KAAK,GAAG,WAAW,CAAC,YAAY;;qBAC7B;AACH,oBAAA,KAAK,GAAG,WAAW,CAAC,WAAW;;AAGnC,gBAAA,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;oBAC/B,QAAQ,CAAC,YAAY,CAAC;iBACzB,EAAE,KAAK,CAAC;;iBACN;gBACH,QAAQ,CAAC,YAAY,CAAC;;;AAI9B,QAAA,OAAO,KAAK;AAChB,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,WAAW,EAAE,WAAW,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAEvF,IAAA,OAAO,KAAK;AAChB;;;;"}

package/build/cjs/components/AsideHeader/hooks/useIsExpanded.d.ts

@@ -0,0 +1,9 @@
+import { SetCollapseBlocker } from '../types';
+interface UseIsExpandedResult {
+    isExpanded: boolean;
+    onExpand: () => void;
+    onFold: () => void;
+    setCollapseBlocker: SetCollapseBlocker;
+}
+export declare const useIsExpanded: (externalPinned: boolean) => UseIsExpandedResult;
+export {};

package/build/cjs/components/AsideHeader/hooks/useIsExpanded.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var constants = require('../../constants.js');
+var useDelayedToggle = require('./useDelayedToggle.js');
+
+const useIsExpanded = (externalPinned) => {
+    const [isExpanded, setIsExpanded] = React.useState(externalPinned);
+    const [isMouseInside, setIsMouseInside] = React.useState(false);
+    const collapseBlockerCountRef = React.useRef(0);
+    const pendingFoldRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!externalPinned && isExpanded) {
+            return;
+        }
+        setIsExpanded(externalPinned);
+        // We need to run this effect only when externalPinned changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [externalPinned]);
+    const delayedShouldExpand = useDelayedToggle.useDelayedToggle(isMouseInside, {
+        enableDelay: constants.ASIDE_HEADER_EXPAND_DELAY,
+        disableDelay: constants.ASIDE_HEADER_EXPAND_TRANSITION_DELAY,
+    });
+    // Update isExpanded based on hover
+    React.useEffect(() => {
+        if (!externalPinned) {
+            setIsExpanded(delayedShouldExpand);
+        }
+        // Re-run when externalPinned changes so we sync to hover state after pin/unpin
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [delayedShouldExpand, externalPinned]);
+    const performFold = React.useCallback(() => {
+        setIsMouseInside(false);
+    }, []);
+    const handleExpand = React.useCallback(() => {
+        pendingFoldRef.current = false;
+        setIsMouseInside(true);
+    }, []);
+    const handleFold = React.useCallback(() => {
+        if (collapseBlockerCountRef.current > 0) {
+            pendingFoldRef.current = true;
+            return;
+        }
+        performFold();
+    }, [performFold]);
+    const setCollapseBlocker = React.useCallback((isBlocked) => {
+        if (isBlocked) {
+            collapseBlockerCountRef.current += 1;
+        }
+        else if (collapseBlockerCountRef.current > 0) {
+            collapseBlockerCountRef.current -= 1;
+            if (collapseBlockerCountRef.current === 0 && pendingFoldRef.current) {
+                pendingFoldRef.current = false;
+                performFold();
+            }
+        }
+    }, [performFold]);
+    return {
+        isExpanded,
+        onExpand: handleExpand,
+        onFold: handleFold,
+        setCollapseBlocker,
+    };
+};
+
+exports.useIsExpanded = useIsExpanded;
+//# sourceMappingURL=useIsExpanded.js.map

package/build/cjs/components/AsideHeader/hooks/useIsExpanded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsExpanded.js","sources":["../../../../../../src/components/AsideHeader/hooks/useIsExpanded.ts"],"sourcesContent":["import {useCallback, useEffect, useRef, useState} from 'react';\n\nimport {ASIDE_HEADER_EXPAND_DELAY, ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {SetCollapseBlocker} from '../types';\n\nimport {useDelayedToggle} from './useDelayedToggle';\n\ninterface UseIsExpandedResult {\n    isExpanded: boolean;\n    onExpand: () => void;\n    onFold: () => void;\n    setCollapseBlocker: SetCollapseBlocker;\n}\n\nexport const useIsExpanded = (externalPinned: boolean): UseIsExpandedResult => {\n    const [isExpanded, setIsExpanded] = useState(externalPinned);\n    const [isMouseInside, setIsMouseInside] = useState(false);\n    const collapseBlockerCountRef = useRef(0);\n    const pendingFoldRef = useRef(false);\n\n    useEffect(() => {\n        if (!externalPinned && isExpanded) {\n            return;\n        }\n\n        setIsExpanded(externalPinned);\n        // We need to run this effect only when externalPinned changes\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [externalPinned]);\n\n    const delayedShouldExpand = useDelayedToggle(isMouseInside, {\n        enableDelay: ASIDE_HEADER_EXPAND_DELAY,\n        disableDelay: ASIDE_HEADER_EXPAND_TRANSITION_DELAY,\n    });\n\n    // Update isExpanded based on hover\n    useEffect(() => {\n        if (!externalPinned) {\n            setIsExpanded(delayedShouldExpand);\n        }\n        // Re-run when externalPinned changes so we sync to hover state after pin/unpin\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [delayedShouldExpand, externalPinned]);\n\n    const performFold = useCallback(() => {\n        setIsMouseInside(false);\n    }, []);\n\n    const handleExpand = useCallback(() => {\n        pendingFoldRef.current = false;\n\n        setIsMouseInside(true);\n    }, []);\n\n    const handleFold = useCallback(() => {\n        if (collapseBlockerCountRef.current > 0) {\n            pendingFoldRef.current = true;\n\n            return;\n        }\n\n        performFold();\n    }, [performFold]);\n\n    const setCollapseBlocker = useCallback(\n        (isBlocked: boolean) => {\n            if (isBlocked) {\n                collapseBlockerCountRef.current += 1;\n            } else if (collapseBlockerCountRef.current > 0) {\n                collapseBlockerCountRef.current -= 1;\n\n                if (collapseBlockerCountRef.current === 0 && pendingFoldRef.current) {\n                    pendingFoldRef.current = false;\n                    performFold();\n                }\n            }\n        },\n        [performFold],\n    );\n\n    return {\n        isExpanded,\n        onExpand: handleExpand,\n        onFold: handleFold,\n        setCollapseBlocker,\n    };\n};\n"],"names":["useState","useRef","useEffect","useDelayedToggle","ASIDE_HEADER_EXPAND_DELAY","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","useCallback"],"mappings":";;;;;;AAca,MAAA,aAAa,GAAG,CAAC,cAAuB,KAAyB;IAC1E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,cAAc,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,uBAAuB,GAAGC,YAAM,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,cAAc,GAAGA,YAAM,CAAC,KAAK,CAAC;IAEpCC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,cAAc,IAAI,UAAU,EAAE;YAC/B;;QAGJ,aAAa,CAAC,cAAc,CAAC;;;AAGjC,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,mBAAmB,GAAGC,iCAAgB,CAAC,aAAa,EAAE;AACxD,QAAA,WAAW,EAAEC,mCAAyB;AACtC,QAAA,YAAY,EAAEC,8CAAoC;AACrD,KAAA,CAAC;;IAGFH,eAAS,CAAC,MAAK;QACX,IAAI,CAAC,cAAc,EAAE;YACjB,aAAa,CAAC,mBAAmB,CAAC;;;;AAI1C,KAAC,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAGI,iBAAW,CAAC,MAAK;QACjC,gBAAgB,CAAC,KAAK,CAAC;KAC1B,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAAC,MAAK;AAClC,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK;QAE9B,gBAAgB,CAAC,IAAI,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,UAAU,GAAGA,iBAAW,CAAC,MAAK;AAChC,QAAA,IAAI,uBAAuB,CAAC,OAAO,GAAG,CAAC,EAAE;AACrC,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;YAE7B;;AAGJ,QAAA,WAAW,EAAE;AACjB,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAClC,CAAC,SAAkB,KAAI;QACnB,IAAI,SAAS,EAAE;AACX,YAAA,uBAAuB,CAAC,OAAO,IAAI,CAAC;;AACjC,aAAA,IAAI,uBAAuB,CAAC,OAAO,GAAG,CAAC,EAAE;AAC5C,YAAA,uBAAuB,CAAC,OAAO,IAAI,CAAC;YAEpC,IAAI,uBAAuB,CAAC,OAAO,KAAK,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE;AACjE,gBAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AAC9B,gBAAA,WAAW,EAAE;;;AAGzB,KAAC,EACD,CAAC,WAAW,CAAC,CAChB;IAED,OAAO;QACH,UAAU;AACV,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,MAAM,EAAE,UAAU;QAClB,kBAAkB;KACrB;AACL;;;;"}

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

@@ -5,14 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var button_collapse = "Collapse";
 var button_expand = "Expand";
 var label_more = "More";
+var label_others = "Others";
 var en = {
 	button_collapse: button_collapse,
 	button_expand: button_expand,
-	label_more: label_more
+	label_more: label_more,
+	label_others: label_others
 };
 
 exports.button_collapse = button_collapse;
 exports.button_expand = button_expand;
 exports.default = en;
 exports.label_more = label_more;
+exports.label_others = label_others;
 //# sourceMappingURL=en.json.js.map