@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/layouts/tags.cjs

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(tags_exports);
 var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../Chip/index.cjs");
 var import_componentColors = require("../componentColors.cjs");
@@ -67,19 +67,27 @@ function Tags({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const placeholder = placeholderProp ?? t("Add tag...");
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)();
   const inputRef = (0, import_react2.useRef)(null);
+  const listboxId = (0, import_react2.useId)();
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    (0, import_theme.ensureKeyboardModalityTracking)();
+  }
   const chipSize = compact ? knobProps.sizeToken === "$5" ? "$4" : knobProps.sizeToken === "$4" ? "$3" : "$2" : knobProps.sizeToken;
   const [inputValue, setInputValue] = (0, import_react2.useState)("");
   const [isPopoverOpen, setIsPopoverOpen] = (0, import_react2.useState)(false);
+  const [addKbFocus, setAddKbFocus] = (0, import_react2.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(-1);
+  const [kbNav, setKbNav] = (0, import_react2.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 => (0, import_t.withInterp)(t('Create "{{value}}"'), {
@@ -101,49 +109,115 @@ function Tags({
     if (maxTags > 0 && tags.length >= maxTags) return false;
     return true;
   }, [disabled, enableAdd, onAdd, maxTags, tags.length]);
+  const trimmedInput = inputValue.trim();
+  const canCreate = canAdd && trimmedInput.length > 0 && !appliedTagNames.has(trimmedInput.toLowerCase());
+  const listOptions = (0, import_react2.useMemo)(() => {
+    const rows = [];
+    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 = (0, import_react2.useCallback)(tagName => {
     const trimmedName = tagName.trim();
     if (!trimmedName || !canAdd) return;
     if (appliedTagNames.has(trimmedName.toLowerCase())) return;
     setInputValue("");
-    setIsPopoverOpen(false);
+    setActiveIndex(-1);
     onAdd?.(trimmedName);
   }, [canAdd, appliedTagNames, onAdd]);
+  const handleSelectOption = (0, import_react2.useCallback)(option => {
+    if (option.kind === "create") {
+      handleAddTag(trimmedInput);
+      return;
+    }
+    handleAddTag(option.label);
+  }, [handleAddTag, trimmedInput]);
   const handleInputChange = (0, import_react2.useCallback)(text => {
     setInputValue(text);
     setIsPopoverOpen(true);
+    setKbNav(false);
+    setActiveIndex(0);
   }, []);
-  const handleKeyPress = (0, import_react2.useCallback)(e => {
-    if (e.key === "Enter" && inputValue.trim()) {
+  const handleKeyDown = (0, import_react2.useCallback)(e => {
+    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] : 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]);
-  const handleSelectSuggestion = (0, import_react2.useCallback)(tagLabel => {
-    handleAddTag(tagLabel);
-  }, [handleAddTag]);
+    if (e.key === "," && trimmedInput) {
+      e.preventDefault();
+      handleAddTag(trimmedInput);
+    }
+  }, [listOptions, activeIndex, handleSelectOption, handleAddTag, trimmedInput, inputValue, enableRemove, onRemove, tags]);
   (0, import_react2.useEffect)(() => {
     if (isPopoverOpen && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isPopoverOpen]);
+  (0, import_react2.useEffect)(() => {
+    if (activeIndex >= listOptions.length) {
+      setActiveIndex(listOptions.length === 0 ? -1 : 0);
+    }
+  }, [activeIndex, listOptions.length]);
   const emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    padding: compact ? "$1" : "$2",
     alignItems: "center",
-    opacity: 0.5,
     gap: "$2",
-    ...{
-      backgroundColor: import_componentColors.componentColors.surface.background
-    },
-    ...knobProps.borderRadius,
+    opacity: 0.5,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TagIcon, {
       size: compact ? 14 : 16
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       color: import_componentColors.componentColors.text.muted,
       fontSize: compact ? "$1" : "$2",
+      ...knobProps.body,
       children: noTagsLabel
     })]
   });
@@ -163,7 +237,11 @@ function Tags({
     });
     const defaultContent = onTagClick ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       cursor: "pointer",
-      onPress: () => onTagClick(tag),
+      "data-tag-chip": "",
+      onPress: e => {
+        e.stopPropagation?.();
+        onTagClick(tag);
+      },
       role: "button",
       "aria-label": tag.label,
       hoverStyle: {
@@ -173,63 +251,223 @@ function Tags({
         opacity: 0.7
       },
       children: chip
-    }, tag.id) : chip;
+    }, tag.id) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      "data-tag-chip": "",
+      children: chip
+    });
     if (renderTag) {
       return renderTag(tag, defaultContent, actions);
     }
     return defaultContent;
   };
