@multiplatform.one/forms 7.57.0 → 7.59.0

package/dist/jsx/fields/Select/InlineChoices.mjs

@@ -0,0 +1,123 @@
+import { hairline, IconSlot, keyboardFocusRingProps } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
+import { useRef } from "react";
+import { Pressable } from "react-native-web";
+import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout.mjs";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { choiceItemA11y } from "../../shared/nativeA11y.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const nextKeys = /* @__PURE__ */new Set(["ArrowDown", "ArrowRight"]);
+const previousKeys = /* @__PURE__ */new Set(["ArrowUp", "ArrowLeft"]);
+function InlineChoices({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  labelledBy,
+  "aria-label": ariaLabel,
+  knobProps,
+  markColor
+}) {
+  const describedBy = useFieldDescribedBy();
+  const rowsRef = useRef([]);
+  const textColor = knobProps.textAccentColor;
+  const selectedIndex = options.findIndex(option => option.value === value);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  const choose = index => {
+    const option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+  const onKeyDown = index => event => {
+    const step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+    if (step) {
+      event.preventDefault();
+      const next = (index + step + options.length) % options.length;
+      rowsRef.current[next]?.focus();
+      choose(next);
+    } else if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      choose(index);
+    }
+  };
+  const rowContent = (option, index, selected) => /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    height: knobProps.menuRow.minHeight,
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    ...(index === 0 ? void 0 : hairline.top),
+    borderColor: formCommonColors.divider,
+    pointerEvents: "none",
+    children: [/* @__PURE__ */jsx(View, {
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 18,
+      children: /* @__PURE__ */jsx(IconSlot, {
+        icon: option.icon,
+        color: textColor
+      })
+    }), /* @__PURE__ */jsx(Text, {
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), selected ? /* @__PURE__ */jsx(CheckIcon, {
+      size: 14,
+      weight: "bold",
+      color: markColor
+    }) : null]
+  });
+  return /* @__PURE__ */jsx(YStack, {
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy ? void 0 : ariaLabel,
+    "aria-describedby": describedBy,
+    "aria-disabled": disabled || void 0,
+    "data-testid": "select-inline-choices",
+    ...knobProps.borderRadius,
+    borderColor: formInputColors.border.base,
+    backgroundColor: formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    children: options.map((option, index) => {
+      const selected = option.value === value;
+      if (isWeb) {
+        return /* @__PURE__ */jsx(View, {
+          ref: node => {
+            rowsRef.current[index] = node;
+          },
+          role: "radio",
+          "aria-checked": selected,
+          "aria-disabled": disabled || void 0,
+          tabIndex: !disabled && index === tabStop ? 0 : -1,
+          cursor: disabled ? "default" : "pointer",
+          onPress: () => choose(index),
+          onKeyDown: onKeyDown(index),
+          onBlur,
+          outlineWidth: 0,
+          focusVisibleStyle: keyboardFocusRingProps,
+          children: rowContent(option, index, selected)
+        }, option.value);
+      }
+      return /* @__PURE__ */jsx(Pressable, {
+        ...choiceItemA11y({
+          name: option.label,
+          selected,
+          disabled: !!disabled
+        }),
+        disabled,
+        onPress: () => choose(index),
+        children: rowContent(option, index, selected)
+      }, option.value);
+    })
+  });
+}
+export { InlineChoices };
+//# sourceMappingURL=InlineChoices.mjs.map

