@tamagui/input 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/Input.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,36 +6,27 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Input_exports = {};
-__export(Input_exports, {
-  Input: () => Input
-});
+__export(Input_exports, { Input: () => Input });
 module.exports = __toCommonJS(Input_exports);
 var import_core = require("@tamagui/core");
 var import_focusable = require("@tamagui/focusable");
@@ -43,140 +35,64 @@ var import_react = __toESM(require("react"), 1);
 var import_shared = require("./shared.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styledBody[0], import_shared.styledBody[1]);
-const Input = StyledInput.styleable((props, _forwardedRef) => {
-  const {
-    disabled,
-    id,
-    onChangeText,
-    onSubmitEditing,
-    onSelectionChange,
-    selection,
-    placeholderTextColor,
-    selectionColor,
-    rows,
-    // Native-only props (ignored on web)
-    keyboardAppearance,
-    returnKeyType,
-    submitBehavior,
-    blurOnSubmit,
-    caretHidden,
-    contextMenuHidden,
-    selectTextOnFocus,
-    secureTextEntry,
-    maxFontSizeMultiplier,
-    allowFontScaling,
-    multiline,
-    keyboardType,
-    autoCapitalize: autoCapitalizeProp,
-    autoCorrect: autoCorrectProp,
-    autoFocusNative,
-    textContentType,
-    onEndEditing,
-    onContentSizeChange,
-    onScroll,
-    onKeyPress,
-    // iOS-only props (ignored on web)
-    clearButtonMode,
-    clearTextOnFocus,
-    enablesReturnKeyAutomatically,
-    dataDetectorTypes,
-    scrollEnabled,
-    passwordRules,
-    rejectResponderTermination,
-    spellCheck,
-    lineBreakStrategyIOS,
-    lineBreakModeIOS,
-    smartInsertDelete,
-    inputAccessoryViewID,
-    inputAccessoryViewButtonLabel,
-    disableKeyboardShortcuts,
-    // Android-only props (ignored on web)
-    cursorColor,
-    selectionHandleColor,
-    underlineColorAndroid,
-    importantForAutofill,
-    disableFullscreenUI,
-    inlineImageLeft,
-    inlineImagePadding,
-    returnKeyLabel,
-    textBreakStrategy,
-    textAlignVertical,
-    verticalAlign,
-    showSoftInputOnFocus,
-    numberOfLines,
-    ...rest
-  } = props;
-  const {
-    ref,
-    composedRef
-  } = (0, import_element.useWebRef)(_forwardedRef);
-  const theme = (0, import_core.useTheme)();
-  const autoCorrect = autoCorrectProp === true ? "on" : autoCorrectProp === false ? "off" : autoCorrectProp;
-  const autoCapitalize = autoCapitalizeProp === "sentences" || autoCapitalizeProp === "words" ? "on" : autoCapitalizeProp === "none" || autoCapitalizeProp === "characters" ? "off" : autoCapitalizeProp;
-  import_react.default.useEffect(() => {
-    if (!onSelectionChange) return;
-    const node = ref.current;
-    if (!node) return;
-    const handleSelectionChange = () => {
-      onSelectionChange({
-        nativeEvent: {
-          selection: {
-            start: node.selectionStart ?? 0,
-            end: node.selectionEnd ?? 0
-          }
-        }
-      });
-    };
-    node.addEventListener("select", handleSelectionChange);
-    return () => node.removeEventListener("select", handleSelectionChange);
-  }, [onSelectionChange]);
-  import_react.default.useEffect(() => {
-    if (selection && ref.current) {
-      ref.current.setSelectionRange(selection.start, selection.end ?? selection.start);
-    }
-  }, [selection?.start, selection?.end]);
-  import_react.default.useEffect(() => {
-    if (!id || disabled) return;
-    return (0, import_focusable.registerFocusable)(id, {
-      focusAndSelect: () => ref.current?.focus(),
-      focus: () => ref.current?.focus()
-    });
-  }, [id, disabled]);
-  const handleKeyDown = e => {
-    if (e.key === "Enter" && onSubmitEditing) {
-      onSubmitEditing({
-        nativeEvent: {
-          text: e.target.value
-        }
-      });
-    }
-    rest.onKeyDown?.(e);
-  };
-  const handleChange = e => {
-    onChangeText?.(e.target.value);
-    rest.onChange?.(e);
-  };
-  const finalProps = {
-    ...rest,
-    disabled,
-    id,
-    rows,
-    autoCorrect,
-    autoCapitalize,
-    onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
-    onChange: onChangeText ? handleChange : rest.onChange,
-    style: {
-      ...rest.style,
-      ...(placeholderTextColor && {
-        "--t_placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
-      }),
-      ...(selectionColor && {
-        "--t_selectionColor": theme[selectionColor]?.variable || selectionColor
-      })
-    }
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
-    ref: composedRef,
-    ...finalProps
-  });
-});
+const Input = (0, import_core.createStyledHOC)(StyledInput, (props, _forwardedRef) => {
+	const { disabled, id, onChangeText, onSubmitEditing, onSelectionChange, selection, placeholderTextColor, selectionColor, rows, keyboardAppearance, returnKeyType, submitBehavior, blurOnSubmit, caretHidden, contextMenuHidden, selectTextOnFocus, secureTextEntry, maxFontSizeMultiplier, allowFontScaling, multiline, keyboardType, autoCapitalize: autoCapitalizeProp, autoCorrect: autoCorrectProp, autoFocusNative, textContentType, onEndEditing, onContentSizeChange, onScroll, onKeyPress, clearButtonMode, clearTextOnFocus, enablesReturnKeyAutomatically, dataDetectorTypes, scrollEnabled, passwordRules, rejectResponderTermination, spellCheck, lineBreakStrategyIOS, lineBreakModeIOS, smartInsertDelete, inputAccessoryViewID, inputAccessoryViewButtonLabel, disableKeyboardShortcuts, cursorColor, selectionHandleColor, underlineColorAndroid, importantForAutofill, disableFullscreenUI, inlineImageLeft, inlineImagePadding, returnKeyLabel, textBreakStrategy, textAlignVertical, verticalAlign, showSoftInputOnFocus, numberOfLines, ...rest } = props;
+	const { ref, composedRef } = (0, import_element.useWebRef)(_forwardedRef);
+	const theme = (0, import_core.useTheme)();
+	const autoCorrect = autoCorrectProp === true ? "on" : autoCorrectProp === false ? "off" : autoCorrectProp;
+	const autoCapitalize = autoCapitalizeProp === "sentences" || autoCapitalizeProp === "words" ? "on" : autoCapitalizeProp === "none" || autoCapitalizeProp === "characters" ? "off" : autoCapitalizeProp;
+	import_react.default.useEffect(() => {
+		if (!onSelectionChange) return;
+		const node = ref.current;
+		if (!node) return;
+		const handleSelectionChange = () => {
+			onSelectionChange({ nativeEvent: { selection: {
+				start: node.selectionStart ?? 0,
+				end: node.selectionEnd ?? 0
+			} } });
+		};
+		node.addEventListener("select", handleSelectionChange);
+		return () => node.removeEventListener("select", handleSelectionChange);
+	}, [onSelectionChange]);
+	import_react.default.useEffect(() => {
+		if (selection && ref.current) {
+			ref.current.setSelectionRange(selection.start, selection.end ?? selection.start);
+		}
+	}, [selection?.start, selection?.end]);
+	import_react.default.useEffect(() => {
+		if (!id || disabled) return;
+		return (0, import_focusable.registerFocusable)(id, {
+			focusAndSelect: () => ref.current?.focus(),
+			focus: () => ref.current?.focus()
+		});
+	}, [id, disabled]);
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && onSubmitEditing) {
+			onSubmitEditing({ nativeEvent: { text: e.target.value } });
+		}
+		rest.onKeyDown?.(e);
+	};
+	const handleChange = (e) => {
+		onChangeText?.(e.target.value);
+		rest.onChange?.(e);
+	};
+	const finalProps = {
+		...rest,
+		disabled,
+		id,
+		rows,
+		autoCorrect,
+		autoCapitalize,
+		onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
+		onChange: onChangeText ? handleChange : rest.onChange,
+		style: {
+			...rest.style,
+			...placeholderTextColor && { "--t_placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor },
+			...selectionColor && { "--t_selectionColor": theme[selectionColor]?.variable || selectionColor }
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInput, {
+		ref: composedRef,
+		...finalProps
+	});
+});

