@pathscale/ui 2.11.5 → 2.11.6

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

@@ -93,8 +93,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/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/layouts.manifest.json

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

package/package.json

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