@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/cjs/fields/SearchInput/index.cjs

@@ -29,17 +29,84 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
-var import_Input = require("../Input/index.cjs");
+var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const iconSizeForToken = {
-  $1: 12,
-  $2: 14,
-  $3: 16,
-  $4: 16,
-  $5: 18,
-  $6: 20
-};
+const iconSizeForToken = token => (0, import_theme.sizeRecipeForToken)(token).iconSize;
+const SEARCH_STYLE_ID = "mp-search-input-chrome";
+const searchInputCss = `input.mp-search-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input.mp-search-input::-webkit-search-cancel-button,
+input.mp-search-input::-webkit-search-decoration,
+input.mp-search-input::-webkit-search-results-button,
+input.mp-search-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+input.mp-search-input:focus,
+input.mp-search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.mp-search-clear:focus,
+.mp-search-clear:focus-visible {
+  outline: none !important;
+}
+.mp-search-clear:focus-visible .mp-search-clear-ring {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}`;
+function ensureSearchInputChrome() {
+  if (typeof document === "undefined") return;
+  (0, import_theme.ensureCompositeFocusRing)();
+  if (document.getElementById(SEARCH_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = SEARCH_STYLE_ID;
+  tag.textContent = searchInputCss;
+  document.head.appendChild(tag);
+}
+const ClearButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "SearchClear",
+  cursor: "pointer",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.85,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    ...import_theme.FOCUS_VISIBLE_RING
+  }
+});
+const ClearWell = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "SearchClearWell",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$color8",
+  hoverStyle: {
+    backgroundColor: "$color9"
+  },
+  pressStyle: {
+    backgroundColor: "$color10"
+  }
+});
+function focusArea(ref) {
+  ref.current?.focus?.();
+}
 function SearchInput({
   value,
   defaultValue,
@@ -63,17 +130,21 @@ function SearchInput({
   inputProps
 }) {
   const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    size,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
     compact
   });
+  const theme = (0, import_tamagui.useTheme)();
+  const clearInk = (0, import_tamagui.getVariable)(theme.color1);
   const isControlled = value !== void 0;
   const [internalText, setInternalText] = (0, import_react2.useState)(defaultValue ?? "");
   const text = isControlled ? value : internalText;
+  const inputRef = (0, import_react2.useRef)(null);
   const timerRef = (0, import_react2.useRef)(void 0);
   const onSearchRef = (0, import_react2.useRef)(onSearch);
   onSearchRef.current = onSearch;
+  if (import_tamagui.isWeb) ensureSearchInputChrome();
   (0, import_react2.useEffect)(() => () => {
     if (timerRef.current !== void 0) clearTimeout(timerRef.current);
   }, []);
@@ -102,45 +173,69 @@ function SearchInput({
     onChange?.("");
     fireSearch("");
     onClearRef.current?.();
+    focusArea(inputRef);
   }, [isControlled, onChange, fireSearch]);
-  const resolvedIconSize = iconSize ?? iconSizeForToken[size ?? knobProps.sizeToken] ?? 16;
-  const clearButton = clearable && !disabled && text ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    role: "button",
-    tabIndex: 0,
-    padding: "$1",
-    borderRadius: knobProps.borderRadius.borderRadius,
-    cursor: "pointer",
+  const resolvedIconSize = iconSize ?? iconSizeForToken(String(size ?? knobProps.sizeToken));
+  const clearWell = resolvedIconSize;
+  const clearGlyph = Math.max(8, resolvedIconSize - 6);
+  const wellRadius = knobProps.pointy ? 0 : 1e3;
+  const showClear = Boolean(clearable && !disabled && text);
+  const chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
     hoverStyle: {
-      backgroundColor: "$color4"
-    },
-    pressStyle: {
-      backgroundColor: "$color5"
-    },
-    focusVisibleStyle: {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: "$color8"
-    },
-    onPress: handleClear,
-    onKeyDown: e => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClear();
-      }
+      borderColor: "transparent"
     },
