@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.147

package/dist/FeedbackVerification.js

@@ -1,76 +1,123 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useEffect, useRef, useState } from "react";
 let turnstileScript;
-export function FeedbackVerification({ siteKey, onToken }) {
-    const container = useRef(null);
-    const callback = useRef(onToken);
-    const [error, setError] = useState("");
-    const [attempt, setAttempt] = useState(0);
-    callback.current = onToken;
-    useEffect(() => {
-        callback.current("");
-        setError("");
-        let active = true;
-        let widgetId;
-        void loadTurnstile().then(() => {
-            if (!active || !container.current || !window.turnstile)
-                return;
-            widgetId = window.turnstile.render(container.current, {
-                sitekey: siteKey,
-                callback: (token) => { if (active) {
-                    setError("");
-                    callback.current(token);
-                } },
-                "expired-callback": () => { if (active)
-                    callback.current(""); },
-                "error-callback": () => { if (active) {
-                    callback.current("");
-                    setError("Verification could not be completed. Try again.");
-                } },
-                action: "feedback",
-                theme: "auto"
-            });
-        }).catch(() => {
-            if (active)
-                setError("Verification could not be loaded. Check your connection and try again.");
-        });
-        return () => {
-            active = false;
-            if (widgetId && window.turnstile)
-                window.turnstile.remove(widgetId);
-        };
-    }, [siteKey, attempt]);
-    return _jsxs("div", { className: "mdbase-feedback-verification", children: [_jsx("div", { ref: container }), error && _jsxs(_Fragment, { children: [_jsx("p", { className: "mdbase-feedback-error", role: "alert", children: error }), _jsx("button", { type: "button", onClick: () => setAttempt((value) => value + 1), children: "Retry verification" })] })] });
+export function FeedbackVerification({
+  siteKey,
+  onToken
+}) {
+  useLocaleRevision();
+  const container = useRef(null);
+  const callback = useRef(onToken);
+  const [error, setError] = useState("");
+  const [attempt, setAttempt] = useState(0);
+  callback.current = onToken;
+  useEffect(() => {
+    callback.current("");
+    setError("");
+    let active = true;
+    let widgetId;
+    void loadTurnstile().then(() => {
+      if (!active || !container.current || !window.turnstile) return;
+      widgetId = window.turnstile.render(container.current, {
+        sitekey: siteKey,
+        callback: token => {
+          if (active) {
+            setError("");
+            callback.current(token);
+          }
+        },
+        "expired-callback": () => {
+          if (active) callback.current("");
+        },
+        "error-callback": () => {
+          if (active) {
+            callback.current("");
+            setError(_i18n._(
+            /** i18n */
+            {
+              id: "kC9O29",
+              message: "Verification could not be completed. Try again."
+            }));
+          }
+        },
+        action: "feedback",
+        theme: "auto"
+      });
+    }).catch(() => {
+      if (active) setError(_i18n._(
+      /** i18n */
+      {
+        id: "gvuZjZ",
+        message: "Verification could not be loaded. Check your connection and try again."
+      }));
+    });
+    return () => {
+      active = false;
+      if (widgetId && window.turnstile) window.turnstile.remove(widgetId);
+    };
+  }, [siteKey, attempt]);
+  return _jsxs("div", {
+    className: "mdbase-feedback-verification",
+    children: [_jsx("div", {
+      ref: container
+    }), error && _jsxs(_Fragment, {
+      children: [_jsx("p", {
+        className: "mdbase-feedback-error",
+        role: "alert",
+        children: error
+      }), _jsx("button", {
+        type: "button",
+        onClick: () => setAttempt(value => value + 1),
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "ak4q13",
+          message: "Retry verification"
+        })
+      })]
+    })]
+  });
 }
 function loadTurnstile() {
-    if (window.turnstile)
-        return Promise.resolve();
-    if (turnstileScript)
-        return turnstileScript;
-    turnstileScript = new Promise((resolve, reject) => {
-        const existing = document.querySelector('script[data-mdbase-turnstile="true"]');
-        const script = existing ?? document.createElement("script");
-        const cleanup = () => { clearTimeout(timer); script.removeEventListener("load", loaded); script.removeEventListener("error", failed); };
-        const loaded = () => { cleanup(); if (window.turnstile)
-            resolve();
-        else
-            reject(new Error("Turnstile API unavailable")); };
-        const failed = () => { cleanup(); reject(new Error("Turnstile failed to load")); };
-        const timer = setTimeout(failed, 15_000);
-        script.addEventListener("load", loaded, { once: true });
-        script.addEventListener("error", failed, { once: true });
-        if (!existing) {
-            script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
-            script.async = true;
-            script.defer = true;
-            script.dataset.mdbaseTurnstile = "true";
-            document.head.append(script);
-        }
+  if (window.turnstile) return Promise.resolve();
+  if (turnstileScript) return turnstileScript;
+  turnstileScript = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[data-mdbase-turnstile="true"]');
+    const script = existing ?? document.createElement("script");
+    const cleanup = () => {
+      clearTimeout(timer);
+      script.removeEventListener("load", loaded);
+      script.removeEventListener("error", failed);
+    };
+    const loaded = () => {
+      cleanup();
+      if (window.turnstile) resolve();else reject(new Error("Turnstile API unavailable"));
+    };
+    const failed = () => {
+      cleanup();
+      reject(new Error("Turnstile failed to load"));
+    };
+    const timer = setTimeout(failed, 15_000);
+    script.addEventListener("load", loaded, {
+      once: true
     });
-    turnstileScript = turnstileScript.catch((error) => {
-        document.querySelector('script[data-mdbase-turnstile="true"]')?.remove();
-        turnstileScript = undefined;
-        throw error;
+    script.addEventListener("error", failed, {
+      once: true
     });
-    return turnstileScript;
+    if (!existing) {
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+      script.async = true;
+      script.defer = true;
+      script.dataset.mdbaseTurnstile = "true";
+      document.head.append(script);
+    }
+  });
+  turnstileScript = turnstileScript.catch(error => {
+    document.querySelector('script[data-mdbase-turnstile="true"]')?.remove();
+    turnstileScript = undefined;
+    throw error;
+  });
+  return turnstileScript;
 }

package/dist/SaveNotice.js

@@ -1,21 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useEffect, useRef } from "react";
 import { holdMdbaseMarkBusy, signalMdbaseMark } from "./mark-activity.js";
 /** A save shorter than this never sets the mark moving. */
 const SLOW_SAVE_MS = 600;
 /** The mark's reaction when a notice changes from `before` to `tone`; none when it first appears. */
 export function saveToneSignal(before, tone) {
-    if (before === null || before === tone)
-        return null;
-    if (tone === "attention")
-        return "error";
-    return tone === "saved" && (before === "saving" || before === "pending") ? "saved" : null;
+  if (before === null || before === tone) return null;
+  if (tone === "attention") return "error";
+  return tone === "saved" && (before === "saving" || before === "pending") ? "saved" : null;
 }
 const defaultLabels = {
-    saved: "Saved",
-    saving: "Saving",
-    pending: "Unsaved",
-    attention: "Needs attention"
+  get saved() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "idD8Ev",
+      message: "Saved"
+    });
+  },
+  get saving() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "uF9ruK",
+      message: "Saving"
+    });
+  },
+  get pending() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "P74TOi",
+      message: "Unsaved"
+    });
+  },
+  get attention() {
+    return _i18n._(
+    /** i18n */
+    {
+      id: "fAUSZy",
+      message: "Needs attention"
+    });
+  }
 };
 /**
  * The minimal save notice every mdbase app shows beside what it edits. Put it inside an
@@ -25,23 +53,38 @@ const defaultLabels = {
  * The notice also drives the app's mark: a save that completes plays `saved`, a newly
  * raised problem plays `error`, and a slow save bounces the mark until it ends.
  */
