@pathscale/ui 1.1.68 → 1.1.69

package/dist/components/tooltip/Tooltip.css

@@ -3,7 +3,6 @@
    * Root
    * -----------------------------------------------------------------------------------------------*/
   .tooltip {
-    position: relative;
     display: inline-flex;
   }
 
@@ -27,7 +26,7 @@
    * Content
    * -----------------------------------------------------------------------------------------------*/
   .tooltip__content {
-    position: absolute;
+    position: fixed;
     z-index: 9999;
     max-width: 20rem;
     border-radius: var(--radius-field, 0.5rem);
@@ -41,15 +40,12 @@
     pointer-events: none;
     background-color: var(--color-neutral);
     color: var(--color-neutral-content);
-    box-shadow:
-      0 4px 6px -1px oklch(0% 0 0 / 0.1),
-      0 2px 4px -2px oklch(0% 0 0 / 0.1);
+    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
+      oklch(0% 0 0 / 0.1);
 
     opacity: 0;
     overflow: visible;
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease;
+    transition: opacity 150ms ease, transform 150ms ease;
   }
 
   /* Visible state */
@@ -60,46 +56,42 @@
 
   /* ----- Placement: top (default) ----- */
   .tooltip__content[data-placement="top"] {
-    bottom: calc(100% + 0.75rem);
-    left: 50%;
-    transform: translateX(-50%) translateY(0.25rem);
+    transform: translateY(0.25rem);
+    transform-origin: bottom;
   }
 
   .tooltip__content[data-placement="top"][data-open="true"] {
-    transform: translateX(-50%) translateY(0);
+    transform: translateY(0);
   }
 
   /* ----- Placement: bottom ----- */
   .tooltip__content[data-placement="bottom"] {
-    top: calc(100% + 0.75rem);
-    left: 50%;
-    transform: translateX(-50%) translateY(-0.25rem);
+    transform: translateY(-0.25rem);
+    transform-origin: top;
   }
 
   .tooltip__content[data-placement="bottom"][data-open="true"] {
-    transform: translateX(-50%) translateY(0);
+    transform: translateY(0);
   }
 
   /* ----- Placement: left ----- */
   .tooltip__content[data-placement="left"] {
-    right: calc(100% + 0.75rem);
-    top: 50%;
-    transform: translateX(0.25rem) translateY(-50%);
+    transform: translateX(0.25rem);
+    transform-origin: right;
   }
 
   .tooltip__content[data-placement="left"][data-open="true"] {
-    transform: translateX(0) translateY(-50%);
+    transform: translateX(0);
   }
 
   /* ----- Placement: right ----- */
   .tooltip__content[data-placement="right"] {
-    left: calc(100% + 0.75rem);
-    top: 50%;
-    transform: translateX(-0.25rem) translateY(-50%);
+    transform: translateX(-0.25rem);
+    transform-origin: left;
   }
 
   .tooltip__content[data-placement="right"][data-open="true"] {
-    transform: translateX(0) translateY(-50%);
+    transform: translateX(0);
   }
 
   /* ----- Reduced motion ----- */

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,10 +1,13 @@
 import "./Tooltip.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
 import type { IComponentBaseProps } from "../types";
