@pathscale/ui 2.11.3 → 2.11.4

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

@@ -1,9 +1,9 @@
 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 { omit, onSettled } from "solid-js";
+import { createTrackedEffect, omit, onSettled } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { createInlineEditInteractions } from "./InlineEdit.interactions.js";
+import { bindInlineEditDismissals, createInlineEditInteractions } from "./InlineEdit.interactions.js";
 import { CLASSES, componentRecipe } from "./InlineEdit.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span><span data-slot=inline-edit-read><span data-slot=inline-edit-value></span><button type=button data-slot=inline-edit-trigger></button></span><span data-slot=inline-edit-edit><input type=text data-slot=inline-edit-field>");
 const __solidLayoutInlineEdit = (_stable, p)=>{
@@ -19,15 +19,11 @@ const __solidLayoutInlineEdit = (_stable, p)=>{
         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);
-    onSettled(()=>{
-        const pointerDown = (event)=>{
-            interactions.pointerDown(event.target);
-        };
-        document.addEventListener("pointerdown", pointerDown, true);
-        return ()=>{
-            document.removeEventListener("pointerdown", pointerDown, true);
-        };
+    createTrackedEffect(()=>{
+        p.value;
+        interactions.syncValue();
     });
+    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)=>{
             root = element;

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

@@ -1,4 +1,5 @@
 export type InlineEditField = Pick<HTMLInputElement, "focus" | "select" | "value">;
+export declare function bindInlineEditDismissals(documentSource: Pick<Document, "addEventListener" | "removeEventListener">, windowSource: Pick<Window, "addEventListener" | "removeEventListener">, outside: (target: EventTarget | null) => void, windowBlur: () => void): () => void;
 export type InlineEditInteractionOptions = {
     value: () => string;
     disabled: () => boolean;
@@ -22,6 +23,8 @@ export declare function createInlineEditInteractions(options: InlineEditInteract
     input: (value: string) => void;
     focus: () => void;
     blur: () => void;
-    pointerDown: (target: EventTarget | null) => void;
+    outside: (target: EventTarget | null) => void;
+    windowBlur: () => void;
+    syncValue: () => void;
     keyDown: (key: string, preventDefault: () => void) => void;
 };

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

@@ -1,7 +1,24 @@
+function bindInlineEditDismissals(documentSource, windowSource, outside, windowBlur) {
+    const pointerDown = (event)=>{
+        outside(event.target);
+    };
+    const focusIn = (event)=>{
+        outside(event.target);
+    };
+    documentSource.addEventListener("pointerdown", pointerDown);
+    documentSource.addEventListener("focusin", focusIn);
+    windowSource.addEventListener("blur", windowBlur);
+    return ()=>{
+        documentSource.removeEventListener("pointerdown", pointerDown);
+        documentSource.removeEventListener("focusin", focusIn);
+        windowSource.removeEventListener("blur", windowBlur);
+    };
+}
 function createInlineEditInteractions(options) {
     let open = false;
     let focused = false;
     let draft = "";
+    let sourceValue = options.value();
     const apply = (next)=>{
         open = next;
         options.root()?.classList.toggle(options.editingClass, next);
@@ -13,6 +30,7 @@ function createInlineEditInteractions(options) {
     };
     const start = ()=>{
         if (options.disabled()) return;
+        sourceValue = options.value();
         resetDraft();
         apply(true);
         queueMicrotask(()=>{
@@ -46,10 +64,16 @@ function createInlineEditInteractions(options) {
         blur: ()=>{
             if (focused && open) commit();
         },
-        pointerDown: (target)=>{
+        outside: (target)=>{
             const root = options.root();
             if (open && root && !root.contains(target)) commit();
         },
+        windowBlur: ()=>{
+            if (open) commit();
+        },
+        syncValue: ()=>{
+            if (open && options.value() !== sourceValue) cancel();
+        },
         keyDown: (key, preventDefault)=>{
             if ("Enter" === key) {
                 preventDefault();
@@ -61,4 +85,4 @@ function createInlineEditInteractions(options) {
         }
     };
 }
-export { createInlineEditInteractions };
+export { bindInlineEditDismissals, createInlineEditInteractions };

package/dist/layouts.manifest.json

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

package/package.json

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