-export function SaveNotice({ tone, label = defaultLabels[tone], className }) {
-    const previous = useRef(null);
-    useEffect(() => {
-        const kind = saveToneSignal(previous.current, tone);
-        previous.current = tone;
-        if (kind)
-            signalMdbaseMark(kind);
-    }, [tone]);
-    useEffect(() => {
-        if (tone !== "saving")
-            return;
-        let release;
-        const timer = setTimeout(() => { release = holdMdbaseMarkBusy("bounce"); }, SLOW_SAVE_MS);
-        return () => {
-            clearTimeout(timer);
-            release?.();
-        };
-    }, [tone]);
-    return _jsxs("span", { className: ["mdbase-save-notice", `is-${tone}`, tone === "saved" && "mdbase-settle", className].filter(Boolean).join(" "), "aria-live": "polite", children: [tone === "saved" && _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }), label] });
+export function SaveNotice({
+  tone,
+  label = defaultLabels[tone],
+  className
+}) {
+  useLocaleRevision();
+  const previous = useRef(null);
+  useEffect(() => {
+    const kind = saveToneSignal(previous.current, tone);
+    previous.current = tone;
+    if (kind) signalMdbaseMark(kind);
+  }, [tone]);
+  useEffect(() => {
+    if (tone !== "saving") return;
+    let release;
+    const timer = setTimeout(() => {
+      release = holdMdbaseMarkBusy("bounce");
+    }, SLOW_SAVE_MS);
+    return () => {
+      clearTimeout(timer);
+      release?.();
+    };
+  }, [tone]);
+  return _jsxs("span", {
+    className: ["mdbase-save-notice", `is-${tone}`, tone === "saved" && "mdbase-settle", className].filter(Boolean).join(" "),
+    "aria-live": "polite",
+    children: [tone === "saved" && _jsx("svg", {
+      viewBox: "0 0 16 16",
+      "aria-hidden": "true",
+      children: _jsx("path", {
+        d: "m3.5 8.5 3 3 6-7"
+      })
+    }), label]
+  });
 }

