@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/MentionInput/index.tsx

@@ -2,10 +2,14 @@ import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useProps, type SizeTokens } from "tamagui";
+import { useProps, type GetProps, type SizeTokens } from "tamagui";
 import { Avatar, Text, XStack, YStack, isWeb, styled } from "tamagui";
 import { useDismiss, useInteractions } from "@floating-ui/react";
-import { menuRowFrame } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  keyboardFocusRingProps,
+  menuRowFrame,
+} from "@multiplatform.one/theme";
 
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { ScrollArrow } from "../../shared/floatingList";
@@ -91,7 +95,7 @@ export type MentionInputProps<
     textAreaProps?: Record<string, any>;
     /** When true, renders a skeleton placeholder instead of the mention input */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
     compact?: boolean;
   };
 
@@ -115,6 +119,10 @@ const MentionSuggestionItem = styled(XStack, {
   gap: "$2",
   cursor: "pointer",
   hoverStyle: { backgroundColor: formInputColors.background.focus },
+  // Rows are not tab stops (aria-activedescendant). focusVisibleStyle is the
+  // LC-71 belt if a row ever takes real focus; the keyboard-active row paints
+  // keyboardFocusRingProps below (fill and ring stay orthogonal).
+  focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
   variants: {
     selected: {
       true: { backgroundColor: formInputColors.background.focus },
@@ -127,6 +135,54 @@ const MentionSuggestionItem = styled(XStack, {
 // one text-column left edge (Avatar size="$2" ≈ 28px).
 const MEDIA_SLOT = 28;
 
+const SLUG_ID = /^[A-Za-z][\w.-]*$/;
+
+type MentionTextProps = GetProps<typeof Text>;
+
+/** GitHub/Slack: bold the query hit inside the suggestion label. */
+function MentionMatchText({
+  text,
+  query,
+  ...rest
+}: MentionTextProps & { text: string; query: string }) {
+  const needle = query.trim();
+  if (!needle) {
+    return <Text {...rest}>{text}</Text>;
+  }
+  const idx = text.toLowerCase().indexOf(needle.toLowerCase());
+  if (idx < 0) {
+    return <Text {...rest}>{text}</Text>;
+  }
+  return (
+    <Text {...rest}>
+      {text.slice(0, idx)}
+      <Text {...rest} fontWeight="700">
+        {text.slice(idx, idx + needle.length)}
+      </Text>
+      {text.slice(idx + needle.length)}
+    </Text>
+  );
+}
+
+function mentionSecondary(item: MentionItem, trigger: string): string | undefined {
+  if (item.description) return item.description;
+  if (item.id && item.id !== item.display && SLUG_ID.test(item.id)) {
+    return `${trigger}${item.id}`;
+  }
+  return undefined;
+}
+
+function mentionForDelete(
+  mentions: MentionData[],
+  cursor: number,
+  key: "Backspace" | "Delete",
+): MentionData | undefined {
+  if (key === "Backspace") {
+    return mentions.find((m) => cursor > m.position && cursor <= m.position + m.length);
+  }
+  return mentions.find((m) => cursor >= m.position && cursor < m.position + m.length);
+}
+
 export function MentionInput<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -179,6 +235,9 @@ export function MentionInput<
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [cursorPosition, setCursorPosition] = useState(0);
+  // LC-71: suggestion rows are not focused (activedescendant). Paint the
+  // inset ring only while the active row was chosen by keyboard/typing.
+  const [keyboardHighlight, setKeyboardHighlight] = useState(false);
 
   const textAreaRef = useRef<any>(null);
   const prevCursorRef = useRef(0);
@@ -234,7 +293,10 @@ export function MentionInput<
       showSuggestions && currentTrigger ? getFilteredSuggestions(currentTrigger, searchQuery) : [],
     [showSuggestions, currentTrigger, searchQuery, getFilteredSuggestions],
   );
-  const hasSuggestions = suggestions.length > 0;
+  // GitHub/Slack keep the popup open on a live trigger even when the query
+  // matches nothing (empty state). Disabled/readOnly still open nothing.
+  const triggerActive = Boolean(!disabled && !readOnly && showSuggestions && currentTrigger);
+  const hasSuggestions = triggerActive && suggestions.length > 0;
   // LC-08: uniform slot decision is per-list — if any visible row has media,
   // all rows reserve the slot; an all-text list (e.g. hashtags) has none.
   const suggestionsHaveMedia = useMemo(
@@ -243,7 +305,7 @@ export function MentionInput<
   );
 
   const panel = useFloatingPanel({
-    open: hasSuggestions,
+    open: triggerActive,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
         setShowSuggestions(false);
@@ -251,6 +313,7 @@ export function MentionInput<
         prevQueryRef.current = "";
       }
     },
+    disabled: disabled || readOnly,
     fitContent: true,
   });
 
@@ -277,6 +340,7 @@ export function MentionInput<
         setCurrentTrigger(triggerInfo.trigger);
         setSearchQuery(triggerInfo.query);
         setShowSuggestions(true);
+        setKeyboardHighlight(true);
         if (triggerInfo.query !== prevQueryRef.current) {
           setSelectedIndex(0);
         }
@@ -425,6 +489,8 @@ export function MentionInput<
       setCurrentTrigger(null);
       prevQueryRef.current = "";
       onMentionSelect?.(item, currentTrigger);
+      onChange?.(newText);
+      onTextChange?.(newText);
       setTimeout(() => {
         const el = getWebTextAreaElement();
         if (el) {
@@ -443,25 +509,85 @@ export function MentionInput<
       triggerMap,
       mentionList,
       onMentionSelect,
+      onChange,
+      onTextChange,
       getWebTextAreaElement,
     ],
   );
 
+  const removeMention = useCallback(
+    (mention: MentionData) => {
+      const before = text.slice(0, mention.position);
+      const after = text.slice(mention.position + mention.length);
+      const newText = before + after;
+      const removedLen = mention.length;
+      setText(newText);
+      setMentionList((prev) =>
+        prev
+          .filter((m) => !(m.position === mention.position && m.id === mention.id))
+          .map((m) =>
+            m.position > mention.position ? { ...m, position: m.position - removedLen } : m,
+          ),
+      );
+      const newCursor = mention.position;
+      setCursorPosition(newCursor);
+      prevCursorRef.current = newCursor;
+      onChange?.(newText);
+      onTextChange?.(newText);
+      updateTriggerState(newText, newCursor);
+      setTimeout(() => {
+        const el = getWebTextAreaElement();
+        if (el) {
+          el.focus();
+          el.setSelectionRange(newCursor, newCursor);
+        }
+      }, 0);
+    },
+    [text, onChange, onTextChange, updateTriggerState, getWebTextAreaElement],
+  );
+
   const handleKeyDown = useCallback(
     (event: any) => {
-      if (!showSuggestions || !currentTrigger || suggestions.length === 0) return;
       const key = event.key || event.nativeEvent?.key;
+      const webElement = getWebTextAreaElement();
+      const caret =
+        webElement && typeof webElement.selectionStart === "number"
+          ? webElement.selectionStart
+          : cursorPosition;
+
+      // Slack: Backspace/Delete at a mention token eats the whole token.
+      if (key === "Backspace" || key === "Delete") {
+        const mention = mentionForDelete(mentionList, caret, key);
+        if (mention) {
+          event.preventDefault?.();
+          removeMention(mention);
+          return;
+        }
+      }
+
+      if (!showSuggestions || !currentTrigger) return;
+
+      if (suggestions.length === 0) {
+        if (key === "Escape") {
+          event.preventDefault?.();
+          setShowSuggestions(false);
+        }
+        return;
+      }
 
       switch (key) {
         case "ArrowDown":
           event.preventDefault?.();
+          setKeyboardHighlight(true);
           setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : 0));
           break;
         case "ArrowUp":
           event.preventDefault?.();
+          setKeyboardHighlight(true);
           setSelectedIndex((prev) => (prev > 0 ? prev - 1 : suggestions.length - 1));
           break;
         case "Enter":
+        case "Tab":
           event.preventDefault?.();
           if (suggestions[selectedIndex]) {
             insertMention(suggestions[selectedIndex]);
@@ -473,7 +599,17 @@ export function MentionInput<
           break;
       }
     },
-    [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention],
+    [
+      showSuggestions,
+      currentTrigger,
+      suggestions,
+      selectedIndex,
+      insertMention,
+      mentionList,
+      cursorPosition,
+      removeMention,
+      getWebTextAreaElement,
+    ],
   );
 
   const itemRefs = useRef<Array<HTMLElement | null>>([]);
@@ -584,11 +720,11 @@ export function MentionInput<
   });
 
   useLayoutEffect(() => {
-    if (!hasSuggestions) return;
+    if (!triggerActive) return;
     const rect = getCaretClientRect();
     panel.refs.setReference({ getBoundingClientRect: () => rect });
     panel.update();
-  }, [hasSuggestions, cursorPosition, text]);
+  }, [triggerActive, cursorPosition, text]);
 
   const suggestionListId = `${id}-suggestions`;
   const selectedOptionId =