package/dist/cjs/Input.native.cjs

@@ -0,0 +1,209 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Input_native_exports = {};
+__export(Input_native_exports, { Input: () => Input });
+module.exports = __toCommonJS(Input_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var import_element = require("@tamagui/element");
+var import_shared = require("./shared.native.js");
+var StyledInput = (0, import_core.styled)(import_react_native.TextInput, import_shared.styledBody[0], import_shared.styledBody[1]);
+var Input = (0, import_core.createStyledHOC)(StyledInput, function(props, forwardedRef) {
+	var { type, disabled, readOnly, id, rows, autoComplete, enterKeyHint, onChange, onInput, onKeyDown, onChangeText, onSubmitEditing, onSelectionChange, onEndEditing, onContentSizeChange, onScroll, onKeyPress: onKeyPressProp, selection, keyboardAppearance, returnKeyType: returnKeyTypeProp, submitBehavior, blurOnSubmit, caretHidden, contextMenuHidden, selectTextOnFocus, secureTextEntry: secureTextEntryProp, maxFontSizeMultiplier, allowFontScaling, multiline: multilineProp, keyboardType: keyboardTypeProp, inputMode: inputModeProp, autoCapitalize: autoCapitalizeProp, autoCorrect: autoCorrectProp, autoFocusNative, textContentType, clearButtonMode, clearTextOnFocus, enablesReturnKeyAutomatically, dataDetectorTypes, scrollEnabled, passwordRules, rejectResponderTermination, spellCheck, lineBreakStrategyIOS, lineBreakModeIOS, smartInsertDelete, inputAccessoryViewID, inputAccessoryViewButtonLabel, disableKeyboardShortcuts, importantForAutofill, disableFullscreenUI, inlineImageLeft, inlineImagePadding, returnKeyLabel, textBreakStrategy, textAlignVertical, verticalAlign, showSoftInputOnFocus, numberOfLines: numberOfLinesProp, dirname, min, max, minLength, multiple, name, pattern, required, step, render, caretColor, cursorColor: cursorColorProp, selectionColor: selectionColorProp, ...rest } = props;
+	var { ref, composedRef } = (0, import_element.useNativeInputRef)(forwardedRef);
+	var secureTextEntry = secureTextEntryProp !== null && secureTextEntryProp !== void 0 ? secureTextEntryProp : false;
+	var keyboardType = keyboardTypeProp !== null && keyboardTypeProp !== void 0 ? keyboardTypeProp : "default";
+	var inputMode = inputModeProp;
+	if (!secureTextEntryProp && !keyboardTypeProp && !inputModeProp) {
+		switch (type) {
+			case "password":
+				secureTextEntry = true;
+				break;
+			case "email":
+				keyboardType = "email-address";
+				inputMode = "email";
+				break;
+			case "tel":
+				keyboardType = "phone-pad";
+				inputMode = "tel";
+				break;
+			case "number":
+				keyboardType = "numeric";
+				inputMode = "numeric";
+				break;
+			case "url":
+				keyboardType = "url";
+				inputMode = "url";
+				break;
+			case "search":
+				inputMode = "search";
+				break;
+		}
+	}
+	var returnKeyType = returnKeyTypeProp;
+	if (!returnKeyType && enterKeyHint) {
+		switch (enterKeyHint) {
+			case "done":
+				returnKeyType = "done";
+				break;
+			case "go":
+				returnKeyType = "go";
+				break;
+			case "next":
+				returnKeyType = "next";
+				break;
+			case "search":
+				returnKeyType = "search";
+				break;
+			case "send":
+				returnKeyType = "send";
+				break;
+		}
+	}
+	var multiline = multilineProp !== null && multilineProp !== void 0 ? multilineProp : render === "textarea" || rows && rows > 1;
+	var numberOfLines = numberOfLinesProp !== null && numberOfLinesProp !== void 0 ? numberOfLinesProp : rows;
+	var autoCorrect = autoCorrectProp === "on" ? true : autoCorrectProp === "off" ? false : autoCorrectProp;
+	var autoCapitalize = autoCapitalizeProp === "on" ? "sentences" : autoCapitalizeProp === "off" ? "none" : autoCapitalizeProp;
+	import_react.default.useEffect(function() {
+		if (!id || disabled) return;
+		return (0, import_focusable.registerFocusable)(id, {
+			focusAndSelect: function() {
+				var _ref_current;
+				return (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+			},
+			focus: function() {
+				var _ref_current;
+				return (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+			}
+		});
+	}, [id, disabled]);
+	var handleChangeText = function(text) {
+		onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+		if (onChange) {
+			onChange({
+				target: { value: text },
+				type: "change"
+			});
+		}
+		if (onInput) {
+			onInput({
+				target: { value: text },
+				type: "input"
+			});
+		}
+	};
+	var handleKeyPress = function(e) {
+		onKeyPressProp === null || onKeyPressProp === void 0 ? void 0 : onKeyPressProp(e);
+		if (onKeyDown) {
+			var { key } = e.nativeEvent;
+			if (key === "Backspace" || key === "Enter" || key.length === 1) {
+				onKeyDown({
+					key,
+					type: "keydown"
+				});
+			}
+		}
+	};
+	var handleSubmitEditing = function(e) {
+		if (onKeyDown) {
+			onKeyDown({
+				key: "Enter",
+				type: "keydown"
+			});
+		}
+		onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+	};
+	var handleSelectionChange = function(e) {
+		onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e);
+	};
+	var finalProps = {
+		...rest,
+		editable: !disabled && !readOnly,
+		secureTextEntry,
+		keyboardType,
+		keyboardAppearance,
+		inputMode,
+		returnKeyType,
+		multiline,
+		numberOfLines,
+		selection,
+		autoComplete,
+		autoFocus: autoFocusNative,
+		onChangeText: handleChangeText,
+		onKeyPress: onKeyPressProp || onKeyDown ? handleKeyPress : void 0,
+		onSubmitEditing: onKeyDown || onSubmitEditing ? handleSubmitEditing : void 0,
+		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
+		onEndEditing,
+		onContentSizeChange,
+		onScroll,
+		submitBehavior,
+		blurOnSubmit,
+		caretHidden,
+		contextMenuHidden,
+		selectTextOnFocus,
+		maxFontSizeMultiplier,
+		allowFontScaling,
+		autoCapitalize,
+		autoCorrect,
+		textContentType,
+		clearButtonMode,
+		clearTextOnFocus,
+		enablesReturnKeyAutomatically,
+		dataDetectorTypes,
+		scrollEnabled,
+		passwordRules,
+		rejectResponderTermination,
+		spellCheck,
+		lineBreakStrategyIOS,
+		lineBreakModeIOS,
+		smartInsertDelete,
+		inputAccessoryViewID,
+		inputAccessoryViewButtonLabel,
+		disableKeyboardShortcuts,
+		importantForAutofill,
+		disableFullscreenUI,
+		inlineImageLeft,
+		inlineImagePadding,
+		returnKeyLabel,
+		textBreakStrategy,
+		textAlignVertical,
+		verticalAlign,
+		showSoftInputOnFocus,
+		cursorColor: cursorColorProp !== null && cursorColorProp !== void 0 ? cursorColorProp : caretColor,
+		selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : caretColor
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInput, {
+		ref: composedRef,
+		...finalProps
+	});
+});