package/dist/jsx/fields/Select/InlineChoices.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["hairline","IconSlot","keyboardFocusRingProps","CheckIcon","useRef","Pressable","isWeb","Text","View","XStack","YStack","useFieldDescribedBy","formCommonColors","formInputColors","choiceItemA11y","jsx","jsxs","nextKeys","Set","previousKeys","InlineChoices","options","value","onValueChange","onBlur","disabled","id","labelledBy","ariaLabel","knobProps","markColor","describedBy","rowsRef","textColor","textAccentColor","selectedIndex","findIndex","option","tabStop","choose","index","onKeyDown","event","step","has","key","preventDefault","next","length","current","focus","rowContent","selected","alignItems","height","menuRow","minHeight","paddingHorizontal","panelPadding","padding","gap","top","borderColor","divider","pointerEvents","children","flexShrink","justifyContent","minWidth","icon","color","fontFamily","body","fontWeight","numberOfLines","flex","label","size","weight","role","borderRadius","border","base","backgroundColor","background","overflow","width","map","ref","node","tabIndex","cursor","onPress","outlineWidth","focusVisibleStyle","name"],"sources":["../../../../src/fields/Select/InlineChoices.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Select/InlineChoices.native.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var InlineChoices_exports = {};
+__export(InlineChoices_exports, {
+  InlineChoices: () => InlineChoices
+});
+module.exports = __toCommonJS(InlineChoices_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_nativeA11y = require("../../shared/nativeA11y.native.js");
+var nextKeys = /* @__PURE__ */new Set(["ArrowDown", "ArrowRight"]);
+var previousKeys = /* @__PURE__ */new Set(["ArrowUp", "ArrowLeft"]);
+function InlineChoices(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    disabled,
+    id,
+    labelledBy,
+    "aria-label": ariaLabel,
+    knobProps,
+    markColor
+  } = param;
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var rowsRef = (0, import_react2.useRef)([]);
+  var textColor = knobProps.textAccentColor;
+  var selectedIndex = options.findIndex(function (option) {
+    return option.value === value;
+  });
+  var tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  var choose = function choose2(index) {
+    var option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+  var onKeyDown = function onKeyDown2(index) {
+    return function (event) {
+      var step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+      if (step) {
+        var _rowsRef_current_next;
+        event.preventDefault();
+        var next = (index + step + options.length) % options.length;
+        (_rowsRef_current_next = rowsRef.current[next]) === null || _rowsRef_current_next === void 0 ? void 0 : _rowsRef_current_next.focus();
+        choose(next);
+      } else if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        choose(index);
+      }
+    };
+  };
+  var rowContent = function rowContent2(option, index, selected) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      height: knobProps.menuRow.minHeight,
+      paddingHorizontal: knobProps.panelPadding.padding,
+      ...knobProps.gap,
+      ...(index === 0 ? void 0 : import_theme.hairline.top),
+      borderColor: import_colorRamps.formCommonColors.divider,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flexShrink: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 18,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+          icon: option.icon,
+          color: textColor
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: textColor,
+        numberOfLines: 1,
+        flex: 1,
+        children: option.label
+      }), selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+        size: 14,
+        weight: "bold",
+        color: markColor
+      }) : null]
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy ? void 0 : ariaLabel,
+    "aria-describedby": describedBy,
+    "aria-disabled": disabled || void 0,
+    "data-testid": "select-inline-choices",
+    ...knobProps.borderRadius,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    backgroundColor: import_colorRamps.formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    children: options.map(function (option, index) {
+      var selected = option.value === value;
+      if (import_tamagui.isWeb) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ref: function ref(node) {
+            rowsRef.current[index] = node;
+          },
+          role: "radio",
+          "aria-checked": selected,
+          "aria-disabled": disabled || void 0,
+          tabIndex: !disabled && index === tabStop ? 0 : -1,
+          cursor: disabled ? "default" : "pointer",
+          onPress: function onPress() {
+            return choose(index);
+          },
+          onKeyDown: onKeyDown(index),
+          onBlur,
+          outlineWidth: 0,
+          focusVisibleStyle: import_theme.keyboardFocusRingProps,
+          children: rowContent(option, index, selected)
+        }, option.value);
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        ...(0, import_nativeA11y.choiceItemA11y)({
+          name: option.label,
+          selected,
+          disabled: !!disabled
+        }),
+        disabled,
+        onPress: function onPress() {
+          return choose(index);
+        },
+        children: rowContent(option, index, selected)
+      }, option.value);
+    })
+  });
+}
+//# sourceMappingURL=InlineChoices.native.js.map

