@supersoniks/concorde 5.0.0 → 5.0.1

package/gitlab/job_tests.sh

@@ -1,16 +1,14 @@
 #!/usr/bin/env bash
 # Tests CI de concorde : install + vitest (sans watch).
 #
-# Contexte : le runner shell (ssks7, hôte manu) checkout le code dans $CI_PROJECT_DIR
-# (sous /home/gitlab-runner/...), invisible depuis le conteneur nodejs.
+# Contexte : le runner shell (ssks7) checkout le code dans $CI_PROJECT_DIR
+# (sous /home/ssks/...), invisible depuis le conteneur nodejs.
 # Le conteneur nodejs monte /usr2/sites -> /sites. On copie donc le code du runner vers
-# un dossier CI DÉDIÉ et appartenant au runner : /usr2/sites/concorde-ci/<branche>
-# (= /sites/concorde-ci/<branche> dans le conteneur), puis on lance yarn dans le conteneur
-# nodejs existant via /scripts/cmd-yes.sh. Aucune image construite.
+# un dossier CI sous /usr2/sites writable par le runner, puis on lance yarn dans le
+# conteneur nodejs existant via /scripts/cmd-yes.sh. Aucune image construite.
 #
-# Pré-requis (une seule fois, en root sur manu) :
-#   sudo mkdir -p /usr2/sites/concorde-ci
-#   sudo chown -R gitlab-runner:gitlab-runner /usr2/sites/concorde-ci
+# Si /usr2/sites/concorde-ci n'est pas writable (ex. tree laissé par un autre uid),
+# on bascule automatiquement sur /usr2/sites/concorde-ci-u<uid>.
 #
 # Concorde n'est PAS un workspace -> commandes yarn directes.
 #
@@ -19,15 +17,30 @@
 set -euo pipefail
 
 NODEJS_CONTAINER=nodejs
-SITE_BASE="/usr2/sites/concorde-ci"
 
 # En pipeline de Merge Request, CI_COMMIT_BRANCH est vide -> fallback sur CI_COMMIT_REF_NAME.
 BRANCH="${CI_COMMIT_BRANCH:-${CI_COMMIT_REF_NAME:-ci}}"
+RUN_UID="$(id -u):$(id -g)"
+RUN_UID_NUM="$(id -u)"
+
+# Dossier CI writable par le runner (évite Permission denied si un ancien tree
+# appartient à un autre uid, ex. 1001 via docker -u 1001).
+SITE_BASE="/usr2/sites/concorde-ci"
+mkdir -p "$SITE_BASE" 2>/dev/null || true
+if [[ ! -d "$SITE_BASE" || ! -w "$SITE_BASE" ]]; then
+  SITE_BASE="/usr2/sites/concorde-ci-u${RUN_UID_NUM}"
+  mkdir -p "$SITE_BASE"
+fi
+
 SITE_PATH="$SITE_BASE/$BRANCH"
-SITE_CONTAINER_PATH="/sites/concorde-ci/$BRANCH"
+if [[ -e "$SITE_PATH" && ! -w "$SITE_PATH" ]]; then
+  SITE_BASE="/usr2/sites/concorde-ci-u${RUN_UID_NUM}"
+  mkdir -p "$SITE_BASE"
+  SITE_PATH="$SITE_BASE/$BRANCH"
+fi
 
-# On exécute le conteneur avec l'uid du runner (cohérence des droits en écriture).
-RUN_UID="$(id -u):$(id -g)"
+# /usr2/sites/<...> -> /sites/<...> dans le conteneur.
+SITE_CONTAINER_PATH="/sites/${SITE_BASE#/usr2/sites/}/$BRANCH"
 
 echo "=== Configuration ==="
 echo "- CI_PROJECT_DIR       '$CI_PROJECT_DIR'"

package/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./svg/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex, nofollow" />
     <title>Concorde - A supersonic design system</title>
+    <link rel="stylesheet" href="https://use.typekit.net/eda3clw.css" />
     <script src="https://cdn.jsdelivr.net/npm/fuzzysort@2.0.1/fuzzysort.min.js"></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
      -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -345,6 +345,8 @@
     "./utils/endpoint": "./src/core/utils/endpoint.ts",
     "./utils/jsonataHelpers": "./src/core/utils/jsonataHelpers.ts",
     "./utils/jsonataRuntime": "./src/core/utils/jsonataRuntime.ts",
