npm - @gravity-ui/navigation - Versions diffs - 6.6.0 → 7.0.0-beta.1 - Mend

@gravity-ui/navigation 6.6.0 → 7.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 (298) hide show

package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts CHANGED Viewed

@@ -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/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js CHANGED Viewed

@@ -1,61 +1,177 @@
 import React__default from 'react';
-import { List, Popover } from '@gravity-ui/uikit';
+import { useThemeValue, List, Popover } from '@gravity-ui/uikit';
+import { POPUP_REGULAR_ITEM_HEIGHT } from '../../../../constants.js';
 import { createBlock } from '../../../../utils/cn.js';
-import { getSelectedItemIndex, getPopupItemHeight, getPopupItemsHeight } from '../utils.js';
+import { useSafeAsideHeaderContext } from '../../../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig, getAsideHeaderDensityCssProperties } from '../../../density.js';
+import { isItemPresentationCurrent } from '../presentationCurrent.js';
+import { getPopupItemHeight } from '../utils.js';
 import { Item } from './Item.js';
 import { ItemPopupNestContext } from './ItemPopupNestContext.js';
 import styles from './Item.module.scss.js';
 const b = createBlock('composite-bar-item', styles);
+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 = useSafeAsideHeaderContext();
+    const parentPopupNest = React__default.useContext(ItemPopupNestContext);
+    const theme = useThemeValue();
+    const densityConfig = getAsideHeaderDensityConfig(asideHeaderContext === null || asideHeaderContext === undefined ? undefined : asideHeaderContext.menuDensity);
     const nestedOpenCountRef = React__default.useRef(0);
