@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/esm/layouts/tags.native.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, Input, Label, ListItem, Popover, ScrollView, Text, View, XStack, YStack } from "tamagui";
+import { 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.native.js";
+import { Input, Label, Popover, ScrollView, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { Chip, ChipFrame, ChipText, chipIconSize } from "../Chip/index.native.js";
 import { componentColors } from "../componentColors.native.js";
 import { withInterp } from "../shared/t.native.js";
@@ -33,16 +33,24 @@ function Tags(param) {
   } = useTranslation();
   var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : t("Add tag...");
   var {
-    knobProps
+    knobProps,
+    disabledState
   } = useResolvedKnobs();
   var inputRef = useRef(null);
+  var listboxId = useId();
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureKeyboardModalityTracking();
+  }
   var chipSize = compact ? knobProps.sizeToken === "$5" ? "$4" : knobProps.sizeToken === "$4" ? "$3" : "$2" : knobProps.sizeToken;
   var [inputValue, setInputValue] = useState("");
   var [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  var [addKbFocus, setAddKbFocus] = useState(false);
+  var [activeIndex, setActiveIndex] = useState(-1);
+  var [kbNav, setKbNav] = useState(false);
   var {
     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 = function (value) {
@@ -70,47 +78,135 @@ function Tags(param) {
     if (maxTags > 0 && tags.length >= maxTags) return false;
     return true;
   }, [disabled, enableAdd, onAdd, maxTags, tags.length]);
+  var trimmedInput = inputValue.trim();
+  var canCreate = canAdd && trimmedInput.length > 0 && !appliedTagNames.has(trimmedInput.toLowerCase());
+  var listOptions = useMemo(function () {
+    var rows = [];
+    if (canCreate) {
+      rows.push({
+        kind: "create",
+        key: "create",
+        label: createTagLabel(trimmedInput)
+      });
+    }
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = availableSuggestions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var tag = _step.value;
+        rows.push({
+          kind: "suggestion",
+          key: tag.id,
+          label: tag.label,
+          tag
+        });
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return rows;
+  }, [canCreate, createTagLabel, trimmedInput, availableSuggestions]);
   var handleAddTag = useCallback(function (tagName) {
     var trimmedName = tagName.trim();
     if (!trimmedName || !canAdd) return;
     if (appliedTagNames.has(trimmedName.toLowerCase())) return;
     setInputValue("");
-    setIsPopoverOpen(false);
+    setActiveIndex(-1);
     onAdd === null || onAdd === void 0 ? void 0 : onAdd(trimmedName);
   }, [canAdd, appliedTagNames, onAdd]);
+  var handleSelectOption = useCallback(function (option) {
+    if (option.kind === "create") {
+      handleAddTag(trimmedInput);
+      return;
+    }
+    handleAddTag(option.label);
+  }, [handleAddTag, trimmedInput]);
   var handleInputChange = useCallback(function (text) {
     setInputValue(text);
     setIsPopoverOpen(true);
+    setKbNav(false);
+    setActiveIndex(0);
   }, []);
-  var handleKeyPress = useCallback(function (e) {
-    if (e.key === "Enter" && inputValue.trim()) {
+  var handleKeyDown = useCallback(function (e) {
+    var _e_nativeEvent;
+    if ((_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.isComposing) return;
+    var count = listOptions.length;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setIsPopoverOpen(true);
+      setKbNav(true);
+      setActiveIndex(function (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(function (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();
+      var option = activeIndex >= 0 ? listOptions[activeIndex] : void 0;
+      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;
     }
-  }, [inputValue, handleAddTag]);
-  var handleSelectSuggestion = useCallback(function (tagLabel) {
-    handleAddTag(tagLabel);
-  }, [handleAddTag]);
+    if (e.key === "," && trimmedInput) {
+      e.preventDefault();
+      handleAddTag(trimmedInput);
+    }
+  }, [listOptions, activeIndex, handleSelectOption, handleAddTag, trimmedInput, inputValue, enableRemove, onRemove, tags]);
   useEffect(function () {
     if (isPopoverOpen && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isPopoverOpen]);
+  useEffect(function () {
+    if (activeIndex >= listOptions.length) {
+      setActiveIndex(listOptions.length === 0 ? -1 : 0);
+    }
+  }, [activeIndex, listOptions.length]);
   var emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */_jsxs(XStack, {
-    padding: compact ? "$1" : "$2",
     alignItems: "center",
-    opacity: 0.5,
     gap: "$2",
-    backgroundColor: componentColors.surface.background,
-    ...knobProps.borderRadius,
+    opacity: 0.5,
     children: [/* @__PURE__ */_jsx(TagIcon, {
       size: compact ? 14 : 16
     }), /* @__PURE__ */_jsx(Text, {
       color: componentColors.text.muted,
       fontSize: compact ? "$1" : "$2",
+      ...knobProps.body,
       children: noTagsLabel
     })]
   });
@@ -132,11 +228,12 @@ function Tags(param) {
     });
     var defaultContent = onTagClick ? /* @__PURE__ */_jsx(XStack, {
       cursor: "pointer",
-      onPress: function onPress() {
-        return onTagClick(tag);
+      "data-tag-chip": "",
+      onPress: function onPress(e) {
+        var _e_stopPropagation;
+        (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+        onTagClick(tag);
       },
-      // role, not accessibilityRole: the RN-only prop leaks onto the DOM
-      // <div> on web; RN maps role="button" to accessibilityRole natively.
       role: "button",
       "aria-label": tag.label,
       hoverStyle: {
@@ -146,73 +243,243 @@ function Tags(param) {
         opacity: 0.7
       },
       children: chip
-    }, tag.id) : chip;
+    }, tag.id) : /* @__PURE__ */_jsx(View, {
+      "data-tag-chip": "",
+      children: chip
+    });
     if (renderTag) {
       return renderTag(tag, defaultContent, actions);
     }
     return defaultContent;
   };
-  var renderPopoverContent = function renderPopoverContent2() {
-    return /* @__PURE__ */_jsxs(YStack, {
-      ...knobProps.panelPadding,
-      ...knobProps.gap,
-      minWidth: 200,
-      children: [/* @__PURE__ */_jsx(Input, {
-        ref: inputRef,
-        value: inputValue,
-        onChangeText: handleInputChange,
-        onKeyDown: handleKeyPress,
-        placeholder,
-        size: chipSize,
-        ...knobProps.inputSurface,
-        autoFocus: true
-      }), inputValue.trim() && !appliedTagNames.has(inputValue.toLowerCase().trim()) && /* @__PURE__ */_jsx(Button, {
-        size: chipSize,
+  var activeOptionId = isPopoverOpen && activeIndex >= 0 && listOptions[activeIndex] ? `${listboxId}-opt-${activeIndex}` : void 0;
+  var showEmptyMessage = isPopoverOpen && trimmedInput === "" && availableSuggestions.length === 0 && !canCreate;
+  var renderListboxOrdered = function renderListboxOrdered2() {
+    var createOption = listOptions.find(function (o) {
+      return o.kind === "create";
+    });
+    var suggestionOptions = listOptions.filter(function (o) {
+      return o.kind === "suggestion";
+    });
+    var renderRow = function renderRow2(option, index) {
+      var isActive = index === activeIndex;
+      var rowRing = isActive && kbNav ? ensureFocusVisibleRing({
+        outlineOffset: -2
+      }) : {
+        outlineWidth: 0
+      };
+      var fill = isActive ? componentColors.interactive.hover : "transparent";
+      return /* @__PURE__ */_jsxs(XStack, {
+        ...menuRowFrame,
+        id: `${listboxId}-opt-${index}`,
+        role: option.kind === "create" ? "button" : "option",
+        "aria-label": option.kind === "create" ? option.label : void 0,
+        "aria-selected": option.kind === "suggestion" ? isActive : void 0,
+        "data-active": isActive || void 0,
+        backgroundColor: fill,
+        hoverStyle: {
+          backgroundColor: componentColors.interactive.hover,
+          borderRadius: 0
+        },
+        pressStyle: {
+          backgroundColor: componentColors.interactive.active,
+          borderRadius: 0
+        },
+        cursor: "pointer",
+        ...rowRing,
+        onMouseEnter: function onMouseEnter() {
+          setKbNav(false);
+          setActiveIndex(index);
+        },
         onPress: function onPress() {
-          return handleAddTag(inputValue);
+          return handleSelectOption(option);
         },
-        icon: /* @__PURE__ */_jsx(PlusIcon, {
+        children: [option.kind === "create" ? /* @__PURE__ */_jsx(PlusIcon, {
           size: 16
-        }),
-        children: createTagLabel(inputValue.trim())
-      }), availableSuggestions.length > 0 && /* @__PURE__ */_jsxs(YStack, {
-        gap: "$1",
-        children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: "$1",
-          color: componentColors.text.muted,
-          paddingInlineStart: "$1",
-          children: suggestionsLabel
-        }), /* @__PURE__ */_jsx(ScrollView, {
-          maxHeight: 150,
-          children: /* @__PURE__ */_jsx(YStack, {
-            gap: "$1",
-            children: availableSuggestions.map(function (tag) {
-              return /* @__PURE__ */_jsx(ListItem, {
-                title: tag.label,
-                size: chipSize,
-                hoverStyle: {
-                  backgroundColor: componentColors.interactive.background
-                },
-                pressStyle: {
-                  backgroundColor: componentColors.interactive.hover
-                },
-                onPress: function onPress() {
-                  return handleSelectSuggestion(tag.label);
-                },
-                cursor: "pointer"
-              }, tag.id);
-            })
-          })
+        }) : null, /* @__PURE__ */_jsx(Text, {
+          ...knobProps.body,
+          color: componentColors.text.primary,
+          children: option.label
         })]
-      }), inputValue.trim() === "" && availableSuggestions.length === 0 && /* @__PURE__ */_jsx(Text, {
+      }, option.key);
+    };
+    return /* @__PURE__ */_jsxs(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"
+      },
+      id: listboxId,
+      "aria-label": suggestionsLabel,
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      },
+      children: [createOption ? renderRow(createOption, 0) : null, suggestionOptions.length > 0 && /* @__PURE__ */_jsx(Text, {
+        fontSize: "$1",
+        color: componentColors.text.muted,
+        paddingHorizontal: "$3",
+        paddingVertical: "$1.5",
+        children: suggestionsLabel
+      }), suggestionOptions.map(function (option, i) {
+        return renderRow(option, (createOption ? 1 : 0) + i);
+      }), showEmptyMessage && /* @__PURE__ */_jsx(Text, {
         fontSize: "$2",
         color: componentColors.text.muted,
         textAlign: "center",
-        padding: "$2",
+        padding: "$3",
+        ...knobProps.body,
         children: noAvailableTagsLabel
       })]
     });
   };
+  var openAdd = useCallback(function () {
+    if (!canAdd) return;
+    setIsPopoverOpen(true);
+  }, [canAdd]);
+  var fieldPadH = compact ? "$2" : "$2.5";
+  var fieldPadV = compact ? "$1.5" : "$2";
+  var field = /* @__PURE__ */_jsxs(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
+    } : void 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(disabled ? {
+      "aria-disabled": true,
+      ...disabledState.surfaceKnobProps,
+      ...disabledState.assemblyKnobProps
+    } : void 0),
+    onPress: function onPress() {
+      var _inputRef_current;
+      if (!canAdd) return;
+      openAdd();
+      (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    },
+    children: [tags.length === 0 && !enableAdd ? emptyState : tags.map(function (tag) {
+      return /* @__PURE__ */_jsx(React.Fragment, {
+        children: renderTagItem(tag)
+      }, tag.id);
+    }), canAdd && /* @__PURE__ */_jsx(Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */_jsx(View, {
+        role: "button",
+        "aria-label": addTagLabel,
+        tabIndex: 0,
+        cursor: "pointer",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        ...pressTargetStyle(),
+        minWidth: void 0,
+        paddingHorizontal: 3,
+        marginHorizontal: -3,
+        outlineWidth: 0,
+        focusStyle: {
+          outlineWidth: 0
+        },
+        focusVisibleStyle: {
+          outlineWidth: 0
+        },
+        onPress: function onPress(e) {
+          var _e_stopPropagation;
+          (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+          openAdd();
+        },
+        onFocus: function onFocus() {
+          if (wasKeyboardFocus()) setAddKbFocus(true);
+        },
+        onBlur: function onBlur() {
+          return setAddKbFocus(false);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openAdd();
+          }
+        },
+        children: /* @__PURE__ */_jsxs(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
+          }),
+          children: [/* @__PURE__ */_jsx(PlusIcon, {
+            size: chipIconSize(chipSize)
+          }), /* @__PURE__ */_jsx(ChipText, {
+            size: chipSize,
+            color: componentColors.text.secondary,
+            children: compact ? "\u200B" : addTagLabel
+          })]
+        })
+      })
+    }), canAdd && /* @__PURE__ */_jsx(Input, {
+      ref: inputRef,
+      value: inputValue,
+      onChangeText: handleInputChange,
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        return setIsPopoverOpen(true);
+      },
+      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
+    })]
+  });
   return /* @__PURE__ */_jsxs(YStack, {
     ...knobProps.gap,
     ...stackProps,
@@ -220,7 +487,7 @@ function Tags(param) {
       alignItems: "center",
       justifyContent: "space-between",
       children: /* @__PURE__ */_jsxs(Label, {
-        fontSize: compact ? "$3" : "$4",
+        ...knobProps.label,
         fontWeight: "500",
         children: [label, maxTags > 0 && /* @__PURE__ */_jsxs(Text, {
           color: componentColors.text.muted,
@@ -228,105 +495,35 @@ function Tags(param) {
           children: [" ", "(", tags.length, "/", maxTags, ")"]
         })]
       })
-    }), /* @__PURE__ */_jsxs(XStack, {
-      flexWrap: "wrap",
-      gap: "$2",
-      alignItems: "center",
-      children: [tags.length === 0 && !enableAdd ? emptyState : tags.map(function (tag) {
-        return /* @__PURE__ */_jsx(React.Fragment, {
-          children: renderTagItem(tag)
-        }, tag.id);
-      }), enableAdd && canAdd && /* @__PURE__ */_jsxs(Popover, {
+    }), /* @__PURE__ */_jsx(YStack, {
+      width: "100%",
+      children: canAdd ? /* @__PURE__ */_jsxs(Popover, {
         open: isPopoverOpen,
         onOpenChange: setIsPopoverOpen,
         placement: "bottom-start",
         offset: 4,
         stayInFrame: true,
         allowFlip: true,
-        children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-          asChild: true,
-          children: (
-          /* 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. */
-          /* @__PURE__ */
-          _jsx(View, {
-            role: "button",
-            "aria-label": addTagLabel,
-            tabIndex: 0,
-            cursor: "pointer",
-            alignItems: "center",
-            justifyContent: "center",
-            ...pressTargetStyle(),
-            minWidth: void 0,
-            paddingHorizontal: 3,
-            marginHorizontal: -3,
-            focusVisibleStyle: {
-              outlineColor: "$outlineColor",
-              outlineWidth: 2,
-              outlineStyle: "solid"
-            },
-            onKeyDown: function onKeyDown(e) {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                setIsPopoverOpen(true);
-              }
-            },
-            children: /* @__PURE__ */_jsxs(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
-              },
-              children: [/* @__PURE__ */_jsx(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. */
-              /* @__PURE__ */
-              _jsx(ChipText, {
-                size: chipSize,
-                color: componentColors.text.secondary,
-                children: compact ? "\u200B" : addTagLabel
-              })]
-            })
-          }))
-        }), /* @__PURE__ */_jsxs(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
+        children: [field, /* @__PURE__ */_jsx(Popover.Content, {
+          ...knobProps.elevatedSurface,
+          padding: 0,
+          overflow: "hidden",
+          minWidth: 220,
           transition: knobProps.transition,
           enterStyle: {
-            y: -10,
+            y: -4,
             opacity: 0
           },
           exitStyle: {
-            y: -10,
+            y: -4,
             opacity: 0
           },
-          children: [/* @__PURE__ */_jsx(Popover.Arrow, {
-            borderWidth: 1,
-            borderColor: "$borderColor"
-          }), renderPopoverContent()]
+          children: /* @__PURE__ */_jsx(ScrollView, {
+            maxHeight: 240,
+            children: renderListboxOrdered()
+          })
         })]
-      }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */_jsx(Text, {
-        color: componentColors.text.muted,
-        fontSize: compact ? "$1" : "$2",
-        marginInlineStart: "$1",
-        children: clickToAddLabel
-      })]
+      }) : field
     })]
   });
 }