@k2b/ui 0.44.0 → 0.45.0

package/dist/ssr/feedback/prompts.js

@@ -1,35 +1,29 @@
 import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
-import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-var _tmpl$ = ["<header class=\"k2b-dialog__header\">", "", "<button type=\"button\" class=\"k2b-dialog__close\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></header>"],
-  _tmpl$2 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$3 = "<span class=\"k2b-dialog__header-spacer\"></span>",
-  _tmpl$4 = ["<h2>", "</h2>"],
-  _tmpl$5 = ["<p>", "</p>"],
-  _tmpl$6 = ["<button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button>"],
-  _tmpl$7 = ["<form class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body k2b-prompt-form\">", "</div><footer class=\"k2b-dialog__actions\">", "<button type=\"submit\" class=\"k2b-button\"", ">", "</button></footer></form>"],
-  _tmpl$8 = ["<div class=\"k2b-prompt-form__info\">", "</div>"],
-  _tmpl$9 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
-  _tmpl$0 = ["<div", " class=\"k2b-prompt-search__list\" role=\"listbox\"", ">", "</div>"],
-  _tmpl$1 = ["<div class=\"k2b-prompt-search-shell\">", "<div class=\"k2b-prompt-search\"><label class=\"k2b-prompt-search__input\"><i", " aria-hidden=\"true\"></i><input", " type=\"search\" role=\"combobox\"", " aria-autocomplete=\"list\"", " spellcheck=\"false\" autocapitalize=\"off\" autocomplete=\"off\" autocorrect=\"off\">", "</label><div class=\"k2b-prompt-search__collapse\" style=\"", "\"><div class=\"k2b-prompt-search__results\">", "", "</div></div></div></div>"],
-  _tmpl$10 = ["<p class=\"k2b-prompt-search-shell__title\">", "</p>"],
-  _tmpl$11 = ["<div class=\"k2b-prompt-search__error\" role=\"status\" aria-live=\"polite\">", "</div>"],
-  _tmpl$12 = ["<p role=\"status\" aria-live=\"polite\">", "</p>"],
-  _tmpl$13 = ["<img", " alt>"],
-  _tmpl$14 = ["<span class=\"k2b-prompt-search__preview\">", "</span>"],
-  _tmpl$15 = ["<button type=\"button\"", " role=\"option\"", ">", "<span class=\"k2b-prompt-search__copy\"><strong>", "</strong>", "</span></button>"],
-  _tmpl$16 = ["<small>", "</small>"],
-  _tmpl$17 = ["<div class=\"k2b-prompt-copy\">", "</div>"],
-  _tmpl$18 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\"", ">", "</button></footer></div>"],
-  _tmpl$19 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button><button type=\"button\" class=\"k2b-button\"", ">", "</button></footer></div>"],
-  _tmpl$20 = ["<form class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body k2b-prompt-form\"><div class=\"k2b-prompt-copy\">", "</div>", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button><button type=\"submit\" class=\"k2b-button\"", "", ">", "</button></footer></form>"],
-  _tmpl$21 = ["<code class=\"k2b-confirmation-phrase\">", "</code>"],
-  _tmpl$22 = ["<div class=\"k2b-dialog__panel k2b-dialog__stack\">", "<div class=\"k2b-dialog__content\">", "</div></div>"],
-  _tmpl$23 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\">", "</button></footer></div>"];
+var _tmpl$ = ["<p>", "</p>"],
+  _tmpl$2 = ["<button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button>"],
+  _tmpl$3 = ["<form class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body k2b-prompt-form\">", "</div><footer class=\"k2b-dialog__actions\">", "<button type=\"submit\" class=\"k2b-button\"", ">", "</button></footer></form>"],
+  _tmpl$4 = ["<div class=\"k2b-prompt-form__info\">", "</div>"],
+  _tmpl$5 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$6 = ["<div", " class=\"k2b-prompt-search__list\" role=\"listbox\"", ">", "</div>"],
+  _tmpl$7 = ["<div class=\"k2b-prompt-search-shell\">", "<div class=\"k2b-prompt-search\"><label class=\"k2b-prompt-search__input\"><i", " aria-hidden=\"true\"></i><input", " type=\"search\" role=\"combobox\"", " aria-autocomplete=\"list\"", " spellcheck=\"false\" autocapitalize=\"off\" autocomplete=\"off\" autocorrect=\"off\">", "</label><div class=\"k2b-prompt-search__collapse\" style=\"", "\"><div class=\"k2b-prompt-search__results\">", "", "</div></div></div></div>"],
+  _tmpl$8 = ["<p class=\"k2b-prompt-search-shell__title\">", "</p>"],
+  _tmpl$9 = ["<div class=\"k2b-prompt-search__error\" role=\"status\" aria-live=\"polite\">", "</div>"],
+  _tmpl$0 = ["<p role=\"status\" aria-live=\"polite\">", "</p>"],
+  _tmpl$1 = ["<img", " alt>"],
+  _tmpl$10 = ["<span class=\"k2b-prompt-search__preview\">", "</span>"],
+  _tmpl$11 = ["<button type=\"button\"", " role=\"option\"", ">", "<span class=\"k2b-prompt-search__copy\"><strong>", "</strong>", "</span></button>"],
+  _tmpl$12 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$13 = ["<small>", "</small>"],
+  _tmpl$14 = ["<div class=\"k2b-prompt-copy\">", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\"", ">", "</button></footer></div>"],
+  _tmpl$16 = ["<div class=\"k2b-dialog__panel k2b-dialog__stack\">", "<div class=\"k2b-dialog__content\">", "</div></div>"],
+  _tmpl$17 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\">", "</button></footer></div>"];
 import { mutation, timed } from "@k2b/stdlib/solid";
 import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
 import { createStore } from "solid-js/store";
