@mlola-ui/registry 1.0.12 → 1.0.13

package/snapshot/items/components/segmented-control.json

@@ -19,7 +19,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/select.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12",
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {
@@ -43,7 +43,7 @@
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/items/components/sheet.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12",
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/slider.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/stepper.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tabs.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tag-input.json

@@ -23,7 +23,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/time-picker.json

@@ -22,7 +22,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/timeline.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/toast.json

@@ -20,7 +20,7 @@
     "spinner"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tooltip.json

@@ -23,7 +23,9 @@
     "isDefault": false
   },
   "registryDependencies": [],
-  "engineDependencies": {},
+  "engineDependencies": {
+    "@mlola-ui/behavior": "^1.0.13"
+  },
   "options": [
     {
       "component": "Tooltip",
@@ -40,6 +42,12 @@
   "variants": [],
   "sizes": [],
   "files": [
+    {
+      "path": "packages/components/_internal/anchor.ts",
+      "target": "{{aliases.components}}/_internal/anchor.ts",
+      "type": "registry:ui",
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+    },
     {
       "path": "packages/components/_internal/react.ts",
       "target": "{{aliases.components}}/_internal/react.ts",
@@ -50,7 +58,7 @@
       "path": "packages/components/tooltip/tooltip.tsx",
       "target": "{{aliases.components}}/tooltip.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc="
+      "integrity": "sha256-hplqwWF/ZqQQ9oyoErrOA3VjkRCDCbqwt5xgZOdsFcA="
     }
   ],
   "themeContract": {

package/snapshot/items/components/tour.json

@@ -20,8 +20,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.12",
-    "@mlola-ui/icons": "^1.0.12"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],
@@ -31,7 +31,7 @@
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/source/packages/components/_internal/anchor.ts

@@ -2,4 +2,4 @@
  * Where a floating layer goes next to its anchor. The math is shared with the
  * framework-free runtime, so it lives in @mlola-ui/behavior/logic.
  */
-export { placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
+export { fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";

package/snapshot/source/packages/components/tooltip/tooltip.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { fitTooltip, type Side } from "../_internal/anchor";
 import { cx } from "../_internal/react";
 
 export type TooltipPlacement = "top" | "bottom" | "left" | "right";
@@ -14,6 +15,10 @@ interface TooltipProps {
 
 function Tooltip({ content, placement = "top", delay = 200, children, className }: TooltipProps) {
   const [open, setOpen] = React.useState(false);
+  // Where it actually opens: the asked side, flipped or slid to stay on screen.
+  const [fit, setFit] = React.useState<{ side: Side; shift: number }>({ side: placement, shift: 0 });
+  const root = React.useRef<HTMLSpanElement>(null);
+  const tip = React.useRef<HTMLSpanElement>(null);
   const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const id = React.useId();
   const clear = () => {
@@ -29,6 +34,17 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
     setOpen(false);
   };
   React.useEffect(() => clear, []);
+  React.useLayoutEffect(() => {
+    const anchor = root.current?.firstElementChild ?? root.current;
+    if (!open || !anchor || !tip.current) {
+      setFit({ side: placement, shift: 0 });
+      return;
+    }
+    const a = anchor.getBoundingClientRect();
+    // Layout size, not the painted box: the pop-in animation starts scaled down.
+    const t = { width: tip.current.offsetWidth, height: tip.current.offsetHeight };
+    setFit(fitTooltip({ x: a.left, y: a.top, width: a.width, height: a.height }, t, { width: document.documentElement.clientWidth, height: window.innerHeight }, placement));
+  }, [open, placement]);
   React.useEffect(() => {
     if (!open) return;
     const onKeyDown = (event: KeyboardEvent) => {
@@ -55,10 +71,18 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
       : childProps["aria-describedby"],
   } as Record<string, unknown>);
   return (
-    <span className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
+    <span ref={root} className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
       {trigger}
       {open ? (
-        <span id={id} role="tooltip" data-side={placement} data-state="open" className={cx("ml-tooltip", className)}>
+        <span
+          ref={tip}
+          id={id}
+          role="tooltip"
+          data-side={fit.side}
+          data-state="open"
+          className={cx("ml-tooltip", className)}
+          style={{ "--ml-tooltip-shift": `${fit.shift}px` } as React.CSSProperties}
+        >
           {content}
           <span aria-hidden="true" className="ml-tooltip-arrow" />
         </span>

package/snapshot/source-manifest.json

@@ -1,5 +1,5 @@
 {
-  "packages/components/_internal/anchor.ts": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc=",
+  "packages/components/_internal/anchor.ts": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8=",
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU=",
   "packages/components/_internal/floating.ts": "sha256-+WxgC4CtAlSr2qA1EkoDTgto535XLIPsvtOfdOK6CHk=",
@@ -64,7 +64,7 @@
   "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
   "packages/components/toast/toast.tsx": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg=",
   "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
-  "packages/components/tooltip/tooltip.tsx": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc=",
+  "packages/components/tooltip/tooltip.tsx": "sha256-hplqwWF/ZqQQ9oyoErrOA3VjkRCDCbqwt5xgZOdsFcA=",
   "packages/components/tour/tour.tsx": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU=",
   "packages/components/virtual-list/virtual-list.tsx": "sha256-raGEFn4HlAOIohqZcy0DgptsnUIPS/6bWLYeTe+M9E8=",
   "packages/components/virtual-list/virtual.ts": "sha256-PyDIj3C2Vwb1i4ZssxSlYjgKmZPBIFLZFNq8YCW2Z78="