-    "aria-label": (0, import_t.t)("Clear search"),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-      size: resolvedIconSize - 2
-    })
-  }) : void 0;
+    focusStyle: {
+      borderColor: "transparent"
+    }
+  } : void 0;
+  const leadingWebProps = import_tamagui.isWeb ? {
+    tabIndex: -1,
+    "aria-hidden": true,
+    onMouseDown: e => {
+      e.preventDefault?.();
+      if (!disabled) focusArea(inputRef);
+    }
+  } : {
+    focusable: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onPress: () => {
+      if (!disabled) focusArea(inputRef);
+    }
+  };
   const areaProps = {
+    id,
     role: "searchbox",
-    "aria-label": ariaLabel ?? "Search",
+    "aria-label": label ? void 0 : ariaLabel ?? (0, import_t.t)("Search"),
+    type: "search",
+    autoComplete: "off",
+    spellCheck: false,
+    inputMode: "search",
     enterKeyHint: "search",
     value: text,
+    disabled,
+    placeholder,
+    paddingInlineStart: 0,
+    paddingInlineEnd: showClear ? 0 : void 0,
+    className: import_tamagui.isWeb ? "mp-input-area mp-search-input" : void 0,
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent",
+    focusStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
     onKeyDown: e => {
       if (e.key === "Escape") {
+        if (!text) return;
         e.preventDefault();
         handleClear();
       } else if (e.key === "Enter") {
@@ -150,19 +245,62 @@ function SearchInput({
     onSubmitEditing: () => fireSearch(text),
     ...inputProps
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+    id,
     label,
-    size,
-    compact,
-    chromeless,
     disabled,
-    onChangeText: handleChangeText,
-    placeholder,
-    leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
-      size: resolvedIconSize
-    }),
-    rightIcon: clearButton,
-    rightIconInteractive: true,
-    inputProps: areaProps
+    size,
+    knobProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        disabled,
+        ...chromelessProps,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          color: import_colorRamps.formControlColors.boundary,
+          className: import_tamagui.isWeb ? "mp-search-leading" : void 0,
+          ...leadingWebProps,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+            size: resolvedIconSize
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          ref: inputRef,
+          ...areaProps,
+          onChangeText: handleChangeText
+        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          justifyContent: "center",
+          alignItems: "center",
+          paddingInlineEnd: "$2.5",
+          paddingInlineStart: 0,
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearButton, {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": (0, import_t.t)("Clear search"),
+            className: import_tamagui.isWeb ? "mp-search-clear" : void 0,
+            hitSlop: (0, import_theme.pressTargetHitSlop)(clearWell),
+            onPress: handleClear,
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClear();
+              }
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearWell, {
+              className: import_tamagui.isWeb ? "mp-search-clear-ring" : void 0,
+              width: clearWell,
+              height: clearWell,
+              borderRadius: wellRadius,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+                size: clearGlyph,
+                color: clearInk
+              })
+            })
+          })
+        }) : null]
+      })
+    })
   });
 }

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