@@ -609,21 +745,17 @@ export function MentionInput<
           scrollbarWidth: "none" as any,
           zIndex: zIndex.dropdown,
           overflow: "auto",
-          boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
           opacity: panel.visible ? 1 : 0,
           transform: panel.visible ? "scale(1)" : "scale(0.96)",
-          transition: panelTransition,
+          transition: panel.knobProps.transition ? panelTransition : "none",
           transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
         },
         onScroll: (e: any) => panel.updateArrows(e.target as HTMLElement),
       })}
       outlineWidth={0}
       pointerEvents={panel.visible ? "auto" : "none"}
-      backgroundColor="$background"
+      {...panel.knobProps.elevatedSurface}
       borderRadius={panel.dropdownRadius}
-      borderWidth={panel.hasBorder ? panel.knobProps.borderRadius.borderWidth : 0}
-      borderColor={panel.hasBorder ? formInputColors.border.focus : "transparent"}
-      // LC-01: container owns only its border — zero padding on all four sides.
       padding={0}
       maxHeight={suggestionsMaxHeight}
       minWidth={suggestionsMinWidth}
@@ -639,63 +771,81 @@ export function MentionInput<
       />
       {/* LC-01: rows are direct children of the scroll container — no padded
           wrapper, the container owns only its border. */}
