@gravity-ui/navigation 1.6.2 → 1.7.0

package/README.md

@@ -26,6 +26,7 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.
 - DrawerItem
 - PageLayout
 - PageLayoutAside
+- AsideFallback
 
 ## Optimization
 
@@ -33,23 +34,35 @@ If your app content needs to be rendered faster than by passing it throw `AsideH
 you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this:
 
 ```diff
--import {AsideHeader} from '@gravity-ui/navigation';
-+import {PageLayout} from '@gravity-ui/navigation';
-+
-+const PageLayoutAside = React.lazy(() =>
-+    import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})),
+--- Main.tsx
++++ Main.tsx
+-import {AsideHeader} from './AsideHeader'
++import {PageLayout, AsideFallback} from '@gravity-ui/navigation';
++const Aside = React.lazy(() =>
++    import('./Aside').then(({Aside}) => ({ default: Aside }))
 +);
 
 -    <AsideHeader renderContent={renderContent} {...restProps} />
 +    <PageLayout>
-+        <Suspense fallback={null}>
-+            <PageLayoutAside {...restProps} />
++        <Suspense fallback={<AsideFallback />}>
++           <Aside />
 +        </Suspense>
 +
 +        <PageLayout.Content>
 +            <ContentExample />
 +        </PageLayout.Content>
 +    </PageLayout>
