@pathscale/ui 2.11.5 → 2.11.7

package/dist/components/_shared/overlayHost.css

@@ -0,0 +1,44 @@
+/*
+ * The containing block every component that owns a non-portaled overlay needs.
+ *
+ * One definition rather than one per component, for the same reason
+ * `material.css` exists: Dropdown, Select, Popover, Tooltip, Dialog, Drawer and
+ * anything else that opens a floating layer all need exactly this, and copying
+ * a one-line rule into seven files is seven places to be wrong in.
+ *
+ * ## What it is for
+ *
+ * These overlays are `position: fixed` and live inside their owning component's
+ * subtree rather than in a portal. (Portals are what we moved *away* from: under
+ * Blitz a portal makes a transient semantic subtree, so an option can paint for
+ * one frame and vanish before the next sibling opens.) A fixed child positioned
+ * in viewport coordinates routinely lands far outside its parent's box: a
+ * 220x239 dropdown menu under a 72x28 pill trigger overhangs by ~267px.
+ *
+ * A renderer resolves a pointer by descending the box tree, and it descends into
+ * a child that escaped its parent's bounds only when the parent carries the
+ * hoisted-content area that a *stacking context* provides. `position: relative`
+ * alone does not create one unless it also carries a `z-index`. Without a
+ * stacking context the overlay paints, reports itself visible to the semantic
+ * tree, and silently takes no clicks: hit-testing rejects the descent before it
+ * ever reaches the item.
+ *
+ * That failure is invisible to any check that activates a node semantically
+ * rather than by pointer, which is how it shipped: the menu was addressable and
+ * the value changed, so the check passed while a real mouse could not click it.
+ *
+ * `isolation: isolate` exists precisely to create a stacking context with no
+ * other visual effect, which is why it is the property used here rather than a
+ * `z-index` that would also reorder painting.
+ *
+ * ## How to use it
+ *
+ * Import this file and put `ui-overlay-host` on the component's root, alongside
+ * whatever positioning that root already sets.
+ */
+@layer components {
+  .ui-overlay-host {
+    position: relative;
+    isolation: isolate;
+  }
+}

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -93,6 +93,10 @@ const readMotionState = (el)=>{
         y: Number.isFinite(values[5]) ? values[5] : 0
     };
 };
