@gravity-ui/navigation 6.5.1 → 7.0.0-beta.0

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

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

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

@@ -1,2 +1,10 @@
 .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
-.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-margin-inline:8px;--gn-aside-header-item-expanded-radius:8px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside_menu-overflow-scroll___l-td6 .AsideHeader-module__gn-aside-header__aside-content___w5GOS{min-height:0;overflow:hidden}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:"";height:1px;left:0;position:absolute;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,8px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:0}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:var(--_--gn-aside-header-density-compact-width,56px);--_--item-margin-inline:var(
+      --_--gn-aside-header-density-item-margin-inline,8px
+  );--_--item-expanded-radius:var(
+      --_--gn-aside-header-density-item-expanded-radius,8px
+  );--_--item-icon-background-size:var(
+      --gn-aside-header-item-icon-background-size,var(--_--gn-aside-header-density-icon-background-size,38px)
+  );--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--section-divider-gap:var(--g-spacing-1);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__compact-transition___bBGfN{--_--gn-aside-width-transition:width 0.2s ease-in-out;--_--gn-aside-collapse-geometry-transition:inset-inline-end 0.2s ease-in-out,width 0.2s ease-in-out,border-radius 0.2s ease-in-out;--_--gn-aside-drawer-transition:left 0.2s ease-in-out,background-color var(--_--animation-duration,300ms)}.AsideHeader-module__gn-aside-header__compact-transition_disabled___ztpdX{--_--gn-aside-width-transition:none;--_--gn-aside-collapse-geometry-transition:none;--_--gn-aside-drawer-transition:background-color var(--_--animation-duration,300ms)}.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));overflow:hidden;position:sticky;top:var(--gn-top-alert-height,0);transition:var(--_--gn-aside-width-transition);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%;inset-inline-end:0;position:absolute;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;min-height:0;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:var(--gn-aside-header-size);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;transition:var(--_--gn-aside-width-transition);width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-divider]{flex-shrink:0}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__aside-content___w5GOS{overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item, .AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item-content{min-width:0;overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-scrollport]{width:var(--_--gn-aside-header-expanded-width)}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{width:var(--gn-aside-header-size)}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:"";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{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__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{padding-bottom:var(--_--section-divider-gap)}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{bottom:0}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_with-quick-access-items___oU0Yz):not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:var(--_--section-divider-gap)}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__logo___QvKKT{--_--gn-logo-height:var(
+      --_--gn-aside-header-density-item-height,40px
+  )}.AsideHeader-module__gn-aside-header__quick-access___ykXmy{box-sizing:border-box;flex:none;margin-bottom:var(--_--section-divider-gap);padding-block:var(--_--section-divider-gap);position:relative;width:100%}.AsideHeader-module__gn-aside-header__quick-access-divider___AzkVl{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:0;content:"";height:1px;left:var(--_--item-margin-inline);position:absolute;right:var(--_--item-margin-inline);width:auto;z-index:1}.AsideHeader-module__gn-aside-header__quick-access-title___im4TL{color:var(--g-color-text-secondary);font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-inline:var(--_--item-margin-inline);padding-inline:calc(var(--_--gn-aside-header-density-item-height, 40px) + var(--_--gn-aside-header-density-item-title-gap, var(--g-spacing-2))) var(--_--gn-aside-header-density-item-title-gap-end,var(--g-spacing-4));padding-bottom:var(--g-spacing-1);user-select:none}.AsideHeader-module__gn-aside-header__unified-menu-scroll___EHnK-{flex:1 1 auto;min-height:0}.AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:0}.AsideHeader-module__gn-aside-header___Z0Sa7 [data-gn-aside-current-container]>:not([data-gn-aside-current-indicator-layer]):not([data-gn-aside-divider]){position:relative;z-index:1}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.AsideHeader-module__gn-aside-header__collapse-fallback___R6O7X{flex-shrink:0;height:var(--_--gn-aside-header-density-footer-item-height,32px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline);position:relative}.AsideHeader-module__gn-aside-header__footer___vmoTl .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));content:"";height:1px;left:calc(var(--_--item-margin-inline)*-1);opacity:0;pointer-events:none;position:absolute;right:calc(var(--_--item-margin-inline)*-1);top:calc(var(--g-spacing-2)*-1);transition:opacity .3s ease-in-out}.AsideHeader-module__gn-aside-header__footer_with-divider___66E1w .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{opacity:1}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:0;padding-bottom:0}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU:before{height:100%}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer-divider___9Jewp, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:none}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer___vmoTl{margin-top: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.g-drawer[data-floating-ui-status]{transition:var(--_--gn-aside-drawer-transition)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:0}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);transition:var(--_--gn-aside-width-transition);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}@media (prefers-reduced-motion:reduce){.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE, .AsideHeader-module__gn-aside-header__aside___AyP0y, .AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer[data-floating-ui-status]{transition:none}}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { QAProps } from '@gravity-ui/uikit';
 interface Props extends QAProps {
     headerDecoration?: boolean;
+    hideSectionDividers?: boolean;
     subheaderItemsCount?: number;
 }
 export declare const AsideFallback: React.FC<Props>;

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

@@ -1,20 +1,27 @@
 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 { HEADER_DIVIDER_HEIGHT } from '../../../constants.js';
 import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig } from '../../density.js';
 import { b } from '../../utils.js';
+import { AsideDivider } from '../AsideDivider.js';
 import SvgDividerCollapsed from '../../../../assets/icons/divider-collapsed.svg.js';
 
