@k2b/ui 0.31.0 → 0.33.0

package/dist/browser/inputs/AutocompleteEditor.js

@@ -1,5 +1,6 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
@@ -7,19 +8,22 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__placeholder aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i>Loading suggestions`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div popover=manual class=k2b-autocomplete__options role=presentation><div class=k2b-autocomplete__listbox role=listbox><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete><div class=k2b-autocomplete__surface><!$><!/><div class=k2b-autocomplete__preview aria-hidden=true></div><textarea class=k2b-autocomplete__input></textarea></div><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status data-error=true role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><button type=button>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__option role=option><span></span><!$><!/>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<small>`);
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__gutter aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__placeholder aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i>Loading suggestions`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div popover=manual class=k2b-autocomplete__options role=presentation><div class=k2b-autocomplete__listbox role=listbox><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete><div class=k2b-autocomplete__surface><!$><!/><!$><!/><div class=k2b-autocomplete__preview aria-hidden=true></div><textarea class=k2b-autocomplete__input></textarea></div><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status data-error=true role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><button type=button>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__option role=option><span></span><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<small>`);
 import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
 import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
 import { useUiMessages } from "../intl/messages";
 import { buildSuggestContext, createCompletionBehaviorState, detectQuery, displayLabel, plainTextHighlight, renderWithOverlay, resolveSuggestions } from "./completion";
