@ai-matrx/records-ui 0.106.0 → 0.107.1

package/dist/pickers.cjs

@@ -3036,7 +3036,8 @@ function formatControl(args) {
         {
           id,
           type: def.editor,
-          ...ownDetails && def.editor !== "url" ? { autoComplete: def.editor === "email" ? "email" : "tel" } : {},
+          inputMode: def.editor,
+          ...ownDetails ? { autoComplete: def.editor } : {},
           value: text,
           disabled,
           onChange: (e) => commit(e.target.value)
@@ -3491,7 +3492,7 @@ function isPersonsName(field) {
   const words = `${field.key} ${field.label ?? ""}`.toLowerCase();
   return /(^|[\s_])(full[\s_]?)?name(\s|$)/.test(words) && !/(therapist|doctor|physician|company|business|pet|room)/.test(words);
 }
-function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose, onCommit, onCancel, addsChoices, initialSearch, asForm }) {
+function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose, onCommit, onCancel, addsChoices, initialSearch, asForm, onChosen }) {
   const host = useRecordsUi();
   const kind = editorKindFor(field);
   const inputId = id ?? `field-${field.key}`;
@@ -3555,7 +3556,8 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
         {
           id: inputId,
           type: kind === "email" ? "email" : kind === "phone" ? "tel" : "url",
-          ...ownDetails && kind !== "url" ? { autoComplete: kind === "email" ? "email" : "tel" } : {},
+          inputMode: kind === "email" ? "email" : kind === "phone" ? "tel" : "url",
+          ...ownDetails ? { autoComplete: kind === "email" ? "email" : kind === "phone" ? "tel" : "url" } : {},
           value: value === null || value === void 0 ? "" : String(value),
           disabled,
           onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
@@ -3565,7 +3567,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxControl, { field, value, onChange, disabled, id: inputId });
     case "select":
     case "multi_select":
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OptionControl, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, onCancel, addsChoices, initialSearch, asForm });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OptionControl, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, onCancel, addsChoices, initialSearch, asForm, onChosen });
     case "member":
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PersonPicker, { field, value, onChange, disabled, id: inputId, autoOpen, onClose, onCancel, initialSearch });
     case "entity_reference":
@@ -3747,7 +3749,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, onCancel, addsChoices, initialSearch, asForm }) {
+function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose, onCancel, addsChoices, initialSearch, asForm, onChosen }) {
   const client = (0, import_react26.useOptionalRecordsClient)();
   const [options, setOptions] = (0, import_react25.useState)(null);
   const [refusal2, setRefusal] = (0, import_react25.useState)(null);
@@ -3766,7 +3768,7 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
   }, [client, field.id, reread]);
   const handed = publicChoicesOf(field);
   if (!client && handed.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChoiceAnswer, { field, choices: handed, value, onChange, disabled, id });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChoiceAnswer, { field, choices: handed, value, onChange, disabled, id, onChosen });
   }
   if (!client) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
@@ -3796,6 +3798,7 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
         onChange,
         disabled,
         id,
+        onChosen,
         isChosen: (choice, v) => {
           const option = options.find((o) => (0, import_records10.optionKey)(o) === choice.key);
           return option ? (0, import_records10.isTheChosen)(option, v) : false;
@@ -4066,20 +4069,24 @@ function ChoiceAnswer({
   onChange,
   disabled,
   id,
-  isChosen
+  isChosen,
+  onChosen
 }) {
   const [search, setSearch] = (0, import_react25.useState)("");
   const held = field.multi ? (0, import_records10.choiceValuesOf)(value) : value === null || value === void 0 || value === "" ? [] : [value];
   const on = (choice) => held.some((v) => isChosen ? isChosen(choice, v) : String(v) === choice.key || String(v) === choice.label);
   const press = (choice) => {
     if (!field.multi) {
-      onChange(on(choice) ? null : choice.key);
+      const picking = !on(choice);
+      onChange(picking ? choice.key : null);
+      if (picking) onChosen?.();
       return;
     }
     const keys = choices.filter((c) => c.key === choice.key ? !on(c) : on(c)).map((c) => c.key);
     onChange(keys.length === 0 ? null : keys);
   };
   const lettered = choices.length <= CHOICE_LETTERS.length;
+  const tabStop = choices.find((c) => on(c))?.key ?? choices[0]?.key;
   const option = (choice) => {
     const chosen = on(choice);
     const letter = lettered ? CHOICE_LETTERS[choices.indexOf(choice)] : null;
@@ -4091,6 +4098,7 @@ function ChoiceAnswer({
         "aria-checked": chosen,
         "aria-label": choice.label,
         disabled,
+        tabIndex: field.multi || choice.key === tabStop ? 0 : -1,
         onClick: () => press(choice),
         "data-records-choice-answer": choice.key,
         className: (0, import_design_system15.cn)(
@@ -4117,8 +4125,25 @@ function ChoiceAnswer({
     );
   };
   const onKeyDown = (event) => {
-    if (!lettered || disabled || event.metaKey || event.ctrlKey || event.altKey) return;
+    if (disabled || event.metaKey || event.ctrlKey || event.altKey) return;
     if (event.target.tagName === "INPUT") return;
+    const arrow = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (arrow) {
+      const buttons = Array.from(
+        event.currentTarget.querySelectorAll("[data-records-choice-answer]")
+      );
+      const here = buttons.indexOf(event.target);
+      if (buttons.length === 0) return;
+      event.preventDefault();
+      const next = buttons[(Math.max(here, 0) + arrow + buttons.length) % buttons.length];
+      next.focus();
+      if (!field.multi) {
+        const choice = choices.find((c) => c.key === next.dataset["recordsChoiceAnswer"]);
+        if (choice && !on(choice)) onChange(choice.key);
+      }
+      return;
+    }
+    if (!lettered) return;
     const at = CHOICE_LETTERS.indexOf(event.key.toUpperCase());
     if (event.key.length !== 1 || at < 0 || at >= choices.length) return;
     event.preventDefault();