package/dist/jsx/fields/Select/InlineChoices.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","InlineChoices_exports","InlineChoices","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_react_native","import_tamagui","import_fieldLayout","import_colorRamps","import_nativeA11y","nextKeys","Set","previousKeys","param","options","onValueChange","onBlur","disabled","id","labelledBy","ariaLabel","knobProps","markColor","describedBy","useFieldDescribedBy","rowsRef","useRef","textColor","textAccentColor","selectedIndex","findIndex","option","tabStop","choose","choose2","index","onKeyDown","onKeyDown2","event","step","has","_rowsRef_current_next","preventDefault","next","length","current","focus","rowContent","rowContent2","selected","jsxs","XStack","alignItems","height","menuRow","minHeight","paddingHorizontal","panelPadding","padding","gap","hairline","top","borderColor","formCommonColors","divider","pointerEvents","children","jsx","View","flexShrink","justifyContent","minWidth","IconSlot","icon","color","Text","fontFamily","body","fontWeight","numberOfLines","flex","label","CheckIcon","size","weight","YStack","role","borderRadius","formInputColors","border","base","backgroundColor","background","overflow","width","map","isWeb","ref","node"],"sources":["../../../../src/fields/Select/InlineChoices.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Select/index.mjs

@@ -1,5 +1,5 @@
-import { useTouchSurface } from "@multiplatform.one/theme";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, memo } from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
 import { ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, sizeRecipeForToken, useGlyphColor, wasKeyboardFocus, transitionProps, Text as HouseText } from "@multiplatform.one/theme";
@@ -16,13 +16,16 @@ import { warnSelectTooFewOptions } from "../../shared/devWarn.mjs";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { ScrollArrow } from "../../shared/floatingList.mjs";
 import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
+import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace.mjs";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.mjs";
-import { useOverlayZIndex } from "../../shared/overlayStack.mjs";
+import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack.mjs";
 import { useDragScroll } from "../../shared/useDragScroll.mjs";
 import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
 import { t } from "../../shared/t.mjs";
 import { orderOptionsBySelected } from "../selectedOrder.mjs";
 import { shouldUseIosNativeSelect } from "../nativeSelect.mjs";
