@ai-matrx/records-ui 0.102.15 → 0.102.16

package/dist/pickers.cjs

@@ -741,12 +741,12 @@ function PickOrAdd({
   children,
   chips,
   multi,
-  addFirst
+  onEscape
 }) {
   const addRow = add && !foot ? add : null;
   const count = items.length + (addRow ? 1 : 0);
-  const addAt = addRow ? addFirst ? 0 : items.length : -1;
-  const itemAt = (index) => addRow && addFirst ? index - 1 : index;
+  const addAt = addRow ? items.length : -1;
+  const itemAt = (index) => index;
   const removable = (chips ?? []).filter((c) => c.onRemove);
   const keys = useListKeys({
     count,
@@ -760,7 +760,7 @@ function PickOrAdd({
       if (item && !item.disabled) onPick(item.id);
     },
     onNothing: onEnterWithNoMatch ?? (add && !add.disabled ? add.onAdd : void 0),
-    onClose: () => onOpenChange(false),
+    onClose: () => onEscape ? onEscape() : onOpenChange(false),
     ...multi ? { onFinish: () => onOpenChange(false) } : {},
     ...removable.length > 0 ? { onBackspaceEmpty: () => removable[removable.length - 1]?.onRemove?.() } : {},
     searchEmpty: search === ""
@@ -794,6 +794,11 @@ function PickOrAdd({
         onKeyDown: (event) => {
           if (event.key !== "Tab") event.stopPropagation();
         },
+        onEscapeKeyDown: (event) => {
+          if (!onEscape) return;
+          event.preventDefault();
+          onEscape();
+        },
         onCloseAutoFocus: (event) => {
           if (anchored) event.preventDefault();
         },
@@ -815,7 +820,6 @@ function PickOrAdd({
           notice,
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.ScrollArea, { className: "max-h-64", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "listbox", "aria-label": triggerLabel, "aria-multiselectable": multi ? true : void 0, children: [
-              addFirst ? addRowNode : null,
               items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 PickRow,
                 {
@@ -827,13 +831,13 @@ function PickOrAdd({
                   disabled: item.disabled,
                   attrs: item.attrs,
                   person: item.person,
-                  highlighted: (addRow && addFirst ? index + 1 : index) === keys.highlight,
+                  highlighted: index === keys.highlight,
                   onPick: () => onPick(item.id),
-                  onPoint: () => keys.setHighlight(addRow && addFirst ? index + 1 : index)
+                  onPoint: () => keys.setHighlight(index)
                 },
                 item.id
               )),
-              addFirst ? null : addRowNode
+              addRowNode
             ] }),
             items.length === 0 && empty ? empty : null
           ] }),
@@ -1158,7 +1162,7 @@ var import_jsx_runtime5 = (
   require("react/jsx-runtime")
 );
 var NO_STORE_ON_THIS_SCREEN_REASON = "This question points at a record in somebody's own data, and a page answered without an account is never allowed to search that. Leave it blank \u2014 whoever receives your answer will fill it in.";
-function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true, onPicked, autoOpen, onClose }) {
+function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true, onPicked, autoOpen, onClose, onCancel }) {
   const client = (0, import_react4.useOptionalRecordsClient)();
   const [rows, setRows] = (0, import_react3.useState)(null);
   const [words, setWords] = (0, import_react3.useState)({});
@@ -1322,6 +1326,7 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
           PickOrAdd,
           {
             anchored,
+            ...anchored && onCancel ? { onEscape: onCancel } : {},
             multi: field.multi,
             chips: picked.map((recordId) => ({ id: recordId, label: titleOf(recordId), onRemove: () => toggle(recordId) })),
             triggerId: id,
@@ -2523,7 +2528,7 @@ async function personRecordForMember(client, personTableId, people, member) {
   });
   return written;
 }
-function PersonPicker({ field, value, onChange, disabled, id, className, autoOpen, onClose, initialSearch }) {
+function PersonPicker({ field, value, onChange, disabled, id, className, autoOpen, onClose, onCancel, initialSearch }) {
   const client = (0, import_react18.useOptionalRecordsClient)();
   const host = useRecordsUi();
   const [members, setMembers] = (0, import_react17.useState)(null);
@@ -2637,6 +2642,7 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         PickOrAdd,
         {
+          ...anchored && onCancel ? { onEscape: onCancel } : {},
           anchored,
           multi: field.multi,
           triggerId: id,
@@ -3198,7 +3204,7 @@ function ChoiceAskButtons({
   onCancel,
   busy
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-choice-ask": "", role: "group", "aria-label": choiceAskSentence(field, words), className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-choice-ask": "", "data-records-cell-note": "", role: "group", "aria-label": choiceAskSentence(field, words), className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[11px] leading-snug", children: choiceAskSentence(field, words) }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex flex-wrap items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system15.Button, { type: "button", size: "sm", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onAdd, children: "Add" }),
@@ -3214,7 +3220,11 @@ function isTypedDraft(value) {
 var SHORT_REFUSAL = {
   email: "Enter a valid email",
   url: "Enter a valid link",
-  phone: "Enter a valid phone number"
+  phone: "Enter a valid phone number",
+  time: "Enter a time, like 2:30 PM",
+  date: "Enter a date",
+  number: "Enter a number",
+  value: "Not a valid value"
 };
 function judgeTyped(field, text, choices, nudge) {
   const trimmed = text.trim();
@@ -3223,7 +3233,7 @@ function judgeTyped(field, text, choices, nudge) {
   if (trimmed === "") return { value: null };
   if (format && format.id === "time") {
     const read2 = (0, import_records10.readTypedTime)(trimmed);
-    return read2.ok ? { value: read2.value } : { refusal: `${fieldName(field)} holds a time of day, and ${read2.why}` };
+    return read2.ok ? { value: read2.value } : { refusal: SHORT_REFUSAL.time, why: `${fieldName(field)} holds a time of day, and ${read2.why}` };
   }
   if (kind === "select" || kind === "multi_select") {
     if (!choices || nudge === null) return null;
@@ -3261,7 +3271,7 @@ function judgeTyped(field, text, choices, nudge) {
   if (format && format.id === "rating") {
     const n = Number(trimmed);
     const max = format.options?.ratingMax ?? 5;
-    return Number.isInteger(n) && n >= 0 && n <= max ? { value: n === 0 ? null : n } : { refusal: `${fieldName(field)} is a rating from 1 to ${max}, and \u201C${text}\u201D is not one.` };
+    return Number.isInteger(n) && n >= 0 && n <= max ? { value: n === 0 ? null : n } : { refusal: `Enter 1 to ${max}`, why: `${fieldName(field)} is a rating from 1 to ${max}.` };
   }
   if (kind === "phone" || format && format.id === "phone") {
     const digits = trimmed.replace(/\D/g, "");
@@ -3270,7 +3280,11 @@ function judgeTyped(field, text, choices, nudge) {
   }
   const showsAsPercent = Boolean(format && (format.id === "percent" || format.id === "progress"));
   const read = (0, import_records10.coerceTypedAnswer)(field, text, { label: fieldName(field), showsAsPercent });
-  if ("refusal" in read) return { refusal: kind === "email" || kind === "url" ? SHORT_REFUSAL[kind] : read.refusal };
+  if ("refusal" in read) {
+    if (kind === "email" || kind === "url") return { refusal: SHORT_REFUSAL[kind] };
+    const short = kind === "datetime" ? SHORT_REFUSAL.date : kind === "number" || kind === "currency" || kind === "percent" || showsAsPercent ? SHORT_REFUSAL.number : read.refusal.length <= 32 ? read.refusal : SHORT_REFUSAL.value;
+    return short === read.refusal ? { refusal: short } : { refusal: short, why: read.refusal };
+  }
   if (typeof read.value === "number" && format && (format.id === "percent" || format.id === "progress") && format.options?.percentScale === "fraction") {
     return { value: Math.round(read.value / 100 * 1e9) / 1e9 };
   }
@@ -3340,7 +3354,7 @@ function TypedTextControl({ field, value, onChange, disabled, id, onCommit, onCa
       box,
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypedDateHelper, { kind: helper, text: value.text, onText: retype, label: fieldName(field) })
     ] }) : box,
-    judged === null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] text-muted-foreground", children: [
+    judged === null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-cell-note": "", className: "text-[10px] text-muted-foreground", children: [
       "Reading ",
       fieldName(field),
       "'s choices\u2026"
@@ -3360,10 +3374,19 @@ function TypedTextControl({ field, value, onChange, disabled, id, onCommit, onCa
         },
         onCancel: () => onCancel?.()
       }
-    ) : "refusal" in judged ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-records-typed-refusal": "", role: "status", className: "text-[11px] leading-snug text-amber-700 dark:text-amber-400", children: judged.refusal }),
+    ) : "refusal" in judged ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-cell-note": "", className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "span",
+        {
+          "data-records-typed-refusal": "",
+          role: "status",
+          title: "why" in judged ? judged.why : void 0,
+          className: "text-[11px] leading-snug text-amber-700 dark:text-amber-400",
+          children: judged.refusal
+        }
+      ),
       judged.cancelOnly && onCancel ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-records-choice-ask": "", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system15.Button, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => onCancel(), children: "Cancel" }) }) : null
-    ] }) : judged.value === null || judged.value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-typed-reads-as": "", className: "text-[10px] text-muted-foreground", children: [
+    ] }) : judged.value === null || judged.value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { "data-records-typed-reads-as": "", "data-records-cell-note": "", className: "text-[10px] text-muted-foreground", children: [
       isChoiceAddition(judged.value) ? `Adds ${quoted(judged.value.add)} to the choices for ${fieldName(field)}. ` : null,
       "Reads as",
       " ",
@@ -3457,9 +3480,9 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckboxControl, { field, value, onChange, disabled, id: inputId });
     case "select":
     case "multi_select":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OptionControl, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, addsChoices, initialSearch, asForm });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OptionControl, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, onCancel, addsChoices, initialSearch, asForm });
     case "member":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PersonPicker, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, initialSearch });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PersonPicker, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, onCancel, initialSearch });
     case "entity_reference":
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EntityReferenceControl, { field, value, onChange, disabled, id: inputId });
     case "attachment":
