@gravity-ui/navigation 6.6.0 → 7.0.0-beta.0

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
+import { PopupProps } from '@gravity-ui/uikit';
 import { AsideHeaderItem } from '../../../types';
+import type { QuickAccessToggleHandler } from './Item.types';
+export declare function getItemPopoverOffset({ isSingleLabel, itemHeight, popupRowHeight, titleHeight, nested, }: {
+    isSingleLabel: boolean;
+    itemHeight: number;
+    popupRowHeight: number;
+    titleHeight?: number;
+    /** The popup opens from a row inside another popup. */
+    nested?: boolean;
+}): NonNullable<PopupProps['offset']>;
 interface Props {
     items: AsideHeaderItem[];
+    /** `label` is the minimal popup used by one compact leaf item. */
+    variant?: 'menu' | 'label';
     /** Optional title rendered at the top of the popup. */
     title?: string;
     open?: boolean;
@@ -9,11 +21,18 @@ interface Props {
     type?: string;
     collapsed?: boolean;
     hideIcon?: boolean;
+    /** Icon visibility for a child popup opened from a row in this popup. */
+    nestedPopupHideIcon?: boolean;
     itemClassName?: string;
     children: React.ReactElement;
     onOpenChange?: (open: boolean) => void;
     onPopupItemClick?: AsideHeaderItem['onItemClick'];
     onItemClick?: AsideHeaderItem['onItemClick'];
+    /** Controls selected styling without altering the source items passed to callbacks. */
+    highlightCurrentItem?: boolean;
+    enableQuickAccessPin?: boolean;
+    onToggleQuickAccess?: QuickAccessToggleHandler;
+    suppressCurrentItemIds?: ReadonlySet<string>;
 }
 export declare const ItemPopup: React.FC<Props>;
 export {};

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

@@ -2,62 +2,179 @@
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
+var constants = require('../../../../constants.js');
 var cn = require('../../../../utils/cn.js');
+var AsideHeaderContext = require('../../../AsideHeaderContext.js');
+var density = require('../../../density.js');
+var presentationCurrent = require('../presentationCurrent.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 POPUP_PADDING = 4;
 const POPUP_MAIN_AXIS_OFFSET = 14;
-const POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;
-const POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;
-const DEFAULT_POPUP_DELAY = 100;
-const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, children, onPopupItemClick, onItemClick, onOpenChange, }) => {
+/** Whitespace between the painted borders of two chained popups. */
+const NESTED_POPUP_GAP = 4;
+/** `.g-popup` paints its border as a 1px shadow spread outside the border box. */
+const POPUP_SHADOW_RING = 1;
+const SOLO_LABEL_POPUP_ITEM_HEIGHT = 28;
+const SOLO_LABEL_POPUP_BORDER_RADIUS = 4;
+const POPUP_TITLE_BLOCK_HEIGHT = 30;
+const DEFAULT_POPUP_DELAY = 0;
+function getItemPopoverOffset({ isSingleLabel, itemHeight, popupRowHeight, titleHeight = 0, nested = false, }) {
+    if (isSingleLabel) {
+        return { mainAxis: POPUP_MAIN_AXIS_OFFSET, crossAxis: 0 };
+    }
+    // A nested popup anchors to a row that sits `POPUP_PADDING` inside the parent popup
+    // border box, and both popups paint a shadow ring outside that box. Compensate for
+    // both so chained popups keep `NESTED_POPUP_GAP` of whitespace at any density.
+    const mainAxis = nested
+        ? NESTED_POPUP_GAP + 2 * POPUP_SHADOW_RING + POPUP_PADDING
+        : POPUP_MAIN_AXIS_OFFSET;
+    const firstRowOffsetInAnchor = (itemHeight - popupRowHeight) / 2;
+    return {
+        mainAxis,
+        crossAxis: firstRowOffsetInAnchor - POPUP_PADDING - titleHeight,
+    };
+}
+const ItemPopup = ({ items, variant = 'menu', itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, nestedPopupHideIcon, children, onPopupItemClick, onItemClick, onOpenChange, highlightCurrentItem = true, enableQuickAccessPin, onToggleQuickAccess, suppressCurrentItemIds, }) => {
+    const asideHeaderContext = AsideHeaderContext.useSafeAsideHeaderContext();
+    const parentPopupNest = React.useContext(ItemPopupNestContext.ItemPopupNestContext);
+    const theme = uikit.useThemeValue();
+    const densityConfig = density.getAsideHeaderDensityConfig(asideHeaderContext === null || asideHeaderContext === undefined ? undefined : asideHeaderContext.menuDensity);
     const nestedOpenCountRef = React.useRef(0);
-    const popoverOffset = React.useMemo(() => ({
-        mainAxis: POPUP_MAIN_AXIS_OFFSET,
-        crossAxis: title
-            ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE
-            : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,
-    }), [title]);
-    const isSingleLabel = !title && items.length === 1;
+    // A nested portaled popup temporarily blocks the parent's hover-close. Remember that close
+    // request and replay it after the child closes, unless the pointer/focus returned to the parent.
+    const deferredCloseRef = React.useRef(false);
+    const interactionInsideRef = React.useRef(false);
+    const popupContentRef = React.useRef(null);
+    const triggerElementRef = React.useRef(null);
+    const onOpenChangeRef = React.useRef(onOpenChange);
+    const densityCssProperties = density.getAsideHeaderDensityCssProperties(asideHeaderContext === null || asideHeaderContext === undefined ? undefined : asideHeaderContext.menuDensity);
+    const isSingleLabel = variant === 'label';
+    const soloPopupTheme = theme.endsWith('-hc') ? 'dark-hc' : 'dark';
+    React.useEffect(() => {
+        onOpenChangeRef.current = onOpenChange;
+    }, [onOpenChange]);
+    const popoverStyle = React.useMemo(() => {
+        const popupPadding = isSingleLabel ? 0 : POPUP_PADDING;
+        const popupBorderRadius = isSingleLabel
+            ? SOLO_LABEL_POPUP_BORDER_RADIUS
+            : densityConfig.itemExpandedRadius + popupPadding;
+        return Object.assign(Object.assign({}, densityCssProperties), { '--_--popup-padding': `${popupPadding}px`, '--_--popup-border-radius': `${popupBorderRadius}px`, '--_--popup-title-height': `${POPUP_TITLE_BLOCK_HEIGHT}px`, '--g-popup-border-radius': `${popupBorderRadius}px`, 
+            // Popovers must appear instantly. `PopoverProps` does not expose Popup's
+            // `disableTransition`, so the enter/exit animation is disabled here; the
+            // style lands on the same `.g-popup` element that owns the transition.
+            transition: 'none' });
+    }, [densityConfig.itemExpandedRadius, densityCssProperties, isSingleLabel]);
+    const popupItemHeight = React.useCallback((item) => isSingleLabel ? SOLO_LABEL_POPUP_ITEM_HEIGHT : utils.getPopupItemHeight(item), [isSingleLabel]);
+    const popupItemsHeight = React.useCallback((listItems) => listItems.reduce((sum, item) => sum + popupItemHeight(item), 0), [popupItemHeight]);
+    const popoverOffset = React.useMemo(() => getItemPopoverOffset({
+        isSingleLabel,
+        itemHeight: densityConfig.itemHeight,
+        popupRowHeight: constants.POPUP_REGULAR_ITEM_HEIGHT,
+        titleHeight: title ? POPUP_TITLE_BLOCK_HEIGHT : 0,
+        nested: Boolean(parentPopupNest),
+    }), [densityConfig.itemHeight, isSingleLabel, parentPopupNest, title]);
     const registerNestedOpen = React.useCallback((delta) => {
+        var _a;
         nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
+        if (nestedOpenCountRef.current === 0 &&
+            deferredCloseRef.current &&
+            !interactionInsideRef.current) {
+            deferredCloseRef.current = false;
+            (_a = onOpenChangeRef.current) === null || _a === undefined ? undefined : _a.call(onOpenChangeRef, false);
+        }
     }, []);
     const nestContextValue = React.useMemo(() => ({ registerNestedOpen }), [registerNestedOpen]);
     const wrappedOnOpenChange = React.useCallback((next) => {
         if (!next && nestedOpenCountRef.current > 0) {
+            deferredCloseRef.current = true;
             return;
         }
+        deferredCloseRef.current = false;
         onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(next);
     }, [onOpenChange]);
+    const markInteractionRegionEntered = React.useCallback(() => {
+        interactionInsideRef.current = true;
+        deferredCloseRef.current = false;
+    }, []);
+    const markInteractionRegionLeft = React.useCallback((relatedTarget) => {
+        var _a, _b;
+        const nextTarget = relatedTarget instanceof Node ? relatedTarget : null;
+        const remainsInside = Boolean(nextTarget &&
+            (((_a = triggerElementRef.current) === null || _a === undefined ? undefined : _a.contains(nextTarget)) ||
+                ((_b = popupContentRef.current) === null || _b === undefined ? undefined : _b.contains(nextTarget))));
+        if (!remainsInside) {
+            interactionInsideRef.current = false;
+        }
+    }, []);
     const handlePopupContentClick = React.useCallback((event) => {
         event.stopPropagation();
     }, []);
     // Inside a popup list, action items must look like regular menu rows, not floating
     // action buttons (e.g. when an `action` item overflows into the "More" popup).
     const popupItems = React.useMemo(() => items.map((item) => item.type === 'action' ? Object.assign(Object.assign({}, item), { type: 'regular' }) : item), [items]);
+    const sourceItemsById = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selectedPopupItemIndex = React.useMemo(() => {
+        if (!highlightCurrentItem) {
+            return undefined;
+        }
+        const index = popupItems.findIndex((item) => presentationCurrent.isItemPresentationCurrent(item, { suppressCurrentItemIds }));
+        return index === -1 ? undefined : index;
+    }, [highlightCurrentItem, popupItems, suppressCurrentItemIds]);
     if (!popupItems.length) {
         return children;
     }
     const content = (React.createElement(ItemPopupNestContext.ItemPopupNestContext.Provider, { value: nestContextValue },
-        React.createElement("div", { className: b('popup-content', { collapsed }), onClick: handlePopupContentClick },
+        React.createElement("div", { ref: popupContentRef, className: b('popup-content', { collapsed, 'single-label': isSingleLabel }), onClick: handlePopupContentClick, onMouseEnter: markInteractionRegionEntered, onMouseLeave: (event) => markInteractionRegionLeft(event.relatedTarget), onFocusCapture: markInteractionRegionEntered, onBlurCapture: (event) => markInteractionRegionLeft(event.relatedTarget) },
             title && React.createElement("div", { className: b('popup-title') }, title),
-            React.createElement(uikit.List, { items: popupItems, selectedItemIndex: utils.getSelectedItemIndex(popupItems), 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: !item.itemWrapper, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
-                        var _a;
-                        if (!item.current) {
-                            onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
-                        }
-                        (_a = (onPopupItemClick !== null && onPopupItemClick !== undefined ? onPopupItemClick : onItemClick)) === null || _a === undefined ? undefined : _a(item, collapsed, event);
-                    } }))) }))));
+            React.createElement(uikit.List, { items: popupItems, selectedItemIndex: selectedPopupItemIndex, itemHeight: popupItemHeight, itemsHeight: popupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => {
+                    var _a;
+                    const sourceItem = (_a = sourceItemsById.get(item.id)) !== null && _a !== undefined ? _a : item;
+                    return (React.createElement(Item.Item, Object.assign({}, item, { rowRef: undefined, qa: undefined, compact: false, menuPopupRow: true, suppressCurrentHighlight: !highlightCurrentItem, suppressCurrentItemIds: suppressCurrentItemIds, className: b('popup-item'), hideIcon: hideIcon, menuPopupHideIcon: nestedPopupHideIcon, stopClickPropagation: !sourceItem.itemWrapper, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, enableQuickAccessPin: !isSingleLabel && enableQuickAccessPin, quickAccessPinItem: sourceItem, onToggleQuickAccess: isSingleLabel ? undefined : onToggleQuickAccess, onItemClick: (_innerItem, _innerCollapsed, event) => {
+                            var _a;
+                            if (!sourceItem.current) {
+                                onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
+                            }
+                            (_a = (onPopupItemClick !== null && onPopupItemClick !== undefined ? onPopupItemClick : onItemClick)) === null || _a === undefined ? undefined : _a(sourceItem, collapsed, event);
+                        } })));
+                } }))));
+    const triggerProps = children.props;
+    const trigger = React.cloneElement(children, {
+        onMouseEnter: (event) => {
+            var _a;
+            triggerElementRef.current = event.currentTarget;
+            markInteractionRegionEntered();
+            (_a = triggerProps.onMouseEnter) === null || _a === undefined ? undefined : _a.call(triggerProps, event);
+        },
+        onMouseLeave: (event) => {
+            var _a;
+            markInteractionRegionLeft(event.relatedTarget);
+            (_a = triggerProps.onMouseLeave) === null || _a === undefined ? undefined : _a.call(triggerProps, event);
+        },
+        onFocus: (event) => {
+            var _a;
+            triggerElementRef.current = event.currentTarget;
+            markInteractionRegionEntered();
+            (_a = triggerProps.onFocus) === null || _a === undefined ? undefined : _a.call(triggerProps, event);
+        },
+        onBlur: (event) => {
+            var _a;
+            markInteractionRegionLeft(event.relatedTarget);
+            (_a = triggerProps.onBlur) === null || _a === undefined ? undefined : _a.call(triggerProps, event);
+        },
+    });
     return (React.createElement(uikit.Popover, { disabled: disabled, open: open, onOpenChange: (nextOpen) => {
             if (nextOpen && disabled)
                 return;
             wrappedOnOpenChange(nextOpen);
-        }, placement: isSingleLabel ? 'right' : 'right-start', strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
+        }, placement: isSingleLabel ? 'right' : 'right-start', strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type, 'single-label': isSingleLabel }, isSingleLabel ? `g-root g-root_theme_${soloPopupTheme}` : undefined), style: popoverStyle, content: content }, trigger));
 };
 ItemPopup.displayName = 'ItemPopup';
 
 exports.ItemPopup = ItemPopup;