-      {suggestions.map((item, index) => {
-        const optionId = `${id}-option-${item.id}`;
-        return (
-          <MentionSuggestionItem
-            key={item.id}
-            ref={(node: any) => {
-              itemRefs.current[index] = node;
-            }}
-            selected={index === selectedIndex}
-            onPress={() => handleSuggestionPress(item)}
-            onMouseEnter={() => setSelectedIndex(index)}
-            role="option"
-            id={optionId}
-            aria-selected={index === selectedIndex}
-          >
-            {/* LC-08 MEDIA-SLOT-ROW: when any row in the list has media, every
-                row reserves the same fixed slot (initials fallback, centered)
-                so the text columns share one left edge. */}
-            {suggestionsHaveMedia && (
-              <YStack
-                width={MEDIA_SLOT}
-                height={MEDIA_SLOT}
-                alignItems="center"
-                justifyContent="center"
-                flexShrink={0}
+      {hasSuggestions
+        ? suggestions.map((item, index) => {
+            const optionId = `${id}-option-${item.id}`;
+            const active = index === selectedIndex;
+            const keyboardRing = active && keyboardHighlight;
+            const secondary = mentionSecondary(item, currentTrigger ?? "");
+            return (
+              <MentionSuggestionItem
+                key={item.id}
+                ref={(node: any) => {
+                  itemRefs.current[index] = node;
+                }}
+                selected={active}
+                onPress={() => handleSuggestionPress(item)}
+                onMouseEnter={() => {
+                  setKeyboardHighlight(false);
+                  setSelectedIndex(index);
+                }}
+                role="option"
+                id={optionId}
+                aria-selected={active}
+                data-keyboard-ring={keyboardRing ? "true" : undefined}
+                {...(keyboardRing ? keyboardFocusRingProps : undefined)}
               >
-                <Avatar size="$2" circular>
-                  {item.avatar ? <Avatar.Image src={item.avatar} /> : null}
-                  <Avatar.Fallback
-                    backgroundColor={formInputColors.background.focus}
-                    justifyContent="center"
+                {/* LC-08 MEDIA-SLOT-ROW: when any row in the list has media, every
+                    row reserves the same fixed slot (initials fallback, centered)
+                    so the text columns share one left edge. */}
+                {suggestionsHaveMedia && (
+                  <YStack
+                    width={MEDIA_SLOT}
+                    height={MEDIA_SLOT}
                     alignItems="center"
+                    justifyContent="center"
+                    flexShrink={0}
                   >
-                    <Text fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}>
-                      {item.display[0]}
-                    </Text>
-                  </Avatar.Fallback>
-                </Avatar>
-              </YStack>
-            )}
-            <YStack flex={1} minWidth={0}>
-              <Text fontSize={knobProps.sizeToken} {...knobProps.body} fontWeight="600">
-                {item.display}
+                    <Avatar size="$2" circular>
+                      {item.avatar ? <Avatar.Image src={item.avatar} /> : null}
+                      <Avatar.Fallback
+                        backgroundColor={formInputColors.background.focus}
+                        justifyContent="center"
+                        alignItems="center"
+                      >
+                        <Text fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}>
+                          {item.display[0]}
+                        </Text>
+                      </Avatar.Fallback>
+                    </Avatar>
+                  </YStack>
+                )}
+                <YStack flex={1} minWidth={0}>
+                  <MentionMatchText text={item.display} query={searchQuery} {...knobProps.label} />
+                  {secondary ? (
+                    <MentionMatchText
+                      text={secondary}
+                      query={searchQuery}
+                      fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
+                      color={formCommonColors.muted}
+                      {...knobProps.body}
+                    />
+                  ) : null}
+                </YStack>
+              </MentionSuggestionItem>
+            );
+          })
+        : triggerActive && (
+            <YStack paddingHorizontal="$3" paddingVertical="$2" role="status" aria-live="polite">
+              <Text
+                fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
+                color={formCommonColors.muted}
+                {...knobProps.body}
+              >
+                {t("No matches")}
               </Text>
-              {item.description && (
-                <Text
-                  fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
-                  color={formCommonColors.muted}
-                  {...knobProps.body}
-                >
-                  {item.description}
-                </Text>
-              )}
             </YStack>
-          </MentionSuggestionItem>
-        );
-      })}
+          )}
       <ScrollArrow
         direction="down"
         scrollRef={panel.refs.floating}
