npm - @gravity-ui/navigation - Versions diffs - 5.0.0-beta.3 → 5.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (395) hide show

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

@@ -1,14 +1,25 @@
 import './FooterItem.css';
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { ASIDE_HEADER_ICON_SIZE } from '../../../constants.js';
 import { createBlock, block } from '../../../utils/cn.js';
+import { useAsideHeaderContextOptional } from '../../AsideHeaderContext.js';
+import { useFooterLayout } from '../../FooterLayoutContext.js';
 import { Item } from '../CompositeBar/Item/Item.js';
 import styles from './FooterItem.module.scss.js';
 const b = createBlock('footer-item', styles);
 const bGlobal = block('footer-item');
 function FooterItem(props) {
-    return (React__default.createElement(Item, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal()}` })));
+    var _a, _b, _c;
+    const { layout, isExpanded: isExpandedProp } = props, restProps = __rest(props, ["layout", "isExpanded"]);
+    const context = useAsideHeaderContextOptional();
+    const contextIsExpanded = (_a = context === null || context === undefined ? undefined : context.isExpanded) !== null && _a !== undefined ? _a : true;
+    const footerLayoutCtx = useFooterLayout();
+    const effectiveLayout = (_b = layout !== null && layout !== undefined ? layout : footerLayoutCtx === null || footerLayoutCtx === undefined ? undefined : footerLayoutCtx.layout) !== null && _b !== undefined ? _b : 'vertical';
+    const effectiveIsExpanded = (_c = isExpandedProp !== null && isExpandedProp !== undefined ? isExpandedProp : footerLayoutCtx === null || footerLayoutCtx === undefined ? undefined : footerLayoutCtx.isExpanded) !== null && _c !== undefined ? _c : contextIsExpanded;
+    const isInFooterBar = Boolean(footerLayoutCtx);
+    return (React__default.createElement(Item, Object.assign({}, restProps, { layout: effectiveLayout, iconSize: ASIDE_HEADER_ICON_SIZE, isExpanded: effectiveIsExpanded, setCollapseBlocker: context === null || context === undefined ? undefined : context.setCollapseBlocker, className: `${b({ collapsed: !effectiveIsExpanded, layout: effectiveLayout, 'footer-bar': isInFooterBar })} ${bGlobal()}` })));
 }
 export { FooterItem };

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

	@@ -1 +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":["React"],"mappings":"~~;;;;;;AASA~~,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;~~AAI9B~~,SAAU,UAAU,CAAC,KAAsB,EAAA;AAC7C,IAAA,~~QACIA~~,~~cAAA~~,CAAA,~~aAAA~~,~~CAAC~~,IAAI,EAAA,MAAA,CAAA,MAAA,~~CAAA~~,EAAA,EACG,~~KAAK~~,EAAA,~~EACT~~,QAAQ,EAAE,sBAAsB,EAChC,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,~~OAAO~~,EAAE,~~KAAK,~~CAAC,~~OAAO~~,EAAC,CAAC,~~CAAA~~,CAAA,~~EAAI~~,OAAO,EAAE,CAAE,CAAA,~~EAAA,~~CAAA~~,CAC1D~~;AAEV;;;;"}
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 {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":["React"],"mappings":";;;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAO9B,SAAU,UAAU,CAAC,KAAsB,EAAA;;AAC7C,IAAA,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAA,GAAkB,KAAK,EAAlB,SAAS,GAAI,MAAA,CAAA,KAAK,EAA1D,CAAA,QAAA,EAAA,YAAA,CAAkD,CAAQ;AAChE,IAAA,MAAM,OAAO,GAAG,6BAA6B,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,GAAG,eAAe,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,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,SAAS,IACb,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,sBAAsB,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/esm/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js CHANGED Viewed

@@ -1,4 +1,4 @@
-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"};
 export { styles as default };
 //# sourceMappingURL=FooterItem.module.scss.js.map

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

@@ -1,19 +1,20 @@
 import React__default, { useCallback } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { Logo } from '../../Logo/Logo.js';
-import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
+import { HEADER_DIVIDER_HEIGHT_COMPACT, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
+import { getCollapsedWidth } from '../../utils/getCollapsedWidth.js';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import { b } from '../utils.js';
 import { useGroupedMenuItems } from './AllPagesPanel/useGroupedMenuItems.js';
 import { CollapseButton } from './CollapseButton/CollapseButton.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import SvgDividerCollapsedCompact from '../../../assets/icons/divider-collapsed-compact.svg.js';
 import SvgDividerCollapsed from '../../../assets/icons/divider-collapsed.svg.js';
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, isExpanded, onItemClick, onClosePanel, headerDecoration, subheaderItems, hideCollapseButton, } = useAsideHeaderInnerContext();
-    const compact = !isExpanded;
+    const { logo, isExpanded, onItemClick, onClosePanel, setCollapseBlocker, headerDecoration, subheaderItems, hideCollapseButton, isCompactMode, } = useAsideHeaderInnerContext();
     const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
     const onLogoClick = useCallback((event) => {
         var _a;
@@ -22,10 +23,12 @@ const Header = () => {
     }, [onClosePanel, logo]);
     return (React__default.createElement("div", { className: b('header', { ['with-decoration']: headerDecoration }) },
         React__default.createElement("div", { className: b('logo-container', { 'without-logo': !logo }) },
-            logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
-            !hideCollapseButton && React__default.createElement(CollapseButton, { className: b('pin-button', { compact }) })),
-        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
-        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+            logo && (React__default.createElement(Logo, Object.assign({}, logo, { placement: "header", isCompactMode: isCompactMode, onClick: onLogoClick, isExpanded: isExpanded, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+            !hideCollapseButton && (React__default.createElement(CollapseButton, { className: b('pin-button', { collapsed: !isExpanded }), isCompactMode: isCompactMode }))),
+        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b('menu-item'), type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker }),
+        headerDecoration && (React__default.createElement(Icon, { data: isCompactMode
+                ? SvgDividerCollapsedCompact
+                : SvgDividerCollapsed, className: b('header-divider'), width: getCollapsedWidth(isCompactMode), height: isCompactMode ? HEADER_DIVIDER_HEIGHT_COMPACT : HEADER_DIVIDER_HEIGHT }))));
 };
 export { Header };

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

	@@ -1 +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":["React","headerDividerCollapsedIcon"],"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~~,GAAG,0BAA0B,EAAE;~~AAEhC~~,~~IAAA,~~MAAM,~~OAAO,GAAG,CAAC,UAAU;IAE3B,MAAM,~~KAAK,GAAG,mBAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACDA,~~cAAC~~,CAAA,aAAA,~~CAAA~~,IAAI,~~EACG~~,MAAA,CAAA,MAAA,CAAA,EAAA,~~EAAA~~,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,~~OAAO~~,EAAE,~~OAAO~~,~~EAChB~~,eAAe,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;~~AAEA~~,~~YAAA,~~CAAC,kBAAkB,~~IAAIA~~,~~cAAA~~,CAAA,aAAA,~~CAAC~~,cAAc,~~EAAA~~,~~EAAC,~~SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,~~OAAO~~,EAAC,CAAC,~~GAAI~~,~~CAC/E~~;AAEN,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,~~EACT,~~WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAE,CAAC,CAAC,WAAW,CAAC,EACjC,IAAI,EAAC,WAAW,EAChB,~~OAAO~~,EAAE,~~OAAO~~,~~EAChB~~,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,~~EAC1B~~,CAAA;~~QAED~~,gBAAgB,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,~~EACD,~~IAAI,~~EAAEC~~,mBAA0B,~~EAChC~~,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,~~0BAA0B~~,~~EACjC~~,MAAM,EAAE,qBAAqB,~~EAC~~/B,~~CAAA,~~CACL,CACC;AAEd;;;;"}
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 {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":["React","headerDividerCollapsedCompactIcon","headerDividerCollapsedIcon"],"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,GAAG,0BAA0B,EAAE;IAEhC,MAAM,KAAK,GAAG,mBAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACDA,cAAA,CAAA,aAAA,CAAC,IAAI,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,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;YAEA,CAAC,kBAAkB,KAChBA,cAAC,CAAA,aAAA,CAAA,cAAc,IACX,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,CAAC,UAAU,EAAC,CAAC,EACpD,aAAa,EAAE,aAAa,EAC9B,CAAA,CACL,CACC;AAEN,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAE,CAAC,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,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EACA;AACI,kBAAEC;AACF,kBAAEC,mBAA0B,EAEpC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,EACvC,MAAM,EAAE,aAAa,GAAG,6BAA6B,GAAG,qBAAqB,EAAA,CAC/E,CACL,CACC;AAEd;;;;"}

package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
2	+ .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/esm/components/AsideHeader/components/PageLayout/AsideFallback.js CHANGED Viewed

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

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

	@@ -1 +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":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,~~OAAO~~,EAAC,GAAG,qBAAqB,EAAE;~~IAEzC~~,MAAM,QAAQ,GAAG,~~OAAO~~,GAAG,~~6BAA6B~~,GAAG,~~wBAAwB~~;~~IAEnF~~,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,~~OAAO~~,IAAI,gBAAgB,IACxBA,~~cAAA~~,CAAA,aAAA,~~CAAC~~,IAAI,~~EAAA~~,~~EACD,~~IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,~~0BAA0B~~,~~EACjC~~,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}
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_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":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,MAAM,EAAC,GAAG,qBAAqB,EAAE;IAExC,MAAM,QAAQ,GAAG,MAAM,GAAG,wBAAwB,GAAG,6BAA6B;IAElF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,CAAC,MAAM,IAAI,gBAAgB,IACxBA,cAAC,CAAA,aAAA,CAAA,IAAI,IACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,4BAA4B,EACnC,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

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

	@@ -0,0 +1,2 @@
1	+ .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
2	+ .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/esm/components/AsideHeader/components/PageLayout/PageLayout.d.ts CHANGED Viewed

@@ -2,9 +2,11 @@ import React, { PropsWithChildren } from 'react';
 import { ContentProps } from '../../../Content';
 import { LayoutProps } from '../../types';
 export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
-    onChangeCompact?: (compact: boolean) => void;
+    onChangePinned?: (pinned: boolean) => void;
+    /** When `true`, menu items use compact height. */
+    isCompactMode?: boolean;
 }
-declare const PageLayout: (({ compact, className, children, topAlert, onChangeCompact }: 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/esm/components/AsideHeader/components/PageLayout/PageLayout.js CHANGED Viewed

@@ -1,6 +1,8 @@
+import './PageLayout.css';
 import React__default, { useMemo, Suspense } from 'react';
 import { Content } from '../../../Content/Content.js';
-import { ASIDE_HEADER_EXPANDED_WIDTH, ASIDE_HEADER_COMPACT_WIDTH } from '../../../constants.js';
+import { ASIDE_HEADER_EXPANDED_WIDTH } from '../../../constants.js';
+import { getCollapsedWidth } from '../../../utils/getCollapsedWidth.js';
 import { AsideHeaderContextProvider, useAsideHeaderContext } from '../../AsideHeaderContext.js';
 import { useIsExpanded } from '../../hooks/useIsExpanded.js';
 import { b } from '../../utils.js';
@@ -18,17 +20,18 @@ 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(compact);
-    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;
+const Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }) => {
+    const { isExpanded, onExpand, onFold, setCollapseBlocker } = useIsExpanded(pinned);
+    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);
     const asideHeaderContextValue = useMemo(() => ({
         size,
-        compact,
+        pinned,
         isExpanded,
-        onChangeCompact,
+        onChangePinned,
         onExpand,
         onFold,
-    }), [size, compact, isExpanded, onChangeCompact, 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.
@@ -46,7 +49,7 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
     };
     const preloadHeightValue = getPreloadHeightValue();
     return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React__default.createElement("div", { className: b({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        React__default.createElement("div", { className: b({ collapsed: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
             typeof preloadHeightValue === 'number' ? (React__default.createElement("style", { dangerouslySetInnerHTML: {
                     __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,
                 } })) : null,
@@ -55,8 +58,8 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
             React__default.createElement("div", { className: b('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size, compact, isExpanded } = useAsideHeaderContext();
-    const isExpandedByHover = compact && isExpanded;
+    const { size, pinned, isExpanded } = useAsideHeaderContext();
+    const isExpandedByHover = !pinned && isExpanded;
     return (React__default.createElement(Content, { size: size, className: b('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
 };
 const PageLayout = Object.assign(Layout, {

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

	@@ -1 +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":["React"],"mappings":"~~;;;;;;;AAUA~~,MAAM,QAAQ,GAAGA,cAAK,CAAC,IAAI,CAAC,MACxB,OAAO,4BAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAC,CAAC,CAAC,CAC7E;AAED;AACA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAElC,SAAS,2BAA2B,CAAC,QAAwB,EAAA;AACzD,IAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACnC,QAAA,OAAO,CAAC;;AAGZ,IAAA,QACI,iBAAiB;SAChB,QAAQ,CAAC,KAAK,GAAG,kBAAkB,GAAG,CAAC,CAAC;AACzC,SAAC,QAAQ,CAAC,KAAK,GAAG,sBAAsB,GAAG,CAAC,CAAC;AAErD;~~AAMA~~,MAAM,MAAM,GAAG,CAAC,~~EAAC~~,~~OAAO~~,~~EAAE~~,SAAS,~~EAAE~~,QAAQ,~~EAAE~~,QAAQ,~~EAAE~~,~~eAAe~~,~~EAAkB~~,KAAI;~~AAC1F~~,IAAA,MAAM,EAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,GAAG,aAAa,CAAC,~~OAAO~~,CAAC;~~IAE7D~~,MAAM,IAAI,GAAG,UAAU,GAAG,2BAA2B,GAAG,~~0BAA0B~~;~~AAElF~~,IAAA,MAAM,uBAAuB,GAAG,OAAO,CACnC,OAAO;QACH,IAAI;QACJ,~~OAAO~~;~~QACP~~,UAAU;QACV,~~eAAe~~;~~QACf~~,QAAQ;QACR,MAAM;~~AACT~~,KAAA,CAAC,EACF,CAAC,IAAI,EAAE,~~OAAO~~,EAAE,UAAU,EAAE,~~eAAe~~,EAAE,QAAQ,EAAE,MAAM,CAAC,~~CACjE~~;AAED,IAAA,MAAM,uBAAuB,GAAG,2BAA2B,CAAC,QAAQ,CAAC;;;IAIrE,MAAM,qBAAqB,GAAG,MAAyB;AACnD,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;AACpF,YAAA,OAAO,SAAS;;AAGpB,QAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE;AACjC,YAAA,OAAO,uBAAuB;;AAGlC,QAAA,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,QAAQ,EAAE;YAC5C,OAAO,QAAQ,CAAC,aAAa;;AAGjC,QAAA,OAAO,SAAS;AACpB,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;AAElD,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,0BAA0B,EAAC,EAAA,KAAK,EAAE,uBAAuB,EAAA;QACtDA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,~~OAAO~~,EAAE,CAAC,UAAU,EAAC,EAAE,SAAS,CAAC,~~EAC/C~~,KAAK,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAC,wBAAwB,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,EAAyB,CAAA,EAAA;YAGtE,OAAO,kBAAkB,KAAK,QAAQ,IACnCA,cACI,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,uBAAuB,EAAE;oBACrB,MAAM,EAAE,CAAiC,8BAAA,EAAA,kBAAkB,CAAM,IAAA,CAAA;AACpE,iBAAA,EAAA,CACH,IACF,IAAI;AACP,YAAA,QAAQ,KACLA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,QAAQ,EAAE,IAAI,EAAA;AACpB,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,CAAI,CACjD,CACd;AACD,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAG,EAAA,QAAQ,CAAO,CACnD,CACmB;AAErC,CAAC;AAED,MAAM,gBAAgB,GAAqE,CAAC,EACxF,QAAQ,EACR,aAAa,GAChB,KAAI;IACD,MAAM,EAAC,IAAI,EAAE,~~OAAO~~,EAAE,UAAU,EAAC,GAAG,qBAAqB,EAAE;~~AAC3D~~,IAAA,MAAM,iBAAiB,GAAG,~~OAAO~~,IAAI,UAAU;AAE/C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,CAAC,EACjE,aAAa,EAAE,aAAa,EAE3B,EAAA,QAAQ,CACH;AAElB,CAAC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACrC,IAAA,OAAO,EAAE,gBAAgB;AAC5B,CAAA;;;;"}
1	+ {"version":3,"file":"PageLayout.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, Suspense, useMemo} from 'react';\n\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {getCollapsedWidth} from '../../../utils/getCollapsedWidth';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {useIsExpanded} from '../../hooks/useIsExpanded';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nconst TopAlert = React.lazy(() =>\n import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\n// Constants for TopAlert height calculation (in pixels)\nconst BASE_ALERT_HEIGHT = 60; // Base height of the alert component\nconst TITLE_HEIGHT_BONUS = 14; // Additional height when title is present\nconst DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled\n\nfunction calcEstimatedTopAlertHeight(topAlert?: TopAlertProps) {\n if (!topAlert \|\| 'render' in topAlert) {\n return 0;\n }\n\n return (\n BASE_ALERT_HEIGHT +\n (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -\n (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0)\n );\n}\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n onChangePinned?: (pinned: boolean) => void;\n /** When `true`, menu items use compact height. */\n isCompactMode?: boolean;\n}\n\nconst Layout = ({\n pinned,\n className,\n children,\n topAlert,\n onChangePinned,\n isCompactMode,\n}: PageLayoutProps) => {\n const {isExpanded, onExpand, onFold, setCollapseBlocker} = useIsExpanded(pinned);\n\n const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);\n\n const asideHeaderContextValue = useMemo(\n () => ({\n size,\n pinned,\n isExpanded,\n onChangePinned,\n onExpand,\n onFold,\n setCollapseBlocker,\n }),\n [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker],\n );\n\n const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);\n\n // Reserve margin immediately on server render through inline variable on container.\n // After TopAlert mount, the exact height will be set by hook.\n const getPreloadHeightValue = (): number \| undefined => {\n if (!topAlert \|\| 'render' in topAlert \|\| typeof topAlert.preloadHeight === 'undefined') {\n return undefined;\n }\n\n if (topAlert.preloadHeight === true) {\n return estimatedTopAlertHeight;\n }\n\n if (typeof topAlert.preloadHeight === 'number') {\n return topAlert.preloadHeight;\n }\n\n return undefined;\n };\n\n const preloadHeightValue = getPreloadHeightValue();\n\n return (\n <AsideHeaderContextProvider value={asideHeaderContextValue}>\n <div\n className={b({collapsed: !isExpanded}, className)}\n style={{\n ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n }}\n >\n {typeof preloadHeightValue === 'number' ? (\n <style\n dangerouslySetInnerHTML={{\n __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,\n }}\n />\n ) : null}\n {topAlert && (\n <Suspense fallback={null}>\n <TopAlert className={b('top-alert')} alert={topAlert} />\n </Suspense>\n )}\n <div className={b('pane-container')}>{children}</div>\n </div>\n </AsideHeaderContextProvider>\n );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n children,\n renderContent,\n}) => {\n const {size, pinned, isExpanded} = useAsideHeaderContext();\n const isExpandedByHover = !pinned && isExpanded;\n\n return (\n <Content\n size={size}\n className={b('content', {'expanded-by-hover': isExpandedByHover})}\n renderContent={renderContent}\n >\n {children}\n </Content>\n );\n};\n\nconst PageLayout = Object.assign(Layout, {\n Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["React"],"mappings":";;;;;;;;AAWA,MAAM,QAAQ,GAAGA,cAAK,CAAC,IAAI,CAAC,MACxB,OAAO,4BAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAC,CAAC,CAAC,CAC7E;AAED;AACA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAElC,SAAS,2BAA2B,CAAC,QAAwB,EAAA;AACzD,IAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACnC,QAAA,OAAO,CAAC;;AAGZ,IAAA,QACI,iBAAiB;SAChB,QAAQ,CAAC,KAAK,GAAG,kBAAkB,GAAG,CAAC,CAAC;AACzC,SAAC,QAAQ,CAAC,KAAK,GAAG,sBAAsB,GAAG,CAAC,CAAC;AAErD;AAQA,MAAM,MAAM,GAAG,CAAC,EACZ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,aAAa,GACC,KAAI;AAClB,IAAA,MAAM,EAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAC,GAAG,aAAa,CAAC,MAAM,CAAC;AAEhF,IAAA,MAAM,IAAI,GAAG,UAAU,GAAG,2BAA2B,GAAG,iBAAiB,CAAC,aAAa,CAAC;AAExF,IAAA,MAAM,uBAAuB,GAAG,OAAO,CACnC,OAAO;QACH,IAAI;QACJ,MAAM;QACN,UAAU;QACV,cAAc;QACd,QAAQ;QACR,MAAM;QACN,kBAAkB;AACrB,KAAA,CAAC,EACF,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,CAAC,CACnF;AAED,IAAA,MAAM,uBAAuB,GAAG,2BAA2B,CAAC,QAAQ,CAAC;;;IAIrE,MAAM,qBAAqB,GAAG,MAAyB;AACnD,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;AACpF,YAAA,OAAO,SAAS;;AAGpB,QAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE;AACjC,YAAA,OAAO,uBAAuB;;AAGlC,QAAA,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,QAAQ,EAAE;YAC5C,OAAO,QAAQ,CAAC,aAAa;;AAGjC,QAAA,OAAO,SAAS;AACpB,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;AAElD,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,0BAA0B,EAAC,EAAA,KAAK,EAAE,uBAAuB,EAAA;QACtDA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,UAAU,EAAC,EAAE,SAAS,CAAC,EACjD,KAAK,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAC,wBAAwB,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,EAAyB,CAAA,EAAA;YAGtE,OAAO,kBAAkB,KAAK,QAAQ,IACnCA,cACI,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,uBAAuB,EAAE;oBACrB,MAAM,EAAE,CAAiC,8BAAA,EAAA,kBAAkB,CAAM,IAAA,CAAA;AACpE,iBAAA,EAAA,CACH,IACF,IAAI;AACP,YAAA,QAAQ,KACLA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,QAAQ,EAAE,IAAI,EAAA;AACpB,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,CAAI,CACjD,CACd;AACD,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAG,EAAA,QAAQ,CAAO,CACnD,CACmB;AAErC,CAAC;AAED,MAAM,gBAAgB,GAAqE,CAAC,EACxF,QAAQ,EACR,aAAa,GAChB,KAAI;IACD,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAC,GAAG,qBAAqB,EAAE;AAC1D,IAAA,MAAM,iBAAiB,GAAG,CAAC,MAAM,IAAI,UAAU;AAE/C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,CAAC,EACjE,aAAa,EAAE,aAAa,EAE3B,EAAA,QAAQ,CACH;AAElB,CAAC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACrC,IAAA,OAAO,EAAE,gBAAgB;AAC5B,CAAA;;;;"}

package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
2	+ .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/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.d.ts CHANGED Viewed

@@ -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/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.js CHANGED Viewed

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

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

	@@ -1 +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":["React"],"mappings":";;;;;AASO,MAAM,eAAe,GAAGA,cAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;AAClF,IAAA,MAAM,EAAC,IAAI,EAAE,~~OAAO~~,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAC,~~GAAG~~,qBAAqB,EAAE;~~AAE7E~~,IAAA,MAAM,4BAA4B,GAAG,+BAA+B,CAAA,MAAA,CAAA,MAAA,CAAA,EAChE,IAAI;QACJ,~~OAAO~~;~~QACP~~,UAAU;QACV,QAAQ;QACR,MAAM,EAAA,~~EACH~~,KAAK,CAAA,CACV;AAEF,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,+BAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChEA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,GAAG,EAAI,CAAA,CACM;AAE1C,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
1	+ {"version":3,"file":"PageLayoutAside.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport {FirstPanel} from '..';\nimport {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {AsideHeaderProps} from '../../types';\nimport {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue';\n\ntype Props = Omit<AsideHeaderProps, 'pinned' \| 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n const {size, pinned, isExpanded, onExpand, onFold, setCollapseBlocker} =\n useAsideHeaderContext();\n\n const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({\n size,\n pinned,\n isExpanded,\n onExpand,\n onFold,\n setCollapseBlocker,\n ...props,\n });\n\n return (\n <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n <FirstPanel ref={ref} />\n </AsideHeaderInnerContextProvider>\n );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["React"],"mappings":";;;;;AASO,MAAM,eAAe,GAAGA,cAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;AAClF,IAAA,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAC,GAClE,qBAAqB,EAAE;AAE3B,IAAA,MAAM,4BAA4B,GAAG,+BAA+B,CAAA,MAAA,CAAA,MAAA,CAAA,EAChE,IAAI;QACJ,MAAM;QACN,UAAU;QACV,QAAQ;QACR,MAAM;QACN,kBAAkB,EAAA,EACf,KAAK,CAAA,CACV;AAEF,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,+BAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChEA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,GAAG,EAAI,CAAA,CACM;AAE1C,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

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

@@ -1,10 +1,11 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useCallback } from 'react';
 import { Drawer } from '@gravity-ui/uikit';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import { b } from '../utils.js';
 const Panels = () => {
-    const { panelItems, size, onClosePanel, onExpand, onFold } = useAsideHeaderInnerContext();
+    const { panelItems, size, onClosePanel, onFold } = useAsideHeaderInnerContext();
     const handleVeilClick = useCallback(() => {
         onFold === null || onFold === undefined ? undefined : onFold();
         onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
@@ -19,8 +20,10 @@ const Panels = () => {
         }
         return;
     }, [handleVeilClick, onClosePanel]);
-    return panelItems ? (React__default.createElement(React__default.Fragment, null, panelItems.map((item) => (React__default.createElement(Drawer, { key: item.id, className: b('panels'), open: item.visible, onOpenChange: handleOpenChange, style: { left: size }, contentClassName: b('panel', item.className) },
-        React__default.createElement("div", { onMouseEnter: onExpand, className: b('panel-content') }, item.content)))))) : null;
+    return panelItems ? (React__default.createElement(React__default.Fragment, null, panelItems.map((_a) => {
+        var { id, className, children } = _a, rest = __rest(_a, ["id", "className", "children"]);
+        return (React__default.createElement(Drawer, Object.assign({}, rest, { key: id, className: b('panels'), onOpenChange: handleOpenChange, style: { left: size }, contentClassName: b('panel', className) }), children));
+    }))) : null;
 };
 export { Panels };

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

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

package/build/esm/components/AsideHeader/hooks/useIsExpanded.d.ts CHANGED Viewed

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

package/build/esm/components/AsideHeader/hooks/useIsExpanded.js CHANGED Viewed

@@ -1,40 +1,63 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { ASIDE_HEADER_EXPAND_DELAY, ASIDE_HEADER_EXPAND_TRANSITION_DELAY } from '../../constants.js';
 import { useDelayedToggle } from './useDelayedToggle.js';
-const useIsExpanded = (externalCompact) => {
-    const [isExpanded, setIsExpanded] = useState(!externalCompact);
+const useIsExpanded = (externalPinned) => {
+    const [isExpanded, setIsExpanded] = useState(externalPinned);
     const [isMouseInside, setIsMouseInside] = useState(false);
+    const collapseBlockerCountRef = useRef(0);
+    const pendingFoldRef = useRef(false);
     useEffect(() => {
-        if (externalCompact && isExpanded) {
+        if (!externalPinned && isExpanded) {
             return;
         }
-        setIsExpanded(!externalCompact);
-        // We need to run this effect only when externalCompact changes
+        setIsExpanded(externalPinned);
+        // We need to run this effect only when externalPinned changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [externalCompact]);
+    }, [externalPinned]);
     const delayedShouldExpand = useDelayedToggle(isMouseInside, {
         enableDelay: ASIDE_HEADER_EXPAND_DELAY,
         disableDelay: ASIDE_HEADER_EXPAND_TRANSITION_DELAY,
     });
     // Update isExpanded based on hover
     useEffect(() => {
-        if (externalCompact) {
+        if (!externalPinned) {
             setIsExpanded(delayedShouldExpand);
         }
-        // We need to run this effect only when delayedShouldExpand changes
+        // Re-run when externalPinned changes so we sync to hover state after pin/unpin
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [delayedShouldExpand]);
+    }, [delayedShouldExpand, externalPinned]);
+    const performFold = useCallback(() => {
+        setIsMouseInside(false);
+    }, []);
     const handleExpand = useCallback(() => {
+        pendingFoldRef.current = false;
         setIsMouseInside(true);
     }, []);
     const handleFold = useCallback(() => {
-        setIsMouseInside(false);
-    }, []);
+        if (collapseBlockerCountRef.current > 0) {
+            pendingFoldRef.current = true;
+            return;
+        }
+        performFold();
+    }, [performFold]);
+    const setCollapseBlocker = 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,
     };
 };

package/build/esm/components/AsideHeader/hooks/useIsExpanded.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useIsExpanded.js","sources":["../../../../../../src/components/AsideHeader/hooks/useIsExpanded.ts"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {ASIDE_HEADER_EXPAND_DELAY, ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\n\nimport {useDelayedToggle} from './useDelayedToggle';\n\ninterface UseIsExpandedResult {\n isExpanded: boolean;\n onExpand: () => void;\n onFold: () => void;\n}\n\nexport const useIsExpanded = (~~externalCompact~~: boolean): UseIsExpandedResult => {\n const [isExpanded, setIsExpanded] = useState(~~!externalCompact~~);\n const [isMouseInside, setIsMouseInside] = useState(false);\n\n useEffect(() => {\n if (~~externalCompact~~ && isExpanded) {\n return;\n }\n\n setIsExpanded(~~!externalCompact~~);\n // We need to run this effect only when ~~externalCompact~~ changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [~~externalCompact~~]);\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 (~~externalCompact~~) {\n setIsExpanded(delayedShouldExpand);\n }\n // We ~~need~~ to ~~run~~ ~~this~~ ~~effect~~ ~~only~~ ~~when~~ ~~delayedShouldExpand~~ ~~changes~~\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [delayedShouldExpand]);\n\n const handleExpand = useCallback(() => {\n setIsMouseInside(true);\n }, []);\n\n const handleFold = useCallback(() => {\n ~~setIsMouseInside~~(~~false~~);\n }, []);\n\n return {\n isExpanded,\n onExpand: handleExpand,\n onFold: handleFold,\n };\n};\n"],"names":[],"mappings":";;;;~~AAYa~~,MAAA,aAAa,GAAG,CAAC,~~eAAwB~~,KAAyB;~~IAC3E~~,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,~~CAAC~~,~~eAAe,~~CAAC;~~IAC9D~~,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;~~IAEzD~~,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,~~eAAe~~,IAAI,UAAU,EAAE;YAC/B;;~~AAGJ~~,~~QAAA,~~aAAa,CAAC,~~CAAC~~,~~eAAe,~~CAAC;;;~~AAGnC~~,KAAC,EAAE,CAAC,~~eAAe~~,CAAC,CAAC;~~AAErB~~,IAAA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,aAAa,EAAE;AACxD,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,YAAY,EAAE,oCAAoC;AACrD,KAAA,CAAC;;IAGF,SAAS,CAAC,MAAK;QACX,IAAI,~~eAAe~~,EAAE;YACjB,aAAa,CAAC,mBAAmB,CAAC;;;;AAI1C,KAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC;~~AAEzB~~,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;~~QAClC~~,gBAAgB,CAAC,IAAI,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;~~QAChC~~,~~gBAAgB~~,CAAC,~~KAAK~~,CAAC;~~KAC1B~~,EAAE,EAAE,CAAC;~~IAEN~~,OAAO;QACH,UAAU;AACV,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,MAAM,EAAE,UAAU;KACrB;AACL;;;;"}
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":[],"mappings":";;;;AAca,MAAA,aAAa,GAAG,CAAC,cAAuB,KAAyB;IAC1E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;IAEpC,SAAS,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,GAAG,gBAAgB,CAAC,aAAa,EAAE;AACxD,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,YAAY,EAAE,oCAAoC;AACrD,KAAA,CAAC;;IAGF,SAAS,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,GAAG,WAAW,CAAC,MAAK;QACjC,gBAAgB,CAAC,KAAK,CAAC;KAC1B,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK;QAE9B,gBAAgB,CAAC,IAAI,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,UAAU,GAAG,WAAW,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,GAAG,WAAW,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/esm/components/AsideHeader/i18n/en.json.js CHANGED Viewed

@@ -1,11 +1,13 @@
 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
 };
-export { button_collapse, button_expand, en as default, label_more };
+export { button_collapse, button_expand, en as default, label_more, label_others };
 //# sourceMappingURL=en.json.js.map

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

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

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

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