@buoy-gg/shared-ui 7.0.33 → 7.0.34

package/lib/commonjs/ui/components/EntityFilterView.js

@@ -0,0 +1,354 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EntityFilterView = EntityFilterView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _SectionHeader = require("./SectionHeader.js");
+var _FilterComponents = require("./FilterComponents.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * EntityFilterView — the "hide these by name" filter screen the state tools
+ * share: a list of registered entities (stores, atoms) you can tap to hide,
+ * the active name patterns with a remove ✕, an add-pattern affordance, and
+ * a how-it-works card.
+ *
+ * zustand and jotai each shipped their own copy (~370 lines apiece). The
+ * tool supplies the entities, the nouns and the testID prefix; the screen
+ * is drawn once.
+ *
+ * testID convention (unchanged from zustand's):
+ *   `${prefix}-filters-scroll`, `${prefix}-filters-${entityKey}-count`,
+ *   `${prefix}-filters-${entityKey}-${slug(name)}`, `${prefix}-filters-count`,
+ *   `${prefix}-filters-add-open`, `${prefix}-filters-add-input`,
+ *   `${prefix}-filters-chip-${slug(pattern)}`.
+ */
+
+/** True if any active pattern hides this entity. */
+function isHidden(entity, ignoredPatterns) {
+  return Array.from(ignoredPatterns).some(p => entity.name.toLowerCase().includes(p.toLowerCase()));
+}
+
+/** The entity color for a pattern that exactly names a registered entity. */
+function colorForPattern(pattern, entities) {
+  const match = entities.find(e => e.name.toLowerCase() === pattern.toLowerCase());
+  return match ? match.color : null;
+}
+function EntityFilterView({
+  entities,
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  entityNoun,
+  entitySingular,
+  entityKey,
+  testIDPrefix,
+  slug,
+  howItWorks,
+  examples,
+  addPlaceholder,
+  emptyMessage
+}) {
+  const [showAddInput, setShowAddInput] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const handleAddPattern = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onAddPattern(trimmed);
+      setInputValue("");
+      setShowAddInput(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    nestedScrollEnabled: true,
+    testID: `${testIDPrefix}-filters-scroll`,
+    children: [entities.length === 0 && emptyMessage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyText,
+        testID: `${testIDPrefix}-filters-${entityKey}s-empty`,
+        children: emptyMessage
+      })]
+    }) : null, entities.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Badge, {
+          count: entities.length,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-${entityKey}-count`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.entityList,
+        contentContainerStyle: styles.entityListContent,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        testID: `${testIDPrefix}-filters-${entityKey}-list`,
+        children: entities.map(entity => {
+          const hidden = isHidden(entity, ignoredPatterns);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.entityRow, hidden && styles.entityRowHidden],
+            onPress: () => onAddPattern(entity.name),
+            disabled: hidden,
+            testID: `${testIDPrefix}-filters-${entityKey}-${slug(entity.name)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Hide ${entity.name}`,
+            accessibilityState: {
+              disabled: hidden
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dot, {
+                backgroundColor: hidden ? _nightTheme.night.color.textTertiary : entity.color
+              }]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.entityText, hidden ? styles.entityTextHidden : {
+                color: entity.color
+              }],
+              numberOfLines: 1,
+              children: entity.name
+            }), hidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.hiddenLabel,
+              children: "hidden"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.addLabel, {
+                color: entity.color + "99"
+              }],
+              children: "+ hide"
+            })]
+          }, entity.name);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
+          icon: _index.Filter,
+          color: _nightTheme.night.color.accent,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: [entitySingular.toUpperCase(), " NAME FILTERS"]
+        }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Badge, {
+          count: ignoredPatterns.size,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-count`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.addInputWrapper,
+        children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterButton, {
+          onPress: () => setShowAddInput(true),
+          color: _nightTheme.night.color.accent,
+          label: `Add ${entitySingular} name pattern`,
+          testID: `${testIDPrefix}-filters-add-open`
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterInput, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleAddPattern,
+          onCancel: () => {
+            setShowAddInput(false);
+            setInputValue("");
+          },
+          placeholder: addPlaceholder ?? `Enter ${entitySingular} name pattern to hide...`,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-add-input`
+        })
+      }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const color = colorForPattern(pattern, entities);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            testID: `${testIDPrefix}-filters-chip-${slug(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
+            children: [color ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dot, {
+                backgroundColor: color
+              }]
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.patternText, color ? {
+                color
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+              size: 12,
+              color: _nightTheme.night.color.accent + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
+          icon: _index.Filter,
+          color: _nightTheme.night.color.textSecondary,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Title, {
+          children: "HOW EVENT FILTERS WORK"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.howItWorksText,
+        children: howItWorks
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), examples.map(ex => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 16
+  },
+  section: {
+    backgroundColor: _nightTheme.night.color.surface,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    overflow: "hidden"
+  },
+  entityList: {
+    maxHeight: 180
+  },
+  entityListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  entityRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border
+  },
+  entityRowHidden: {
+    opacity: 0.45
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  entityText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  entityTextHidden: {
+    color: _nightTheme.night.color.textTertiary,
+    textDecorationLine: "line-through"
+  },
+  hiddenLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: "monospace"
+  },
+  addLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  addInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  patternList: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  patternRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _nightTheme.night.color.text
+  },
+  emptyText: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textTertiary,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    fontFamily: "monospace"
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: "monospace"
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: _nightTheme.night.color.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: "monospace",
+    lineHeight: 16
+  }
+});

package/lib/commonjs/ui/components/ExportPreview.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExportPreview = ExportPreview;
+exports.sizeWarningLevel = sizeWarningLevel;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ExportPreview — the collapsible "what will be copied" panel at the bottom
+ * of a copy-settings screen.
+ *
+ * Collapsed, it is a card: an eye icon, "Show Preview", a one-line summary
+ * ("14 events · ~12.3 KB (mock data)"), a chevron — and, when the estimated
+ * payload is big, an amber or red size warning under it. Expanded, it is a
+ * "Hide Preview" bar over whatever the tool renders (a DataViewer for JSON,
+ * a mono text block otherwise).
+ *
+ * network, events and highlight-updates each drew this (~120 lines apiece).
+ * Tools keep their own summary string, warning copy and body; the chrome
+ * and the size-threshold ladder live here.
+ */
+
+/** The two-step ladder every copy view used (thresholds differ per tool). */
+function sizeWarningLevel(bytes, thresholds) {
+  if (bytes >= thresholds.danger) return "danger";
+  if (bytes >= thresholds.warning) return "warning";
+  return "none";
+}
+const DEFAULT_WARNING = {
+  warning: "Large payload — preview may be slow",
+  danger: "Very large payload — may cause performance issues"
+};
+function ExportPreview({
+  expanded,
+  onExpandedChange,
+  summary,
+  warningLevel = "none",
+  warningText = DEFAULT_WARNING,
+  testIDs,
+  renderBody
+}) {
+  if (!expanded) {
+    const warningColor = warningLevel === "danger" ? _nightTheme.night.color.danger : warningLevel === "warning" ? _nightTheme.night.color.warning : _nightTheme.night.color.textSecondary;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.collapsed,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.expandButton,
+        onPress: () => onExpandedChange(true),
+        testID: testIDs?.expand,
+        accessibilityRole: "button",
+        accessibilityLabel: "Show export preview",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.expandButtonContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Eye, {
+            size: 16,
+            color: _nightTheme.night.color.info
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandButtonTextContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandButtonTitle,
+              children: "Show Preview"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandButtonSubtitle,
+              testID: testIDs?.summary,
+              children: summary
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+            size: 16,
+            color: _nightTheme.night.color.textTertiary
+          })]
+        })
+      }), warningLevel !== "none" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.sizeWarning, warningLevel === "danger" && styles.sizeWarningDanger],
+        testID: testIDs?.warning,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AlertTriangle, {
+          size: 12,
+          color: warningColor
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.sizeWarningText, {
+            color: warningColor
+          }],
+          children: warningLevel === "danger" ? warningText.danger : warningText.warning
+        })]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.collapseButton,
+      onPress: () => onExpandedChange(false),
+      testID: testIDs?.collapse,
+      accessibilityRole: "button",
+      accessibilityLabel: "Hide export preview",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.collapseButtonText,
+        children: "Hide Preview"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+        size: 14,
+        color: _nightTheme.night.color.textSecondary
+      })]
+    }), renderBody()]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  collapsed: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _nightTheme.night.color.text
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textSecondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: _nightTheme.night.color.warningSoft,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.warning + "30"
+  },
+  sizeWarningDanger: {
+    backgroundColor: _nightTheme.night.color.dangerSoft,
+    borderColor: _nightTheme.night.color.danger + "30"
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  }
+});