@@ -3468,7 +3491,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
       }
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId });
     case "relation":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit, autoOpen, onClose });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit, autoOpen, onClose, onCancel });
     default:
       if (typeof value === "boolean" || field.config?.["kind"] === "boolean") {
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3496,6 +3519,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
 function TypedWordsControl({ field, value, onChange, disabled, id }) {
   const [text, setText] = (0, import_react24.useState)(() => openingText(field, value));
   const [refusal2, setRefusal] = (0, import_react24.useState)(null);
+  const [why, setWhy] = (0, import_react24.useState)(void 0);
   const sent = (0, import_react24.useRef)(value);
   (0, import_react24.useEffect)(() => {
     if (value === sent.current) return;
@@ -3513,6 +3537,7 @@ function TypedWordsControl({ field, value, onChange, disabled, id }) {
       onChange(judged.value);
     } else if (judged && "refusal" in judged) {
       setRefusal(judged.refusal);
+      setWhy("why" in judged ? judged.why : void 0);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex flex-col gap-0.5", children: [
@@ -3536,7 +3561,7 @@ function TypedWordsControl({ field, value, onChange, disabled, id }) {
       ),
       helper && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypedDateHelper, { kind: helper, text, onText: retype, label: fieldName(field) }) : null
     ] }),
-    refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-records-typed-refusal": "", role: "status", className: "text-[11px] leading-snug text-amber-700 dark:text-amber-400", children: refusal2 }) : null
+    refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-records-typed-refusal": "", "data-records-cell-note": "", role: "status", title: why, className: "text-[11px] leading-snug text-amber-700 dark:text-amber-400", children: refusal2 }) : null
   ] });
 }
 function CheckboxControl({ field, value, onChange, disabled, id }) {
@@ -3606,8 +3631,9 @@ function JsonControl({ field, value, onChange, disabled, id }) {
       }
     ),
     broken ? (
-      // The typed text is still in the box: the notice owns the two doors out.
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      // The typed text is still in the box: the notice owns the two doors out. In a grid cell it
+      // floats over the table (`data-records-cell-note`), so the row never grows.
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-records-cell-note": "", className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         RefusalNotice,
         {
           error: broken,
@@ -3617,7 +3643,7 @@ function JsonControl({ field, value, onChange, disabled, id }) {
             setBroken(null);
           }
         }
-      )
+      ) })
     ) : null
   ] });
 }
