@ship-ui/core 0.17.15 → 0.17.16

package/assets/mcp/components.json

@@ -3258,7 +3258,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

@@ -7046,34 +7046,39 @@ class ShipTooltipWrapper {
             const tooltipRect = tooltipEl.getBoundingClientRect();
             if (tooltipRect.width === 0 && tooltipRect.height === 0)
                 return;
-            const outOfBoundsTop = hostRect.top - tooltipRect.height < 0;
+            if (this.SUPPORTS_ANCHOR) {
+                const isPlacedBelow = tooltipRect.top > hostRect.top;
+                if (this.isBelow() !== isPlacedBelow) {
+                    this.isBelow.set(isPlacedBelow);
+                }
+                return;
+            }
+            const gap = 12;
+            const outOfBoundsTop = hostRect.top - tooltipRect.height - gap < 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');
-                }
+            let newTop = hostRect.top - tooltipRect.height - gap;
+            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');
             }
         };
     }
@@ -7147,7 +7152,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 +7161,6 @@ class ShipTooltip {
     #elementRef;
     #viewContainerRef;
     #environmentInjector;
-    #renderer;
     onMouseEnter() {
         if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();
@@ -7215,6 +7219,10 @@ class ShipTooltip {
     cleanupTooltip() {
         if (openRef?.wrapperComponentRef) {
             openRef.component.cancelCleanupTimer();
+            const nativeEl = openRef.wrapperComponentRef.location.nativeElement;
+            if (nativeEl && typeof nativeEl.matches === 'function' && nativeEl.matches(':popover-open')) {
+                nativeEl.hidePopover();
+            }
             openRef.wrapperComponentRef.destroy();
             openRef.component.isOpen.set(false);
             openRef = null;