@ship-ui/core 0.17.15 → 0.17.17

package/assets/mcp/components.json

@@ -1062,9 +1062,15 @@
     "outputs": [],
     "methods": [
       {
-        "name": "cancelAnimationFrame",
-        "parameters": "this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.calculateTooltipPosition);\n  };\n\n  private calculateTooltipPosition = (",
-        "returnType": "void =>",
+        "name": "while",
+        "parameters": "parent",
+        "returnType": "any",
+        "description": ""
+      },
+      {
+        "name": "return",
+        "parameters": "pos.left >= 0 &&\n      pos.top >= 0 &&\n      pos.left + m.width <= window.innerWidth &&\n      pos.top + m.height <= window.innerHeight\n    );\n  }\n\n  #clampToViewport(pos: { left: number; top: number }, m: DOMRect",
+        "returnType": "any",
         "description": ""
       },
       {
@@ -3258,7 +3264,7 @@
       },
       {
         "name": "search-menu-example",
-        "html": "<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <p>\n          hello world\n          <br />\n          {{ item.label }}\n        </p>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
+        "html": "<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <p>\n          hello world\n          <br />\n          {{ item.label }}\n        </p>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n\n<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <div class=\"option-col\">\n          {{ item.label }} asdlkjadskljjkladsjkldaljkdaslkjad jklsjkl dasjkld as\n          <p>hello world but im extra long so i should wrap to the next line</p>\n        </div>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
         "ts": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButton, ShipMenu } from 'ship-ui';\n\n@Component({\n  selector: 'sh-search-menu-example',\n  templateUrl: './search-menu-example.html',\n  styleUrls: ['./search-menu-example.scss'],\n  imports: [FormsModule, ShipMenu, ShipButton],\n  standalone: true,\n})\nexport class SearchMenuExample {\n  menuItems = [\n    { label: 'Dashboard', value: 'dashboard' },\n    { label: 'Users', value: 'users' },\n    { label: 'Settings', value: 'settings' },\n    { label: 'Billing', value: 'billing' },\n    { label: 'Support', value: 'support' },\n  ];\n  search = '';\n  selected: string | null = null;\n\n  get filteredItems() {\n    return this.menuItems.filter((item) => item.label.toLowerCase().includes(this.search.toLowerCase()));\n  }\n\n  select(item: any) {\n    this.selected = item.value;\n  }\n}\n"
       },
       {

package/fesm2022/ship-ui-core.mjs

@@ -7014,31 +7014,56 @@ class ShipTooltipWrapper {
             close: () => this.close()(),
         };
         this.isTemplate = computed(() => this.content() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isTemplate" }] : []));
+        this.#document = inject(DOCUMENT);
         this.#selfRef = inject((ElementRef));
         this.#renderer = inject(Renderer2);
         this.#positionAbort = null;
-        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc');
+        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
         this.isBelow = signal(false, ...(ngDevMode ? [{ debugName: "isBelow" }] : []));
         this.openEffect = effect(() => {
             if (this.isOpen()) {
-                setTimeout(() => {
-                    this.#selfRef.nativeElement.showPopover();
-                    this.schedulePositionUpdate();
+                queueMicrotask(() => {
+                    const tooltipEl = this.#selfRef.nativeElement;
+                    if (!tooltipEl || !tooltipEl.isConnected)
+                        return;
+                    if (this.#positionAbort) {
+                        this.#positionAbort.abort();
+                    }
+                    this.#positionAbort = new AbortController();
+                    tooltipEl.showPopover();
+                    if (!this.SUPPORTS_ANCHOR) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(tooltipEl);
+                            scrollableParent.addEventListener('scroll', () => this.calculateTooltipPosition(), {
+                                signal: this.#positionAbort?.signal,
+                                passive: true,
+                            });
+                            window?.addEventListener('resize', () => this.calculateTooltipPosition(), {
+                                signal: this.#positionAbort?.signal,
+                                passive: true,
+                            });
+                            this.calculateTooltipPosition();
+                        });
+                    }
                 });
             }
             else {
-                this.#selfRef.nativeElement.hidePopover();
+                const tooltipEl = this.#selfRef.nativeElement;
+                if (tooltipEl) {
+                    try {
+                        if (tooltipEl.matches(':popover-open')) {
+                            tooltipEl.hidePopover();
+                        }
+                    }
+                    catch (e) {
+                        // Ignore if already hidden or other errors
+                    }
+                }
+                this.#positionAbort?.abort();
+                this.#positionAbort = null;
             }
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
-        this.rafId = null;
-        this.schedulePositionUpdate = () => {
-            if (this.rafId !== null) {
-                cancelAnimationFrame(this.rafId);
-            }
-            this.rafId = requestAnimationFrame(this.calculateTooltipPosition);
-        };
         this.calculateTooltipPosition = () => {
-            this.rafId = null;
             if (!this.anchorEl())
                 return;
             const hostRect = this.anchorEl().nativeElement.getBoundingClientRect();
@@ -7046,56 +7071,71 @@ class ShipTooltipWrapper {
             const tooltipRect = tooltipEl.getBoundingClientRect();
             if (tooltipRect.width === 0 && tooltipRect.height === 0)
                 return;
-            const outOfBoundsTop = hostRect.top - tooltipRect.height < 0;
-            if (this.isBelow() !== outOfBoundsTop) {
-                this.isBelow.set(outOfBoundsTop);
-            }
-            if (!this.SUPPORTS_ANCHOR) {
-                const tooltipRect = tooltipEl.getBoundingClientRect();
-                let newTop = hostRect.top - tooltipRect.height;
-                let newLeft = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-                if (outOfBoundsTop) {
-                    newTop = hostRect.top + hostRect.height;
-                }
-                if (newLeft + tooltipRect.width > window?.innerWidth) {
-                    newLeft = hostRect.right - tooltipRect.width / 2;
-                }
-                if (newLeft < 0) {
-                    newLeft = -(tooltipRect.width / 2);
-                }
-                const leftStyle = `${newLeft}px`;
-                const topStyle = `${newTop}px`;
-                if (tooltipEl.style.left !== leftStyle) {
-                    this.#renderer.setStyle(tooltipEl, 'left', leftStyle);
-                }
-                if (tooltipEl.style.top !== topStyle) {
-                    this.#renderer.setStyle(tooltipEl, 'top', topStyle);
-                }
-                if (tooltipEl.style.position !== 'fixed') {
-                    this.#renderer.setStyle(tooltipEl, 'position', 'fixed');
+            const BASE_SPACE = 8;
+            // Position generators
+            const topCenter = (t, m) => ({
+                left: t.left + t.width / 2 - m.width / 2,
+                top: t.top - m.height - BASE_SPACE,
+            });
+            const bottomCenter = (t, m) => ({
+                left: t.left + t.width / 2 - m.width / 2,
+                top: t.bottom + BASE_SPACE,
+            });
+            const topSpanLeft = (t, m) => ({ left: t.right - m.width, top: t.top - m.height - BASE_SPACE });
+            const topSpanRight = (t, m) => ({ left: t.left, top: t.top - m.height - BASE_SPACE });
+            const bottomSpanLeft = (t, m) => ({ left: t.right - m.width, top: t.bottom + BASE_SPACE });
+            const bottomSpanRight = (t, m) => ({ left: t.left, top: t.bottom + BASE_SPACE });
+            const tryOrder = [topCenter, topSpanLeft, topSpanRight, bottomCenter, bottomSpanLeft, bottomSpanRight];
+            for (const positionFn of tryOrder) {
+                const pos = positionFn(hostRect, tooltipRect);
+                if (this.#fitsInViewport(pos, tooltipRect)) {
+                    this.#applyPosition(pos, tooltipEl);
+                    this.isBelow.set(pos.top > hostRect.top);
+                    return;
                 }
             }
+            const fallback = this.#clampToViewport(topCenter(hostRect, tooltipRect), tooltipRect);
+            this.#applyPosition(fallback, tooltipEl);
+            this.isBelow.set(fallback.top > hostRect.top);
         };
     }
+    #document;
     #selfRef;
     #renderer;
     #positionAbort;
-    ngAfterViewInit() {
-        this.#positionAbort = new AbortController();
-        const options = { signal: this.#positionAbort.signal, capture: true, passive: true };
-        window?.addEventListener('scroll', this.schedulePositionUpdate, options);
-        window?.addEventListener('resize', this.schedulePositionUpdate, {
-            signal: this.#positionAbort.signal,
-            passive: true,
-        });
-        this.schedulePositionUpdate();
-    }
     ngOnDestroy() {
         this.#positionAbort?.abort();
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
+        this.#positionAbort = null;
+    }
+    #findScrollableParent(element) {
+        const SCROLLABLE_STYLES = ['scroll', 'auto'];
+        let parent = element.parentElement;
+        while (parent) {
+            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
+                parent.scrollHeight > parent.clientHeight) {
+                return parent;
+            }
+            parent = parent.parentElement;
         }
+        return this.#document.documentElement;
+    }
+    #applyPosition(pos, element) {
+        this.#renderer.setStyle(element, 'left', `${pos.left}px`);
+        this.#renderer.setStyle(element, 'top', `${pos.top}px`);
+        this.#renderer.setStyle(element, 'position', 'fixed');
+        this.#renderer.setStyle(element, 'margin', '0');
+    }
+    #fitsInViewport(pos, m) {
+        return (pos.left >= 0 &&
+            pos.top >= 0 &&
+            pos.left + m.width <= window.innerWidth &&
+            pos.top + m.height <= window.innerHeight);
+    }
+    #clampToViewport(pos, m) {
+        return {
+            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
+            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
@@ -7147,7 +7187,7 @@ class ShipTooltip {
         this.#elementRef = inject((ElementRef));
         this.#viewContainerRef = inject(ViewContainerRef);
         this.#environmentInjector = inject(EnvironmentInjector);
-        this.#renderer = inject(Renderer2);
+        this.debounceTimer = null;
         this.DEBOUNCE_DELAY = 500;
         this.anchorName = `--${generateUniqueId()}`;
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -7156,7 +7196,6 @@ class ShipTooltip {
     #elementRef;
     #viewContainerRef;
     #environmentInjector;
-    #renderer;
     onMouseEnter() {
         if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();