@@ -45,8 +39,9 @@ import { TextInput } from "../inputs/TextInput";
 import { KeyedFor } from "../internal/keyed-for";
 import { resolveUiMessages } from "../intl/messages";
 import { dialogCore } from "./dialog-core";
+import { contentClass, DialogHeader, panelClass, promptTone, sharedPrompts } from "./prompt-confirm";
 import { resolvePromptMessages } from "./prompt-messages";
-const PHRASE_SLOT = "\u0000";
+export { DialogHeader } from "./prompt-confirm";
 const isEmpty = value => value === undefined || value === null || value === "" || Array.isArray(value) && value.length === 0;
 export const createFormState = schema => {
   const messages = resolveUiMessages();
@@ -117,28 +112,8 @@ export const createFormState = schema => {
     reset
   };
 };
-export const DialogHeader = props => _$ssr(_tmpl$, _$escape(_$createComponent(Show, {
-  get when() {
-    return props.icon;
-  },
-  children: icon => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(icon(), true), false))
-})), _$escape(_$createComponent(Show, {
-  get when() {
-    return props.title;
-  },
-  get fallback() {
-    return _$ssr(_tmpl$3);
-  },
-  children: title => _$ssr(_tmpl$4, _$escape(title()))
-})), _$ssrAttribute("aria-label", _$escape(resolveUiMessages().closeDialog, true), false));
-const panelClass = options => {
-  const size = options?.size ?? "medium";
-  const variant = options?.variant && options.variant !== "primary" ? ` k2b-dialog--${options.variant}` : "";
-  return `k2b-dialog k2b-dialog--${size}${variant}${options?.surface === "bare" ? " is-bare" : ""}`;
-};
-const contentClass = surface => surface === "bare" ? "k2b-dialog__viewport is-bare" : "k2b-dialog__viewport";
 const renderInfo = content => {
-  if (typeof content === "string") return _$ssr(_tmpl$5, _$escape(content));
+  if (typeof content === "string") return _$ssr(_tmpl$, _$escape(content));
   if (typeof content === "function") return content();
   return content;
 };
@@ -373,20 +348,23 @@ const PromptFormDialog = props => {
     event.preventDefault();
     submit();
   };
