@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.1

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

@@ -5,13 +5,32 @@ import { animate } from "@lit-labs/motion";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styleMap, StyleInfo } from "lit/directives/style-map.js";
 import "@supersoniks/concorde/core/components/ui/toast/toast-item";
+import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
 import {
   Toast,
+  ToastContent,
   ToastStatus,
 } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+let deprecatedTitleWarned = false;
+
+function resolveToastLabel(
+  conf: Pick<Toast, "label" | "title">,
+): ToastContent | undefined {
+  if (conf.label !== undefined) return conf.label;
+  if (conf.title !== undefined) {
+    if (!deprecatedTitleWarned) {
+      deprecatedTitleWarned = true;
+      console.warn(
+        "[concorde] Toast.title est déprécié, utiliser Toast.label.",
+      );
+    }
+    return conf.title;
+  }
+  return undefined;
+}
 import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
 import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 import { sonicClassPrefix } from "@supersoniks/concorde/core/utils/Utils";
@@ -55,7 +74,6 @@ export class SonicToast extends LitElement {
     // ${window.parent == window ? "fixed-area" : ""}
     SonicToast.handleExistingToastDelegation();
     if (!this.toasts) return nothing;
-
     return html`<div style=${styleMap(styles)}>
       ${repeat(
         this.toasts,
@@ -64,7 +82,10 @@ export class SonicToast extends LitElement {
           <sonic-toast-item
             maxHeight=${isIframe ? "none" : "10rem"}
             status=${ifDefined(item.status)}
-            title=${ifDefined(item.title)}
+            .label=${resolveToastLabel(item)}
+            .text=${item.useSlot ? undefined : item.text}
+            .styleSheet=${item.styleSheet}
+            ?useSlot=${item.useSlot}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
             ?preserve=${item.preserve}
@@ -93,10 +114,9 @@ export class SonicToast extends LitElement {
               stabilizeOut: true,
             })}
           >
-            <!-- Le texte est passé dans le slot et non pas en propriété pour contrer des problèmatiques de shadow-dom et d'appel exterieur (exemple: fancybox) -->
-            ${item.text ? unsafeHTML(item.text) : ""}
+            ${item.useSlot ? renderToastContent(item.text) : nothing}
           </sonic-toast-item>
-        `
+        `,
       )}
     </div>`;
   }
@@ -124,7 +144,21 @@ export class SonicToast extends LitElement {
 
     // Filtrer pour garder seulement les toasts qui ne correspondent pas au statut donné
     toastComponent.toasts = toastComponent.toasts.filter(
-      (toast) => toast.status !== status
+      (toast) => toast.status !== status,
+    );
+  }
+
+  static removeItemById(id: string | number) {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({ type: "removeItemById", id }, "*");
+      return;
+    }
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    if (!toastComponent) return;
+
+    toastComponent.toasts = toastComponent.toasts.filter(
+      (toast) => toast.id !== id,
     );
   }
 
@@ -139,7 +173,7 @@ export class SonicToast extends LitElement {
     if (!toastComponent) return;
 
     toastComponent.toasts = toastComponent.toasts.filter(
-      (item) => item.preserve
+      (item) => item.preserve,
     );
   }
 
@@ -159,23 +193,25 @@ export class SonicToast extends LitElement {
     }
     // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
     const toastComponent = SonicToast.getInstance();
-
     // Ajoute le toast à la liste
     const nextId = conf.id ?? new Date().valueOf();
 
     const interactiveRegExp = new RegExp(
-      "</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>"
+      "</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>",
     );
-    const hasInteractive = interactiveRegExp.test(conf.text);
+    const hasInteractive =
+      typeof conf.text === "string" && interactiveRegExp.test(conf.text);
 
     const currentToast = {
       id: nextId,
       text: conf.text,
-      title: conf.title,
+      label: resolveToastLabel(conf),
       status: conf.status,
       preserve: hasInteractive ? true : conf.preserve,
       ghost: conf.ghost,
       dismissForever: conf.dismissForever,
+      styleSheet: conf.styleSheet,
+      useSlot: conf.useSlot,
     };
 
     // check if the toast is dismissed