+--- Aside.tsx
++++ Aside.tsx
+-import {AsideHeader} from '@gravity-ui/navigation';
++import {PageLayoutAside} from '@gravity-ui/navigation';
+
+export const Aside: FC = () => {
+    return (
+-        <AsideHeader {...props}>
++        <PageLayoutAside {...props}/>
+    );
+};
 ```
 
 ## Imports

package/build/cjs/{ActionBar-393db3ea.js → ActionBar-96a59723.js}

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var styleInject_es = require('./style-inject.es-935afc04.js');
+var cn = require('./cn-1964a72a.js');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var css_248z$4 = ".gn-action-bar-group{align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:0}.gn-action-bar-group_pull_left{margin-left:0;margin-right:auto}.gn-action-bar-group_pull_right{margin-left:auto;margin-right:0}.gn-action-bar-group_pull_center{margin-left:auto;margin-right:auto}";
 styleInject_es.styleInject(css_248z$4);
 
-const b$4 = styleInject_es.block('action-bar-group');
+const b$4 = cn.block('action-bar-group');
 const ActionBarGroup = ({ children, className, pull }) => {
     return (React__default["default"].createElement("ul", { className: b$4({ pull }, className), role: "group" }, children));
 };
@@ -19,7 +20,7 @@ ActionBarGroup.displayName = 'ActionBar.Group';
 var css_248z$3 = ".gn-action-bar-item{list-style:none;margin:0;padding:0}.gn-action-bar-item_pull_left{margin-left:0;margin-right:auto}.gn-action-bar-item_pull_right{margin-left:auto;margin-right:0}.gn-action-bar-item_pull_center{margin-left:auto;margin-right:auto}.gn-action-bar-item+.gn-action-bar-item_spacing{margin-left:8px}";
 styleInject_es.styleInject(css_248z$3);
 
-const b$3 = styleInject_es.block('action-bar-item');
+const b$3 = cn.block('action-bar-item');
 const ActionBarItem = ({ children, className, pull, spacing = true }) => {
     return React__default["default"].createElement("li", { className: b$3({ pull, spacing }, className) }, children);
 };
@@ -28,7 +29,7 @@ ActionBarItem.displayName = 'ActionBar.Item';
 var css_248z$2 = ".gn-action-bar-section{align-items:stretch;display:flex;flex-flow:row nowrap;justify-content:flex-start}.gn-action-bar-section+.gn-action-bar-section{border-left:1px solid var(--g-color-line-generic)}.gn-action-bar-section_type_primary{flex:1 1 auto;padding-left:20px;padding-right:20px}.gn-action-bar-section_type_secondary{padding-left:6px;padding-right:6px}";
 styleInject_es.styleInject(css_248z$2);
 
-const b$2 = styleInject_es.block('action-bar-section');
+const b$2 = cn.block('action-bar-section');
 const ActionBarSection = ({ children, type = 'primary' }) => {
     return React__default["default"].createElement("div", { className: b$2({ type }) }, children);
 };
@@ -37,7 +38,7 @@ ActionBarSection.displayName = 'ActionBar.Section';
 var css_248z$1 = ".gn-action-bar-separator{border-right:1px solid var(--g-color-line-generic);height:40px;list-style:none;margin:0 6px;padding:0}";
 styleInject_es.styleInject(css_248z$1);
 
-const b$1 = styleInject_es.block('action-bar-separator');
+const b$1 = cn.block('action-bar-separator');
 const ActionBarSeparator = () => {
     return React__default["default"].createElement("li", { role: "separator", className: b$1() });
 };
@@ -46,7 +47,7 @@ ActionBarSeparator.displayName = 'ActionBar.Separator';
 var css_248z = ".gn-action-bar{align-items:stretch;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;flex-flow:row nowrap;height:40px;justify-content:flex-start}";
 styleInject_es.styleInject(css_248z);
 
-const b = styleInject_es.block('action-bar');
+const b = cn.block('action-bar');
 const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
     return (React__default["default"].createElement("section", { className: b(null, className), "aria-label": ariaLabel }, children));
 };
@@ -59,4 +60,4 @@ const PublicActionBar = Object.assign(ActionBar, {
 });
 
 exports.PublicActionBar = PublicActionBar;
-//# sourceMappingURL=ActionBar-393db3ea.js.map
+//# sourceMappingURL=ActionBar-96a59723.js.map

package/build/cjs/{ActionBar-393db3ea.js.map → ActionBar-96a59723.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ActionBar-393db3ea.js","sources":["../../../src/components/ActionBar/Group/ActionBarGroup.tsx","../../../src/components/ActionBar/Item/ActionBarItem.tsx","../../../src/components/ActionBar/Section/ActionBarSection.tsx","../../../src/components/ActionBar/Separator/ActionBarSeparator.tsx","../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarGroup.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-group');\n\nexport const ActionBarGroup = ({children, className, pull}: Props) => {\n    return (\n        <ul className={b({pull}, className)} role=\"group\">\n            {children}\n        </ul>\n    );\n};\n\nActionBarGroup.displayName = 'ActionBar.Group';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarItem.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        spacing?: boolean;\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-item');\n\nexport const ActionBarItem = ({children, className, pull, spacing = true}: Props) => {\n    return <li className={b({pull, spacing}, className)}>{children}</li>;\n};\n\nActionBarItem.displayName = 'ActionBar.Item';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSection.scss';\n\nexport type Props = PropsWithChildren<{type?: 'primary' | 'secondary'}>;\n\nconst b = block('action-bar-section');\n\nexport const ActionBarSection = ({children, type = 'primary'}: Props) => {\n    return <div className={b({type})}>{children}</div>;\n};\n\nActionBarSection.displayName = 'ActionBar.Section';\n","import React from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSeparator.scss';\n\nconst b = block('action-bar-separator');\n\nexport const ActionBarSeparator = () => {\n    return <li role=\"separator\" className={b()} />;\n};\n\nActionBarSeparator.displayName = 'ActionBar.Separator';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../utils/cn';\nimport {ActionBarGroup} from './Group/ActionBarGroup';\nimport {ActionBarItem} from './Item/ActionBarItem';\nimport {ActionBarSection} from './Section/ActionBarSection';\nimport {ActionBarSeparator} from './Separator/ActionBarSeparator';\n\nimport './ActionBar.scss';\n\nexport type Props = PropsWithChildren<{\n    'aria-label'?: string;\n    className?: string;\n}>;\n\nconst b = block('action-bar');\n\nconst ActionBar = ({children, className, 'aria-label': ariaLabel}: Props) => {\n    return (\n        <section className={b(null, className)} aria-label={ariaLabel}>\n            {children}\n        </section>\n    );\n};\n\nActionBar.displayName = 'ActionBar';\n\nconst PublicActionBar = Object.assign(ActionBar, {\n    Section: ActionBarSection,\n    Group: ActionBarGroup,\n    Item: ActionBarItem,\n    Separator: ActionBarSeparator,\n});\n\nexport {PublicActionBar as ActionBar};\n"],"names":["b","block","React"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,GAAC,GAAGC,oBAAK,CAAC,kBAAkB,CAAC,CAAC;AAE7B,MAAM,cAAc,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAQ,KAAI;IACjE,QACIC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,IAC5C,QAAQ,CACR,EACP;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB;;;;;ACT9C,MAAMA,GAAC,GAAGC,oBAAK,CAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,aAAa,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAQ,KAAI;AAChF,IAAA,OAAOC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,EAAE,SAAS,CAAC,EAAG,EAAA,QAAQ,CAAM,CAAC;AACzE,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;;ACZ5C,MAAMA,GAAC,GAAGC,oBAAK,CAAC,oBAAoB,CAAC,CAAC;AAE/B,MAAM,gBAAgB,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAQ,KAAI;AACpE,IAAA,OAAOC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAA,EAAG,QAAQ,CAAO,CAAC;AACvD,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;;;;;ACRlD,MAAMA,GAAC,GAAGC,oBAAK,CAAC,sBAAsB,CAAC,CAAC;AAEjC,MAAM,kBAAkB,GAAG,MAAK;IACnC,OAAOC,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,WAAW,EAAC,SAAS,EAAEF,GAAC,EAAE,EAAA,CAAI,CAAC;AACnD,CAAC,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,qBAAqB;;;;;ACGtD,MAAM,CAAC,GAAGC,oBAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,SAAS,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAQ,KAAI;AACxE,IAAA,QACIC,yBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,gBAAc,SAAS,EAAA,EACxD,QAAQ,CACH,EACZ;AACN,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;AAC7C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,KAAK,EAAE,cAAc;AACrB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,SAAS,EAAE,kBAAkB;AAChC,CAAA;;;;"}
+{"version":3,"file":"ActionBar-96a59723.js","sources":["../../../src/components/ActionBar/Group/ActionBarGroup.tsx","../../../src/components/ActionBar/Item/ActionBarItem.tsx","../../../src/components/ActionBar/Section/ActionBarSection.tsx","../../../src/components/ActionBar/Separator/ActionBarSeparator.tsx","../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarGroup.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-group');\n\nexport const ActionBarGroup = ({children, className, pull}: Props) => {\n    return (\n        <ul className={b({pull}, className)} role=\"group\">\n            {children}\n        </ul>\n    );\n};\n\nActionBarGroup.displayName = 'ActionBar.Group';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarItem.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        spacing?: boolean;\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-item');\n\nexport const ActionBarItem = ({children, className, pull, spacing = true}: Props) => {\n    return <li className={b({pull, spacing}, className)}>{children}</li>;\n};\n\nActionBarItem.displayName = 'ActionBar.Item';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSection.scss';\n\nexport type Props = PropsWithChildren<{type?: 'primary' | 'secondary'}>;\n\nconst b = block('action-bar-section');\n\nexport const ActionBarSection = ({children, type = 'primary'}: Props) => {\n    return <div className={b({type})}>{children}</div>;\n};\n\nActionBarSection.displayName = 'ActionBar.Section';\n","import React from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSeparator.scss';\n\nconst b = block('action-bar-separator');\n\nexport const ActionBarSeparator = () => {\n    return <li role=\"separator\" className={b()} />;\n};\n\nActionBarSeparator.displayName = 'ActionBar.Separator';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../utils/cn';\nimport {ActionBarGroup} from './Group/ActionBarGroup';\nimport {ActionBarItem} from './Item/ActionBarItem';\nimport {ActionBarSection} from './Section/ActionBarSection';\nimport {ActionBarSeparator} from './Separator/ActionBarSeparator';\n\nimport './ActionBar.scss';\n\nexport type Props = PropsWithChildren<{\n    'aria-label'?: string;\n    className?: string;\n}>;\n\nconst b = block('action-bar');\n\nconst ActionBar = ({children, className, 'aria-label': ariaLabel}: Props) => {\n    return (\n        <section className={b(null, className)} aria-label={ariaLabel}>\n            {children}\n        </section>\n    );\n};\n\nActionBar.displayName = 'ActionBar';\n\nconst PublicActionBar = Object.assign(ActionBar, {\n    Section: ActionBarSection,\n    Group: ActionBarGroup,\n    Item: ActionBarItem,\n    Separator: ActionBarSeparator,\n});\n\nexport {PublicActionBar as ActionBar};\n"],"names":["b","block","React"],"mappings":";;;;;;;;;;;;;AAaA,MAAMA,GAAC,GAAGC,QAAK,CAAC,kBAAkB,CAAC,CAAC;AAE7B,MAAM,cAAc,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAQ,KAAI;IACjE,QACIC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,IAC5C,QAAQ,CACR,EACP;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB;;;;;ACT9C,MAAMA,GAAC,GAAGC,QAAK,CAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,aAAa,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAQ,KAAI;AAChF,IAAA,OAAOC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,EAAE,SAAS,CAAC,EAAG,EAAA,QAAQ,CAAM,CAAC;AACzE,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;;ACZ5C,MAAMA,GAAC,GAAGC,QAAK,CAAC,oBAAoB,CAAC,CAAC;AAE/B,MAAM,gBAAgB,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAQ,KAAI;AACpE,IAAA,OAAOC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAA,EAAG,QAAQ,CAAO,CAAC;AACvD,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;;;;;ACRlD,MAAMA,GAAC,GAAGC,QAAK,CAAC,sBAAsB,CAAC,CAAC;AAEjC,MAAM,kBAAkB,GAAG,MAAK;IACnC,OAAOC,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,WAAW,EAAC,SAAS,EAAEF,GAAC,EAAE,EAAA,CAAI,CAAC;AACnD,CAAC,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,qBAAqB;;;;;ACGtD,MAAM,CAAC,GAAGC,QAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,SAAS,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAQ,KAAI;AACxE,IAAA,QACIC,yBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,gBAAc,SAAS,EAAA,EACxD,QAAQ,CACH,EACZ;AACN,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;AAC7C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,KAAK,EAAE,cAAc;AACrB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,SAAS,EAAE,kBAAkB;AAChC,CAAA;;;;"}

package/build/cjs/AsideFallback.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var AsideHeaderContext = require('./AsideHeaderContext.js');
+var dividerCollapsed = require('./divider-collapsed-153868e7.js');
+var utils = require('./utils-a93dd754.js');
+var uikit = require('@gravity-ui/uikit');
+var constants = require('./constants-d81c3867.js');
+require('./cn-1964a72a.js');
+require('@bem-react/classname');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0 }) => {
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
+    const subheaderHeight = (1 + subheaderItemsCount) * constants.ITEM_HEIGHT;
+    return (React__default["default"].createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` } },
+        React__default["default"].createElement("div", { className: utils.b('aside-content', { 'with-decoration': headerDecoration }) },
+            React__default["default"].createElement("div", { className: utils.b('header', { 'with-decoration': headerDecoration }) },
+                React__default["default"].createElement("div", { style: { height: subheaderHeight } }),
+                compact ? (React__default["default"].createElement(uikit.Icon, { data: dividerCollapsed.headerDividerCollapsedIcon, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
+            React__default["default"].createElement("div", { style: { flex: 1 } }))));
+};
+
+exports.AsideFallback = AsideFallback;
+//# sourceMappingURL=AsideFallback.js.map

package/build/cjs/AsideFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsideFallback.js","sources":["../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\nimport {b} from '../../utils';\nimport {Icon} from '@gravity-ui/uikit';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\n\nexport interface Props {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0}) => {\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})`}}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","React","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;;;;;AAYO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAC,KAAI;AAC1F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE,CAAC;IAE1C,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB,CAAC;IAEpF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW,CAAC;AAEhE,IAAA,QACIC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAO,IAAA,EAAA,QAAQ,GAAG,EAAC,EAAA;QAC1DD,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrED,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAD,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IACJA,yBAAC,CAAA,aAAA,CAAAE,UAAI,EACD,EAAA,IAAI,EAAEC,2CAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAAA,CAC/B,IACF,IAAI,CACN;YACNL,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ,EACR;AACN;;;;"}

package/build/cjs/AsideHeader.js

@@ -8,14 +8,17 @@ var PageLayout = require('./PageLayout.js');
 var PageLayoutAside = require('./PageLayoutAside.js');
 require('./AsideHeaderContext.js');
 require('./Content-64d5738a.js');
-require('./FirstPanel-2f78b962.js');
-require('@gravity-ui/uikit');
-require('./style-inject.es-935afc04.js');
+require('./constants-d81c3867.js');
+require('./utils-a93dd754.js');
+require('./cn-1964a72a.js');
 require('@bem-react/classname');
-require('./Item-15bdb320.js');
+require('./style-inject.es-dcee06b6.js');
+require('@gravity-ui/uikit');
+require('./Item-836015b7.js');
 require('@gravity-ui/icons');
 require('./debounce-8772fd80.js');
 require('./registerKeyset-f4ce9ee7.js');
+require('./divider-collapsed-153868e7.js');
 require('./Drawer.js');
 require('react-dom');
 
@@ -23,21 +26,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Simply usage of AsideHeader:
- * @example
- * <AsideHeader renderContent={renderContent} {...props} />
- *
- * Advanced usage of AsideHeader:
- * @example
- * <PageLayout reverse >
- *  <PageLayout.Content>
- *      <Content />
- *  </PageLayout.Content>
- *
- *  <PageLayoutAside {...props} />
- * </PageLayout>
- */
 const AsideHeader = React__default["default"].forwardRef((_a, ref) => {
     var { compact, className, topAlert } = _a, props = tslib_es6.__rest(_a, ["compact", "className", "topAlert"]);
     return (React__default["default"].createElement(PageLayout.PageLayout, { compact: compact, className: className, topAlert: topAlert },

package/build/cjs/AsideHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsideHeader.js","sources":["../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderProps} from './types';\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\n\n/**\n * Simply usage of AsideHeader:\n * @example\n * <AsideHeader renderContent={renderContent} {...props} />\n *\n * Advanced usage of AsideHeader:\n * @example\n * <PageLayout reverse >\n *  <PageLayout.Content>\n *      <Content />\n *  </PageLayout.Content>\n *\n *  <PageLayoutAside {...props} />\n * </PageLayout>\n */\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n    ({compact, className, topAlert, ...props}, ref) => {\n        return (\n            <PageLayout compact={compact} className={className} topAlert={topAlert}>\n                <PageLayoutAside ref={ref} {...props} />\n                <PageLayout.Content renderContent={props.renderContent} />\n            </PageLayout>\n        );\n    },\n);\n"],"names":["React","__rest","PageLayout","PageLayoutAside"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;AAcG;AACI,MAAM,WAAW,GAAGA,yBAAK,CAAC,UAAU,CACvC,CAAC,EAAwC,EAAE,GAAG,KAAI;QAAjD,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,KAAK,GAAvCC,gBAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAwC,CAAD,CAAA;AACpC,IAAA,QACID,yBAAA,CAAA,aAAA,CAACE,qBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAClE,QAAAF,yBAAA,CAAA,aAAA,CAACG,+BAAe,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EAAA,EAAM,KAAK,CAAI,CAAA;AACxC,QAAAH,yBAAA,CAAA,aAAA,CAACE,qBAAU,CAAC,OAAO,EAAA,EAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAA,CAAI,CACjD,EACf;AACN,CAAC;;;;"}
+{"version":3,"file":"AsideHeader.js","sources":["../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderProps} from './types';\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\n\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n    ({compact, className, topAlert, ...props}, ref) => {\n        return (\n            <PageLayout compact={compact} className={className} topAlert={topAlert}>\n                <PageLayoutAside ref={ref} {...props} />\n                <PageLayout.Content renderContent={props.renderContent} />\n            </PageLayout>\n        );\n    },\n);\n"],"names":["React","__rest","PageLayout","PageLayoutAside"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAW,GAAGA,yBAAK,CAAC,UAAU,CACvC,CAAC,EAAwC,EAAE,GAAG,KAAI;QAAjD,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,KAAK,GAAvCC,gBAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAwC,CAAD,CAAA;AACpC,IAAA,QACID,yBAAA,CAAA,aAAA,CAACE,qBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAClE,QAAAF,yBAAA,CAAA,aAAA,CAACG,+BAAe,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EAAA,EAAM,KAAK,CAAI,CAAA;AACxC,QAAAH,yBAAA,CAAA,aAAA,CAACE,qBAAU,CAAC,OAAO,EAAA,EAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAA,CAAI,CACjD,EACf;AACN,CAAC;;;;"}

package/build/cjs/Drawer.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ReactDOM = require('react-dom');
 var uikit = require('@gravity-ui/uikit');
-var styleInject_es = require('./style-inject.es-935afc04.js');
+var cn = require('./cn-1964a72a.js');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
 require('@bem-react/classname');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -3035,7 +3036,7 @@ SwitchTransition.defaultProps = {
 var css_248z = ".gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;height:100%;left:0;position:absolute;top:0;will-change:transform}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_right-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_right-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_right-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_right-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_right-exit-done{visibility:hidden}.gn-drawer__veil{background-color:var(--g-color-sfx-veil);bottom:0;left:0;position:absolute;right:0;top:0}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}";
 styleInject_es.styleInject(css_248z);
 
-const b = styleInject_es.block('drawer');
+const b = cn.block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, direction, className }) => {
     const itemRef = React__default["default"].useRef(null);