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

package/build/cjs/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var React = require('react');
+
+const CollapseAnchorContext = React.createContext(undefined);
+// offset geometry deliberately excludes the coordinator's in-flight transforms.
+function layoutTop(element, panel) {
+    let top = 0;
+    let current = element;
+    while (current && current !== panel) {
+        top += current.offsetTop;
+        current = current.offsetParent;
+    }
+    // Fixed-position descendants can leave this offset chain. Never treat their
+    // partial viewport-relative offset as a position inside the aside.
+    return current === panel ? top : null;
+}
+function visible(element, footer) {
+    for (let current = element; current; current = current.parentElement) {
+        const style = getComputedStyle(current);
+        if (current.hidden ||
+            style.display === 'none' ||
+            style.visibility === 'hidden' ||
+            style.visibility === 'collapse')
+            return false;
+        if (current === footer)
+            return true;
+    }
+    return false;
+}
+function useCollapseAnchor(enabled, compact) {
+    var _a;
+    const panelRef = React.useRef(null);
+    const footerRef = React.useRef(null);
+    const slotRef = React.useRef(null);
+    const fallbackRef = React.useRef(null);
+    const rows = React.useRef(new Map());
+    const reconcileRef = React.useRef();
+    const [selection, setSelection] = React.useState(null);
+    const selectionRef = React.useRef(null);
+    const register = React.useCallback((element, id) => {
+        var _a;
+        rows.current.set(element, id);
+        (_a = reconcileRef.current) === null || _a === undefined ? undefined : _a.call(reconcileRef);
+        return () => {
+            var _a;
+            rows.current.delete(element);
+            (_a = reconcileRef.current) === null || _a === undefined ? undefined : _a.call(reconcileRef);
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        if (!enabled || !panelRef.current || !footerRef.current) {
+            setSelection(null);
+            return undefined;
+        }
+        const panel = panelRef.current;
+        const footer = footerRef.current;
+        const heights = new WeakMap();
+        const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize);
+        const measure = () => {
+            var _a, _b;
+            const row = (_b = (_a = selectionRef.current) === null || _a === undefined ? undefined : _a.element) !== null && _b !== undefined ? _b : fallbackRef.current;
+            const slot = slotRef.current;
+            if (!row || !slot)
+                return;
+            const rowTop = layoutTop(row, panel);
+            if (rowTop === null) {
+                slot.style.removeProperty('top');
+                slot.style.removeProperty('bottom');
+                return;
+            }
+            const top = rowTop + (row.offsetHeight - slot.offsetHeight) / 2;
+            slot.style.top = `${top}px`;
+            slot.style.bottom = 'auto';
+        };
+        function reconcile() {
+            var _a, _b, _c, _d, _e;
+            let last = null;
+            rows.current.forEach((_id, row) => {
+                if (!footer.contains(row) || !visible(row, footer))
+                    return;
+                // DOM order can change without registration order changing.
+                // eslint-disable-next-line no-bitwise
+                if (!last || last.compareDocumentPosition(row) & Node.DOCUMENT_POSITION_FOLLOWING)
+                    last = row;
+            });
+            const id = last ? rows.current.get(last) : undefined;
+            if (last !== ((_b = (_a = selectionRef.current) === null || _a === undefined ? undefined : _a.element) !== null && _b !== undefined ? _b : null) ||
+                id !== ((_c = selectionRef.current) === null || _c === undefined ? undefined : _c.id)) {
+                if (selectionRef.current) {
+                    resize === null || resize === undefined ? undefined : resize.unobserve(selectionRef.current.element);
+                    selectionRef.current.element.removeAttribute('data-gn-collapse-anchor');
+                }
+                // Changing the anchor invalidates only the slot's Y effect.
+                (_e = (_d = slotRef.current) === null || _d === undefined ? undefined : _d.getAnimations) === null || _e === undefined ? undefined : _e.call(_d).forEach((animation) => {
+                    if (!('transitionProperty' in animation))
+                        animation.cancel();
+                });
+                const next = last && id ? { element: last, id } : null;
+                selectionRef.current = next;
+                if (next) {
+                    next.element.setAttribute('data-gn-collapse-anchor', '');
+                    resize === null || resize === undefined ? undefined : resize.observe(next.element);
+                }
+                setSelection(next);
+            }
+            measure();
+        }
+        function handleResize(entries) {
+            let heightChanged = false;
+            entries.forEach(({ target, contentRect }) => {
+                if (heights.get(target) !== contentRect.height)
+                    heightChanged = true;
+                heights.set(target, contentRect.height);
+            });
+            // The flex layout tracks horizontal movement. Only a height change
+            // requires vertical measurement during the compact width transition.
+            if (entries.length && !heightChanged && panel.hasAttribute('data-gn-aside-animating'))
+                return;
+            // Idle resizes may change CSS visibility without a DOM mutation.
+            reconcile();
+        }
+        resize === null || resize === undefined ? undefined : resize.observe(panel);
+        resize === null || resize === undefined ? undefined : resize.observe(footer);
+        reconcileRef.current = reconcile;
+        reconcile();
+        const finishWidthTransition = (event) => {
+            if (event.target === panel && event.propertyName === 'width')
+                reconcile();
+        };
+        // Recheck CSS-only visibility after the width-only notifications skipped
+        // above, even when the last resize precedes the coordinator's cleanup.
+        panel.addEventListener('transitionend', finishWidthTransition);
+        panel.addEventListener('transitioncancel', finishWidthTransition);
+        const mutations = new MutationObserver(reconcile);
+        mutations.observe(footer, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['hidden', 'style', 'class'],
+        });
+        return () => {
+            var _a;
+            reconcileRef.current = undefined;
+            resize === null || resize === undefined ? undefined : resize.disconnect();
+            mutations.disconnect();
+            panel.removeEventListener('transitionend', finishWidthTransition);
+            panel.removeEventListener('transitioncancel', finishWidthTransition);
+            (_a = selectionRef.current) === null || _a === undefined ? undefined : _a.element.removeAttribute('data-gn-collapse-anchor');
+            selectionRef.current = null;
+        };
+    }, [enabled]);
+    React.useLayoutEffect(() => {
+        var _a;
+        (_a = reconcileRef.current) === null || _a === undefined ? undefined : _a.call(reconcileRef);
+    });
+    const context = React.useMemo(() => (enabled ? { register, selectedId: selection === null || selection === undefined ? undefined : selection.id, compact } : undefined), [enabled, register, selection, compact]);
+    return {
+        panelRef,
+        footerRef,
+        slotRef,
+        fallbackRef,
+        selected: (_a = selection === null || selection === undefined ? undefined : selection.element) !== null && _a !== undefined ? _a : null,
+        context,
+    };
+}
+
+exports.CollapseAnchorContext = CollapseAnchorContext;
+exports.useCollapseAnchor = useCollapseAnchor;
+//# sourceMappingURL=useCollapseAnchor.js.map

