@multiplatform.one/forms 6.1.0 → 6.4.0

package/dist/esm/fields/SearchInput/index.native.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { View } from "tamagui";
+import { t } from "../../shared/t.native.js";
+import { Input } from "../Input/index.native.js";
+var iconSizeForToken = {
+  $1: 12,
+  $2: 14,
+  $3: 16,
+  $4: 16,
+  $5: 18,
+  $6: 20
+};
+function SearchInput(param) {
+  var {
+    value,
+    defaultValue,
+    onChange,
+    onSearch,
+    onClear,
+    debounceMs = 300,
+    placeholder = t("Search..."),
+    clearable = true,
+    disabled,
+    size,
+    compact,
+    chromeless,
+    label,
+    "aria-label": ariaLabel,
+    iconSize,
+    inputProps
+  } = param;
+  var _ref;
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    size,
+    compact
+  });
+  var isControlled = value !== void 0;
+  var [internalText, setInternalText] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+  var text = isControlled ? value : internalText;
+  var timerRef = useRef(void 0);
+  var onSearchRef = useRef(onSearch);
+  onSearchRef.current = onSearch;
+  useEffect(function () {
+    return function () {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    };
+  }, []);
+  var fireSearch = useCallback(function (next) {
+    var _onSearchRef_current;
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = void 0;
+    (_onSearchRef_current = onSearchRef.current) === null || _onSearchRef_current === void 0 ? void 0 : _onSearchRef_current.call(onSearchRef, next);
+  }, []);
+  var scheduleSearch = useCallback(function (next) {
+    if (debounceMs <= 0) {
+      fireSearch(next);
+      return;
+    }
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(function () {
+      return fireSearch(next);
+    }, debounceMs);
+  }, [debounceMs, fireSearch]);
+  var handleChangeText = useCallback(function (next) {
+    if (!isControlled) setInternalText(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    scheduleSearch(next);
+  }, [isControlled, onChange, scheduleSearch]);
+  var onClearRef = useRef(onClear);
+  onClearRef.current = onClear;
+  var handleClear = useCallback(function () {
+    var _onClearRef_current;
+    if (!isControlled) setInternalText("");
+    onChange === null || onChange === void 0 ? void 0 : onChange("");
+    fireSearch("");
+    (_onClearRef_current = onClearRef.current) === null || _onClearRef_current === void 0 ? void 0 : _onClearRef_current.call(onClearRef);
+  }, [isControlled, onChange, fireSearch]);
+  var resolvedIconSize = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeForToken[size !== null && size !== void 0 ? size : knobProps.sizeToken]) !== null && _ref !== void 0 ? _ref : 16;
+  var clearButton = clearable && !disabled && text ? /* @__PURE__ */_jsx(View, {
+    role: "button",
+    tabIndex: 0,
+    padding: "$1",
+    borderRadius: knobProps.borderRadius.borderRadius,
+    cursor: "pointer",
+    hoverStyle: {
+      backgroundColor: "$color4"
+    },
+    pressStyle: {
+      backgroundColor: "$color5"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: "$color8"
+    },
+    onPress: handleClear,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClear();
+      }
+    },
+    "aria-label": t("Clear search"),
+    children: /* @__PURE__ */_jsx(XIcon, {
+      size: resolvedIconSize - 2
+    })
+  }) : void 0;
+  var areaProps = {
+    role: "searchbox",
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Search",
+    enterKeyHint: "search",
+    value: text,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClear();
+      } else if (e.key === "Enter") {
+        fireSearch(text);
+      }
+    },
+    onSubmitEditing: function onSubmitEditing() {
+      return fireSearch(text);
+    },
+    ...inputProps
+  };
+  return /* @__PURE__ */_jsx(Input, {
+    label,
+    size,
+    compact,
+    chromeless,
+    disabled,
+    onChangeText: handleChangeText,
+    placeholder,
+    leftIcon: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {
+      size: resolvedIconSize
+    }),
+    rightIcon: clearButton,
+    rightIconInteractive: true,
+    inputProps: areaProps
+  });
+}
+export { SearchInput };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/fields/SearchInput/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","MagnifyingGlassIcon","XIcon","useResolvedKnobs","useCallback","useEffect","useRef","useState","View","t","Input","iconSizeForToken","$1","$2","$3","$4","$5","$6","SearchInput","param","value","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","clearable","disabled","size","compact","chromeless","label","ariaLabel","iconSize","inputProps","_ref","knobProps","isControlled","internalText","setInternalText","text","timerRef","onSearchRef","current","clearTimeout","fireSearch","next","_onSearchRef_current","call","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","_onClearRef_current","resolvedIconSize","sizeToken","clearButton","role","tabIndex","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","focusVisibleStyle","outlineWidth","outlineStyle","outlineColor","onPress","onKeyDown","e","key","preventDefault","stopPropagation","children","areaProps","enterKeyHint","onSubmitEditing","onChangeText","leftIcon","rightIcon"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -1,27 +1,28 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
+import { menuRowFrame } from "@multiplatform.one/theme";
+import { Pressable as RNPressable } from "react-native-web";
 import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
 import { Chip } from "../../Chip/index.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
