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

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.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.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var debounce = require('../../../_virtual/debounce.js');
+var AsideHeaderContext = require('../../AsideHeader/AsideHeaderContext.js');
+var cn = require('../../utils/cn.js');
+require('./HighlightedItem.scss.js');
+
+const b = cn.block('composite-bar-highlighted-item');
+const DEBOUNCE_TIME = 200;
+const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
+    const { openModalSubscriber } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const [{ top, left, width, height }, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const handleResizeDebounced = React.useMemo(() => debounce(() => {
+        var _a;
+        const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === undefined ? undefined : iconRef.current) === null || _a === undefined ? undefined : _a.getBoundingClientRect()) || {};
+        setPosition({
+            top: top + window.scrollY,
+            left: left + window.scrollX,
+            width,
+            height,
+        });
+    }, DEBOUNCE_TIME, { leading: true }), [iconRef]);
+    const handleResize = React.useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
+    React.useEffect(() => {
+        if (!isModalOpen) {
+            return;
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [handleResize, isModalOpen]);
+    openModalSubscriber === null || openModalSubscriber === undefined ? undefined : openModalSubscriber((open) => {
+        setIsModalOpen(open);
+    });
+    if (!iconNode || !isModalOpen) {
+        return null;
+    }
+    return (React.createElement(uikit.Portal, null,
+        React.createElement("div", { className: b(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
+            React.createElement("div", { className: b('icon') }, iconNode))));
+};
+HighlightedItem.displayName = 'HighlightedItem';
+
+exports.HighlightedItem = HighlightedItem;
+//# sourceMappingURL=HighlightedItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedItem.js","sources":["../../../../../../src/components/CompositeBar/HighlightedItem/HighlightedItem.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Portal} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {useAsideHeaderInnerContext} from '../../AsideHeader/AsideHeaderContext';\nimport {block} from '../../utils/cn';\n\nimport './HighlightedItem.scss';\n\nconst b = block('composite-bar-highlighted-item');\n\ninterface ItemInnerProps {\n    iconRef: React.RefObject<HTMLDivElement>;\n    iconNode: React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    onClickCapture?: (event: React.SyntheticEvent) => void;\n}\n\nconst DEBOUNCE_TIME = 200;\n\nexport const HighlightedItem: React.FC<ItemInnerProps> = ({\n    iconRef,\n    iconNode,\n    onClick,\n    onClickCapture,\n}: ItemInnerProps) => {\n    const {openModalSubscriber} = useAsideHeaderInnerContext();\n    const [{top, left, width, height}, setPosition] = useState({\n        top: 0,\n        left: 0,\n        width: 0,\n        height: 0,\n    });\n    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);\n\n    const handleResizeDebounced = useMemo(\n        () =>\n            debounceFn(\n                () => {\n                    const {\n                        top = 0,\n                        left = 0,\n                        width = 0,\n                        height = 0,\n                    } = iconRef?.current?.getBoundingClientRect() || {};\n\n                    setPosition({\n                        top: top + window.scrollY,\n                        left: left + window.scrollX,\n                        width,\n                        height,\n                    });\n                },\n                DEBOUNCE_TIME,\n                {leading: true},\n            ),\n        [iconRef],\n    );\n\n    const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);\n\n    useEffect(() => {\n        if (!isModalOpen) {\n            return;\n        }\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [handleResize, isModalOpen]);\n\n    openModalSubscriber?.((open: boolean) => {\n        setIsModalOpen(open);\n    });\n\n    if (!iconNode || !isModalOpen) {\n        return null;\n    }\n\n    return (\n        <Portal>\n            <div\n                className={b()}\n                style={{left, top, width, height}}\n                onClick={onClick}\n                onClickCapture={onClickCapture}\n                data-toast\n            >\n                <div className={b('icon')}>{iconNode}</div>\n            </div>\n        </Portal>\n    );\n};\n\nHighlightedItem.displayName = 'HighlightedItem';\n"],"names":["block","useAsideHeaderInnerContext","useState","useMemo","debounceFn","useCallback","useEffect","Portal"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,QAAK,CAAC,gCAAgC,CAAC;AASjD,MAAM,aAAa,GAAG,GAAG;AAElB,MAAM,eAAe,GAA6B,CAAC,EACtD,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,GACD,KAAI;AACjB,IAAA,MAAM,EAAC,mBAAmB,EAAC,GAAGC,6CAA0B,EAAE;AAC1D,IAAA,MAAM,CAAC,EAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAC,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC;AACvD,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;AACZ,KAAA,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAGC,aAAO,CACjC,MACIC,QAAU,CACN,MAAK;;AACD,QAAA,MAAM,EACF,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,GACb,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,qBAAqB,EAAE,KAAI,EAAE;AAEnD,QAAA,WAAW,CAAC;AACR,YAAA,GAAG,EAAE,GAAG,GAAG,MAAM,CAAC,OAAO;AACzB,YAAA,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,OAAO;YAC3B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;AACN,KAAC,EACD,aAAa,EACb,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,EACL,CAAC,OAAO,CAAC,CACZ;AAED,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExFC,eAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;YACd;;AAGJ,QAAA,YAAY,EAAE;AAEd,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAC/C,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACnE,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE/B,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAG,CAAC,IAAa,KAAI;QACpC,cAAc,CAAC,IAAI,CAAC;AACxB,KAAC,CAAC;AAEF,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC3B,QAAA,OAAO,IAAI;;IAGf,QACI,oBAACC,YAAM,EAAA,IAAA;QACH,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,EAAE,EACd,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAC,EACjC,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA;AAG9B,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAG,EAAA,QAAQ,CAAO,CACzC,CACD;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.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-highlighted-item{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:38px;--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.gn-composite-bar-highlighted-item__icon{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.gn-composite-bar-highlighted-item__icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:\"\";height:100%;position:absolute;width:100%;z-index:-1}.gn-composite-bar-highlighted-item__icon:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=HighlightedItem.scss.js.map

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

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

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

@@ -0,0 +1,178 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var AsideHeaderContext = require('../../AsideHeader/AsideHeaderContext.js');
+var constants$1 = require('../../constants.js');
+var cn = require('../../utils/cn.js');
+var HighlightedItem = require('../HighlightedItem/HighlightedItem.js');
+var constants = require('../constants.js');
+var utils = require('../utils.js');
+require('./Item.scss.js');
+
+const b = cn.block('composite-bar-item');
+function renderItemTitle(item) {
+    let titleNode = React.createElement("div", { className: b('title-text') }, item.title);
+    if (item.rightAdornment) {
+        titleNode = (React.createElement(React.Fragment, null,
+            titleNode,
+            React.createElement("div", { className: b('title-adornment') }, item.rightAdornment)));
+    }
+    return titleNode;
+}
+const defaultPopupPlacement = ['right-end'];
+const defaultPopupOffset = { mainAxis: -20, crossAxis: 8 };
+const Item = (props) => {
+    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupAnchorElement, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onOpenChangePopup, onItemClick, onItemClickCapture, onCollapseItemClick, bringForward, } = props;
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    const [open, toggleOpen] = React.useState(false);
+    const ref = React.useRef(null);
+    const anchorRef = popupAnchorElement ? { current: popupAnchorElement } : popupAnchor || ref;
+    const highlightedRef = React.useRef(null);
+    const type = item.type || constants.ITEM_TYPE_REGULAR;
+    const current = item.current || false;
+    const tooltipText = item.tooltipText || item.title;
+    const icon = item.icon;
+    const iconSize = item.iconSize || constants$1.ASIDE_HEADER_ICON_SIZE;
+    const iconQa = item.iconQa;
+    const collapsedItem = item.id === constants.COLLAPSE_ITEM_ID;
+    const handleClosePopup = React.useCallback((event) => {
+        var _a;
+        if (event instanceof MouseEvent &&
+            event.target &&
+            ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
+            return;
+        }
+        onClosePopup === null || onClosePopup === undefined ? undefined : onClosePopup();
+    }, [onClosePopup]);
+    if (item.type === 'divider') {
+        return React.createElement("div", { className: b('menu-divider') });
+    }
+    const makeIconNode = (iconEl) => {
+        return compact ? (React.createElement(uikit.ActionTooltip, { title: "", description: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b('icon-tooltip', { 'item-type': type }) },
+            React.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b('btn-icon') }, iconEl))) : (iconEl);
+    };
+    const makeNode = ({ icon: iconEl, title: titleEl }) => {
+        const [Tag, tagProps] = item.link
+            ? ['a', { href: item.link }]
+            : ['button', {}];
+        const handleMouseEnter = () => {
+            if (!compact) {
+                onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
+            }
+        };
+        const handleMouseLeave = () => {
+            if (!compact) {
+                onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
+            }
+        };
+        const handleClick = (event) => {
+            const target = event.currentTarget;
+            if (collapsedItem) {
+                /**
+                 * If we call onItemClick for collapsedItem then:
+                 * - User get unexpected item in onItemClick callback
+                 * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                 */
+                toggleOpen(!open);
+            }
+            else if (target instanceof HTMLDivElement) {
+                onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
+            }
+        };
+        const renderActionButton = () => (React.createElement("div", { className: compact ? b('action-container-compact') : b('action-container') },
+            React.createElement(uikit.Button, Object.assign({ onClick: handleClick, className: b('action', { compact, collapse: !compact }, className), ref: ref, "data-qa": item.qa, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, size: "l", view: "raised", type: "button", pin: "circle-circle" }, item.extraButtonProps),
+                React.createElement("div", { className: b('action-btn-container') },
+                    React.createElement("div", { className: b('action-icon') }, makeIconNode(iconEl)),
+                    !compact && (React.createElement("div", { className: b('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl))))));
+        const renderTagContainer = () => (React.createElement(Tag, Object.assign({}, tagProps, { className: b({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
+                if (collapsedItem) {
+                    /**
+                     * If we call onItemClick for collapsedItem then:
+                     * - User get unexpected item in onItemClick callback
+                     * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                     */
+                    toggleOpen(!open);
+                    onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
+                }
+                else {
+                    onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
+                }
+            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+                if (!compact) {
+                    onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
+                }
+            }, onMouseLeave: () => {
+                if (!compact) {
+                    onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
+                }
+            } }),
+            React.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
+            React.createElement("div", { className: b('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)));
+        const createdNode = (React.createElement(React.Fragment, null,
+            type === 'action' ? renderActionButton() : renderTagContainer(),
+            renderPopupContent && (anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: onOpenChangePopup }, renderPopupContent()))));
+        if (item.link) {
+            return (React.createElement("a", { href: item.link, className: b('link') }, createdNode));
+        }
+        return createdNode;
+    };
+    const iconNode = icon ? (React.createElement(uikit.Icon, { qa: iconQa, data: icon, size: iconSize, className: b('icon') })) : null;
+    const titleNode = renderItemTitle(item);
+    const params = { icon: iconNode, title: titleNode };
+    let highlightedNode = null;
+    let node;
+    const opts = { compact: Boolean(compact), collapsed: false, item, ref };
+    if (typeof item.itemWrapper === 'function') {
+        node = item.itemWrapper(params, makeNode, opts);
+        highlightedNode =
+            bringForward &&
+                item.itemWrapper(params, ({ icon: iconEl }) => makeIconNode(iconEl), opts);
+    }
+    else {
+        node = makeNode(params);
+        highlightedNode = bringForward && makeIconNode(iconNode);
+    }
+    return (React.createElement(React.Fragment, null,
+        bringForward && (React.createElement(HighlightedItem.HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event), onClickCapture: onItemClickCapture })),
+        node,
+        open && collapsedItem && (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
+};
+Item.displayName = 'Item';
+function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    return (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) ? (React.createElement(uikit.Popup, { placement: constants.POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
+        React.createElement("div", { className: b('collapse-items-popup-content') },
+            React.createElement(uikit.List, { itemClassName: b('root-collapse-item'), items: collapseItems, selectedItemIndex: utils.getSelectedItemIndex(collapseItems), itemHeight: constants.POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * constants.POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, onItemClick: onClose, renderItem: (collapseItem) => {
+                    const makeCollapseNode = ({ title: titleEl, icon: iconEl, }) => {
+                        const [Tag, tagProps] = collapseItem.link
+                            ? ['a', { href: collapseItem.link }]
+                            : ['button', {}];
+                        return (React.createElement(Tag, Object.assign({}, tagProps, { className: b('collapse-item'), onClick: (event) => {
+                                onItemClick === null || onItemClick === undefined ? undefined : onItemClick(collapseItem, true, event);
+                            } }),
+                            iconEl,
+                            titleEl));
+                    };
+                    const titleNode = renderItemTitle(collapseItem);
+                    const iconNode = collapseItem.icon && (React.createElement(uikit.Icon, { data: collapseItem.icon, size: 14, className: b('collapse-item-icon') }));
+                    const params = { title: titleNode, icon: iconNode };
+                    const opts = {
+                        compact: Boolean(compact),
+                        collapsed: true,
+                        item: collapseItem,
+                        ref: anchorRef,
+                    };
+                    if (typeof collapseItem.itemWrapper === 'function') {
+                        return collapseItem.itemWrapper(params, makeCollapseNode, opts);
+                    }
+                    else {
+                        return makeCollapseNode(params);
+                    }
+                } })))) : null;
+}
+
+exports.Item = Item;
+exports.defaultPopupOffset = defaultPopupOffset;
+exports.defaultPopupPlacement = defaultPopupPlacement;
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../../../src/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n    ActionTooltip,\n    Button,\n    Icon,\n    List,\n    Popup,\n    PopupPlacement,\n    PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderContext} from '../../AsideHeader/AsideHeaderContext';\nimport {ASIDE_HEADER_ICON_SIZE} from '../../constants';\nimport {MakeItemParams, MenuItem} from '../../types';\nimport {block} from '../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {\n    COLLAPSE_ITEM_ID,\n    ITEM_TYPE_REGULAR,\n    POPUP_ITEM_HEIGHT,\n    POPUP_PLACEMENT,\n} from '../constants';\nimport {getSelectedItemIndex} from '../utils';\n\nimport './Item.scss';\n\nconst b = block('composite-bar-item');\n\ninterface ItemPopup {\n    popupVisible?: PopupProps['open'];\n    /**\n     * floating element anchor ref object\n     *\n     * @deprecated Use `popupAnchorElement` instead\n     * */\n    popupAnchor?: PopupProps['anchorRef'];\n    popupAnchorElement?: PopupProps['anchorElement'];\n    popupPlacement?: PopupProps['placement'];\n    popupOffset?: PopupProps['offset'];\n    popupKeepMounted?: PopupProps['keepMounted'];\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use `onOpenChangePopup` instead\n     */\n    onClosePopup?: () => void;\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n\nexport interface ItemProps extends ItemPopup {\n    item: MenuItem;\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: MenuItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    onItemClickCapture?: (event: React.SyntheticEvent) => void;\n    onCollapseItemClick?: () => void;\n    bringForward?: boolean;\n}\n\ninterface ItemInnerProps extends ItemProps {\n    className?: string;\n    collapseItems?: MenuItem[];\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n}\n\nfunction renderItemTitle(item: MenuItem) {\n    let titleNode = <div className={b('title-text')}>{item.title}</div>;\n\n    if (item.rightAdornment) {\n        titleNode = (\n            <React.Fragment>\n                {titleNode}\n                <div className={b('title-adornment')}>{item.rightAdornment}</div>\n            </React.Fragment>\n        );\n    }\n\n    return titleNode;\n}\n\nexport const defaultPopupPlacement: PopupPlacement = ['right-end'];\nexport const defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: -20, crossAxis: 8};\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n    const {\n        item,\n        className,\n        collapseItems,\n        onMouseLeave,\n        onMouseEnter,\n        enableTooltip = true,\n        popupVisible = false,\n        popupAnchor,\n        popupAnchorElement,\n        popupPlacement = defaultPopupPlacement,\n        popupOffset = defaultPopupOffset,\n        popupKeepMounted,\n        renderPopupContent,\n        onClosePopup,\n        onOpenChangePopup,\n        onItemClick,\n        onItemClickCapture,\n        onCollapseItemClick,\n        bringForward,\n    } = props;\n\n    const {compact} = useAsideHeaderContext();\n\n    const [open, toggleOpen] = React.useState<boolean>(false);\n\n    const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n    const anchorRef = popupAnchorElement ? {current: popupAnchorElement} : popupAnchor || ref;\n    const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n    const type = item.type || ITEM_TYPE_REGULAR;\n    const current = item.current || false;\n    const tooltipText = item.tooltipText || item.title;\n    const icon = item.icon;\n    const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE;\n    const iconQa = item.iconQa;\n    const collapsedItem = item.id === COLLAPSE_ITEM_ID;\n\n    const handleClosePopup = React.useCallback(\n        (event: MouseEvent | KeyboardEvent) => {\n            if (\n                event instanceof MouseEvent &&\n                event.target &&\n                ref.current?.contains(event.target as Node)\n            ) {\n                return;\n            }\n            onClosePopup?.();\n        },\n        [onClosePopup],\n    );\n\n    if (item.type === 'divider') {\n        return <div className={b('menu-divider')} />;\n    }\n\n    const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n        return compact ? (\n            <ActionTooltip\n                title=\"\"\n                description={tooltipText}\n                disabled={!enableTooltip || (collapsedItem && open) || popupVisible}\n                placement=\"right\"\n                className={b('icon-tooltip', {'item-type': type})}\n            >\n                <div\n                    onMouseEnter={() => onMouseEnter?.()}\n                    onMouseLeave={() => onMouseLeave?.()}\n                    className={b('btn-icon')}\n                >\n                    {iconEl}\n                </div>\n            </ActionTooltip>\n        ) : (\n            iconEl\n        );\n    };\n\n    const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n        const [Tag, tagProps] = item.link\n            ? ['a' as const, {href: item.link}]\n            : ['button' as const, {}];\n\n        const handleMouseEnter = () => {\n            if (!compact) {\n                onMouseEnter?.();\n            }\n        };\n\n        const handleMouseLeave = () => {\n            if (!compact) {\n                onMouseLeave?.();\n            }\n        };\n\n        const handleClick = (\n            event: React.MouseEvent<\n                HTMLAnchorElement | HTMLButtonElement | HTMLDivElement,\n                MouseEvent\n            >,\n        ) => {\n            const target = event.currentTarget;\n            if (collapsedItem) {\n                /**\n                 * If we call onItemClick for collapsedItem then:\n                 * - User get unexpected item in onItemClick callback\n                 * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems\n                 */\n                toggleOpen(!open);\n            } else if (target instanceof HTMLDivElement) {\n                onItemClick?.(item, false, event as React.MouseEvent<HTMLDivElement, MouseEvent>);\n            }\n        };\n\n        const renderActionButton = () => (\n            <div className={compact ? b('action-container-compact') : b('action-container')}>\n                <Button\n                    onClick={handleClick}\n                    className={b('action', {compact, collapse: !compact}, className)}\n                    ref={ref}\n                    data-qa={item.qa}\n                    onMouseEnter={handleMouseEnter}\n                    onMouseLeave={handleMouseLeave}\n                    size=\"l\"\n                    view=\"raised\"\n                    type=\"button\"\n                    pin=\"circle-circle\"\n                    {...item.extraButtonProps}\n                >\n                    <div className={b('action-btn-container')}>\n                        <div className={b('action-icon')}>{makeIconNode(iconEl)}</div>\n\n                        {!compact && (\n                            <div\n                                className={b('title')}\n                                title={typeof item.title === 'string' ? item.title : undefined}\n                            >\n                                {titleEl}\n                            </div>\n                        )}\n                    </div>\n                </Button>\n            </div>\n        );\n\n        const renderTagContainer = () => (\n            <Tag\n                {...tagProps}\n                className={b({type, current, compact}, className)}\n                ref={ref}\n                data-qa={item.qa}\n                onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                    if (collapsedItem) {\n                        /**\n                         * If we call onItemClick for collapsedItem then:\n                         * - User get unexpected item in onItemClick callback\n                         * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems\n                         */\n                        toggleOpen(!open);\n                        onCollapseItemClick?.();\n                    } else {\n                        onItemClick?.(item, false, event);\n                    }\n                }}\n                onClickCapture={onItemClickCapture}\n                onMouseEnter={() => {\n                    if (!compact) {\n                        onMouseEnter?.();\n                    }\n                }}\n                onMouseLeave={() => {\n                    if (!compact) {\n                        onMouseLeave?.();\n                    }\n                }}\n            >\n                <div className={b('icon-place')} ref={highlightedRef}>\n                    {makeIconNode(iconEl)}\n                </div>\n\n                <div\n                    className={b('title')}\n                    title={typeof item.title === 'string' ? item.title : undefined}\n                >\n                    {titleEl}\n                </div>\n            </Tag>\n        );\n\n        const createdNode = (\n            <React.Fragment>\n                {type === 'action' ? renderActionButton() : renderTagContainer()}\n                {renderPopupContent && anchorRef?.current && (\n                    <Popup\n                        open={popupVisible}\n                        keepMounted={popupKeepMounted}\n                        placement={popupPlacement}\n                        offset={popupOffset}\n                        anchorRef={anchorRef}\n                        onClose={handleClosePopup}\n                        onOpenChange={onOpenChangePopup}\n                    >\n                        {renderPopupContent()}\n                    </Popup>\n                )}\n            </React.Fragment>\n        );\n\n        if (item.link) {\n            return (\n                <a href={item.link} className={b('link')}>\n                    {createdNode}\n                </a>\n            );\n        }\n\n        return createdNode;\n    };\n\n    const iconNode = icon ? (\n        <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n    ) : null;\n\n    const titleNode = renderItemTitle(item);\n    const params = {icon: iconNode, title: titleNode};\n    let highlightedNode = null;\n    let node;\n\n    const opts = {compact: Boolean(compact), collapsed: false, item, ref};\n\n    if (typeof item.itemWrapper === 'function') {\n        node = item.itemWrapper(params, makeNode, opts) as React.ReactElement;\n        highlightedNode =\n            bringForward &&\n            (item.itemWrapper(\n                params,\n                ({icon: iconEl}) => makeIconNode(iconEl),\n                opts,\n            ) as React.ReactElement);\n    } else {\n        node = makeNode(params);\n        highlightedNode = bringForward && makeIconNode(iconNode);\n    }\n\n    return (\n        <React.Fragment>\n            {bringForward && (\n                <HighlightedItem\n                    iconNode={highlightedNode}\n                    iconRef={highlightedRef}\n                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n                        onItemClick?.(item, false, event)\n                    }\n                    onClickCapture={onItemClickCapture}\n                />\n            )}\n            {node}\n            {open && collapsedItem && collapseItems?.length && Boolean(anchorRef?.current) && (\n                <CollapsedPopup {...props} anchorRef={ref} onClose={() => toggleOpen(false)} />\n            )}\n        </React.Fragment>\n    );\n};\n\nItem.displayName = 'Item';\n\ninterface CollapsedPopupProps {\n    anchorRef: React.RefObject<HTMLElement>;\n    onClose: () => void;\n}\n\nfunction CollapsedPopup({\n    onItemClick,\n    collapseItems,\n    anchorRef,\n    onClose,\n}: ItemInnerProps & CollapsedPopupProps) {\n    const {compact} = useAsideHeaderContext();\n    return collapseItems?.length ? (\n        <Popup placement={POPUP_PLACEMENT} open={true} anchorRef={anchorRef} onClose={onClose}>\n            <div className={b('collapse-items-popup-content')}>\n                <List\n                    itemClassName={b('root-collapse-item')}\n                    items={collapseItems}\n                    selectedItemIndex={getSelectedItemIndex(collapseItems)}\n                    itemHeight={POPUP_ITEM_HEIGHT}\n                    itemsHeight={collapseItems.length * POPUP_ITEM_HEIGHT}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    onItemClick={onClose}\n                    renderItem={(collapseItem) => {\n                        const makeCollapseNode = ({\n                            title: titleEl,\n                            icon: iconEl,\n                        }: MakeItemParams) => {\n                            const [Tag, tagProps] = collapseItem.link\n                                ? ['a' as const, {href: collapseItem.link}]\n                                : ['button' as const, {}];\n\n                            return (\n                                <Tag\n                                    {...tagProps}\n                                    className={b('collapse-item')}\n                                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                                        onItemClick?.(collapseItem, true, event);\n                                    }}\n                                >\n                                    {iconEl}\n                                    {titleEl}\n                                </Tag>\n                            );\n                        };\n\n                        const titleNode = renderItemTitle(collapseItem);\n                        const iconNode = collapseItem.icon && (\n                            <Icon\n                                data={collapseItem.icon}\n                                size={14}\n                                className={b('collapse-item-icon')}\n                            />\n                        );\n\n                        const params = {title: titleNode, icon: iconNode};\n                        const opts = {\n                            compact: Boolean(compact),\n                            collapsed: true,\n                            item: collapseItem,\n                            ref: anchorRef,\n                        };\n                        if (typeof collapseItem.itemWrapper === 'function') {\n                            return collapseItem.itemWrapper(params, makeCollapseNode, opts);\n                        } else {\n                            return makeCollapseNode(params);\n                        }\n                    }}\n                />\n            </div>\n        </Popup>\n    ) : null;\n}\n"],"names":["block","useAsideHeaderContext","ITEM_TYPE_REGULAR","ASIDE_HEADER_ICON_SIZE","COLLAPSE_ITEM_ID","ActionTooltip","Button","Popup","Icon","HighlightedItem","POPUP_PLACEMENT","List","getSelectedItemIndex","POPUP_ITEM_HEIGHT"],"mappings":"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"}