@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/src/components/forms.tsx

@@ -10,6 +10,11 @@ import { Icon } from "../Icon.js";
 import { useControlled, useId, useOutside } from "../hooks.js";
 import { Avatar, IconButton, TintIcon } from "./foundation.js";
 import { Popover } from "./overlays.js";
+import { registerIcons } from "../icons.js";
+import { eyeOff } from "../icon-library.js";
+
+// the password field's "hide" state needs this one library icon
+registerIcons({ eyeOff });
 import type {
   CalendarProps,
   ComboboxProps,
@@ -69,12 +74,30 @@ export function FormField(p: FormFieldProps) {
 }
 
 export function TextField(p: TextFieldProps) {
+  const t = useStrings(FORMS_STRINGS);
+  const [shown, setShown] = React.useState(false);
+  const password = p.type === "password";
+  const action =
+    p.action ??
+    (password && p.reveal !== false ? (
+      <IconButton
+        icon={shown ? "eyeOff" : "eye"}
+        label={shown ? t.hidePassword : t.showPassword}
+        size="sm"
+        variant="ghost"
+        aria-pressed={shown}
+        disabled={p.disabled}
+        onClick={() => setShown(!shown)}
+      />
+    ) : null);
   const auto = useId("tf");
   const id = p.id || auto;
   const fromForm = useFieldError(p.name);
   const error = p.error || fromForm;
   return (
     <FormField
+      style={p.style}
+      className={p.className}
       id={id}
       label={p.label}
       required={p.required}
@@ -88,6 +111,7 @@ export function TextField(p: TextFieldProps) {
           "tf-inputwrap",
           p.icon && "has-icon",
           (error || p.success || p.suffix) && "has-suffix",
+          action && "has-action",
         )}
       >
         {p.icon && <Icon name={p.icon} size={15} className="tf-input-icon" />}
@@ -95,12 +119,13 @@ export function TextField(p: TextFieldProps) {
           id={id}
           name={p.name}
           className={cx("tf-input", p.success && "is-valid")}
-          type={p.type || "text"}
+          type={password && shown ? "text" : p.type || "text"}
           placeholder={p.placeholder}
           value={p.value}
           defaultValue={p.defaultValue}
           onChange={p.onChange}
           onBlur={p.onBlur}
+          onKeyDown={p.onKeyDown}
           required={p.required}
           disabled={p.disabled}
           readOnly={p.readOnly}
@@ -127,6 +152,7 @@ export function TextField(p: TextFieldProps) {
         ) : (
           p.suffix && <span className="tf-input-suffix">{p.suffix}</span>
         )}
+        {action && <span className="tf-input-action">{action}</span>}
       </span>
     </FormField>
   );
@@ -139,7 +165,7 @@ export function RadioGroup(p: RadioGroupProps) {
   const name = useId("rg"),
     v = useControlled(p.value, p.defaultValue, p.onChange);
   return (
-    <fieldset className={cx("tf-radiogroup", p.cards && "cards", p.className)}>
+    <fieldset style={p.style} className={cx("tf-radiogroup", p.cards && "cards", p.className)}>
       {p.label && <legend className="tf-field-label">{p.label}</legend>}
       <div className="tf-radiogroup-items">
         {(p.options || []).map((o) => {
@@ -189,6 +215,7 @@ export function Segmented(p: SegmentedProps) {
     name = useId("seg");
   return (
     <div
+      style={p.style}
       className={cx("tf-seg", p.size === "sm" && "sm", p.block && "block", p.className)}
       role="radiogroup"
       aria-label={p.label}
@@ -204,16 +231,20 @@ export function Segmented(p: SegmentedProps) {
           on = v[0] === opt.value;
         return (
           <label key={opt.value} className={cx("tf-seg-item", on && "on")}>
-            <input
-              type="radio"
-              name={name}
-              checked={on}
-              onChange={() => {
-                v[1](opt.value);
-              }}
-            />
             {opt.icon && <Icon name={opt.icon} size={14} />}
-            {opt.label}
+            {/* the radio covers the whole segment (positioned on the label); inside the text's
+                span, a click on the text and a click on the radio hit the same target */}
+            <span className="tf-seg-label">
+              <input
+                type="radio"
+                name={name}
+                checked={on}
+                onChange={() => {
+                  v[1](opt.value);
+                }}
+              />
+              {opt.label}
+            </span>
           </label>
         );
       })}
@@ -301,6 +332,7 @@ export function Combobox(p: ComboboxProps) {
   };
   return (
     <FormField
+      style={p.style}
       id={id}
       label={p.label}
       required={p.required}
@@ -442,7 +474,14 @@ export function TagInput(p: TagInputProps) {
     q[1]("");
   }
   return (
-    <FormField id={id} label={p.label} hint={p.hint} error={p.error}>
+    <FormField
+      style={p.style}
+      className={p.className}
+      id={id}
+      label={p.label}
+      hint={p.hint}
+      error={p.error}
+    >
       <div
         className="tf-combo-box tf-tags"
         onClick={(e) => {
@@ -562,7 +601,7 @@ export function Calendar(p: CalendarProps) {
     m[1](new Date(first.getFullYear(), first.getMonth() + n, 1));
   }
   return (
-    <div className="tf-cal">
+    <div style={p.style} className={cx("tf-cal", p.className)}>
       <div className="tf-cal-head">
         <IconButton
           icon="chevronLeft"
@@ -671,6 +710,7 @@ export function DatePicker(p: DatePickerProps) {
     : fmtD(v[0] as Date | null, locale);
   return (
     <FormField
+      style={p.style}
       id={id}
       label={p.label}
       required={p.required}
@@ -756,7 +796,14 @@ export function NumberInput(p: NumberInputProps) {
     v[1](Math.round(n * 1000) / 1000);
   }
   return (
-    <FormField id={id} label={p.label} hint={p.hint} error={p.error}>
+    <FormField
+      style={p.style}
+      className={p.className}
+      id={id}
+      label={p.label}
+      hint={p.hint}
+      error={p.error}
+    >
       <div className="tf-number">
         <IconButton
           icon="minus"
@@ -811,7 +858,7 @@ export function Slider(p: SliderProps) {
   const pct = ((v[0] - min) / (max - min)) * 100,
     f = p.format || String;
   return (
-    <FormField id={id} label={p.label} hint={p.hint}>
+    <FormField style={p.style} className={p.className} id={id} label={p.label} hint={p.hint}>
       <div className="tf-slider">
         <div className="tf-slider-track">
           <input
@@ -856,6 +903,16 @@ export function OtpInput(p: OtpInputProps) {
   const n = p.length || 6,
     st = React.useState(Array(n).fill("")),
     refs = React.useRef<(HTMLInputElement | null)[]>([]);
+  const reset = React.useCallback(() => {
+    st[1](Array(n).fill(""));
+    refs.current[0]?.focus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- st[1] is stable
+  }, [n]);
+  React.useImperativeHandle(p.ref, () => ({ reset }), [reset]);
+  // a wrong code: empty the cells for the next try
+  React.useEffect(() => {
+    if (p.error && p.clearOnError !== false) reset();
+  }, [p.error, p.clearOnError, reset]);
   function set(i: number, ch: string) {
     const nx = st[0].slice();
     nx[i] = ch;
@@ -865,7 +922,8 @@ export function OtpInput(p: OtpInputProps) {
   }
   return (
     <div
-      className={cx("tf-otp", p.error && "invalid")}
+      style={p.style}
+      className={cx("tf-otp", p.error && "invalid", p.className)}
       role="group"
       aria-label={p.label || t.verificationCode}
     >
@@ -932,6 +990,19 @@ function acceptsFile(file: { name: string; type: string }, accept?: string): boo
   );
 }
 
+/** A hidden file input that carries the listed files into a surrounding form. */
+function FormFiles(p: { name: string; files: UploadFile[] }) {
+  const ref = React.useRef<HTMLInputElement>(null);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof DataTransfer === "undefined") return;
+    const dt = new DataTransfer();
+    p.files.forEach((f) => f.file && dt.items.add(f.file));
+    el.files = dt.files;
+  }, [p.files]);
+  return <input ref={ref} type="file" name={p.name} multiple hidden tabIndex={-1} />;
+}
+
 export function FileDrop(p: FileDropProps) {
   const t = useStrings(FORMS_STRINGS);
   const fm = useFormat();
@@ -955,8 +1026,11 @@ export function FileDrop(p: FileDropProps) {
     picked = picked.filter((f) => acceptsFile(f, p.accept));
     if (p.multiple === false) picked = picked.slice(0, 1);
     if (rejected.length) p.onReject?.(rejected);
+    if (!picked.length || p.disabled) return;
+    const kept = p.onFiles?.(picked);
+    if (kept === false) return;
+    if (Array.isArray(kept)) picked = kept;
     if (!picked.length) return;
-    p.onFiles?.(picked);
     const add: UploadFile[] = picked.map((f) => ({
       name: f.name,
       size: f.size,
@@ -983,27 +1057,29 @@ export function FileDrop(p: FileDropProps) {
   }
   return (
     <div
-      className="tf-col"
+      className={cx("tf-col", p.className)}
       style={{
         gap: 12,
+        ...p.style,
       }}
     >
       <div
-        className={cx("tf-drop", over[0] && "over")}
+        className={cx("tf-drop", over[0] && "over", p.disabled && "disabled")}
         role="button"
-        tabIndex={0}
+        tabIndex={p.disabled ? -1 : 0}
+        aria-disabled={p.disabled || undefined}
         onClick={() => {
-          inp.current?.click();
+          if (!p.disabled) inp.current?.click();
         }}
         onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
+          if (!p.disabled && (e.key === "Enter" || e.key === " ")) {
             e.preventDefault();
             inp.current?.click();
           }
         }}
         onDragOver={(e) => {
           e.preventDefault();
-          over[1](true);
+          if (!p.disabled) over[1](true);
         }}
         onDragLeave={() => {
           over[1](false);
@@ -1023,11 +1099,13 @@ export function FileDrop(p: FileDropProps) {
           hidden
           multiple={p.multiple !== false}
           accept={p.accept}
+          disabled={p.disabled}
           onChange={(e) => {
             take(e.target.files);
             e.target.value = "";
           }}
         />
+        {p.name && <FormFiles name={p.name} files={files[0]} />}
       </div>
       {files[0].length > 0 && (
         <div

package/src/components/foundation.tsx

@@ -76,6 +76,7 @@ export function IconButton(props: NativeRest<IconButtonProps>) {
 export function Chip(p: ChipProps) {
   return (
     <button
+      style={p.style}
       type="button"
       className={cx("tf-chip", p.className)}
       aria-pressed={p.selected ? "true" : "false"}
@@ -101,6 +102,7 @@ export function Badge(p: BadgeProps) {
   const tone = (p.tone && TONE_ALIAS[p.tone]) || p.tone || "neutral";
   return (
     <span
+      style={p.style}
       className={cx(
         "tf-badge",
         "tf-badge-" + tone,
@@ -120,14 +122,15 @@ export function TintIcon(p: TintIconProps) {
       className={cx("tf-tinticon", "tf-t-" + (p.tint || "plain"), p.className)}
       aria-hidden={p.label ? undefined : true}
       title={p.label}
-      style={
-        p.size
+      style={{
+        ...(p.size
           ? {
               width: p.size,
               height: p.size,
             }
-          : undefined
-      }
+          : undefined),
+        ...p.style,
+      }}
     >
       <Icon name={p.icon} />
     </span>
@@ -148,6 +151,7 @@ export function Avatar(p: AvatarProps) {
         // a custom property, so a kit can recolour avatars (Pro keeps them monochrome)
         ["--av" as string]: "var(--" + t + ")",
         fontSize: Math.round(size * 0.36),
+        ...p.style,
       }}
       title={p.name}
     >
@@ -161,7 +165,7 @@ export function AvatarStack(p: AvatarStackProps) {
     max = p.max || 4,
     extra = names.length - max;
   return (
-    <span className="tf-avatar-stack">
+    <span style={p.style} className={cx("tf-avatar-stack", p.className)}>
       {names.slice(0, max).map((n) => (
         <Avatar key={n} name={n} size={p.size || 28} />
       ))}

package/src/components/index.ts

@@ -21,6 +21,7 @@ export {
   TwoFactorSetup,
   ColorField,
 } from "./admin.js";
+export { QrCode } from "./qr-code.js";
 export {
   AgentCard,
   AgentDetails,
@@ -157,7 +158,15 @@ export {
   AttachmentPreview,
 } from "./mail.js";
 export { ImageVariants, Gallery, BeforeAfter } from "./media.js";
-export { Tabs, Breadcrumb, Pagination, Menubar, NavigationMenu, Sidebar } from "./navigation.js";
+export {
+  Tabs,
+  Breadcrumb,
+  Pagination,
+  Menubar,
+  NavigationMenu,
+  Sidebar,
+  UserMenu,
+} from "./navigation.js";
 export {
   ConnectionCard,
   ConnectionBanner,

package/src/components/inputs.tsx

@@ -129,24 +129,60 @@ export function Textarea(p: TextareaProps) {
 
 export function SearchField(p: SearchFieldProps) {
   const t = useStrings();
+  const input = React.useRef<HTMLInputElement>(null);
+  // ⌘K / Ctrl+K: the last character of the hint is the key
+  const key = p.bindShortcut && p.shortcut ? p.shortcut.trim().slice(-1).toLowerCase() : "";
+  React.useEffect(() => {
+    if (!key) return;
+    const k = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || e.altKey || e.key.toLowerCase() !== key) return;
+      const el = e.target as HTMLElement | null;
+      const typing =
+        !!el &&
+        el !== input.current &&
+        (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+      if (typing) return;
+      e.preventDefault();
+      input.current?.focus();
+      input.current?.select();
+    };
+    document.addEventListener("keydown", k);
+    return () => document.removeEventListener("keydown", k);
+  }, [key]);
   return (
     <label className={cx("tf-search", p.className)} style={p.style}>
       <Icon name="search" size={15} />
       <input
+        ref={input}
         type="search"
+        id={p.id}
+        name={p.name}
+        autoFocus={p.autoFocus}
         placeholder={p.placeholder || t.search}
         aria-label={p.label || p.placeholder || t.search}
+        aria-keyshortcuts={
+          key ? `Meta+${key.toUpperCase()} Control+${key.toUpperCase()}` : undefined
+        }
         value={p.value}
+        defaultValue={p.defaultValue}
         onChange={p.onChange}
+        onKeyDown={p.onKeyDown}
+        onFocus={p.onFocus}
+        onBlur={p.onBlur}
+        {...p.inputProps}
       />
-      {p.shortcut && <span className="tf-kbd">{p.shortcut}</span>}
+      {p.shortcut && (
+        <span className="tf-kbd" aria-hidden>
+          {p.shortcut}
+        </span>
+      )}
     </label>
   );
 }
 
 export function Checkbox(p: CheckboxProps) {
   return (
-    <label className="tf-check">
+    <label style={p.style} className={cx("tf-check", p.className)}>
       <span className="tf-checkbox">
         <input
           type="checkbox"
@@ -182,15 +218,16 @@ export function Checkbox(p: CheckboxProps) {
 export function Switch(p: SwitchProps) {
   return (
     <label
-      className="tf-check"
-      style={
-        p.spread
+      className={cx("tf-check", p.className)}
+      style={{
+        ...(p.spread
           ? {
               justifyContent: "space-between",
               width: "100%",
             }
-          : undefined
-      }
+          : undefined),
+        ...p.style,
+      }}
     >
       {p.spread && p.children}
       <input

package/src/components/mail.tsx

@@ -30,6 +30,8 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
   const cur = (p.accounts || []).find((a) => a.address === p.value);
   return (
     <Popover
+      style={p.style}
+      className={p.className}
       width={320}
       trigger={(s) => (
         <button
@@ -103,7 +105,7 @@ export function AccountSwitcher(p: AccountSwitcherProps) {
 export function InboxList(p: InboxListProps) {
   const t = useStrings(MAIL_STRINGS);
   return (
-    <div className="tf-inboxlist" role="list">
+    <div style={p.style} className={cx("tf-inboxlist", p.className)} role="list">
       {(p.items || []).map((m) => (
         <button
           key={m.id}
@@ -149,7 +151,7 @@ export function MailThread(p: MailThreadProps) {
     (p.messages || []).length ? [p.messages[p.messages.length - 1].id] : [],
   );
   return (
-    <div className="tf-thread">
+    <div style={p.style} className={cx("tf-thread", p.className)}>
       {p.subject && <h3 className="tf-thread-subject">{p.subject}</h3>}
       {(p.messages || []).map((m) => {
         const o = open[0].indexOf(m.id) > -1;
@@ -213,7 +215,7 @@ export function SignatureEditor(p: SignatureEditorProps) {
     v[1](n);
   }
   return (
-    <div className="tf-sig">
+    <div style={p.style} className={cx("tf-sig", p.className)}>
       <div
         className="tf-col"
         style={{
@@ -257,6 +259,8 @@ export function SignatureEditor(p: SignatureEditorProps) {
 export function AttachmentPreview(p: AttachmentPreviewProps) {
   return (
     <Drawer
+      style={p.style}
+      className={p.className}
       title={p.name}
       subtitle={p.meta}
       onClose={p.onClose}

package/src/components/media.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { useFormat, useStrings } from "../context.js";
 import { MEDIA_STRINGS } from "../strings.js";
-import { useControlled } from "../hooks.js";
+import { moveFocus, useControlled } from "../hooks.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { Portal } from "../portal.js";
@@ -23,7 +23,7 @@ export function ImageVariants(p: ImageVariantsProps) {
   const sel = useControlled<string | number>(p.selected, p.variants?.[0]?.id ?? "", p.onSelect),
     cur: Partial<ImageVariant> = (p.variants || []).find((v) => v.id === sel[0]) || {};
   return (
-    <div className="tf-imgvar">
+    <div style={p.style} className={cx("tf-imgvar", p.className)}>
       <div
         className="tf-imgvar-stage"
         style={
@@ -94,19 +94,52 @@ export function ImageVariants(p: ImageVariantsProps) {
 export function Gallery(p: GalleryProps) {
   const t = useStrings(MEDIA_STRINGS);
   const items = p.items || [],
-    i = React.useState(p.start || 0),
+    i = useControlled(p.index, p.start || 0, p.onIndexChange),
     full = React.useState(false),
     n = items.length,
     cur: GalleryItem = items[i[0]] || {};
+  const box = React.useRef<HTMLDivElement>(null),
+    thumbs = React.useRef<HTMLDivElement>(null),
+    opener = React.useRef<HTMLButtonElement>(null);
   function go(d: number) {
     i[1]((i[0] + d + n) % n);
   }
+  const restore = React.useRef(false);
+  function close() {
+    full[1](false);
+    restore.current = true;
+  }
+  // the full-screen button comes back after the lightbox closes: focus returns to it
+  React.useEffect(() => {
+    if (!full[0] && restore.current) {
+      restore.current = false;
+      opener.current?.focus();
+    }
+  }, [full[0]]);
+  // focus moves into the lightbox when it appears (the portal mounts a render later)
+  const attachBox = React.useCallback((n: HTMLDivElement | null) => {
+    box.current = n;
+    n?.querySelector<HTMLElement>("button")?.focus();
+  }, []);
   React.useEffect(() => {
     if (!full[0]) return;
+    const lb = box.current;
     function k(e: KeyboardEvent) {
-      if (e.key === "Escape") full[1](false);
+      if (e.key === "Escape") close();
       if (e.key === "ArrowRight") go(1);
       if (e.key === "ArrowLeft") go(-1);
+      if (e.key === "Tab" && lb) {
+        const els = Array.from(lb.querySelectorAll<HTMLElement>("button"));
+        const a = els[0],
+          z = els[els.length - 1];
+        if (e.shiftKey && document.activeElement === a) {
+          e.preventDefault();
+          z?.focus();
+        } else if (!e.shiftKey && document.activeElement === z) {
+          e.preventDefault();
+          a?.focus();
+        }
+      }
     }
     document.addEventListener("keydown", k);
     return () => {
@@ -132,6 +165,19 @@ export function Gallery(p: GalleryProps) {
   const stage = (
     <div
       className="tf-gallery-stage"
+      role="group"
+      aria-label={t.imageN(i[0] + 1)}
+      tabIndex={n > 1 ? 0 : undefined}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(-1);
+        }
+      }}
       style={{
         aspectRatio: p.ratio || "3 / 2",
       }}
@@ -160,6 +206,7 @@ export function Gallery(p: GalleryProps) {
       <span className="tf-gallery-count">{i[0] + 1 + " / " + n}</span>
       {!full[0] && p.fullscreen !== false && (
         <IconButton
+          ref={opener}
           icon="expand"
           label={t.fullScreen}
           className="tf-gallery-full"
@@ -172,16 +219,35 @@ export function Gallery(p: GalleryProps) {
     </div>
   );
   return (
-    <div className="tf-gallery">
+    <div
+      style={p.style}
+      className={cx("tf-gallery", p.className)}
+      role="group"
+      aria-label={p.label || t.images}
+    >
       {stage}
       {p.thumbs !== false && n > 1 && (
-        <div className="tf-gallery-thumbs" role="tablist" aria-label={t.images}>
+        <div
+          ref={thumbs}
+          className="tf-gallery-thumbs"
+          role="tablist"
+          aria-label={p.label || t.images}
+          onKeyDown={(e) => {
+            if (moveFocus(e, thumbs.current, '[role="tab"]', "horizontal")) {
+              const k = Array.from(thumbs.current?.querySelectorAll('[role="tab"]') || []).indexOf(
+                document.activeElement as Element,
+              );
+              if (k > -1) i[1](k);
+            }
+          }}
+        >
           {items.map((it, k) => (
             <button
               key={k}
               type="button"
               role="tab"
               aria-selected={k === i[0]}
+              tabIndex={k === i[0] ? 0 : -1}
               className={cx(k === i[0] && "on")}
               onClick={() => {
                 i[1](k);
@@ -195,15 +261,14 @@ export function Gallery(p: GalleryProps) {
       )}
       {full[0] && (
         <Portal>
-          <div className="tf-lightbox" role="dialog" aria-modal="true" aria-label={t.images}>
-            <IconButton
-              icon="x"
-              label={t.close}
-              className="tf-lightbox-close"
-              onClick={() => {
-                full[1](false);
-              }}
-            />
+          <div
+            ref={attachBox}
+            className="tf-lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label={p.label || t.images}
+          >
+            <IconButton icon="x" label={t.close} className="tf-lightbox-close" onClick={close} />
             <div className="tf-lightbox-stage">
               {pic(cur, "tf-gallery-img", "eager")}
               {n > 1 && (
@@ -268,9 +333,10 @@ export function BeforeAfter(p: BeforeAfterProps) {
   return (
     <div
       ref={ref}
-      className="tf-ba"
+      className={cx("tf-ba", p.className)}
       style={{
         aspectRatio: p.ratio || "3 / 2",
+        ...p.style,
       }}
       onPointerDown={(e) => {
         drag.current = true;
@@ -283,6 +349,12 @@ export function BeforeAfter(p: BeforeAfterProps) {
       onPointerUp={() => {
         drag.current = false;
       }}
+      onPointerCancel={() => {
+        drag.current = false;
+      }}
+      onLostPointerCapture={() => {
+        drag.current = false;
+      }}
     >
       {pane(p.after, "tf-ba-img")}
       <div