-    const popoverOffset = React__default.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__default.useRef(false);
+    const interactionInsideRef = React__default.useRef(false);
+    const popupContentRef = React__default.useRef(null);
+    const triggerElementRef = React__default.useRef(null);
+    const onOpenChangeRef = React__default.useRef(onOpenChange);
+    const densityCssProperties = getAsideHeaderDensityCssProperties(asideHeaderContext === null || asideHeaderContext === undefined ? undefined : asideHeaderContext.menuDensity);
+    const isSingleLabel = variant === 'label';
+    const soloPopupTheme = theme.endsWith('-hc') ? 'dark-hc' : 'dark';
+    React__default.useEffect(() => {
+        onOpenChangeRef.current = onOpenChange;
+    }, [onOpenChange]);
+    const popoverStyle = React__default.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__default.useCallback((item) => isSingleLabel ? SOLO_LABEL_POPUP_ITEM_HEIGHT : getPopupItemHeight(item), [isSingleLabel]);
+    const popupItemsHeight = React__default.useCallback((listItems) => listItems.reduce((sum, item) => sum + popupItemHeight(item), 0), [popupItemHeight]);
+    const popoverOffset = React__default.useMemo(() => getItemPopoverOffset({
+        isSingleLabel,
+        itemHeight: densityConfig.itemHeight,
+        popupRowHeight: POPUP_REGULAR_ITEM_HEIGHT,
+        titleHeight: title ? POPUP_TITLE_BLOCK_HEIGHT : 0,
+        nested: Boolean(parentPopupNest),
+    }), [densityConfig.itemHeight, isSingleLabel, parentPopupNest, title]);
     const registerNestedOpen = React__default.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__default.useMemo(() => ({ registerNestedOpen }), [registerNestedOpen]);
     const wrappedOnOpenChange = React__default.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__default.useCallback(() => {
+        interactionInsideRef.current = true;
+        deferredCloseRef.current = false;
+    }, []);
+    const markInteractionRegionLeft = React__default.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__default.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__default.useMemo(() => items.map((item) => item.type === 'action' ? Object.assign(Object.assign({}, item), { type: 'regular' }) : item), [items]);
+    const sourceItemsById = React__default.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selectedPopupItemIndex = React__default.useMemo(() => {
+        if (!highlightCurrentItem) {
+            return undefined;
+        }
+        const index = popupItems.findIndex((item) => isItemPresentationCurrent(item, { suppressCurrentItemIds }));
+        return index === -1 ? undefined : index;
+    }, [highlightCurrentItem, popupItems, suppressCurrentItemIds]);
     if (!popupItems.length) {
         return children;
     }
     const content = (React__default.createElement(ItemPopupNestContext.Provider, { value: nestContextValue },
-        React__default.createElement("div", { className: b('popup-content', { collapsed }), onClick: handlePopupContentClick },
+        React__default.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__default.createElement("div", { className: b('popup-title') }, title),
-            React__default.createElement(List, { items: popupItems, selectedItemIndex: getSelectedItemIndex(popupItems), itemHeight: getPopupItemHeight, itemsHeight: getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(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__default.createElement(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__default.createElement(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__default.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__default.createElement(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_theme_${soloPopupTheme}` : undefined), style: popoverStyle, content: content }, trigger));
 };
 ItemPopup.displayName = 'ItemPopup';
-export { ItemPopup };
+export { ItemPopup, getItemPopoverOffset };
 //# sourceMappingURL=ItemPopup.js.map

package/build/esm/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';\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":["React"],"mappings":"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"}
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, 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_theme_${soloPopupTheme}` : undefined,\n )}\n style={popoverStyle}\n content={content}\n >\n {trigger}\n </Popover>\n );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.d.ts ADDED Viewed

@@ -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/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js ADDED Viewed

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

package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js.map ADDED Viewed

@@ -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":["React"],"mappings":";;;;;;;AAUA,MAAM,CAAC,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAOtC,MAAA,kBAAkB,GAAsC,CAAC,EAAC,WAAW,EAAE,QAAQ,EAAC,KAAI;AAC7F,IAAA,MAAM,KAAK,GAAG,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC;IACjF,MAAM,WAAW,GAAGA,cAAK,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,QACIA,cAAA,CAAA,aAAA,CAAC,MAAM,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;QAEZA,cAAC,CAAA,aAAA,CAAA,MAAM,CAAC,IAAI,EAAA,IAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,GAAG,GAAI,CACjC,CACT;AAEjB;AAEA,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/build/esm/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.d.ts CHANGED Viewed

@@ -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/esm/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.js CHANGED Viewed

@@ -4,7 +4,11 @@ import styles from './Item.module.scss.js';
 const b = createBlock('composite-bar-item', styles);
 function renderItemTitle(params) {
-    let titleNode = React__default.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__default.createElement("div", { className: b('title-text', { lines: titleLines === 2 ? '2' : undefined }) }, params.title));
     if (params.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,

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

	@@ -1 +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":["React"],"mappings":";;;;AAQA,MAAM,CAAC,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAE7C,SAAU,eAAe,CAAC,~~MAAyD~~,EAAA;~~AACrF~~,IAAA,IAAI,SAAS,~~GAAGA~~,~~cAAK~~,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,IACLA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;YACV,SAAS;AACV,YAAAA,cAAA,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;;;;"}
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(\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":["React"],"mappings":";;;;AAQA,MAAM,CAAC,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,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,IACTA,cAAA,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,IACLA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;YACV,SAAS;AACV,YAAAA,cAAA,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/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.css CHANGED Viewed

	@@ -1 +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))}
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: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/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.d.ts CHANGED Viewed

@@ -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/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js CHANGED Viewed

@@ -1,19 +1,28 @@
 import './ScrollableWithScrollbar.css';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import { createBlock } from '../../../../utils/cn.js';
+import { AsideDivider } from '../../AsideDivider.js';
 import { useScrollableScrollbarSync } from './useScrollableScrollbarSync.js';
 import styles from './ScrollableWithScrollbar.module.scss.js';
 const b = createBlock('scrollable-with-scrollbar', styles);
-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(recalcDeps);
-    return (React__default.createElement("div", { className: b({ 'bottom-shadow': hasContentBelow }, className) },
-        React__default.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();
+    useEffect(() => {
+        onOverflowChange === null || onOverflowChange === undefined ? undefined : onOverflowChange(overflows);
+    }, [onOverflowChange, overflows]);
+    useEffect(() => {
+        return () => onOverflowChange === null || onOverflowChange === undefined ? undefined : onOverflowChange(false);
+    }, [onOverflowChange]);
+    return (React__default.createElement("div", { className: b({ 'shadow-start': canScrollUp, 'shadow-end': canScrollDown }, className) },
+        React__default.createElement("div", { ref: scrollRef, className: b('scrollable-inner'), onScroll: scheduleUpdate, "data-gn-aside-scrollport": true }, children),
+        showScrollDividers && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(AsideDivider, { transitionId: "scroll-start", className: b('scroll-divider', { start: true, visible: canScrollUp }) }),
+            React__default.createElement(AsideDivider, { transitionId: "scroll-end", className: b('scroll-divider', { end: true, visible: canScrollDown }) }))),
         overflows ? (React__default.createElement("div", { ref: trackRef, className: b('scrollbar-track'), onPointerDown: handleTrackPointerDown, "aria-hidden": "true" },
             React__default.createElement("div", { ref: thumbRef, className: b('scrollbar-thumb'), style: { transform: `translateY(${thumb.top}px)`, height: thumb.height }, onPointerDown: handleThumbPointerDown }))) : null));
 };

package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js.map CHANGED Viewed

	@@ -1 +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":["React"],"mappings":"~~;;;;;AAQA~~,MAAM,CAAC,GAAG,WAAW,CAAC,2BAA2B,EAAE,MAAM,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,GAAG,0BAA0B,CAAC,~~UAAU~~,CAAC;~~AAE1C~~,IAAA,QACIA,~~cAAA~~,CAAA,aAAA,CAAA,KAAA,EAAA,~~EAAK~~,SAAS,EAAE,CAAC,CAAC,EAAC,~~eAAe~~,EAAE,~~eAAe~~,EAAC,EAAE,SAAS,CAAC,EAAA;~~AAC5D~~,QAAAA,cAAA,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,IACNA,sCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,aAAa,EAAE,sBAAsB,iBACzB,MAAM,EAAA;AAElB,YAAAA,cAAA,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;;;;"}
1	+ {"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":["React"],"mappings":";;;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,2BAA2B,EAAE,MAAM,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,GAAG,0BAA0B,EAAE;IAEhC,SAAS,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;IAEjC,SAAS,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,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAC,EAAE,SAAS,CAAC,EAAA;AACpF,QAAAA,cAAA,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,KACfA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;YACXA,cAAC,CAAA,aAAA,CAAA,YAAY,IACT,YAAY,EAAC,cAAc,EAC3B,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAC,CAAC,EACrE,CAAA;YACFA,cAAC,CAAA,aAAA,CAAA,YAAY,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,IACNA,sCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,aAAa,EAAE,sBAAsB,iBACzB,MAAM,EAAA;AAElB,YAAAA,cAAA,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/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js CHANGED Viewed

@@ -1,4 +1,4 @@
-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"};
 export { styles as default };
 //# sourceMappingURL=ScrollableWithScrollbar.module.scss.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts CHANGED Viewed

@@ -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 {};