@@ -3630,7 +3656,7 @@ function inTheStoresOrder(options) {
   const made = (o) => String(o.created_at ?? "");
   return [...options].sort((a, b) => position(a) - position(b) || made(a).localeCompare(made(b)));
 }
-function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose, addsChoices, initialSearch, asForm }) {
+function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose, onCancel, addsChoices, initialSearch, asForm }) {
   const client = (0, import_react25.useOptionalRecordsClient)();
   const [options, setOptions] = (0, import_react24.useState)(null);
   const [refusal2, setRefusal] = (0, import_react24.useState)(null);
@@ -3698,6 +3724,7 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
         id,
         autoOpen,
         onClose,
+        onCancel,
         initialSearch,
         addsChoices,
         allowOther: (0, import_records10.allowsOtherValues)(field),
@@ -3778,6 +3805,7 @@ function OpenChoicePicker({
   addsChoices,
   autoOpen,
   onClose,
+  onCancel,
   initialSearch,
   allowOther = true,
   onChoicesChanged
@@ -3845,10 +3873,9 @@ function OpenChoicePicker({
     });
   };
   const offList = q !== "" && decided.decision !== "chosen" && decided.decision !== "empty";
-  const nothingMatches = q !== "" && visible.length === 0;
   const foot = null;
   const add = offList && (decided.decision === "ask" || decided.decision === "add") ? { label: `Create \u201C${q}\u201D`, onAdd: addTyped, disabled: adding } : offList && decided.decision === "keep_as_typed" ? { label: `Use \u201C${q}\u201D`, onAdd: () => choose(q) } : null;
-  const listed = nothingMatches && add ? options : visible;
+  const listed = visible;
   const pickedOptions = current.map((v) => options.find((o) => (0, import_records10.isTheChosen)(o, v)));
   const cellChips = pickedWords.map((word, i) => {
     const chip = chipOf(pickedOptions[i], word);
@@ -3876,6 +3903,7 @@ function OpenChoicePicker({
         PickOrAdd,
         {
           anchored,
+          ...anchored && onCancel ? { onEscape: onCancel } : {},
           chips: headChips,
           multi: field.multi,
           triggerLabel: `Pick for ${fieldName(field)}`,
@@ -3887,7 +3915,6 @@ function OpenChoicePicker({
             setSearch(next);
             setAddRefused(null);
           },
-          addFirst: nothingMatches,
           items: listed.map((option) => ({
             id: option.id,
             label: titleOf(option),