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

package/dist/CommandPalette.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
+import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
 export function isApplePlatform() {
-    return typeof navigator !== "undefined" && /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent);
+  return typeof navigator !== "undefined" && /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent);
 }
 /** "mod+shift+f" as the platform writes it: ⌘⇧F on Apple systems, Ctrl+Shift+F elsewhere. */
 export function shortcutLabel(shortcut) {
-    const apple = isApplePlatform();
-    return shortcut
-        .split("+")
-        .map((part) => {
-        switch (part.toLowerCase()) {
-            case "mod": return apple ? "⌘" : "Ctrl";
-            case "shift": return apple ? "⇧" : "Shift";
-            case "alt": return apple ? "⌥" : "Alt";
-            default: return part.length === 1 ? part.toUpperCase() : part;
-        }
-    })
-        .join(apple ? "" : "+");
+  const apple = isApplePlatform();
+  return shortcut.split("+").map(part => {
+    switch (part.toLowerCase()) {
+      case "mod":
+        return apple ? "⌘" : "Ctrl";
+      case "shift":
+        return apple ? "⇧" : "Shift";
+      case "alt":
+        return apple ? "⌥" : "Alt";
+      default:
+        return part.length === 1 ? part.toUpperCase() : part;
+    }
+  }).join(apple ? "" : "+");
 }
 const browseLimit = 6;
 const searchLimit = 40;
