@gravity-ui/navigation 1.1.3 → 1.2.0

package/README.md

@@ -24,6 +24,33 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.
 - MobileHeaderFooterItem
 - Drawer
 - DrawerItem
+- PageLayout
+- PageLayoutAside
+
+## Optimization
+
+If your app content needs to be rendered faster than by passing it throw `AsideHeader` props,
+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})),
++);
+
+-    <AsideHeader renderContent={renderContent} {...restProps} />
++    <PageLayout reverse>
++        <PageLayout.Content>
++            <ContentExample />
++        </PageLayout.Content>
++
++        <Suspense fallback={null}>
++            <PageLayoutAside {...restProps} />
++        </Suspense>
++    </PageLayout>
+```
 
 ## Imports
 

package/build/cjs/ActionBar-393db3ea.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-935afc04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 ActionBarGroup = ({ children, className, pull }) => {
+    return (React__default["default"].createElement("ul", { className: b$4({ pull }, className), role: "group" }, children));
+};
+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 ActionBarItem = ({ children, className, pull, spacing = true }) => {
+    return React__default["default"].createElement("li", { className: b$3({ pull, spacing }, className) }, children);
+};
+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 ActionBarSection = ({ children, type = 'primary' }) => {
+    return React__default["default"].createElement("div", { className: b$2({ type }) }, children);
+};
+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 ActionBarSeparator = () => {
+    return React__default["default"].createElement("li", { role: "separator", className: b$1() });
+};
+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 ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
+    return (React__default["default"].createElement("section", { className: b(null, className), "aria-label": ariaLabel }, children));
+};
+ActionBar.displayName = 'ActionBar';
+const PublicActionBar = Object.assign(ActionBar, {
+    Section: ActionBarSection,
+    Group: ActionBarGroup,
+    Item: ActionBarItem,
+    Separator: ActionBarSeparator,
+});
+
+exports.PublicActionBar = PublicActionBar;
+//# sourceMappingURL=ActionBar-393db3ea.js.map

package/build/cjs/ActionBar-393db3ea.js.map

@@ -0,0 +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;;;;"}

package/build/cjs/AsideHeader.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-705c6589.js');
+var React = require('react');
+var PageLayout = require('./PageLayout.js');
+var PageLayoutAside = require('./PageLayoutAside.js');
+require('./AsideHeaderContext.js');
+require('./Content-64d5738a.js');
+require('./constants-9783dc2d.js');
+require('./utils-e82025ce.js');
+require('./style-inject.es-935afc04.js');
+require('@bem-react/classname');
+require('@gravity-ui/uikit');
+require('./Item-ff00938b.js');
+require('@gravity-ui/icons');
+require('./debounce-8772fd80.js');
+require('./registerKeyset-f4ce9ee7.js');
+require('./Drawer.js');
+require('react-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 } = _a, props = tslib_es6.__rest(_a, ["compact", "className"]);
+    return (React__default["default"].createElement(PageLayout.PageLayout, { compact: compact, className: className },
+        React__default["default"].createElement(PageLayoutAside.PageLayoutAside, Object.assign({ ref: ref }, props)),
+        React__default["default"].createElement(PageLayout.PageLayout.Content, { renderContent: props.renderContent })));
+});
+
+exports.AsideHeader = AsideHeader;
+//# sourceMappingURL=AsideHeader.js.map

package/build/cjs/AsideHeader.js.map

@@ -0,0 +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, ...props}, ref) => {\n        return (\n            <PageLayout compact={compact} className={className}>\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,EAA8B,EAAE,GAAG,KAAI;QAAvC,EAAC,OAAO,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,KAAK,GAAAC,gBAAA,CAAA,EAAA,EAA7B,wBAA8B,CAAD,CAAA;IAC1B,QACID,yBAAC,CAAA,aAAA,CAAAE,qBAAU,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAA;AAC9C,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/AsideHeaderContext.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const AsideHeaderInnerContext = React__default["default"].createContext(undefined);
+AsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';
+const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;
+const useAsideHeaderInnerContext = () => {
+    const contextValue = React__default["default"].useContext(AsideHeaderInnerContext);
+    if (contextValue === undefined) {
+        throw new Error(`AsideHeaderInnerContext is not initialized.
+        Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);
+    }
+    return contextValue;
+};
+const AsideHeaderContext = React__default["default"].createContext(undefined);
+AsideHeaderContext.displayName = 'AsideHeaderContext';
+const AsideHeaderContextProvider = AsideHeaderContext.Provider;
+const useAsideHeaderContext = () => {
+    const contextValue = React__default["default"].useContext(AsideHeaderContext);
+    if (contextValue === undefined) {
+        throw new Error(`AsideHeaderContext is not initialized.
+        Please check if you wrapped your component with AsideHeader
+        Context.Provider`);
+    }
+    return contextValue;
+};
+
+exports.AsideHeaderContext = AsideHeaderContext;
+exports.AsideHeaderContextProvider = AsideHeaderContextProvider;
+exports.AsideHeaderInnerContext = AsideHeaderInnerContext;
+exports.AsideHeaderInnerContextProvider = AsideHeaderInnerContextProvider;
+exports.useAsideHeaderContext = useAsideHeaderContext;
+exports.useAsideHeaderInnerContext = useAsideHeaderInnerContext;
+//# sourceMappingURL=AsideHeaderContext.js.map

