@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/TableControls.js

@@ -2,12 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { placeId, sameOrder, useRowDrag } from "../reorder.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
+import { DatePicker } from "./DatePicker.js";
 import { EditorIcon } from "./EditorIcons.js";
+import { StarIcon } from "../icons/components.js";
 import { Input } from "./Input.js";
 import { Popover } from "./Popover.js";
 import { Segmented, SegmentedOption } from "./Segmented.js";
+import { Select } from "./Select.js";
 import { Switch } from "./Switch.js";
 const VIEW_MENU_COLUMN_LABELS = {
   rowActions: "Column actions: {label}",
@@ -170,7 +174,7 @@ function ViewMenu({
     if (el && document.activeElement !== el) el.focus();
   });
   const commit = (next, id) => {
-    setDraft(next);
+    setDraft(null);
     onReorder?.([...next]);
     const column = byId.get(id);
     if (column) setAnnouncement(fill(labels.moved, { label: columnText(column), position: next.indexOf(id) + 1, count: next.length }));
@@ -190,6 +194,11 @@ function ViewMenu({
       const start = dragStart.current;
       dragStart.current = null;
       if (start && !sameOrder(start, order)) commit(order, id);
+      else setDraft(null);
+    },
+    cancel: () => {
+      dragStart.current = null;
+      setDraft(null);
     }
   });
   const rowActions = (column, index) => [
@@ -288,7 +297,7 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
   return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover", children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
       /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: controlId, children: label }),
-      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ jsx("select", { id: controlId, className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ jsx(Input, { id: controlId, type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
+      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ jsx(Select, { id: controlId, value, options: options ?? [], onValueChange: (next) => onValueChange(next) }) : type === "date" ? /* @__PURE__ */ jsx(DatePicker, { id: controlId, value: value || null, placeholder, onValueChange: (next) => onValueChange(next ?? "") }) : /* @__PURE__ */ jsx(Input, { id: controlId, type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
       /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClear, children: clearLabel }),
@@ -296,60 +305,6 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
     ] })
   ] });
 }
-const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
-function dropIndex(rows, dragged, clientY) {
-  let index = 0;
-  for (const row of rows) {
-    if (row === dragged) continue;
-    const box = row.getBoundingClientRect();
-    if (clientY > box.top + box.height / 2) index++;
-  }
-  return index;
-}
-function useRowDrag(rowSelector, handlers) {
-  const [dragging, setDragging] = useState(null);
-  const drag = useRef(null);
-  const latest = useRef(handlers);
-  latest.current = handlers;
-  useEffect(() => {
-    if (!dragging) return;
-    const move = (event) => {
-      const current = drag.current;
-      if (!current) return;
-      latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
-    };
-    const end = () => {
-      const current = drag.current;
-      drag.current = null;
-      setDragging(null);
-      if (current) latest.current.drop(current.id);
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", end);
-    window.addEventListener("pointercancel", end);
-    return () => {
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", end);
-      window.removeEventListener("pointercancel", end);
-    };
-  }, [dragging, rowSelector]);
-  const start = (event, id) => {
-    const row = event.currentTarget.closest("li");
-    if (!row?.parentElement) return;
-    event.currentTarget.setPointerCapture?.(event.pointerId);
-    drag.current = { id, list: row.parentElement, row };
-    setDragging(id);
-  };
-  return { dragging, start };
-}
-function placeId(ids, id, index) {
-  const from = ids.indexOf(id);
-  const to = Math.max(0, Math.min(index, ids.length - 1));
-  if (from < 0 || from === to) return ids;
-  const next = ids.filter((other) => other !== id);
-  next.splice(to, 0, id);
-  return next;
-}
 function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }) {
   const baseId = useId();
   const groups = sections ?? [{ id: void 0, items: items ?? [] }];
@@ -363,7 +318,7 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
     const current = orderOf(group);
     const next = placeId(current, id, current.indexOf(id) + delta);
     if (next === current) return;
-    setDraft({ group: group.id, ids: next });
+    setDraft(null);
     onReorder?.([...next], group.id);
   };
   const { dragging, start: startDrag } = useRowDrag(".uix-saved-views__row", {
@@ -380,7 +335,12 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
       dragStart.current = null;
       if (!group) return;
       const end = orderOf(group);
+      setDraft(null);
       if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
+    },
+    cancel: () => {
+      dragStart.current = null;
+      setDraft(null);
     }
   });
   const visible = groups.filter((group) => group.items.length > 0);