@@ -210,7 +246,7 @@ export class SonicToast extends LitElement {
     const toastComponent: SonicToast = SonicToast.getInstance();
     window.parent.postMessage(
       { type: "addToasts", toasts: toastComponent.toasts },
-      "*"
+      "*",
     );
     toastComponent.toasts = [];
   }
@@ -220,7 +256,7 @@ export class SonicToast extends LitElement {
       SonicToast.handleExistingToastDelegation();
       window.parent.postMessage(
         { type: "removeToast", toast: toastToRemove },
-        "*"
+        "*",
       );
       return;
     }
@@ -257,6 +293,10 @@ function handleIframeContexts() {
       SonicToast.removeItemsByStatus(e.data.status);
     }
 
+    if (e.data.type == "removeItemById") {
+      SonicToast.removeItemById(e.data.id);
+    }
+
     if (e.data.type == "removeTemporaryItems") {
       SonicToast.removeTemporaryItems();
     }

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

@@ -1,14 +1,26 @@
 import { Message } from "@supersoniks/concorde/core/_types/types";
+import { TemplateResult } from "lit";
+import { DirectiveResult } from "lit/directive.js";
+import { ModalStyleSheetInput } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 
 export type ToastStatus = Message["status"] | "" | "success";
 
+export type ToastContent = string | TemplateResult | DirectiveResult;
+
+export type ToastStyleSheetInput = ModalStyleSheetInput;
+
 // Toast
 export type Toast = {
   id?: string | number;
-  text: string;
-  title?: string;
+  text: ToastContent;
+  label?: ToastContent;
+  /** @deprecated Utiliser `label`. */
+  title?: ToastContent;
   status?: ToastStatus;
   preserve?: boolean;
   ghost?: boolean;
   dismissForever?: boolean;
+  styleSheet?: ToastStyleSheetInput;
+  /** Legacy: project text into the light DOM slot instead of the shadow root. */
+  useSlot?: boolean;
 };

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/decorators/subscriber/derive.ts

@@ -6,6 +6,7 @@ import {
   derive as deriveFn,
   type DeriveHandle,
 } from "../../utils/derive";
+import { compileJsonata } from "../../utils/jsonataRuntime";
 
 export type DeriveDecoratorOptions<
   I extends Record<string, unknown>,
@@ -60,9 +61,8 @@ export function deriveDecorator<
           if (!options.expr) {
             throw new Error("@derive : fournir `expr` ou `fn`.");
           }
-          const { compileJsonata } = await import(
-            "../../utils/jsonataRuntime"
-          );
+          // Static import: dynamic import() breaks consumer Vite builds
+          // (rewrites to \0vite/preload-helper → load-fallback null-byte error).
           const expr = compileJsonata(options.expr);
           return expr.evaluate({}, {
             ...(vars as Record<string, unknown>),

package/src/core/mixins/Fetcher.ts

@@ -160,7 +160,7 @@ const Fetcher = <
      * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
      * Un Toast est affiché si le chargement échoue
      */
-    protected async _fetchData() {
+    async _fetchData() {
       this.requestUpdate();
       if (!this.isFetchEnabled) return;
       this.api = new API(this.getApiConfiguration());

package/src/core/mixins/FormCheckable.ts

@@ -118,11 +118,6 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       this.requestUpdate();
       setTimeout(() => this.updateAllChecked(), 1);
 
-      // Désactivation du checked sur le publisher
-      // Pas sur de l'utilité mais provoque un bug
-      // if (this.publisher && !this.radio && !this.unique) {
-      //   this.publisher.checked = this._checked;
-      // }
     }
 
     handleChange() {
@@ -300,9 +295,7 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       if (!this.hasAttribute("checked")) {
         return;
       }
-      if (!this.publisher || this.publisher.get().checked !== false) {
-        setTimeout(() => (this.checked = true), 1);
-      }
+      setTimeout(() => (this.checked = true), 1);
     }
   }
   return FormCheckable;