@@ -32,16 +32,86 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
-var import_Input = require("../Input/index.native.js");
-var iconSizeForToken = {
-  $1: 12,
-  $2: 14,
-  $3: 16,
-  $4: 16,
-  $5: 18,
-  $6: 20
+var import_utils = require("../../shared/utils.native.js");
+var iconSizeForToken = function iconSizeForToken2(token) {
+  return (0, import_theme.sizeRecipeForToken)(token).iconSize;
 };
+var SEARCH_STYLE_ID = "mp-search-input-chrome";
+var searchInputCss = `input.mp-search-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input.mp-search-input::-webkit-search-cancel-button,
+input.mp-search-input::-webkit-search-decoration,
+input.mp-search-input::-webkit-search-results-button,
+input.mp-search-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+input.mp-search-input:focus,
+input.mp-search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.mp-search-clear:focus,
+.mp-search-clear:focus-visible {
+  outline: none !important;
+}
+.mp-search-clear:focus-visible .mp-search-clear-ring {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}`;
+function ensureSearchInputChrome() {
+  if (typeof document === "undefined") return;
+  (0, import_theme.ensureCompositeFocusRing)();
+  if (document.getElementById(SEARCH_STYLE_ID)) return;
+  var tag = document.createElement("style");
+  tag.id = SEARCH_STYLE_ID;
+  tag.textContent = searchInputCss;
+  document.head.appendChild(tag);
+}
+var ClearButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "SearchClear",
+  cursor: "pointer",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.85,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    ...import_theme.FOCUS_VISIBLE_RING
+  }
+});
+var ClearWell = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "SearchClearWell",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$color8",
+  hoverStyle: {
+    backgroundColor: "$color9"
+  },
+  pressStyle: {
+    backgroundColor: "$color10"
+  }
+});
+function focusArea(ref) {
+  var _ref_current_focus, _ref_current;
+  (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : (_ref_current_focus = _ref_current.focus) === null || _ref_current_focus === void 0 ? void 0 : _ref_current_focus.call(_ref_current);
+}
 function SearchInput(param) {
   var {
     value,
@@ -65,19 +135,22 @@ function SearchInput(param) {
     iconSize,
     inputProps
   } = param;
-  var _ref;
   var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    size,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
     compact
   });
+  var theme = (0, import_tamagui.useTheme)();
+  var clearInk = (0, import_tamagui.getVariable)(theme.color1);
   var isControlled = value !== void 0;
   var [internalText, setInternalText] = (0, import_react2.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
   var text = isControlled ? value : internalText;
+  var inputRef = (0, import_react2.useRef)(null);
   var timerRef = (0, import_react2.useRef)(void 0);
   var onSearchRef = (0, import_react2.useRef)(onSearch);
   onSearchRef.current = onSearch;
+  if (import_tamagui.isWeb) ensureSearchInputChrome();
   (0, import_react2.useEffect)(function () {
     return function () {
       if (timerRef.current !== void 0) clearTimeout(timerRef.current);
@@ -112,45 +185,70 @@ function SearchInput(param) {
     onChange === null || onChange === void 0 ? void 0 : onChange("");
     fireSearch("");
     (_onClearRef_current = onClearRef.current) === null || _onClearRef_current === void 0 ? void 0 : _onClearRef_current.call(onClearRef);
+    focusArea(inputRef);
   }, [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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    role: "button",
-    tabIndex: 0,
-    padding: "$1",
-    borderRadius: knobProps.borderRadius.borderRadius,
-    cursor: "pointer",
+  var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeForToken(String(size !== null && size !== void 0 ? size : knobProps.sizeToken));
+  var clearWell = resolvedIconSize;
+  var clearGlyph = Math.max(8, resolvedIconSize - 6);
+  var wellRadius = knobProps.pointy ? 0 : 1e3;
+  var showClear = Boolean(clearable && !disabled && text);
+  var chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
     hoverStyle: {
-      backgroundColor: "$color4"
-    },
-    pressStyle: {
-      backgroundColor: "$color5"
-    },
-    focusVisibleStyle: {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: "$color8"
+      borderColor: "transparent"
     },
-    onPress: handleClear,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClear();
-      }
-    },
-    "aria-label": (0, import_t.t)("Clear search"),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-      size: resolvedIconSize - 2
-    })
-  }) : void 0;
+    focusStyle: {
+      borderColor: "transparent"
+    }
+  } : void 0;
+  var leadingWebProps = import_tamagui.isWeb ? {
+    tabIndex: -1,
+    "aria-hidden": true,
+    onMouseDown: function onMouseDown(e) {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      if (!disabled) focusArea(inputRef);
+    }
+  } : {
+    focusable: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onPress: function onPress() {
+      if (!disabled) focusArea(inputRef);
+    }
+  };
   var areaProps = {
+    id,
     role: "searchbox",
-    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Search",
+    "aria-label": label ? void 0 : ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (0, import_t.t)("Search"),
+    type: "search",
+    autoComplete: "off",
+    spellCheck: false,
+    inputMode: "search",
     enterKeyHint: "search",
     value: text,
+    disabled,
+    placeholder,
+    paddingInlineStart: 0,
+    paddingInlineEnd: showClear ? 0 : void 0,
+    className: import_tamagui.isWeb ? "mp-input-area mp-search-input" : void 0,
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent",
+    focusStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
     onKeyDown: function onKeyDown(e) {
       if (e.key === "Escape") {
+        if (!text) return;
         e.preventDefault();
         handleClear();
       } else if (e.key === "Enter") {
@@ -162,20 +260,63 @@ function SearchInput(param) {
     },
     ...inputProps
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+    id,
     label,
-    size,
-    compact,
-    chromeless,
     disabled,
-    onChangeText: handleChangeText,
-    placeholder,
-    leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
-      size: resolvedIconSize
-    }),
-    rightIcon: clearButton,
-    rightIconInteractive: true,
-    inputProps: areaProps
+    size,
+    knobProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        disabled,
+        ...chromelessProps,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          color: import_colorRamps.formControlColors.boundary,
+          className: import_tamagui.isWeb ? "mp-search-leading" : void 0,
+          ...leadingWebProps,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+            size: resolvedIconSize
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          ref: inputRef,
+          ...areaProps,
+          onChangeText: handleChangeText
+        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          justifyContent: "center",
+          alignItems: "center",
+          paddingInlineEnd: "$2.5",
+          paddingInlineStart: 0,
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearButton, {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": (0, import_t.t)("Clear search"),
+            className: import_tamagui.isWeb ? "mp-search-clear" : void 0,
+            hitSlop: (0, import_theme.pressTargetHitSlop)(clearWell),
+            onPress: handleClear,
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClear();
+              }
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearWell, {
+              className: import_tamagui.isWeb ? "mp-search-clear-ring" : void 0,
+              width: clearWell,
+              height: clearWell,
+              borderRadius: wellRadius,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+                size: clearGlyph,
+                color: clearInk
+              })
+            })
+          })
+        }) : null]
+      })
+    })
   });
 }
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SearchInput_exports","__export","SearchInput","module","exports","import_jsx_runtime","require","import_react","import_theme","import_react2","import_tamagui","import_t","import_Input","iconSizeForToken","$1","$2","$3","$4","$5","$6","param","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","bidiIsolate","t","clearable","disabled","size","compact","chromeless","label","ariaLabel","iconSize","inputProps","_ref","knobProps","useResolvedKnobs","isControlled","internalText","setInternalText","useState","text","timerRef","useRef","onSearchRef","current","useEffect","clearTimeout","fireSearch","useCallback","next","_onSearchRef_current","call","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","_onClearRef_current","resolvedIconSize","sizeToken","clearButton","jsx","View","role","tabIndex","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","focusVisibleStyle","outlineWidth","outlineStyle","outlineColor","onPress","onKeyDown","e","key","preventDefault","stopPropagation","children","XIcon","areaProps","enterKeyHint"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SearchInput_exports","__export","SearchInput","module","exports","import_jsx_runtime","require","import_react","import_theme","import_react2","import_tamagui","import_fieldLayout","import_InputParts","import_colorRamps","import_t","import_utils","iconSizeForToken","iconSizeForToken2","token","sizeRecipeForToken","iconSize","SEARCH_STYLE_ID","searchInputCss","ensureSearchInputChrome","document","ensureCompositeFocusRing","getElementById","tag","createElement","id","textContent","head","appendChild","ClearButton","styled","View","name","cursor","alignItems","justifyContent","opacity","outlineWidth","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","FOCUS_VISIBLE_RING","ClearWell","backgroundColor","focusArea","ref","_ref_current_focus","_ref_current","current","focus","call","param","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","bidiIsolate","t","clearable","disabled","size","compact","chromeless","label","ariaLabel","inputProps","knobProps","useFormField","theme","useTheme","clearInk","getVariable","color1","isControlled","internalText","setInternalText","useState","text","inputRef","useRef","timerRef","onSearchRef","isWeb","useEffect","clearTimeout","fireSearch","useCallback","next","_onSearchRef_current","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","_onClearRef_current","resolvedIconSize","String","sizeToken","clearWell","clearGlyph","Math","max","wellRadius","pointy","showClear","Boolean","chromelessProps","borderWidth","borderColor","leadingWebProps","tabIndex","onMouseDown","e","_e_preventDefault","preventDefault","focusable","accessibilityElementsHidden","importantForAccessibility","onPress","areaProps","role","type","autoComplete","spellCheck","inputMode","enterKeyHint","paddingInlineStart","paddingInlineEnd","className","outlineStyle","outlineColor","onKeyDown","key","onSubmitEditing","jsx","FieldLayout","children","Input","jsxs","Box","Icon","adornment","color","formControlColors","boundary"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}