+import { InlineChoices } from "./InlineChoices.mjs";
+import { shouldInlineChoices } from "./shouldInlineChoices.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const actionSheetIOS = ReactNative.ActionSheetIOS;
 const selectOutlineRest = {
@@ -47,9 +50,10 @@ const SelectRow = styled(View, {
   // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
   // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
+    // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
       true: {
-        backgroundColor: formInputColors.background.base,
+        backgroundColor: "transparent",
         borderRadius: 0
       },
       false: {
@@ -70,6 +74,21 @@ const SelectRow = styled(View, {
     }
   }
 });
+function OptionGlyph({
+  icon,
+  color
+}) {
+  return /* @__PURE__ */jsx(View, {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 18,
+    children: /* @__PURE__ */jsx(IconSlot, {
+      icon,
+      color
+    })
+  });
+}
 function GroupHeader(props) {
   return /* @__PURE__ */jsx(HouseText, {
     paddingHorizontal: "$3",
@@ -267,7 +286,7 @@ const SelectItem = memo(function SelectItem2({
     role: "option",
     tabIndex: -1,
     selected: isSelected,
-    active: isActive,
+    active: Boolean(isActive) && ctx.kbNav,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     height: ctx.knobProps.menuRow.minHeight,
@@ -276,15 +295,18 @@ const SelectItem = memo(function SelectItem2({
     onMouseEnter: () => setActiveIndex(index),
     ...(suppressHover ? {
       hoverStyle: {
-        backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
+        backgroundColor: isActive ? formInputColors.background.focus : "transparent"
       }
     } : {
       hoverStyle: {
-        backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
+        backgroundColor: formInputColors.background.focus
       }
     }),
     ...transitionProps(ctx.knobProps.motion.control),
-    children: [/* @__PURE__ */jsx(Text, {
+    children: [option.icon ? /* @__PURE__ */jsx(OptionGlyph, {
+      icon: option.icon,
+      color: ctx.textColor
+    }) : null, /* @__PURE__ */jsx(Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
       color: ctx.textColor,
@@ -928,6 +950,9 @@ function NativeSelectCore({
   dismissible,
   native
 }) {
+  const insideOverlay = useInsideOverlay();
+  const compactFace = pickerCompactFace(options.length);
+  const asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
   const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1067,16 +1092,19 @@ function NativeSelectCore({
         onPointerDown: isWeb ? () => setKbNav(false) : void 0,
         ...(isWeb ? selectItemRingProps(active, kbNav) : void 0),
         hoverStyle: activeIndex != null ? {
-          backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
+          backgroundColor: active ? formInputColors.background.focus : "transparent"
         } : {
-          backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
+          backgroundColor: formInputColors.background.focus
         },
-        backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
+        backgroundColor: active && kbNav ? formInputColors.background.focus : "transparent",
         pressStyle: {
           backgroundColor: formInputColors.background.focus
         },
         pointerEvents: isWeb ? void 0 : "none",
-        children: [/* @__PURE__ */jsx(Text, {
+        children: [option.icon ? /* @__PURE__ */jsx(OptionGlyph, {
+          icon: option.icon,
+          color: textColor
+        }) : null, /* @__PURE__ */jsx(Text, {
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
           color: textColor,
@@ -1101,7 +1129,7 @@ function NativeSelectCore({
     })]
   });
   const triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : selectedOption?.label ?? placeholder;
-  if (shouldUseIosNativeSelect({
+  if (!asMenu && shouldUseIosNativeSelect({
     native,
     multiple,
     isWeb,
@@ -1178,6 +1206,7 @@ function NativeSelectCore({
       if (!val) onBlur?.();
     },
     sheet: true,
+    compactFace,
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,
@@ -1270,6 +1299,9 @@ function NativeSelectCore({
     children: listContent
   });
 }
+const subscribeNothing = () => () => {};
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
 function Select({
   name,
   form: formProp,
@@ -1316,15 +1348,27 @@ function Select({
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const isControlled = value !== void 0;
   const hasLabel = Boolean(label);
-  warnSelectTooFewOptions({
-    count: options?.length ?? 0,
-    multiple,
-    component: "Select",
-    id
-  });
   const viewportGtSm = useViewportGtSm();
+  const insideOverlay = useInsideOverlay();
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
-  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  const hydrated = useSyncExternalStore(subscribeNothing, clientSnapshot, serverSnapshot);
+  const compactMenu = hydrated && resolveCompactFace(pickerCompactFace(options?.length ?? 0), insideOverlay) === "menu";
+  const shouldUseSheet = !isWeb || !effectiveGtSm && !compactMenu;
+  const inTableCell = useIsInTableCell();
+  const inline = !inTableCell && shouldInlineChoices({
+    insideOverlay,
+    multiple,
+    options
+  });
+  if (!inline) {
+    warnSelectTooFewOptions({
+      count: options?.length ?? 0,
+      multiple,
+      component: "Select",
+      id
+    });
+  }
+  const markColor = useSelectedMarkColor();
   if (skeleton) {
     return /* @__PURE__ */jsxs(InputParts, {
       size: sizeProp || knobProps.sizeToken,
@@ -1374,6 +1418,24 @@ function Select({
   };
   const renderSelectContent = (selectValue, handleValueChange, handleBlur) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (inline) {
+      return /* @__PURE__ */jsx(InlineChoices, {
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        onValueChange: val => {
+          if (disabled) return;
+          handleValueChange?.(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        labelledBy: hasLabel ? `${id}-label` : void 0,
+        "aria-label": ariaLabel,
+        knobProps,
+        markColor
+      });
+    }
     const SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
     return /* @__PURE__ */jsx(SelectCore, {
       options,