package/build/cjs/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapseAnchor.js","sources":["../../../../../../../src/components/AsideHeader/components/CollapseButton/useCollapseAnchor.tsx"],"sourcesContent":["import React from 'react';\n\ninterface Registration {\n    register: (element: HTMLElement, id: symbol) => () => void;\n    selectedId: symbol | undefined;\n    compact: boolean;\n}\n\ninterface Selection {\n    element: HTMLElement;\n    id: symbol;\n}\n\nexport const CollapseAnchorContext = React.createContext<Registration | undefined>(undefined);\n\n// offset geometry deliberately excludes the coordinator's in-flight transforms.\nfunction layoutTop(element: HTMLElement, panel: HTMLElement) {\n    let top = 0;\n    let current: HTMLElement | null = element;\n    while (current && current !== panel) {\n        top += current.offsetTop;\n        current = current.offsetParent as HTMLElement | null;\n    }\n    // Fixed-position descendants can leave this offset chain. Never treat their\n    // partial viewport-relative offset as a position inside the aside.\n    return current === panel ? top : null;\n}\n\nfunction visible(element: HTMLElement, footer: HTMLElement) {\n    for (let current: HTMLElement | null = element; current; current = current.parentElement) {\n        const style = getComputedStyle(current);\n        if (\n            current.hidden ||\n            style.display === 'none' ||\n            style.visibility === 'hidden' ||\n            style.visibility === 'collapse'\n        )\n            return false;\n        if (current === footer) return true;\n    }\n    return false;\n}\n\nexport function useCollapseAnchor(enabled: boolean, compact: boolean) {\n    const panelRef = React.useRef<HTMLDivElement>(null);\n    const footerRef = React.useRef<HTMLDivElement>(null);\n    const slotRef = React.useRef<HTMLDivElement>(null);\n    const fallbackRef = React.useRef<HTMLDivElement>(null);\n    const rows = React.useRef(new Map<HTMLElement, symbol>());\n    const reconcileRef = React.useRef<() => void>();\n    const [selection, setSelection] = React.useState<Selection | null>(null);\n    const selectionRef = React.useRef<Selection | null>(null);\n    const register = React.useCallback((element: HTMLElement, id: symbol) => {\n        rows.current.set(element, id);\n        reconcileRef.current?.();\n        return () => {\n            rows.current.delete(element);\n            reconcileRef.current?.();\n        };\n    }, []);\n\n    React.useLayoutEffect(() => {\n        if (!enabled || !panelRef.current || !footerRef.current) {\n            setSelection(null);\n            return undefined;\n        }\n        const panel = panelRef.current;\n        const footer = footerRef.current;\n        const heights = new WeakMap<Element, number>();\n        const resize =\n            typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize);\n        const measure = () => {\n            const row = selectionRef.current?.element ?? fallbackRef.current;\n            const slot = slotRef.current;\n            if (!row || !slot) return;\n            const rowTop = layoutTop(row, panel);\n            if (rowTop === null) {\n                slot.style.removeProperty('top');\n                slot.style.removeProperty('bottom');\n                return;\n            }\n            const top = rowTop + (row.offsetHeight - slot.offsetHeight) / 2;\n            slot.style.top = `${top}px`;\n            slot.style.bottom = 'auto';\n        };\n        function reconcile() {\n            let last: HTMLElement | null = null;\n            rows.current.forEach((_id, row) => {\n                if (!footer.contains(row) || !visible(row, footer)) return;\n                // DOM order can change without registration order changing.\n                // eslint-disable-next-line no-bitwise\n                if (!last || last.compareDocumentPosition(row) & Node.DOCUMENT_POSITION_FOLLOWING)\n                    last = row;\n            });\n            const id = last ? rows.current.get(last) : undefined;\n            if (\n                last !== (selectionRef.current?.element ?? null) ||\n                id !== selectionRef.current?.id\n            ) {\n                if (selectionRef.current) {\n                    resize?.unobserve(selectionRef.current.element);\n                    selectionRef.current.element.removeAttribute('data-gn-collapse-anchor');\n                }\n                // Changing the anchor invalidates only the slot's Y effect.\n                slotRef.current?.getAnimations?.().forEach((animation) => {\n                    if (!('transitionProperty' in animation)) animation.cancel();\n                });\n                const next: Selection | null = last && id ? {element: last, id} : null;\n                selectionRef.current = next;\n                if (next) {\n                    next.element.setAttribute('data-gn-collapse-anchor', '');\n                    resize?.observe(next.element);\n                }\n                setSelection(next);\n            }\n            measure();\n        }\n        function handleResize(entries: ResizeObserverEntry[]) {\n            let heightChanged = false;\n            entries.forEach(({target, contentRect}) => {\n                if (heights.get(target) !== contentRect.height) heightChanged = true;\n                heights.set(target, contentRect.height);\n            });\n            // The flex layout tracks horizontal movement. Only a height change\n            // requires vertical measurement during the compact width transition.\n            if (entries.length && !heightChanged && panel.hasAttribute('data-gn-aside-animating'))\n                return;\n            // Idle resizes may change CSS visibility without a DOM mutation.\n            reconcile();\n        }\n        resize?.observe(panel);\n        resize?.observe(footer);\n        reconcileRef.current = reconcile;\n        reconcile();\n        const finishWidthTransition = (event: TransitionEvent) => {\n            if (event.target === panel && event.propertyName === 'width') reconcile();\n        };\n        // Recheck CSS-only visibility after the width-only notifications skipped\n        // above, even when the last resize precedes the coordinator's cleanup.\n        panel.addEventListener('transitionend', finishWidthTransition);\n        panel.addEventListener('transitioncancel', finishWidthTransition);\n        const mutations = new MutationObserver(reconcile);\n        mutations.observe(footer, {\n            subtree: true,\n            childList: true,\n            attributes: true,\n            attributeFilter: ['hidden', 'style', 'class'],\n        });\n        return () => {\n            reconcileRef.current = undefined;\n            resize?.disconnect();\n            mutations.disconnect();\n            panel.removeEventListener('transitionend', finishWidthTransition);\n            panel.removeEventListener('transitioncancel', finishWidthTransition);\n            selectionRef.current?.element.removeAttribute('data-gn-collapse-anchor');\n            selectionRef.current = null;\n        };\n    }, [enabled]);\n    React.useLayoutEffect(() => {\n        reconcileRef.current?.();\n    });\n    const context = React.useMemo(\n        () => (enabled ? {register, selectedId: selection?.id, compact} : undefined),\n        [enabled, register, selection, compact],\n    );\n    return {\n        panelRef,\n        footerRef,\n        slotRef,\n        fallbackRef,\n        selected: selection?.element ?? null,\n        context,\n    };\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1,3 @@
-.CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS{display:flex;flex-direction:column;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21[class]{box-sizing:border-box;flex:0 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-[class]{padding-inline-start:var(--g-spacing-3);position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class]{background-color:transparent;overflow:visible;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb{box-sizing:content-box;display:flex;pointer-events:none;position:relative;width:16px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{background:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);bottom:0;content:"";height:100%;inset-inline-start:calc(50% - .5px);pointer-events:none;position:absolute;top:0;width:1px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX:before{background:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand));z-index:1}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH:last-child .CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{display:none}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7{fill:none;stroke:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);display:block;flex-shrink:0;height:40px;max-width:16px;min-width:16px;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf{stroke:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand))}.CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe{height:100%;min-width:0;width:100%}
+.CompositeBar-module__gn-composite-bar___WoCDY{--_--menu-group-tree-connector-width:16px;--_--menu-item-gap:0px;flex:1 0 auto;min-height:var(--_--gn-aside-header-density-item-height,40px);width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}.CompositeBar-module__gn-composite-bar_inline-groups___BsraQ .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class], .CompositeBar-module__gn-composite-bar_quick-access___zNlSe .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background:none;box-sizing:border-box;overflow:visible;padding-block-end:var(--_--menu-item-gap);position:relative}.CompositeBar-module__gn-composite-bar_inline-groups___BsraQ .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_active, .CompositeBar-module__gn-composite-bar_inline-groups___BsraQ .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_active.g-list__item_selected, .CompositeBar-module__gn-composite-bar_inline-groups___BsraQ .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_selected, .CompositeBar-module__gn-composite-bar_quick-access___zNlSe .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_active, .CompositeBar-module__gn-composite-bar_quick-access___zNlSe .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_active.g-list__item_selected, .CompositeBar-module__gn-composite-bar_quick-access___zNlSe .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class].g-list__item_selected{background:none}.CompositeBar-module__gn-composite-bar_inline-groups___BsraQ{--_--menu-item-gap:1px}.CompositeBar-module__gn-composite-bar_quick-access___zNlSe{--_--menu-item-gap:1px;--gn-aside-header-item-icon-color:var(
+      --gn-aside-header-general-item-icon-color,var(--g-color-text-primary)
+  );flex:none}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS{display:flex;flex-direction:column;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21[class]{box-sizing:border-box;flex:0 0 auto;min-height:var(--_--gn-aside-header-density-item-height,40px);width:100%}.CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-[class]{position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-[class] .CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb{inset-block:0;inset-inline-start:calc(var(--_--gn-aside-header-density-item-height, 40px)/2 - 8px);position:absolute}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class]>.g-list__item-content{overflow:visible}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class]{background-color:transparent;box-sizing:border-box;overflow:visible;padding-block-end:var(--_--menu-item-gap);position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class].g-list__item_active, .CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class].g-list__item_active.g-list__item_selected, .CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class].g-list__item_selected{background-color:transparent}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH:not(:last-child) .CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:after{background:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);bottom:calc(var(--_--menu-item-gap)*-1);content:"";inset-inline-start:calc(50% - .5px);pointer-events:none;position:absolute;top:0;width:1px;z-index:-1}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb{box-sizing:content-box;display:flex;isolation:isolate;overflow:visible;pointer-events:none;position:relative;width:16px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX:before{background:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand));bottom:calc(var(--_--menu-item-gap)*-1);content:"";inset-inline-start:calc(50% - .5px);pointer-events:none;position:absolute;top:0;width:1px;z-index:1}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7{fill:none;stroke:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);display:block;flex-shrink:0;height:var(--_--gn-aside-header-density-item-height,40px);inset-block-start:calc(var(--_--menu-group-tree-connector-hook-inset-block, 50%) - var(--_--gn-aside-header-density-item-height, 40px)/2);inset-inline-start:0;max-width:16px;min-width:16px;position:absolute}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf{stroke:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand))}[dir=rtl] .CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7{transform:scaleX(-1)}.CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe{height:100%;min-width:0;width:100%}

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

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { MenuGroup } from '../../../types';
 import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