+    "./utils/positioning.spec": "./src/core/utils/positioning.spec.ts",
+    "./utils/positioning": "./src/core/utils/positioning.ts",
     "./utils/publisherPathKey.spec": "./src/core/utils/publisherPathKey.spec.ts",
     "./utils/route.spec": "./src/core/utils/route.spec.ts",
     "./utils/route": "./src/core/utils/route.ts",

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

@@ -30,7 +30,41 @@
   </template>
 </sonic-code>
 
+Default placement is `bottom`. Content is aligned on the start of the trigger, add `center` to center it. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" placement="bottom center">
+      <sonic-button>Bottom center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="top center">
+      <sonic-button>Top center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="left center">
+      <sonic-button>Left center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="right center">
+      <sonic-button>Right center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
 ## Shadow
+
+Default shadow is `lg`.
+
 <sonic-code>
   <template>
     <sonic-pop class="inline-block" shadow="none" placement='top' >
@@ -60,6 +94,26 @@
   </template>
 </sonic-code>
 
+## Inline
+
+By default, pop is vertically aligned to the middle. Use `inline` to align it on the text baseline, e.g. inside a sentence.
+
+<sonic-code>
+  <template>
+    <p>
+      The Concorde flew from Paris to
+      <sonic-pop inline>
+        <sonic-button variant="link">New York</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>See flights</sonic-menu-item>
+          <sonic-menu-item>Book a seat</sonic-menu-item>
+        </sonic-menu>
+      </sonic-pop>
+      in about 3.5 hours.
+    </p>
+  </template>
+</sonic-code>
+
 ## noToggle
 <sonic-code>
   <template>
@@ -93,4 +147,52 @@
       Click to open pop
     </sonic-button>
   </template>
-</sonic-code>
+</sonic-code>
+
+## Keep open on select
+
+By default, a click inside the content closes the pop, as well as a click outside. Add `data-on-select="keep"` on the content, or on any of its elements, to keep the pop open when interacting with it.
+
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block">
+      <sonic-button>Closes on select</sonic-button>
+      <div slot="content" class="grid gap-2 p-3">
+        <sonic-checkbox>Option A</sonic-checkbox>
+        <sonic-checkbox>Option B</sonic-checkbox>
+      </div>
+    </sonic-pop>
+    <sonic-pop class="inline-block">
+      <sonic-button>Stays open on select</sonic-button>
+      <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
+        <sonic-checkbox>Option A</sonic-checkbox>
+        <sonic-checkbox>Option B</sonic-checkbox>
+      </div>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## Keyboard
+
+- `ArrowDown` on the trigger opens the pop.
+- `Escape` closes the last opened pop and gives focus back to its trigger.
+
+## Methods and events
+
+`show()` and `hide()` open and close the pop programmatically (see `manual` above). The pop dispatches a `show` event when it opens and a `hide` event when it closes.
+
+```js
+const pop = document.querySelector("sonic-pop");
+pop.addEventListener("hide", () => console.log("pop closed"));
+pop.show();
+```
+
+## Styling
+
+The content can be styled from outside with `::part(content)`.
+
+```css
+sonic-pop::part(content) {
+  border-radius: 0;
+}
+```

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

@@ -1,17 +1,22 @@
 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,
+  FloatingSide,
+  getFloatingBounds,
+  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"
@@ -22,6 +27,7 @@ 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 +50,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 +58,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;
       }
@@ -83,7 +119,6 @@ export class Pop extends LitElement {
 
   runPositioningLoop() {
     if (!this.positioningRuns) return;
-    this.positioningRuns = true;
     this.computePosition(this.placement);
     window.requestAnimationFrame(() => this.runPositioningLoop());
   }
@@ -104,9 +139,14 @@ export class Pop extends LitElement {
   }
 
   show() {
-    this.setMaxZindex();
+    if (!Pop.supportsPopover) this.setMaxZindex();
     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;
@@ -118,7 +158,10 @@ export class Pop extends LitElement {
   }
 
   hide() {
-    this.resetZindexes();
+    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;
@@ -204,7 +247,7 @@ 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);
+      document.addEventListener("keydown", Pop._handleKeyDown);
     }
     Pop.pops.add(this);
   }
@@ -226,128 +269,39 @@ export class Pop extends LitElement {
     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);
     }
   }
 
   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, secondary] = placement.split(" ");
+    const contentRect = this.popContent.getBoundingClientRect();
+
+    const { x, y } = computeFloatingPosition({
+      anchor: this.getBoundingClientRect(),
+      floating: contentRect,
+      side: side as FloatingSide,
+      align: secondary == "center" ? "center" : "start",
+      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 +312,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/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;