@@ -739,9 +889,10 @@ export function MentionInput<
         onSelectionChange: handleSelectionChange,
         ...(isWeb ? { onSelect: handleWebSelect } : {}),
         onKeyDown: handleKeyDown as any,
+        "aria-autocomplete": "list",
         "aria-haspopup": "listbox",
-        "aria-expanded": hasSuggestions,
-        "aria-controls": hasSuggestions ? suggestionListId : undefined,
+        "aria-expanded": triggerActive,
+        "aria-controls": triggerActive ? suggestionListId : undefined,
         "aria-activedescendant": selectedOptionId,
         ...textAreaProps,
       }}

package/src/fields/OTPInput/OtpInput.spec.tsx

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from "vitest";
 import { TestProviders, renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Button } from "../../Button";
-import { OTPInput } from "./index";
+import { OTPInput, extractOtpCode } from "./index";
 
 describe("OTPInput", () => {
   describe("basic rendering", () => {
@@ -608,4 +608,61 @@ describe("OTPInput", () => {
       expect(inputs.length).toBe(6);
     });
   });
+
+  describe("Apple / Stripe paste and grouping", () => {
+    it("extracts an exact-length code from SMS copy", () => {
+      expect(extractOtpCode("Your code is 847291. Don't share it.", "numeric", 6)).toBe("847291");
+      expect(extractOtpCode("order 20260814 code 123456", "numeric", 6)).toBe("123456");
+      expect(extractOtpCode("ABC123 leftover", "alphanumeric", 6)).toBe("ABC123");
+    });
+
+    it("fills all cells when the first cell receives the whole code", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(<OTPInput name="otp" onChange={onChange} />);
+      const inputs = result.container.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
+
+      await act(async () => {
+        fireEvent.change(inputs[0], { target: { value: "482193" } });
+      });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith("482193");
+      });
+      const updated = result.container.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
+      expect([...updated].map((el) => el.value).join("")).toBe("482193");
+    });
+
+    it("pastes a code out of an SMS sentence", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(<OTPInput name="otp" onChange={onChange} />);
+      const inputs = result.container.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
+      const clipboardData = {
+        getData: (type?: string) =>
+          type === "text" || type === "text/plain" || !type
+            ? "Your Apple ID code is 482193."
+            : "",
+      };
+
+      await act(async () => {
+        fireEvent.paste(inputs[0], { clipboardData });
+      });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith("482193");
+      });
+    });
+
+    it("keeps six cells when grouping 3+3", () => {
+      const result = renderWithProviders(<OTPInput name="otp" length={6} />);
+      expect(result.container.querySelectorAll("input").length).toBe(6);
+    });
+
+    it("hides the clear control until a digit is entered", () => {
+      const empty = renderWithProviders(<OTPInput name="otp" clearable />);
+      expect(empty.container.querySelector('[aria-label="Clear"]')).toBeFalsy();
+
+      const filled = renderWithProviders(<OTPInput name="otp" value="12" clearable />);
+      expect(filled.container.querySelector('[aria-label="Clear"]')).toBeTruthy();
+    });
+  });
 });

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { Card, Text, YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Input } from "../Input";
 import { Form } from "../../Form";