-  const renderPopoverContent = () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.panelPadding,
-    ...knobProps.gap,
-    minWidth: 200,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
-      ref: inputRef,
-      value: inputValue,
-      onChangeText: handleInputChange,
-      onKeyDown: handleKeyPress,
-      placeholder,
-      size: chipSize,
-      ...knobProps.inputSurface,
-      autoFocus: true
-    }), inputValue.trim() && !appliedTagNames.has(inputValue.toLowerCase().trim()) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-      size: chipSize,
-      onPress: () => handleAddTag(inputValue),
-      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-        size: 16
-      }),
-      children: createTagLabel(inputValue.trim())
-    }), availableSuggestions.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$1",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+  const activeOptionId = isPopoverOpen && activeIndex >= 0 && listOptions[activeIndex] ? `${listboxId}-opt-${activeIndex}` : void 0;
+  const showEmptyMessage = isPopoverOpen && trimmedInput === "" && availableSuggestions.length === 0 && !canCreate;
+  const renderListboxOrdered = () => {
+    const createOption = listOptions.find(o => o.kind === "create");
+    const suggestionOptions = listOptions.filter(o => o.kind === "suggestion");
+    const renderRow = (option, index) => {
+      const isActive = index === activeIndex;
+      const rowRing = isActive && kbNav ? (0, import_theme.ensureFocusVisibleRing)({
+        outlineOffset: -2
+      }) : {
+        outlineWidth: 0
+      };
+      const fill = isActive ? import_componentColors.componentColors.interactive.hover : "transparent";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...import_theme.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: import_componentColors.componentColors.interactive.hover,
+          borderRadius: 0
+        },
+        pressStyle: {
+          backgroundColor: import_componentColors.componentColors.interactive.active,
+          borderRadius: 0
+        },
+        cursor: "pointer",
+        ...rowRing,
+        onMouseEnter: () => {
+          setKbNav(false);
+          setActiveIndex(index);
+        },
+        onPress: () => handleSelectOption(option),
+        children: [option.kind === "create" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+          size: 16
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.body,
+          color: import_componentColors.componentColors.text.primary,
+          children: option.label
+        })]
+      }, option.key);
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...{
+        role: "listbox"
+      },
+      id: listboxId,
+      "aria-label": suggestionsLabel,
+      onMouseDown: e => {
+        e.preventDefault();
+      },
+      children: [createOption ? renderRow(createOption, 0) : null, suggestionOptions.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$1",
         color: import_componentColors.componentColors.text.muted,
-        paddingInlineStart: "$1",
+        paddingHorizontal: "$3",
+        paddingVertical: "$1.5",
         children: suggestionsLabel
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-        maxHeight: 150,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          gap: "$1",
-          children: availableSuggestions.map(tag => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-            title: tag.label,
+      }), suggestionOptions.map((option, i) => renderRow(option, (createOption ? 1 : 0) + i)), showEmptyMessage && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$2",
+        color: import_componentColors.componentColors.text.muted,
+        textAlign: "center",
+        padding: "$3",
+        ...knobProps.body,
+        children: noAvailableTagsLabel
+      })]
+    });
+  };
+  const openAdd = (0, import_react2.useCallback)(() => {
+    if (!canAdd) return;
+    setIsPopoverOpen(true);
+  }, [canAdd]);
+  const fieldPadH = compact ? "$2" : "$2.5";
+  const fieldPadV = compact ? "$1.5" : "$2";
+  const field = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    "data-testid": "tags-field",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "$1.5",
+    width: "100%",
+    minHeight: knobProps.sizeToken,
+    paddingHorizontal: fieldPadH,
+    paddingVertical: fieldPadV,
+    backgroundColor: import_componentColors.componentColors.surface.background,
+    ...knobProps.inputSurface,
+    ...knobProps.borderRadius,
+    overflow: "hidden",
+    cursor: canAdd ? "text" : "default",
+    ...(import_tamagui.isWeb ? {
+      className: "mp-composite-ring"
+    } : {}),
+    outlineWidth: 0,
+    hoverStyle: canAdd ? {
+      borderColor: import_componentColors.componentColors.interactive.border
+    } : void 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(disabled ? {
+      "aria-disabled": true,
+      ...disabledState.surfaceKnobProps,
+      ...disabledState.assemblyKnobProps
+    } : void 0),
+    onPress: () => {
+      if (!canAdd) return;
+      openAdd();
+      inputRef.current?.focus();
+    },
+    children: [tags.length === 0 && !enableAdd ? emptyState : tags.map(tag => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
+      children: renderTagItem(tag)
+    }, tag.id)), canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        role: "button",
+        "aria-label": addTagLabel,
+        tabIndex: 0,
+        cursor: "pointer",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        ...(0, import_theme.pressTargetStyle)(),
+        minWidth: void 0,
+        paddingHorizontal: 3,
+        marginHorizontal: -3,
+        outlineWidth: 0,
+        focusStyle: {
+          outlineWidth: 0
+        },
+        focusVisibleStyle: {
+          outlineWidth: 0
+        },
+        onPress: e => {
+          e.stopPropagation?.();
+          openAdd();
+        },
+        onFocus: () => {
+          if ((0, import_theme.wasKeyboardFocus)()) setAddKbFocus(true);
+        },
+        onBlur: () => setAddKbFocus(false),
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openAdd();
+          }
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Chip.ChipFrame, {
+          size: chipSize,
+          variant: "outline",
+          backgroundColor: "transparent",
+          ...knobProps.borderRadius,
+          borderColor: import_componentColors.componentColors.interactive.border,
+          gap: compact ? 0 : "$1",
+          hoverStyle: {
+            backgroundColor: import_componentColors.componentColors.interactive.hover
+          },
+          pressStyle: {
+            backgroundColor: import_componentColors.componentColors.interactive.active
+          },
+          ...(addKbFocus ? (0, import_theme.ensureFocusVisibleRing)() : {
+            outlineWidth: 0
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+            size: (0, import_Chip.chipIconSize)(chipSize)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.ChipText, {
             size: chipSize,
-            hoverStyle: {
-              backgroundColor: import_componentColors.componentColors.interactive.background
-            },
-            pressStyle: {
-              backgroundColor: import_componentColors.componentColors.interactive.hover
-            },
-            onPress: () => handleSelectSuggestion(tag.label),
-            cursor: "pointer"
-          }, tag.id))
+            color: import_componentColors.componentColors.text.secondary,
+            children: compact ? "\u200B" : addTagLabel
+          })]
         })