+exports.getItemPopoverOffset = getItemPopoverOffset;
 //# sourceMappingURL=ItemPopup.js.map

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

@@ -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';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\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    onPopupItemClick?: AsideHeaderItem['onItemClick'];\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    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () => ({\n            mainAxis: POPUP_MAIN_AXIS_OFFSET,\n            crossAxis: title\n                ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n                : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n        }),\n        [title],\n    );\n\n    const isSingleLabel = !title && items.length === 1;\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    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    // Inside a popup list, action items must look like regular menu rows, not floating\n    // action buttons (e.g. when an `action` item overflows into the \"More\" popup).\n    const popupItems = React.useMemo(\n        () =>\n            items.map((item) =>\n                item.type === 'action' ? {...item, type: 'regular' as const} : item,\n            ),\n        [items],\n    );\n\n    if (!popupItems.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={popupItems}\n                    selectedItemIndex={getSelectedItemIndex(popupItems)}\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={!item.itemWrapper}\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                if (!item.current) {\n                                    onOpenChange?.(false);\n                                }\n\n                                (onPopupItemClick ?? 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={isSingleLabel ? 'right' : 'right-start'}\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\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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"}
+{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps, useThemeValue} from '@gravity-ui/uikit';\n\nimport {POPUP_REGULAR_ITEM_HEIGHT} from '../../../../constants';\nimport {createBlock} from '../../../../utils/cn';\nimport {useSafeAsideHeaderContext} from '../../../AsideHeaderContext';\nimport {getAsideHeaderDensityConfig, getAsideHeaderDensityCssProperties} from '../../../density';\nimport {AsideHeaderItem} from '../../../types';\nimport {isItemPresentationCurrent} from '../presentationCurrent';\nimport {getPopupItemHeight} from '../utils';\n\nimport {Item} from './Item';\nimport type {QuickAccessToggleHandler} from './Item.types';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_PADDING = 4;\nconst POPUP_MAIN_AXIS_OFFSET = 14;\n/** Whitespace between the painted borders of two chained popups. */\nconst NESTED_POPUP_GAP = 4;\n/** `.g-popup` paints its border as a 1px shadow spread outside the border box. */\nconst POPUP_SHADOW_RING = 1;\nconst SOLO_LABEL_POPUP_ITEM_HEIGHT = 28;\nconst SOLO_LABEL_POPUP_BORDER_RADIUS = 4;\nconst POPUP_TITLE_BLOCK_HEIGHT = 30;\nconst DEFAULT_POPUP_DELAY = 0;\n\nexport function getItemPopoverOffset({\n    isSingleLabel,\n    itemHeight,\n    popupRowHeight,\n    titleHeight = 0,\n    nested = false,\n}: {\n    isSingleLabel: boolean;\n    itemHeight: number;\n    popupRowHeight: number;\n    titleHeight?: number;\n    /** The popup opens from a row inside another popup. */\n    nested?: boolean;\n}): NonNullable<PopupProps['offset']> {\n    if (isSingleLabel) {\n        return {mainAxis: POPUP_MAIN_AXIS_OFFSET, crossAxis: 0};\n    }\n\n    // A nested popup anchors to a row that sits `POPUP_PADDING` inside the parent popup\n    // border box, and both popups paint a shadow ring outside that box. Compensate for\n    // both so chained popups keep `NESTED_POPUP_GAP` of whitespace at any density.\n    const mainAxis = nested\n        ? NESTED_POPUP_GAP + 2 * POPUP_SHADOW_RING + POPUP_PADDING\n        : POPUP_MAIN_AXIS_OFFSET;\n    const firstRowOffsetInAnchor = (itemHeight - popupRowHeight) / 2;\n\n    return {\n        mainAxis,\n        crossAxis: firstRowOffsetInAnchor - POPUP_PADDING - titleHeight,\n    };\n}\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** `label` is the minimal popup used by one compact leaf item. */\n    variant?: 'menu' | 'label';\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    /** Icon visibility for a child popup opened from a row in this popup. */\n    nestedPopupHideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onPopupItemClick?: AsideHeaderItem['onItemClick'];\n    onItemClick?: AsideHeaderItem['onItemClick'];\n    /** Controls selected styling without altering the source items passed to callbacks. */\n    highlightCurrentItem?: boolean;\n    enableQuickAccessPin?: boolean;\n    onToggleQuickAccess?: QuickAccessToggleHandler;\n    suppressCurrentItemIds?: ReadonlySet<string>;\n}\n\ntype PopupTriggerInteractionProps = {\n    onMouseEnter?: React.MouseEventHandler<HTMLElement>;\n    onMouseLeave?: React.MouseEventHandler<HTMLElement>;\n    onFocus?: React.FocusEventHandler<HTMLElement>;\n    onBlur?: React.FocusEventHandler<HTMLElement>;\n};\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    variant = 'menu',\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    nestedPopupHideIcon,\n    children,\n    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n    highlightCurrentItem = true,\n    enableQuickAccessPin,\n    onToggleQuickAccess,\n    suppressCurrentItemIds,\n}) => {\n    const asideHeaderContext = useSafeAsideHeaderContext();\n    const parentPopupNest = React.useContext(ItemPopupNestContext);\n    const theme = useThemeValue();\n    const densityConfig = getAsideHeaderDensityConfig(asideHeaderContext?.menuDensity);\n    const nestedOpenCountRef = React.useRef(0);\n    // A nested portaled popup temporarily blocks the parent's hover-close. Remember that close\n    // request and replay it after the child closes, unless the pointer/focus returned to the parent.\n    const deferredCloseRef = React.useRef(false);\n    const interactionInsideRef = React.useRef(false);\n    const popupContentRef = React.useRef<HTMLDivElement>(null);\n    const triggerElementRef = React.useRef<HTMLElement | null>(null);\n    const onOpenChangeRef = React.useRef(onOpenChange);\n    const densityCssProperties = getAsideHeaderDensityCssProperties(\n        asideHeaderContext?.menuDensity,\n    );\n\n    const isSingleLabel = variant === 'label';\n    const soloPopupTheme = theme.endsWith('-hc') ? 'dark-hc' : 'dark';\n\n    React.useEffect(() => {\n        onOpenChangeRef.current = onOpenChange;\n    }, [onOpenChange]);\n\n    const popoverStyle = React.useMemo(() => {\n        const popupPadding = isSingleLabel ? 0 : POPUP_PADDING;\n        const popupBorderRadius = isSingleLabel\n            ? SOLO_LABEL_POPUP_BORDER_RADIUS\n            : densityConfig.itemExpandedRadius + popupPadding;\n\n        return {\n            ...densityCssProperties,\n            '--_--popup-padding': `${popupPadding}px`,\n            '--_--popup-border-radius': `${popupBorderRadius}px`,\n            '--_--popup-title-height': `${POPUP_TITLE_BLOCK_HEIGHT}px`,\n            '--g-popup-border-radius': `${popupBorderRadius}px`,\n            // Popovers must appear instantly. `PopoverProps` does not expose Popup's\n            // `disableTransition`, so the enter/exit animation is disabled here; the\n            // style lands on the same `.g-popup` element that owns the transition.\n            transition: 'none',\n        } as React.CSSProperties;\n    }, [densityConfig.itemExpandedRadius, densityCssProperties, isSingleLabel]);\n\n    const popupItemHeight = React.useCallback(\n        (item: AsideHeaderItem) =>\n            isSingleLabel ? SOLO_LABEL_POPUP_ITEM_HEIGHT : getPopupItemHeight(item),\n        [isSingleLabel],\n    );\n\n    const popupItemsHeight = React.useCallback(\n        (listItems: AsideHeaderItem[]) =>\n            listItems.reduce((sum, item) => sum + popupItemHeight(item), 0),\n        [popupItemHeight],\n    );\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () =>\n            getItemPopoverOffset({\n                isSingleLabel,\n                itemHeight: densityConfig.itemHeight,\n                popupRowHeight: POPUP_REGULAR_ITEM_HEIGHT,\n                titleHeight: title ? POPUP_TITLE_BLOCK_HEIGHT : 0,\n                nested: Boolean(parentPopupNest),\n            }),\n        [densityConfig.itemHeight, isSingleLabel, parentPopupNest, title],\n    );\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n\n        if (\n            nestedOpenCountRef.current === 0 &&\n            deferredCloseRef.current &&\n            !interactionInsideRef.current\n        ) {\n            deferredCloseRef.current = false;\n            onOpenChangeRef.current?.(false);\n        }\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                deferredCloseRef.current = true;\n                return;\n            }\n\n            deferredCloseRef.current = false;\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    const markInteractionRegionEntered = React.useCallback(() => {\n        interactionInsideRef.current = true;\n        deferredCloseRef.current = false;\n    }, []);\n\n    const markInteractionRegionLeft = React.useCallback((relatedTarget: EventTarget | null) => {\n        const nextTarget = relatedTarget instanceof Node ? relatedTarget : null;\n        const remainsInside = Boolean(\n            nextTarget &&\n                (triggerElementRef.current?.contains(nextTarget) ||\n                    popupContentRef.current?.contains(nextTarget)),\n        );\n\n        if (!remainsInside) {\n            interactionInsideRef.current = false;\n        }\n    }, []);\n\n    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    // Inside a popup list, action items must look like regular menu rows, not floating\n    // action buttons (e.g. when an `action` item overflows into the \"More\" popup).\n    const popupItems = React.useMemo(\n        () =>\n            items.map((item) =>\n                item.type === 'action' ? {...item, type: 'regular' as const} : item,\n            ),\n        [items],\n    );\n    const sourceItemsById = React.useMemo(\n        () => new Map(items.map((item) => [item.id, item])),\n        [items],\n    );\n    const selectedPopupItemIndex = React.useMemo(() => {\n        if (!highlightCurrentItem) {\n            return undefined;\n        }\n\n        const index = popupItems.findIndex((item) =>\n            isItemPresentationCurrent(item, {suppressCurrentItemIds}),\n        );\n\n        return index === -1 ? undefined : index;\n    }, [highlightCurrentItem, popupItems, suppressCurrentItemIds]);\n\n    if (!popupItems.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div\n                ref={popupContentRef}\n                className={b('popup-content', {collapsed, 'single-label': isSingleLabel})}\n                onClick={handlePopupContentClick}\n                onMouseEnter={markInteractionRegionEntered}\n                onMouseLeave={(event) => markInteractionRegionLeft(event.relatedTarget)}\n                onFocusCapture={markInteractionRegionEntered}\n                onBlurCapture={(event) => markInteractionRegionLeft(event.relatedTarget)}\n            >\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={popupItems}\n                    selectedItemIndex={selectedPopupItemIndex}\n                    itemHeight={popupItemHeight}\n                    itemsHeight={popupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => {\n                        const sourceItem = sourceItemsById.get(item.id) ?? item;\n\n                        return (\n                            <Item\n                                {...item}\n                                rowRef={undefined}\n                                qa={undefined}\n                                compact={false}\n                                menuPopupRow\n                                suppressCurrentHighlight={!highlightCurrentItem}\n                                suppressCurrentItemIds={suppressCurrentItemIds}\n                                className={b('popup-item')}\n                                hideIcon={hideIcon}\n                                menuPopupHideIcon={nestedPopupHideIcon}\n                                stopClickPropagation={!sourceItem.itemWrapper}\n                                enableTooltip={false}\n                                bringForward={false}\n                                popupVisible={false}\n                                renderPopupContent={undefined}\n                                onOpenChangePopup={undefined}\n                                popupRef={undefined}\n                                enableQuickAccessPin={!isSingleLabel && enableQuickAccessPin}\n                                quickAccessPinItem={sourceItem}\n                                onToggleQuickAccess={\n                                    isSingleLabel ? undefined : onToggleQuickAccess\n                                }\n                                onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                    if (!sourceItem.current) {\n                                        onOpenChange?.(false);\n                                    }\n\n                                    (onPopupItemClick ?? onItemClick)?.(\n                                        sourceItem,\n                                        collapsed,\n                                        event,\n                                    );\n                                }}\n                            />\n                        );\n                    }}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    const triggerProps = children.props as PopupTriggerInteractionProps;\n    const trigger = React.cloneElement(\n        children as React.ReactElement<PopupTriggerInteractionProps>,\n        {\n            onMouseEnter: (event) => {\n                triggerElementRef.current = event.currentTarget;\n                markInteractionRegionEntered();\n                triggerProps.onMouseEnter?.(event);\n            },\n            onMouseLeave: (event) => {\n                markInteractionRegionLeft(event.relatedTarget);\n                triggerProps.onMouseLeave?.(event);\n            },\n            onFocus: (event) => {\n                triggerElementRef.current = event.currentTarget;\n                markInteractionRegionEntered();\n                triggerProps.onFocus?.(event);\n            },\n            onBlur: (event) => {\n                markInteractionRegionLeft(event.relatedTarget);\n                triggerProps.onBlur?.(event);\n            },\n        },\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={isSingleLabel ? 'right' : 'right-start'}\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\n            enableSafePolygon\n            className={b(\n                'icon-popover',\n                {'item-type': type, 'single-label': isSingleLabel},\n                isSingleLabel ? `g-root g-root_theme_${soloPopupTheme}` : undefined,\n            )}\n            style={popoverStyle}\n            content={content}\n        >\n            {trigger}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["createBlock","styles","useSafeAsideHeaderContext","ItemPopupNestContext","useThemeValue","getAsideHeaderDensityConfig","getAsideHeaderDensityCssProperties","getPopupItemHeight","POPUP_REGULAR_ITEM_HEIGHT","isItemPresentationCurrent","List","Item","Popover"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ItemQuickAccessPinProps = {
+    quickAccess?: boolean;
+    onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const ItemQuickAccessPin: React.FC<ItemQuickAccessPinProps>;
+export {};

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var icons = require('@gravity-ui/icons');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../../../../utils/cn.js');
+var index = require('../../../i18n/index.js');
+var Item_module = require('./Item.module.scss.js');
+
+const b = cn.createBlock('composite-bar-item', Item_module.default);
+const ItemQuickAccessPin = ({ quickAccess, onToggle }) => {
+    const label = quickAccess ? index.default('quick_access_unpin') : index.default('quick_access_pin');
+    const handleClick = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onToggle(event);
+    }, [onToggle]);
+    return (React.createElement(uikit.Button, { className: b('quick-access-pin', { pinned: quickAccess }), view: "flat-secondary", size: "s", onClick: handleClick, "aria-label": label, title: label },
+        React.createElement(uikit.Button.Icon, null,
+            React.createElement(uikit.Icon, { data: quickAccess ? icons.PinFill : icons.Pin }))));
+};
+ItemQuickAccessPin.displayName = 'ItemQuickAccessPin';
+
+exports.ItemQuickAccessPin = ItemQuickAccessPin;
+//# sourceMappingURL=ItemQuickAccessPin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemQuickAccessPin.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Pin, PinFill} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport i18n from '../../../i18n';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\ntype ItemQuickAccessPinProps = {\n    quickAccess?: boolean;\n    onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const ItemQuickAccessPin: React.FC<ItemQuickAccessPinProps> = ({quickAccess, onToggle}) => {\n    const label = quickAccess ? i18n('quick_access_unpin') : i18n('quick_access_pin');\n    const handleClick = React.useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            onToggle(event);\n        },\n        [onToggle],\n    );\n\n    return (\n        <Button\n            className={b('quick-access-pin', {pinned: quickAccess})}\n            view=\"flat-secondary\"\n            size=\"s\"\n            onClick={handleClick}\n            aria-label={label}\n            title={label}\n        >\n            <Button.Icon>\n                <Icon data={quickAccess ? PinFill : Pin} />\n            </Button.Icon>\n        </Button>\n    );\n};\n\nItemQuickAccessPin.displayName = 'ItemQuickAccessPin';\n"],"names":["createBlock","styles","i18n","Button","Icon","PinFill","Pin"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,cAAW,CAAC,oBAAoB,EAAEC,mBAAM,CAAC;AAOtC,MAAA,kBAAkB,GAAsC,CAAC,EAAC,WAAW,EAAE,QAAQ,EAAC,KAAI;AAC7F,IAAA,MAAM,KAAK,GAAG,WAAW,GAAGC,aAAI,CAAC,oBAAoB,CAAC,GAAGA,aAAI,CAAC,kBAAkB,CAAC;IACjF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAA0C,KAAI;QAC3C,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;QACvB,QAAQ,CAAC,KAAK,CAAC;AACnB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAACC,YAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,EAAC,MAAM,EAAE,WAAW,EAAC,CAAC,EACvD,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,WAAW,EACR,YAAA,EAAA,KAAK,EACjB,KAAK,EAAE,KAAK,EAAA;QAEZ,KAAC,CAAA,aAAA,CAAAA,YAAM,CAAC,IAAI,EAAA,IAAA;AACR,YAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAC,EAAA,IAAI,EAAE,WAAW,GAAGC,aAAO,GAAGC,SAAG,GAAI,CACjC,CACT;AAEjB;AAEA,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AsideHeaderItem } from 'src/components/AsideHeader/types';
-export declare function renderItemTitle(params: Pick<AsideHeaderItem, 'title' | 'rightAdornment'>): React.JSX.Element;
+export declare function renderItemTitle(params: Pick<AsideHeaderItem, 'title' | 'rightAdornment' | 'titleLines'>): React.JSX.Element;

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