@@ -415,7 +375,7 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
           }
         ),
         /* @__PURE__ */ jsx("button", { type: "button", id: nameId, className: "uix-menu__item", "data-active": item.active || void 0, "aria-current": item.active || void 0, title: typeof item.label === "string" ? item.label : void 0, onClick: () => onSelect(item.id), children: /* @__PURE__ */ jsx("span", { className: "uix-saved-views__name", children: item.label }) }),
-        onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
+        onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: /* @__PURE__ */ jsx(StarIcon, {}) }),
         extra != null && extra !== false && /* @__PURE__ */ jsx("span", { className: "uix-saved-views__actions", children: extra })
       ] }, item.id);
     });

package/dist/components/TableOverflowProbe.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+/**
+ * Measures whether a `TableWrap`'s table is wider than the wrap and writes it to the wrap as
+ * `data-overflow="true" | "false"`, so frozen columns draw their dividers only where rows can
+ * scroll under them (PR #168 review). A hidden child, like BusyBar, so `TableWrap` itself stays a
+ * server component. Without ResizeObserver (or before it runs) there is no attribute and the
+ * dividers stay, as in plain HTML.
+ */
+declare function TableOverflowProbe(): react.JSX.Element;
+
+export { TableOverflowProbe };

package/dist/components/TableOverflowProbe.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+function TableOverflowProbe() {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const wrap = ref.current?.parentElement;
+    if (!wrap || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => {
+      const next = String(wrap.scrollWidth > wrap.clientWidth + 1);
+      if (wrap.getAttribute("data-overflow") !== next) wrap.setAttribute("data-overflow", next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    const table = wrap.querySelector("table");
+    if (table) observer.observe(table);
+    return () => {
+      observer.disconnect();
+      wrap.removeAttribute("data-overflow");
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("span", { ref, hidden: true });
+}
+export {
+  TableOverflowProbe
+};

package/dist/components/Tabs.d.ts

@@ -13,7 +13,8 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'r
     children?: ReactNode;
     className?: string;
     /**
-     * What happens when the tabs don't fit. `'wrap'` (default) keeps today's layout.
+     * What happens when the tabs don't fit. `'wrap'` (default): the tab row wraps onto more rows,
+     * and no tab is wider than its row, so one long label wraps inside its tab (HAR-1754).
      * `'scroll'` keeps one row that scrolls sideways, with pointer-only edge buttons
      * shown on the side that has hidden tabs. The selected tab is always scrolled into view.
      */

package/dist/components/Tabs.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { useSlidingIndicator } from "../hooks/useSlidingIndicator.js";
 const TabsCtx = createContext({});
 const Chevron = ({ d }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
 const inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
@@ -18,6 +19,9 @@ function Tabs({
 }) {
   const baseId = useId();
   const listRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const sliding = variant !== "enclosed";
+  useSlidingIndicator(listRef, indicatorRef, sliding ? '[role="tab"][aria-selected="true"]' : ":not(*)");
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
   const scroll = overflow === "scroll";
   const [hidden, setHidden] = useState({ start: false, end: false });
@@ -101,7 +105,7 @@ function Tabs({
     target.focus();
     if (activation === "automatic") target.click();
   };
-  const list = /* @__PURE__ */ jsx(
+  const list = /* @__PURE__ */ jsxs(
     "div",
     {
       ...listProps,
@@ -109,7 +113,10 @@ function Tabs({
       role: "tablist",
       className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),
       onKeyDown,
-      children: tabs
+      children: [
+        tabs,
+        sliding && /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "uix-tabs__indicator", "aria-hidden": "true", hidden: true })
+      ]
     }
   );
   return /* @__PURE__ */ jsxs(TabsCtx.Provider, { value: contextValue, children: [
@@ -151,6 +158,7 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       role: "tab",
       id: ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
       "aria-controls": ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,

package/dist/components/TagInput.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { AriaAttributes } from 'react';
+
+/** Every word `TagInput` renders or announces. */
+interface TagInputLabels {
+    /** Name of a chip's × button; `{tag}`. */
+    remove: string;
+    /** Announced after a tag was added; `{tag}`. */
+    added: string;
+    /** Announced after a tag was removed; `{tag}`. */
+    removed: string;
+    /** Shown when the tag is already there; `{tag}`. */
+    duplicate: string;
+    /** Shown when `maxTags` are there; `{max}`. */
+    max: string;
+    /** Name of the suggestion list. */
+    suggestions: string;
+    /** Name of the list of chips. */
+    list: string;
+    /** Part of the field's description: how many tags there are; `{count}`. */
+    count: string;
+}
+declare const DEFAULT_TAG_INPUT_LABELS: TagInputLabels;
+interface TagInputProps {
+    /** The tags, in order. */
+    value: readonly string[];
+    onValueChange: (value: string[]) => void;
+    /** Offered while typing (those already added are left out); ArrowDown reaches them. */
+    suggestions?: readonly string[];
+    /**
+     * Check a tag before it is added: return a message to refuse it (shown under the field), or
+     * `null` to accept it. Runs after the duplicate and `maxTags` checks.
+     */
+    validate?: (tag: string, value: readonly string[]) => string | null | undefined;
+    /** The most tags; past it, adding is refused with the `max` message. */
+    maxTags?: number;
+    /** Keys that add the typed text. Default Enter and comma. */
+    separators?: readonly string[];
+    /** Submits each tag as its own value under this name (hidden inputs). */
+    name?: string;
+    /** Lands on the text input, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-required'?: AriaAttributes['aria-required'];
+    /** Translatable words; English defaults in {@link DEFAULT_TAG_INPUT_LABELS}. */
+    labels?: Partial<TagInputLabels>;
+    className?: string;
+}
+/**
+ * Several short tags in one field (HAR-1377): type and press Enter (or a comma) to add a chip;
+ * pasting "a, b, c" adds three. A duplicate (ignoring case and accents), a refusal from `validate`
+ * or one past `maxTags` keeps the text and says why. Suggestions open under the field as a
+ * top-layer list once the person types (or presses ArrowDown): ArrowDown / ArrowUp move, Enter adds
+ * the active one, Escape closes it. Backspace in the empty field
+ * goes to the last chip; ArrowLeft / ArrowRight move between chips and back to the field;
+ * Backspace or Delete on a chip removes it. Each change is announced politely. Works in `Field`
+ * (the text input gets the label, hint and error) and submits each tag under `name`.
+ */
+declare function TagInput({ value, onValueChange, suggestions, validate, maxTags, separators, name, id: idProp, placeholder, disabled, invalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, labels: labelOverrides, className, }: TagInputProps): react.JSX.Element;
+
+export { DEFAULT_TAG_INPUT_LABELS, TagInput, type TagInputLabels, type TagInputProps };

package/dist/components/TagInput.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useAnchoredPosition, zoomOf } from "../hooks/useAnchoredPosition.js";
+import { XIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import { foldForSearch } from "../search-suggest-model.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const DEFAULT_TAG_INPUT_LABELS = {
+  remove: "Remove {tag}",
+  added: "{tag} added.",
+  removed: "{tag} removed.",
+  duplicate: "{tag} is already added.",
+  max: "You can add up to {max}.",
+  suggestions: "Suggestions",
+  list: "Tags",
+  count: "{count} added"
+};
+const same = (a, b) => foldForSearch(a).text === foldForSearch(b).text;
+function TagInput({
+  value,
+  onValueChange,
+  suggestions,
+  validate,
+  maxTags,
+  separators = ["Enter", ","],
+  name,
+  id: idProp,
+  placeholder,
+  disabled,
+  invalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_TAG_INPUT_LABELS, ...useUixLabels().tagInput, ...labelOverrides };
+  const uid = useId();
+  const id = idProp ?? `${uid}-input`;
+  const listId = `${uid}-suggestions`;
+  const messageId = `${uid}-message`;
+  const optionId = (index) => `${listId}-${index}`;
+  const boxRef = useRef(null);
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+  const chipRefs = useRef([]);
+  const [text, setText] = useState("");
+  const [message, setMessage] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const [focusChip, setFocusChip] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const matches = useMemo(() => {
+    if (!suggestions?.length) return [];
+    const needle = foldForSearch(text.trim()).text;
+    return suggestions.filter((s) => !value.some((v) => same(v, s)) && (!needle || foldForSearch(s).text.includes(needle))).slice(0, 50);
+  }, [suggestions, text, value]);
+  const showing = open && matches.length > 0 && !disabled;
+  const refuse = (reason) => {
+    setMessage(reason);
+    setAnnouncement(reason);
+  };
+  const add = (raw) => {
+    let next = [...value];
+    const added = [];
+    let refusedAt = -1;
+    let reason = "";
+    for (let i = 0; i < raw.length; i += 1) {
+      const tag = raw[i].trim();
+      if (!tag) continue;
+      if (next.some((v) => same(v, tag))) reason = fillLabel(labels.duplicate, { tag });
+      else if (maxTags != null && next.length >= maxTags) reason = fillLabel(labels.max, { max: maxTags });
+      else reason = validate?.(tag, next) || "";
+      if (reason) {
+        refusedAt = i;
+        break;
+      }
+      next = [...next, tag];
+      added.push(tag);
+    }
+    if (added.length) {
+      setOpen(false);
+      setAnnouncement(fillLabel(labels.added, { tag: added.join(", ") }));
+      onValueChange(next);
+    }
+    if (refusedAt < 0) {
+      setMessage(null);
+      return "";
+    }
+    refuse(reason);
+    const joiner = separators.includes(",") ? ", " : " ";
+    return raw.slice(refusedAt).map((piece) => piece.trim()).filter(Boolean).join(joiner);
+  };
+  const remove = (index) => {
+    const tag = value[index];
+    if (tag == null || disabled) return;
+    onValueChange(value.filter((_, i) => i !== index));
+    setMessage(null);
+    setAnnouncement(fillLabel(labels.removed, { tag }));
+    setFocusChip(index > 0 ? index - 1 : null);
+    if (index === 0) inputRef.current?.focus();
+  };
+  useEffect(() => {
+    if (focusChip == null) return;
+    const chip = chipRefs.current[focusChip];
+    if (chip) chip.focus();
+    else inputRef.current?.focus();
+    setFocusChip(null);
+  }, [focusChip, value]);
+  const commitText = (extra = []) => {
+    setText(add([text, ...extra]));
+    setActive(-1);
+  };
+  const onInputKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const { key } = event;
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      if (!matches.length) return;
+      event.preventDefault();
+      if (!showing) {
+        setOpen(true);
+        setActive(key === "ArrowDown" ? 0 : matches.length - 1);
+        return;
+      }
+      setActive((i) => i < 0 ? key === "ArrowDown" ? 0 : matches.length - 1 : Math.max(0, Math.min(matches.length - 1, i + (key === "ArrowDown" ? 1 : -1))));
+      return;
+    }
+    if (key === "Escape" && showing) {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      setActive(-1);
+      return;
+    }
+    if (separators.includes(key)) {
+      if (key === "Enter" && showing && active >= 0) {
+        event.preventDefault();
+        if (!add([matches[active]])) {
+          setText("");
+          setActive(-1);
+        }
+        return;
+      }
+      if (key === "Enter" && !text.trim()) return;
+      event.preventDefault();
+      commitText();
+      return;
+    }
+    const caretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+    if (key === "Backspace" && !text || key === "ArrowLeft" && caretAtStart) {
+      if (!value.length) return;
+      event.preventDefault();
+      setOpen(false);
+      chipRefs.current[value.length - 1]?.focus();
+    }
+  };
+  const onChipKeyDown = (event, index) => {
+    const { key } = event;
+    if (key === "Backspace" || key === "Delete") {
+      event.preventDefault();
+      remove(index);
+      return;
+    }
+    if (key === "ArrowLeft") {
+      event.preventDefault();
+      chipRefs.current[Math.max(0, index - 1)]?.focus();
+      return;
+    }
+    if (key === "ArrowRight") {
+      event.preventDefault();
+      if (index < value.length - 1) chipRefs.current[index + 1]?.focus();
+      else inputRef.current?.focus();
+      return;
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+  const onPaste = (event) => {
+    const pasted = event.clipboardData?.getData("text") ?? "";
+    const chars = separators.filter((s) => s.length === 1).map((s) => s.replace(/[\\^\]-]/g, "\\$&")).join("");
+    const split = new RegExp(`[\\n\\r${chars}]+`);
+    if (!split.test(pasted)) return;
+    event.preventDefault();
+    const pieces = pasted.split(split);
+    setText(add([`${text}${pieces[0] ?? ""}`, ...pieces.slice(1)]));
+  };
+  useIsomorphicLayoutEffect(() => {
+    const popup = popupRef.current;
+    const box = boxRef.current;
+    if (!popup || !box) return;
+    const isOpen = () => {
+      try {
+        return popup.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (showing) {
+      const zoom = zoomOf(box);
+      popup.style.minWidth = `${Math.round(box.getBoundingClientRect().width / zoom)}px`;
+      try {
+        if (!isOpen()) popup.showPopover();
+      } catch {
+      }
+    } else {
+      try {
+        if (isOpen()) popup.hidePopover();
+      } catch {
+      }
+    }
+  }, [showing]);
+  useAnchoredPosition(boxRef, popupRef, { open: showing, placement: "bottom-start", offset: 4, padding: 8 });
+  useIsomorphicLayoutEffect(() => {
+    if (!showing || active < 0) return;
+    popupRef.current?.ownerDocument.getElementById(optionId(active))?.scrollIntoView?.({ block: "nearest" });
+  }, [showing, active]);
+  const isInvalid = !!invalid || ariaInvalid === true || ariaInvalid === "true";
+  const countId = `${uid}-count`;
+  const describedBy = [ariaDescribedBy, message ? messageId : void 0, value.length ? countId : void 0].filter(Boolean).join(" ") || void 0;
+  const popoverAttr = { popover: "manual" };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-taginput-field", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: boxRef,
+        className: "uix-taginput",
+        "data-invalid": isInvalid || void 0,
+        "data-disabled": disabled || void 0,
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) {
+            event.preventDefault();
+            inputRef.current?.focus();
+          }
+        },
+        onBlur: (event) => {
+          if (!boxRef.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+            setActive(-1);
+          }
+        },
+        children: [
+          value.length > 0 && /* @__PURE__ */ jsx("span", { role: "list", "aria-label": labels.list, className: "uix-taginput__tags", children: value.map((tag, index) => /* @__PURE__ */ jsxs("span", { className: "uix-tag", role: "listitem", children: [
+            tag,
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (el) => {
+                  chipRefs.current[index] = el;
+                },
+                type: "button",
+                className: "uix-tag__remove",
+                tabIndex: -1,
+                "aria-label": fillLabel(labels.remove, { tag }),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => remove(index),
+                onKeyDown: (event) => onChipKeyDown(event, index),
+                children: /* @__PURE__ */ jsx(XIcon, {})
+              }
+            )
+          ] }, `${tag}-${index}`)) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              className: "uix-taginput__field",
+              type: "text",
+              role: suggestions ? "combobox" : void 0,
+              "aria-autocomplete": suggestions ? "list" : void 0,
+              "aria-expanded": suggestions ? showing : void 0,
+              "aria-controls": suggestions ? listId : void 0,
+              "aria-activedescendant": showing && active >= 0 ? optionId(active) : void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": describedBy,
+              "aria-invalid": isInvalid || !!message || void 0,
+              "aria-required": ariaRequired,
+              autoComplete: "off",
+              spellCheck: false,
+              enterKeyHint: "enter",
+              placeholder,
+              disabled,
+              value: text,
+              onChange: (event) => {
+                const next = event.target.value;
+                if (separators.includes(",") && next.includes(",")) {
+                  const pieces = next.split(",");
+                  if (!add([pieces[0]])) setText(pieces.slice(1).join(",").trimStart());
+                  else setText(next.replace(/,/g, ""));
+                  return;
+                }
+                setText(next);
+                if (message) setMessage(null);
+                setOpen(next.trim().length > 0);
+                setActive(-1);
+              },
+              onKeyDown: onInputKeyDown,
+              onPaste
+            }
+          )
+        ]
+      }
+    ),
+    name && value.map((tag, index) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tag, disabled }, `${tag}-${index}`)),
+    message && /* @__PURE__ */ jsx("span", { id: messageId, className: "uix-field__warning uix-taginput__message", children: message }),
+    value.length > 0 && /* @__PURE__ */ jsx("span", { id: countId, className: "uix-visually-hidden", children: fillLabel(labels.count, { count: value.length }) }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement }),
+    suggestions && /* @__PURE__ */ jsx("div", { ref: popupRef, className: "uix-select__popup uix-taginput__popup", hidden: !showing, ...popoverAttr, onMouseDown: (event) => event.preventDefault(), children: /* @__PURE__ */ jsx("div", { id: listId, role: "listbox", "aria-label": labels.suggestions, className: "uix-listbox uix-select__listbox", children: matches.map((suggestion, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: optionId(index),
+        role: "option",
+        "aria-selected": index === active,
+        className: "uix-listbox__option",
+        "data-active": index === active || void 0,
+        onPointerMove: () => {
+          if (index !== active) setActive(index);
+        },
+        onClick: () => {
+          if (!add([suggestion])) {
+            setText("");
+            setActive(-1);
+          }
+          inputRef.current?.focus();
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "uix-listbox__label", children: suggestion })
+      },
+      suggestion
+    )) }) })
+  ] });
+}
+export {
+  DEFAULT_TAG_INPUT_LABELS,
+  TagInput
+};

package/dist/components/Textarea.d.ts

@@ -3,6 +3,11 @@ import { TextareaHTMLAttributes } from 'react';
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     invalid?: boolean;
+    /**
+     * `lg`: the public-page size beside `Input size="lg"` and `Button size="lg"` (HAR-1812): larger
+     * text and padding, never shorter than 44 px. It still grows with `rows` and the resize handle.
+     */
+    size?: 'md' | 'lg';
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/components/Textarea.js

@@ -2,11 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
 const Textarea = forwardRef(
-  ({ invalid, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ invalid, size = "md", className, ...props }, ref) => /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
-      className: cx("uix-textarea", className),
+      className: cx("uix-textarea", size === "lg" && "uix-textarea--lg", className),
       "aria-invalid": invalid || void 0,
       ...props
     }