@@ -31,6 +35,7 @@ export function AutocompleteEditor(props) {
   const meta = createFieldMeta(props.id);
   let textarea;
   let preview;
+  let gutter;
   let dropdown;
   let currentAbort = null;
   let currentTimer = null;
@@ -139,8 +144,13 @@ export function AutocompleteEditor(props) {
     setCompletionError(null);
     closeDropdown();
   };
+  createEffect(() => {
+    if (!props.readOnly) return;
+    completionBehavior.reset();
+    clearCompletion();
+  });
   const positionDropdown = () => {
-    if (!dropdown?.isConnected || !textarea?.isConnected) return;
+    if (props.readOnly || !dropdown?.isConnected || !textarea?.isConnected) return;
     const anchor = preview?.querySelector("[data-completion-anchor]");
     const rect = anchor?.getBoundingClientRect() ?? textarea.getBoundingClientRect();
     const maxHeight = 260;
@@ -162,6 +172,7 @@ export function AutocompleteEditor(props) {
   };
   const isAbortError = error => error instanceof DOMException ? error.name === "AbortError" : Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
   const applySuggestionList = (context, suggestions) => {
+    if (props.readOnly) return;
     const currentText = localValue();
     const normalized = context.text.toLowerCase();
     const usable = suggestions.filter(suggestion => {
@@ -196,11 +207,11 @@ export function AutocompleteEditor(props) {
   const runAsync = async (context, promise, signal) => {
     try {
       const suggestions = await promise;
-      if (signal.aborted) return;
+      if (signal.aborted || props.readOnly) return;
       setLoading(false);
       applySuggestionList(context, suggestions);
     } catch (error) {
-      if (signal.aborted || isAbortError(error)) return;
+      if (signal.aborted || props.readOnly || isAbortError(error)) return;
       setLoading(false);
       setCompletionError(error instanceof Error ? error.message : completionMessages().suggestionsCouldNotLoad);
       setDropdownOpen(true);
@@ -208,7 +219,7 @@ export function AutocompleteEditor(props) {
     }
   };
   const startResolution = (context, signal) => {
-    if (signal.aborted || !textarea) return;
+    if (signal.aborted || props.readOnly || !textarea) return;
     setCompletionError(null);
     setLoading(true);
     setDropdownOpen(true);
@@ -222,7 +233,7 @@ export function AutocompleteEditor(props) {
         void runAsync(context, result.promise, signal);
       }
     } catch (error) {
-      if (signal.aborted || isAbortError(error)) return;
+      if (signal.aborted || props.readOnly || isAbortError(error)) return;
       setLoading(false);
       setCompletionError(error instanceof Error ? error.message : completionMessages().suggestionsCouldNotLoad);
       setDropdownOpen(true);
@@ -230,6 +241,7 @@ export function AutocompleteEditor(props) {
     }
   };
   const recomputeCompletion = () => {
+    if (props.readOnly) return clearCompletion();
     if (!textarea) return;
     const context = detectQuery(textarea, props.completions);
     if (!context) {
@@ -260,7 +272,7 @@ export function AutocompleteEditor(props) {
     }
   };
   const retryCompletion = () => {
-    if (!textarea) return;
+    if (props.readOnly || !textarea) return;
     const context = detectQuery(textarea, props.completions);
     if (!context) return clearCompletion();
     currentAbort?.abort();
@@ -272,7 +284,7 @@ export function AutocompleteEditor(props) {
   const activateSuggestion = (index = state()?.selectedIndex ?? -1) => {
     const current = state();
     const active = current?.suggestions[index];
-    if (!textarea || !current || !active) return false;
+    if (props.readOnly || !textarea || !current || !active) return false;
     if (!active.textEdit && active.text === current.context.text) {
       clearCompletion();
       return false;
@@ -317,6 +329,10 @@ export function AutocompleteEditor(props) {
     });
   });
   const onInput = event => {
+    if (props.readOnly) {
+      event.currentTarget.value = localValue();
+      return;
+    }
     if (event.inputType.startsWith("insert") && completionBehavior.tryExpand(event.currentTarget, props.completions)) {
       return;
     }
@@ -326,6 +342,13 @@ export function AutocompleteEditor(props) {
   };
   const onKeyDown = event => {
     if (!textarea || event.isComposing) return;
+    if (props.readOnly) {
+      if (event.key === "Enter" && props.onSubmit && (props.singleLine && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey || !props.singleLine && (event.metaKey || event.ctrlKey))) {
+        event.preventDefault();
+        props.onSubmit();
+      }
+      return;
+    }
     if ((props.restoreExpansionOnBackspace ?? true) && event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && completionBehavior.tryRestore(textarea)) {
       event.preventDefault();
       return;
@@ -396,49 +419,76 @@ export function AutocompleteEditor(props) {
       return props.disabled;
     },
     get children() {
-      var _el$ = _$getNextElement(_tmpl$4),
+      var _el$ = _$getNextElement(_tmpl$5),
         _el$2 = _el$.firstChild,
-        _el$6 = _el$2.firstChild,
-        [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
-        _el$4 = _el$7.nextSibling,
-        _el$5 = _el$4.nextSibling,
-        _el$15 = _el$2.nextSibling,
-        [_el$16, _co$5] = _$getNextMarker(_el$15.nextSibling);
+        _el$7 = _el$2.firstChild,
+        [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
+        _el$9 = _el$8.nextSibling,
+        [_el$0, _co$2] = _$getNextMarker(_el$9.nextSibling),
+        _el$5 = _el$0.nextSibling,
+        _el$6 = _el$5.nextSibling,
+        _el$18 = _el$2.nextSibling,
+        [_el$19, _co$6] = _$getNextMarker(_el$18.nextSibling);
       _$insert(_el$2, _$createComponent(Show, {
         get when() {
-          return _$memo(() => !!!localValue())() && props.placeholder;
+          return props.lineNumbers;
         },
         get children() {
           var _el$3 = _$getNextElement(_tmpl$);
-          _$insert(_el$3, () => props.placeholder);
+          var _ref$ = gutter;
+          typeof _ref$ === "function" ? _$use(_ref$, _el$3) : gutter = _el$3;
+          _$insert(_el$3, _$createComponent(For, {
+            get each() {
+              return localValue().split("\n");
+            },
+            children: (_, index) => (() => {
+              var _el$20 = _$getNextElement(_tmpl$6);
+              _$insert(_el$20, () => index() + 1);
+              _$effect(() => _$setAttribute(_el$20, "data-marked", props.markedLine === index() + 1 ? "true" : undefined));
+              return _el$20;
+            })()
+          }));
           return _el$3;
         }
-      }), _el$7, _co$);
-      var _ref$ = preview;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$4) : preview = _el$4;
-      _el$5.addEventListener("blur", event => {
+      }), _el$8, _co$);
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!localValue())() && props.placeholder;
+        },
+        get children() {
+          var _el$4 = _$getNextElement(_tmpl$2);
+          _$insert(_el$4, () => props.placeholder);
+          return _el$4;
+        }
+      }), _el$0, _co$2);
+      var _ref$2 = preview;
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$5) : preview = _el$5;
+      _el$6.addEventListener("blur", event => {
         const next = event.relatedTarget;
         if (next && dropdown?.contains(next)) return;
         completionBehavior.reset();
         clearCompletion();
       });
-      _el$5.addEventListener("compositionend", () => setComposing(false));
-      _el$5.addEventListener("compositionstart", () => setComposing(true));
-      _el$5.addEventListener("scroll", event => {
+      _el$6.addEventListener("compositionend", () => setComposing(false));
+      _el$6.addEventListener("compositionstart", () => setComposing(true));
+      _el$6.addEventListener("scroll", event => {
+        if (gutter) gutter.scrollTop = event.currentTarget.scrollTop;
         if (preview) {
           preview.scrollTop = event.currentTarget.scrollTop;
           preview.scrollLeft = event.currentTarget.scrollLeft;
         }
         if (dropdown?.matches(":popover-open")) positionDropdown();
       });
-      _el$5.$$keydown = onKeyDown;
-      _el$5.addEventListener("change", event => props.onValueCommit?.(event.currentTarget.value));
-      _el$5.$$input = onInput;
+      _el$6.$$keydown = onKeyDown;
+      _el$6.addEventListener("change", event => {
+        if (!props.readOnly) props.onValueCommit?.(event.currentTarget.value);
+      });
+      _el$6.$$input = onInput;
       _$use(element => {
         textarea = element;
         props.textareaRef?.(element);
-      }, _el$5);
-      _$spread(_el$5, _$mergeProps({
+      }, _el$6);
+      _$spread(_el$6, _$mergeProps({
         get id() {
           return meta.controlId;
         },
@@ -448,6 +498,9 @@ export function AutocompleteEditor(props) {
         get disabled() {
           return props.disabled;
         },
+        get readOnly() {
+          return props.readOnly;
+        },
         get required() {
           return props.required;
         },
@@ -457,6 +510,9 @@ export function AutocompleteEditor(props) {
         get maxLength() {
           return props.maxLength;
         },
+        get wrap() {
+          return props.lineNumbers ? "off" : "soft";
+        },
         get rows() {
           return _$memo(() => !!props.singleLine)() ? 1 : props.lines ?? 3;
         }
@@ -469,66 +525,67 @@ export function AutocompleteEditor(props) {
         get ["aria-activedescendant"]() {
           return _$memo(() => !!(dropdownOpen() && state()))() ? optionId(state().selectedIndex) : undefined;
         }
-      }), false, false);
+      }), false, true);
+      _$insert(_el$6, () => isServer ? `\n${localValue()}` : undefined);
       _$insert(_el$, _$createComponent(Show, {
         get when() {
           return state() || loading() || completionError();
         },
         get children() {
-          var _el$8 = _$getNextElement(_tmpl$3),
-            _el$9 = _el$8.firstChild,
-            _el$1 = _el$9.firstChild,
-            [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling),
-            _el$11 = _el$10.nextSibling,
-            [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling),
-            _el$13 = _el$12.nextSibling,
-            [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling);
-          var _ref$2 = dropdown;
-          typeof _ref$2 === "function" ? _$use(_ref$2, _el$8) : dropdown = _el$8;
-          _$setAttribute(_el$9, "id", listboxId);
-          _$insert(_el$9, _$createComponent(Show, {
+          var _el$1 = _$getNextElement(_tmpl$4),
+            _el$10 = _el$1.firstChild,
+            _el$12 = _el$10.firstChild,
+            [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+            _el$14 = _el$13.nextSibling,
+            [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling),
+            _el$16 = _el$15.nextSibling,
+            [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling);
+          var _ref$3 = dropdown;
+          typeof _ref$3 === "function" ? _$use(_ref$3, _el$1) : dropdown = _el$1;
+          _$setAttribute(_el$10, "id", listboxId);
+          _$insert(_el$10, _$createComponent(Show, {
             get when() {
               return loading();
             },
             get children() {
-              return _$getNextElement(_tmpl$2);
+              return _$getNextElement(_tmpl$3);
             }
-          }), _el$10, _co$2);
-          _$insert(_el$9, _$createComponent(Show, {
+          }), _el$13, _co$3);
+          _$insert(_el$10, _$createComponent(Show, {
             get when() {
               return completionError();
             },
             children: message => (() => {
-              var _el$17 = _$getNextElement(_tmpl$5),
-                _el$18 = _el$17.firstChild,
-                _el$19 = _el$18.nextSibling,
-                _el$20 = _el$19.nextSibling;
-              _$insert(_el$19, message);
-              _el$20.$$click = retryCompletion;
-              _el$20.$$mousedown = event => event.preventDefault();
-              _$insert(_el$20, () => messages().retry);
+              var _el$21 = _$getNextElement(_tmpl$7),
+                _el$22 = _el$21.firstChild,
+                _el$23 = _el$22.nextSibling,
+                _el$24 = _el$23.nextSibling;
+              _$insert(_el$23, message);
+              _el$24.$$click = retryCompletion;
+              _el$24.$$mousedown = event => event.preventDefault();
+              _$insert(_el$24, () => messages().retry);
               _$runHydrationEvents();
-              return _el$17;
+              return _el$21;
             })()
-          }), _el$12, _co$3);
-          _$insert(_el$9, _$createComponent(For, {
+          }), _el$15, _co$4);
+          _$insert(_el$10, _$createComponent(For, {
             get each() {
               return state()?.suggestions ?? [];
             },
             children: (suggestion, index) => // biome-ignore lint/a11y/useKeyWithClickEvents: the owning textarea handles keyboard activation through aria-activedescendant.
             (() => {
-              var _el$21 = _$getNextElement(_tmpl$6),
-                _el$22 = _el$21.firstChild,
-                _el$23 = _el$22.nextSibling,
-                [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling);
-              _el$21.$$click = () => {
+              var _el$25 = _$getNextElement(_tmpl$8),
+                _el$26 = _el$25.firstChild,
+                _el$27 = _el$26.nextSibling,
+                [_el$28, _co$7] = _$getNextMarker(_el$27.nextSibling);
+              _el$25.$$click = () => {
                 activateSuggestion(index());
                 textarea?.focus();
               };
-              _el$21.$$mousedown = event => {
+              _el$25.$$mousedown = event => {
                 event.preventDefault();
               };
-              _el$21.addEventListener("mouseenter", () => {
+              _el$25.addEventListener("mouseenter", () => {
                 const current = state();
                 if (current) {
                   setState({
@@ -537,24 +594,24 @@ export function AutocompleteEditor(props) {
                   });
                 }
               });
-              _$insert(_el$22, () => displayLabel(suggestion, state().context.completion));
-              _$insert(_el$21, _$createComponent(Show, {
+              _$insert(_el$26, () => displayLabel(suggestion, state().context.completion));
+              _$insert(_el$25, _$createComponent(Show, {
                 get when() {
                   return suggestion.hint;
                 },
                 children: hint => (() => {
-                  var _el$25 = _$getNextElement(_tmpl$7);
-                  _$insert(_el$25, hint);
-                  return _el$25;
+                  var _el$29 = _$getNextElement(_tmpl$9);
+                  _$insert(_el$29, hint);
+                  return _el$29;
                 })()
-              }), _el$24, _co$6);
+              }), _el$28, _co$7);
               _$effect(_p$ => {
-                var _v$0 = optionId(index()),
-                  _v$1 = index() === state()?.selectedIndex,
-                  _v$10 = loading() ? "true" : undefined;
-                _v$0 !== _p$.e && _$setAttribute(_el$21, "id", _p$.e = _v$0);
-                _v$1 !== _p$.t && _$setAttribute(_el$21, "aria-selected", _p$.t = _v$1);
-                _v$10 !== _p$.a && _$setAttribute(_el$21, "data-loading", _p$.a = _v$10);
+                var _v$10 = optionId(index()),
+                  _v$11 = index() === state()?.selectedIndex,
+                  _v$12 = loading() ? "true" : undefined;
+                _v$10 !== _p$.e && _$setAttribute(_el$25, "id", _p$.e = _v$10);
+                _v$11 !== _p$.t && _$setAttribute(_el$25, "aria-selected", _p$.t = _v$11);
+                _v$12 !== _p$.a && _$setAttribute(_el$25, "data-loading", _p$.a = _v$12);
                 return _p$;
               }, {
                 e: undefined,
@@ -562,37 +619,41 @@ export function AutocompleteEditor(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$21;
+              return _el$25;
             })()
-          }), _el$14, _co$4);
+          }), _el$17, _co$5);
           _$effect(_p$ => {
             var _v$ = completionMessages().completionSuggestions,
               _v$2 = completionMessages().suggestions;
-            _v$ !== _p$.e && _$setAttribute(_el$8, "aria-label", _p$.e = _v$);
-            _v$2 !== _p$.t && _$setAttribute(_el$9, "aria-label", _p$.t = _v$2);
+            _v$ !== _p$.e && _$setAttribute(_el$1, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setAttribute(_el$10, "aria-label", _p$.t = _v$2);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$8;
+          return _el$1;
         }
-      }), _el$16, _co$5);
+      }), _el$19, _co$6);
       _$effect(_p$ => {
-        var _v$3 = useOverlay() ? "true" : undefined,
-          _v$4 = props.singleLine ? "true" : undefined,
-          _v$5 = props.fill && !props.singleLine ? "true" : undefined,
-          _v$6 = props.disabled ? "true" : undefined,
-          _v$7 = error() ? "true" : undefined,
-          _v$8 = props.variant === "paper" ? "paper" : undefined,
-          _v$9 = surfaceStyle();
-        _v$3 !== _p$.e && _$setAttribute(_el$, "data-overlay", _p$.e = _v$3);
-        _v$4 !== _p$.t && _$setAttribute(_el$, "data-single-line", _p$.t = _v$4);
-        _v$5 !== _p$.a && _$setAttribute(_el$, "data-fill", _p$.a = _v$5);
-        _v$6 !== _p$.o && _$setAttribute(_el$, "data-disabled", _p$.o = _v$6);
-        _v$7 !== _p$.i && _$setAttribute(_el$, "data-invalid", _p$.i = _v$7);
-        _v$8 !== _p$.n && _$setAttribute(_el$, "data-variant", _p$.n = _v$8);
-        _p$.s = _$style(_el$, _v$9, _p$.s);
+        var _v$3 = props.lineNumbers ? "true" : undefined,
+          _v$4 = useOverlay() ? "true" : undefined,
+          _v$5 = props.singleLine ? "true" : undefined,
+          _v$6 = props.fill && !props.singleLine ? "true" : undefined,
+          _v$7 = props.disabled ? "true" : undefined,
+          _v$8 = error() ? "true" : undefined,
+          _v$9 = props.variant === "paper" || props.variant === "embedded" ? props.variant : undefined,
+          _v$0 = surfaceStyle(),
+          _v$1 = isServer ? renderWithOverlay(localValue(), props.highlight ?? plainTextHighlight, {}) : undefined;
+        _v$3 !== _p$.e && _$setAttribute(_el$, "data-line-numbers", _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setAttribute(_el$, "data-overlay", _p$.t = _v$4);
+        _v$5 !== _p$.a && _$setAttribute(_el$, "data-single-line", _p$.a = _v$5);
+        _v$6 !== _p$.o && _$setAttribute(_el$, "data-fill", _p$.o = _v$6);
+        _v$7 !== _p$.i && _$setAttribute(_el$, "data-disabled", _p$.i = _v$7);
+        _v$8 !== _p$.n && _$setAttribute(_el$, "data-invalid", _p$.n = _v$8);
+        _v$9 !== _p$.s && _$setAttribute(_el$, "data-variant", _p$.s = _v$9);
+        _p$.h = _$style(_el$, _v$0, _p$.h);
+        _v$1 !== _p$.r && _$setProperty(_el$5, "innerHTML", _p$.r = _v$1);
         return _p$;
       }, {
         e: undefined,
@@ -601,7 +662,9 @@ export function AutocompleteEditor(props) {
         o: undefined,
         i: undefined,
         n: undefined,
-        s: undefined
+        s: undefined,
+        h: undefined,
+        r: undefined
       });
       _$runHydrationEvents();
       return _el$;