@@ -25,106 +28,275 @@ const searchLimit = 40;
  * one, show every command matching all its terms, grouped in their original order.
  */
 export function matchingCommands(commands, query, showAll = []) {
-    const terms = query.trim().toLocaleLowerCase().split(/\s+/u).filter(Boolean);
-    if (terms.length === 0) {
-        const counts = new Map();
-        return commands.filter((command) => {
-            const count = counts.get(command.group) ?? 0;
-            counts.set(command.group, count + 1);
-            return showAll.includes(command.group) || count < browseLimit;
-        });
-    }
-    const matches = commands.filter((command) => {
-        const content = `${command.label} ${command.detail ?? ""} ${command.group} ${command.keywords ?? ""}`.toLocaleLowerCase();
-        return terms.every((term) => content.includes(term));
+  const terms = query.trim().toLocaleLowerCase().split(/\s+/u).filter(Boolean);
+  if (terms.length === 0) {
+    const counts = new Map();
+    return commands.filter(command => {
+      const count = counts.get(command.group) ?? 0;
+      counts.set(command.group, count + 1);
+      return showAll.includes(command.group) || count < browseLimit;
     });
-    const groups = [...new Set(matches.map(({ group }) => group))];
-    return groups.flatMap((group) => matches.filter((command) => command.group === group)).slice(0, searchLimit);
+  }
+  const matches = commands.filter(command => {
+    const content = `${command.label} ${command.detail ?? ""} ${command.group} ${command.keywords ?? ""}`.toLocaleLowerCase();
+    return terms.every(term => content.includes(term));
+  });
+  const groups = [...new Set(matches.map(({
+    group
+  }) => group))];
+  return groups.flatMap(group => matches.filter(command => command.group === group)).slice(0, searchLimit);
 }
 /**
  * Find or run anything: every mdbase app opens it with Mod+K. Typing filters commands; the
  * arrows move, Enter runs, Shift+Enter runs a command's alternate, Escape closes.
  */
-export function CommandPalette({ open, commands, onClose, label = "Commands", placeholder = "Search commands", showAll }) {
-    return open ? _jsx(OpenCommandPalette, { commands: commands, onClose: onClose, label: label, placeholder: placeholder, showAll: showAll }) : null;
+export function CommandPalette({
+  open,
+  commands,
+  onClose,
+  label = _i18n._(
+  /** i18n */
+  {
+    id: "45MZFs",
+    message: "Commands"
+  }),
+  placeholder = _i18n._(
+  /** i18n */
+  {
+    id: "AbNeva",
+    message: "Search commands"
+  }),
+  showAll,
+  groupLabel
+}) {
+  useLocaleRevision();
+  return open ? _jsx(OpenCommandPalette, {
+    commands: commands,
+    onClose: onClose,
+    label: label,
+    placeholder: placeholder,
+    showAll: showAll,
+    groupLabel: groupLabel
+  }) : null;
 }
-function OpenCommandPalette({ commands, onClose, label, placeholder, showAll }) {
-    const [query, setQuery] = useState("");
-    const [active, setActive] = useState(0);
-    const inputRef = useRef(null);
-    const paletteRef = useRef(null);
-    const matches = useMemo(() => matchingCommands(commands, query, showAll), [commands, query, showAll]);
-    useEffect(() => {
-        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        globalThis.setTimeout(() => inputRef.current?.focus(), 0);
-        return () => previous?.focus();
-    }, []);
-    const run = (command, alternate = false) => {
-        onClose();
-        (alternate && command.alternate ? command.alternate.run : command.run)();
-    };
-    const hintId = `${label.replace(/\W+/gu, "-").toLowerCase()}-hint`;
-    return _jsxs("dialog", { className: "mdbase-command-backdrop", open: true, children: [_jsx("button", { className: "mdbase-command-dismiss", type: "button", "aria-label": `Close ${label.toLowerCase()}`, onClick: onClose }), _jsxs("section", { ref: paletteRef, className: "mdbase-command-palette", role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: (event) => {
-                    if (event.key === "Escape") {
-                        event.preventDefault();
-                        onClose();
-                    }
-                    else if (event.key === "Tab") {
-                        trapFocus(event, paletteRef.current);
-                    }
-                }, children: [_jsxs("label", { className: "mdbase-command-search", children: [_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [_jsx("circle", { cx: "11", cy: "11", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] }), _jsx("span", { className: "mdbase-visually-hidden", children: placeholder }), _jsx("input", { ref: inputRef, value: query, placeholder: placeholder, onChange: (event) => {
-                                    setQuery(event.target.value);
-                                    setActive(0);
-                                }, onKeyDown: (event) => handleKeys(event, matches, active, setActive, run, onClose) })] }), _jsx("div", { className: "mdbase-command-results", role: "listbox", "aria-label": "Results", "aria-describedby": hintId, children: matches.length > 0
-                            ? matches.map((command, index) => _jsxs(Fragment, { children: [command.group !== matches[index - 1]?.group
-                                        ? _jsx("div", { className: "mdbase-command-group", role: "presentation", children: command.group })
-                                        : null, _jsx(CommandRow, { command: command, active: index === active, onRun: run })] }, command.id))
-                            : _jsx("div", { className: "mdbase-command-empty", children: "Nothing matches" }) }), _jsxs("footer", { className: "mdbase-command-footer", id: hintId, children: [_jsxs("span", { children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), " to move"] }), _jsxs("span", { children: [_jsx("kbd", { children: "\u21B5" }), " to open"] }), matches[active]?.alternate
-                                ? _jsxs("span", { children: [_jsx("kbd", { children: shortcutLabel("shift") }), _jsx("kbd", { children: "\u21B5" }), " ", matches[active].alternate.label.toLocaleLowerCase()] })
-                                : null, _jsxs("span", { children: [_jsx("kbd", { children: "Esc" }), " to close"] })] })] })] });
+function OpenCommandPalette({
+  commands,
+  onClose,
+  label,
+  placeholder,
+  showAll,
+  groupLabel
+}) {
+  useLocaleRevision();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const paletteRef = useRef(null);
+  const matches = useMemo(() => matchingCommands(commands, query, showAll), [commands, query, showAll]);
+  useEffect(() => {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    globalThis.setTimeout(() => inputRef.current?.focus(), 0);
+    return () => previous?.focus();
+  }, []);
+  const run = (command, alternate = false) => {
+    onClose();
+    (alternate && command.alternate ? command.alternate.run : command.run)();
+  };
+  const hintId = useId();
+  return _jsxs("dialog", {
+    className: "mdbase-command-backdrop",
+    open: true,
+    children: [_jsx("button", {
+      className: "mdbase-command-dismiss",
+      type: "button",
+      "aria-label": _i18n._(
+      /** i18n */
+      {
+        id: "WbUtOC",
+        message: "Close {label}",
+        values: {
+          label: label
+        }
+      }),
+      onClick: onClose
+    }), _jsxs("section", {
+      ref: paletteRef,
+      className: "mdbase-command-palette",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": label,
+      onKeyDown: event => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onClose();
+        } else if (event.key === "Tab") {
+          trapFocus(event, paletteRef.current);
+        }
+      },
+      children: [_jsxs("label", {
+        className: "mdbase-command-search",
+        children: [_jsxs("svg", {
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          children: [_jsx("circle", {
+            cx: "11",
+            cy: "11",
+            r: "6.5"
+          }), _jsx("path", {
+            d: "m16 16 4 4"
+          })]
+        }), _jsx("span", {
+          className: "mdbase-visually-hidden",
+          children: placeholder
+        }), _jsx("input", {
+          ref: inputRef,
+          value: query,
+          placeholder: placeholder,
+          onChange: event => {
+            setQuery(event.target.value);
+            setActive(0);
+          },
+          onKeyDown: event => handleKeys(event, matches, active, setActive, run, onClose)
+        })]
+      }), _jsx("div", {
+        className: "mdbase-command-results",
+        role: "listbox",
+        "aria-label": _i18n._(
+        /** i18n */
+        {
+          id: "kx0s-n",
+          message: "Results"
+        }),
+        "aria-describedby": hintId,
+        children: matches.length > 0 ? matches.map((command, index) => _jsxs(Fragment, {
+          children: [command.group !== matches[index - 1]?.group ? _jsx("div", {
+            className: "mdbase-command-group",
+            role: "presentation",
+            children: groupLabel ? groupLabel(command.group) : command.group
+          }) : null, _jsx(CommandRow, {
+            command: command,
+            active: index === active,
+            onRun: run
+          })]
+        }, command.id)) : _jsx("div", {
+          className: "mdbase-command-empty",
+          children: _i18n._(
+          /** i18n */
+          {
+            id: "DViXWV",
+            message: "Nothing matches"
+          })
+        })
+      }), _jsxs("footer", {
+        className: "mdbase-command-footer",
+        id: hintId,
+        children: [_jsxs("span", {
+          children: [_jsx("kbd", {
+            children: "\u2191"
+          }), _jsx("kbd", {
+            children: "\u2193"
+          }), "  ", _i18n._(
+          /** i18n */
+          {
+            id: "2UA-qq",
+            message: "to move"
+          })]
+        }), _jsxs("span", {
+          children: [_jsx("kbd", {
+            children: "\u21B5"
+          }), "  ", _i18n._(
+          /** i18n */
+          {
+            id: "2cqK5k",
+            message: "to open"
+          })]
+        }), matches[active]?.alternate ? _jsxs("span", {
+          children: [_jsx("kbd", {
+            children: shortcutLabel("shift")
+          }), _jsx("kbd", {
+            children: "\u21B5"
+          }), " ", matches[active].alternate.label.toLocaleLowerCase()]
+        }) : null, _jsxs("span", {
+          children: [_jsx("kbd", {
+            children: _i18n._(
+            /** i18n */
+            {
+              id: "zO1gmR",
+              message: "Esc"
+            })
+          }), "  ", _i18n._(
+          /** i18n */
+          {
+            id: "UbVgIu",
+            message: "to close"
+          })]
+        })]
+      })]
+    })]
+  });
 }
 function trapFocus(event, container) {
-    if (!container)
-        return;
-    const items = [...container.querySelectorAll("input, button, [tabindex]:not([tabindex='-1'])")];
-    const first = items[0];
-    const last = items.at(-1);
-    if (!first || !last)
-        return;
-    if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-    }
-    else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-    }
+  if (!container) return;
+  const items = [...container.querySelectorAll("input, button, [tabindex]:not([tabindex='-1'])")];
+  const first = items[0];
+  const last = items.at(-1);
+  if (!first || !last) return;
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
 }
