@supersoniks/concorde 5.0.0 → 5.0.2

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

@@ -1,27 +1,44 @@
 import { html, LitElement, css, PropertyValues } from "lit";
 import { customElement, query, state, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import HTML, {
   SearchableDomElement,
 } from "@supersoniks/concorde/core/utils/HTML";
+import {
+  computeFloatingPosition,
+  FloatingPlacement,
+  FloatingSide,
+  getFloatingBounds,
+  parsePlacement,
+  startFrameLoop,
+  supportsPopover,
+} from "@supersoniks/concorde/core/utils/positioning";
 import { Shadow, shadowable } from "../_css/shadow";
-// Toast
-type PopPlacement =
-  | "bottom"
-  | "top"
-  | "right"
-  | "left"
-  | "top"
-  | "bottom center"
-  | "top center"
-  | "right center"
-  | "left center";
+
+/** @deprecated écriture avec espace, utiliser `"bottom-center"`. */
+type LegacyPopPlacement = `${FloatingSide} center`;
+type PopPlacement = FloatingPlacement | LegacyPopPlacement;
+
+let legacyPlacementWarned = false;
+
+function normalizePopPlacement(placement: PopPlacement): FloatingPlacement {
+  if (!placement.includes(" ")) return placement as FloatingPlacement;
+  if (!legacyPlacementWarned) {
+    legacyPlacementWarned = true;
+    console.warn(
+      `[concorde] sonic-pop placement="${placement}" est déprécié, utiliser placement="${placement.replace(" ", "-")}".`,
+    );
+  }
+  return placement.replace(" ", "-") as FloatingPlacement;
+}
 
 const tagName = "sonic-pop";
 
 @customElement(tagName)
 export class Pop extends LitElement {
   static pops = new Set<Pop>();
+  static readonly supportsPopover = supportsPopover;
   static styles = [
     css`
       :host {
@@ -44,7 +61,7 @@ export class Pop extends LitElement {
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      slot[name="content"].is-open:not(.is-empty) {
+      slot[name="content"].is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
@@ -52,6 +69,36 @@ export class Pop extends LitElement {
         transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
       }
 
+      slot[name="content"][popover] {
+        inset: auto;
+        width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        border: none;
+        overflow: visible;
+        color: inherit;
+        /* display / overlay en allow-discrete : reste dans le top layer pendant le fondu de fermeture */
+        transition-property: all, display, overlay;
+        transition-behavior: normal, allow-discrete, allow-discrete;
+      }
+
+      slot[name="content"][popover]:not(:popover-open) {
+        display: none;
+      }
+
+      slot[name="content"][popover].is-open {
+        transition-property: scale, opacity, display, overlay;
+        transition-behavior: normal, normal, allow-discrete, allow-discrete;
+      }
+
+      @starting-style {
+        slot[name="content"][popover].is-open:popover-open {
+          transform: translateY(1rem) scale(0.95);
+          opacity: 0;
+        }
+      }
+
       :host([inline]) {
         vertical-align: baseline;
       }
@@ -72,7 +119,6 @@ export class Pop extends LitElement {
   @property({ type: String, reflect: true }) shadow: Shadow = "lg";
 
   @property({ type: String }) placement: PopPlacement = "bottom";
-  positioningRuns = false;
   lastContentX = 0;
   lastContentY = 0;
   resizeObserver: ResizeObserver = new ResizeObserver(() =>
@@ -80,13 +126,9 @@ export class Pop extends LitElement {
   );
 
   @state() private triggerElement: HTMLElement | null = null;
-
-  runPositioningLoop() {
-    if (!this.positioningRuns) return;
-    this.positioningRuns = true;
-    this.computePosition(this.placement);
-    window.requestAnimationFrame(() => this.runPositioningLoop());
-  }
+  private stopPositioning?: () => void;
+  private hideDisplayTimeout?: ReturnType<typeof setTimeout>;
+  private pendingShow = false;
 
   toggle(e: Event) {
     if (this.open && this.noToggle) return;
@@ -99,47 +141,74 @@ export class Pop extends LitElement {
       this.triggerElement = e.target as HTMLElement;
     }
 
-    this.open = !this.open;
-    this.open ? this.show() : this.hide();
+    if (this.open) this.hide();
+    else this.show();
   }
 
   show() {
-    this.setMaxZindex();
+    if (!this.popContent) {
+      this.pendingShow = true;
+      this.updateComplete.then(() => {
+        if (this.pendingShow) this.show();
+      });
+      return;
+    }
+    this.pendingShow = false;
+    if (this.open) return;
+    if (!Pop.supportsPopover) this.setMaxZindex();
+    clearTimeout(this.hideDisplayTimeout);
     this.popContent?.style?.removeProperty("display");
+    if (Pop.supportsPopover && !this.popContent.matches(":popover-open")) {
+      this.popContent.showPopover();
+    }
     this.open = true;
+    // Pop.pops suit l'ordre d'ouverture : Escape ferme le dernier ouvert.
+    if (Pop.pops.delete(this)) Pop.pops.add(this);
     this.popContent.setAttribute("tabindex", "0");
-    if (this.popBtn && this.popContent && !this.positioningRuns) {
-      this.positioningRuns = true;
+    if (this.popBtn && this.popContent && !this.stopPositioning) {
       this.lastContentX = 0;
       this.lastContentY = 0;
-      this.runPositioningLoop();
+      this.stopPositioning = startFrameLoop(() =>
+        this.computePosition(this.placement),
+      );
     }
     this.dispatchEvent(new CustomEvent("show"));
   }
 
   hide() {
-    this.resetZindexes();
+    this.pendingShow = false;
+    if (!this.popContent) {
+      this.dispatchEvent(new CustomEvent("hide"));
+      return;
+    }
+    if (!Pop.supportsPopover) this.resetZindexes();
+    if (Pop.supportsPopover && this.popContent?.matches(":popover-open")) {
+      this.popContent.hidePopover();
+    }
     this.open = false;
     this.popContent.setAttribute("tabindex", "-1");
-    this.positioningRuns = false;
+    this.stopPositionLoop();
+    if (!Pop.supportsPopover) this.hideContentAfterTransition();
     if (this.triggerElement) {
       this.triggerElement.focus();
       this.triggerElement = null;
     }
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
     this.dispatchEvent(new CustomEvent("hide"));
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    // Le template remet style="display:none" à chaque render —
-    // on le retire après coup quand le pop est ouvert.
-    if (this.open) {
-      this.popContent?.style?.removeProperty("display");
-    }
+  private stopPositionLoop() {
+    this.stopPositioning?.();
+    this.stopPositioning = undefined;
+  }
+
+  /** Sans display:none, le contenu masqué par opacité resterait atteignable au clavier. */
+  private hideContentAfterTransition() {
+    clearTimeout(this.hideDisplayTimeout);
+    const duration =
+      parseFloat(getComputedStyle(this.popContent).transitionDuration) * 1000;
+    this.hideDisplayTimeout = setTimeout(() => {
+      if (!this.open) this.popContent.style.display = "none";
+    }, duration || 0);
   }
 
   /**
@@ -183,6 +252,7 @@ export class Pop extends LitElement {
     const target = path[0] as HTMLElement;
 
     Pop.pops.forEach((pop: Pop) => {
+      if (!pop.open) return;
       const popContainsTarget = path.includes(pop);
       const popContentContainsTarget = path.includes(
         pop.querySelector('[slot="content"]') as EventTarget,
@@ -204,7 +274,8 @@ export class Pop extends LitElement {
     if (Pop.pops.size == 0) {
       document.addEventListener("pointerdown", this._handleClosePop);
       document.addEventListener("click", this._handleClosePop);
-      document.addEventListener("keydown", this._handleKeyDown);
+      // Capture : passer avant les écouteurs Escape des ancêtres (ex. sonic-modal).
+      document.addEventListener("keydown", Pop._handleKeyDown, true);
     }
     Pop.pops.add(this);
   }
@@ -221,133 +292,56 @@ export class Pop extends LitElement {
     if (this.popContent) {
       this.resizeObserver.unobserve(this.popContent);
     }
+    this.stopPositionLoop();
+    clearTimeout(this.hideDisplayTimeout);
+    if (this.open) {
+      if (!Pop.supportsPopover) this.resetZindexes();
+      this.open = false;
+      this.triggerElement = null;
+      this.popContent?.style.setProperty("display", "none");
+    }
     super.disconnectedCallback();
     Pop.pops.delete(this);
     if (Pop.pops.size == 0) {
       document.removeEventListener("pointerdown", this._handleClosePop);
       document.removeEventListener("click", this._handleClosePop);
-      document.removeEventListener("keydown", this._handleKeyDown);
+      document.removeEventListener("keydown", Pop._handleKeyDown, true);
     }
   }
 
   computePosition(placement: PopPlacement) {
-    const placementSplit = placement.split(" ");
-    const placementBase = placementSplit[0];
-    let placementSec = placementSplit[1];
-
-    const padding = 5;
-    const thisRect = this.getBoundingClientRect();
-
-    const scrollableAncestor = HTML.getScrollableAncestor(
-      this.popContent,
-    ) as HTMLElement;
-    const scrollableAncestorRect = scrollableAncestor?.getBoundingClientRect();
-    const minX = Math.max(0, scrollableAncestorRect?.left || 0) + padding;
-    const minY = Math.max(0, scrollableAncestorRect?.top || 0) + padding;
-    const maxX =
-      Math.min(
-        window.innerWidth,
-        scrollableAncestorRect?.right || window.innerWidth,
-      ) - padding;
-    const maxY =
-      Math.min(
-        window.innerHeight,
-        scrollableAncestorRect?.bottom || window.innerHeight,
-      ) - padding;
-    const x0 = thisRect.left;
-    const y0 = thisRect.top;
-    let x = x0,
-      y = y0;
-    let contentRect = this.popContent?.getBoundingClientRect();
-    const yTop = y0 - contentRect.height;
-    const xLeft = x0 - contentRect.width;
-    const xRight = x0 + thisRect.width;
-    const yBottom = y0 + thisRect.height;
-    const xCenter = x0 + (thisRect.width - contentRect.width) * 0.5;
-    const yCenter = y0 + (thisRect.height - contentRect.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;
-    }
-
-    this.lastContentX += x - contentRect.x;
-    this.lastContentY += y - contentRect.y;
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
+    const { side, align } = parsePlacement(
+      normalizePopPlacement(placement),
+      "bottom",
+      "start",
+    );
+    const contentRect = this.popContent.getBoundingClientRect();
+
+    const { x, y } = computeFloatingPosition({
+      anchor: this.getBoundingClientRect(),
+      floating: contentRect,
+      side,
+      align,
+      bounds: getFloatingBounds(this.popContent, 5),
     });
 
-    contentRect = this.popContent?.getBoundingClientRect();
-    if (contentRect.x < minX && placementBase == "left") x = xRight;
-    if (contentRect.y < minY && placementBase == "top") y = yBottom;
-    if (contentRect.x + contentRect.width > maxX && placementBase == "right")
-      x = xLeft;
-    if (contentRect.y + contentRect.height > maxY && placementBase == "bottom")
-      y = yTop;
-
+    // Déplacement relatif à la position mesurée : reste juste quand un ancêtre transformé
+    // (ex. modale en translateZ) devient le bloc conteneur du position: fixed.
     this.lastContentX += x - contentRect.x;
     this.lastContentY += y - contentRect.y;
-
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
-
-    contentRect = this.popContent?.getBoundingClientRect();
-
-    if (contentRect.x < minX) {
-      this.lastContentX += minX - contentRect.x;
-    }
-    if (contentRect.y < minY) {
-      this.lastContentY += minY - contentRect.y;
-    }
-
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
-    contentRect = this.popContent?.getBoundingClientRect();
-    if (contentRect.x + contentRect.width > maxX) {
-      this.lastContentX += maxX - (contentRect.x + contentRect.width);
-    }
-    if (contentRect.y + contentRect.height > maxY) {
-      this.lastContentY += maxY - (contentRect.y + contentRect.height);
-    }
-
     Object.assign(this.popContent.style, {
       left: `${this.lastContentX}px`,
       top: `${this.lastContentY}px`,
     });
   }
 
-  private _handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
-      e.stopPropagation();
-      this.hide();
-    }
-  };
+  private static _handleKeyDown(e: KeyboardEvent) {
+    if (e.key !== "Escape") return;
+    const lastOpened = [...Pop.pops].reverse().find((pop) => pop.open);
+    if (!lastOpened) return;
+    e.stopPropagation();
+    lastOpened.hide();
+  }
 
   render() {
     return html`
@@ -358,6 +352,7 @@ export class Pop extends LitElement {
       ></slot>
       <slot
         name="content"
+        popover=${ifDefined(Pop.supportsPopover ? "manual" : undefined)}
         tabindex="-1"
         part="content"
         style="display: none;"

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

@@ -11,6 +11,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-table";
 @customElement(tagName)
@@ -66,14 +67,7 @@ export class Table extends LitElement {
     `,
   ];
 
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
   @property({ type: Boolean, reflect: true }) bordered?: boolean;
   @property({ type: Boolean, reflect: true }) rounded?: boolean;
   @property({ type: Boolean, reflect: true }) noCustomScroll?: boolean;

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

@@ -38,7 +38,7 @@ export class Theme extends LitElement {
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      ::slotted(.sonic-pop-content).is-open:not(.is-empty) {
+      ::slotted(.sonic-pop-content).is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;

package/src/core/components/ui/toast/dismissed.ts

@@ -0,0 +1,14 @@
+import {
+  isDismissed,
+  markDismissed,
+} from "@supersoniks/concorde/core/utils/dismissed";
+
+const storageKey = "sonic-toast-dismissed";
+
+export function isToastDismissed(id: string | number): boolean {
+  return isDismissed(storageKey, id);
+}
+
+export function markToastDismissed(id: string | number): void {
+  markDismissed(storageKey, id);
+}