@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/mention-input.js

@@ -0,0 +1,503 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { css, cx } from "#primitives/css";
+import { formatMention, parseMentions } from "../chat/contract.js";
+import { useCiridaeLocale } from "./locale.js";
+/** A value's text with each mention as its label, and the mentions in it in order. */
+export function readMentions(value) {
+    const parts = parseMentions(value);
+    return {
+        text: parts.map((part) => (typeof part === "string" ? part : part.label)).join(""),
+        mentions: parts.filter((part) => typeof part !== "string"),
+    };
+}
+/**
+ * Types a trigger at a `MentionInput`'s caret, after a space when it follows a word, so its
+ * picker opens there; for a toolbar button such as Tag. Keep the input focused by preventing
+ * the button's `mousedown`, or the trigger goes in at the end.
+ */
+export function openMentionPicker(input, char) {
+    if (!input)
+        return;
+    input.focus();
+    const selection = getSelection();
+    const node = selection?.focusNode;
+    const before = node && node.nodeType === Node.TEXT_NODE
+        ? (node.textContent ?? "").slice(0, selection.focusOffset)
+        : "";
+    insertText(before === "" || /\s$/.test(before) ? char : ` ${char}`);
+}
+/*
+ * A mention in the field or in a posted message: an inline label on a quiet chip, led by its
+ * mark. It stays inline, so its edge and padding never make its line taller than the text's.
+ */
+export const mentionChip = css({
+    display: "inline",
+    paddingBlock: "1px",
+    paddingInline: "control.trackInset",
+    marginInline: "1px",
+    // Tinted from the text it sits in, so it reads on the field and on either side's bubble.
+    border: "1px solid color-mix(in srgb, currentColor 16%, transparent)",
+    borderRadius: "control",
+    background: "color-mix(in srgb, currentColor 7%, transparent)",
+    color: "inherit",
+    fontWeight: "medium",
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    boxDecorationBreak: "clone",
+    cursor: "default",
+    userSelect: "all",
+    "& > [data-mark]": {
+        display: "inline-flex",
+        verticalAlign: "-0.125em",
+        marginInlineEnd: "control.trackInset",
+        opacity: "0.7",
+        "& > svg": { fontSize: "icon.compact" },
+    },
+    "& > [data-mark]:empty": { display: "none" },
+    "&[href]": {
+        cursor: "pointer",
+        _hover: { background: "color-mix(in srgb, currentColor 12%, transparent)" },
+    },
+    _focusVisible: { focusRing: "outer" },
+});
+/** A mention as a chip outside the field, such as in a posted comment; a link with `href`. */
+export function MentionChip({ mention, mark, href, }) {
+    const content = (_jsxs(_Fragment, { children: [mark && (_jsx("span", { "data-mark": "", "aria-hidden": "true", children: mark })), mention.label] }));
+    return href ? (_jsx("a", { className: mentionChip, href: href, "data-mention": "", children: content })) : (_jsx("span", { className: mentionChip, "data-mention": "", children: content }));
+}
+function mentionOf(node) {
+    if (!(node instanceof HTMLElement))
+        return null;
+    const { mentionId: id, mentionKind: kind, mentionLabel: label } = node.dataset;
+    return id && kind && label ? { id, kind, label } : null;
+}
+function chipElement(mention) {
+    const chip = document.createElement("span");
+    chip.className = mentionChip;
+    chip.contentEditable = "false";
+    chip.dataset.mentionId = mention.id;
+    chip.dataset.mentionKind = mention.kind;
+    chip.dataset.mentionLabel = mention.label;
+    const mark = document.createElement("span");
+    mark.dataset.mark = "";
+    mark.setAttribute("aria-hidden", "true");
+    chip.append(mark, mention.label);
+    return chip;
+}
+/** The text and mentions under a node: line breaks as `\n`, a block a browser added as a line. */
+function readParts(root) {
+    const parts = [];
+    const walk = (node) => {
+        for (const child of node.childNodes) {
+            if (child.nodeType === Node.TEXT_NODE) {
+                parts.push((child.textContent ?? "").replace(/\xa0/g, " "));
+                continue;
+            }
+            if (child.nodeName === "BR") {
+                parts.push("\n");
+                continue;
+            }
+            const mention = mentionOf(child);
+            if (mention) {
+                parts.push(mention);
+                continue;
+            }
+            const last = parts[parts.length - 1];
+            if (/^(?:DIV|P|LI)$/.test(child.nodeName) && typeof last === "string" && !last.endsWith("\n"))
+                parts.push("\n");
+            walk(child);
+        }
+    };
+    walk(root);
+    return parts;
+}
+function serialize(parts) {
+    return parts.map((part) => (typeof part === "string" ? part : formatMention(part))).join("");
+}
+/** The field's value: a line break at the very end draws no line, so it is not part of it. */
+function readValue(root) {
+    return serialize(readParts(root)).replace(/\n$/, "");
+}
+/** Only text, line breaks and chips: what `renderValue` draws, so nothing needs redrawing. */
+function isClean(root) {
+    return Array.from(root.childNodes).every((child) => child.nodeType === Node.TEXT_NODE || child.nodeName === "BR" || mentionOf(child) !== null);
+}
+function renderValue(root, value) {
+    const nodes = parseMentions(value).map((part) => typeof part === "string" ? document.createTextNode(part) : chipElement(part));
+    // A last line break only draws its line with another after it.
+    if (value.endsWith("\n"))
+        nodes.push(document.createTextNode("\n"));
+    root.replaceChildren(...nodes);
+}
+/** How far a point sits from the field's start, a chip counting as one character. */
+function caretUnits(root, node, offset) {
+    const range = document.createRange();
+    range.setStart(root, 0);
+    range.setEnd(node, offset);
+    return readParts(range.cloneContents()).reduce((sum, part) => sum + (typeof part === "string" ? part.length : 1), 0);
+}
+function placeCaret(root, units) {
+    const range = document.createRange();
+    range.selectNodeContents(root);
+    range.collapse(false);
+    let left = units;
+    for (const child of root.childNodes) {
+        const isText = child.nodeType === Node.TEXT_NODE;
+        const length = isText ? (child.textContent ?? "").length : 1;
+        if (isText && left <= length) {
+            range.setStart(child, left);
+            range.collapse(true);
+            break;
+        }
+        if (left === 0) {
+            range.setStartBefore(child);
+            range.collapse(true);
+            break;
+        }
+        left -= length;
+    }
+    const selection = getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function valueHtml(value) {
+    return parseMentions(value)
+        .map((part) => (typeof part === "string" ? escapeHtml(part) : chipElement(part).outerHTML))
+        .join("");
+}
+/* `execCommand` is deprecated but still the only edit that joins the browser's undo stack. */
+function insertText(text) {
+    document.execCommand("insertText", false, text);
+}
+function insertHtml(html) {
+    document.execCommand("insertHTML", false, html);
+}
+function escapeRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&");
+}
+function findPicking(root, triggers) {
+    const selection = getSelection();
+    const node = selection?.focusNode;
+    if (!selection?.isCollapsed || !node || node.nodeType !== Node.TEXT_NODE)
+        return null;
+    if (node.parentNode !== root || triggers.length === 0)
+        return null;
+    // The run of text before the caret, back to a chip, a line break or the start.
+    const runs = [];
+    for (let current = node; current?.nodeType === Node.TEXT_NODE; current = current.previousSibling) {
+        const text = current.textContent ?? "";
+        runs.unshift({
+            node: current,
+            text: current === node ? text.slice(0, selection.focusOffset) : text,
+        });
+    }
+    const chars = triggers.map((trigger) => escapeRegExp(trigger.char)).join("");
+    const match = new RegExp(`(?:^|\\s)([${chars}])([^\\s${chars}]*)$`).exec(runs.map((run) => run.text).join(""));
+    const trigger = match && triggers.find((candidate) => candidate.char === match[1]);
+    if (!match || !trigger)
+        return null;
+    const query = match[2] ?? "";
+    let offset = runs.reduce((sum, run) => sum + run.text.length, 0) - query.length - 1;
+    const anchor = document.createRange();
+    for (const run of runs) {
+        if (offset < run.text.length) {
+            anchor.setStart(run.node, offset);
+            anchor.setEnd(run.node, offset + 1);
+            break;
+        }
+        offset -= run.text.length;
+    }
+    return {
+        trigger,
+        query,
+        at: caretUnits(root, anchor.startContainer, anchor.startOffset),
+        anchor,
+    };
+}
+const field = css({
+    position: "relative",
+    minWidth: "0",
+    overflowY: "auto",
+    outline: "0",
+    color: "fg.primary",
+    fontFamily: "sans",
+    textAlign: "start",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    cursor: "text",
+    "&[data-empty]::before": {
+        content: "attr(aria-placeholder)",
+        position: "absolute",
+        inset: "0",
+        padding: "inherit",
+        overflow: "hidden",
+        color: "fg.muted",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        pointerEvents: "none",
+    },
+    "&[aria-disabled=true]": { cursor: "default", opacity: "0.5" },
+});
+/* The picker: a flush menu over the caret, its rows edge to edge. */
+const picker = css({
+    zIndex: "popover",
+    display: "grid",
+    minWidth: "overlay.menu",
+    maxWidth: "min(token(sizes.overlay.popover), calc(100vw - 2 * token(spacing.layout.controlGap)))",
+    maxHeight: "search.dropdownPreview",
+    overflowY: "auto",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.card",
+    color: "fg.primary",
+    boxShadow: "card",
+    outline: "none",
+});
+const pickerRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "menu.item",
+    paddingInline: "control.compactInline",
+    fontSize: "caption",
+    lineHeight: "body",
+    cursor: "pointer",
+    "&[aria-selected=true]": { background: "bg.rowHover" },
+    "& > [data-mark]": { display: "inline-flex", flexShrink: "0", color: "fg.muted" },
+    "& > [data-mark] > svg": { fontSize: "icon.small" },
+    "& > [data-label]": {
+        flex: "1",
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& > [data-detail]": { flexShrink: "0", color: "fg.muted", fontSize: "code" },
+});
+const pickerEmpty = css({
+    paddingInline: "control.compactInline",
+    paddingBlock: "control.compactBlock",
+    color: "fg.muted",
+    fontSize: "caption",
+});
+/** Copied mentions keep their markup for a paste back into a field; other apps get the labels. */
+const mentionMime = "text/x-ciridae-mentions";
+export function MentionInput({ value, onValueChange, triggers = [], mentionMark, placeholder, submitOn = "enter", onSubmit, disabled = false, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const rootRef = useRef(null);
+    const setRoot = useCallback((element) => {
+        rootRef.current = element;
+        if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element;
+    }, [ref]);
+    /** The value the DOM shows, so an echo of it is not drawn again. */
+    const shown = useRef(null);
+    const composing = useRef(false);
+    const pointerFocus = useRef(false);
+    const [chips, setChips] = useState([]);
+    const chipKeys = useRef({ next: 0, byChip: new WeakMap() });
+    const [picking, setPicking] = useState(null);
+    const [dismissedAt, setDismissedAt] = useState(null);
+    const [active, setActive] = useState(0);
+    const listId = useId();
+    const open = picking !== null && picking.at !== dismissedAt;
+    const options = open ? picking.trigger.options(picking.query) : [];
+    const activeIndex = Math.min(active, Math.max(0, options.length - 1));
+    const activeOption = options[activeIndex];
+    const optionId = (index) => `${listId}-${index}`;
+    const refreshChips = () => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const next = Array.from(root.querySelectorAll("[data-mention-id]"));
+        setChips((current) => current.length === next.length && current.every((chip, index) => chip === next[index])
+            ? current
+            : next);
+    };
+    const refreshPicking = () => {
+        const root = rootRef.current;
+        const next = root && document.activeElement === root && !composing.current
+            ? findPicking(root, triggers)
+            : null;
+        setPicking((current) => {
+            if (current?.at !== next?.at || current?.query !== next?.query)
+                setActive(0);
+            return next;
+        });
+    };
+    const triggersRef = useRef(triggers);
+    triggersRef.current = triggers;
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root || value === shown.current)
+            return;
+        const focused = document.activeElement === root;
+        renderValue(root, value);
+        shown.current = value;
+        refreshChips();
+        if (focused)
+            placeCaret(root, Number.POSITIVE_INFINITY);
+    });
+    useEffect(() => {
+        if (autoFocus)
+            rootRef.current?.focus();
+    }, [autoFocus]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        // A paragraph would wrap the line in a block: a line break keeps the field flat text.
+        const beforeInput = (event) => {
+            if (event.inputType === "insertParagraph") {
+                event.preventDefault();
+                document.execCommand("insertLineBreak");
+            }
+            else if (event.inputType.startsWith("format"))
+                event.preventDefault();
+        };
+        const selectionChange = () => {
+            if (document.activeElement !== root)
+                return;
+            const next = findPicking(root, triggersRef.current);
+            setPicking((current) => current?.at === next?.at && current?.query === next?.query ? current : next);
+        };
+        root.addEventListener("beforeinput", beforeInput);
+        document.addEventListener("selectionchange", selectionChange);
+        return () => {
+            root.removeEventListener("beforeinput", beforeInput);
+            document.removeEventListener("selectionchange", selectionChange);
+        };
+    }, []);
+    const sync = () => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const next = readValue(root);
+        if (!composing.current && !isClean(root)) {
+            const selection = getSelection();
+            const focus = selection?.focusNode;
+            const units = focus && root.contains(focus)
+                ? caretUnits(root, focus, selection.focusOffset)
+                : Number.POSITIVE_INFINITY;
+            renderValue(root, next);
+            placeCaret(root, units);
+        }
+        refreshChips();
+        if (next !== shown.current) {
+            shown.current = next;
+            onValueChange(next);
+        }
+        refreshPicking();
+    };
+    const pick = (option) => {
+        const root = rootRef.current;
+        const current = root && findPicking(root, triggers);
+        const selection = getSelection();
+        if (!root || !current || !selection?.focusNode)
+            return;
+        const range = document.createRange();
+        range.setStart(current.anchor.startContainer, current.anchor.startOffset);
+        range.setEnd(selection.focusNode, selection.focusOffset);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        insertHtml(`${chipElement(option).outerHTML} `);
+    };
+    const keyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.nativeEvent.isComposing)
+            return;
+        if (open) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                const step = event.key === "ArrowDown" ? 1 : -1;
+                setActive((activeIndex + step + options.length) % Math.max(1, options.length));
+                return;
+            }
+            if ((event.key === "Enter" || event.key === "Tab") && activeOption) {
+                event.preventDefault();
+                pick(activeOption);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                setDismissedAt(picking.at);
+                return;
+            }
+        }
+        if (event.key !== "Enter")
+            return;
+        const submits = submitOn === "enter" ? !event.shiftKey : event.metaKey || event.ctrlKey;
+        if (!submits)
+            return;
+        event.preventDefault();
+        onSubmit?.();
+    };
+    const copy = (event) => {
+        const selection = getSelection();
+        if (!selection || selection.isCollapsed || selection.rangeCount === 0)
+            return;
+        const copied = serialize(readParts(selection.getRangeAt(0).cloneContents()));
+        event.preventDefault();
+        event.clipboardData.setData("text/plain", readMentions(copied).text);
+        event.clipboardData.setData(mentionMime, copied);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...props, ref: setRoot, className: cx(field, className), contentEditable: !disabled, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "true", "aria-placeholder": placeholder, "aria-disabled": disabled || undefined, "aria-autocomplete": triggers.length > 0 ? "list" : undefined, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && activeOption ? optionId(activeIndex) : undefined, tabIndex: disabled ? -1 : 0, "data-ciridae-ui": "", "data-empty": value === "" || undefined, onInput: sync, onCompositionStart: () => {
+                    composing.current = true;
+                }, onCompositionEnd: () => {
+                    composing.current = false;
+                    sync();
+                }, onKeyDown: keyDown, onPaste: (event) => {
+                    event.preventDefault();
+                    const markup = event.clipboardData.getData(mentionMime);
+                    if (markup)
+                        insertHtml(valueHtml(markup));
+                    else
+                        insertText(event.clipboardData.getData("text/plain"));
+                }, onCopy: copy, onCut: (event) => {
+                    copy(event);
+                    if (event.defaultPrevented)
+                        document.execCommand("delete");
+                }, onPointerDown: (event) => {
+                    pointerFocus.current = true;
+                    onPointerDown?.(event);
+                }, onFocus: (event) => {
+                    // Focused from code or the keyboard, the caret goes after what is there.
+                    if (!pointerFocus.current)
+                        placeCaret(event.currentTarget, Number.POSITIVE_INFINITY);
+                    pointerFocus.current = false;
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setPicking(null);
+                    setDismissedAt(null);
+                    onBlur?.(event);
+                } }), mentionMark &&
+                chips.map((chip) => {
+                    const mention = mentionOf(chip);
+                    const slot = chip.querySelector("[data-mark]");
+                    if (!mention || !slot)
+                        return null;
+                    const keys = chipKeys.current;
+                    const key = keys.byChip.get(chip) ?? keys.next++;
+                    keys.byChip.set(chip, key);
+                    return createPortal(mentionMark(mention, "chip"), slot, String(key));
+                }), _jsx(BasePopover.Root, { open: open, onOpenChange: (next) => {
+                    if (!next && picking)
+                        setDismissedAt(picking.at);
+                }, children: _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { className: css({ zIndex: "popover" }), anchor: picking
+                            ? {
+                                getBoundingClientRect: () => picking.anchor.getBoundingClientRect(),
+                                contextElement: rootRef.current ?? undefined,
+                            }
+                            : undefined, side: "top", align: "start", sideOffset: 6, collisionPadding: 8, children: _jsx(BasePopover.Popup, { className: picker, "data-ciridae-ui": "", initialFocus: false, finalFocus: false, children: _jsx("div", { id: listId, role: "listbox", "aria-label": listLabel ?? labels.chat.mentions, children: options.length === 0 ? (_jsx("div", { className: pickerEmpty, children: labels.common.noMatches })) : (options.map((option, index) => (_jsxs("div", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, className: pickerRow, 
+                                    // Keeps focus and the caret in the field, so picking carries on typing.
+                                    onMouseDown: (event) => event.preventDefault(), onMouseMove: () => setActive(index), onClick: () => pick(option), children: [mentionMark && (_jsx("span", { "data-mark": "", "aria-hidden": "true", children: mentionMark(option, "option") })), _jsx("span", { "data-label": "", children: option.label }), option.detail && _jsx("span", { "data-detail": "", children: option.detail })] }, `${option.kind}/${option.id}`)))) }) }) }) }) })] }));
+}