-      })]
-    }), inputValue.trim() === "" && availableSuggestions.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$2",
-      color: import_componentColors.componentColors.text.muted,
-      textAlign: "center",
-      padding: "$2",
-      children: noAvailableTagsLabel
+      })
+    }), canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      ref: inputRef,
+      value: inputValue,
+      onChangeText: handleInputChange,
+      onKeyDown: handleKeyDown,
+      onFocus: () => 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: import_componentColors.componentColors.text.primary,
+      placeholderTextColor: import_componentColors.componentColors.text.muted,
+      autoComplete: "off",
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-expanded": isPopoverOpen,
+      "aria-controls": listboxId,
+      "aria-activedescendant": activeOptionId
     })]
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
@@ -239,7 +477,7 @@ function Tags({
       alignItems: "center",
       justifyContent: "space-between",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
-        fontSize: compact ? "$3" : "$4",
+        ...knobProps.label,
         fontWeight: "500",
         children: [label, maxTags > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
           color: import_componentColors.componentColors.text.muted,
@@ -247,90 +485,35 @@ function Tags({
           children: [" ", "(", tags.length, "/", maxTags, ")"]
         })]
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      gap: "$2",
-      alignItems: "center",
-      children: [tags.length === 0 && !enableAdd ? emptyState : tags.map(tag => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
-        children: renderTagItem(tag)
-      }, tag.id)), enableAdd && canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      width: "100%",
+      children: canAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
         open: isPopoverOpen,
         onOpenChange: setIsPopoverOpen,
         placement: "bottom-start",
         offset: 4,
         stayInFrame: true,
         allowFlip: true,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-          asChild: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            role: "button",
-            "aria-label": addTagLabel,
-            tabIndex: 0,
-            cursor: "pointer",
-            alignItems: "center",
-            justifyContent: "center",
-            ...(0, import_theme.pressTargetStyle)(),
-            minWidth: void 0,
-            paddingHorizontal: 3,
-            marginHorizontal: -3,
-            focusVisibleStyle: {
-              outlineColor: "$outlineColor",
-              outlineWidth: 2,
-              outlineStyle: "solid"
-            },
-            onKeyDown: e => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                setIsPopoverOpen(true);
-              }
-            },
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Chip.ChipFrame, {
-              size: chipSize,
-              variant: "outline",
-              backgroundColor: "transparent",
-              ...knobProps.borderRadius,
-              borderColor: import_componentColors.componentColors.interactive.border,
-              gap: compact ? 0 : "$1",
-              hoverStyle: {
-                backgroundColor: import_componentColors.componentColors.interactive.hover
-              },
-              pressStyle: {
-                backgroundColor: import_componentColors.componentColors.interactive.active
-              },
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-                size: (0, import_Chip.chipIconSize)(chipSize)
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.ChipText, {
-                size: chipSize,
-                color: import_componentColors.componentColors.text.secondary,
-                children: compact ? "\u200B" : addTagLabel
-              })]
-            })
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          borderRadius: knobProps.borderRadius.borderRadius,
-          elevation: knobProps.elevation,
+        children: [field, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
-            borderWidth: 1,
-            borderColor: "$borderColor"
-          }), renderPopoverContent()]
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 240,
+            children: renderListboxOrdered()
+          })
         })]
-      }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: import_componentColors.componentColors.text.muted,
-        fontSize: compact ? "$1" : "$2",
-        marginInlineStart: "$1",
-        children: clickToAddLabel
-      })]
+      }) : field
     })]
   });
 }