-  return _$ssr(_tmpl$7, _$escape(_$createComponent(DialogHeader, {
+  return _$ssr(_tmpl$3, _$escape(_$createComponent(DialogHeader, {
     get title() {
       return props.config.title;
     },
     get icon() {
       return props.config.icon;
     },
+    get tone() {
+      return promptTone(props.config.variant);
+    },
     close: () => props.close(null)
   })), _$escape(_$createComponent(For, {
     get each() {
       return Object.entries(props.config.fields);
     },
     children: ([key, field]) => {
-      if (field.type === "info") return _$ssr(_tmpl$8, _$escape(renderInfo(field.content)));
+      if (field.type === "info") return _$ssr(_tmpl$4, _$escape(renderInfo(field.content)));
       return _$createComponent(PromptControl, {
         field: field,
         value: () => state.values[key],
@@ -400,7 +378,7 @@ const PromptFormDialog = props => {
       return props.config.cancelText !== false;
     },
     get children() {
-      return _$ssr(_tmpl$6, _$escape(props.config.cancelText || resolveUiMessages().cancel));
+      return _$ssr(_tmpl$2, _$escape(props.config.cancelText || resolveUiMessages().cancel));
     }
   })), _$ssrAttribute("data-variant", _$escape(props.config.variant ?? "primary", true), false), _$escape(props.config.confirmText ?? resolveUiMessages().save));
 };
@@ -516,50 +494,50 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
     cancelDebounce();
     searchMutation.abort();
   });
-  return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$7, _$escape(_$createComponent(Show, {
     get when() {
       return options?.title;
     },
-    children: title => _$ssr(_tmpl$10, _$escape(title()))
+    children: title => _$ssr(_tmpl$8, _$escape(title()))
   })), _$ssrAttribute("class", _$escape(options?.icon ?? "ti ti-search", true), false), _$ssrAttribute("id", _$escape(searchId, true), false), _$ssrAttribute("aria-label", _$escape(options?.ariaLabel ?? options?.title ?? resolveUiMessages().search, true), false), _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-expanded", _$escape(shouldShowResults(), true), false) + _$ssrAttribute("aria-activedescendant", shouldShowResults() && items().length > 0 ? _$escape(optionId(activeIndex()), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(searchMutation.loading(), true), false) + _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(options?.placeholder ?? resolveUiMessages().search, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return searchMutation.loading();
     },
     get children() {
-      return _$ssr(_tmpl$9);
+      return _$ssr(_tmpl$5);
     }
   })), _$ssrStyleProperty("height:", shouldShowResults() ? "var(--k2b-search-body-max)" : "0px") + _$ssrStyleProperty(";opacity:", shouldShowResults() ? "1" : "0"), _$escape(_$createComponent(Show, {
     get when() {
       return searchError();
     },
-    children: message => _$ssr(_tmpl$11, _$escape(message()))
+    children: message => _$ssr(_tmpl$9, _$escape(message()))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return items().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$12, _$escape(emptyStateText()));
+      return _$ssr(_tmpl$0, _$escape(emptyStateText()));
     },
     get children() {
-      return _$ssr(_tmpl$0, _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(resolveUiMessages().searchResults, true), false), _$escape(_$createComponent(KeyedFor, {
+      return _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(resolveUiMessages().searchResults, true), false), _$escape(_$createComponent(KeyedFor, {
         get each() {
           return items();
         },
         by: searchRowIdentity,
-        children: (item, index) => _$ssr(_tmpl$15, _$ssrAttribute("id", _$escape(optionId(index()), true), false), _$ssrAttribute("aria-selected", _$escape(activeIndex(), true) === _$escape(index(), true), false) + _$ssrAttribute("data-active", activeIndex() === index() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-description", item().desc ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        children: (item, index) => _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(optionId(index()), true), false), _$ssrAttribute("aria-selected", _$escape(activeIndex(), true) === _$escape(index(), true), false) + _$ssrAttribute("data-active", activeIndex() === index() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-description", item().desc ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {
             return item().previewUrl?.startsWith("/") || item().icon;
           },
           get children() {
-            return _$ssr(_tmpl$14, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$10, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => !!item().previewUrl?.startsWith("/"))() && !failedPreviews[index()];
               },
               get fallback() {
-                return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(item().icon ?? "ti ti-file", true), false));
+                return _$ssr(_tmpl$12, _$ssrAttribute("class", _$escape(item().icon ?? "ti ti-file", true), false));
               },
               get children() {
-                return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(item().previewUrl, true), false));
+                return _$ssr(_tmpl$1, _$ssrAttribute("src", _$escape(item().previewUrl, true), false));
               }
             })));
           }
@@ -567,7 +545,7 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
           get when() {
             return item().desc;
           },
-          children: description => _$ssr(_tmpl$16, _$escape(description()))
+          children: description => _$ssr(_tmpl$13, _$escape(description()))
         })))
       })));
     }