package/lib/commonjs/ui/components/InfoRow.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoRow = InfoRow;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _CopyButton = require("./CopyButton.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * InfoRow — the label / value line of every detail screen.
+ *
+ * Thirteen tools hand-rolled this (redux and zustand byte-for-byte). The
+ * night-theme recipe below is theirs: 11 px, tertiary label on the left,
+ * right-aligned value that truncates in the MIDDLE so both ends of an id or
+ * a path stay readable, optional monospace, optional color.
+ *
+ * `ellipsizeMode="middle"` truncates the RENDERED text and iOS reports the
+ * truncated string back, so anything a test reads off one of these rows has
+ * to be short enough to fit on the line.
+ */
+
+function InfoRow({
+  label,
+  value,
+  valueColor,
+  mono = false,
+  copyable = false,
+  numberOfLines = 1,
+  testID,
+  style,
+  labelStyle,
+  valueStyle
+}) {
+  const isText = typeof value === "string" || typeof value === "number";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.row, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
+      style: [styles.value, mono && styles.valueMono, valueColor ? {
+        color: valueColor
+      } : undefined, valueStyle],
+      numberOfLines: numberOfLines,
+      ellipsizeMode: "middle",
+      children: String(value)
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.valueNode,
+      testID: testID,
+      children: value
+    }), copyable && isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+      value: String(value),
+      size: 12
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  label: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textTertiary,
+    fontWeight: "500"
+  },
+  value: {
+    fontSize: 11,
+    color: _nightTheme.night.color.text,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
+    marginLeft: 12
+  },
+  valueMono: {
+    fontFamily: "monospace"
+  },
+  valueNode: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginLeft: 12
+  }
+});

