@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Select/index.cjs

@@ -45,24 +45,29 @@ var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const selectRowOutlineRest = {
+  outlineWidth: 0,
+  outlineStyle: "solid",
+  outlineColor: "transparent",
+  borderRadius: 0
+};
 const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SelectRow",
   ...import_theme.menuRowFrame,
+  ...selectRowOutlineRest,
   gap: "$2",
   cursor: "default",
   hoverStyle: {
-    backgroundColor: import_colorRamps.formInputColors.background.focus
-  },
-  focusStyle: {
-    outlineStyle: "none"
-  },
-  focusVisibleStyle: {
-    outlineStyle: "none"
+    backgroundColor: import_colorRamps.formInputColors.background.focus,
+    borderRadius: 0
   },
+  // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
+  // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
     selected: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.base
+        backgroundColor: import_colorRamps.formInputColors.background.base,
+        borderRadius: 0
       },
       false: {
         backgroundColor: "transparent"
@@ -70,7 +75,8 @@ const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
     },
     active: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.focus
+        backgroundColor: import_colorRamps.formInputColors.background.focus,
+        borderRadius: 0
       },
       false: {}
     },
@@ -144,6 +150,68 @@ function groupOptions(options) {
     flatOptions
   };
 }
+function useSelectKeyboardRing() {
+  const [kbTrigger, setKbTrigger] = (0, import_react.useState)(false);
+  const [kbNav, setKbNav] = (0, import_react.useState)(false);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const onTriggerFocus = (0, import_react.useCallback)(() => {
+    if ((0, import_theme.wasKeyboardFocus)()) setKbTrigger(true);
+  }, []);
+  const onTriggerBlur = (0, import_react.useCallback)(() => setKbTrigger(false), []);
+  const onTriggerPointerDown = (0, import_react.useCallback)(() => {
+    setKbTrigger(false);
+    setKbNav(false);
+  }, []);
+  return {
+    kbTrigger,
+    kbNav,
+    setKbNav,
+    onTriggerFocus,
+    onTriggerBlur,
+    onTriggerPointerDown
+  };
+}
+function selectTriggerRingProps(kbTrigger, open) {
+  if (kbTrigger && !open) {
+    return {
+      ...import_theme.keyboardFocusRingProps,
+      "data-kb-ring": "true"
+    };
+  }
+  return {
+    ...selectRowOutlineRest,
+    "data-kb-ring": void 0
+  };
+}
+function selectItemRingProps(isActive, kbNav) {
+  if (isActive && kbNav) {
+    return {
+      ...import_theme.keyboardFocusRingProps,
+      "data-kb-ring": "true",
+      // Inline beats Tamagui :focus/:focus-visible classes that otherwise
+      // clamp outlineWidth back to 0 (same trap as LC-71 on Tabs).
+      style: {
+        outline: "2px solid var(--outlineColor, var(--c-outlineColor, CanvasText))",
+        outlineOffset: "-2px"
+      }
+    };
+  }
+  return {
+    ...selectRowOutlineRest,
+    "data-kb-ring": void 0
+  };
+}
+function SyncKeyboardFocusToBox({
+  active
+}) {
+  const {
+    setFocused
+  } = import_InputParts.FocusContext.useStyledContext();
+  (0, import_react.useEffect)(() => {
+    setFocused(active);
+  }, [active, setFocused]);
+  return null;
+}
 const SelectItem = (0, import_react.memo)(function SelectItem2({
   option,
   index,
@@ -172,6 +240,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
         } else if (isDown(event.key) || isUp(event.key)) {
           event.preventDefault();
           event.stopPropagation();
+          ctx.setKbNav(true);
           if (optionCount === 0) return;
           const nextIndex = isDown(event.key) ? index + 1 >= optionCount ? 0 : index + 1 : index - 1 < 0 ? optionCount - 1 : index - 1;
           setActiveIndex(nextIndex);
@@ -181,6 +250,12 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
       onClick(event) {
         if (ctx.allowSelectRef.current) ctx.handleSelect(index, event);
       },
+      onFocus() {
+        ctx.setKbNav((0, import_theme.wasKeyboardFocus)());
+      },
+      onPointerDown() {
+        ctx.setKbNav(false);
+      },
       onMouseUp() {
         if (!ctx.allowMouseUpRef.current) {
           ctx.allowMouseUpRef.current = true;
@@ -196,6 +271,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
         });
       }
     }),