+import { QuickAccessToggleHandler } from './Item/Item.types';
 type CompositeBarProps = {
-    type: 'menu' | 'subheader';
+    type: 'menu' | 'subheader' | 'quick-access';
     items: AsideHeaderItem[];
-    className?: string;
     menuGroups?: MenuGroup[];
     onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     menuMoreTitle?: string;
@@ -12,6 +12,13 @@ type CompositeBarProps = {
     compact: boolean;
     compositeId?: string;
     menuItemClassName?: string;
+    /**
+     * Target width of the autosized menu content, used before AutoSizer catches
+     * up with a layout transition. FirstPanel passes the aside width because
+     * the menu container spans it fully and horizontal spacing belongs to rows.
+     * If the container gains horizontal insets, pass its available content width.
+     */
+    layoutWidth?: number;
     /**
      * @see AsideHeaderMenuOverflow
      */
@@ -19,6 +26,10 @@ type CompositeBarProps = {
     collapsedMenuGroupIds?: Record<string, boolean>;
     defaultCollapsedMenuGroupIds?: Record<string, boolean>;
     onToggleMenuGroupCollapsed?: (groupId: string) => void;
+    enableQuickAccessPin?: boolean;
+    onToggleQuickAccess?: QuickAccessToggleHandler;
+    suppressCurrentItemIds?: ReadonlySet<string>;
+    menuGroupNestedIcons?: boolean;
 };
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

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

@@ -5,24 +5,32 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var AutoSizer = require('react-virtualized-auto-sizer');
 var cn = require('../../../utils/cn.js');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
 var Item = require('./Item/Item.js');
-var ScrollableWithScrollbar = require('./ScrollableWithScrollbar/ScrollableWithScrollbar.js');
 var constants = require('./constants.js');
 var grouping = require('./grouping.js');
+var presentationCurrent = require('./presentationCurrent.js');
 var utils = require('./utils.js');
 var CompositeBar_module = require('./CompositeBar.module.scss.js');
 
 const b = cn.createBlock('composite-bar', CompositeBar_module.default);
 /** Row L-connector: vertical segment + rounded hook. viewBox matches `variables.$item-height`. */
 const MENU_GROUP_NESTED_TREE_CONNECTOR_PATH = 'M8.03125 0V10.07935C8.03125 15.558375 11.5846 20 15.9678 20';
-const CompositeBarView = ({ type, rows, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, inlineGroupChildren, isGroupCollapsed, onToggleGroupCollapsed, }) => {
+const CompositeBarView = ({ type, rows, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, inlineGroupChildren, isGroupCollapsed, onToggleGroupCollapsed, enableQuickAccessPin, onToggleQuickAccess, suppressCurrentItemIds, menuGroupNestedIcons = true, }) => {
     const ref = React.useRef(null);
+    const { menuDensity } = AsideHeaderContext.useAsideHeaderContext();
+    const hideNestedIcons = !menuGroupNestedIcons;
+    const itemLayout = React.useMemo(() => (compact ? { sidebarCompact: true } : undefined), [compact]);
     const onMouseLeave = React.useCallback(() => {
         var _a;
         if (compact && document.hasFocus()) {
-            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
+            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem();
         }
     }, [compact]);
+    const deactivateParentListItem = React.useCallback(() => {
+        var _a;
+        (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem();
+    }, []);
     const onPopupItemClick = React.useCallback((item, collapsed, event) => {
         onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
     }, [onItemClick]);
@@ -36,16 +44,24 @@ const CompositeBarView = ({ type, rows, onItemClick, onMoreClick, collapseItems,
     }, [onItemClick, onMoreClick]);
     const itemHeight = React.useCallback((row) => {
         if (row.kind === 'item') {
-            return utils.getItemHeight(row.item);
+            return utils.getItemHeight(row.item, menuDensity, itemLayout);
         }
-        const headerH = utils.getItemHeight(utils.makeGroupHeaderAsideItem(row.group));
+        const headerH = utils.getItemHeight(utils.makeGroupHeaderAsideItem(row.group), menuDensity, itemLayout);
         if (!inlineGroupChildren || isGroupCollapsed(row.group.id)) {
             return headerH;
         }
-        return headerH + utils.getItemsHeight(row.items);
-    }, [inlineGroupChildren, isGroupCollapsed]);
+        return headerH + utils.getItemsHeight(row.items, menuDensity, itemLayout);
+    }, [inlineGroupChildren, isGroupCollapsed, itemLayout, menuDensity]);
+    const nestedItemHeight = React.useCallback((item) => utils.getItemHeight(item, menuDensity, itemLayout), [itemLayout, menuDensity]);
+    const nestedItemsHeight = React.useCallback((listItems) => utils.getItemsHeight(listItems, menuDensity, itemLayout), [itemLayout, menuDensity]);
     const itemsHeight = React.useCallback((listRows) => listRows.reduce((sum, row) => sum + itemHeight(row), 0), [itemHeight]);
-    return (React.createElement(uikit.List, { id: compositeId, ref: ref, items: rows, selectedItemIndex: type === 'menu' ? utils.getSelectedCompositeBarRowIndex(rows) : undefined, itemHeight: itemHeight, itemsHeight: itemsHeight, itemClassName: b('root-menu-item', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (row) => {
+    const selectedRootItemIndex = React.useMemo(() => {
+        if (type !== 'menu') {
+            return undefined;
+        }
+        return utils.getSelectedCompositeBarRowIndex(rows, suppressCurrentItemIds);
+    }, [rows, suppressCurrentItemIds, type]);
+    return (React.createElement(uikit.List, { id: compositeId, ref: ref, className: inlineGroupChildren ? b({ 'inline-groups': true }) : undefined, items: rows, selectedItemIndex: selectedRootItemIndex, itemHeight: itemHeight, itemsHeight: itemsHeight, itemClassName: b('root-menu-item', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (row) => {
             if (row.kind === 'item') {
                 const item = row.item;
                 let menuPopupItems;
@@ -57,48 +73,50 @@ const CompositeBarView = ({ type, rows, onItemClick, onMoreClick, collapseItems,
                     menuPopupItems = item.compositeBarMenuPopupItems;
                     menuPopupTitle = item.compositeBarMenuPopupTitle;
                 }
-                return (React.createElement(Item.Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onPopupItemClick: onPopupItemClick, onItemClick: onItemClickByIndex(item.onItemClick) })));
+                return (React.createElement(Item.Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, menuPopupNestedHideIcon: hideNestedIcons, onMouseLeave: onMouseLeave, onPopupItemClick: onPopupItemClick, onItemClick: onItemClickByIndex(item.onItemClick), suppressCurrentItemIds: suppressCurrentItemIds, enableQuickAccessPin: enableQuickAccessPin, quickAccessPinItem: item, onToggleQuickAccess: onToggleQuickAccess })));
             }
             const headerItem = utils.makeGroupHeaderAsideItem(row.group);
             const groupIsCollapsed = isGroupCollapsed(row.group.id);
             const groupHasOwnAction = Boolean(row.group.onItemClick || row.group.href);
             const onHeaderItemClick = onItemClickByIndex(row.group.onItemClick);
             if (!inlineGroupChildren) {
-                return (React.createElement(Item.Item, Object.assign({}, headerItem, { href: row.group.href, compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: row.items, menuPopupTitle: row.group.popupTitle, className: b('menu-group-header'), hideCompactChevron: row.group.hideCompactChevron, onMouseLeave: onMouseLeave, onPopupItemClick: onPopupItemClick, onItemClick: onHeaderItemClick })));
+                return (React.createElement(Item.Item, Object.assign({}, headerItem, { href: row.group.href, compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: row.items, menuPopupTitle: row.group.popupTitle, menuPopupHideIcon: hideNestedIcons, className: b('menu-group-header'), onMouseLeave: onMouseLeave, onPopupItemClick: onPopupItemClick, onItemClick: onHeaderItemClick, suppressCurrentItemIds: suppressCurrentItemIds, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess })));
             }
-            const selectedItemIndex = utils.getSelectedItemIndex(row.items);
-            return (React.createElement("div", { className: b('menu-group', {
+            const selectedItemIndex = row.items.findIndex((item) => presentationCurrent.isItemPresentationCurrent(item, { suppressCurrentItemIds }));
+            const normalizedSelectedItemIndex = selectedItemIndex === -1 ? undefined : selectedItemIndex;
+            return (React.createElement("div", { "data-gn-aside-group": row.group.id, className: b('menu-group', {
                     expanded: !groupIsCollapsed,
                     collapsed: groupIsCollapsed,
-                }) },
-                React.createElement(Item.Item, Object.assign({}, headerItem, { href: row.group.href, compact: compact, popupItemClassName: menuItemClassName, className: b('menu-group-header'), groupHeaderExpanded: !groupIsCollapsed, onMouseLeave: onMouseLeave, onGroupHeaderChevronClick: groupHasOwnAction
+                }), onMouseEnter: deactivateParentListItem },
+                React.createElement(Item.Item, Object.assign({}, headerItem, { href: row.group.href, compact: compact, popupItemClassName: menuItemClassName, className: b('menu-group-header'), groupHeaderExpanded: !groupIsCollapsed, menuPopupItems: groupIsCollapsed ? row.items : undefined, menuPopupTitle: groupIsCollapsed ? row.group.popupTitle : undefined, menuPopupHideIcon: hideNestedIcons, onMouseLeave: onMouseLeave, onPopupItemClick: onPopupItemClick, onGroupHeaderChevronClick: groupHasOwnAction
                         ? () => onToggleGroupCollapsed(row.group.id)
                         : undefined, onItemClick: (item, isItemCollapsed, event) => {
                         if (!groupHasOwnAction) {
                             onToggleGroupCollapsed(row.group.id);
                         }
                         onHeaderItemClick(item, isItemCollapsed, event);
-                    } })),
-                !groupIsCollapsed && (React.createElement(uikit.List, { items: row.items, selectedItemIndex: selectedItemIndex, itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, itemClassName: b('menu-group-nested-list-item'), virtualized: false, filterable: false, sortable: false, renderItem: (nestedItem, _isActive, groupItemIndex) => {
-                        const spineActive = selectedItemIndex !== undefined &&
-                            groupItemIndex < selectedItemIndex;
+                    }, suppressCurrentItemIds: suppressCurrentItemIds, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess })),
+                !groupIsCollapsed && (React.createElement(uikit.List, { items: row.items, selectedItemIndex: normalizedSelectedItemIndex, itemHeight: nestedItemHeight, itemsHeight: nestedItemsHeight, itemClassName: b('menu-group-nested-list-item'), virtualized: false, filterable: false, sortable: false, renderItem: (nestedItem, _isActive, groupItemIndex) => {
+                        const spineActive = normalizedSelectedItemIndex !== undefined &&
+                            groupItemIndex < normalizedSelectedItemIndex;
                         return (React.createElement("div", { className: b('menu-group-nested-row-inner') },
                             React.createElement(Item.Item, Object.assign({}, nestedItem, { className: [
                                     nestedItem.className,
                                     b('menu-group-nested-item'),
                                 ]
                                     .filter(Boolean)
-                                    .join(' '), compact: compact, menuGroupNestedTreeConnector: React.createElement("span", { className: b('menu-group-nested-connector', { 'spine-active': spineActive }), "aria-hidden": true },
+                                    .join(' '), compact: compact, hideIcon: hideNestedIcons, menuGroupNested: true, menuGroupNestedTreeConnector: React.createElement("span", { className: b('menu-group-nested-connector', { 'spine-active': spineActive }), "aria-hidden": true },
                                     React.createElement("svg", { className: b('menu-group-nested-tree-svg', {
-                                            active: selectedItemIndex ===
+                                            active: normalizedSelectedItemIndex ===
                                                 groupItemIndex,
                                         }), viewBox: "0 0 16 40", xmlns: "http://www.w3.org/2000/svg" },
-                                        React.createElement("path", { d: MENU_GROUP_NESTED_TREE_CONNECTOR_PATH, fill: "none", strokeLinecap: "butt", strokeWidth: "1.3", vectorEffect: "non-scaling-stroke" }))), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(nestedItem.onItemClick) }))));
+                                        React.createElement("path", { d: MENU_GROUP_NESTED_TREE_CONNECTOR_PATH, fill: "none", strokeLinecap: "butt", strokeWidth: "1.3", vectorEffect: "non-scaling-stroke" }))), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(nestedItem.onItemClick), suppressCurrentItemIds: suppressCurrentItemIds, enableQuickAccessPin: enableQuickAccessPin, quickAccessPinItem: nestedItem, onToggleQuickAccess: onToggleQuickAccess }))));
                     } }))));
         } }));
 };
-const CompositeBar = ({ type, className, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, menuOverflow = 'collapse', collapsedMenuGroupIds: collapsedMenuGroupIdsProp, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, }) => {
+const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, layoutWidth, menuOverflow = 'collapse', collapsedMenuGroupIds: collapsedMenuGroupIdsProp, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, enableQuickAccessPin, onToggleQuickAccess, suppressCurrentItemIds, menuGroupNestedIcons = true, }) => {
     const rows = React.useMemo(() => grouping.buildCompositeBarRows(items, menuGroups), [items, menuGroups]);
+    const { menuDensity } = AsideHeaderContext.useAsideHeaderContext();
     const isCollapsedControlled = collapsedMenuGroupIdsProp !== undefined;
     const [uncontrolledCollapsed, setUncontrolledCollapsed] = React.useState(() => defaultCollapsedMenuGroupIds !== null && defaultCollapsedMenuGroupIds !== undefined ? defaultCollapsedMenuGroupIds : {});
     const collapsedMap = isCollapsedControlled ? collapsedMenuGroupIdsProp : uncontrolledCollapsed;
@@ -111,39 +129,35 @@ const CompositeBar = ({ type, className, items, menuGroups, menuMoreTitle, onIte
     const isGroupCollapsed = React.useCallback((groupId) => Boolean(collapsedMap[groupId]), [collapsedMap]);
     const inlineGroupChildren = !compact && menuOverflow === 'scroll' && type === 'menu' && Boolean(menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length);
     const scrollableRows = React.useMemo(() => utils.getReorderedCompositeBarRows(rows), [rows]);
-    const scrollRecalcKey = React.useMemo(() => {
-        var _a;
-        return `${items.length}:${(_a = menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) !== null && _a !== undefined ? _a : 0}:${JSON.stringify(Object.keys(collapsedMap)
-            .sort()
-            .reduce((acc, k) => {
-            acc[k] = Boolean(collapsedMap[k]);
-            return acc;
-        }, {}))}`;
-    }, [items.length, menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length, collapsedMap]);
     if (rows.length === 0) {
         return null;
     }
     let node;
     if (type === 'menu') {
         if (menuOverflow === 'scroll' && !compact) {
-            node = (React.createElement(ScrollableWithScrollbar.ScrollableWithScrollbar, { className: className, recalcDeps: [scrollRecalcKey] },
-                React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: scrollableRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, inlineGroupChildren: inlineGroupChildren, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
+            const menuView = (React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: scrollableRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, inlineGroupChildren: inlineGroupChildren, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressCurrentItemIds, menuGroupNestedIcons: menuGroupNestedIcons }));
+            node = menuView;
         }
         else {
-            const minHeight = utils.getCompositeBarRowsMinHeight(rows);
-            const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
+            const itemLayout = compact ? { sidebarCompact: true } : undefined;
+            const minHeight = utils.getCompositeBarRowsMinHeight(rows, menuDensity, itemLayout);
+            const collapseItem = utils.getMoreButtonItem(menuMoreTitle, menuDensity);
             node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, rows.length !== 0 && (React.createElement(AutoSizer, null, (size) => {
-                const width = Number.isNaN(size.width) ? 0 : size.width;
+                const width = layoutWidth !== null && layoutWidth !== undefined ? layoutWidth : (Number.isNaN(size.width) ? 0 : size.width);
                 const height = Number.isNaN(size.height) ? 0 : size.height;
-                const { listRows, collapseItems } = utils.getAutosizeCompositeBarRows(rows, height, collapseItem);
+                const { listRows, collapseItems } = utils.getAutosizeCompositeBarRows(rows, height, collapseItem, menuDensity, itemLayout);
                 return (React.createElement("div", { style: { width, height } },
-                    React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: listRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
+                    React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: listRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressCurrentItemIds, menuGroupNestedIcons: menuGroupNestedIcons })));
             }))));
         }
     }
+    else if (type === 'quick-access') {
+        node = (React.createElement("div", { className: b({ 'quick-access': true }) },
+            React.createElement(CompositeBarView, { compositeId: compositeId, type: "quick-access", menuItemClassName: menuItemClassName, compact: compact, rows: rows, onItemClick: onItemClick, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess })));
+    }
     else {
         node = (React.createElement("div", { className: b({ subheader: true }) },
-            React.createElement(CompositeBarView, { type: "subheader", menuItemClassName: menuItemClassName, compact: compact, rows: rows, onItemClick: onItemClick, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
+            React.createElement(CompositeBarView, { compositeId: compositeId, type: "subheader", menuItemClassName: menuItemClassName, compact: compact, rows: rows, onItemClick: onItemClick, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed, menuGroupNestedIcons: menuGroupNestedIcons })));
     }
     return node;
 };