@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/collection/utils/navigation.js

@@ -1,12 +1,12 @@
-import { handleDataOutside } from "./floating-components.js";
+import { handleFixedPopover } from "./floating-components.js";
+import { hasCssFlag } from "./index.js";
 export const isEventTargetNavigationItem = (event) => {
-    var _a, _b;
     const { target } = event;
-    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
+    return Boolean(target === null || target === void 0 ? void 0 : target.closest('.db-control-panel-navigation-item'));
 };
 export class NavigationItemSafeTriangle {
     constructor(element, subNavigation) {
-        var _a;
+        var _a, _b;
         this.parentSubNavigation = null;
         this.initialized = false;
         this.mouseX = 0;
@@ -16,13 +16,12 @@ export class NavigationItemSafeTriangle {
         if (!this.element || !this.subNavigation) {
             return;
         }
-        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
+        this.parentSubNavigation = (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-control-panel-navigation-item-group-menu')) !== null && _b !== void 0 ? _b : this.element;
         /*
          * only initiate if:
-         * 1. item is not at root navigation level
          * 2. item is not in the mobile navigation / within db-drawer
          */
-        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
+        if (!this.element.closest('.db-drawer')) {
             this.init();
         }
     }
@@ -31,88 +30,60 @@ export class NavigationItemSafeTriangle {
         const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
         // the triangle has the width of the sub-navigation, current nav-item can be wider.
         // so the width of the triangle must be adapted to a possibly wider nav-item.
-        (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
+        (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-control-panel-navigation-item-inline-size', `${parentElementWidth}px`);
         this.initialized = true;
     }
     enableFollow() {
         var _a, _b;
-        if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
+        if (!this.initialized || !this.element || !this.subNavigation) {
             return;
         }
-        const dataOutsidePair = handleDataOutside(this.subNavigation);
         const itemRect = this.element.getBoundingClientRect();
+        const subRect = this.subNavigation.getBoundingClientRect();
         const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        // Determine the actual direction the sub-menu opens by comparing positions.
+        // The 4px tolerance accounts for sub-pixel rounding in getBoundingClientRect.
+        let openDirection;
+        if (subRect.top >= itemRect.bottom - 4) {
+            openDirection = 'bottom';
+        }
+        else if (subRect.left >= itemRect.right - 4) {
+            openDirection = 'right';
+        }
+        else {
+            openDirection = 'left';
+        }
         this.triangleData = {
             itemRect,
             parentElementWidth,
-            subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
+            subNavigationHeight: subRect.height,
             padding: (parentElementWidth - itemRect.width) / 2,
-            outsideVX: dataOutsidePair.vx,
-            outsideVY: dataOutsidePair.vy
+            openDirection
         };
     }
     disableFollow() {
         this.triangleData = undefined;
     }
-    getTriangleTipX() {
-        if (!this.triangleData)
-            return 0;
-        if (this.triangleData.outsideVX === 'right') {
-            // vertical flipped triangle needs an inverted x pos
-            return this.triangleData.itemRect.width - this.mouseX;
-        }
-        // triangle stops shrinking from 75% x pos
-        return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
-    }
-    getTriangleTipY() {
-        if (!this.triangleData)
-            return 0;
-        // padding must be added to the y pos of the tip so that the y pos matches the cursor
-        const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
-        if (this.triangleData.outsideVY === 'bottom') {
-            // add offset to tip y pos to match corrected sub-navigation y pos
-            return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
-        }
-        return mouseYLimited;
-    }
     hasMouseEnteredSubNavigation() {
         if (!this.triangleData) {
             return false;
         }
-        const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
-        if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
-            return true;
+        switch (this.triangleData.openDirection) {
+            case 'left':
+                return this.mouseX < -1 * this.triangleData.padding;
+            case 'right':
+                return this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding;
+            case 'bottom':
+                return this.mouseY > this.triangleData.itemRect.height;
+            default:
+                {
+                    const _exhaustive = this.triangleData.openDirection;
+                    void _exhaustive;
+                    return false;
+                }
         }
-        if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
-            return true;
-        }
-        return false;
-    }
-    getTriangleCoordinates(variant) {
-        if (!this.triangleData) {
-            return;
-        }
-        if (variant === 'fill-gap') {
-            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
-            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
-            return {
-                lb: `${xStart} ${itemHeight}`,
-                lt: `${xStart} 0`,
-                rt: '100% 0',
-                rb: `100% ${itemHeight}`
-            };
-        }
-        const tipX = this.getTriangleTipX();
-        const tipY = this.getTriangleTipY();
-        const lb = `${tipX}px ${tipY}px`;
-        const lt = `${tipX}px ${tipY}px`;
-        return {
-            lb,
-            lt,
-            rt: '100% 0',
-            rb: '100% 100%'
-        };
     }
+    // We use a loose type here because React passes `MouseEvent<HTMLLIElement, MouseEvent>`
     followByMouseEvent(event) {
         if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
             return;
@@ -120,17 +91,85 @@ export class NavigationItemSafeTriangle {
         this.mouseX = event.clientX - this.triangleData.itemRect.left;
         this.mouseY = event.clientY - this.triangleData.itemRect.top;
         const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
-        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
-        if (!coordinates) {
+        if (isOverSubNavigation) {
+            this.disableFollow();
             return;
         }
-        this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
-        if (isOverSubNavigation) {
-            this.triangleData = undefined;
+        // Calculate tip position in the ::before's coordinate space.
+        // The ::before is positioned at the sub-menu's left edge and shifted
+        // left by its own width (translateX(-100%)).
+        // Its width = parentElementWidth, height = sub-menu height.
+        const subRect = this.subNavigation.getBoundingClientRect();
+        const beforeLeft = subRect.left - this.triangleData.parentElementWidth;
+        const beforeWidth = this.triangleData.parentElementWidth;
+        const beforeTop = subRect.top;
+        const beforeHeight = subRect.height;
+        const tipXPx = event.clientX - beforeLeft;
+        const tipYPct = Math.max(0, Math.min(100, (event.clientY - beforeTop) / beforeHeight * 100));
+        // Ensure the triangle has a minimum width of 0.5rem (8px)
+        const minWidth = 8;
+        let coordinates;
+        switch (this.triangleData.openDirection) {
+            case 'right':
+                coordinates = `${Math.min(tipXPx, beforeWidth - minWidth)}px ${tipYPct}%, 100% 0%, 100% 100%`;
+                break;
+            case 'left':
+                coordinates = `0% 0%, ${Math.max(tipXPx, minWidth)}px ${tipYPct}%, 0% 100%`;
+                break;
+            case 'bottom':
+                coordinates = `${tipXPx}px ${tipYPct}%, ${beforeWidth}px 100%, 0px 100%`;
+                break;
+            default:
+                {
+                    const _exhaustive = this.triangleData.openDirection;
+                    void _exhaustive;
+                    coordinates = '0% 0%, 100% 0%, 100% 100%, 0% 100%';
+                    break;
+                }
         }
+        this.element.style.setProperty('--db-control-panel-navigation-item-clip-path', `polygon(${coordinates})`);
     }
 }
-export default {
-    isEventTargetNavigationItem,
-    NavigationItemSafeTriangle
+const MAX_SUB_NAVIGATION_DEPTH = 10;
+export const handleSubNavigationPosition = (element, level, vertical = false) => {
+    var _a;
+    if (!element)
+        return;
+    // If no level provided, read it from the element's data-level attribute
+    // (set by a previous call) and process children at level + 1
+    const resolvedLevel = level !== null && level !== void 0 ? level : parseInt((_a = element.dataset['level']) !== null && _a !== void 0 ? _a : '-1', 10) + 1;
+    // Guard against deeply nested or accidentally cyclic markup
+    if (resolvedLevel >= MAX_SUB_NAVIGATION_DEPTH)
+        return;
+    const navItems = element.querySelectorAll(':scope > .db-control-panel-navigation-item-group, db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group');
+    for (const navItem of Array.from(navItems)) {
+        const subNavigation = navItem.querySelector(':scope > .db-control-panel-navigation-item-group-menu');
+        const button = navItem.querySelector(':scope > .db-control-panel-navigation-item-group-expand-button');
+        if (subNavigation && button) {
+            /*
+             * This is set via css inside:
+             * `packages/components/src/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-popover.scss`.
+             * We don't need to calculate the position of the menu as a popover.
+             */
+            const isMobile = hasCssFlag(subNavigation, '--db-control-panel-navigation-item-group-menu-mobile');
+            if (isMobile) {
+                subNavigation.style.insetBlock = '';
+                subNavigation.style.insetInline = '';
+                continue;
+            }
+            subNavigation.dataset['level'] = resolvedLevel.toString();
+            if (resolvedLevel === 0) {
+                if (vertical) {
+                    // Sub-Navigation should be opened vertical (top position, level 0)
+                    handleFixedPopover(subNavigation, button, 'bottom-start');
+                    subNavigation.dataset['open'] = 'vertical';
+                }
+                else {
+                    handleFixedPopover(subNavigation, button, 'right-start');
+                    subNavigation.dataset['open'] = 'horizontal';
+                }
+            }
+            handleSubNavigationPosition(subNavigation, resolvedLevel + 1);
+        }
+    }
 };

package/dist/collection/utils/resize-observer-listener.js

@@ -0,0 +1,36 @@
+import { AbstractObserverListener } from "./abstract-observer-listener.js";
+export class ResizeObserverListener extends AbstractObserverListener {
+    constructor() {
+        super();
+        if (ResizeObserverListener._instance) {
+            return ResizeObserverListener._instance;
+        }
+        ResizeObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+            ResizeObserverListener.observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return ResizeObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return ResizeObserverListener.idToElement;
+    }
+    getObserver() {
+        return ResizeObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+ResizeObserverListener._instance = null;
+ResizeObserverListener.callbacksByElement = new Map();
+ResizeObserverListener.idToElement = new Map();
+ResizeObserverListener.observer = null;