@@ -6,7 +6,11 @@ var Item_module = require('./Item.module.scss.js');
 
 const b = cn.createBlock('composite-bar-item', Item_module.default);
 function renderItemTitle(params) {
-    let titleNode = React.createElement("div", { className: b('title-text') }, params.title);
+    var _a;
+    // Preserve the pre-v7 two-line fallback. Consumers opt into the new
+    // single-line presentation explicitly with `titleLines: 1`.
+    const titleLines = (_a = params.titleLines) !== null && _a !== undefined ? _a : 2;
+    let titleNode = (React.createElement("div", { className: b('title-text', { lines: titleLines === 2 ? '2' : undefined }) }, params.title));
     if (params.rightAdornment) {
         titleNode = (React.createElement(React.Fragment, null,
             titleNode,

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

@@ -1 +1 @@
-{"version":3,"file":"renderItemTitle.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderItem} from 'src/components/AsideHeader/types';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nexport function renderItemTitle(params: Pick<AsideHeaderItem, 'title' | 'rightAdornment'>) {\n    let titleNode = <div className={b('title-text')}>{params.title}</div>;\n\n    if (params.rightAdornment) {\n        titleNode = (\n            <React.Fragment>\n                {titleNode}\n                <div className={b('title-adornment')}>{params.rightAdornment}</div>\n            </React.Fragment>\n        );\n    }\n\n    return titleNode;\n}\n"],"names":["createBlock","styles"],"mappings":";;;;;;AAQA,MAAM,CAAC,GAAGA,cAAW,CAAC,oBAAoB,EAAEC,mBAAM,CAAC;AAE7C,SAAU,eAAe,CAAC,MAAyD,EAAA;AACrF,IAAA,IAAI,SAAS,GAAG,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAG,EAAA,MAAM,CAAC,KAAK,CAAO;AAErE,IAAA,IAAI,MAAM,CAAC,cAAc,EAAE;AACvB,QAAA,SAAS,IACL,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAA,IAAA;YACV,SAAS;AACV,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAG,EAAA,MAAM,CAAC,cAAc,CAAO,CACtD,CACpB;;AAGL,IAAA,OAAO,SAAS;AACpB;;;;"}
+{"version":3,"file":"renderItemTitle.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderItem} from 'src/components/AsideHeader/types';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nexport function renderItemTitle(\n    params: Pick<AsideHeaderItem, 'title' | 'rightAdornment' | 'titleLines'>,\n) {\n    // Preserve the pre-v7 two-line fallback. Consumers opt into the new\n    // single-line presentation explicitly with `titleLines: 1`.\n    const titleLines = params.titleLines ?? 2;\n    let titleNode = (\n        <div className={b('title-text', {lines: titleLines === 2 ? '2' : undefined})}>\n            {params.title}\n        </div>\n    );\n\n    if (params.rightAdornment) {\n        titleNode = (\n            <React.Fragment>\n                {titleNode}\n                <div className={b('title-adornment')}>{params.rightAdornment}</div>\n            </React.Fragment>\n        );\n    }\n\n    return titleNode;\n}\n"],"names":["createBlock","styles"],"mappings":";;;;;;AAQA,MAAM,CAAC,GAAGA,cAAW,CAAC,oBAAoB,EAAEC,mBAAM,CAAC;AAE7C,SAAU,eAAe,CAC3B,MAAwE,EAAA;;;;IAIxE,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,CAAC;AACzC,IAAA,IAAI,SAAS,IACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,UAAU,KAAK,CAAC,GAAG,GAAG,GAAG,SAAS,EAAC,CAAC,EAAA,EACvE,MAAM,CAAC,KAAK,CACX,CACT;AAED,IAAA,IAAI,MAAM,CAAC,cAAc,EAAE;AACvB,QAAA,SAAS,IACL,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAA,IAAA;YACV,SAAS;AACV,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAG,EAAA,MAAM,CAAC,cAAc,CAAO,CACtD,CACpB;;AAGL,IAAA,OAAO,SAAS;AACpB;;;;"}

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

@@ -1 +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))}
+.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:after, .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:before{content:"";height:12px;inset-inline:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out;z-index:2}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:before{background:linear-gradient(to bottom,var(--g-color-sfx-shadow),transparent);inset-block-start:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:after{background:linear-gradient(to top,var(--g-color-sfx-shadow),transparent);inset-block-end:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-end___WH4ZY:after, .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-start___dQ8Jw:before{opacity:.7}.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__scroll-divider___QV96G{background-color:var(--gn-aside-header-divider-horizontal-color,var(--g-color-line-generic));height:1px;inset-inline:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out;z-index:2}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_start___jneED{inset-block-start:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_end___YqNPa{inset-block-end:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_visible___B7td6{opacity:1}.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}

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

@@ -1,12 +1,10 @@
-import React, { FC, ReactNode } from 'react';
+import { 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;
+    showScrollDividers?: boolean;
+    /** Called when scrollable content overflows the allocated height. */
+    onOverflowChange?: (overflows: boolean) => void;
 };
 export declare const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps>;
 export {};

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

@@ -3,19 +3,28 @@ import './ScrollableWithScrollbar.css';
 
 var React = require('react');
 var cn = require('../../../../utils/cn.js');
+var AsideDivider = require('../../AsideDivider.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),
+const ScrollableWithScrollbar = ({ children, className, showScrollDividers = false, onOverflowChange, }) => {
+    const { scrollRef, trackRef, thumbRef, overflows, canScrollUp, canScrollDown, thumb, scheduleUpdate, handleThumbPointerDown, handleTrackPointerDown, } = useScrollableScrollbarSync.useScrollableScrollbarSync();
+    React.useEffect(() => {
+        onOverflowChange === null || onOverflowChange === undefined ? undefined : onOverflowChange(overflows);
+    }, [onOverflowChange, overflows]);
+    React.useEffect(() => {
+        return () => onOverflowChange === null || onOverflowChange === undefined ? undefined : onOverflowChange(false);
+    }, [onOverflowChange]);
+    return (React.createElement("div", { className: b({ 'shadow-start': canScrollUp, 'shadow-end': canScrollDown }, className) },
+        React.createElement("div", { ref: scrollRef, className: b('scrollable-inner'), onScroll: scheduleUpdate, "data-gn-aside-scrollport": true }, children),
+        showScrollDividers && (React.createElement(React.Fragment, null,
+            React.createElement(AsideDivider.AsideDivider, { transitionId: "scroll-start", className: b('scroll-divider', { start: true, visible: canScrollUp }) }),
+            React.createElement(AsideDivider.AsideDivider, { transitionId: "scroll-end", className: b('scroll-divider', { end: true, visible: canScrollDown }) }))),
         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));
 };

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

@@ -1 +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;;;;"}
+{"version":3,"file":"ScrollableWithScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useEffect} from 'react';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideDivider} from '../../AsideDivider';\n\nimport {useScrollableScrollbarSync} from './useScrollableScrollbarSync';\n\nimport styles from './ScrollableWithScrollbar.module.scss';\n\nconst b = createBlock('scrollable-with-scrollbar', styles);\n\ntype ScrollableWithScrollbarProps = {\n    children: ReactNode;\n    className?: string;\n    showScrollDividers?: boolean;\n    /** Called when scrollable content overflows the allocated height. */\n    onOverflowChange?: (overflows: boolean) => void;\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    showScrollDividers = false,\n    onOverflowChange,\n}) => {\n    const {\n        scrollRef,\n        trackRef,\n        thumbRef,\n        overflows,\n        canScrollUp,\n        canScrollDown,\n        thumb,\n        scheduleUpdate,\n        handleThumbPointerDown,\n        handleTrackPointerDown,\n    } = useScrollableScrollbarSync();\n\n    useEffect(() => {\n        onOverflowChange?.(overflows);\n    }, [onOverflowChange, overflows]);\n\n    useEffect(() => {\n        return () => onOverflowChange?.(false);\n    }, [onOverflowChange]);\n\n    return (\n        <div className={b({'shadow-start': canScrollUp, 'shadow-end': canScrollDown}, className)}>\n            <div\n                ref={scrollRef}\n                className={b('scrollable-inner')}\n                onScroll={scheduleUpdate}\n                data-gn-aside-scrollport\n            >\n                {children}\n            </div>\n\n            {showScrollDividers && (\n                <React.Fragment>\n                    <AsideDivider\n                        transitionId=\"scroll-start\"\n                        className={b('scroll-divider', {start: true, visible: canScrollUp})}\n                    />\n                    <AsideDivider\n                        transitionId=\"scroll-end\"\n                        className={b('scroll-divider', {end: true, visible: canScrollDown})}\n                    />\n                </React.Fragment>\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","useEffect","AsideDivider"],"mappings":";;;;;;;;AASA,MAAM,CAAC,GAAGA,cAAW,CAAC,2BAA2B,EAAEC,sCAAM,CAAC;AAU1D;AACA;AACA;AACA;AACa,MAAA,uBAAuB,GAAqC,CAAC,EACtE,QAAQ,EACR,SAAS,EACT,kBAAkB,GAAG,KAAK,EAC1B,gBAAgB,GACnB,KAAI;IACD,MAAM,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,aAAa,EACb,KAAK,EACL,cAAc,EACd,sBAAsB,EACtB,sBAAsB,GACzB,GAAGC,qDAA0B,EAAE;IAEhCC,eAAS,CAAC,MAAK;AACX,QAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAA,SAAA,GAAhB,gBAAgB,CAAG,SAAS,CAAC;AACjC,KAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAEjCA,eAAS,CAAC,MAAK;QACX,OAAO,MAAM,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAA,SAAA,GAAhB,gBAAgB,CAAG,KAAK,CAAC;AAC1C,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAEtB,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAC,EAAE,SAAS,CAAC,EAAA;AACpF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAChC,QAAQ,EAAE,cAAc,EAAA,0BAAA,EAAA,IAAA,EAAA,EAGvB,QAAQ,CACP;AAEL,QAAA,kBAAkB,KACf,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAA,IAAA;YACX,KAAC,CAAA,aAAA,CAAAC,yBAAY,IACT,YAAY,EAAC,cAAc,EAC3B,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAC,CAAC,EACrE,CAAA;YACF,KAAC,CAAA,aAAA,CAAAA,yBAAY,EACT,EAAA,YAAY,EAAC,YAAY,EACzB,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC,CAAC,EACrE,CAAA,CACW,CACpB;QACA,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

@@ -2,7 +2,7 @@
 
 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"};
+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_shadow-start":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-start___dQ8Jw","gnScrollableWithScrollbarShadowStart":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-start___dQ8Jw","gn-scrollable-with-scrollbar_shadow-end":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-end___WH4ZY","gnScrollableWithScrollbarShadowEnd":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_shadow-end___WH4ZY","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__scroll-divider":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider___QV96G","gnScrollableWithScrollbarScrollDivider":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider___QV96G","gn-scrollable-with-scrollbar__scroll-divider_start":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_start___jneED","gnScrollableWithScrollbarScrollDividerStart":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_start___jneED","gn-scrollable-with-scrollbar__scroll-divider_end":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_end___YqNPa","gnScrollableWithScrollbarScrollDividerEnd":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_end___YqNPa","gn-scrollable-with-scrollbar__scroll-divider_visible":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_visible___B7td6","gnScrollableWithScrollbarScrollDividerVisible":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scroll-divider_visible___B7td6","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/useScrollableScrollbarSync.d.ts

@@ -7,22 +7,22 @@ type UseScrollableScrollbarSyncResult = {
     scrollRef: React.RefObject<HTMLDivElement>;
     trackRef: React.RefObject<HTMLDivElement>;
     thumbRef: React.RefObject<HTMLDivElement>;
-    hasContentBelow: boolean;
     overflows: boolean;
+    canScrollUp: boolean;
+    canScrollDown: 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). Wheel, touch, and keyboard on the
- * scrollable area itself are unchanged.
+ * Keeps a custom scrollbar thumb 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). Wheel, touch, and keyboard on the scrollable area itself are
+ * unchanged.
  *
- * @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 declare function useScrollableScrollbarSync(): UseScrollableScrollbarSyncResult;
 export {};