package/lib/commonjs/ui/components/ModalHeader.js

@@ -147,16 +147,32 @@ function HeaderSearch({
   onCancel,
   placeholder = "Search...",
   autoFocus = true,
-  testID
+  testID,
+  containerTestID,
+  clearTestID,
+  accessibilityLabel,
+  onBlur,
+  iconSize = 12,
+  dismissOnBlur = false,
+  onDismiss,
+  clearOnlyWhenText = false,
+  inputProps,
+  containerNativeID
 }) {
   const inputRef = (0, _react.useRef)(null);
+  // Set while the ✕ is pressed so the blur it causes doesn't dismiss first.
+  const clearPressRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
+  const dismiss = onDismiss ?? onCancel;
+  const showClear = !clearOnlyWhenText || value.length > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.searchContainer,
+    testID: containerTestID,
+    nativeID: containerNativeID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
-      size: 12,
+      size: iconSize,
       color: _nightTheme.night.color.textSecondary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
       ref: inputRef,
@@ -165,21 +181,38 @@ function HeaderSearch({
       placeholderTextColor: _nightTheme.night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
+      onSubmitEditing: () => dismissOnBlur ? dismiss() : inputRef.current?.blur(),
+      onBlur: () => {
+        if (dismissOnBlur && !clearPressRef.current) dismiss();
+        onBlur?.();
+      },
       autoCorrect: false,
       autoCapitalize: "none",
+      returnKeyType: "search",
       testID: testID,
-      accessibilityLabel: placeholder
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onCancel,
+      accessibilityLabel: accessibilityLabel ?? placeholder,
+      ...inputProps
+    }), showClear ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onCancel
+      // react-native-web delays press-in ~50ms by default (native fires it
+      // immediately), which would put it AFTER the blur.
+      ,
+      delayPressIn: 0,
+      onPressIn: () => {
+        clearPressRef.current = true;
+      },
+      onPressOut: () => {
+        clearPressRef.current = false;
+      },
       style: styles.searchCancelButton,
       accessibilityRole: "button",
       accessibilityLabel: "Clear search",
-      testID: testID ? `${testID}-clear` : undefined,
+      testID: clearTestID ?? (testID ? `${testID}-clear` : undefined),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
         size: 12,
         color: _nightTheme.night.color.textSecondary
       })
-    })]
+    }) : null]
   });
 }