npm - @gravity-ui/navigation - Versions diffs - 6.0.0-beta.0 → 6.0.0-beta.1 - Mend

@gravity-ui/navigation 6.0.0-beta.0 → 6.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { MenuGroup } from '../../../types';
-import { AsideHeaderItem } from '../../types';
+import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
     items: AsideHeaderItem[];
@@ -11,6 +11,10 @@ type CompositeBarProps = {
     compact: boolean;
     compositeId?: string;
     menuItemClassName?: string;
+    /**
+     * @see AsideHeaderMenuOverflow
+     */
+    menuOverflow?: AsideHeaderMenuOverflow;
 };
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js CHANGED Viewed

@@ -6,6 +6,7 @@ var uikit = require('@gravity-ui/uikit');
 var AutoSizer = require('react-virtualized-auto-sizer');
 var cn = require('../../../utils/cn.js');
 var Item = require('./Item/Item.js');
+var ScrollableWithScrollbar = require('./ScrollableWithScrollbar/ScrollableWithScrollbar.js');
 var constants = require('./constants.js');
 var grouping = require('./grouping.js');
 var utils = require('./utils.js');
@@ -45,22 +46,33 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
             return (React.createElement(Item.Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(item.onItemClick) })));
         } }));
 };
-const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, }) => {
+const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, menuOverflow = 'collapse', }) => {
     const groupedItems = React.useMemo(() => grouping.getGroupedItems(items, menuGroups), [items, menuGroups]);
+    // Respect `afterMoreButton` ordering for DOM stability when items are rendered
+    // inside a scroll container (no collapse button to anchor them against).
+    const scrollableItems = React.useMemo(() => utils.getReorderedItems(groupedItems), [groupedItems]);
     if (groupedItems.length === 0) {
         return null;
     }
     let node;
     if (type === 'menu') {
-        const minHeight = utils.getItemsMinHeight(groupedItems);
-        const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
-        node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, groupedItems.length !== 0 && (React.createElement(AutoSizer, 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(groupedItems, height, collapseItem);
-            return (React.createElement("div", { style: { width, height } },
-                React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems })));
-        }))));
+        // `scroll` mode is intentionally disabled in `compact` mode — there the
+        // classic "More" popup gives a better UX for icon-only items.
+        if (menuOverflow === 'scroll' && !compact) {
+            node = (React.createElement(ScrollableWithScrollbar.ScrollableWithScrollbar, { recalcDeps: [scrollableItems] },
+                React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: scrollableItems, onItemClick: onItemClick, menuItemClassName: menuItemClassName })));
+        }
+        else {
+            const minHeight = utils.getItemsMinHeight(groupedItems);
+            const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
+            node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, groupedItems.length !== 0 && (React.createElement(AutoSizer, 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(groupedItems, height, collapseItem);
+                return (React.createElement("div", { style: { width, height } },
+                    React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems })));
+            }))));
+        }
     }
     else {
         node = (React.createElement("div", { className: b({ subheader: true }) },

package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\nimport {\n getAutosizeListItems,\n getItemHeight,\n getItemsHeight,\n getItemsMinHeight,\n getMoreButtonItem,\n getSelectedItemIndex,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n type: 'menu' \| 'subheader';\n items: AsideHeaderItem[];\n menuGroups?: MenuGroup[];\n onItemClick?: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n menuMoreTitle?: string;\n onMoreClick?: () => void;\n compact: boolean;\n compositeId?: string;\n menuItemClassName?: string;\n};\n\ntype CompositeBarViewProps = CompositeBarProps & {\n collapseItems?: AsideHeaderItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n type,\n items,\n onItemClick,\n onMoreClick,\n collapseItems,\n compact,\n compositeId,\n menuItemClassName,\n}) => {\n const ref = useRef<List<AsideHeaderItem>>(null);\n\n const onMouseLeave = useCallback(() => {\n if (compact && document.hasFocus()) {\n ref.current?.activateItem(undefined as unknown as number);\n }\n }, [compact]);\n\n const onItemClickByIndex = useCallback(\n (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n (item, collapsed, event) => {\n // Handle clicks on the \"more\" button (collapse item)\n if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n onMoreClick?.();\n } else {\n onItemClick?.(\n {\n ...item,\n // For collapsed popup items, preserve the item's own onItemClick\n // since orginalItemClick belongs to the collapse button, not the item\n onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n },\n collapsed,\n event,\n );\n }\n },\n [onItemClick, onMoreClick],\n );\n\n return (\n <List<AsideHeaderItem>\n id={compositeId}\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', menuItemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => {\n let menuPopupItems: AsideHeaderItem[] \| undefined;\n let menuPopupTitle: string \| undefined;\n\n if (item.id === COLLAPSE_ITEM_ID) {\n menuPopupItems = collapseItems;\n } else if (isGroupHeaderItem(item)) {\n menuPopupItems = item.groupChildren;\n menuPopupTitle = item.groupPopupTitle;\n }\n\n return (\n <Item\n {...item}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={menuPopupItems}\n menuPopupTitle={menuPopupTitle}\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(item.onItemClick)}\n />\n );\n }}\n />\n );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n type,\n items,\n menuGroups,\n menuMoreTitle,\n onItemClick,\n onMoreClick,\n compact,\n compositeId,\n menuItemClassName,\n}) => {\n const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n if (groupedItems.length === 0) {\n return null;\n }\n let node: ReactNode;\n\n if (type === 'menu') {\n const minHeight = getItemsMinHeight(groupedItems);\n const collapseItem = getMoreButtonItem(menuMoreTitle);\n node = (\n <div className={b({autosizer: true})} style={{minHeight}}>\n {groupedItems.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 groupedItems,\n height,\n collapseItem,\n );\n return (\n <div style={{width, height}}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n items={listItems}\n onItemClick={onItemClick}\n onMoreClick={onMoreClick}\n menuItemClassName={menuItemClassName}\n collapseItems={collapseItems}\n />\n </div>\n );\n }}\n </AutoSizer>\n )}\n </div>\n );\n } else {\n node = (\n <div className={b({subheader: true})}>\n <CompositeBarView\n type=\"subheader\"\n menuItemClassName={menuItemClassName}\n compact={compact}\n items={groupedItems}\n onItemClick={onItemClick}\n />\n </div>\n );\n }\n return node;\n};\n"],"names":["createBlock","styles","useRef","useCallback","COLLAPSE_ITEM_ID","List","getSelectedItemIndex","getItemHeight","getItemsHeight","isGroupHeaderItem","Item","useMemo","getGroupedItems","getItemsMinHeight","getMoreButtonItem","getAutosizeListItems"],"mappings":"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"}
1	+ {"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, AsideHeaderMenuOverflow} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\nimport {\n getAutosizeListItems,\n getItemHeight,\n getItemsHeight,\n getItemsMinHeight,\n getMoreButtonItem,\n getReorderedItems,\n getSelectedItemIndex,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n type: 'menu' \| 'subheader';\n items: AsideHeaderItem[];\n menuGroups?: MenuGroup[];\n onItemClick?: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n menuMoreTitle?: string;\n onMoreClick?: () => void;\n compact: boolean;\n compositeId?: string;\n menuItemClassName?: string;\n /*\n @see AsideHeaderMenuOverflow\n */\n menuOverflow?: AsideHeaderMenuOverflow;\n};\n\ntype CompositeBarViewProps = Omit<CompositeBarProps, 'menuOverflow'> & {\n collapseItems?: AsideHeaderItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n type,\n items,\n onItemClick,\n onMoreClick,\n collapseItems,\n compact,\n compositeId,\n menuItemClassName,\n}) => {\n const ref = useRef<List<AsideHeaderItem>>(null);\n\n const onMouseLeave = useCallback(() => {\n if (compact && document.hasFocus()) {\n ref.current?.activateItem(undefined as unknown as number);\n }\n }, [compact]);\n\n const onItemClickByIndex = useCallback(\n (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n (item, collapsed, event) => {\n // Handle clicks on the \"more\" button (collapse item)\n if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n onMoreClick?.();\n } else {\n onItemClick?.(\n {\n ...item,\n // For collapsed popup items, preserve the item's own onItemClick\n // since orginalItemClick belongs to the collapse button, not the item\n onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n },\n collapsed,\n event,\n );\n }\n },\n [onItemClick, onMoreClick],\n );\n\n return (\n <List<AsideHeaderItem>\n id={compositeId}\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', menuItemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => {\n let menuPopupItems: AsideHeaderItem[] \| undefined;\n let menuPopupTitle: string \| undefined;\n\n if (item.id === COLLAPSE_ITEM_ID) {\n menuPopupItems = collapseItems;\n } else if (isGroupHeaderItem(item)) {\n menuPopupItems = item.groupChildren;\n menuPopupTitle = item.groupPopupTitle;\n }\n\n return (\n <Item\n {...item}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={menuPopupItems}\n menuPopupTitle={menuPopupTitle}\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(item.onItemClick)}\n />\n );\n }}\n />\n );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n type,\n items,\n menuGroups,\n menuMoreTitle,\n onItemClick,\n onMoreClick,\n compact,\n compositeId,\n menuItemClassName,\n menuOverflow = 'collapse',\n}) => {\n const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n // Respect `afterMoreButton` ordering for DOM stability when items are rendered\n // inside a scroll container (no collapse button to anchor them against).\n const scrollableItems = useMemo(() => getReorderedItems(groupedItems), [groupedItems]);\n\n if (groupedItems.length === 0) {\n return null;\n }\n let node: ReactNode;\n\n if (type === 'menu') {\n // `scroll` mode is intentionally disabled in `compact` mode — there the\n // classic \"More\" popup gives a better UX for icon-only items.\n if (menuOverflow === 'scroll' && !compact) {\n node = (\n <ScrollableWithScrollbar recalcDeps={[scrollableItems]}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n items={scrollableItems}\n onItemClick={onItemClick}\n menuItemClassName={menuItemClassName}\n />\n </ScrollableWithScrollbar>\n );\n } else {\n const minHeight = getItemsMinHeight(groupedItems);\n const collapseItem = getMoreButtonItem(menuMoreTitle);\n node = (\n <div className={b({autosizer: true})} style={{minHeight}}>\n {groupedItems.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 groupedItems,\n height,\n collapseItem,\n );\n return (\n <div style={{width, height}}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n items={listItems}\n onItemClick={onItemClick}\n onMoreClick={onMoreClick}\n menuItemClassName={menuItemClassName}\n collapseItems={collapseItems}\n />\n </div>\n );\n }}\n </AutoSizer>\n )}\n </div>\n );\n }\n } else {\n node = (\n <div className={b({subheader: true})}>\n <CompositeBarView\n type=\"subheader\"\n menuItemClassName={menuItemClassName}\n compact={compact}\n items={groupedItems}\n onItemClick={onItemClick}\n />\n </div>\n );\n }\n return node;\n};\n"],"names":["createBlock","styles","useRef","useCallback","COLLAPSE_ITEM_ID","List","getSelectedItemIndex","getItemHeight","getItemsHeight","isGroupHeaderItem","Item","useMemo","getGroupedItems","getReorderedItems","ScrollableWithScrollbar","getItemsMinHeight","getMoreButtonItem","getAutosizeListItems"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js CHANGED Viewed

@@ -10,6 +10,7 @@ var HighlightedItem = require('../HighlightedItem/HighlightedItem.js');
 var constants = require('../constants.js');
 var grouping = require('../grouping.js');
 var ItemPopup = require('./ItemPopup.js');
+var ItemPopupNestContext = require('./ItemPopupNestContext.js');
 var renderItemTitle = require('./renderItemTitle.js');
 var Item_module = require('./Item.module.scss.js');
@@ -31,6 +32,12 @@ const Item = (props) => {
     const iconQa = props.iconQa;
     const collapsedItem = props.id === constants.COLLAPSE_ITEM_ID;
     const isGroupHeader = grouping.isGroupHeaderItem(props);
+    let resolvedMenuPopupItems = menuPopupItems;
+    let resolvedMenuPopupTitle = menuPopupTitle;
+    if (isGroupHeader) {
+        resolvedMenuPopupItems = menuPopupItems !== null && menuPopupItems !== undefined ? menuPopupItems : props.groupChildren;
+        resolvedMenuPopupTitle = menuPopupTitle !== null && menuPopupTitle !== undefined ? menuPopupTitle : props.groupPopupTitle;
+    }
     const handleOpenChangePopup = React.useCallback((newOpen, event, reason) => {
         var _a;
         if (event instanceof MouseEvent &&
@@ -43,7 +50,19 @@ const Item = (props) => {
         }
         onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
     }, [onOpenChangePopup]);
-    if (type === 'divider') {
+    const isDivider = type === 'divider';
+    const hasSubmenuPopup = !isDivider && Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (collapsedItem || isGroupHeader);
+    const submenuNest = React.useContext(ItemPopupNestContext.ItemPopupNestContext);
+    React.useEffect(() => {
+        if (!submenuNest || !hasSubmenuPopup || !compactNavPopoverOpen) {
+            return undefined;
+        }
+        submenuNest.registerNestedOpen(1);
+        return () => {
+            submenuNest.registerNestedOpen(-1);
+        };
+    }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);
+    if (isDivider) {
         return React.createElement("div", { className: b('menu-divider') });
     }
     const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';
@@ -52,7 +71,7 @@ const Item = (props) => {
             return iconEl;
         }
         const iconButton = (React.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b('btn-icon') }, iconEl));
-        if (menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) {
+        if (resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) {
             return iconButton;
         }
         return (React.createElement(ItemPopup.ItemPopup, { items: [props], open: compactNavPopoverOpen, onOpenChange: (nextOpen) => {
@@ -82,11 +101,10 @@ const Item = (props) => {
             } }),
             React.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
             React.createElement("div", { className: b('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
-            Boolean(menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) && (isGroupHeader || collapsedItem) && (React.createElement("div", { className: b('chevron') },
+            Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (isGroupHeader || collapsedItem) && (React.createElement("div", { className: b('chevron') },
                 React.createElement(uikit.Icon, { data: icons.ChevronRight, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE })))));
-        const expandedMenuRows = menuPopupItems;
-        const showMenuPopup = Boolean(expandedMenuRows === null || expandedMenuRows === undefined ? undefined : expandedMenuRows.length) && (collapsedItem || isGroupHeader);
-        const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React.createElement(ItemPopup.ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? menuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
+        const expandedMenuRows = resolvedMenuPopupItems;
+        const wrappedTagNode = hasSubmenuPopup && expandedMenuRows ? (React.createElement(ItemPopup.ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? resolvedMenuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
         const createdNode = (React.createElement(React.Fragment, null,
             wrappedTagNode,
             renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\nimport {isGroupHeaderItem} from '../grouping';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n popupItemClassName,\n menuPopupItems,\n menuPopupTitle,\n compact,\n onMouseLeave,\n onMouseEnter,\n enableTooltip = true,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n hideIcon = false,\n stopClickPropagation = false,\n } = props;\n\n const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n const type = props.type \|\| ITEM_TYPE_REGULAR;\n const current = props.current \|\| false;\n const icon = props.icon;\n const iconSize = props.iconSize \|\| ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n const isGroupHeader = isGroupHeaderItem(props);\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n if (newOpen) {\n setCompactNavPopoverOpen(false);\n }\n\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n if (type === 'divider') {\n return <div className={b('menu-divider')} />;\n }\n\n const compactPopoverDisabled = !enableTooltip \|\| popupVisible \|\| type === 'action';\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n if (!compact) {\n return iconEl;\n }\n\n const iconButton = (\n <div\n onMouseEnter={() => onMouseEnter?.()}\n onMouseLeave={() => onMouseLeave?.()}\n className={b('btn-icon')}\n >\n {iconEl}\n </div>\n );\n\n if (menuPopupItems?.length) {\n return iconButton;\n }\n\n return (\n <ItemPopup\n items={[props]}\n open={compactNavPopoverOpen}\n onOpenChange={(nextOpen) => {\n if (nextOpen && compactPopoverDisabled) return;\n setCompactNavPopoverOpen(nextOpen);\n }}\n hideIcon\n itemClassName={popupItemClassName}\n disabled={compactPopoverDisabled}\n type={type}\n collapsed={compact}\n onItemClick={onItemClick}\n >\n {iconButton}\n </ItemPopup>\n );\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n const tagNode = (\n <Tag\n {...tagProps}\n className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n ref={ref}\n data-type={type}\n data-qa={qa}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (stopClickPropagation) {\n event.stopPropagation();\n }\n\n if (compact && !collapsedItem) {\n setCompactNavPopoverOpen(false);\n }\n\n onItemClick?.(props, collapsedItem, event);\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 className={b('title')} title={typeof title === 'string' ? title : undefined}>\n {titleEl}\n </div>\n\n {Boolean(menuPopupItems?.length) && (isGroupHeader \|\| collapsedItem) && (\n <div className={b('chevron')}>\n <Icon\n data={ChevronRight}\n size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n />\n </div>\n )}\n </Tag>\n );\n\n const expandedMenuRows = menuPopupItems;\n const showMenuPopup = Boolean(expandedMenuRows?.length) && (collapsedItem \|\| isGroupHeader);\n\n const wrappedTagNode =\n showMenuPopup && expandedMenuRows ? (\n <ItemPopup\n items={expandedMenuRows}\n title={isGroupHeader ? menuPopupTitle : undefined}\n open={compactNavPopoverOpen}\n itemClassName={popupItemClassName}\n onOpenChange={setCompactNavPopoverOpen}\n collapsed={collapsedItem ? true : compact}\n onItemClick={onItemClick}\n >\n {tagNode}\n </ItemPopup>\n ) : (\n tagNode\n );\n\n const createdNode = (\n <React.Fragment>\n {wrappedTagNode}\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode =\n hideIcon \|\| !icon ? null : (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n );\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (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?.(props, false, event)\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["createBlock","styles","ITEM_TYPE_REGULAR","ASIDE_HEADER_ICON_SIZE","COLLAPSE_ITEM_ID","isGroupHeaderItem","ItemPopup","Icon","ChevronRight","Popup","renderItemTitle","HighlightedItem"],"mappings":"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"}
1	+ {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\nimport {isGroupHeaderItem} from '../grouping';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n popupItemClassName,\n menuPopupItems,\n menuPopupTitle,\n compact,\n onMouseLeave,\n onMouseEnter,\n enableTooltip = true,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n hideIcon = false,\n stopClickPropagation = false,\n } = props;\n\n const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n const type = props.type \|\| ITEM_TYPE_REGULAR;\n const current = props.current \|\| false;\n const icon = props.icon;\n const iconSize = props.iconSize \|\| ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n const isGroupHeader = isGroupHeaderItem(props);\n\n let resolvedMenuPopupItems = menuPopupItems;\n let resolvedMenuPopupTitle = menuPopupTitle;\n\n if (isGroupHeader) {\n resolvedMenuPopupItems = menuPopupItems ?? props.groupChildren;\n resolvedMenuPopupTitle = menuPopupTitle ?? props.groupPopupTitle;\n }\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n if (newOpen) {\n setCompactNavPopoverOpen(false);\n }\n\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n const isDivider = type === 'divider';\n const hasSubmenuPopup =\n !isDivider && Boolean(resolvedMenuPopupItems?.length) && (collapsedItem \|\| isGroupHeader);\n\n const submenuNest = React.useContext(ItemPopupNestContext);\n\n React.useEffect(() => {\n if (!submenuNest \|\| !hasSubmenuPopup \|\| !compactNavPopoverOpen) {\n return undefined;\n }\n\n submenuNest.registerNestedOpen(1);\n\n return () => {\n submenuNest.registerNestedOpen(-1);\n };\n }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);\n\n if (isDivider) {\n return <div className={b('menu-divider')} />;\n }\n\n const compactPopoverDisabled = !enableTooltip \|\| popupVisible \|\| type === 'action';\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n if (!compact) {\n return iconEl;\n }\n\n const iconButton = (\n <div\n onMouseEnter={() => onMouseEnter?.()}\n onMouseLeave={() => onMouseLeave?.()}\n className={b('btn-icon')}\n >\n {iconEl}\n </div>\n );\n\n if (resolvedMenuPopupItems?.length) {\n return iconButton;\n }\n\n return (\n <ItemPopup\n items={[props]}\n open={compactNavPopoverOpen}\n onOpenChange={(nextOpen) => {\n if (nextOpen && compactPopoverDisabled) return;\n setCompactNavPopoverOpen(nextOpen);\n }}\n hideIcon\n itemClassName={popupItemClassName}\n disabled={compactPopoverDisabled}\n type={type}\n collapsed={compact}\n onItemClick={onItemClick}\n >\n {iconButton}\n </ItemPopup>\n );\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n const tagNode = (\n <Tag\n {...tagProps}\n className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n ref={ref}\n data-type={type}\n data-qa={qa}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (stopClickPropagation) {\n event.stopPropagation();\n }\n\n if (compact && !collapsedItem) {\n setCompactNavPopoverOpen(false);\n }\n\n onItemClick?.(props, collapsedItem, event);\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 className={b('title')} title={typeof title === 'string' ? title : undefined}>\n {titleEl}\n </div>\n\n {Boolean(resolvedMenuPopupItems?.length) && (isGroupHeader \|\| collapsedItem) && (\n <div className={b('chevron')}>\n <Icon\n data={ChevronRight}\n size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n />\n </div>\n )}\n </Tag>\n );\n\n const expandedMenuRows = resolvedMenuPopupItems;\n\n const wrappedTagNode =\n hasSubmenuPopup && expandedMenuRows ? (\n <ItemPopup\n items={expandedMenuRows}\n title={isGroupHeader ? resolvedMenuPopupTitle : undefined}\n open={compactNavPopoverOpen}\n itemClassName={popupItemClassName}\n onOpenChange={setCompactNavPopoverOpen}\n collapsed={collapsedItem ? true : compact}\n onItemClick={onItemClick}\n >\n {tagNode}\n </ItemPopup>\n ) : (\n tagNode\n );\n\n const createdNode = (\n <React.Fragment>\n {wrappedTagNode}\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode =\n hideIcon \|\| !icon ? null : (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n );\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (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?.(props, false, event)\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["createBlock","styles","ITEM_TYPE_REGULAR","ASIDE_HEADER_ICON_SIZE","COLLAPSE_ITEM_ID","isGroupHeaderItem","ItemPopupNestContext","ItemPopup","Icon","ChevronRight","Popup","renderItemTitle","HighlightedItem"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js CHANGED Viewed

@@ -5,25 +5,38 @@ var uikit = require('@gravity-ui/uikit');
 var cn = require('../../../../utils/cn.js');
 var utils = require('../utils.js');
 var Item = require('./Item.js');
+var ItemPopupNestContext = require('./ItemPopupNestContext.js');
 var Item_module = require('./Item.module.scss.js');
 const b = cn.createBlock('composite-bar-item', Item_module.default);
 const defaultPopupOffset = { mainAxis: 14 };
 const DEFAULT_POPUP_DELAY = 100;
 const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, children, onItemClick, onOpenChange, }) => {
+    const nestedOpenCountRef = React.useRef(0);
+    const registerNestedOpen = React.useCallback((delta) => {
+        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
+    }, []);
+    const nestContextValue = React.useMemo(() => ({ registerNestedOpen }), [registerNestedOpen]);
+    const wrappedOnOpenChange = React.useCallback((next) => {
+        if (!next && nestedOpenCountRef.current > 0) {
+            return;
+        }
+        onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(next);
+    }, [onOpenChange]);
     if (!items.length) {
         return children;
     }
-    const content = (React.createElement("div", { className: b('popup-content', { collapsed }) },
-        title && React.createElement("div", { className: b('popup-title') }, title),
-        React.createElement(uikit.List, { items: items, selectedItemIndex: utils.getSelectedItemIndex(items), itemHeight: utils.getPopupItemHeight, itemsHeight: utils.getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React.createElement(Item.Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation: true, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
-                    onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
-                    onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
-                } }))) })));
+    const content = (React.createElement(ItemPopupNestContext.ItemPopupNestContext.Provider, { value: nestContextValue },
+        React.createElement("div", { className: b('popup-content', { collapsed }) },
+            title && React.createElement("div", { className: b('popup-title') }, title),
+            React.createElement(uikit.List, { items: items, selectedItemIndex: utils.getSelectedItemIndex(items), itemHeight: utils.getPopupItemHeight, itemsHeight: utils.getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React.createElement(Item.Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation: true, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
+                        onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
+                        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
+                    } }))) }))));
     return (React.createElement(uikit.Popover, { disabled: disabled, open: open, onOpenChange: (nextOpen) => {
             if (nextOpen && disabled)
                 return;
-            onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(nextOpen);
+            wrappedOnOpenChange(nextOpen);
         }, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: defaultPopupOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
 };
 ItemPopup.displayName = 'ItemPopup';

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n items: AsideHeaderItem[];\n /** Optional title rendered at the top of the popup. */\n title?: string;\n open?: boolean;\n disabled?: boolean;\n type?: string;\n collapsed?: boolean;\n hideIcon?: boolean;\n itemClassName?: string;\n children: React.ReactElement;\n onOpenChange?: (open: boolean) => void;\n onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n items,\n itemClassName,\n title,\n open,\n disabled,\n type,\n collapsed = false,\n hideIcon = false,\n children,\n onItemClick,\n onOpenChange,\n}) => {\n if (!items.length) {\n return children;\n }\n\n const content = (\n <div className={b('popup-content', {collapsed})}>\n {title && <div className={b('popup-title')}>{title}</div>}\n <List\n items={items}\n selectedItemIndex={getSelectedItemIndex(items)}\n itemHeight={getPopupItemHeight}\n itemsHeight={getPopupItemsHeight}\n itemClassName={b('root-menu-item', itemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => (\n <Item\n {...item}\n qa={undefined}\n compact={false}\n className={b('popup-item')}\n hideIcon={hideIcon}\n stopClickPropagation\n enableTooltip={false}\n bringForward={false}\n popupVisible={false}\n renderPopupContent={undefined}\n onOpenChangePopup={undefined}\n popupRef={undefined}\n onItemClick={(_innerItem, _innerCollapsed, event) => {\n onOpenChange?.(false);\n onItemClick?.(item, collapsed, event);\n }}\n />\n )}\n />\n </div>\n );\n\n return (\n <Popover\n disabled={disabled}\n open={open}\n onOpenChange={(nextOpen) => {\n if (nextOpen && disabled) return;\n ~~onOpenChange?.~~(nextOpen);\n }}\n placement=\"right-start\"\n strategy=\"fixed\"\n openDelay={DEFAULT_POPUP_DELAY}\n closeDelay={DEFAULT_POPUP_DELAY}\n offset={defaultPopupOffset}\n enableSafePolygon\n className={b('icon-popover', {'item-type': type})}\n content={content}\n >\n {children}\n </Popover>\n );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["createBlock","styles","List","getSelectedItemIndex","getPopupItemHeight","getPopupItemsHeight","Item","Popover"],"mappings":"~~;;;;;;;;;AAYA~~,MAAM,CAAC,GAAGA,cAAW,CAAC,oBAAoB,EAAEC,mBAAM,CAAC;AAEnD,MAAM,kBAAkB,GAAsC,EAAC,QAAQ,EAAE,EAAE,EAAC;AAE5E,MAAM,mBAAmB,GAAG,GAAG;AAiBxB,MAAM,SAAS,GAAoB,CAAC,EACvC,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,EACX,YAAY,GACf,KAAI;~~AACD~~,IAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACf,QAAA,OAAO,QAAQ;;~~AAGnB~~,~~IAAA,~~MAAM,OAAO,IACT,~~KAAA~~,CAAA,aAAA,CAAA,KAAA,EAAA,~~EAAK~~,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,SAAS,EAAC,CAAC,EAAA;~~QAC1C~~,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAG,EAAA,KAAK,CAAO;~~QACzD~~,KAAC,CAAA,aAAA,CAAAC,UAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAEC,0BAAoB,CAAC,KAAK,CAAC,EAC9C,UAAU,EAAEC,wBAAkB,EAC9B,WAAW,EAAEC,yBAAmB,EAChC,aAAa,EAAE,CAAC,CAAC,gBAAgB,EAAE,aAAa,CAAC,EACjD,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,MACb,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,KAAK,EACd,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,QACpB,aAAa,EAAE,KAAK,EACpB,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,kBAAkB,EAAE,SAAS,EAC7B,iBAAiB,EAAE,SAAS,EAC5B,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,KAAI;AAChD,~~oBAAA~~,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,KAAK,CAAC;~~oBACrB~~,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,SAAA,GAAA,SAAA,GAAX,WAAW,CAAG,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC;AACzC,~~iBAAC~~,~~EACH~~,~~CAAA,CAAA,~~CACL,~~EACH~~,~~CAAA~~,CACA,~~CACT~~;AAED,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,aAAO,EACJ,EAAA,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,QAAQ,KAAI;YACvB,IAAI,QAAQ,IAAI,QAAQ;gBAAE;~~AAC1B~~,~~YAAA~~,~~YAAY~~,~~aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,~~QAAQ,CAAC;~~AAC5B~~,SAAC,EACD,SAAS,EAAC,aAAa,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,mBAAmB,EAC/B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EACjB,IAAA,EAAA,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,EACjD,OAAO,EAAE,OAAO,IAEf,QAAQ,CACH;AAElB;AAEA,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
1	+ {"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n items: AsideHeaderItem[];\n /** Optional title rendered at the top of the popup. */\n title?: string;\n open?: boolean;\n disabled?: boolean;\n type?: string;\n collapsed?: boolean;\n hideIcon?: boolean;\n itemClassName?: string;\n children: React.ReactElement;\n onOpenChange?: (open: boolean) => void;\n onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n items,\n itemClassName,\n title,\n open,\n disabled,\n type,\n collapsed = false,\n hideIcon = false,\n children,\n onItemClick,\n onOpenChange,\n}) => {\n const nestedOpenCountRef = React.useRef(0);\n\n const registerNestedOpen = React.useCallback((delta: number) => {\n nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n }, []);\n\n const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n const wrappedOnOpenChange = React.useCallback(\n (next: boolean) => {\n if (!next && nestedOpenCountRef.current > 0) {\n return;\n }\n\n onOpenChange?.(next);\n },\n [onOpenChange],\n );\n\n if (!items.length) {\n return children;\n }\n\n const content = (\n <ItemPopupNestContext.Provider value={nestContextValue}>\n <div className={b('popup-content', {collapsed})}>\n {title && <div className={b('popup-title')}>{title}</div>}\n <List\n items={items}\n selectedItemIndex={getSelectedItemIndex(items)}\n itemHeight={getPopupItemHeight}\n itemsHeight={getPopupItemsHeight}\n itemClassName={b('root-menu-item', itemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => (\n <Item\n {...item}\n qa={undefined}\n compact={false}\n className={b('popup-item')}\n hideIcon={hideIcon}\n stopClickPropagation\n enableTooltip={false}\n bringForward={false}\n popupVisible={false}\n renderPopupContent={undefined}\n onOpenChangePopup={undefined}\n popupRef={undefined}\n onItemClick={(_innerItem, _innerCollapsed, event) => {\n onOpenChange?.(false);\n onItemClick?.(item, collapsed, event);\n }}\n />\n )}\n />\n </div>\n </ItemPopupNestContext.Provider>\n );\n\n return (\n <Popover\n disabled={disabled}\n open={open}\n onOpenChange={(nextOpen) => {\n if (nextOpen && disabled) return;\n wrappedOnOpenChange(nextOpen);\n }}\n placement=\"right-start\"\n strategy=\"fixed\"\n openDelay={DEFAULT_POPUP_DELAY}\n closeDelay={DEFAULT_POPUP_DELAY}\n offset={defaultPopupOffset}\n enableSafePolygon\n className={b('icon-popover', {'item-type': type})}\n content={content}\n >\n {children}\n </Popover>\n );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["createBlock","styles","ItemPopupNestContext","List","getSelectedItemIndex","getPopupItemHeight","getPopupItemsHeight","Item","Popover"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from 'react';
+export type ItemPopupNestContextValue = {
+    registerNestedOpen: (delta: number) => void;
+};
+export declare const ItemPopupNestContext: React.Context<ItemPopupNestContextValue | null>;

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.js ADDED Viewed

@@ -0,0 +1,8 @@
+'use strict';
+var React = require('react');
+const ItemPopupNestContext = React.createContext(null);
+exports.ItemPopupNestContext = ItemPopupNestContext;
+//# sourceMappingURL=ItemPopupNestContext.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ItemPopupNestContext.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ItemPopupNestContextValue = {\n registerNestedOpen: (delta: number) => void;\n};\n\nexport const ItemPopupNestContext = React.createContext<ItemPopupNestContextValue | null>(null);\n"],"names":[],"mappings":";;;;AAMa,MAAA,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAmC,IAAI;;;;"}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.css ADDED Viewed

@@ -0,0 +1 @@

+ .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--_--scrollbar-width:var(--gn-aside-scrollbar-width,8px);--_--scrollbar-thumb-width:var(--gn-aside-scrollbar-thumb-width,4px);flex:1 1 auto;min-height:0;position:relative;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:before{background:var(--gn-aside-bottom-shadow-color,linear-gradient(to bottom,transparent 0,transparent 50%,rgba(0,0,0,.08) 100%));bottom:0;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .3s ease-in-out}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ:before{opacity:1}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza{-ms-overflow-style:none;height:100%;overflow-y:auto;scrollbar-width:none;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza::-webkit-scrollbar{display:none;height:0;width:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN{background:var(--gn-aside-scrollbar-track-color,transparent);bottom:0;pointer-events:auto;position:absolute;right:0;top:0;width:var(--_--scrollbar-width);z-index:3}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h{background:var(--gn-aside-scrollbar-handle-color,var(--g-color-base-simple-hover));border-radius:calc(var(--_--scrollbar-thumb-width)/2);opacity:0;position:absolute;right:calc((var(--_--scrollbar-width) - var(--_--scrollbar-thumb-width))/2);top:0;touch-action:none;transition:opacity .15s ease-in-out;width:var(--_--scrollbar-thumb-width)}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:hover .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h{opacity:1}.g-root_theme_light .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_light-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(0,0,0,.08))}.g-root_theme_dark .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_dark-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 0%,transparent 80%,rgba(0,0,0,.4))}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React, { FC, ReactNode } from 'react';
+type ScrollableWithScrollbarProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Extra dependencies that should trigger a recalculation of the bottom
+     * shadow and custom scrollbar thumb (e.g. when the rendered items change).
+     */
+    recalcDeps?: React.DependencyList;
+};
+export declare const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps>;
+export {};

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js ADDED Viewed

@@ -0,0 +1,24 @@
+import './ScrollableWithScrollbar.css';
+'use strict';
+var React = require('react');
+var cn = require('../../../../utils/cn.js');
+var useScrollableScrollbarSync = require('./useScrollableScrollbarSync.js');
+var ScrollableWithScrollbar_module = require('./ScrollableWithScrollbar.module.scss.js');
+const b = cn.createBlock('scrollable-with-scrollbar', ScrollableWithScrollbar_module.default);
+const EMPTY_DEPS = [];
+// Hides the native scrollbar and renders a custom thumb synced with the
+// underlying scroll position. The scroll itself stays native (wheel / touch /
+// keyboard) — only the visual indicator and drag handling are custom, so the
+// reserved gutter width is identical across OS / browser scrollbar settings.
+const ScrollableWithScrollbar = ({ children, className, recalcDeps = EMPTY_DEPS, }) => {
+    const { scrollRef, trackRef, thumbRef, hasContentBelow, overflows, thumb, scheduleUpdate, handleThumbPointerDown, handleTrackPointerDown, } = useScrollableScrollbarSync.useScrollableScrollbarSync(recalcDeps);
+    return (React.createElement("div", { className: b({ 'bottom-shadow': hasContentBelow }, className) },
+        React.createElement("div", { ref: scrollRef, className: b('scrollable-inner'), onScroll: scheduleUpdate }, children),
+        overflows ? (React.createElement("div", { ref: trackRef, className: b('scrollbar-track'), onPointerDown: handleTrackPointerDown, "aria-hidden": "true" },
+            React.createElement("div", { ref: thumbRef, className: b('scrollbar-thumb'), style: { transform: `translateY(${thumb.top}px)`, height: thumb.height }, onPointerDown: handleThumbPointerDown }))) : null));
+};
+exports.ScrollableWithScrollbar = ScrollableWithScrollbar;
+//# sourceMappingURL=ScrollableWithScrollbar.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ScrollableWithScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport {useScrollableScrollbarSync} from './useScrollableScrollbarSync';\n\nimport styles from './ScrollableWithScrollbar.module.scss';\n\nconst b = createBlock('scrollable-with-scrollbar', styles);\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\ntype ScrollableWithScrollbarProps = {\n children: ReactNode;\n className?: string;\n /**\n * Extra dependencies that should trigger a recalculation of the bottom\n * shadow and custom scrollbar thumb (e.g. when the rendered items change).\n */\n recalcDeps?: React.DependencyList;\n};\n\n// Hides the native scrollbar and renders a custom thumb synced with the\n// underlying scroll position. The scroll itself stays native (wheel / touch /\n// keyboard) — only the visual indicator and drag handling are custom, so the\n// reserved gutter width is identical across OS / browser scrollbar settings.\nexport const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps> = ({\n children,\n className,\n recalcDeps = EMPTY_DEPS,\n}) => {\n const {\n scrollRef,\n trackRef,\n thumbRef,\n hasContentBelow,\n overflows,\n thumb,\n scheduleUpdate,\n handleThumbPointerDown,\n handleTrackPointerDown,\n } = useScrollableScrollbarSync(recalcDeps);\n\n return (\n <div className={b({'bottom-shadow': hasContentBelow}, className)}>\n <div ref={scrollRef} className={b('scrollable-inner')} onScroll={scheduleUpdate}>\n {children}\n </div>\n\n {overflows ? (\n <div\n ref={trackRef}\n className={b('scrollbar-track')}\n onPointerDown={handleTrackPointerDown}\n aria-hidden=\"true\"\n >\n <div\n ref={thumbRef}\n className={b('scrollbar-thumb')}\n style={{transform: `translateY(${thumb.top}px)`, height: thumb.height}}\n onPointerDown={handleThumbPointerDown}\n />\n </div>\n ) : null}\n </div>\n );\n};\n"],"names":["createBlock","styles","useScrollableScrollbarSync"],"mappings":";;;;;;;AAQA,MAAM,CAAC,GAAGA,cAAW,CAAC,2BAA2B,EAAEC,sCAAM,CAAC;AAE1D,MAAM,UAAU,GAAyB,EAAE;AAY3C;AACA;AACA;AACA;AACO,MAAM,uBAAuB,GAAqC,CAAC,EACtE,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,UAAU,GAC1B,KAAI;IACD,MAAM,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,SAAS,EACT,KAAK,EACL,cAAc,EACd,sBAAsB,EACtB,sBAAsB,GACzB,GAAGC,qDAA0B,CAAC,UAAU,CAAC;AAE1C,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,EAAC,eAAe,EAAE,eAAe,EAAC,EAAE,SAAS,CAAC,EAAA;AAC5D,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAA,EAC1E,QAAQ,CACP;QAEL,SAAS,IACN,6BACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,aAAa,EAAE,sBAAsB,iBACzB,MAAM,EAAA;AAElB,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,KAAK,EAAE,EAAC,SAAS,EAAE,CAAA,WAAA,EAAc,KAAK,CAAC,GAAG,CAAK,GAAA,CAAA,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAC,EACtE,aAAa,EAAE,sBAAsB,EACvC,CAAA,CACA,IACN,IAAI,CACN;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js ADDED Viewed

@@ -0,0 +1,8 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var styles = {"gn-scrollable-with-scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gnScrollableWithScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gn-scrollable-with-scrollbar_bottom-shadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gnScrollableWithScrollbarBottomShadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gn-scrollable-with-scrollbar__scrollable-inner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gnScrollableWithScrollbarScrollableInner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gn-scrollable-with-scrollbar__scrollbar-track":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gnScrollableWithScrollbarScrollbarTrack":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gn-scrollable-with-scrollbar__scrollbar-thumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h","gnScrollableWithScrollbarScrollbarThumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h"};
+exports.default = styles;
+//# sourceMappingURL=ScrollableWithScrollbar.module.scss.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js.map ADDED Viewed

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

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { ScrollableWithScrollbar } from './ScrollableWithScrollbar';

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import React from 'react';
+type ThumbGeometry = {
+    top: number;
+    height: number;
+};
+type UseScrollableScrollbarSyncResult = {
+    scrollRef: React.RefObject<HTMLDivElement>;
+    trackRef: React.RefObject<HTMLDivElement>;
+    thumbRef: React.RefObject<HTMLDivElement>;
+    hasContentBelow: boolean;
+    overflows: boolean;
+    thumb: ThumbGeometry;
+    scheduleUpdate: () => void;
+    handleThumbPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handleTrackPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+/**
+ * Keeps a custom scrollbar thumb and bottom shadow in sync with a native
+ * scroll layer. The scroll element handles touch/keyboard; wheel events on the
+ * overlay track are forwarded to it (the track sits above the scroller, so
+ * they would not scroll otherwise).
+ *
+ * @param recalcDeps - extra deps that should trigger thumb/shadow recalculation
+ * @returns refs, scroll state, thumb geometry, and pointer handlers for the UI
+ */
+export declare function useScrollableScrollbarSync(recalcDeps?: React.DependencyList): UseScrollableScrollbarSyncResult;
+export {};