package/build/cjs/AsideHeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsideHeaderContext.js","sources":["../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\nimport {MenuItem} from '../types';\nimport {AsideHeaderInnerProps} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n    menuItems: MenuItem[];\n    allPagesIsAvailable: boolean;\n    onItemClick: (\n        item: MenuItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLDivElement, MouseEvent>,\n    ) => void;\n}\n\nexport const AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n    undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n    const contextValue = React.useContext(AsideHeaderInnerContext);\n    if (contextValue === undefined) {\n        throw new Error(`AsideHeaderInnerContext is not initialized.\n        Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n    }\n    return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n    compact: boolean;\n    size: number;\n}\n\nexport const AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>(\n    undefined,\n);\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n    const contextValue = React.useContext(AsideHeaderContext);\n    if (contextValue === undefined) {\n        throw new Error(`AsideHeaderContext is not initialized.\n        Please check if you wrapped your component with AsideHeader\n        Context.Provider`);\n    }\n    return contextValue;\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAca,MAAA,uBAAuB,GAAGA,yBAAK,CAAC,aAAa,CACtD,SAAS,EACX;AACF,uBAAuB,CAAC,WAAW,GAAG,yBAAyB,CAAC;AAEnD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC,SAAS;AAEzE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAGA,yBAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC/D,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC,CAAC;AACtF,KAAA;AACD,IAAA,OAAO,YAAY,CAAC;AACxB,EAAE;AAOW,MAAA,kBAAkB,GAAGA,yBAAK,CAAC,aAAa,CACjD,SAAS,EACX;AACF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEzC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC,SAAS;AAE/D,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAGA,yBAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC1D,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC,CAAC;AACtB,KAAA;AACD,IAAA,OAAO,YAAY,CAAC;AACxB;;;;;;;;;"}

package/build/cjs/Content-64d5738a.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/* Used by renderContent AsideHeader prop */
+const RenderContent = React__default["default"].memo(({ renderContent, size }) => {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, renderContent({ size }));
+});
+RenderContent.displayName = 'RenderContent';
+const Content = ({ size, // TODO: move to context when MobileHeader will support it
+className, cssSizeVariableName = '--gn-aside-header-size', renderContent, children, }) => {
+    return (React__default["default"].createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' ? (React__default["default"].createElement(RenderContent, { size: size, renderContent: renderContent })) : (children)));
+};
+
+exports.Content = Content;
+//# sourceMappingURL=Content-64d5738a.js.map

package/build/cjs/Content-64d5738a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content-64d5738a.js","sources":["../../../src/components/Content/Content.tsx"],"sourcesContent":["/* Used by renderContent AsideHeader prop */\n\nimport React from 'react';\n\nexport type RenderContentType = (data: {size: number}) => React.ReactNode;\n\nexport interface ContentProps {\n    size: number;\n    className?: string;\n    cssSizeVariableName?: string;\n    renderContent?: RenderContentType;\n}\n\ninterface RenderContentProps {\n    renderContent: RenderContentType;\n    size: number;\n}\n\nconst RenderContent: React.FC<RenderContentProps> = React.memo(({renderContent, size}) => {\n    return <React.Fragment>{renderContent({size})}</React.Fragment>;\n});\n\nRenderContent.displayName = 'RenderContent';\n\nexport const Content: React.FC<ContentProps> = ({\n    size, // TODO: move to context when MobileHeader will support it\n    className,\n    cssSizeVariableName = '--gn-aside-header-size',\n    renderContent,\n    children,\n}) => {\n    return (\n        <div\n            className={className}\n            style={{...({[cssSizeVariableName]: `${size}px`} as React.CSSProperties)}}\n        >\n            {typeof renderContent === 'function' ? (\n                <RenderContent size={size} renderContent={renderContent} />\n            ) : (\n                children\n            )}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAAA;AAkBA,MAAM,aAAa,GAAiCA,yBAAK,CAAC,IAAI,CAAC,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,KAAI;AACrF,IAAA,OAAOA,yBAAC,CAAA,aAAA,CAAAA,yBAAK,CAAC,QAAQ,EAAE,IAAA,EAAA,aAAa,CAAC,EAAC,IAAI,EAAC,CAAC,CAAkB,CAAC;AACpE,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;MAE/B,OAAO,GAA2B,CAAC,EAC5C,IAAI;AACJ,SAAS,EACT,mBAAmB,GAAG,wBAAwB,EAC9C,aAAa,EACb,QAAQ,GACX,KAAI;IACD,QACIA,iDACI,SAAS,EAAE,SAAS,EACpB,KAAK,oBAAO,EAAC,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAA,EAAA,CAAI,EAAyB,CAEvE,EAAA,EAAA,OAAO,aAAa,KAAK,UAAU,IAChCA,wCAAC,aAAa,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAI,CAAA,KAE3D,QAAQ,CACX,CACC,EACR;AACN;;;;"}