-function CommandRow({ command, active, onRun }) {
-    const ref = useRef(null);
-    useEffect(() => {
-        if (active)
-            ref.current?.scrollIntoView({ block: "nearest" });
-    }, [active]);
-    return _jsxs("button", { ref: ref, type: "button", role: "option", "aria-selected": active, onMouseDown: (event) => onRun(command, event.shiftKey), children: [_jsxs("span", { children: [_jsx("strong", { children: command.label }), command.detail ? _jsx("small", { children: command.detail }) : null] }), command.alternate && active
-                ? _jsxs("span", { className: "mdbase-command-alternate", children: [shortcutLabel("shift"), "\u21B5 ", command.alternate.label] })
-                : null, command.shortcut ? _jsx("kbd", { children: shortcutLabel(command.shortcut) }) : null] });
+function CommandRow({
+  command,
+  active,
+  onRun
+}) {
+  useLocaleRevision();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (active) ref.current?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [active]);
+  return _jsxs("button", {
+    ref: ref,
+    type: "button",
+    role: "option",
+    "aria-selected": active,
+    onMouseDown: event => onRun(command, event.shiftKey),
+    children: [_jsxs("span", {
+      children: [_jsx("strong", {
+        children: command.label
+      }), command.detail ? _jsx("small", {
+        children: command.detail
+      }) : null]
+    }), command.alternate && active ? _jsxs("span", {
+      className: "mdbase-command-alternate",
+      children: [shortcutLabel("shift"), "\u21B5 ", command.alternate.label]
+    }) : null, command.shortcut ? _jsx("kbd", {
+      children: shortcutLabel(command.shortcut)
+    }) : null]
+  });
 }
 function handleKeys(event, matches, active, setActive, run, close) {
-    if (event.key === "Escape") {
-        event.preventDefault();
-        close();
-    }
-    else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault();
-        const direction = event.key === "ArrowDown" ? 1 : -1;
-        setActive((active + direction + matches.length) % Math.max(1, matches.length));
-    }
-    else if (event.key === "Enter") {
-        const command = matches[active];
-        if (command) {
-            event.preventDefault();
-            run(command, event.shiftKey);
-        }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    close();
+  } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    const direction = event.key === "ArrowDown" ? 1 : -1;
+    setActive((active + direction + matches.length) % Math.max(1, matches.length));
+  } else if (event.key === "Enter") {
+    const command = matches[active];
+    if (command) {
+      event.preventDefault();
+      run(command, event.shiftKey);
     }
+  }
 }

