@pathscale/ui 2.11.0 → 2.11.2

package/dist/components/_shared/overlayPosition.js

@@ -97,7 +97,7 @@ const createOverlayPosition = (options)=>{
             cancelAnimationFrame(frame);
             frame = requestAnimationFrame(update);
         };
-        schedule();
+        update();
         window.addEventListener("resize", schedule);
         window.addEventListener("scroll", schedule, true);
         const resizeObserver = "u" > typeof ResizeObserver ? new ResizeObserver(schedule) : void 0;

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

@@ -1,81 +1,45 @@
-import { className, delegateEvents, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+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 } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import { 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)=>{
-    const others = omit(p, "class", "value", "onCommit", "label", "trigger", "children", "fullWidth", "disabled", "fieldClass");
-    let readRow;
-    let editRow;
+    const others = omit(p, "class", "value", "onCommit", "label", "trigger", "children", "fullWidth", "disabled", "fieldClass", "ref");
+    let root;
     let field;
-    let open = false;
-    let focused = false;
-    let draft = "";
-    const apply = (next)=>{
-        open = next;
-        if (readRow) readRow.style.display = next ? "none" : "inline-flex";
-        if (editRow) editRow.style.display = next ? "inline-flex" : "none";
-    };
-    const start = ()=>{
-        if (p.disabled) return;
-        draft = p.value;
-        if (field) field.value = draft;
-        apply(true);
-        queueMicrotask(()=>{
-            field?.focus();
-            field?.select();
-        });
-    };
-    const cancel = ()=>{
-        draft = p.value;
-        if (field) field.value = draft;
-        focused = false;
-        apply(false);
-    };
-    const commit = ()=>{
-        const next = draft.trim();
-        focused = false;
-        apply(false);
-        if (!next || next === p.value) return;
-        p.onCommit?.(next);
-    };
-    const rootClasses = ()=>twMerge(CLASSES.base, p.fullWidth && CLASSES.flag.fullWidth, p.disabled && CLASSES.flag.disabled, p.class);
+    const interactions = createInlineEditInteractions({
+        value: ()=>p.value,
+        disabled: ()=>Boolean(p.disabled),
+        root: ()=>root,
+        field: ()=>field,
+        editingClass: CLASSES.flag.editing,
+        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);
     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;
+            if ("function" == typeof p.ref) p.ref(element);
+        }, _el$);
     spread(_el$, mergeProps(others, {
         get ["class"] () {
             return rootClasses();
         },
         "data-slot": "root"
     }), true);
-    ref(()=>(element)=>{
-            readRow = element;
-        }, _el$2);
     insert(_el$3, ()=>p.children ?? p.value);
-    _el$4.$$click = start;
+    addEvent(_el$4, "click", interactions.start, true);
     insert(_el$4, ()=>p.trigger);
-    ref(()=>(element)=>{
-            editRow = element;
-        }, _el$5);
     _el$6.$$keydown = (event)=>{
-        if ("Enter" === event.key) {
-            event.preventDefault();
-            commit();
-        } else if ("Escape" === event.key) {
-            event.preventDefault();
-            cancel();
-        }
+        interactions.keyDown(event.key, ()=>event.preventDefault());
     };
-    _el$6.addEventListener("blur", ()=>{
-        if (!focused) return;
-        if (open) commit();
-    });
-    _el$6.addEventListener("focus", ()=>{
-        focused = true;
-    });
+    addEvent(_el$6, "blur", interactions.blur);
+    addEvent(_el$6, "focus", interactions.focus);
     _el$6.$$input = (event)=>{
-        draft = event.currentTarget.value;
+        interactions.input(event.currentTarget.value);
     };
     ref(()=>(element)=>{
             field = element;

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

@@ -0,0 +1,26 @@
+export type InlineEditField = Pick<HTMLInputElement, "focus" | "select" | "value">;
+export type InlineEditInteractionOptions = {
+    value: () => string;
+    disabled: () => boolean;
+    root: () => Pick<HTMLElement, "classList"> | undefined;
+    field: () => InlineEditField | undefined;
+    editingClass: string;
+    onCommit?: (value: string) => void | Promise<unknown>;
+};
+/**
+ * Own the complete open, cancel and commit interaction for InlineEdit.
+ *
+ * The root class is the only rendered state. Keeping the swap here makes a
+ * pencil press independently testable and keeps CSS as the single authority
+ * for which row is visible.
+ */
+export declare function createInlineEditInteractions(options: InlineEditInteractionOptions): {
+    start: () => void;
+    cancel: () => void;
+    commit: () => void;
+    isOpen: () => boolean;
+    input: (value: string) => void;
+    focus: () => void;
+    blur: () => void;
+    keyDown: (key: string, preventDefault: () => void) => void;
+};

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

@@ -0,0 +1,60 @@
+function createInlineEditInteractions(options) {
+    let open = false;
+    let focused = false;
+    let draft = "";
+    const apply = (next)=>{
+        open = next;
+        options.root()?.classList.toggle(options.editingClass, next);
+    };
+    const resetDraft = ()=>{
+        draft = options.value();
+        const field = options.field();
+        if (field) field.value = draft;
+    };
+    const start = ()=>{
+        if (options.disabled()) return;
+        resetDraft();
+        apply(true);
+        queueMicrotask(()=>{
+            options.field()?.focus();
+            options.field()?.select();
+        });
+    };
+    const cancel = ()=>{
+        resetDraft();
+        focused = false;
+        apply(false);
+    };
+    const commit = ()=>{
+        const next = draft.trim();
+        focused = false;
+        apply(false);
+        if (!next || next === options.value()) return;
+        options.onCommit?.(next);
+    };
+    return {
+        start,
+        cancel,
+        commit,
+        isOpen: ()=>open,
+        input: (value)=>{
+            draft = value;
+        },
+        focus: ()=>{
+            focused = true;
+        },
+        blur: ()=>{
+            if (focused && open) commit();
+        },
+        keyDown: (key, preventDefault)=>{
+            if ("Enter" === key) {
+                preventDefault();
+                commit();
+            } else if ("Escape" === key) {
+                preventDefault();
+                cancel();
+            }
+        }
+    };
+}
+export { createInlineEditInteractions };

package/dist/layouts.manifest.json

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

package/package.json

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