@gravity-ui/navigation 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var CompositeBar = require('../../CompositeBar/CompositeBar.js');
+var Logo = require('../../Logo/Logo.js');
+var constants = require('../../constants.js');
+var AsideHeaderContext = require('../AsideHeaderContext.js');
+var utils = require('../utils.js');
+var dividerCollapsed = require('../../../assets/icons/divider-collapsed.svg.js');
+
+const DEFAULT_SUBHEADER_ITEMS = [];
+const Header = () => {
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    const onLogoClick = React.useCallback((event) => {
+        var _a;
+        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+        (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
+    }, [onClosePanel, logo]);
+    return (React.createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
+        logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
+        React.createElement(CompositeBar.CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        headerDecoration && (React.createElement(uikit.Icon, { data: dividerCollapsed, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT }))));
+};
+
+exports.Header = Header;
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +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 {CompositeBar} from '../../CompositeBar/CompositeBar';\nimport {Logo} from '../../Logo';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {SubheaderMenuItem} from '../../types';\nimport {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: SubheaderMenuItem[] = [];\n\nexport const Header = () => {\n    const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =\n        useAsideHeaderInnerContext();\n    const {compact} = useAsideHeaderContext();\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            {logo && (\n                <Logo\n                    {...logo}\n                    onClick={onLogoClick}\n                    compact={compact}\n                    buttonClassName={b('logo-button')}\n                    iconPlaceClassName={b('logo-icon-place')}\n                />\n            )}\n\n            <CompositeBar\n                type=\"subheader\"\n                items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}\n                onItemClick={onItemClick}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={ASIDE_HEADER_COMPACT_WIDTH}\n                    height={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","useAsideHeaderContext","useCallback","b","Logo","CompositeBar","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;AAaA,MAAM,uBAAuB,GAAwB,EAAE;AAEhD,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAC,GACrEA,6CAA0B,EAAE;AAChC,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGC,wCAAqB,EAAE;AAEzC,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACD,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,EACT,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,IAAI,EAAEC,gBAA0B,EAChC,SAAS,EAAEJ,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEK,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

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

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

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

@@ -0,0 +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\nexport interface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxB,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,IAAI,EAAEC,gBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var Content = require('../../../Content/Content.js');
+var constants = require('../../../constants.js');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
+var utils = require('../../utils.js');
+require('../../AsideHeader.scss.js');
+
+const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('../../../TopAlert/index.js'); }).then((module) => ({ default: module.TopAlert })));
+const Layout = ({ compact, className, children, topAlert }) => {
+    const size = compact ? constants.ASIDE_HEADER_COMPACT_WIDTH : constants.ASIDE_HEADER_EXPANDED_WIDTH;
+    const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
+    return (React.createElement(AsideHeaderContext.AsideHeaderContextProvider, { value: asideHeaderContextValue },
+        React.createElement("div", { className: utils.b({ compact }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+            topAlert && (React.createElement(React.Suspense, { fallback: null },
+                React.createElement(TopAlert, { className: utils.b('top-alert'), alert: topAlert }))),
+            React.createElement("div", { className: utils.b('pane-container') }, children))));
+};
+const ConnectedContent = ({ children, renderContent, }) => {
+    const { size } = AsideHeaderContext.useAsideHeaderContext();
+    return (React.createElement(Content.Content, { size: size, className: utils.b('content'), renderContent: renderContent }, children));
+};
+const PageLayout = Object.assign(Layout, {
+    Content: ConnectedContent,
+});
+
+exports.PageLayout = PageLayout;
+//# sourceMappingURL=PageLayout.js.map

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

@@ -0,0 +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 {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nimport '../../AsideHeader.scss';\n\nconst TopAlert = React.lazy(() =>\n    import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {}\n\nconst Layout = ({compact, className, children, topAlert}: PageLayoutProps) => {\n    const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;\n    const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);\n\n    return (\n        <AsideHeaderContextProvider value={asideHeaderContextValue}>\n            <div\n                className={b({compact}, className)}\n                style={{\n                    ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n                }}\n            >\n                {topAlert && (\n                    <Suspense fallback={null}>\n                        <TopAlert className={b('top-alert')} alert={topAlert} />\n                    </Suspense>\n                )}\n                <div className={b('pane-container')}>{children}</div>\n            </div>\n        </AsideHeaderContextProvider>\n    );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n    children,\n    renderContent,\n}) => {\n    const {size} = useAsideHeaderContext();\n\n    return (\n        <Content size={size} className={b('content')} renderContent={renderContent}>\n            {children}\n        </Content>\n    );\n};\n\nconst PageLayout = Object.assign(Layout, {\n    Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["ASIDE_HEADER_COMPACT_WIDTH","ASIDE_HEADER_EXPANDED_WIDTH","useMemo","AsideHeaderContextProvider","b","Suspense","useAsideHeaderContext","Content"],"mappings":";;;;;;;;;AAUA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MACxB,oDAAO,4BAAmB,KAAC,CAAC,IAAI,CAAC,CAAC,MAAM,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAC,CAAC,CAAC,CAC7E;AAID,MAAM,MAAM,GAAG,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAkB,KAAI;IACzE,MAAM,IAAI,GAAG,OAAO,GAAGA,oCAA0B,GAAGC,qCAA2B;IAC/E,MAAM,uBAAuB,GAAGC,aAAO,CAAC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAEjF,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,6CAA0B,EAAC,EAAA,KAAK,EAAE,uBAAuB,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,OAAC,CAAC,EAAC,OAAO,EAAC,EAAE,SAAS,CAAC,EAClC,KAAK,oBACG,EAAC,wBAAwB,EAAE,CAAG,EAAA,IAAI,IAAI,EAAyB,CAAA,EAAA;AAGtE,YAAA,QAAQ,KACL,KAAA,CAAA,aAAA,CAACC,cAAQ,EAAC,EAAA,QAAQ,EAAE,IAAI,EAAA;AACpB,gBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAED,OAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,CAAI,CACjD,CACd;AACD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,gBAAgB,CAAC,EAAG,EAAA,QAAQ,CAAO,CACnD,CACmB;AAErC,CAAC;AAED,MAAM,gBAAgB,GAAqE,CAAC,EACxF,QAAQ,EACR,aAAa,GAChB,KAAI;AACD,IAAA,MAAM,EAAC,IAAI,EAAC,GAAGE,wCAAqB,EAAE;IAEtC,QACI,oBAACC,eAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAEH,OAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,aAAa,EACrE,EAAA,QAAQ,CACH;AAElB,CAAC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACrC,IAAA,OAAO,EAAE,gBAAgB;AAC5B,CAAA;;;;"}

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+var FirstPanel = require('../FirstPanel.js');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
+var useAsideHeaderInnerContextValue = require('../../useAsideHeaderInnerContextValue.js');
+
+const PageLayoutAside = React.forwardRef((props, ref) => {
+    const { size, compact } = AsideHeaderContext.useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue.useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
+    return (React.createElement(AsideHeaderContext.AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
+        React.createElement(FirstPanel.FirstPanel, { ref: ref })));
+});
+PageLayoutAside.displayName = 'PageLayoutAside';
+
+exports.PageLayoutAside = PageLayoutAside;
+//# sourceMappingURL=PageLayoutAside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayoutAside.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport {FirstPanel} from '..';\nimport {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {AsideHeaderProps} from '../../types';\nimport {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue';\n\ntype Props = Omit<AsideHeaderProps, 'compact' | 'size'>;\n\nexport const PageLayoutAside = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n    const {size, compact} = useAsideHeaderContext();\n\n    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({size, compact, ...props});\n\n    return (\n        <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>\n            <FirstPanel ref={ref} />\n        </AsideHeaderInnerContextProvider>\n    );\n});\n\nPageLayoutAside.displayName = 'PageLayoutAside';\n"],"names":["useAsideHeaderContext","useAsideHeaderInnerContextValue","AsideHeaderInnerContextProvider","FirstPanel"],"mappings":";;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,KAAI;IAClF,MAAM,EAAC,IAAI,EAAE,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAE/C,MAAM,4BAA4B,GAAGC,+DAA+B,CAAE,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,OAAO,EAAA,EAAK,KAAK,CAAA,CAAE;AAE/F,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,kDAA+B,EAAC,EAAA,KAAK,EAAE,4BAA4B,EAAA;QAChE,KAAC,CAAA,aAAA,CAAAC,qBAAU,IAAC,GAAG,EAAE,GAAG,EAAI,CAAA,CACM;AAE1C,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var Drawer = require('../../Drawer/Drawer.js');
+var AsideHeaderContext = require('../AsideHeaderContext.js');
+var utils = require('../utils.js');
+
+const Panels = () => {
+    const { panelItems, onClosePanel, size } = AsideHeaderContext.useAsideHeaderInnerContext();
+    return panelItems ? (React.createElement(Drawer.Drawer, { className: utils.b('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(Drawer.DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
+};
+
+exports.Panels = Panels;
+//# sourceMappingURL=Panels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panels.js","sources":["../../../../../../src/components/AsideHeader/components/Panels.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Drawer, DrawerItem} from '../../Drawer/Drawer';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nexport const Panels = () => {\n    const {panelItems, onClosePanel, size} = useAsideHeaderInnerContext();\n\n    return panelItems ? (\n        <Drawer\n            className={b('panels')}\n            onVeilClick={onClosePanel}\n            onEscape={onClosePanel}\n            style={{left: size}}\n        >\n            {panelItems.map((item) => (\n                <DrawerItem key={item.id} {...item} />\n            ))}\n        </Drawer>\n    ) : null;\n};\n"],"names":["useAsideHeaderInnerContext","Drawer","b","DrawerItem"],"mappings":";;;;;;;AAMO,MAAM,MAAM,GAAG,MAAK;IACvB,MAAM,EAAC,UAAU,EAAE,YAAY,EAAE,IAAI,EAAC,GAAGA,6CAA0B,EAAE;AAErE,IAAA,OAAO,UAAU,IACb,KAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACH,SAAS,EAAEC,OAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,YAAY,EACzB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EAElB,EAAA,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,KAAA,CAAA,aAAA,CAACC,iBAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAA,EAAM,IAAI,CAAA,CAAI,CACzC,CAAC,CACG,IACT,IAAI;AACZ;;;;"}

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

@@ -1,2 +1 @@
 export { FirstPanel } from './FirstPanel';
-export { TopPanel } from './TopPanel';

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var button_collapse = "Collapse";
+var button_expand = "Expand";
+var label_more = "More";
+var en = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+exports.button_collapse = button_collapse;
+exports.button_expand = button_expand;
+exports.default = en;
+exports.label_more = label_more;
+//# sourceMappingURL=en.json.js.map

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

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

package/build/cjs/components/AsideHeader/i18n/index.d.ts

@@ -1,2 +1,6 @@
-declare const _default: (key: "button_collapse" | "button_expand" | "label_more", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: ((key: "button_collapse" | "button_expand" | "label_more", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "gn-AsideHeader": Record<"button_collapse" | "button_expand" | "label_more", import("@gravity-ui/i18n").KeyData>;
+    };
+};
 export default _default;

package/build/cjs/components/AsideHeader/i18n/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var i18n$1 = require('@gravity-ui/uikit/i18n');
+var cn = require('../../utils/cn.js');
+var en = require('./en.json.js');
+var ru = require('./ru.json.js');
+
+const COMPONENT = 'AsideHeader';
+var i18n = i18n$1.addComponentKeysets({ en: en.default, ru: ru.default }, `${cn.NAMESPACE}${COMPONENT}`);
+
+module.exports = i18n;
+//# sourceMappingURL=index.js.map

package/build/cjs/components/AsideHeader/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/AsideHeader/i18n/index.ts"],"sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst COMPONENT = 'AsideHeader';\nexport default addComponentKeysets({en, ru}, `${NAMESPACE}${COMPONENT}`);\n"],"names":["addComponentKeysets","en","ru","NAMESPACE"],"mappings":";;;;;;;AAOA,MAAM,SAAS,GAAG,aAAa;AAC/B,WAAeA,0BAAmB,CAAC,MAACC,UAAE,MAAEC,UAAE,EAAC,EAAE,CAAA,EAAGC,YAAS,CAAA,EAAG,SAAS,CAAA,CAAE,CAAC;;;;"}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var button_collapse = "Свернуть";
+var button_expand = "Развернуть";
+var label_more = "Ещё";
+var ru = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+exports.button_collapse = button_collapse;
+exports.button_expand = button_expand;
+exports.default = ru;
+exports.label_more = label_more;
+//# sourceMappingURL=ru.json.js.map

package/build/cjs/components/AsideHeader/i18n/ru.json.js.map

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

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

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 import { QAProps } from '@gravity-ui/uikit';
 import { RenderContentType } from '../Content';
 import { DrawerItemProps } from '../Drawer/Drawer';
-import { AsideHeaderTopAlertProps, LogoProps, MenuItem, OpenModalSubscriber, SubheaderMenuItem } from '../types';
+import { LogoProps, MenuItem, OpenModalSubscriber, SubheaderMenuItem, TopAlertProps } from '../types';
 import { AsideHeaderContextType } from './AsideHeaderContext';
 export interface LayoutProps {
     compact: boolean;
     className?: string;
-    topAlert?: AsideHeaderTopAlertProps;
+    topAlert?: TopAlertProps;
 }
 export interface EditMenuProps {
     onOpenEditMode?: () => void;
@@ -23,7 +22,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
     collapseTitle?: string;
     expandTitle?: string;
     menuMoreTitle?: string;
-    topAlert?: AsideHeaderTopAlertProps;
+    topAlert?: TopAlertProps;
     customBackground?: React.ReactNode;
     customBackgroundClassName?: string;
     hideCollapseButton?: boolean;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+exports.InnerPanels = void 0;
+(function (InnerPanels) {
+    InnerPanels["AllPages"] = "all-pages";
+})(exports.InnerPanels || (exports.InnerPanels = {}));
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import {QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {DrawerItemProps} from '../Drawer/Drawer';\nimport {LogoProps, MenuItem, OpenModalSubscriber, SubheaderMenuItem, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\nexport interface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: MenuItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: MenuItem, oldIndex: number, newIndex: number) => void;\n}\n\nexport interface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    multipleTooltip?: boolean;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\nexport interface AsideHeaderDefaultProps {\n    panelItems?: DrawerItemProps[];\n    subheaderItems?: SubheaderMenuItem[];\n    menuItems?: MenuItem[];\n    defaultMenuItems?: MenuItem[];\n    onMenuItemsChanged?: (items: MenuItem[]) => void;\n    headerDecoration?: boolean;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n"],"names":["InnerPanels"],"mappings":";;AAiEYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;;"}

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var AllPagesPanel = require('../AllPagesPanel/AllPagesPanel.js');
+var constants = require('../AllPagesPanel/constants.js');
+require('./AsideHeaderContext.js');
+var types = require('./types.js');
+
+const EMPTY_MENU_ITEMS = [];
+const useAsideHeaderInnerContextValue = (props) => {
+    const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
+    const [innerVisiblePanel, setInnerVisiblePanel] = React.useState();
+    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {
+        return constants.getAllPagesMenuItem();
+    }, []);
+    const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === undefined ? undefined : menuItems.length) > 0);
+    React.useEffect(() => {
+        // If any user panel became visible we need to switch off all inner panels
+        if (panelItems === null || panelItems === undefined ? undefined : panelItems.some((x) => x.visible)) {
+            setInnerVisiblePanel(undefined);
+        }
+    }, [panelItems]);
+    const innerOnClosePanel = React.useCallback(() => {
+        setInnerVisiblePanel(undefined);
+        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+    }, [onClosePanel]);
+    const onItemClick = React.useCallback((item, collapsed, event) => {
+        var _a;
+        if (item.id === ALL_PAGES_MENU_ITEM.id) {
+            onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+            setInnerVisiblePanel((prev) => prev === types.InnerPanels.AllPages ? undefined : types.InnerPanels.AllPages);
+        }
+        else {
+            innerOnClosePanel();
+        }
+        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
+    }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
+    const innerMenuItems = React.useMemo(() => allPagesIsAvailable
+        ? [
+            ...(menuItems || EMPTY_MENU_ITEMS),
+            Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === types.InnerPanels.AllPages, onItemClick: onAllPagesClick }),
+        ]
+        : menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick]);
+    const innerPanelItems = React.useMemo(() => {
+        if (!allPagesIsAvailable) {
+            return panelItems;
+        }
+        return [
+            ...(panelItems || []),
+            {
+                id: types.InnerPanels.AllPages,
+                content: React.createElement(AllPagesPanel.AllPagesPanel, null),
+                visible: innerVisiblePanel === types.InnerPanels.AllPages,
+            },
+        ];
+    }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
+    return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
+        onItemClick });
+};
+
+exports.useAsideHeaderInnerContextValue = useAsideHeaderInnerContextValue;
+//# sourceMappingURL=useAsideHeaderInnerContextValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAsideHeaderInnerContextValue.js","sources":["../../../../../src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {AllPagesPanel, getAllPagesMenuItem} from '../AllPagesPanel';\nimport {MenuItem} from '../types';\n\nimport {AsideHeaderInnerContextType} from './AsideHeaderContext';\nimport {AsideHeaderProps, InnerPanels} from './types';\n\nconst EMPTY_MENU_ITEMS: MenuItem[] = [];\n\nexport const useAsideHeaderInnerContextValue = (\n    props: AsideHeaderProps & {size: number},\n): AsideHeaderInnerContextType => {\n    const {size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick} = props;\n    const [innerVisiblePanel, setInnerVisiblePanel] = useState<InnerPanels | undefined>();\n    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {\n        return getAllPagesMenuItem();\n    }, []);\n\n    const allPagesIsAvailable =\n        Boolean(onMenuItemsChanged) && (!menuItems || menuItems?.length > 0);\n\n    useEffect(() => {\n        // If any user panel became visible we need to switch off all inner panels\n        if (panelItems?.some((x) => x.visible)) {\n            setInnerVisiblePanel(undefined);\n        }\n    }, [panelItems]);\n\n    const innerOnClosePanel = useCallback(() => {\n        setInnerVisiblePanel(undefined);\n        onClosePanel?.();\n    }, [onClosePanel]);\n\n    const onItemClick = useCallback(\n        (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (item.id === ALL_PAGES_MENU_ITEM.id) {\n                onClosePanel?.();\n                setInnerVisiblePanel((prev) =>\n                    prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages,\n                );\n            } else {\n                innerOnClosePanel();\n            }\n            item.onItemClick?.(item, collapsed, event);\n        },\n        [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel],\n    );\n\n    const innerMenuItems = useMemo(\n        () =>\n            allPagesIsAvailable\n                ? [\n                      ...(menuItems || EMPTY_MENU_ITEMS),\n                      {\n                          ...ALL_PAGES_MENU_ITEM,\n                          current: innerVisiblePanel === InnerPanels.AllPages,\n                          onItemClick: onAllPagesClick,\n                      },\n                  ]\n                : menuItems || EMPTY_MENU_ITEMS,\n        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick],\n    );\n\n    const innerPanelItems = useMemo(() => {\n        if (!allPagesIsAvailable) {\n            return panelItems;\n        }\n        return [\n            ...(panelItems || []),\n            {\n                id: InnerPanels.AllPages,\n                content: <AllPagesPanel />,\n                visible: innerVisiblePanel === InnerPanels.AllPages,\n            },\n        ];\n    }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);\n\n    return {\n        ...props,\n        onClosePanel: innerOnClosePanel,\n        allPagesIsAvailable,\n        menuItems: innerMenuItems,\n        panelItems: innerPanelItems,\n        size,\n        onItemClick,\n    };\n};\n"],"names":["useState","getAllPagesMenuItem","useEffect","useCallback","InnerPanels","useMemo","AllPagesPanel"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+var cn = require('../utils/cn.js');
+
+const b = cn.block('aside-header');
+
+exports.b = b;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/AsideHeader/utils.ts"],"sourcesContent":["import {block} from '../utils/cn';\n\nexport const b = block('aside-header');\n"],"names":["block"],"mappings":";;;;MAEa,CAAC,GAAGA,QAAK,CAAC,cAAc;;;;"}

package/build/cjs/components/CompositeBar/CompositeBar.d.ts

@@ -10,7 +10,7 @@ type CompositeBarItems = {
     items: SubheaderMenuItem[];
 };
 export type CompositeBarProps = CompositeBarItems & {
-    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     multipleTooltip?: boolean;
     menuMoreTitle?: string;
     onMoreClick?: () => void;

package/build/cjs/components/CompositeBar/CompositeBar.js

@@ -0,0 +1,154 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var reactVirtualizedAutoSizer_esm = require('../../node_modules/react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.esm.js');
+var AsideHeaderContext = require('../AsideHeader/AsideHeaderContext.js');
+var constants = require('../constants.js');
+var cn = require('../utils/cn.js');
+var Item = require('./Item/Item.js');
+var MultipleTooltip = require('./MultipleTooltip/MultipleTooltip.js');
+var MultipleTooltipContext = require('./MultipleTooltip/MultipleTooltipContext.js');
+var constants$1 = require('./constants.js');
+var utils = require('./utils.js');
+require('./CompositeBar.scss.js');
+
+const b = cn.block('composite-bar');
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, }) => {
+    const ref = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext.MultipleTooltipContext);
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    React.useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({ active: false });
+            }
+        }
+        window.addEventListener('blur', handleBlurWindow);
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onTooltipMouseEnter = React.useCallback((e) => {
+        if (multipleTooltip &&
+            compact &&
+            !multipleTooltipActive &&
+            document.hasFocus() &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= constants.ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: true,
+            });
+        }
+    }, [
+        multipleTooltip,
+        compact,
+        multipleTooltipActive,
+        activeIndex,
+        lastClickedItemIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onTooltipMouseLeave = React.useCallback(() => {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = React.useCallback((itemIndex) => () => {
+        if (multipleTooltip && document.hasFocus()) {
+            let multipleTooltipActiveValue = multipleTooltipActive;
+            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
+                multipleTooltipActiveValue = true;
+            }
+            if (activeIndex === itemIndex &&
+                multipleTooltipActive === multipleTooltipActiveValue) {
+                return;
+            }
+            setMultipleTooltipContextValue({
+                activeIndex: itemIndex,
+                active: multipleTooltipActiveValue,
+            });
+        }
+    }, [
+        multipleTooltip,
+        multipleTooltipActive,
+        lastClickedItemIndex,
+        activeIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onMouseLeave = React.useCallback(() => {
+        var _a;
+        if (compact && document.hasFocus()) {
+            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
+            if (multipleTooltip &&
+                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
+                setMultipleTooltipContextValue({
+                    activeIndex: undefined,
+                    lastClickedItemIndex: undefined,
+                });
+            }
+        }
+    }, [
+        activeIndex,
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        setMultipleTooltipContextValue,
+    ]);
+    const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== constants$1.COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
+        }
+        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
+    }, [
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        onItemClick,
+        setMultipleTooltipContextValue,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React.createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? utils.getSelectedItemIndex(items) : undefined, itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, itemClassName: b('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+                    const itemExtraProps = utils.isMenuItem(item) ? { item } : item;
+                    const enableTooltip = utils.isMenuItem(item)
+                        ? !multipleTooltip
+                        : item.enableTooltip;
+                    return (React.createElement(Item.Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), onCollapseItemClick: onMoreClick, collapseItems: collapseItems })));
+                } })),
+        type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip.MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+};
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    let node;
+    if (type === 'menu') {
+        const minHeight = utils.getItemsMinHeight(items);
+        const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
+        node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React.createElement(reactVirtualizedAutoSizer_esm, null, (size) => {
+            const width = Number.isNaN(size.width) ? 0 : size.width;
+            const height = Number.isNaN(size.height) ? 0 : size.height;
+            const { listItems, collapseItems } = utils.getAutosizeListItems(items, height, collapseItem);
+            return (React.createElement("div", { style: { width, height } },
+                React.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React.createElement("div", { className: b({ subheader: true }) },
+            React.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
+    }
+    return React.createElement(MultipleTooltipContext.MultipleTooltipProvider, null, node);
+};
+
+exports.CompositeBar = CompositeBar;
+//# sourceMappingURL=CompositeBar.js.map

package/build/cjs/components/CompositeBar/CompositeBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeBar.js","sources":["../../../../../src/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useContext, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';\nimport {ASIDE_HEADER_COMPACT_WIDTH} from '../constants';\nimport {MenuItem, SubheaderMenuItem} from '../types';\nimport {block} from '../utils/cn';\n\nimport {Item, ItemProps} from './Item/Item';\nimport {MultipleTooltip, MultipleTooltipContext, MultipleTooltipProvider} from './MultipleTooltip';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {\n    getAutosizeListItems,\n    getItemHeight,\n    getItemsHeight,\n    getItemsMinHeight,\n    getMoreButtonItem,\n    getSelectedItemIndex,\n    isMenuItem,\n} from './utils';\n\nimport './CompositeBar.scss';\n\nconst b = block('composite-bar');\n\nexport type CompositeBarItem = MenuItem | SubheaderMenuItem;\n\ntype CompositeBarItems =\n    | {type: 'menu'; items: MenuItem[]}\n    | {type: 'subheader'; items: SubheaderMenuItem[]};\n\nexport type CompositeBarProps = CompositeBarItems & {\n    onItemClick?: (\n        item: MenuItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    multipleTooltip?: boolean;\n    menuMoreTitle?: string;\n    onMoreClick?: () => void;\n};\n\ntype CompositeBarViewProps = CompositeBarProps & {\n    collapseItems?: MenuItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    collapseItems,\n    multipleTooltip = false,\n}) => {\n    const ref = useRef<List<CompositeBarItem>>(null);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n\n    const {\n        setValue: setMultipleTooltipContextValue,\n        active: multipleTooltipActive,\n        activeIndex,\n        lastClickedItemIndex,\n    } = useContext(MultipleTooltipContext);\n    const {compact} = useAsideHeaderContext();\n\n    React.useEffect(() => {\n        function handleBlurWindow() {\n            if (multipleTooltip && multipleTooltipActive) {\n                setMultipleTooltipContextValue({active: false});\n            }\n        }\n\n        window.addEventListener('blur', handleBlurWindow);\n\n        return () => {\n            window.removeEventListener('blur', handleBlurWindow);\n        };\n    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);\n\n    const onTooltipMouseEnter = useCallback(\n        (e: {clientX: number}) => {\n            if (\n                multipleTooltip &&\n                compact &&\n                !multipleTooltipActive &&\n                document.hasFocus() &&\n                activeIndex !== lastClickedItemIndex &&\n                e.clientX <= ASIDE_HEADER_COMPACT_WIDTH\n            ) {\n                setMultipleTooltipContextValue?.({\n                    active: true,\n                });\n            }\n        },\n        [\n            multipleTooltip,\n            compact,\n            multipleTooltipActive,\n            activeIndex,\n            lastClickedItemIndex,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    const onTooltipMouseLeave = useCallback(() => {\n        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {\n            setMultipleTooltipContextValue?.({\n                active: false,\n                lastClickedItemIndex: undefined,\n            });\n        }\n    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);\n\n    const onMouseEnterByIndex = useCallback(\n        (itemIndex: number) => () => {\n            if (multipleTooltip && document.hasFocus()) {\n                let multipleTooltipActiveValue = multipleTooltipActive;\n                if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {\n                    multipleTooltipActiveValue = true;\n                }\n                if (\n                    activeIndex === itemIndex &&\n                    multipleTooltipActive === multipleTooltipActiveValue\n                ) {\n                    return;\n                }\n                setMultipleTooltipContextValue({\n                    activeIndex: itemIndex,\n                    active: multipleTooltipActiveValue,\n                });\n            }\n        },\n        [\n            multipleTooltip,\n            multipleTooltipActive,\n            lastClickedItemIndex,\n            activeIndex,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    const onMouseLeave = useCallback(() => {\n        if (compact && document.hasFocus()) {\n            ref.current?.activateItem(undefined as unknown as number);\n            if (\n                multipleTooltip &&\n                (activeIndex !== undefined || lastClickedItemIndex !== undefined)\n            ) {\n                setMultipleTooltipContextValue({\n                    activeIndex: undefined,\n                    lastClickedItemIndex: undefined,\n                });\n            }\n        }\n    }, [\n        activeIndex,\n        compact,\n        lastClickedItemIndex,\n        multipleTooltip,\n        setMultipleTooltipContextValue,\n    ]);\n\n    const onItemClickByIndex = useCallback(\n        (itemIndex: number): ItemProps['onItemClick'] =>\n            (item, collapsed, event) => {\n                if (\n                    compact &&\n                    multipleTooltip &&\n                    itemIndex !== lastClickedItemIndex &&\n                    item.id !== COLLAPSE_ITEM_ID\n                ) {\n                    setMultipleTooltipContextValue({\n                        lastClickedItemIndex: itemIndex,\n                        active: false,\n                    });\n                }\n                onItemClick?.(item, collapsed, event);\n            },\n        [\n            compact,\n            lastClickedItemIndex,\n            multipleTooltip,\n            onItemClick,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    return (\n        <React.Fragment>\n            <div\n                ref={tooltipRef}\n                onMouseEnter={onTooltipMouseEnter}\n                onMouseLeave={onTooltipMouseLeave}\n            >\n                <List<CompositeBarItem>\n                    ref={ref}\n                    items={items}\n                    selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n                    itemHeight={getItemHeight}\n                    itemsHeight={getItemsHeight}\n                    itemClassName={b('root-menu-item')}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item, _isItemActive, itemIndex) => {\n                        const itemExtraProps = isMenuItem(item) ? {item} : item;\n                        const enableTooltip = isMenuItem(item)\n                            ? !multipleTooltip\n                            : item.enableTooltip;\n\n                        return (\n                            <Item\n                                {...itemExtraProps}\n                                enableTooltip={enableTooltip}\n                                onMouseEnter={onMouseEnterByIndex(itemIndex)}\n                                onMouseLeave={onMouseLeave}\n                                onItemClick={onItemClickByIndex(itemIndex)}\n                                onCollapseItemClick={onMoreClick}\n                                collapseItems={collapseItems}\n                            />\n                        );\n                    }}\n                />\n            </div>\n            {type === 'menu' && multipleTooltip && (\n                <MultipleTooltip\n                    open={compact && multipleTooltipActive}\n                    anchorRef={tooltipRef}\n                    placement={['right-start']}\n                    items={items}\n                />\n            )}\n        </React.Fragment>\n    );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n    type,\n    items,\n    menuMoreTitle,\n    onItemClick,\n    onMoreClick,\n    multipleTooltip = false,\n}) => {\n    if (items.length === 0) {\n        return null;\n    }\n    let node: ReactNode;\n\n    if (type === 'menu') {\n        const minHeight = getItemsMinHeight(items);\n        const collapseItem = getMoreButtonItem(menuMoreTitle);\n        node = (\n            <div className={b({autosizer: true})} style={{minHeight}}>\n                {items.length !== 0 && (\n                    <AutoSizer>\n                        {(size: Size) => {\n                            const width = Number.isNaN(size.width) ? 0 : size.width;\n                            const height = Number.isNaN(size.height) ? 0 : size.height;\n\n                            const {listItems, collapseItems} = getAutosizeListItems(\n                                items,\n                                height,\n                                collapseItem,\n                            );\n                            return (\n                                <div style={{width, height}}>\n                                    <CompositeBarView\n                                        type=\"menu\"\n                                        items={listItems}\n                                        onItemClick={onItemClick}\n                                        onMoreClick={onMoreClick}\n                                        collapseItems={collapseItems}\n                                        multipleTooltip={multipleTooltip}\n                                    />\n                                </div>\n                            );\n                        }}\n                    </AutoSizer>\n                )}\n            </div>\n        );\n    } else {\n        node = (\n            <div className={b({subheader: true})}>\n                <CompositeBarView type=\"subheader\" items={items} onItemClick={onItemClick} />\n            </div>\n        );\n    }\n    return <MultipleTooltipProvider>{node}</MultipleTooltipProvider>;\n};\n"],"names":["block","useRef","useContext","MultipleTooltipContext","useAsideHeaderContext","useCallback","ASIDE_HEADER_COMPACT_WIDTH","COLLAPSE_ITEM_ID","List","getSelectedItemIndex","getItemHeight","getItemsHeight","isMenuItem","Item","MultipleTooltip","getItemsMinHeight","getMoreButtonItem","AutoSizer","getAutosizeListItems","MultipleTooltipProvider"],"mappings":"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"}

package/build/cjs/components/CompositeBar/CompositeBar.scss.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CompositeBar.scss.js.map

package/build/cjs/components/CompositeBar/CompositeBar.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeBar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts

@@ -3,7 +3,7 @@ import './HighlightedItem.scss';
 interface ItemInnerProps {
     iconRef: React.RefObject<HTMLDivElement>;
     iconNode: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     onClickCapture?: (event: React.SyntheticEvent) => void;
 }
 export declare const HighlightedItem: React.FC<ItemInnerProps>;