-import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { warnSelectTooFewOptions } from "../../shared/devWarn.mjs";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.mjs";
 import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
 import { zIndex } from "../../shared/zIndex.mjs";
 import { useDragScroll } from "../../shared/useDragScroll.mjs";
 import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { t } from "../../shared/t.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const SelectRow = styled(View, {
   name: "SelectRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none",
   hoverStyle: {
     backgroundColor: formInputColors.background.focus
   },
@@ -175,6 +176,8 @@ const SelectItem = memo(function SelectItem2({
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     size: ctx.knobProps.sizeToken,
+    paddingHorizontal: ctx.knobProps.panelPadding.padding,
+    ...ctx.knobProps.gap,
     onMouseEnter: () => setActiveIndex(index),
     ...(suppressHover ? {
       hoverStyle: {
@@ -208,12 +211,15 @@ function FloatingSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible
 }) {
   const inTableCell = useIsInTableCell();
+  const describedBy = useFieldDescribedBy();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(null);
   const [controlledScrolling, setControlledScrolling] = useState(false);
@@ -575,6 +581,9 @@ function FloatingSelectCore({
   boxEventProps["aria-haspopup"] = "listbox";
   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 (describedBy) boxEventProps["aria-describedby"] = describedBy;
   const handleScroll = useCallback(event => {
     const el = event.target;
     panel.updateArrows(el);
@@ -609,7 +618,11 @@ function FloatingSelectCore({
       cursor: "pointer",
       disabled,
       size: knobProps.sizeToken,
-      ...(inTableCell ? {} : {
+      ...(inTableCell ?
+      // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+      {
+        minHeight: 44
+      } : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
@@ -617,9 +630,8 @@ function FloatingSelectCore({
         open
       }), /* @__PURE__ */jsx(View, {
         flex: 1,
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         paddingVertical: "$2",
-        id,
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
@@ -649,7 +661,7 @@ function FloatingSelectCore({
           children: selectedOption?.label ?? placeholder
         })
       }), /* @__PURE__ */jsx(View, {
-        paddingRight: "$2",
+        paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */jsx(CaretDownIcon, {
           size: 16
@@ -726,6 +738,7 @@ function FloatingSelectCore({
             arrowScrollDirRef: panel.arrowScrollDirRef
           }), groupLabel && /* @__PURE__ */jsx(GroupHeader, {
             color: textColor,
+            paddingHorizontal: knobProps.panelPadding.padding,
             children: groupLabel
           }), multiple ? sortedOptionsRef.current.map((option, i) => /* @__PURE__ */jsx(SelectItem, {
             option,
@@ -739,6 +752,7 @@ function FloatingSelectCore({
             optionCount: sortedOptionsRef.current.length
           }, option.value)) : groupedItems.map(item => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
             color: textColor,
+            paddingHorizontal: knobProps.panelPadding.padding,
             children: item.label
           }, `header-${item.label}`) : /* @__PURE__ */jsx(SelectItem, {
             option: item.option,
@@ -769,11 +783,15 @@ function NativeSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible
 }) {
+  const describedBy = useFieldDescribedBy();
+  const fieldA11y = useFieldA11y();
   const inTableCell = useIsInTableCell();
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -841,14 +859,23 @@ function NativeSelectCore({
       }
     }
   }, [options, activeIndex, handleSelect]);
-  const listContent = /* @__PURE__ */jsxs(View, {
+  const listContent =
+  // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
+  // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
+  // every option row except a stray fragment of the selected one.
+  // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
+  // accessibility element, which merges every option into one unactionable
+  // VoiceOver blob.
+  /* @__PURE__ */
+  jsxs(View, {
     ref: listRef,
-    tabIndex: 0,
-    onKeyDown: handleListKeyDown,
+    ...(isWeb ? {
+      tabIndex: 0,
+      onKeyDown: handleListKeyDown
+    } : void 0),
     outlineStyle: "none",
-    flex: 1,
     children: [groupLabel && /* @__PURE__ */jsx(Text, {
-      paddingHorizontal: "$3",
+      paddingHorizontal: knobProps.panelPadding.padding,
       paddingVertical: "$2",
       fontFamily: knobProps.body.fontFamily,
       fontWeight: "700",
@@ -859,13 +886,13 @@ function NativeSelectCore({
     }), options.map((option, i) => {
       const selected = isSelectedFn(option.value);
       const active = i === activeIndex;
-      return /* @__PURE__ */jsxs(View, {
+      const row = /* @__PURE__ */jsxs(View, {
         flexDirection: "row",
         alignItems: "center",
-        gap: "$2",
-        paddingHorizontal: "$3",
+        ...knobProps.gap,
+        paddingHorizontal: knobProps.panelPadding.padding,
         height: knobProps.sizeToken,
-        onPress: () => handleSelect(option.value),
+        onPress: isWeb ? () => handleSelect(option.value) : void 0,
         onMouseEnter: () => setActiveIndex(i),
         hoverStyle: activeIndex != null ? {
           backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
@@ -876,6 +903,7 @@ function NativeSelectCore({
         pressStyle: {
           backgroundColor: formInputColors.background.focus
         },
+        pointerEvents: isWeb ? void 0 : "none",
         children: [/* @__PURE__ */jsx(Text, {
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
@@ -886,9 +914,20 @@ function NativeSelectCore({
         }), selected && /* @__PURE__ */jsx(CheckIcon, {
           size: 14
         })]
+      }, isWeb ? option.value : void 0);
+      if (isWeb) return row;
+      return /* @__PURE__ */jsx(RNPressable, {
+        onPress: () => handleSelect(option.value),
+        accessibilityRole: "button",
+        accessibilityLabel: option.label,
+        accessibilityState: {
+          selected
+        },
+        children: row
       }, option.value);
     })]
   });
+  const triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : selectedOption?.label ?? placeholder;
   return /* @__PURE__ */jsx(FloatingPanel, {
     open,
     onOpenChange: val => {
@@ -896,15 +935,39 @@ function NativeSelectCore({
       if (!val) onBlur?.();
     },
     sheet: true,
+    triggerA11y: {
+      label: ariaLabel ?? fieldA11y?.label,
+      value: triggerValueText,
+      hint: fieldA11y?.description
+    },
     trigger: /* @__PURE__ */jsxs(InputParts.Box, {
       disabled,
       size: knobProps.sizeToken,
-      ...(inTableCell ? {} : {
+      ...(inTableCell ?
+      // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+      {
+        minHeight: 44
+      } : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
       "data-testid": "select-trigger",
-      tabIndex: disabled ? -1 : 0,
+      id,
+      ...(isWeb ? {
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-autocomplete": "none",
+        // Standalone (no label): fall back to placeholder so the
+        // trigger still has a name (axe button-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: isWeb && !disabled ? () => setOpen(prev => !prev) : void 0,
       onKeyDown: e => {
         if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
           e.preventDefault();
@@ -913,9 +976,8 @@ function NativeSelectCore({
       },
       children: [/* @__PURE__ */jsx(View, {
         flex: 1,
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         paddingVertical: "$2",
-        id,
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
@@ -944,7 +1006,7 @@ function NativeSelectCore({
           children: selectedOption?.label ?? placeholder
         })
       }), /* @__PURE__ */jsx(View, {
-        paddingRight: "$2",
+        paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */jsx(CaretDownIcon, {
           size: 16
@@ -973,17 +1035,23 @@ function Select({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   options,
-  placeholder = "Select an option",
+  placeholder = t("Select an option"),
   groupLabel,
   multiple,
   dismissible,
   skeleton,
   compact,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const emitValueChange = val => {
+    onChange?.(val);
+    onValueChange?.(val);
+  };
   const {
     resolvedForm,
     knobProps,
@@ -994,6 +1062,15 @@ function Select({
     compact
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  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 effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   const shouldUseSheet = !isWeb || !effectiveGtSm;
@@ -1018,7 +1095,7 @@ function Select({
         fontSize: knobProps.sizeToken,
         color: knobProps.textAccentColor,
         paddingVertical: "$2",
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         "aria-readonly": "true",
@@ -1032,7 +1109,7 @@ function Select({
       fontSize: knobProps.sizeToken,
       color: knobProps.textAccentColor,
       paddingVertical: "$2",
-      paddingHorizontal: "$3",
+      paddingHorizontal: knobProps.panelPadding.padding,
       fontFamily: knobProps.body.fontFamily,
       fontWeight: knobProps.body.fontWeight,
       borderRadius: knobProps.borderRadius.borderRadius,
@@ -1053,12 +1130,14 @@ function Select({
       onValueChange: val => {
         if (disabled) return;
         handleValueChange?.(val);
-        onValueChange?.(val);
+        emitValueChange(val);
       },
       onBlur: handleBlur,
       placeholder,
       disabled,
       id,
+      "aria-label": ariaLabel,
+      hasLabel,
       knobProps,
       groupLabel,
       multiple,
@@ -1075,10 +1154,11 @@ function Select({
       required,
       size: sizeProp,
       knobProps,
+      disabled,
       ...rest,
       children: /* @__PURE__ */jsx(InputParts, {
         size: sizeProp || knobProps.sizeToken,
-        children: renderSelectContent(value ?? defaultValue, void 0, onBlur)
+        children: renderSelectContent(value ?? uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur)
       })
     });
   }
@@ -1098,6 +1178,7 @@ function Select({
         required,
         size: sizeProp,
         knobProps,
+        disabled,
         ...rest,
         children: /* @__PURE__ */jsx(InputParts, {
           size: sizeProp || knobProps.sizeToken,