-export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export type TooltipPlacement = OverlayPlacement;
 export type TooltipRootProps = IComponentBaseProps & {
     children: JSX.Element;
     placement?: TooltipPlacement;
+    autoFlip?: boolean;
+    sideOffset?: number;
     showArrow?: boolean;
     delay?: number;
     closeDelay?: number;

package/dist/components/tooltip/Tooltip.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Tooltip.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__ from "./Tooltip.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>');
 const TooltipContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -14,6 +15,8 @@ const TooltipRoot = (props)=>{
     const [local, _others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "placement",
+        "autoFlip",
+        "sideOffset",
         "showArrow",
         "delay",
         "closeDelay",
@@ -27,19 +30,46 @@ const TooltipRoot = (props)=>{
     ]);
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
     const [triggerRef, setTriggerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [contentRef, setContentRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [resolvedPlacement, setResolvedPlacement] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.placement ?? "top");
+    let delayTimer;
+    let closeTimer;
     const isControlled = ()=>void 0 !== local.isOpen;
     const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
     const setIsOpen = (v)=>{
         if (!isControlled()) setInternalOpen(v);
         local.onOpenChange?.(v);
     };
+    const openTooltip = ()=>{
+        clearTimeout(closeTimer);
+        clearTimeout(delayTimer);
+        delayTimer = setTimeout(()=>setIsOpen(true), local.delay ?? 0);
+    };
+    const closeTooltip = ()=>{
+        clearTimeout(delayTimer);
+        clearTimeout(closeTimer);
+        closeTimer = setTimeout(()=>setIsOpen(false), local.closeDelay ?? 100);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        clearTimeout(delayTimer);
+        clearTimeout(closeTimer);
+    });
     const ctx = {
         isOpen,
         setIsOpen,
-        placement: ()=>local.placement ?? "top",
+        openTooltip,
+        closeTooltip,
+        preferredPlacement: ()=>local.placement ?? "top",
+        placement: ()=>resolvedPlacement(),
+        setPlacement: setResolvedPlacement,
+        autoFlip: ()=>local.autoFlip ?? true,
+        sideOffset: ()=>local.sideOffset ?? 12,
         showArrow: ()=>Boolean(local.showArrow),
         triggerRef,
-        setTriggerRef
+        setTriggerRef,
+        contentRef,
+        setContentRef,
+        dataTheme: ()=>local.dataTheme
     };
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TooltipContext.Provider, {
         value: ctx,
@@ -74,24 +104,16 @@ const TooltipTrigger = (props)=>{
         "onFocusOut"
     ]);
     const ctx = useTooltipContext();
-    let delayTimer;
-    let closeTimer;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        clearTimeout(delayTimer);
-        clearTimeout(closeTimer);
-    });
     const handleMouseEnter = (e)=>{
-        clearTimeout(closeTimer);
-        ctx.setIsOpen(true);
+        ctx.openTooltip();
         if ("function" == typeof local.onMouseEnter) local.onMouseEnter(e);
     };
     const handleMouseLeave = (e)=>{
-        closeTimer = setTimeout(()=>ctx.setIsOpen(false), 100);
+        ctx.closeTooltip();
         if ("function" == typeof local.onMouseLeave) local.onMouseLeave(e);
     };
     const handleFocusIn = (e)=>{
-        clearTimeout(closeTimer);
-        ctx.setIsOpen(true);
+        ctx.openTooltip();
         if ("function" == typeof local.onFocusIn) local.onFocusIn(e);
     };
     const handleFocusOut = (e)=>{
@@ -126,33 +148,78 @@ const TooltipContent = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style"
+        "style",
+        "onMouseEnter",
+        "onMouseLeave"
     ]);
     const ctx = useTooltipContext();
-    return (()=>{
-        var _el$3 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "tooltip"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__.CLASSES.slot.content, local.class, local.className)
-            }), {
-            "data-slot": "tooltip-content",
-            get ["data-placement"] () {
-                return ctx.placement();
-            },
-            get ["data-open"] () {
-                return ctx.isOpen() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: ctx.isOpen,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.contentRef,
+        placement: ctx.preferredPlacement,
+        offset: ctx.sideOffset,
+        autoFlip: ctx.autoFlip,
+        align: ()=>"center"
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        ctx.setPlacement(overlayPosition.placement());
+    });
+    const style = ()=>{
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
+        return {
+            ...local.style ?? {},
+            ...overlayStyle
+        };
+    };
+    const handleMouseEnter = (event)=>{
+        ctx.openTooltip();
+        if ("function" == typeof local.onMouseEnter) local.onMouseEnter(event);
+    };
+    const handleMouseLeave = (event)=>{
+        ctx.closeTooltip();
+        if ("function" == typeof local.onMouseLeave) local.onMouseLeave(event);
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return ctx.isOpen();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    var _el$3 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setContentRef(el), _el$3);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        role: "tooltip"
+                    }, ()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__.CLASSES.slot.content, local.class, local.className)
+                        }), {
+                        "data-slot": "tooltip-content",
+                        get ["data-placement"] () {
+                            return ctx.placement();
+                        },
+                        get ["data-open"] () {
+                            return ctx.isOpen() ? "true" : "false";
+                        },
+                        get ["data-theme"] () {
+                            return local.dataTheme ?? ctx.dataTheme();
+                        },
+                        get style () {
+                            return style();
+                        },
+                        onMouseEnter: handleMouseEnter,
+                        onMouseLeave: handleMouseLeave
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+                    return _el$3;
+                }
+            });
+        }
+    });
 };
 const TooltipArrow = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [

package/dist/purge-manifest.json

@@ -2186,7 +2186,10 @@
           ]
         }
       }
-    }
+    },
+    "deps": [
+      "_shared"
+    ]
   },
   "Disclosure": {
     "classes": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.68",
+  "version": "1.1.69",
   "author": "pathscale",
   "repository": {
     "type": "git",