+const applyMotionState = (el, state)=>{
+    el.style.opacity = String(state.opacity ?? 1);
+    el.style.transform = `translate3d(${state.x ?? 0}px, ${state.y ?? 0}px, 0) scale(${state.scale ?? 1})`;
+};
 const getLiftOffset = (item, distance)=>{
     const radius = Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2);
     if (!Number.isFinite(radius) || 0 === radius) return {
@@ -475,6 +479,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                 children: (item, index)=>{
                     let motionRef;
                     let dotControl = null;
+                    let hasPaintedFinalState = false;
                     const isHovered = ()=>hoveredIndex() === index();
                     const isPressed = ()=>pressedIndex() === index();
                     const isPulsing = ()=>pulseState()?.index === index();
@@ -563,6 +568,11 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                     createTrackedEffect(()=>{
                         if (!motionRef) return;
                         const target = dotTarget();
+                        if (!hasPaintedFinalState) {
+                            applyMotionState(motionRef, target);
+                            hasPaintedFinalState = true;
+                            return;
+                        }
                         const transition = dotTransition();
                         dotControl?.stop();
                         dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);

package/dist/components/dropdown/Dropdown.css

@@ -1,3 +1,5 @@
+@import "../_shared/overlayHost.css";
+
 @layer components {
   .dropdown {
     position: relative;
@@ -93,8 +95,7 @@
     will-change: opacity, transform;
     transition:
       opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      visibility 150ms ease;
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   .dropdown__popover[data-open="true"] {

package/dist/components/dropdown/Dropdown.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Dropdown.css";
-import { type JSX } from "@solidjs/web";
+import type { JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 type DropdownAlign = "start" | "end";
 type DropdownPlacement = OverlayPlacement;

package/dist/components/dropdown/Dropdown.generated.js

@@ -1,4 +1,4 @@
-import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dropdown.css";
 import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
@@ -337,48 +337,44 @@ const __solidLayoutDropdownMenu = (_stable, p)=>{
             return ctx.open();
         },
         get children () {
-            return createComponent(Portal, {
-                get children () {
-                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
-                    var _ref$ = ctx.setMenuRef;
-                    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
-                    spread(_el$6, mergeProps(others, {
-                        get id () {
-                            return ctx.menuId;
-                        }
-                    }, ()=>({
-                            class: twMerge(CLASSES.slot.popover, p.class)
-                        }), {
-                        get role () {
-                            return p.role ?? "menu";
-                        },
-                        "data-slot": "dropdown-popover",
-                        get ["data-open"] () {
-                            return ctx.open() ? "true" : "false";
-                        },
-                        get ["data-align"] () {
-                            return p.align ?? "start";
-                        },
-                        get ["data-placement"] () {
-                            return overlayPosition.placement();
-                        },
-                        get ["aria-hidden"] () {
-                            return ctx.open() ? "false" : "true";
-                        },
-                        get style () {
-                            return menuStyle();
-                        },
-                        onKeyDown: handleKeyDown
-                    }), true);
-                    spread(_el$7, mergeProps(()=>({
-                            class: CLASSES.slot.menu
-                        }), {
-                        "data-slot": "dropdown-menu"
-                    }), true);
-                    insert(_el$7, ()=>p.children);
-                    return _el$6;
+            var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+            var _ref$ = ctx.setMenuRef;
+            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
+            spread(_el$6, mergeProps(others, {
+                get id () {
+                    return ctx.menuId;
                 }
-            });
+            }, ()=>({
+                    class: twMerge(CLASSES.slot.popover, p.class)
+                }), {
+                get role () {
+                    return p.role ?? "menu";
+                },
+                "data-slot": "dropdown-popover",
+                get ["data-open"] () {
+                    return ctx.open() ? "true" : "false";
+                },
+                get ["data-align"] () {
+                    return p.align ?? "start";
+                },
+                get ["data-placement"] () {
+                    return overlayPosition.placement();
+                },
+                get ["aria-hidden"] () {
+                    return ctx.open() ? "false" : "true";
+                },
+                get style () {
+                    return menuStyle();
+                },
+                onKeyDown: handleKeyDown
+            }), true);
+            spread(_el$7, mergeProps(()=>({
+                    class: CLASSES.slot.menu
+                }), {
+                "data-slot": "dropdown-menu"
+            }), true);
+            insert(_el$7, ()=>p.children);
+            return _el$6;
         }
     });
 };

package/dist/components/dropdown/Dropdown.recipe.d.ts

@@ -1,5 +1,5 @@
 export declare const CLASSES: {
-    readonly base: "dropdown";
+    readonly base: "dropdown ui-overlay-host";
     readonly slot: {
         readonly trigger: "dropdown__trigger";
         readonly popover: "dropdown__popover";

package/dist/components/dropdown/Dropdown.recipe.js

@@ -1,6 +1,6 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: "dropdown",
+    base: "dropdown ui-overlay-host",
     slot: {
         trigger: "dropdown__trigger",
         popover: "dropdown__popover",

package/dist/components/inline-edit/InlineEdit.generated.js

@@ -1,7 +1,7 @@
 import { addEvent, className, delegateEvents, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./InlineEdit.css";
-import { createTrackedEffect, omit, onSettled } from "solid-js";
+import { createEffect, createSignal, omit, onSettled } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { bindInlineEditDismissals, createInlineEditInteractions } from "./InlineEdit.interactions.js";
 import { CLASSES, componentRecipe } from "./InlineEdit.recipe.js";
@@ -10,19 +10,17 @@ const __solidLayoutInlineEdit = (_stable, p)=>{
     const others = omit(p, "class", "value", "onCommit", "label", "trigger", "children", "fullWidth", "disabled", "fieldClass", "ref");
     let root;
     let field;
+    const [isOpen, setIsOpen] = createSignal(false);
     const interactions = createInlineEditInteractions({
         value: ()=>p.value,
         disabled: ()=>Boolean(p.disabled),
         root: ()=>root,
         field: ()=>field,
-        editingClass: CLASSES.flag.editing,
+        onOpenChange: setIsOpen,
         onCommit: (value)=>p.onCommit?.(value)
     });
-    const rootClasses = ()=>twMerge(CLASSES.base, interactions.isOpen() && CLASSES.flag.editing, p.fullWidth && CLASSES.flag.fullWidth, p.disabled && CLASSES.flag.disabled, p.class);
-    createTrackedEffect(()=>{
-        p.value;
-        interactions.syncValue();
-    });
+    const rootClasses = ()=>twMerge(CLASSES.base, isOpen() && CLASSES.flag.editing, p.fullWidth && CLASSES.flag.fullWidth, p.disabled && CLASSES.flag.disabled, p.class);
+    createEffect(()=>p.value, (nextValue)=>interactions.syncValue(nextValue));
     onSettled(()=>bindInlineEditDismissals(document, window, interactions.outside, interactions.windowBlur));
     var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild;
     ref(()=>(element)=>{

package/dist/components/inline-edit/InlineEdit.interactions.d.ts

@@ -3,9 +3,9 @@ export declare function bindInlineEditDismissals(documentSource: Pick<Document,
 export type InlineEditInteractionOptions = {
     value: () => string;
     disabled: () => boolean;
-    root: () => Pick<HTMLElement, "classList" | "contains"> | undefined;
+    root: () => Pick<HTMLElement, "contains"> | undefined;
     field: () => InlineEditField | undefined;
-    editingClass: string;
+    onOpenChange: (open: boolean) => void;
     onCommit?: (value: string) => void | Promise<unknown>;
 };
 /**
@@ -25,6 +25,6 @@ export declare function createInlineEditInteractions(options: InlineEditInteract
     blur: () => void;
     outside: (target: EventTarget | null) => void;
     windowBlur: () => void;
-    syncValue: () => void;
+    syncValue: (nextValue: string) => void;
     keyDown: (key: string, preventDefault: () => void) => void;
 };

package/dist/components/inline-edit/InlineEdit.interactions.js

@@ -2,10 +2,15 @@ function bindInlineEditDismissals(documentSource, windowSource, outside, windowB
     const pointerDown = (event)=>{
         outside(event.target);
     };
-    documentSource.addEventListener("pointerdown", pointerDown);
+    const click = (event)=>{
+        outside(event.target);
+    };
+    documentSource.addEventListener("pointerdown", pointerDown, true);
+    documentSource.addEventListener("click", click, true);
     windowSource.addEventListener("blur", windowBlur);
     return ()=>{
-        documentSource.removeEventListener("pointerdown", pointerDown);
+        documentSource.removeEventListener("pointerdown", pointerDown, true);
+        documentSource.removeEventListener("click", click, true);
         windowSource.removeEventListener("blur", windowBlur);
     };
 }
@@ -16,7 +21,7 @@ function createInlineEditInteractions(options) {
     let sourceValue = options.value();
     const apply = (next)=>{
         open = next;
-        options.root()?.classList.toggle(options.editingClass, next);
+        options.onOpenChange(next);
     };
     const resetDraft = ()=>{
         draft = options.value();
@@ -39,6 +44,7 @@ function createInlineEditInteractions(options) {
         apply(false);
     };
     const commit = ()=>{
+        if (!open) return;
         const next = draft.trim();
         focused = false;
         apply(false);
@@ -66,8 +72,8 @@ function createInlineEditInteractions(options) {
         windowBlur: ()=>{
             if (open) commit();
         },
-        syncValue: ()=>{
-            if (open && options.value() !== sourceValue) cancel();
+        syncValue: (nextValue)=>{
+            if (open && nextValue !== sourceValue) cancel();
         },
         keyDown: (key, preventDefault)=>{
             if ("Enter" === key) {

package/dist/components/select/Select.css

@@ -1,3 +1,5 @@
+@import "../_shared/overlayHost.css";
+
 @layer components {
   .ui-select {
     position: relative;
@@ -162,8 +164,7 @@
     pointer-events: none;
     transition:
       opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      visibility 150ms ease;
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   .ui-select__popover[data-open="true"] {

package/dist/components/select/Select.generated.d.ts

@@ -1,6 +1,6 @@
 import "./Select.css";
 import { type Component } from "solid-js";
-import { type JSX } from "@solidjs/web";
+import type { JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 import type { UIBaseProps, State } from "../vocabulary";
 type SelectKey = string | number;

package/dist/components/select/Select.generated.js

@@ -1,4 +1,4 @@
-import { Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Select.css";
 import { createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
@@ -502,36 +502,32 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
             ...overlayStyle
         };
     };
-    return createComponent(Portal, {
-        get children () {
-            var _el$19 = _tmpl$();
-            var _ref$ = ctx?.setPopoverRef;
-            ("function" == typeof _ref$ || Array.isArray(_ref$)) && ref(()=>_ref$, _el$19);
-            spread(_el$19, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.popover, p.class)
-                }), {
-                get ["data-theme"] () {
-                    return p.dataTheme;
-                },
-                "data-slot": "ui-select-popover",
-                get ["data-open"] () {
-                    return ctx?.open() ? "true" : "false";
-                },
-                get ["data-placement"] () {
-                    return overlayPosition.placement();
-                },
-                get style () {
-                    return popoverStyle();
-                },
-                onPointerDown: (event)=>{
-                    invokeEventHandler(p.onPointerDown, event);
-                    if (!event.defaultPrevented) event.stopPropagation();
-                }
-            }), true);
-            insert(_el$19, ()=>p.children);
-            return _el$19;
+    var _el$19 = _tmpl$();
+    var _ref$ = ctx?.setPopoverRef;
+    ("function" == typeof _ref$ || Array.isArray(_ref$)) && ref(()=>_ref$, _el$19);
+    spread(_el$19, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.popover, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-popover",
+        get ["data-open"] () {
+            return ctx?.open() ? "true" : "false";
+        },
+        get ["data-placement"] () {
+            return overlayPosition.placement();
+        },
+        get style () {
+            return popoverStyle();
+        },
+        onPointerDown: (event)=>{
+            invokeEventHandler(p.onPointerDown, event);
+            if (!event.defaultPrevented) event.stopPropagation();
         }
-    });
+    }), true);
+    insert(_el$19, ()=>p.children);
+    return _el$19;
 };
 const SelectPopover = defineComponent({
     recipe: componentRecipe,

package/dist/components/select/Select.recipe.d.ts

@@ -1,5 +1,5 @@
 export declare const CLASSES: {
-    readonly base: "ui-select";
+    readonly base: "ui-select ui-overlay-host";
     readonly flag: {
         readonly fullWidth: "ui-select--full-width";
     };

package/dist/components/select/Select.recipe.js

@@ -1,6 +1,6 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: "ui-select",
+    base: "ui-select ui-overlay-host",
     flag: {
         fullWidth: "ui-select--full-width"
     },

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/purge-manifest.json

@@ -11255,7 +11255,8 @@
       "component": "Select",
       "classes": {
         "always": [
-          "ui-select"
+          "ui-select",
+          "ui-overlay-host"
         ],
         "byProp": {
           "fullWidth": [
@@ -15150,7 +15151,8 @@
       "component": "Dropdown",
       "classes": {
         "always": [
-          "dropdown"
+          "dropdown",
+          "ui-overlay-host"
         ],
         "byProp": {
           "slot": {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "author": "pathscale",
   "repository": {
     "type": "git",
     "url": "https://github.com/pathscale/ui"
   },
   "license": "MIT",
-  "description": "Highly opinionated SolidJS component library — batteries and kitchen sink included, but optimized and shiny.",
+  "description": "Highly opinionated SolidJS component library \u2014 batteries and kitchen sink included, but optimized and shiny.",
   "files": [
     "dist"
   ],
@@ -73,27 +73,30 @@
     "@rsbuild/core": "^2.0.9",
     "@rsbuild/plugin-solid": "^1.2.1",
     "@rslib/core": "^0.22.0",
-    "@solidjs/h": "2.0.0-rc.0",
+    "@solidjs/h": "^2.0.0-rc.0",
     "@standard-schema/spec": "^1.1.0",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/bun": "^1.3.14",
-    "babel-preset-solid": "2.0.0-rc.0",
+    "babel-preset-solid": "^2.0.0-rc.0",
     "cally": "^0.8.0",
     "cssnano": "^7.1.9",
+    "popmotion": "^11.0.5",
     "postcss": "^8.5.15",
     "postcss-cli": "^11.0.1",
     "postcss-selector-parser": "^7.1.1",
-    "rsbuild-plugin-solid-layouts": "0.2.1",
-    "solid-js": "2.0.0-rc.0",
-    "solid-layouts": "0.2.0",
-    "solid-layouts-oxc": "0.2.1",
+    "rsbuild-plugin-solid-layouts": "^0.2.1",
+    "solid-js": "^2.0.0-rc.0",
+    "solid-layouts": "^0.2.1",
+    "solid-layouts-oxc": "^0.2.1",
     "svgo": "^3.3.3",
+    "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3"
   },
   "overrides": {
-    "babel-preset-solid": "2.0.0-rc.0"
+    "babel-preset-solid": "^2.0.0-rc.0"
   },
   "dependencies": {
-    "@solidjs/web": "2.0.0-rc.0",
+    "@solidjs/web": "^2.0.0-rc.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
   },
@@ -121,14 +124,19 @@
     "clean": "rm -rf dist node_modules",
     "format": "bun biome format --write",
     "lint": "bun run lint:code && bun run lint:layouts",
-    "lint:code": "bun biome lint --write",
+    "lint:code": "bun biome lint --write src qa",
     "lint:layouts": "solid-layouts-lint",
     "check": "bun run layouts:generate && bun run scripts/check-contracts.ts",
     "check:package": "bun run scripts/check-package.ts",
     "next-version": "bun run scripts/next-version.ts",
     "smoke": "bun run scripts/smoke-consumer.ts",
+    "qa:checks": "bun run tests/qa-harness/generate-checks.ts",
+    "qa:entries": "bun run tests/qa-harness/generate-entries.ts",
+    "qa:dev": "rsbuild dev --config tests/qa-harness/rsbuild.config.ts",
+    "qa:build": "bun run qa:entries && rsbuild build --config tests/qa-harness/rsbuild.config.ts",
     "test": "bun test --conditions=browser",
-    "check:api": "bun run scripts/check-api-contract.ts"
+    "check:api": "bun run scripts/check-api-contract.ts",
+    "qa:lint": "bun biome lint tests/qa-harness"
   },
   "sideEffects": [
     "**/*.css"