+    ...selectItemRingProps(Boolean(isActive), ctx.kbNav),
     role: "option",
     tabIndex: -1,
     selected: isSelected,
@@ -250,6 +326,14 @@ function FloatingSelectCore({
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   const [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
+  const {
+    kbTrigger,
+    kbNav,
+    setKbNav,
+    onTriggerFocus,
+    onTriggerBlur,
+    onTriggerPointerDown
+  } = useSelectKeyboardRing();
   const labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = (0, import_react.useCallback)(v => labelCacheRef.current.get(v) ?? v, []);
@@ -367,11 +451,11 @@ function FloatingSelectCore({
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
     let idealTop;
     if (selectedIndex >= 0) {
-      idealTop = triggerBounds.top - borderTopWidth - selectedItem.offsetTop;
+      idealTop = triggerBounds.top - selectedItem.offsetTop;
     } else if (panel.placement.startsWith("top")) {
       idealTop = triggerBounds.bottom - totalContentHeight;
     } else {
-      idealTop = triggerBounds.top - borderTopWidth - (selectedItem.offsetTop ?? 0);
+      idealTop = triggerBounds.top - (selectedItem.offsetTop ?? 0);
     }
     const idealBottom = idealTop + totalContentHeight;
     const pinnedTop = Math.max(import_FloatingPanel.panelViewportPadding, idealTop);
@@ -424,7 +508,7 @@ function FloatingSelectCore({
     if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
       const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
       if (selectedIndex >= 0) {
-        const neededScroll = top + borderTopWidth + selectedItem.offsetTop - triggerBounds.top;
+        const neededScroll = top + selectedItem.offsetTop - triggerBounds.top;
         const clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
         if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
           programmaticScrollRef.current++;
@@ -582,13 +666,16 @@ function FloatingSelectCore({
     selectTimeoutRef,
     isTypingRef: stateRef,
     listItemsRef,
-    multiple
+    multiple,
+    kbNav,
+    setKbNav
   };
   const referenceProps = getReferenceProps({
     ref: panel.setReferenceRef,
     onKeyDown(event) {
       if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
         event.preventDefault();
+        setKbNav(true);
         setOpen(true);
         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
       }
@@ -609,7 +696,7 @@ function FloatingSelectCore({
   boxEventProps["aria-expanded"] = open;
   boxEventProps["aria-autocomplete"] = "none";
   if (id) boxEventProps.id = id;
-  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (!(hasLabel && id) && placeholder) boxEventProps["aria-label"] = placeholder;
   if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   const handleScroll = (0, import_react.useCallback)(event => {
     const el = event.target;
@@ -641,19 +728,36 @@ function FloatingSelectCore({
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
       ...boxEventProps,
+      ...selectTriggerRingProps(kbTrigger, open),
+      onFocus: e => {
+        boxEventProps.onFocus?.(e);
+        onTriggerFocus();
+      },
+      ...{
+        onFocusCapture: onTriggerFocus
+      },
+      onBlur: e => {
+        boxEventProps.onBlur?.(e);
+        onTriggerBlur();
+      },
+      onPointerDown: e => {
+        boxEventProps.onPointerDown?.(e);
+        onTriggerPointerDown();
+      },
       "data-testid": "select-trigger",
       cursor: "pointer",
       disabled,
+      suppressFocusRing: open,
       size: knobProps.sizeToken,
-      minHeight: 44,
+      minHeight: import_theme.MIN_PRESS_TARGET,
       ...(inTableCell ?
       // Chromeless in cells (the floor above still applies).
       {} : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
-        open
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SyncKeyboardFocusToBox, {
+        active: kbTrigger && !open
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flex: 1,
         paddingHorizontal: knobProps.panelPadding.padding,
@@ -731,10 +835,12 @@ function FloatingSelectCore({
               if (isDown) {
                 e.preventDefault();
                 e.stopPropagation();
+                setKbNav(true);
                 setActiveIndex(prev => prev == null ? 0 : prev + 1 >= count ? 0 : prev + 1);
               } else if (isUp) {
                 e.preventDefault();
                 e.stopPropagation();
+                setKbNav(true);
                 setActiveIndex(prev => prev == null ? count - 1 : prev - 1 < 0 ? count - 1 : prev - 1);
               } else if (e.key === "Enter" || e.key === " " || e.code === "Space") {
                 e.preventDefault();
@@ -822,6 +928,14 @@ function NativeSelectCore({
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
   const listRef = (0, import_react.useRef)(null);
+  const {
+    kbTrigger,
+    kbNav,
+    setKbNav,
+    onTriggerFocus,
+    onTriggerBlur,
+    onTriggerPointerDown
+  } = useSelectKeyboardRing();
   const labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = (0, import_react.useCallback)(v => labelCacheRef.current.get(v) ?? v, []);
@@ -866,12 +980,14 @@ function NativeSelectCore({
     const isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKbNav(true);
       setActiveIndex(prev => {
         const next = prev == null ? 0 : prev + 1;
         return next >= count ? 0 : next;
       });
     } else if (isUp) {
       e.preventDefault();
+      setKbNav(true);
       setActiveIndex(prev => {
         const next = prev == null ? count - 1 : prev - 1;
         return next < 0 ? count - 1 : next;
@@ -884,7 +1000,7 @@ function NativeSelectCore({
         if (option) handleSelect(option.value);
       }
     }
-  }, [options, activeIndex, handleSelect]);
+  }, [options, activeIndex, handleSelect, setKbNav]);
   const listContent =
   // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
   // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
@@ -897,7 +1013,8 @@ function NativeSelectCore({
     ref: listRef,
     ...(import_tamagui.isWeb ? {
       tabIndex: 0,
-      onKeyDown: handleListKeyDown
+      onKeyDown: handleListKeyDown,
+      onFocus: () => setKbNav((0, import_theme.wasKeyboardFocus)())
     } : void 0),
     outlineStyle: "none",
     children: [groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
@@ -915,11 +1032,14 @@ function NativeSelectCore({
       const row = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
         flexDirection: "row",
         alignItems: "center",
+        borderRadius: 0,
         ...knobProps.gap,
         paddingHorizontal: knobProps.panelPadding.padding,
         height: knobProps.sizeToken,
         onPress: import_tamagui.isWeb ? () => handleSelect(option.value) : void 0,
         onMouseEnter: () => setActiveIndex(i),
+        onPointerDown: import_tamagui.isWeb ? () => setKbNav(false) : void 0,
+        ...(import_tamagui.isWeb ? selectItemRingProps(active, kbNav) : void 0),
         hoverStyle: activeIndex != null ? {
           backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
         } : {
@@ -969,11 +1089,12 @@ function NativeSelectCore({
     trigger: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
       disabled,
       size: knobProps.sizeToken,
-      minHeight: 44,
+      minHeight: import_theme.MIN_PRESS_TARGET,
       ...(inTableCell ? {} : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
+      ...(import_tamagui.isWeb ? selectTriggerRingProps(kbTrigger, open) : void 0),
       "data-testid": "select-trigger",
       id,
       ...(import_tamagui.isWeb ? {
@@ -982,22 +1103,29 @@ function NativeSelectCore({
         "aria-expanded": open,
         "aria-autocomplete": "none",
         // Standalone (no label): fall back to placeholder so the
-        // trigger still has a name (axe button-name)
+        // trigger still has a name (axe button-name). Labelled: the
+        // sibling Label wires `aria-labelledby` onto this id itself —
+        // naming it here too doubles the spoken name.
         "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
-        "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
         "aria-describedby": describedBy,
         tabIndex: disabled ? -1 : 0
       } : {
         importantForAccessibility: "no"
       }),
       onPress: import_tamagui.isWeb && !disabled ? () => setOpen(prev => !prev) : void 0,
+      onFocus: import_tamagui.isWeb ? onTriggerFocus : void 0,
+      onBlur: import_tamagui.isWeb ? onTriggerBlur : void 0,
+      onPointerDown: import_tamagui.isWeb ? onTriggerPointerDown : void 0,
       onKeyDown: e => {
         if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
           e.preventDefault();
+          setKbNav(true);
           if (!open) setOpen(true);
         }
       },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SyncKeyboardFocusToBox, {
+        active: kbTrigger && !open
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flex: 1,
         paddingHorizontal: knobProps.panelPadding.padding,
         paddingVertical: "$2",
@@ -1103,7 +1231,7 @@ function Select({
       children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "text",
         width: "30%",
-        height: 14
+        height: (0, import_theme.sizeRecipeForToken)(String(sizeProp || knobProps.sizeToken)).fontSize
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "rounded",
         width: "100%",