@@ -124,6 +124,15 @@ export const Basic: Story = {
   },
 };
 
+export const Filled: Story = {
+  args: {
+    label: "Verification Code",
+    helperText: "Enter the 6-digit code",
+    length: 6,
+    value: "482193",
+  },
+};
+
 export const Disabled: Story = {
   args: {
     label: "Disabled OTP",
@@ -181,25 +190,12 @@ export const AutoSubmit: Story = {
 
       return (
         <YStack gap="$4">
-          <Card padding="$4" backgroundColor="$yellow2" borderRadius="$2">
-            <Text fontSize="$4" fontWeight="600">
-              Auto-Submit Demo:
-            </Text>
-            <Text>Enter a complete 6-digit code and it will auto-submit.</Text>
-            <Text>This demonstrates automatic form submission on completion.</Text>
-          </Card>
-
           <OTPInput {...args} onComplete={handleComplete} />
 
-          {submittedValue && (
-            <Card padding="$4" backgroundColor="$green2" borderRadius="$2">
-              <Text fontSize="$4" fontWeight="600">
-                Auto-Submitted Value:
-              </Text>
-              <Text fontSize="$6" fontWeight="bold" color="$green11">
-                {submittedValue}
-              </Text>
-            </Card>
+          {submittedValue ? (
+            <Text fontWeight="600">Submitted {submittedValue}</Text>
+          ) : (
+            <Text>Enter a complete 6-digit code to auto-submit.</Text>
           )}
         </YStack>
       );