@supersoniks/concorde 5.0.0 → 5.0.1

package/src/core/components/ui/tooltip/tooltip.ts

@@ -1,221 +1,245 @@
 import { html, LitElement, css, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
+import {
+  computeFloatingPosition,
+  FloatingAlign,
+  FloatingSide,
+  getFloatingBounds,
+  startFrameLoop,
+  supportsPopover,
+} from "@supersoniks/concorde/core/utils/positioning";
+
 const tagName = "sonic-tooltip";
+
+type TooltipPlacement = FloatingSide | `${FloatingSide}-${FloatingAlign}`;
+
+const GAP = 4;
+
 @customElement(tagName)
 export class Tooltip extends LitElement {
+  static readonly supportsPopover = supportsPopover;
+
   static styles = [
     css`
       :host {
-        position: relative;
         display: inline-flex;
         align-items: center;
         text-align: center;
         --sc-tooltip-fw: var(--sc-font-weight-base, 400);
-        --sc-tooltip-position: calc(100% + 0.25rem);
       }
 
-      .tooltip:before {
-        position: absolute;
-        content: attr(data-tooltip-text);
-        font-size: 0.85rem;
-        display: block;
-        opacity: 0;
+      .tooltip-bubble {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        border: none;
         pointer-events: none;
+        font-size: 0.85rem;
         background: var(--sc-base-content, #000);
         padding: 0.32rem 0.55rem;
         border-radius: var(--sc-rounded);
         color: var(--sc-base, #fff);
-        z-index: 999;
         line-height: 1.1;
         width: max-content;
         max-width: 18rem;
         white-space: pre-line;
         font-weight: var(--sc-tooltip-fw);
-        transition: 0.2s;
-        scale: 0.9;
-        will-change: opacity, transform;
+        opacity: 0;
+        transition:
+          opacity 0.2s,
+          display 0.2s allow-discrete,
+          overlay 0.2s allow-discrete;
       }
 
-      :host(:focus-visible) .tooltip:before,
-      :host(.keyboard-focus) .tooltip:before,
-      .tooltip:hover:before {
+      .tooltip-bubble:popover-open {
         opacity: 1;
-        scale: 1;
       }
 
-      .disabled:before {
-        opacity: 0 !important;
-        scale: 0.9 !important;
-      }
-
-      :host(:not([placement])) .tooltip:before,
-      :host([placement="top"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([placement="top-end"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        right: 0;
-      }
-      :host([placement="top-start"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        left: 0;
-      }
-
-      :host([placement="bottom"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([placement="bottom-start"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        left: 0;
-      }
-      :host([placement="bottom-end"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        right: 0;
-      }
-
-      :host([placement="left"]) .tooltip:before {
-        top: 50%;
-        right: var(--sc-tooltip-position);
-        transform: translateY(-50%);
-      }
-
-      :host([placement="left-start"]) .tooltip:before {
-        top: 0;
-        right: var(--sc-tooltip-position);
-      }
-
-      :host([placement="left-end"]) .tooltip:before {
-        bottom: 0;
-        right: var(--sc-tooltip-position);
-      }
-
-      :host([placement="right"]) .tooltip:before {
-        top: 50%;
-        transform: translateY(-50%);
-        left: var(--sc-tooltip-position);
+      @starting-style {
+        .tooltip-bubble:popover-open {
+          opacity: 0;
+        }
       }
 
-      :host([placement="right-start"]) .tooltip:before {
-        top: 0;
-        left: var(--sc-tooltip-position);
+      .tooltip-bubble.disabled {
+        display: none !important;
       }
 
-      :host([placement="right-end"]) .tooltip:before {
-        bottom: 0;
-        left: var(--sc-tooltip-position);
+      @media (prefers-reduced-motion: reduce) {
+        .tooltip-bubble {
+          transition: none;
+        }
       }
     `,
   ];
 
-  @property({ type: String }) label = "";
-  @property({ type: String, reflect: true }) placement?:
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "left"
-    | "left-start"
-    | "left-end";
+  @property({ type: String }) label?: string;
+  @property({ type: String, reflect: true }) placement?: TooltipPlacement;
 
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) focusable = false;
 
-  private lastKeyWasTab = false;
-  private boundHandleKeyDown: (e: KeyboardEvent) => void;
-  private boundHandleMouseDown: () => void;
+  @query(".tooltip-bubble") private bubbleEl?: HTMLElement;
 
-  constructor() {
-    super();
-    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
-    this.boundHandleMouseDown = this.handleMouseDown.bind(this);
+  private stopPositioning?: () => void;
+
+  private get isEffectivelyDisabled() {
+    return this.disabled || !this.formatLabel();
+  }
+
+  private formatLabel() {
+    return (this.label ?? "")
+      .replaceAll(" ", " ")
+      .trim()
+      .split("\n")
+      .map((line) => line.trim())
+      .join("\n");
   }
 
-  private handleKeyDown = (e: KeyboardEvent) => {
-    // Détecter si Tab ou Shift+Tab a été pressé
-    if (e.key === "Tab") {
-      this.lastKeyWasTab = true;
+  private computePosition() {
+    const bubble = this.bubbleEl;
+    if (!bubble) {
+      return;
     }
-  };
 
-  private handleMouseDown = () => {
-    // Réinitialiser le flag si la souris est utilisée
-    this.lastKeyWasTab = false;
-    // Retirer la classe si elle existe (au cas où)
-    this.classList.remove("keyboard-focus");
+    const [side = "top", align = "center"] = (this.placement ?? "top").split(
+      "-",
+    );
+
+    const { x, y } = computeFloatingPosition({
+      anchor: this.getBoundingClientRect(),
+      floating: bubble.getBoundingClientRect(),
+      side: side as FloatingSide,
+      align: align as FloatingAlign,
+      gap: GAP,
+      bounds: getFloatingBounds(this, GAP),
+    });
+
+    Object.assign(bubble.style, {
+      left: `${Math.round(x)}px`,
+      top: `${Math.round(y)}px`,
+    });
+  }
+
+  private showTooltip = () => {
+    if (this.isEffectivelyDisabled || !this.bubbleEl) {
+      return;
+    }
+
+    if (!this.bubbleEl.matches(":popover-open")) {
+      this.bubbleEl.showPopover();
+    }
   };
 
-  private handleFocusIn = () => {
-    // Ajouter la classe seulement si le focus est venu du clavier (Tab)
-    if (this.lastKeyWasTab) {
-      this.classList.add("keyboard-focus");
+  private hideTooltip = () => {
+    if (this.bubbleEl?.matches(":popover-open")) {
+      this.bubbleEl.hidePopover();
     }
-    this.lastKeyWasTab = false;
   };
 
-  private handleFocusOut = () => {
-    this.classList.remove("keyboard-focus");
-    this.lastKeyWasTab = false;
+  private handleBeforeToggle = (e: ToggleEvent) => {
+    if (e.newState === "open") {
+      this.stopPositioning ??= startFrameLoop(() => this.computePosition());
+      return;
+    }
+
+    this.endPositioning();
   };
 
+  private endPositioning() {
+    this.stopPositioning?.();
+    this.stopPositioning = undefined;
+  }
+
+  private syncTabIndex() {
+    if (this.disabled) {
+      this.setAttribute("tabindex", "-1");
+    } else if (this.focusable) {
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.removeAttribute("tabindex");
+    }
+  }
+
+  /** Fallback natif quand Popover API indisponible */
+  private syncNativeTitle() {
+    if (Tooltip.supportsPopover || this.isEffectivelyDisabled) {
+      this.removeAttribute("title");
+      return;
+    }
+
+    this.setAttribute("title", this.formatLabel().replaceAll("\n", " "));
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("focusin", this.handleFocusIn);
-    this.addEventListener("focusout", this.handleFocusOut);
-    // Écouter les événements au niveau du document avec capture pour détecter Tab
-    document.addEventListener("keydown", this.boundHandleKeyDown, true);
-    document.addEventListener("mousedown", this.boundHandleMouseDown, true);
+
+    if (!Tooltip.supportsPopover) {
+      return;
+    }
+
+    this.addEventListener("focusin", this.showTooltip);
+    this.addEventListener("focusout", this.hideTooltip);
   }
 
   disconnectedCallback() {
+    this.endPositioning();
+
+    if (Tooltip.supportsPopover) {
+      this.removeEventListener("focusin", this.showTooltip);
+      this.removeEventListener("focusout", this.hideTooltip);
+    }
+
     super.disconnectedCallback();
-    this.removeEventListener("focusin", this.handleFocusIn);
-    this.removeEventListener("focusout", this.handleFocusOut);
-    document.removeEventListener("keydown", this.boundHandleKeyDown, true);
-    document.removeEventListener("mousedown", this.boundHandleMouseDown, true);
   }
 
-  protected willUpdate(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has("disabled")) {
-      const wasDisabledBefore = _changedProperties.get("disabled") === true;
-      if (this.disabled) {
-        this.setAttribute("tabindex", "-1");
-        this.classList.remove("keyboard-focus");
-      } else if (!this.disabled && wasDisabledBefore) {
-        if (this.focusable) {
-          this.setAttribute("tabindex", "0");
-        } else {
-          this.removeAttribute("tabindex");
-        }
-      }
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      !this.hasUpdated ||
+      changedProperties.has("disabled") ||
+      changedProperties.has("focusable")
+    ) {
+      this.syncTabIndex();
     }
-    if (_changedProperties.has("focusable")) {
-      if (this.focusable && !this.disabled) {
-        this.setAttribute("tabindex", "0");
-      } else if (!this.focusable && !this.disabled) {
-        this.removeAttribute("tabindex");
-      }
+
+    if (
+      !this.hasUpdated ||
+      changedProperties.has("label") ||
+      changedProperties.has("disabled")
+    ) {
+      this.syncNativeTitle();
+    }
+
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.hideTooltip();
+    }
+
+    if (changedProperties.has("label") && this.isEffectivelyDisabled) {
+      this.hideTooltip();
     }
-    super.willUpdate(_changedProperties);
+
+    super.willUpdate(changedProperties);
   }
 
   render() {
-    const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
-    return html`<div
-      data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}"
-      class="tooltip ${disabledClass}"
-    >
-      <slot></slot>
-    </div>`;
+    if (!Tooltip.supportsPopover) {
+      return html`<slot></slot>`;
+    }
+
+    const disabledClass = this.isEffectivelyDisabled ? "disabled" : "";
+    const label = this.formatLabel();
+
+    return html`
+      <slot
+        @mouseenter=${this.showTooltip}
+        @mouseleave=${this.hideTooltip}
+      ></slot>
+      <span
+        popover="hint"
+        class="tooltip-bubble ${disabledClass}"
+        @beforetoggle=${this.handleBeforeToggle}
+        >${label}</span
+      >
+    `;
   }
 }

package/src/core/utils/positioning.spec.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import {
+  computeFloatingPosition,
+  FloatingBounds,
+  FloatingSide,
+} from "./positioning";
+
+type Rect = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+type Size = { width: number; height: number };
+
+const rect = (left: number, top: number, width: number, height: number) => ({
+  left,
+  top,
+  width,
+  height,
+  right: left + width,
+  bottom: top + height,
+});
+
+/**
+ * Ancien Pop.computePosition, étape par étape, sur un contenu simulé dont
+ * chaque déplacement appliqué se retrouve tel quel dans la mesure suivante.
+ */
+function legacyPopPosition(
+  thisRect: Rect,
+  size: Size,
+  placement: string,
+  { minX, minY, maxX, maxY }: FloatingBounds,
+) {
+  const [placementBase, placementSec] = placement.split(" ");
+  const x0 = thisRect.left;
+  const y0 = thisRect.top;
+  let x = x0,
+    y = y0;
+  const yTop = y0 - size.height;
+  const xLeft = x0 - size.width;
+  const xRight = x0 + thisRect.width;
+  const yBottom = y0 + thisRect.height;
+  const xCenter = x0 + (thisRect.width - size.width) * 0.5;
+  const yCenter = y0 + (thisRect.height - size.height) * 0.5;
+  switch (placementBase) {
+    case "bottom":
+      y = yBottom;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "top":
+      y = yTop;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "left":
+      x = xLeft;
+      if (placementSec == "center") y = yCenter;
+      break;
+    case "right":
+      x = xRight;
+      if (placementSec == "center") y = yCenter;
+      break;
+  }
+
+  let contentX = x;
+  let contentY = y;
+  if (contentX < minX && placementBase == "left") x = xRight;
+  if (contentY < minY && placementBase == "top") y = yBottom;
+  if (contentX + size.width > maxX && placementBase == "right") x = xLeft;
+  if (contentY + size.height > maxY && placementBase == "bottom") y = yTop;
+
+  contentX = x;
+  contentY = y;
+  if (contentX < minX) contentX = minX;
+  if (contentY < minY) contentY = minY;
+  if (contentX + size.width > maxX) contentX = maxX - size.width;
+  if (contentY + size.height > maxY) contentY = maxY - size.height;
+
+  return { x: contentX, y: contentY };
+}
+
+function popPosition(
+  anchor: Rect,
+  floating: Size,
+  placement: string,
+  bounds: FloatingBounds,
+) {
+  const [side, secondary] = placement.split(" ");
+  const { x, y } = computeFloatingPosition({
+    anchor,
+    floating,
+    side: side as FloatingSide,
+    align: secondary == "center" ? "center" : "start",
+    bounds,
+  });
+  return { x, y };
+}
+
+const bounds: FloatingBounds = { minX: 5, minY: 5, maxX: 795, maxY: 595 };
+
+describe("computeFloatingPosition", () => {
+  describe("reproduit l'ancien positionnement de sonic-pop", () => {
+    const placements = [
+      "bottom",
+      "top",
+      "right",
+      "left",
+      "bottom center",
+      "top center",
+      "right center",
+      "left center",
+      "unknown",
+    ];
+    const anchors = {
+      "au centre": rect(380, 280, 40, 30),
+      "coin haut gauche": rect(0, 0, 40, 30),
+      "coin bas droit": rect(760, 570, 40, 30),
+      "bord gauche": rect(2, 300, 40, 30),
+      "bord droit": rect(780, 300, 40, 30),
+      "bord haut": rect(400, 2, 40, 30),
+      "bord bas": rect(400, 590, 40, 30),
+    };
+    const sizes = {
+      petit: { width: 120, height: 80 },
+      "plus grand que la zone": { width: 900, height: 700 },
+    };
+
+    for (const placement of placements) {
+      for (const [anchorName, anchor] of Object.entries(anchors)) {
+        for (const [sizeName, size] of Object.entries(sizes)) {
+          it(`${placement} / ${anchorName} / contenu ${sizeName}`, () => {
+            expect(popPosition(anchor, size, placement, bounds)).toEqual(
+              legacyPopPosition(anchor, size, placement, bounds),
+            );
+          });
+        }
+      }
+    }
+  });
+
+  describe("placements du tooltip", () => {
+    const anchor = rect(380, 280, 40, 30);
+    const floating = { width: 100, height: 20 };
+    const place = (side: FloatingSide, align?: "start" | "center" | "end") =>
+      computeFloatingPosition({
+        anchor,
+        floating,
+        side,
+        align,
+        gap: 4,
+        bounds,
+      });
+
+    it("centre par défaut", () => {
+      expect(place("top")).toEqual({ side: "top", x: 350, y: 256 });
+      expect(place("right")).toEqual({ side: "right", x: 424, y: 285 });
+    });
+
+    it("aligne start / end", () => {
+      expect(place("bottom", "start")).toMatchObject({ x: 380, y: 314 });
+      expect(place("bottom", "end")).toMatchObject({ x: 320, y: 314 });
+      expect(place("left", "end")).toMatchObject({ x: 276, y: 290 });
+    });
+
+    it("bascule sur le côté opposé quand il déborde", () => {
+      const nearTop = rect(380, 10, 40, 30);
+      expect(
+        computeFloatingPosition({
+          anchor: nearTop,
+          floating,
+          side: "top",
+          gap: 4,
+          bounds,
+        }),
+      ).toEqual({ side: "bottom", x: 350, y: 44 });
+    });
+  });
+});