@colixsystems/widget-sdk 0.247.0 → 0.249.0

package/dist/linter.cjs

@@ -1563,6 +1563,160 @@ function _fullWidthMarginRules(source) {
   return findings;
 }
 
+// sc-12232 — a field inside a bordered row draws two borders.
+// A warning: refs resolve by key name, and a bordered column is fine.
+const _FIELD_TAG_NAMES = ["TextField", "SearchField"];
+const _JSX_TOKEN_RE = /<(\/?)([A-Z][\w.]*)?/g;
+const _STYLE_ATTR_RE = /\bstyle\s*=\s*\{/;
+const _STYLE_REF_RE = /\b[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)/g;
+const _STYLE_ENTRY_RE = /(?<![\w$.])([A-Za-z_$][\w$]*)\s*:\s*\{/g;
+const _BORDER_WIDTH_KEY_RE = /\bborderWidth\s*:/g;
+const _ROW_KEY_RE = /\bflexDirection\s*:\s*(["'`])row(?:-reverse)?\1/;
+const _UNNAMED_PRESS_RE = /\bonTrailingPress\s*=/;
+const _PRESS_NAME_RE = /\btrailingAccessibilityLabel\s*=|\{\s*\.\.\./;
+
+// One pass over the source: the first `key: {` of each name, by offset.
+function _styleEntryOffsets(structure) {
+  const offsets = new Map();
+  _STYLE_ENTRY_RE.lastIndex = 0;
+  let entry;
+  while ((entry = _STYLE_ENTRY_RE.exec(structure))) {
+    if (!offsets.has(entry[1])) offsets.set(entry[1], entry.index + entry[0].length);
+  }
+  return offsets;
+}
+
+// The object literals a style expression spans, plus the entries it names.
+function _styleObjectSpans(scan, [from, to]) {
+  const { structure } = scan;
+  const spans = [];
+  for (let i = from + 1; i < to - 1; i++) {
+    if (structure[i] !== "{") continue;
+    const span = _enclosingObject(structure, i + 1);
+    if (!span) continue;
+    spans.push(span);
+    i = span[1] - 1;
+  }
+  if (!scan.entries) scan.entries = _styleEntryOffsets(structure);
+  const keys = new Set();
+  _STYLE_REF_RE.lastIndex = 0;
+  const refs = structure.slice(from, to);
+  let ref;
+  while ((ref = _STYLE_REF_RE.exec(refs))) keys.add(ref[1]);
+  for (const key of keys) {
+    const at = scan.entries.get(key);
+    const span = at === undefined ? null : _enclosingObject(structure, at);
+    if (span) spans.push(span);
+  }
+  return spans;
+}
+
+function _isBorderedRow(scan, tag) {
+  const { code, structure } = scan;
+  const attrs = structure.slice(tag.attrs[0], tag.attrs[1]);
+  const style = _STYLE_ATTR_RE.exec(attrs);
+  if (!style) return false;
+  const open = tag.attrs[0] + style.index + style[0].length - 1;
+  const inner = _bracedSpan(structure, open);
+  if (inner === null) return false;
+  let row = false;
+  let bordered = false;
+  // `inner` excludes its two braces.
+  for (const span of _styleObjectSpans(scan, [open, open + inner.length + 2])) {
+    const keys = _ownKeysMask(structure, span);
+    if (_ROW_KEY_RE.test(_ownKeysMask(code, span))) row = true;
+    _BORDER_WIDTH_KEY_RE.lastIndex = 0;
+    let key;
+    while ((key = _BORDER_WIDTH_KEY_RE.exec(keys))) {
+      const valueAt = span[0] + key.index + key[0].length;
+      if (!_ZERO_VALUE_RE.test(code.slice(valueAt, valueAt + 40))) bordered = true;
+    }
+  }
+  return row && bordered;
+}
+
+function _selfClosing(structure, end) {
+  let i = end - 1;
+  while (i >= 0 && /\s/.test(structure[i])) i--;
+  return structure[i] === "/";
+}
+
+function _fieldInBorderedRowRules(source) {
+  const findings = [];
+  const scan = {
+    code: _stripNonCode(source, { keepStrings: true }),
+    structure: _stripNonCode(source),
+    entries: null,
+  };
+  const { code, structure } = scan;
+  const sourceLines = source.split(/\r?\n/);
+  // Tokens arrive in source order, so one running count serves every finding.
+  let line = 1;
+  let counted = 0;
+  const lineOf = (at) => {
+    for (; counted < at; counted++) if (code[counted] === "\n") line++;
+    return line;
+  };
+  const report = (rule, at, label) => {
+    const n = lineOf(at);
+    findings.push({
+      rule,
+      severity: "warning",
+      label,
+      line: n,
+      snippet: (sourceLines[n - 1] || "").trim().slice(0, 200),
+    });
+  };
+  const open = [];
+  _JSX_TOKEN_RE.lastIndex = 0;
+  let token;
+  while ((token = _JSX_TOKEN_RE.exec(structure))) {
+    const [, closing, name] = token;
+    if (!name) {
+      // A fragment, `<>` or `</>`; any other `<` is a comparison.
+      if (structure[token.index + 1 + closing.length] !== ">") continue;
+      if (closing) open.pop();
+      else open.push(null);
+      continue;
+    }
+    if (closing) {
+      const at = open.map((tag) => tag && tag.name).lastIndexOf(name);
+      if (at >= 0) open.length = at;
+      continue;
+    }
+    const end = _tagEnd(structure, token.index);
+    if (end === -1) break;
+    const tag = { name, attrs: [token.index + token[0].length, end], borderedRow: undefined };
+    if (_FIELD_TAG_NAMES.includes(name)) {
+      const parent = open[open.length - 1];
+      if (parent && parent.borderedRow === undefined) parent.borderedRow = _isBorderedRow(scan, parent);
+      if (parent && parent.borderedRow) {
+        report(
+          "field-in-bordered-row",
+          token.index,
+          `<${name}> draws its own border, so the bordered row around it ` +
+            `shows a box inside a box. Put the icon in the field with ` +
+            `leadingIcon / trailingIcon (onTrailingPress makes it a button) ` +
+            `and drop the row's border.`,
+        );
+      }
+      const attrs = structure.slice(tag.attrs[0], tag.attrs[1]);
+      if (_UNNAMED_PRESS_RE.test(attrs) && !_PRESS_NAME_RE.test(attrs)) {
+        report(
+          "field-trailing-press-unnamed",
+          token.index,
+          `onTrailingPress makes the trailing icon a button with no name, so ` +
+            `a screen reader says only "button". Give it a translated ` +
+            `trailingAccessibilityLabel.`,
+        );
+      }
+    }
+    if (!_selfClosing(structure, end)) open.push(tag);
+    _JSX_TOKEN_RE.lastIndex = end + 1;
+  }
+  return findings;
+}
+
 // sc-4913 — a measured frame INCLUDES the element's own padding, so cells sized
 // from it overflow the content box and the last one wraps into an empty column.
 // Mirror of linter.js (see there for the full rationale).
@@ -2188,6 +2342,8 @@ function lintSource(source, options) {
   findings.push(..._flexBasisPercentRules(source));
   // sc-11277 — soft warning: a full-width box with a side margin is clipped.
   findings.push(..._fullWidthMarginRules(source));
+  // sc-12232 — soft warning: a field inside a bordered row draws two borders.
+  findings.push(..._fieldInBorderedRowRules(source));
   // sc-4913 — soft warning: a measured width that includes the widget's own
   // padding wraps the last grid column into an empty one.
   findings.push(..._measuredPaddingRules(source));

package/dist/linter.js

@@ -1604,6 +1604,160 @@ function _fullWidthMarginRules(source) {
   return findings;
 }
 
+// sc-12232 — a field inside a bordered row draws two borders.
+// A warning: refs resolve by key name, and a bordered column is fine.
+const _FIELD_TAG_NAMES = ["TextField", "SearchField"];
+const _JSX_TOKEN_RE = /<(\/?)([A-Z][\w.]*)?/g;
+const _STYLE_ATTR_RE = /\bstyle\s*=\s*\{/;
+const _STYLE_REF_RE = /\b[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)/g;
+const _STYLE_ENTRY_RE = /(?<![\w$.])([A-Za-z_$][\w$]*)\s*:\s*\{/g;
+const _BORDER_WIDTH_KEY_RE = /\bborderWidth\s*:/g;
+const _ROW_KEY_RE = /\bflexDirection\s*:\s*(["'`])row(?:-reverse)?\1/;
+const _UNNAMED_PRESS_RE = /\bonTrailingPress\s*=/;
+const _PRESS_NAME_RE = /\btrailingAccessibilityLabel\s*=|\{\s*\.\.\./;
+
+// One pass over the source: the first `key: {` of each name, by offset.
+function _styleEntryOffsets(structure) {
+  const offsets = new Map();
+  _STYLE_ENTRY_RE.lastIndex = 0;
+  let entry;
+  while ((entry = _STYLE_ENTRY_RE.exec(structure))) {
+    if (!offsets.has(entry[1])) offsets.set(entry[1], entry.index + entry[0].length);
+  }
+  return offsets;
+}
+
+// The object literals a style expression spans, plus the entries it names.
+function _styleObjectSpans(scan, [from, to]) {
+  const { structure } = scan;
+  const spans = [];
+  for (let i = from + 1; i < to - 1; i++) {
+    if (structure[i] !== "{") continue;
+    const span = _enclosingObject(structure, i + 1);
+    if (!span) continue;
+    spans.push(span);
+    i = span[1] - 1;
+  }
+  if (!scan.entries) scan.entries = _styleEntryOffsets(structure);
+  const keys = new Set();
+  _STYLE_REF_RE.lastIndex = 0;
+  const refs = structure.slice(from, to);
+  let ref;
+  while ((ref = _STYLE_REF_RE.exec(refs))) keys.add(ref[1]);
+  for (const key of keys) {
+    const at = scan.entries.get(key);
+    const span = at === undefined ? null : _enclosingObject(structure, at);
+    if (span) spans.push(span);
+  }
+  return spans;
+}
+
+function _isBorderedRow(scan, tag) {
+  const { code, structure } = scan;
+  const attrs = structure.slice(tag.attrs[0], tag.attrs[1]);
+  const style = _STYLE_ATTR_RE.exec(attrs);
+  if (!style) return false;
+  const open = tag.attrs[0] + style.index + style[0].length - 1;
+  const inner = _bracedSpan(structure, open);
+  if (inner === null) return false;
+  let row = false;
+  let bordered = false;
+  // `inner` excludes its two braces.
+  for (const span of _styleObjectSpans(scan, [open, open + inner.length + 2])) {
+    const keys = _ownKeysMask(structure, span);
+    if (_ROW_KEY_RE.test(_ownKeysMask(code, span))) row = true;
+    _BORDER_WIDTH_KEY_RE.lastIndex = 0;
+    let key;
+    while ((key = _BORDER_WIDTH_KEY_RE.exec(keys))) {
+      const valueAt = span[0] + key.index + key[0].length;
+      if (!_ZERO_VALUE_RE.test(code.slice(valueAt, valueAt + 40))) bordered = true;
+    }
+  }
+  return row && bordered;
+}
+
+function _selfClosing(structure, end) {
+  let i = end - 1;
+  while (i >= 0 && /\s/.test(structure[i])) i--;
+  return structure[i] === "/";
+}
+
+function _fieldInBorderedRowRules(source) {
+  const findings = [];
+  const scan = {
+    code: _stripNonCode(source, { keepStrings: true }),
+    structure: _stripNonCode(source),
+    entries: null,
+  };
+  const { code, structure } = scan;
+  const sourceLines = source.split(/\r?\n/);
+  // Tokens arrive in source order, so one running count serves every finding.
+  let line = 1;
+  let counted = 0;
+  const lineOf = (at) => {
+    for (; counted < at; counted++) if (code[counted] === "\n") line++;
+    return line;
+  };
+  const report = (rule, at, label) => {
+    const n = lineOf(at);
+    findings.push({
+      rule,
+      severity: "warning",
+      label,
+      line: n,
+      snippet: (sourceLines[n - 1] || "").trim().slice(0, 200),
+    });
+  };
+  const open = [];
+  _JSX_TOKEN_RE.lastIndex = 0;
+  let token;
+  while ((token = _JSX_TOKEN_RE.exec(structure))) {
+    const [, closing, name] = token;
+    if (!name) {
+      // A fragment, `<>` or `</>`; any other `<` is a comparison.
+      if (structure[token.index + 1 + closing.length] !== ">") continue;
+      if (closing) open.pop();
+      else open.push(null);
+      continue;
+    }
+    if (closing) {
+      const at = open.map((tag) => tag && tag.name).lastIndexOf(name);
+      if (at >= 0) open.length = at;
+      continue;
+    }
+    const end = _tagEnd(structure, token.index);
+    if (end === -1) break;
+    const tag = { name, attrs: [token.index + token[0].length, end], borderedRow: undefined };
+    if (_FIELD_TAG_NAMES.includes(name)) {
+      const parent = open[open.length - 1];
+      if (parent && parent.borderedRow === undefined) parent.borderedRow = _isBorderedRow(scan, parent);
+      if (parent && parent.borderedRow) {
+        report(
+          "field-in-bordered-row",
+          token.index,
+          `<${name}> draws its own border, so the bordered row around it ` +
+            `shows a box inside a box. Put the icon in the field with ` +
+            `leadingIcon / trailingIcon (onTrailingPress makes it a button) ` +
+            `and drop the row's border.`,
+        );
+      }
+      const attrs = structure.slice(tag.attrs[0], tag.attrs[1]);
+      if (_UNNAMED_PRESS_RE.test(attrs) && !_PRESS_NAME_RE.test(attrs)) {
+        report(
+          "field-trailing-press-unnamed",
+          token.index,
+          `onTrailingPress makes the trailing icon a button with no name, so ` +
+            `a screen reader says only "button". Give it a translated ` +
+            `trailingAccessibilityLabel.`,
+        );
+      }
+    }
+    if (!_selfClosing(structure, end)) open.push(tag);
+    _JSX_TOKEN_RE.lastIndex = end + 1;
+  }
+  return findings;
+}
+
 // sc-4913 — a measured frame INCLUDES the element's own padding.
 //
 // `onLayout` reports the frame width, and padding sits inside that frame. A
@@ -2256,6 +2410,8 @@ export function lintSource(source, options) {
   findings.push(..._flexBasisPercentRules(source));
   // sc-11277 — soft warning: a full-width box with a side margin is clipped.
   findings.push(..._fullWidthMarginRules(source));
+  // sc-12232 — soft warning: a field inside a bordered row draws two borders.
+  findings.push(..._fieldInBorderedRowRules(source));
   // sc-4913 — soft warning: a measured width that includes the widget's own
   // padding wraps the last grid column into an empty one.
   findings.push(..._measuredPaddingRules(source));

package/dist/menu-view.js

@@ -140,8 +140,11 @@ export function makeMenu(rn, AnchoredSurface) {
       null,
       triggerWith(trigger, {
         anchorRef,
-        onOpen: () => setOpen(true),
-        extraProps: { "aria-haspopup": "menu", "aria-expanded": open },
+        // An empty menu never opens: expanded with nothing shown misleads a reader.
+        onOpen: () => {
+          if (list.length > 0) setOpen(true);
+        },
+        extraProps: { "aria-haspopup": "menu", "aria-expanded": open && list.length > 0 },
       }),
       h(
         AnchoredSurface,

package/dist/people-picker-view.js

@@ -31,6 +31,7 @@ import {
   settleLookup,
   unresolvedIds,
 } from "./people-picker-logic.js";
+import { DRAWS_FIELD_FRAME } from "./form-control-logic.js";
 
 const h = React.createElement;
 const NO_ROWS = Object.freeze([]);
@@ -243,5 +244,7 @@ export function makePeoplePicker(rn) {
   });
 
   PeoplePicker.displayName = "PeoplePicker";
+  // Its `<Select>` frames the label, so `required` passes straight through.
+  PeoplePicker[DRAWS_FIELD_FRAME] = true;
   return PeoplePicker;
 }

package/dist/radio-group-view.js

@@ -6,11 +6,12 @@
 // an icon or a tab role. This one has the radio role and the app's look.
 
 import React from "react";
-import { useHostTheme } from "./hooks.js";
+import { useHostSharedText, useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
 import { CHECKBOX_SIZE, CONTROL_MIN_TARGET, focusHaloStyle } from "./form-control-tokens.js";
 import {
+  DRAWS_FIELD_FRAME,
   errorMessage,
   hasNote,
   isShown,
@@ -165,11 +166,13 @@ export function makeRadioGroup(rn) {
       helper,
       error,
       disabled = false,
+      required = false,
       accessibilityLabel,
       style,
       containerStyle,
       ...rest
     } = props;
+    const requiredWord = useHostSharedText("required", "Required");
     const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
     const t = resolveRadioGroupTokens(theme);
     const kind = radioGroupVariant(variant);
@@ -236,7 +239,7 @@ export function makeRadioGroup(rn) {
         ...rest,
         ref,
         accessibilityRole: "radiogroup",
-        accessibilityLabel: spokenLabel(accessibilityLabel, label),
+        accessibilityLabel: spokenLabel(accessibilityLabel, label, required ? requiredWord : null),
         "aria-disabled": disabled,
         ...(invalid ? { "aria-invalid": true } : null),
         ...(noted ? { "aria-describedby": noteId } : null),
@@ -252,11 +255,12 @@ export function makeRadioGroup(rn) {
     if (!framed) return group;
     return h(
       FieldFrame,
-      { t, label, helper, error: errorMessage(error), disabled, noteId, style: containerStyle },
+      { t, label, helper, error: errorMessage(error), disabled, required, noteId, style: containerStyle },
       group,
     );
   });
 
   RadioGroup.displayName = "RadioGroup";
+  RadioGroup[DRAWS_FIELD_FRAME] = true;
   return RadioGroup;
 }

package/dist/search-field-tokens.js

@@ -55,19 +55,17 @@ export function resolveSearchFieldTokens(theme, own) {
 }
 
 /**
- * Where the glyph and the clear control go. At the end, the clear control
+ * What fills `<TextField>`'s two icon slots. At the end, the clear control
  * takes the glyph's slot while there is text, so the two never overlap.
  *
  * @param {string} iconPosition — a resolved SEARCH_ICON_POSITIONS value.
  * @param {boolean} clearable — the field has text and is enabled.
- * @returns {{ glyph: "start"|"end"|null, padStart: boolean, padEnd: boolean }}
+ * @returns {{ leading: "glyph"|null, trailing: "glyph"|"clear"|null }}
  */
 export function searchFieldLayout(iconPosition, clearable) {
-  const glyphAtEnd = iconPosition === "end" && !clearable;
   return {
-    glyph: iconPosition === "start" ? "start" : glyphAtEnd ? "end" : null,
-    padStart: iconPosition === "start",
-    padEnd: clearable || iconPosition === "end",
+    leading: iconPosition === "start" ? "glyph" : null,
+    trailing: clearable ? "clear" : iconPosition === "end" ? "glyph" : null,
   };
 }
 

package/dist/search-field-view.js

@@ -1,41 +1,16 @@
 // The ONE implementation behind the `<SearchField>` SDK primitive. It is
-// `<TextField>` with a search glyph and a clear control, so it wears the same
-// field and takes the same props, plus the theme's `search` look; the platform
-// bindings (`search-field.js` / `search-field.native.js`) differ only in where
-// the primitives come from.
+// `<TextField>` with a search glyph and a clear control in its icon slots, so
+// it wears the same field and takes the same props, plus the theme's `search`
+// look; the platform bindings (`search-field.js` / `search-field.native.js`)
+// differ only in where the primitives come from.
 
 import React from "react";
 import { useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
-import { Icon } from "./icon.js";
-import { resolveFormControlTokens } from "./form-control-tokens.js";
 import { resolveSearchFieldTokens, searchFieldLayout } from "./search-field-tokens.js";
-import {
-  errorMessage,
-  hasNote,
-  isShown,
-  shareRef,
-  spokenLabel,
-} from "./form-control-logic.js";
-import { makeFieldFrame } from "./form-control-view.js";
+import { shareRef, spokenLabel } from "./form-control-logic.js";
 
 const h = React.createElement;
-const GLYPH_SIZE = 18;
-// The glyph and the clear control each own a strip this wide inside the field.
-const ADORNMENT_WIDTH = 40;
-// A real target: the web host ignores hitSlop, so size carries it.
-const CLEAR_MIN_SIZE = 36;
-
-function adornmentSlot(side) {
-  return {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    ...(side === "start" ? { left: 0 } : { right: 0 }),
-  };
-}
 
 /**
  * Bind the shared search field to one platform's primitives.
@@ -43,8 +18,7 @@ function adornmentSlot(side) {
  * @param {{View: any, Text: any, Pressable: any, TextField: any}} rn
  */
 export function makeSearchField(rn) {
-  const { View, Pressable, TextField } = rn;
-  const FieldFrame = makeFieldFrame(rn);
+  const { TextField } = rn;
 
   const SearchField = React.forwardRef(function SearchField(props, ref) {
     const {
@@ -54,113 +28,59 @@ export function makeSearchField(rn) {
       placeholder = "Search",
       clearAccessibilityLabel = "Clear search",
       label,
-      helper,
-      error,
       disabled = false,
       accessibilityLabel,
       iconPosition,
-      style,
-      containerStyle,
       testID,
       ...rest
     } = props;
     const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
-    const t = resolveFormControlTokens(theme);
     const search = resolveSearchFieldTokens(theme, { iconPosition });
     const inputRef = React.useRef(null);
     const setRef = React.useMemo(() => shareRef(ref, inputRef), [ref]);
-    const noteId = React.useId();
-    const focusInput = () => {
-      const input = inputRef.current;
-      if (input && typeof input.focus === "function") input.focus();
-    };
     const hasText = typeof value === "string" && value.length > 0;
-    const clearable = hasText && !disabled;
-    const layout = searchFieldLayout(search.iconPosition, clearable);
+    const layout = searchFieldLayout(search.iconPosition, hasText && !disabled);
+    const slotTestID = (suffix) => (testID ? `${testID}-${suffix}` : undefined);
     const clear = () => {
       if (typeof onChangeText === "function") onChangeText("");
       if (typeof onClear === "function") onClear();
-      focusInput();
+      const input = inputRef.current;
+      if (input && typeof input.focus === "function") input.focus();
     };
 
-    return h(
-      FieldFrame,
-      {
-        t,
-        label,
-        helper,
-        error: errorMessage(error),
-        disabled,
-        noteId,
-        onLabelPress: focusInput,
-        style: containerStyle,
-      },
-      h(
-        View,
-        { style: { justifyContent: "center" } },
-        h(TextField, {
-          ref: setRef,
-          value,
-          onChangeText,
-          placeholder,
-          // The frame dims the whole control, glyph included.
-          ...(disabled ? { editable: false, "aria-disabled": true } : null),
-          error: isShown(error),
-          ...(hasNote({ helper, error }) ? { "aria-describedby": noteId } : null),
-          // `role` names it on the web; `accessibilityRole` on a device.
-          role: "searchbox",
-          accessibilityRole: "search",
-          accessibilityLabel: spokenLabel(accessibilityLabel, label) || placeholder,
-          enterKeyHint: "search",
-          autoCapitalize: "none",
-          autoCorrect: false,
-          testID,
-          // The field's own props beat the theme's search look.
-          ...search.field,
-          ...rest,
-          style: [
-            layout.padStart ? { paddingLeft: ADORNMENT_WIDTH } : null,
-            layout.padEnd ? { paddingRight: ADORNMENT_WIDTH } : null,
-            style,
-          ],
-        }),
-        layout.glyph
-          ? h(
-              View,
-              {
-                testID: testID ? `${testID}-icon` : undefined,
-                style: {
-                  ...adornmentSlot(layout.glyph),
-                  width: ADORNMENT_WIDTH,
-                  pointerEvents: "none",
-                },
-              },
-              h(Icon, { name: "search", size: GLYPH_SIZE, color: t.placeholderColor }),
-            )
-          : null,
-        clearable
-          ? h(
-              Pressable,
-              {
-                onPress: clear,
-                accessibilityRole: "button",
-                accessibilityLabel: clearAccessibilityLabel,
-                testID: testID ? `${testID}-clear` : undefined,
-                style: ({ pressed }) => [
-                  {
-                    ...adornmentSlot("end"),
-                    right: 2,
-                    minWidth: CLEAR_MIN_SIZE,
-                    minHeight: CLEAR_MIN_SIZE,
-                  },
-                  pressed ? { opacity: 0.6 } : null,
-                ],
-              },
-              h(Icon, { name: "x", size: GLYPH_SIZE, color: t.placeholderColor }),
-            )
-          : null,
-      ),
-    );
+    return h(TextField, {
+      ref: setRef,
+      value,
+      onChangeText,
+      placeholder,
+      label,
+      disabled,
+      // `role` names it on the web; `accessibilityRole` on a device.
+      role: "searchbox",
+      accessibilityRole: "search",
+      accessibilityLabel: spokenLabel(accessibilityLabel, label) || placeholder,
+      enterKeyHint: "search",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID,
+      // The field's own props beat the theme's search look.
+      ...search.field,
+      ...rest,
+      // Both slots always passed, so the clear control never rebuilds the input.
+      leadingIcon: layout.leading === "glyph" ? "search" : null,
+      leadingTestID: slotTestID("icon"),
+      ...(layout.trailing === "clear"
+        ? {
+            trailingIcon: "x",
+            onTrailingPress: clear,
+            trailingAccessibilityLabel: clearAccessibilityLabel,
+            trailingTestID: slotTestID("clear"),
+          }
+        : {
+            trailingIcon: layout.trailing === "glyph" ? "search" : null,
+            trailingTestID: slotTestID("icon"),
+          }),
+    });
   });
 
   SearchField.displayName = "SearchField";