package/dist/Select.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState, } from "react";
-import { edgeOption, extendTypeahead, flattenOptions, stepOption, typeaheadOption, } from "./select-model.js";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { edgeOption, extendTypeahead, flattenOptions, stepOption, typeaheadOption } from "./select-model.js";
 import { SelectList } from "./SelectList.js";
 import { useSelectPopover } from "./popover.js";
 /**
@@ -9,150 +9,198 @@ import { useSelectPopover } from "./popover.js";
  * panels, menus) never cut it off, while it stays in the DOM beside its trigger: a click in
  * the list still counts as inside any menu that contains the select.
  */
-export function Select({ value, options: items, onChange, placeholder, className, disabled, onKeyDown, onClick, ref, ...trigger }) {
-    const id = useId();
-    const triggerRef = useRef(null);
-    const listRef = useRef(null);
-    const options = flattenOptions(items);
-    const selected = options.findIndex((option) => option.value === value);
-    const state = useSelectState(options, selected, value, onChange, disabled, triggerRef);
-    useSelectPopover(state.open, triggerRef, listRef, () => state.close(false));
-    useLayoutEffect(() => {
-        if (state.open && listRef.current) {
-            revealOption(listRef.current, state.active);
+export function Select({
+  value,
+  options: items,
+  onChange,
+  placeholder,
+  className,
+  disabled,
+  onKeyDown,
+  onClick,
+  ref,
+  ...trigger
+}) {
+  const id = useId();
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  } = trigger;
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const options = flattenOptions(items);
+  const selected = options.findIndex(option => option.value === value);
+  const state = useSelectState(options, selected, value, onChange, disabled, triggerRef);
+  useSelectPopover(state.open, triggerRef, listRef, () => state.close(false));
+  useLayoutEffect(() => {
+    if (state.open && listRef.current) {
+      revealOption(listRef.current, state.active);
+    }
+  }, [state.active, state.open]);
+  const label = selected >= 0 ? options[selected]?.label : placeholder;
+  return _jsxs(_Fragment, {
+    children: [_jsxs("button", {
+      ...trigger,
+      ref: node => {
+        triggerRef.current = node;
+        if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+      },
+      type: "button",
+      role: "combobox",
+      className: ["mdbase-select", className].filter(Boolean).join(" "),
+      "data-value": value,
+      disabled: disabled,
+      "aria-haspopup": "listbox",
+      "aria-expanded": state.open,
+      "aria-controls": `${id}-list`,
+      onClick: event => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          state.toggle();
+        }
+      },
+      onKeyDown: event => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) {
+          state.onTriggerKey(event);
         }
-    }, [state.active, state.open]);
-    const label = selected >= 0 ? options[selected]?.label : placeholder;
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ...trigger, ref: (node) => {
-                    triggerRef.current = node;
-                    if (typeof ref === "function")
-                        ref(node);
-                    else if (ref)
-                        ref.current = node;
-                }, type: "button", role: "combobox", className: ["mdbase-select", className].filter(Boolean).join(" "), "data-value": value, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": state.open, "aria-controls": `${id}-list`, onClick: (event) => {
-                    onClick?.(event);
-                    if (!event.defaultPrevented) {
-                        state.toggle();
-                    }
-                }, onKeyDown: (event) => {
-                    onKeyDown?.(event);
-                    if (!event.defaultPrevented) {
-                        state.onTriggerKey(event);
-                    }
-                }, children: [_jsx("span", { className: selected >= 0 ? "mdbase-select-value" : "mdbase-select-value is-empty", children: label ?? "" }), _jsx("svg", { className: "mdbase-select-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), _jsx(SelectList, { id: id, listRef: listRef, items: items, selected: selected, active: state.active, open: state.open, label: trigger["aria-label"], labelledBy: trigger["aria-labelledby"], onActivate: state.setActive, onChoose: state.choose, onKeyDown: state.onListKey })] }));
+      },
+      children: [_jsx("span", {
+        className: selected >= 0 ? "mdbase-select-value" : "mdbase-select-value is-empty",
+        children: label ?? ""
+      }), _jsx("svg", {
+        className: "mdbase-select-chevron",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: _jsx("path", {
+          d: "m7 10 5 5 5-5"
+        })
+      })]
+    }), _jsx(SelectList, {
+      id: id,
+      listRef: listRef,
+      items: items,
+      selected: selected,
+      active: state.active,
+      open: state.open,
+      label: ariaLabel,
+      labelledBy: ariaLabelledBy,
+      onActivate: state.setActive,
+      onChoose: state.choose,
+      onKeyDown: state.onListKey
+    })]
+  });
 }
 function useSelectState(options, selected, value, onChange, disabled, triggerRef) {
-    const [open, setOpen] = useState(false);
-    const [active, setActive] = useState(-1);
-    const typed = useRef({ text: "", at: 0 });
-    const typeahead = (event, from) => {
-        typed.current = extendTypeahead(typed.current, event.key, event.timeStamp);
-        return typeaheadOption(options, typed.current.text, from);
-    };
-    const show = (index) => {
-        if (!disabled && options.length) {
-            setActive(index);
-            setOpen(true);
-        }
-    };
-    const close = (refocus) => {
-        setOpen(false);
-        if (refocus) {
-            triggerRef.current?.focus();
-        }
-    };
-    const commit = (index) => {
-        const option = options[index];
-        if (option && !option.disabled && option.value !== value) {
-            onChange(option.value);
-        }
-    };
-    const choose = (index) => {
-        if (options[index] && !options[index].disabled) {
-            close(true);
-            commit(index);
-        }
-    };
-    const initial = (key) => selected >= 0 ? selected : edgeOption(options, key === "ArrowUp" ? "last" : "first");
-    const onTriggerKey = (event) => {
-        if (disabled) {
-            return;
-        }
-        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
-            event.preventDefault();
-            show(initial(event.key));
-        }
-        else if (isPrintable(event)) {
-            // Like a native select, typing on the closed control changes the value directly.
-            commit(typeahead(event, selected));
-        }
-    };
-    const moves = {
-        ArrowDown: () => stepOption(options, active, 1),
-        ArrowUp: () => stepOption(options, active, -1),
-        Home: () => edgeOption(options, "first"),
-        End: () => edgeOption(options, "last"),
-        PageDown: () => stepPage(options, active, 1),
-        PageUp: () => stepPage(options, active, -1),
-    };
-    const onListKey = (event) => {
-        event.stopPropagation();
-        const move = moves[event.key];
-        if (move) {
-            event.preventDefault();
-            setActive(move());
-        }
-        else if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            choose(active);
-        }
-        else if (event.key === "Escape" || event.key === "Tab") {
-            if (event.key === "Escape") {
-                event.preventDefault();
-            }
-            close(event.key === "Escape");
-        }
-        else if (isPrintable(event)) {
-            const match = typeahead(event, active);
-            setActive(match >= 0 ? match : active);
-        }
-    };
-    return {
-        open,
-        active,
-        setActive,
-        close,
-        choose,
-        toggle: () => (open ? close(false) : show(initial("ArrowDown"))),
-        onTriggerKey,
-        onListKey,
-    };
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const typed = useRef({
+    text: "",
+    at: 0
+  });
+  const typeahead = (event, from) => {
+    typed.current = extendTypeahead(typed.current, event.key, event.timeStamp);
+    return typeaheadOption(options, typed.current.text, from);
+  };
+  const show = index => {
+    if (!disabled && options.length) {
+      setActive(index);
+      setOpen(true);
+    }
+  };
+  const close = refocus => {
+    setOpen(false);
+    if (refocus) {
+      triggerRef.current?.focus();
+    }
+  };
+  const commit = index => {
+    const option = options[index];
+    if (option && !option.disabled && option.value !== value) {
+      onChange(option.value);
+    }
+  };
+  const choose = index => {
+    if (options[index] && !options[index].disabled) {
+      close(true);
+      commit(index);
+    }
+  };
+  const initial = key => selected >= 0 ? selected : edgeOption(options, key === "ArrowUp" ? "last" : "first");
+  const onTriggerKey = event => {
+    if (disabled) {
+      return;
+    }
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      show(initial(event.key));
+    } else if (isPrintable(event)) {
+      // Like a native select, typing on the closed control changes the value directly.
+      commit(typeahead(event, selected));
+    }
+  };
+  const moves = {
+    ArrowDown: () => stepOption(options, active, 1),
+    ArrowUp: () => stepOption(options, active, -1),
+    Home: () => edgeOption(options, "first"),
+    End: () => edgeOption(options, "last"),
+    PageDown: () => stepPage(options, active, 1),
+    PageUp: () => stepPage(options, active, -1)
+  };
+  const onListKey = event => {
+    event.stopPropagation();
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      setActive(move());
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      choose(active);
+    } else if (event.key === "Escape" || event.key === "Tab") {
+      if (event.key === "Escape") {
+        event.preventDefault();
+      }
+      close(event.key === "Escape");
+    } else if (isPrintable(event)) {
+      const match = typeahead(event, active);
+      setActive(match >= 0 ? match : active);
+    }
+  };
+  return {
+    open,
+    active,
+    setActive,
+    close,
+    choose,
+    toggle: () => open ? close(false) : show(initial("ArrowDown")),
+    onTriggerKey,
+    onListKey
+  };
 }
 function stepPage(options, from, direction) {
-    let index = from;
-    for (let step = 0; step < 8; step += 1) {
-        index = stepOption(options, index, direction);
-    }
-    return index;
+  let index = from;
+  for (let step = 0; step < 8; step += 1) {
+    index = stepOption(options, index, direction);
+  }
+  return index;
 }
 /**
  * Scrolls only the list to show an option. scrollIntoView would also scroll the panels the
  * list sits inside in the DOM, which the open list treats as the page moving and closes.
  */
 function revealOption(list, index) {
-    const option = list.querySelector(`[data-index="${String(index)}"]`);
-    if (!option) {
-        return;
-    }
-    const top = option.offsetTop;
-    const bottom = top + option.offsetHeight;
-    if (top < list.scrollTop) {
-        list.scrollTop = top;
-    }
-    else if (bottom > list.scrollTop + list.clientHeight) {
-        list.scrollTop = bottom - list.clientHeight;
-    }
+  const option = list.querySelector(`[data-index="${String(index)}"]`);
+  if (!option) {
+    return;
+  }
+  const top = option.offsetTop;
+  const bottom = top + option.offsetHeight;
+  if (top < list.scrollTop) {
+    list.scrollTop = top;
+  } else if (bottom > list.scrollTop + list.clientHeight) {
+    list.scrollTop = bottom - list.clientHeight;
+  }
 }
 function isPrintable(event) {
-    return (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey);
+  return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
 }