@multiplatform.one/components 6.6.0 → 7.0.0

package/src/layouts/tags.tsx

@@ -1,18 +1,25 @@
 import { PlusIcon, TagIcon } from "@phosphor-icons/react";
-import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
-  Button,
+  ensureCompositeFocusRing,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  menuRowFrame,
+  pressTargetStyle,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useTranslation } from "../shared/i18n";
+import {
   Input,
   Label,
-  ListItem,
   Popover,
   ScrollView,
   Text,
   View,
   XStack,
   YStack,
+  isWeb,
   type YStackProps,
 } from "tamagui";
 import {
@@ -104,6 +111,10 @@ export interface TagsProps extends Omit<YStackProps, "children" | "theme"> {
   placeholder?: string;
 }
 
+type ListOption =
+  | { kind: "create"; key: "create"; label: string }
+  | { kind: "suggestion"; key: string; label: string; tag: TagItem };
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -112,7 +123,10 @@ export interface TagsProps extends Omit<YStackProps, "children" | "theme"> {
  * Generic Tags component for displaying and managing tags.
  * Fully data-agnostic -- accepts tags via props and emits callbacks.
  *
- * Renders each tag as the canonical `Chip` component (solid/subtle/outline vocabulary).
+ * Polariss Combobox + GitHub TokenInput anatomy: chips live inside one
+ * input-surface field (LC-71 rings that field on text focus). Suggestions
+ * are a CONTAINER-CLIP listbox (LC-72): flat rows, overlay clips corners,
+ * keyboard-active row is fill + inset ring (never a border on every sibling).
  */
 export function Tags({
   tags,
@@ -136,8 +150,13 @@ export function Tags({
 }: TagsProps) {
   const { t } = useTranslation();
   const placeholder = placeholderProp ?? t("Add tag...");
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps, disabledState } = useResolvedKnobs();
   const inputRef = useRef<HTMLInputElement>(null);
+  const listboxId = useId();
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureKeyboardModalityTracking();
+  }
 
   const chipSize = (
     compact
@@ -151,11 +170,13 @@ export function Tags({
 
   const [inputValue, setInputValue] = useState("");
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [addKbFocus, setAddKbFocus] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [kbNav, setKbNav] = useState(false);
 
   const {
     addTag: addTagLabel = t("Add Tag"),
     noTags: noTagsLabel = t("No tags"),
-    clickToAdd: clickToAddLabel = t("Click + to add tags"),
     suggestions: suggestionsLabel = t("Suggestions"),
     noAvailableTags: noAvailableTagsLabel = t("No available tags"),
     createTag: createTagLabel = (value: string) => withInterp(t('Create "{{value}}"'), { value }),
@@ -184,6 +205,21 @@ export function Tags({
     return true;
   }, [disabled, enableAdd, onAdd, maxTags, tags.length]);
 
+  const trimmedInput = inputValue.trim();
+  const canCreate =
+    canAdd && trimmedInput.length > 0 && !appliedTagNames.has(trimmedInput.toLowerCase());
+
+  const listOptions = useMemo<ListOption[]>(() => {
+    const rows: ListOption[] = [];
+    if (canCreate) {
+      rows.push({ kind: "create", key: "create", label: createTagLabel(trimmedInput) });
+    }
+    for (const tag of availableSuggestions) {
+      rows.push({ kind: "suggestion", key: tag.id, label: tag.label, tag });
+    }
+    return rows;
+  }, [canCreate, createTagLabel, trimmedInput, availableSuggestions]);
+
   const handleAddTag = useCallback(
     (tagName: string) => {
       const trimmedName = tagName.trim();
@@ -191,35 +227,90 @@ export function Tags({
       if (appliedTagNames.has(trimmedName.toLowerCase())) return;
 
       setInputValue("");
-      setIsPopoverOpen(false);
+      setActiveIndex(-1);
       onAdd?.(trimmedName);
     },
     [canAdd, appliedTagNames, onAdd],
   );
 
+  const handleSelectOption = useCallback(
+    (option: ListOption) => {
+      if (option.kind === "create") {
+        handleAddTag(trimmedInput);
+        return;
+      }
+      handleAddTag(option.label);
+    },
+    [handleAddTag, trimmedInput],
+  );
+
   const handleInputChange = useCallback((text: string) => {
     setInputValue(text);
     setIsPopoverOpen(true);
+    setKbNav(false);
+    setActiveIndex(0);
   }, []);
 
-  const handleKeyPress = useCallback(
+  const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === "Enter" && inputValue.trim()) {
+      if (e.nativeEvent?.isComposing) return;
+      const count = listOptions.length;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setIsPopoverOpen(true);
+        setKbNav(true);
+        setActiveIndex((i) => {
+          if (count === 0) return -1;
+          if (i < 0) return 0;
+          return Math.min(i + 1, count - 1);
+        });
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setKbNav(true);
+        setActiveIndex((i) => {
+          if (count === 0) return -1;
+          if (i < 0) return count - 1;
+          return Math.max(i - 1, 0);
+        });
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const option = activeIndex >= 0 ? listOptions[activeIndex] : undefined;
+        if (option) handleSelectOption(option);
+        else if (trimmedInput) handleAddTag(trimmedInput);
+        return;
+      }
+      if (e.key === "Escape") {
         e.preventDefault();
-        handleAddTag(inputValue);
-      } else if (e.key === "Escape") {
         setIsPopoverOpen(false);
         setInputValue("");
+        setActiveIndex(-1);
+        return;
+      }
+      if (e.key === "Backspace" && !inputValue && enableRemove && onRemove && tags.length > 0) {
+        e.preventDefault();
+        onRemove(tags[tags.length - 1]);
+        return;
+      }
+      if (e.key === "," && trimmedInput) {
+        e.preventDefault();
+        handleAddTag(trimmedInput);
       }
     },
-    [inputValue, handleAddTag],
-  );
-
-  const handleSelectSuggestion = useCallback(
-    (tagLabel: string) => {
-      handleAddTag(tagLabel);
-    },
-    [handleAddTag],
+    [
+      listOptions,
+      activeIndex,
+      handleSelectOption,
+      handleAddTag,
+      trimmedInput,
+      inputValue,
+      enableRemove,
+      onRemove,
+      tags,
+    ],
   );
 
   useEffect(() => {
@@ -228,25 +319,23 @@ export function Tags({
     }
   }, [isPopoverOpen]);
 
+  useEffect(() => {
+    if (activeIndex >= listOptions.length) {
+      setActiveIndex(listOptions.length === 0 ? -1 : 0);
+    }
+  }, [activeIndex, listOptions.length]);
+
   const emptyState = renderEmpty ? (
     renderEmpty()
   ) : (
-    <XStack
-      padding={compact ? "$1" : "$2"}
-      alignItems="center"
-      opacity={0.5}
-      gap="$2"
-      {...{ backgroundColor: componentColors.surface.background }}
-      {...knobProps.borderRadius}
-    >
+    <XStack alignItems="center" gap="$2" opacity={0.5}>
       <TagIcon size={compact ? 14 : 16} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$1" : "$2"}>
+      <Text color={componentColors.text.muted} fontSize={compact ? "$1" : "$2"} {...knobProps.body}>
         {noTagsLabel}
       </Text>
     </XStack>
   );
 
-  // Map legacy Tags vocabulary onto the canonical Chip vocabulary.
   const chipVariant: ChipVariant =
     variant === "filled"
       ? "solid"
@@ -283,9 +372,11 @@ export function Tags({
       <XStack
         key={tag.id}
         cursor="pointer"
-        onPress={() => onTagClick(tag)}
-        // role, not accessibilityRole: the RN-only prop leaks onto the DOM
-        // <div> on web; RN maps role="button" to accessibilityRole natively.
+        data-tag-chip=""
+        onPress={(e) => {
+          e.stopPropagation?.();
+          onTagClick(tag);
+        }}
         role="button"
         aria-label={tag.label}
         hoverStyle={{ opacity: 0.85 }}
@@ -294,7 +385,7 @@ export function Tags({
         {chip}
       </XStack>
     ) : (
-      chip
+      <View data-tag-chip="">{chip}</View>
     );
 
     if (renderTag) {
@@ -304,65 +395,236 @@ export function Tags({
     return defaultContent;
   };
 
-  const renderPopoverContent = () => (
-    <YStack {...knobProps.panelPadding} {...knobProps.gap} minWidth={200}>
-      <Input
-        ref={inputRef as any}
-        value={inputValue}
-        onChangeText={handleInputChange}
-        onKeyDown={handleKeyPress as unknown as () => void}
-        placeholder={placeholder}
-        size={chipSize}
-        {...knobProps.inputSurface}
-        autoFocus
-      />
-
-      {inputValue.trim() && !appliedTagNames.has(inputValue.toLowerCase().trim()) && (
-        <Button
-          size={chipSize}
-          onPress={() => handleAddTag(inputValue)}
-          icon={<PlusIcon size={16} />}
+  const activeOptionId =
+    isPopoverOpen && activeIndex >= 0 && listOptions[activeIndex]
+      ? `${listboxId}-opt-${activeIndex}`
+      : undefined;
+
+  const showEmptyMessage =
+    isPopoverOpen && trimmedInput === "" && availableSuggestions.length === 0 && !canCreate;
+
+  const renderListboxOrdered = () => {
+    const createOption = listOptions.find((o) => o.kind === "create");
+    const suggestionOptions = listOptions.filter(
+      (o): o is Extract<ListOption, { kind: "suggestion" }> => o.kind === "suggestion",
+    );
+    const renderRow = (option: ListOption, index: number) => {
+      const isActive = index === activeIndex;
+      const rowRing =
+        isActive && kbNav
+          ? ensureFocusVisibleRing({ outlineOffset: -2 })
+          : { outlineWidth: 0 as const };
+      const fill = isActive ? componentColors.interactive.hover : "transparent";
+      return (
+        <XStack
+          key={option.key}
+          {...menuRowFrame}
+          id={`${listboxId}-opt-${index}`}
+          role={option.kind === "create" ? "button" : "option"}
+          aria-label={option.kind === "create" ? option.label : undefined}
+          aria-selected={option.kind === "suggestion" ? isActive : undefined}
+          data-active={isActive || undefined}
+          backgroundColor={fill}
+          hoverStyle={{
+            backgroundColor: componentColors.interactive.hover,
+            borderRadius: 0,
+          }}
+          pressStyle={{
+            backgroundColor: componentColors.interactive.active,
+            borderRadius: 0,
+          }}
+          cursor="pointer"
+          {...rowRing}
+          onMouseEnter={() => {
+            setKbNav(false);
+            setActiveIndex(index);
+          }}
+          onPress={() => handleSelectOption(option)}
         >
-          {createTagLabel(inputValue.trim())}
-        </Button>
-      )}
+          {option.kind === "create" ? <PlusIcon size={16} /> : null}
+          <Text {...knobProps.body} color={componentColors.text.primary}>
+            {option.label}
+          </Text>
+        </XStack>
+      );
+    };
 
-      {availableSuggestions.length > 0 && (
-        <YStack gap="$1">
-          <Text fontSize="$1" color={componentColors.text.muted} paddingInlineStart="$1">
+    return (
+      <YStack
+        // "listbox" is a valid ARIA role but outside RN's `Role` union;
+        // forwarded to the DOM node on web (house Record cast).
+        {...({ role: "listbox" } as Record<string, unknown>)}
+        id={listboxId}
+        aria-label={suggestionsLabel}
+        onMouseDown={(e) => {
+          e.preventDefault();
+        }}
+      >
+        {createOption ? renderRow(createOption, 0) : null}
+        {suggestionOptions.length > 0 && (
+          <Text
+            fontSize="$1"
+            color={componentColors.text.muted}
+            paddingHorizontal="$3"
+            paddingVertical="$1.5"
+          >
             {suggestionsLabel}
           </Text>
-          <ScrollView maxHeight={150}>
-            <YStack gap="$1">
-              {availableSuggestions.map((tag) => (
-                <ListItem
-                  key={tag.id}
-                  title={tag.label}
-                  size={chipSize}
-                  hoverStyle={{ backgroundColor: componentColors.interactive.background }}
-                  pressStyle={{ backgroundColor: componentColors.interactive.hover }}
-                  onPress={() => handleSelectSuggestion(tag.label)}
-                  cursor="pointer"
-                />
-              ))}
-            </YStack>
-          </ScrollView>
-        </YStack>
+        )}
+        {suggestionOptions.map((option, i) => renderRow(option, (createOption ? 1 : 0) + i))}
+        {showEmptyMessage && (
+          <Text
+            fontSize="$2"
+            color={componentColors.text.muted}
+            textAlign="center"
+            padding="$3"
+            {...knobProps.body}
+          >
+            {noAvailableTagsLabel}
+          </Text>
+        )}
+      </YStack>
+    );
+  };
+
+  const openAdd = useCallback(() => {
+    if (!canAdd) return;
+    setIsPopoverOpen(true);
+  }, [canAdd]);
+
+  const fieldPadH = compact ? ("$2" as const) : ("$2.5" as const);
+  const fieldPadV = compact ? ("$1.5" as const) : ("$2" as const);
+
+  const field = (
+    <XStack
+      data-testid="tags-field"
+      flexWrap="wrap"
+      alignItems="center"
+      gap="$1.5"
+      width="100%"
+      minHeight={knobProps.sizeToken}
+      paddingHorizontal={fieldPadH}
+      paddingVertical={fieldPadV}
+      backgroundColor={componentColors.surface.background}
+      {...knobProps.inputSurface}
+      {...knobProps.borderRadius}
+      overflow="hidden"
+      cursor={canAdd ? "text" : "default"}
+      {...(isWeb ? { className: "mp-composite-ring" } : {})}
+      outlineWidth={0}
+      hoverStyle={canAdd ? { borderColor: componentColors.interactive.border } : undefined}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={{ outlineWidth: 0 }}
+      {...(disabled
+        ? {
+            "aria-disabled": true,
+            ...disabledState.surfaceKnobProps,
+            ...disabledState.assemblyKnobProps,
+          }
+        : undefined)}
+      onPress={() => {
+        if (!canAdd) return;
+        openAdd();
+        inputRef.current?.focus();
+      }}
+    >
+      {tags.length === 0 && !enableAdd
+        ? emptyState
+        : tags.map((tag) => <React.Fragment key={tag.id}>{renderTagItem(tag)}</React.Fragment>)}
+
+      {canAdd && (
+        <Popover.Trigger asChild>
+          <View
+            role="button"
+            aria-label={addTagLabel}
+            tabIndex={0}
+            cursor="pointer"
+            alignItems="center"
+            justifyContent="center"
+            flexShrink={0}
+            {...pressTargetStyle()}
+            minWidth={undefined}
+            paddingHorizontal={3}
+            marginHorizontal={-3}
+            outlineWidth={0}
+            focusStyle={{ outlineWidth: 0 }}
+            focusVisibleStyle={{ outlineWidth: 0 }}
+            onPress={(e) => {
+              e.stopPropagation?.();
+              openAdd();
+            }}
+            onFocus={() => {
+              if (wasKeyboardFocus()) setAddKbFocus(true);
+            }}
+            onBlur={() => setAddKbFocus(false)}
+            onKeyDown={
+              ((e: React.KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  openAdd();
+                }
+              }) as unknown as () => void
+            }
+          >
+            <ChipFrame
+              size={chipSize}
+              variant="outline"
+              backgroundColor="transparent"
+              {...knobProps.borderRadius}
+              borderColor={componentColors.interactive.border}
+              gap={compact ? 0 : "$1"}
+              hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
+              pressStyle={{ backgroundColor: componentColors.interactive.active }}
+              {...(addKbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
+            >
+              <PlusIcon size={chipIconSize(chipSize)} />
+              <ChipText size={chipSize} color={componentColors.text.secondary}>
+                {compact ? "\u200B" : addTagLabel}
+              </ChipText>
+            </ChipFrame>
+          </View>
+        </Popover.Trigger>
       )}
 
-      {inputValue.trim() === "" && availableSuggestions.length === 0 && (
-        <Text fontSize="$2" color={componentColors.text.muted} textAlign="center" padding="$2">
-          {noAvailableTagsLabel}
-        </Text>
+      {canAdd && (
+        <Input
+          ref={inputRef as any}
+          value={inputValue}
+          onChangeText={handleInputChange}
+          onKeyDown={handleKeyDown as unknown as () => void}
+          onFocus={() => setIsPopoverOpen(true)}
+          placeholder={placeholder}
+          flexGrow={1}
+          flexShrink={1}
+          flexBasis={96}
+          minWidth={96}
+          height="auto"
+          padding={0}
+          margin={0}
+          borderWidth={0}
+          backgroundColor="transparent"
+          outlineWidth={0}
+          focusStyle={{ outlineWidth: 0, borderWidth: 0 }}
+          focusVisibleStyle={{ outlineWidth: 0 }}
+          {...knobProps.body}
+          color={componentColors.text.primary}
+          placeholderTextColor={componentColors.text.muted}
+          autoComplete="off"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={isPopoverOpen}
+          aria-controls={listboxId}
+          aria-activedescendant={activeOptionId}
+        />
       )}
-    </YStack>
+    </XStack>
   );
 
   return (
     <YStack {...knobProps.gap} {...stackProps}>
       {label && (
         <XStack alignItems="center" justifyContent="space-between">
-          <Label fontSize={compact ? "$3" : "$4"} fontWeight="500">
+          <Label {...knobProps.label} fontWeight="500">
             {label}
             {maxTags > 0 && (
               <Text color={componentColors.text.muted} fontSize="$2">
@@ -374,12 +636,8 @@ export function Tags({
         </XStack>
       )}
 
-      <XStack flexWrap="wrap" gap="$2" alignItems="center">
-        {tags.length === 0 && !enableAdd
-          ? emptyState
-          : tags.map((tag) => <React.Fragment key={tag.id}>{renderTagItem(tag)}</React.Fragment>)}
-
-        {enableAdd && canAdd && (
+      <YStack width="100%">
+        {canAdd ? (
           <Popover
             open={isPopoverOpen}
             onOpenChange={setIsPopoverOpen}
@@ -388,84 +646,23 @@ export function Tags({
             stayInFrame
             allowFlip
           >
-            <Popover.Trigger asChild>
-              {/* Chip-scale visual (shares ChipFrame/ChipText size variants so its
-                  height/padding/font track the Chip pills) wrapped in a
-                  transparent press target floored at 44 tall (DG-LAY-04 / D-02
-                  house pressTarget* channel — the pill itself stays chip-sized).
-                  Horizontal slop is capped below half the $2 row gap so the
-                  target never overlaps the adjacent chip / its dismiss zone. */}
-              <View
-                role="button"
-                aria-label={addTagLabel}
-                tabIndex={0}
-                cursor="pointer"
-                alignItems="center"
-                justifyContent="center"
-                {...pressTargetStyle()}
-                minWidth={undefined}
-                paddingHorizontal={3}
-                marginHorizontal={-3}
-                focusVisibleStyle={{
-                  outlineColor: "$outlineColor",
-                  outlineWidth: 2,
-                  outlineStyle: "solid",
-                }}
-                onKeyDown={
-                  ((e: React.KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      setIsPopoverOpen(true);
-                    }
-                  }) as unknown as () => void
-                }
-              >
-                <ChipFrame
-                  size={chipSize}
-                  variant="outline"
-                  backgroundColor="transparent"
-                  {...knobProps.borderRadius}
-                  borderColor={componentColors.interactive.border}
-                  gap={compact ? 0 : "$1"}
-                  hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
-                  pressStyle={{ backgroundColor: componentColors.interactive.active }}
-                >
-                  <PlusIcon size={chipIconSize(chipSize)} />
-                  {/* Compact is icon-only: a zero-width space still establishes the
-                      chip text line box so the trigger height matches the pills. */}
-                  <ChipText size={chipSize} color={componentColors.text.secondary}>
-                    {compact ? "\u200B" : addTagLabel}
-                  </ChipText>
-                </ChipFrame>
-              </View>
-            </Popover.Trigger>
-
+            {field}
             <Popover.Content
-              borderWidth={1}
-              borderColor="$borderColor"
-              borderRadius={knobProps.borderRadius.borderRadius}
-              elevation={knobProps.elevation}
-              // LC-24: enter/exit styles are dead code without a resolved token
+              {...knobProps.elevatedSurface}
+              padding={0}
+              overflow="hidden"
+              minWidth={220}
               transition={knobProps.transition}
-              enterStyle={{ y: -10, opacity: 0 }}
-              exitStyle={{ y: -10, opacity: 0 }}
+              enterStyle={{ y: -4, opacity: 0 }}
+              exitStyle={{ y: -4, opacity: 0 }}
             >
-              <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-              {renderPopoverContent()}
+              <ScrollView maxHeight={240}>{renderListboxOrdered()}</ScrollView>
             </Popover.Content>
           </Popover>
+        ) : (
+          field
         )}
-
-        {tags.length === 0 && enableAdd && !isPopoverOpen && (
-          <Text
-            color={componentColors.text.muted}
-            fontSize={compact ? "$1" : "$2"}
-            marginInlineStart="$1"
-          >
-            {clickToAddLabel}
-          </Text>
-        )}
-      </XStack>
+      </YStack>
     </YStack>
   );
 }

package/src/layouts/timeline-comments.spec.tsx

@@ -240,4 +240,21 @@ describe("Timeline comment section rendering", () => {
     renderWithProviders(<Timeline entries={entries} disabled onCommentAdded={() => {}} />);
     expect(screen.queryByPlaceholderText("Add a comment...")).not.toBeInTheDocument();
   });
+
+  // LC-54 amendment (2026-08-13) VERIFY arm: the Reply button IS the grown
+  // transparent press target (pressTargetStyle + negative outset + hitSlop),
+  // so in hover/press it keeps `background-color: transparent` — the house
+  // Button's default hover/press fills would paint the full 44px floor over
+  // the comment text above (measured 56×6px of overlap pre-fix). jsdom never
+  // applies :hover, but tamagui compiles state backgrounds into
+  // value-carrying atomic classes, so the paint channel is asserted through
+  // the atoms: the transparent eject atoms MUST be present (they vanish if
+  // the eject is reverted) and no painted-value atom may remain.
+  it("Reply floor pins hover/press backgrounds to transparent (LC-54)", () => {
+    renderWithProviders(<Timeline entries={entries} onCommentSubmit={() => {}} />);
+    const reply = screen.getByRole("button", { name: "Reply John Doe" });
+    expect(reply.className).toMatch(/_bg-0hover-transparent/);
+    expect(reply.className).toMatch(/_bg-0active-transparent/);
+    expect(reply.className).not.toMatch(/_bg-0(?:hover|active)-(?!transparent)/);
+  });
 });