@supersoniks/concorde 5.0.0 → 5.0.1

package/src/core/utils/positioning.ts

@@ -0,0 +1,164 @@
+import HTML, { SearchableDomElement } from "./HTML";
+
+export type FloatingSide = "top" | "right" | "bottom" | "left";
+export type FloatingAlign = "start" | "center" | "end";
+
+export type FloatingBounds = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+};
+
+type Rect = Pick<DOMRect, "left" | "top" | "right" | "bottom" | "width" | "height">;
+type Size = Pick<DOMRect, "width" | "height">;
+
+export const supportsPopover = "popover" in HTMLElement.prototype;
+
+const OPPOSITE_SIDE: Record<FloatingSide, FloatingSide> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+/**
+ * Zone dans laquelle un élément flottant doit rester visible :
+ * le viewport, restreint par le premier ancêtre qui scrolle ou clippe `node`.
+ */
+export function getFloatingBounds(
+  node: SearchableDomElement,
+  padding = 0,
+): FloatingBounds {
+  const clipRect = (
+    HTML.getScrollableAncestor(node) as HTMLElement | null
+  )?.getBoundingClientRect();
+
+  // `||` et non `??` : un bord à 0 (ancêtre non rendu) retombe sur le viewport, comme historiquement dans sonic-pop.
+  return {
+    minX: Math.max(0, clipRect?.left || 0) + padding,
+    minY: Math.max(0, clipRect?.top || 0) + padding,
+    maxX:
+      Math.min(window.innerWidth, clipRect?.right || window.innerWidth) -
+      padding,
+    maxY:
+      Math.min(window.innerHeight, clipRect?.bottom || window.innerHeight) -
+      padding,
+  };
+}
+
+function alignOnAxis(
+  start: number,
+  length: number,
+  floatingLength: number,
+  align: FloatingAlign,
+) {
+  if (align === "start") return start;
+  if (align === "end") return start + length - floatingLength;
+  return start + (length - floatingLength) / 2;
+}
+
+function placeOnSide(
+  anchor: Rect,
+  floating: Size,
+  side: FloatingSide,
+  align: FloatingAlign,
+  gap: number,
+) {
+  switch (side) {
+    case "top":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.top - floating.height - gap,
+      };
+    case "bottom":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.bottom + gap,
+      };
+    case "left":
+      return {
+        x: anchor.left - floating.width - gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    case "right":
+      return {
+        x: anchor.right + gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    default:
+      return { x: anchor.left, y: anchor.top };
+  }
+}
+
+function overflowsSide(
+  position: { x: number; y: number },
+  floating: Size,
+  side: FloatingSide,
+  bounds: FloatingBounds,
+) {
+  switch (side) {
+    case "top":
+      return position.y < bounds.minY;
+    case "bottom":
+      return position.y + floating.height > bounds.maxY;
+    case "left":
+      return position.x < bounds.minX;
+    case "right":
+      return position.x + floating.width > bounds.maxX;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Position (coordonnées viewport) d'un élément flottant accolé à `anchor` :
+ * bascule sur le côté opposé s'il déborde, puis le contraint dans `bounds`.
+ * S'il est plus grand que `bounds`, c'est le bord bas / droit qui l'emporte.
+ */
+export function computeFloatingPosition({
+  anchor,
+  floating,
+  side,
+  align = "center",
+  gap = 0,
+  bounds,
+}: {
+  anchor: Rect;
+  floating: Size;
+  side: FloatingSide;
+  align?: FloatingAlign;
+  gap?: number;
+  bounds: FloatingBounds;
+}) {
+  let placedSide = side;
+  let position = placeOnSide(anchor, floating, placedSide, align, gap);
+
+  if (overflowsSide(position, floating, placedSide, bounds)) {
+    placedSide = OPPOSITE_SIDE[placedSide];
+    position = placeOnSide(anchor, floating, placedSide, align, gap);
+  }
+
+  return {
+    side: placedSide,
+    x: Math.min(
+      Math.max(position.x, bounds.minX),
+      bounds.maxX - floating.width,
+    ),
+    y: Math.min(
+      Math.max(position.y, bounds.minY),
+      bounds.maxY - floating.height,
+    ),
+  };
+}
+
+/** Appelle `callback` à chaque frame ; renvoie la fonction d'arrêt. */
+export function startFrameLoop(callback: () => void) {
+  let frame = 0;
+  const tick = () => {
+    callback();
+    frame = requestAnimationFrame(tick);
+  };
+  tick();
+  return () => cancelAnimationFrame(frame);
+}

package/src/directives.ts

@@ -1,6 +1,5 @@
 import * as directives from "@supersoniks/concorde/core/directives/DataProvider";
 import {dp as pubDp, dataProvider as pubDataProvider, get as pubGet, set as pubSet} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import type {DirectiveResult} from "lit/async-directive.js";
 
 import {ConcordeWindow} from "./core/_types/types";
 /**
@@ -11,8 +10,8 @@ export const dp = pubDp;
  * @deprecated @see pubDataProvider
  */
 export const dataProvider = pubDataProvider;
-export const subscribe = directives.subscribe as DirectiveResult;
-export const sub = directives.sub as DirectiveResult;
+export const subscribe = directives.subscribe;
+export const sub = directives.sub;
 
 /**
  * @deprecated @see pubGet

package/src/docs/search/docs-search.json

@@ -2954,6 +2954,96 @@
       }
     }
   },
+  {
+    "search": "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.\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "placement": {
+            "count": 1,
+            "title": "Placement",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Default shadow is lg.\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "shadow": {
+            "count": 1,
+            "title": "Shadow",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "By default, pop is vertically aligned to the middle. Use inline to align it on the text baseline, e.g. inside a sentence.\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "inline": {
+            "count": 1,
+            "title": "Inline",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "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.\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "keep-open-on-select": {
+            "count": 1,
+            "title": "Keep open on select",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "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.\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "methods-and-events": {
+            "count": 1,
+            "title": "Methods and events",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "The content can be styled from outside with ::part(content).\n",
+    "files": {
+      "core/components/ui/pop/pop.md": {
+        "title": "Pop",
+        "hashes": {
+          "styling": {
+            "count": 1,
+            "title": "Styling",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
   {
     "search": "Progress bar",
     "files": {

package/src/docs/tailwind/css/tailwind.css

@@ -4,7 +4,8 @@
 
 @font-face {
   font-family: "ClashGrotesk-Variable";
-  src: url("/fonts/ClashGrotesk-Variable.woff2") format("woff2"),
+  src:
+    url("/fonts/ClashGrotesk-Variable.woff2") format("woff2"),
     url("/fonts/ClashGrotesk-Variable.woff") format("woff"),
     url("/fonts/ClashGrotesk-Variable.ttf") format("truetype");
   font-weight: 200 700;
@@ -18,7 +19,6 @@
   --sc-headings-font-weight: 400;
   --sc-rounded: 0.5rem;
   --sc-border-width: max(2px, 0.18rem);
- 
 }
 
 /*duotone*/
@@ -29,7 +29,6 @@
   --sc-primary-content: white;
 } */
 
-
 [data-concorde-theme="light"] {
   --sc-base: #fffcf0;
   --sc-base-content: #111111;
@@ -53,7 +52,6 @@
   --sc-warning-content: #111827;
   --sc-danger: #dc2626;
   --sc-danger-content: #ffffff;
-
 }
 
 [data-concorde-theme="dark"] {
@@ -79,14 +77,13 @@
   --sc-warning-content: #111827;
   --sc-danger: #dd2528;
   --sc-danger-content: #ffffff;
-} 
+}
 [data-concorde-theme="light"],
 [data-concorde-theme="dark"] {
   --sc-input-bg: var(--sc-base-100);
   --sc-input-border-color: var(--sc-base-100);
 }
 
-
 html {
   font-family: var(--sc-font-family-base, sans-serif);
 }
@@ -178,3 +175,7 @@ html {
   transition: box-shadow 0.2s;
   border: solid 0.15rem transparent;
 }
+
+p {
+  text-wrap: pretty;
+}