package/dist/Dialog.js

@@ -1,32 +1,79 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useLayoutEffect, useRef } from "react";
 /**
  * A modal dialog on the native <dialog>: the browser keeps focus inside it and the page
  * behind it inert. Escape, the close button or a press on the backdrop closes it.
  */
-export function Dialog({ open, onClose, title, className, closeDisabled = false, children }) {
-    const ref = useRef(null);
-    useLayoutEffect(() => {
-        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
-        return () => { ref.current?.close(); previous?.focus(); };
-    }, []);
-    // A layout effect, so the dialog is open before fields inside it ask to be focused.
-    useLayoutEffect(() => {
-        const dialog = ref.current;
-        if (!dialog)
-            return;
-        if (open && !dialog.open)
-            dialog.showModal();
-        else if (!open && dialog.open)
-            dialog.close();
-    }, [open]);
-    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onKeyDown: (event) => event.stopPropagation(), onCancel: (event) => {
-            event.preventDefault();
-            if (!closeDisabled)
-                onClose();
-        }, onClose: () => { if (!closeDisabled)
-            onClose(); }, onMouseDown: (event) => {
-            if (!closeDisabled && event.target === event.currentTarget)
-                onClose();
-        }, children: open && _jsxs("div", { className: "mdbase-dialog-body", children: [_jsxs("header", { className: "mdbase-dialog-header", children: [_jsx("h2", { children: title }), _jsx("button", { type: "button", className: "mdbase-icon-button", disabled: closeDisabled, onClick: onClose, "aria-label": "Close", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] }), children] }) });
+export function Dialog({
+  open,
+  onClose,
+  title,
+  className,
+  closeDisabled = false,
+  children
+}) {
+  useLocaleRevision();
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    return () => {
+      ref.current?.close();
+      previous?.focus();
+    };
+  }, []);
+  // A layout effect, so the dialog is open before fields inside it ask to be focused.
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return _jsx("dialog", {
+    ref: ref,
+    className: ["mdbase-dialog", className].filter(Boolean).join(" "),
+    "aria-label": title,
+    onKeyDown: event => event.stopPropagation(),
+    onCancel: event => {
+      event.preventDefault();
+      if (!closeDisabled) onClose();
+    },
+    onClose: () => {
+      if (!closeDisabled) onClose();
+    },
+    onMouseDown: event => {
+      if (!closeDisabled && event.target === event.currentTarget) onClose();
+    },
+    children: open && _jsxs("div", {
+      className: "mdbase-dialog-body",
+      children: [_jsxs("header", {
+        className: "mdbase-dialog-header",
+        children: [_jsx("h2", {
+          children: title
+        }), _jsx("button", {
+          type: "button",
+          className: "mdbase-icon-button",
+          disabled: closeDisabled,
+          onClick: onClose,
+          "aria-label": _i18n._(
+          /** i18n */
+          {
+            id: "yz7wBu",
+            message: "Close"
+          }),
+          children: _jsx("svg", {
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round",
+            children: _jsx("path", {
+              d: "m6 6 12 12M18 6 6 18"
+            })
+          })
+        })]
+      }), children]
+    })
+  });
 }