package/dist/components/menu.d.ts

@@ -0,0 +1,76 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { type IconButtonProps } from "./button.js";
+import { type Hotkey } from "./hotkeys.js";
+import type { ComponentProps, ReactElement, ReactNode, Ref } from "react";
+export type MenuItem = {
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Its action is in progress: a spinner replaces the icon and the item is disabled. */
+    loading?: boolean;
+    /** `danger` renders in the error color, for irreversible actions. */
+    variant?: "default" | "danger";
+    /** Shows a check mark, for the active choice in a set. */
+    checked?: boolean;
+    /** Muted after the label, such as what a choice covers. */
+    meta?: string;
+    /** The hotkey that does what the item does, at the row's end; the host binds it. */
+    shortcut?: Hotkey;
+    onSelect?: () => void;
+    /** Makes the item a link to this address; it closes the menu as it navigates. */
+    href?: string;
+    /**
+     * The link element, such as a router's `<Link to="...">`; the item's content and
+     * behavior are merged onto it. Implies a link item.
+     */
+    render?: ReactElement;
+    items?: never;
+} | {
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Opens a submenu with these items. */
+    items: readonly MenuItem[];
+    loading?: never;
+    variant?: never;
+    checked?: never;
+    meta?: never;
+    shortcut?: never;
+    onSelect?: never;
+    href?: never;
+    render?: never;
+} | {
+    separator: true;
+}
+/** A non-interactive row, such as the signed-in account above its menu: a title, a muted line under it. */
+ | {
+    header: true;
+    label: string;
+    detail?: string;
+    icon?: ReactNode;
+}
+/** A muted heading over the items after it, naming what they choose between. */
+ | {
+    group: true;
+    label: string;
+};
+export type MenuProps = Omit<ComponentProps<typeof BaseMenu.Root>, "children"> & {
+    trigger: ReactElement;
+    items: readonly MenuItem[];
+    /** Which edge of the trigger the menu lines up with; `end` keeps a right-hand menu inside its container. */
+    align?: "start" | "end";
+};
+export declare function Menu({ trigger, items, align, ...rootProps }: MenuProps): import("@types/react").JSX.Element;
+export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
+    /** The button's accessible name, such as "Record actions" or "More for INV-4821". */
+    label: string;
+    size?: IconButtonProps["size"];
+    variant?: "raised" | "ghost";
+    /** Defaults to `end`, since the button usually closes a row. */
+    align?: MenuProps["align"];
+    disabled?: boolean;
+    /** The trigger button, such as to return focus to it. */
+    ref?: Ref<HTMLButtonElement>;
+};
+/** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
+export declare function OverflowMenu({ label, size, variant, align, disabled, ref, ...props }: OverflowMenuProps): import("@types/react").JSX.Element;