@pathscale/ui 2.9.3 → 2.10.0

package/dist/components/inline-edit/InlineEdit.css

@@ -0,0 +1,79 @@
+@layer components {
+  .inline-edit {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .inline-edit--full-width {
+    width: 100%;
+  }
+
+  .inline-edit__read {
+    display: inline-flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .inline-edit__value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .inline-edit__trigger {
+    display: inline-flex;
+    height: 1.125rem;
+    width: 1.125rem;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding: 0;
+    color: var(--color-base-content);
+    opacity: 0.55;
+  }
+
+  .inline-edit__trigger:hover {
+    background-color: oklch(100% 0 0 / 0.08);
+    opacity: 1;
+  }
+
+  .inline-edit__edit {
+    display: none;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .inline-edit--editing .inline-edit__read {
+    display: none;
+  }
+
+  .inline-edit--editing .inline-edit__edit {
+    display: inline-flex;
+  }
+
+  .inline-edit__field {
+    min-width: 0;
+    flex: 1 1 auto;
+    border-radius: 0.375rem;
+    border: var(--border, 1px) solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    padding: 0.125rem 0.5rem;
+    color: var(--color-base-content);
+    outline: none;
+  }
+
+  .inline-edit__field:focus {
+    border-color: var(--color-primary);
+  }
+
+  .inline-edit--disabled .inline-edit__trigger {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./InlineEdit.css";
+import type { JSX } from "@solidjs/web";
+import type { UIBaseProps } from "../vocabulary";
+/**
+ * A value that is read in place until someone chooses to change it.
+ *
+ * Enter commits, Escape abandons, and moving focus away commits, so the mode
+ * has an exit for a reader who never touches the keyboard.
+ */
+export type InlineEditProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "onChange" | "children"> & UIBaseProps & {
+    /** The current value, shown while not editing and used as the draft. */
+    value: string;
+    /** Called with the trimmed draft when it differs from `value`. */
+    onCommit?: (value: string) => void | Promise<unknown>;
+    /** Accessible name for the trigger and the field. Both need one. */
+    label?: string;
+    /** Rendered inside the trigger. An icon, usually. */
+    trigger?: JSX.Element;
+    /** Rendered in place of the plain value, for a value that is also a link. */
+    children?: JSX.Element;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    fieldClass?: string;
+};
+declare const InlineEdit: __LayoutComponent<InlineEditProps>;
+export default InlineEdit;

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

@@ -0,0 +1,117 @@
+import { 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 { 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;
+    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);
+    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;
+    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;
+    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();
+        }
+    };
+    _el$6.addEventListener("blur", ()=>{
+        if (!focused) return;
+        if (open) commit();
+    });
+    _el$6.addEventListener("focus", ()=>{
+        focused = true;
+    });
+    _el$6.$$input = (event)=>{
+        draft = event.currentTarget.value;
+    };
+    ref(()=>(element)=>{
+            field = element;
+        }, _el$6);
+    effect(()=>({
+            e: CLASSES.slot.read,
+            t: CLASSES.slot.value,
+            a: p.disabled,
+            o: p.label,
+            i: CLASSES.slot.trigger,
+            n: CLASSES.slot.edit,
+            s: p.value,
+            h: p.label,
+            r: twMerge(CLASSES.slot.field, p.fieldClass)
+        }), ({ e, t, a, o, i, n, s, h, r }, _p$)=>{
+        className(_el$2, e, _p$?.e);
+        className(_el$3, t, _p$?.t);
+        a !== _p$?.a && setAttribute(_el$4, "disabled", a);
+        o !== _p$?.o && setAttribute(_el$4, "aria-label", o);
+        className(_el$4, i, _p$?.i);
+        className(_el$5, n, _p$?.n);
+        _el$6.value = s ?? "";
+        h !== _p$?.h && setAttribute(_el$6, "aria-label", h);
+        className(_el$6, r, _p$?.r);
+    });
+    return _el$;
+};
+const InlineEdit = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInlineEdit,
+    embedded: true
+});
+const InlineEdit_generated = InlineEdit;
+delegateEvents([
+    "click",
+    "input",
+    "keydown"
+]);
+export default InlineEdit_generated;

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

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    readonly base: "inline-edit";
+    readonly slot: {
+        readonly read: "inline-edit__read";
+        readonly value: "inline-edit__value";
+        readonly trigger: "inline-edit__trigger";
+        readonly edit: "inline-edit__edit";
+        readonly field: "inline-edit__field";
+    };
+    readonly flag: {
+        readonly editing: "inline-edit--editing";
+        readonly fullWidth: "inline-edit--full-width";
+        readonly disabled: "inline-edit--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "inline-edit";
+    readonly slots: {
+        readonly root: {};
+        readonly "inline-edit-read": {};
+        readonly "inline-edit-value": {};
+        readonly "inline-edit-trigger": {};
+        readonly "inline-edit-edit": {};
+        readonly "inline-edit-field": {};
+    };
+}>;

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

@@ -0,0 +1,65 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "inline-edit",
+    slot: {
+        read: "inline-edit__read",
+        value: "inline-edit__value",
+        trigger: "inline-edit__trigger",
+        edit: "inline-edit__edit",
+        field: "inline-edit__field"
+    },
+    flag: {
+        editing: "inline-edit--editing",
+        fullWidth: "inline-edit--full-width",
+        disabled: "inline-edit--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "inline-edit",
+    slots: {
+        root: {},
+        "inline-edit-read": {},
+        "inline-edit-value": {},
+        "inline-edit-trigger": {},
+        "inline-edit-edit": {},
+        "inline-edit-field": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-read": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-value": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-trigger": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-edit": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-field": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 5,
+            "inline-edit-read": 2,
+            "inline-edit-value": 4,
+            "inline-edit-trigger": 3,
+            "inline-edit-edit": 0,
+            "inline-edit-field": 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/inline-edit/index.d.ts

@@ -0,0 +1,3 @@
+import InlineEdit from "./InlineEdit.generated";
+export type { InlineEditProps } from "./InlineEdit.generated";
+export default InlineEdit;

package/dist/components/inline-edit/index.js

@@ -0,0 +1,3 @@
+import InlineEdit_generated from "./InlineEdit.generated.js";
+const inline_edit = InlineEdit_generated;
+export default inline_edit;

package/dist/index.d.ts

@@ -58,6 +58,8 @@ export { default as Header } from "./components/header";
 export { default as Icon } from "./components/icon";
 export type { CookieConsentProps, CookieConsentStorageKeys, CookieConsentTexts, FirefoxPWABannerProps, FirefoxPWABannerTexts, ImmersiveLandingArrowsProps, ImmersiveLandingContextValue, ImmersiveLandingNavigationProps, ImmersiveLandingPageProps, ImmersiveLandingProps, PWAInstallPromptProps, PWAInstallPromptTexts, UseImmersiveLandingOptions, UseImmersiveLandingReturn, } from "./components/immersive-landing";
 export { CookieConsent, default as ImmersiveLanding, FirefoxPWABanner, ImmersiveLandingContext, PWAInstallPrompt, useImmersiveLanding, useImmersiveLandingContext, } from "./components/immersive-landing";
+export type { InlineEditProps } from "./components/inline-edit";
+export { default as InlineEdit } from "./components/inline-edit";
 export { default as Input } from "./components/input";
 export type { InputOTPGroupProps, InputOTPProps, InputOTPRootProps, InputOTPSeparatorProps, InputOTPSlotProps, InputOTPVariant, } from "./components/input-otp";
 export { default as InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "./components/input-otp";

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as Grid } from "./components/grid/index.js";
 export { default as Header } from "./components/header/index.js";
 export { default as Icon } from "./components/icon/index.js";
 export { CookieConsent, FirefoxPWABanner, ImmersiveLandingContext, PWAInstallPrompt, default as ImmersiveLanding, useImmersiveLanding, useImmersiveLandingContext } from "./components/immersive-landing/index.js";
+export { default as InlineEdit } from "./components/inline-edit/index.js";
 export { default as Input } from "./components/input/index.js";
 export { InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, default as InputOTP } from "./components/input-otp/index.js";
 export { default as Label } from "./components/label/index.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -321,6 +321,9 @@
     "ImmersiveLandingContext": {
       "kind": "embedded"
     },
+    "InlineEdit": {
+      "kind": "embedded"
+    },
     "Input": {
       "kind": "embedded"
     },

package/dist/purge-manifest.json

@@ -7631,6 +7631,54 @@
         "CheckboxGroup"
       ]
     },
+    "InlineEdit": {
+      "key": "InlineEdit",
+      "component": "InlineEdit",
+      "classes": {
+        "always": [],
+        "byProp": {
+          "slot": {
+            "read": [],
+            "value": [],
+            "trigger": [],
+            "edit": [],
+            "field": []
+          },
+          "editing": [],
+          "fullWidth": [],
+          "disabled": []
+        }
+      },
+      "attributeSelectors": [],
+      "selectors": [
+        ".inline-edit",
+        ".inline-edit--disabled .inline-edit__trigger",
+        ".inline-edit--editing .inline-edit__edit",
+        ".inline-edit--editing .inline-edit__read",
+        ".inline-edit--full-width",
+        ".inline-edit__edit",
+        ".inline-edit__field",
+        ".inline-edit__field:focus",
+        ".inline-edit__read",
+        ".inline-edit__trigger",
+        ".inline-edit__trigger:hover",
+        ".inline-edit__value"
+      ],
+      "cssVars": {
+        "declared": [],
+        "referenced": [
+          "--border",
+          "--color-base-100",
+          "--color-base-300",
+          "--color-base-content",
+          "--color-primary"
+        ]
+      },
+      "keyframes": {
+        "declared": [],
+        "referenced": []
+      }
+    },
     "Navbar.navbar": {
       "key": "Navbar.navbar",
       "component": "Navbar",
@@ -25333,6 +25381,78 @@
           "ImmersiveLanding.pwaPrompt"
         ]
       },
+      {
+        "selector": ".inline-edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__field",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__field:focus",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__read",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__trigger",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__trigger:hover",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__value",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--disabled .inline-edit__trigger",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--editing .inline-edit__edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--editing .inline-edit__read",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--full-width",
+        "components": [
+          "InlineEdit"
+        ]
+      },
       {
         "selector": ".input__icon",
         "components": [
@@ -30828,6 +30948,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31065,6 +31186,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31996,6 +32118,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "Kbd",
           "LanguageSwitcher",
@@ -32053,6 +32176,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -32133,6 +32257,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "LanguageSwitcher",
           "LiveChat.bubble",
           "LiveChat.panel",

package/package.json

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