-const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = useAsideHeaderContext();
+const AsideFallback = ({ headerDecoration, hideSectionDividers, subheaderItemsCount = 0, qa, }) => {
+    const { compact, menuDensity } = useAsideHeaderContext();
+    const { compactWidth, itemHeight } = getAsideHeaderDensityConfig(menuDensity);
     const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
-    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
-    return (React__default.createElement("div", { className: b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
-        React__default.createElement("div", { className: b('aside-content', { 'with-decoration': headerDecoration }) },
+    const subheaderHeight = (1 + subheaderItemsCount) * itemHeight;
+    return (React__default.createElement("div", { className: b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa, "data-gn-aside-panel": true },
+        React__default.createElement("div", { className: b('aside-content', {
+                'with-decoration': headerDecoration,
+                'hide-section-dividers': hideSectionDividers,
+            }) },
             React__default.createElement("div", { className: b('header', { 'with-decoration': headerDecoration }) },
                 React__default.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
+                React__default.createElement(AsideDivider, { className: b('header-bottom-divider'), transitionId: "header" }),
+                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: compactWidth, height: HEADER_DIVIDER_HEIGHT })) : null),
             React__default.createElement("div", { style: { flex: 1 } }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["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;;;;"}
+{"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 {HEADER_DIVIDER_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {getAsideHeaderDensityConfig} from '../../density';\nimport {b} from '../../utils';\nimport {AsideDivider} from '../AsideDivider';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    hideSectionDividers?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({\n    headerDecoration,\n    hideSectionDividers,\n    subheaderItemsCount = 0,\n    qa,\n}) => {\n    const {compact, menuDensity} = useAsideHeaderContext();\n    const {compactWidth, itemHeight} = getAsideHeaderDensityConfig(menuDensity);\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * itemHeight;\n\n    return (\n        <div\n            className={b('aside')}\n            style={{width: `var(${widthVar})`}}\n            data-qa={qa}\n            data-gn-aside-panel\n        >\n            <div\n                className={b('aside-content', {\n                    'with-decoration': headerDecoration,\n                    'hide-section-dividers': hideSectionDividers,\n                })}\n            >\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    <AsideDivider className={b('header-bottom-divider')} transitionId=\"header\" />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={compactWidth}\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":";;;;;;;;;AAkBa,MAAA,aAAa,GAAoB,CAAC,EAC3C,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GAAG,CAAC,EACvB,EAAE,GACL,KAAI;IACD,MAAM,EAAC,OAAO,EAAE,WAAW,EAAC,GAAG,qBAAqB,EAAE;IACtD,MAAM,EAAC,YAAY,EAAE,UAAU,EAAC,GAAG,2BAA2B,CAAC,WAAW,CAAC;IAE3E,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,UAAU;AAE9D,IAAA,QACIA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aACzB,EAAE,EAAA,qBAAA,EAAA,IAAA,EAAA;AAGX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE;AAC1B,gBAAA,iBAAiB,EAAE,gBAAgB;AACnC,gBAAA,uBAAuB,EAAE,mBAAmB;aAC/C,CAAC,EAAA;YAEFA,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;AACzC,gBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAC,QAAQ,EAAG,CAAA;AAC5E,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,YAAY,EACnB,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/AsideLayoutTransition.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { type CurrentSnapshot } from './currentIndicatorModel';
+type Part = {
+    element: HTMLElement;
+    rect: DOMRect;
+    anchor: DOMRect;
+    opacity: number;
+    transform: string;
+    backgroundColor: string;
+    borderRadius: string;
+    clipPath: string;
+    clipRect?: DOMRect;
+};
+type Row = Part & {
+    icon?: Part;
+    title?: Part;
+    surface?: Part;
+    group?: string;
+};
+type Group = {
+    part: Part;
+    headerKey: string;
+};
+type Divider = Part & {
+    id: string;
+    group?: string;
+};
+type Snapshot = {
+    rows: Map<string, Row>;
+    groups: Map<string, Group>;
+    dividers: Map<string, Divider>;
+    width: number;
+    layoutWidth: number;
+    current?: CurrentSnapshot;
+    collapse?: {
+        element: HTMLElement;
+        y: number;
+        anchor: Element | null;
+    };
+};
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    compact: boolean;
+    compactTransition?: boolean;
+};
+type BeforeSnapshot = Snapshot & {
+    appearances: Map<Part, HTMLElement>;
+};
+/**
+ * FLIP boundary for the aside: snapshot before React mutates the DOM, then
+ * translate the target rows from their old positions before the browser paints.
+ * Text is never scaled and the actual target layout is present from the start.
+ * Departing rows/titles are decorative, inert copies, removed on animation finish.
+ */
+export declare class AsideLayoutTransition extends React.Component<Props, Record<string, never>, BeforeSnapshot | null> {
+    private root;
+    private currentIndicator;
+    private currentIdentities;
+    private presentationObserver;
+    private animations;
+    private surfacePaint;
+    private overlay?;
+    private scrollOverlay?;
+    private animatedPanel?;
+    private departingRows;
+    private departingTitles;
+    private generation;
+    private pendingStart?;
+    private departingGroups;
+    private departingDividers;
+    getSnapshotBeforeUpdate(previous: Props): BeforeSnapshot | null;
+    componentDidUpdate(_previous: Props, _state: Record<string, never>, before: BeforeSnapshot | null): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    private start;
+    private addGhost;
+    private cancel;
+    private cancelSurfacePaint;
+    private reconcileObservation;
+}
+export {};