@@ -586,7 +564,7 @@ const promptText = (content, defaultValue, options) => prompts.form({
   fields: {
     message: {
       type: "info",
-      content: () => _$ssr(_tmpl$17, _$escape(content))
+      content: () => _$ssr(_tmpl$14, _$escape(content))
     },
     value: {
       type: "text",
@@ -600,7 +578,7 @@ const promptNumber = (content, defaultValue, options) => prompts.form({
   fields: {
     message: {
       type: "info",
-      content: () => _$ssr(_tmpl$17, _$escape(content))
+      content: () => _$ssr(_tmpl$14, _$escape(content))
     },
     value: {
       type: "number",
@@ -611,14 +589,20 @@ const promptNumber = (content, defaultValue, options) => prompts.form({
     }
   }
 }).then(result => result?.value ?? null);
-export const prompts = {
-  alert: (content, options) => dialogCore.open(close => _$ssr(_tmpl$18, _$escape(_$createComponent(DialogHeader, {
+
+// The same object as `sharedPrompts`, which `PanelDialog` uses for its discard question: replacing `prompts.confirm`
+// (for example in a test) therefore reaches every confirmation.
+export const prompts = Object.assign(sharedPrompts, {
+  alert: (content, options) => dialogCore.open(close => _$ssr(_tmpl$15, _$escape(_$createComponent(DialogHeader, {
     get title() {
       return options?.title || resolveUiMessages().info;
     },
     get icon() {
       return options?.icon;
     },
+    get tone() {
+      return promptTone(options?.variant);
+    },
     close: () => close()
   })), _$escape(content), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$escape(options?.confirmText || resolveUiMessages().ok)), {
     panelClassName: panelClass(options),
@@ -631,68 +615,8 @@ export const prompts = {
   success: (content, options) => prompts.alert(content, {
     ...options,
     variant: "success",
-    title: options?.title ?? resolveUiMessages().success,
-    icon: options?.icon ?? "ti ti-check"
+    title: options?.title ?? resolveUiMessages().success
   }),
-  confirm: (content, options) => {
-    const confirmationPhrase = options?.confirmationPhrase;
-    if (confirmationPhrase !== undefined && (confirmationPhrase.trim().length === 0 || /[\r\n\t]/.test(confirmationPhrase))) {
-      throw new Error("confirmationPhrase must be non-empty, visible, and single-line");
-    }
-    let confirmationInput;
-    return dialogCore.open(close => {
-      if (!confirmationPhrase) {
-        return _$ssr(_tmpl$19, _$escape(_$createComponent(DialogHeader, {
-          get title() {
-            return options?.title;
-          },
-          get icon() {
-            return options?.icon;
-          },
-          close: () => close(false)
-        })), _$escape(content), _$escape(options?.cancelText || resolveUiMessages().cancel), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$escape(options?.confirmText || resolvePromptMessages().confirm));
-      }
-
-      // The catalog owns word order; the slot marks where the verbatim phrase is rendered as code.
-      const [labelBefore, labelAfter] = resolvePromptMessages().typeToConfirm({
-        phrase: PHRASE_SLOT
-      }).split(PHRASE_SLOT);
-      const [confirmationValue, setConfirmationValue] = createSignal("");
-      const canConfirm = () => confirmationValue() === confirmationPhrase;
-      const submit = event => {
-        event.preventDefault();
-        if (canConfirm()) close(true);
-      };
-      return _$ssr(_tmpl$20, _$escape(_$createComponent(DialogHeader, {
-        get title() {
-          return options?.title;
-        },
-        get icon() {
-          return options?.icon;
-        },
-        close: () => close(false)
-      })), _$escape(content), _$escape(_$createComponent(TextInput, {
-        get label() {
-          return [labelBefore, _$ssr(_tmpl$21, _$escape(confirmationPhrase)), labelAfter];
-        },
-        value: confirmationValue,
-        onValueChange: setConfirmationValue,
-        autocomplete: "off",
-        autocapitalize: "off",
-        spellcheck: false,
-        monospace: true,
-        required: true
-      })), _$escape(options?.cancelText || resolveUiMessages().cancel), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$ssrAttribute("disabled", !canConfirm(), true), _$escape(options?.confirmText || resolvePromptMessages().confirm));
-    }, {
-      panelClassName: panelClass(options),
-      contentClassName: contentClass(options?.surface),
-      initialFocus: confirmationPhrase ? () => confirmationInput ?? null : undefined,
-      signal: options?.signal,
-      cancelBehavior: options?.cancelBehavior,
-      history: options?.history,
-      ariaLabel: options?.ariaLabel ?? options?.title ?? resolvePromptMessages().confirmation
-    });
-  },
   prompt: promptText,
   promptNumber,
   form: async config => (await dialogCore.open(close => _$createComponent(PromptFormDialog, {
@@ -722,7 +646,7 @@ export const prompts = {
       }
     });
     if (options?.surface === "bare" && options.header === false) return body;
-    return _$ssr(_tmpl$22, _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
       get when() {
         return options?.header !== false;
       },
@@ -734,6 +658,9 @@ export const prompts = {
           get icon() {
             return options?.icon;
           },
+          get tone() {
+            return promptTone(options?.variant);
+          },
           close: () => dismiss()
         });
       }
@@ -747,13 +674,14 @@ export const prompts = {
     ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().dialog
   }),
   search: openSearchPrompt,
-  error: (content, options) => dialogCore.open(close => _$ssr(_tmpl$23, _$escape(_$createComponent(DialogHeader, {
+  error: (content, options) => dialogCore.open(close => _$ssr(_tmpl$17, _$escape(_$createComponent(DialogHeader, {
     get title() {
       return options?.title ?? resolveUiMessages().error;
     },
     get icon() {
-      return options?.icon ?? "ti ti-alert-circle";
+      return options?.icon;
     },
+    tone: "danger",
     close: close
   })), _$escape(content), _$escape(options?.confirmText || resolveUiMessages().close)), {
     panelClassName: panelClass({
@@ -766,5 +694,5 @@ export const prompts = {
     history: options?.history,
     ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().error
   })
-};
+});
 //# sourceMappingURL=prompts.js.map