@tamagui/input 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/v1/Input.cjs

@@ -2,181 +2,188 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  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: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// 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
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Input_exports = {};
 __export(Input_exports, {
   Input: () => Input
 });
 module.exports = __toCommonJS(Input_exports);
-var import_core = require("@tamagui/core"),
-  import_focusable = require("@tamagui/focusable"),
-  import_element = require("@tamagui/element"),
-  import_react = __toESM(require("react"), 1),
-  import_shared = require("../shared.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styledBody[0], import_shared.styledBody[1]),
-  Input = StyledInput.styleable((inProps, forwardedRef) => {
-    const {
-        // some of destructed props are just to avoid passing them to ...rest because they are not in web.
-        allowFontScaling,
-        selectTextOnFocus,
-        showSoftInputOnFocus,
-        textContentType,
-        passwordRules,
-        textBreakStrategy,
-        underlineColorAndroid,
-        selection,
-        lineBreakStrategyIOS,
-        returnKeyLabel,
-        disabled,
-        onSubmitEditing,
-        caretHidden,
-        clearButtonMode,
-        clearTextOnFocus,
-        contextMenuHidden,
-        dataDetectorTypes,
-        id,
-        enablesReturnKeyAutomatically,
-        importantForAutofill,
-        inlineImageLeft,
-        inlineImagePadding,
-        inputAccessoryViewID,
-        keyboardAppearance,
-        keyboardType,
-        cursorColor,
-        disableFullscreenUI,
-        editable,
-        maxFontSizeMultiplier,
-        multiline,
-        numberOfLines,
-        onChangeText,
-        onContentSizeChange,
-        onEndEditing,
-        onScroll,
-        onSelectionChange,
-        // @ts-ignore
-        caretColor,
-        placeholderTextColor,
-        blurOnSubmit,
-        enterKeyHint,
-        returnKeyType,
-        rejectResponderTermination,
-        scrollEnabled,
-        secureTextEntry,
-        selectionColor,
-        inputMode,
-        ...rest
-      } = inProps,
-      {
-        ref,
-        composedRef
-      } = (0, import_element.useWebRef)(forwardedRef),
-      theme = (0, import_core.useTheme)(),
-      _onSelectionChange = (0, import_core.useEvent)(() => {
-        const start = ref.current?.selectionStart ?? 0,
-          end = ref.current?.selectionEnd ?? 0;
-        onSelectionChange?.({
-          nativeEvent: {
-            selection: {
-              end,
-              start
-            }
-          }
-        });
-      });
-    import_react.default.useEffect(() => {
-      if (onSelectionChange) return ref.current?.addEventListener("selectionchange", _onSelectionChange), () => {
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var import_element = require("@tamagui/element");
+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((inProps, forwardedRef) => {
+  const {
+    allowFontScaling,
+    selectTextOnFocus,
+    showSoftInputOnFocus,
+    textContentType,
+    passwordRules,
+    textBreakStrategy,
+    underlineColorAndroid,
+    selection,
+    lineBreakStrategyIOS,
+    returnKeyLabel,
+    disabled,
+    onSubmitEditing,
+    caretHidden,
+    clearButtonMode,
+    clearTextOnFocus,
+    contextMenuHidden,
+    dataDetectorTypes,
+    id,
+    enablesReturnKeyAutomatically,
+    importantForAutofill,
+    inlineImageLeft,
+    inlineImagePadding,
+    inputAccessoryViewID,
+    keyboardAppearance,
+    keyboardType,
+    cursorColor,
+    disableFullscreenUI,
+    editable,
+    maxFontSizeMultiplier,
+    multiline,
+    numberOfLines,
+    onChangeText,
+    onContentSizeChange,
+    onEndEditing,
+    onScroll,
+    onSelectionChange,
+    caretColor,
+    placeholderTextColor,
+    blurOnSubmit,
+    enterKeyHint,
+    returnKeyType,
+    rejectResponderTermination,
+    scrollEnabled,
+    secureTextEntry,
+    selectionColor,
+    inputMode,
+    ...rest
+  } = inProps;
+  const {
+    ref,
+    composedRef
+  } = (0, import_element.useWebRef)(forwardedRef);
+  const theme = (0, import_core.useTheme)();
+  const _onSelectionChange = (0, import_core.useEvent)(() => {
+    const start = ref.current?.selectionStart ?? 0;
+    const end = ref.current?.selectionEnd ?? 0;
+    onSelectionChange?.({
+      nativeEvent: {
+        selection: {
+          end,
+          start
+        }
+      }
+    });
+  });
+  import_react.default.useEffect(() => {
+    if (onSelectionChange) {
+      ref.current?.addEventListener("selectionchange", _onSelectionChange);
+      return () => {
         ref.current?.removeEventListener("selectionchange", _onSelectionChange);
       };
-    }, []), import_react.default.useEffect(() => {
-      selection && ref.current?.setSelectionRange(selection.start || null, selection.end || null);
-    }, [selection?.start, selection?.end]);
-    const finalProps = {
-      ...rest,
-      disabled,
-      caretColor,
-      id,
-      enterKeyHint,
-      type: (() => {
-        if (rest?.type) return rest.type;
-        if (secureTextEntry) return "password";
-        switch (keyboardType) {
-          case "number-pad":
-          case "numeric":
-            return "number";
-          case "email-address":
-            return "email";
-          case "phone-pad":
-            return "tel";
-          case "url":
-            return "url";
-          default:
-            return "text";
-        }
-      })(),
-      inputMode: (() => {
-        switch (keyboardType) {
-          case "number-pad":
-          case "numeric":
-            return "numeric";
-          case "decimal-pad":
-            return "decimal";
-          case "email-address":
-            return "email";
-          case "phone-pad":
-            return "tel";
-          case "url":
-            return "url";
-          default:
-            return;
-        }
-      })(),
-      style: {
-        ...rest.style,
-        ...(placeholderTextColor && {
-          "--placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
-        }),
-        ...(selectionColor && {
-          "--selectionBackground": theme[selectionColor]?.variable || selectionColor
-        })
+    }
+  }, []);
+  import_react.default.useEffect(() => {
+    if (selection) ref.current?.setSelectionRange(selection.start || null, selection.end || null);
+  }, [selection?.start, selection?.end]);
+  const finalProps = {
+    ...rest,
+    disabled,
+    caretColor,
+    id,
+    enterKeyHint,
+    type: (() => {
+      if (rest?.type) return rest.type;
+      if (secureTextEntry) return "password";
+      switch (keyboardType) {
+        case "number-pad":
+        case "numeric":
+          return "number";
+        case "email-address":
+          return "email";
+        case "phone-pad":
+          return "tel";
+        case "url":
+          return "url";
+        default:
+          return "text";
+      }
+    })(),
+    inputMode: (() => {
+      switch (keyboardType) {
+        case "number-pad":
+        case "numeric":
+          return "numeric";
+        case "decimal-pad":
+          return "decimal";
+        case "email-address":
+          return "email";
+        case "phone-pad":
+          return "tel";
+        case "url":
+          return "url";
+        default:
+          return;
       }
-    };
-    return import_react.default.useEffect(() => {
-      if (id && !disabled) return (0, import_focusable.registerFocusable)(id, {
-        focusAndSelect: () => {
-          ref.current?.focus();
-        },
-        focus: () => {}
-      });
-    }, [id, disabled]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
-        children: `
+    })(),
+    style: {
+      ...rest.style,
+      ...(placeholderTextColor && {
+        "--placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
+      }),
+      ...(selectionColor && {
+        "--selectionBackground": theme[selectionColor]?.variable || selectionColor
+      })
+    }
+  };
+  import_react.default.useEffect(() => {
+    if (!id) return;
+    if (disabled) return;
+    return (0, import_focusable.registerFocusable)(id, {
+      focusAndSelect: () => {
+        ref.current?.focus();
+      },
+      focus: () => {}
+    });
+  }, [id, disabled]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+      children: `
       input::selection, textarea::selection {
         background-color: var(--selectionBackground) !important;
       }
@@ -185,9 +192,9 @@ const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styl
         color: var(--placeholderColor) !important;
       }
       `
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
-        ref: composedRef,
-        ...finalProps
-      })]
-    });
-  });
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
+      ref: composedRef,
+      ...finalProps
+    })]
+  });
+});

package/dist/cjs/v1/Input.native.js

@@ -4,138 +4,180 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  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: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// 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
+}) : 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"),
-  import_react = __toESM(require("react"), 1),
-  import_core = require("@tamagui/core"),
-  import_focusable = require("@tamagui/focusable"),
-  import_element = require("@tamagui/element"),
-  import_react_native = require("react-native"),
-  import_shared = require("../shared.native.js"),
-  StyledInput = (0, import_core.styled)(import_react_native.TextInput, import_shared.styledBody[0], import_shared.styledBody[1]),
-  Input = StyledInput.styleable(function (inProps, forwardedRef) {
-    var {
-        // some of destructed props are just to avoid passing them to ...rest because they are not in native.
-        type,
-        //@ts-ignore
-        dirname,
-        max,
-        min,
-        minLength,
-        multiple,
-        name,
-        required,
-        step,
-        disabled,
-        id,
-        // @ts-ignore
-        caretColor,
-        onChange,
-        onInput,
-        rows,
-        enterKeyHint,
-        returnKeyType,
-        onKeyDown,
-        inputMode,
-        render,
-        ...rest
-      } = inProps,
-      {
-        ref,
-        composedRef
-      } = (0, import_element.useNativeInputRef)(forwardedRef),
-      secureTextEntry = !1,
-      cursorColor = caretColor,
-      _returnKeyType = returnKeyType,
-      _enterKeyHint = enterKeyHint;
-    enterKeyHint === "go" && (_returnKeyType = "go", _enterKeyHint = void 0);
-    var _inputMode = inputMode;
-    type === "email" ? _inputMode = "email" : type === "tel" ? _inputMode = "tel" : type === "search" ? _inputMode = "search" : type === "url" ? _inputMode = "url" : type === "password" ? (secureTextEntry = !0, _inputMode = "text") : type === "number" ? _inputMode = "numeric" : _inputMode = "text";
-    var showSoftInputOnFocus = !0;
-    inputMode === "none" && (showSoftInputOnFocus = !1);
-    var finalProps = {
-      ...rest,
-      inputMode: _inputMode,
-      showSoftInputOnFocus,
-      disabled,
-      id,
-      cursorColor,
-      enterKeyHint: _enterKeyHint,
-      returnKeyType: _returnKeyType,
-      secureTextEntry,
-      numberOfLines: rows || rest.numberOfLines
-    };
-    return render === "textarea" && (finalProps.multiline = !0), onKeyDown && (finalProps.onKeyPress = function (e) {
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"), 1);
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var import_element = require("@tamagui/element");
+var import_react_native = require("react-native");
+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 = StyledInput.styleable(function (inProps, forwardedRef) {
+  var {
+    // some of destructed props are just to avoid passing them to ...rest because they are not in native.
+    type,
+    //@ts-ignore
+    dirname,
+    max,
+    min,
+    minLength,
+    multiple,
+    name,
+    required,
+    step,
+    disabled,
+    id,
+    // @ts-ignore
+    caretColor,
+    onChange,
+    onInput,
+    rows,
+    enterKeyHint,
+    returnKeyType,
+    onKeyDown,
+    inputMode,
+    render,
+    ...rest
+  } = inProps;
+  var {
+    ref,
+    composedRef
+  } = (0, import_element.useNativeInputRef)(forwardedRef);
+  var secureTextEntry = false;
+  var cursorColor = caretColor;
+  var _returnKeyType = returnKeyType;
+  var _enterKeyHint = enterKeyHint;
+  if (enterKeyHint === "go") {
+    _returnKeyType = "go";
+    _enterKeyHint = void 0;
+  }
+  var _inputMode = inputMode;
+  if (type === "email") {
+    _inputMode = "email";
+  } else if (type === "tel") {
+    _inputMode = "tel";
+  } else if (type === "search") {
+    _inputMode = "search";
+  } else if (type === "url") {
+    _inputMode = "url";
+  } else if (type === "password") {
+    secureTextEntry = true;
+    _inputMode = "text";
+  } else if (type === "number") {
+    _inputMode = "numeric";
+  } else {
+    _inputMode = "text";
+  }
+  var showSoftInputOnFocus = true;
+  if (inputMode === "none") {
+    showSoftInputOnFocus = false;
+  }
+  var finalProps = {
+    ...rest,
+    inputMode: _inputMode,
+    showSoftInputOnFocus,
+    disabled,
+    id,
+    cursorColor,
+    enterKeyHint: _enterKeyHint,
+    returnKeyType: _returnKeyType,
+    secureTextEntry,
+    numberOfLines: rows || rest.numberOfLines
+  };
+  if (render === "textarea") {
+    finalProps.multiline = true;
+  }
+  if (onKeyDown) {
+    finalProps.onKeyPress = function (e) {
       var {
         key
       } = e.nativeEvent;
-      (key === "Backspace" || render === "textarea" && key === "Enter" || key.length === 1) && onKeyDown({
-        key,
-        type: "keydown"
-      });
-    }, finalProps.onSubmitEditing = function (e) {
+      if (key === "Backspace" || render === "textarea" && key === "Enter" || key.length === 1) {
+        onKeyDown({
+          key,
+          type: "keydown"
+        });
+      }
+    };
+    finalProps.onSubmitEditing = function (e) {
       onKeyDown({
         key: "Enter",
         type: "keydown"
       });
-    }), (onChange || onInput) && (finalProps.onChange = function (e) {
+    };
+  }
+  if (onChange || onInput) {
+    finalProps.onChange = function (e) {
       var {
         text
       } = e.nativeEvent;
-      onChange && onChange({
-        target: {
-          value: text
-        },
-        type: "change"
-      }), onInput?.({
-        target: {
-          value: text
-        },
-        type: "input"
-      });
-    }), import_react.default.useEffect(function () {
-      if (id && !disabled) return (0, import_focusable.registerFocusable)(id, {
-        focusAndSelect: function () {
-          var _ref_current;
-          (_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.focus();
-        },
-        focus: function () {}
-      });
-    }, [id, disabled]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
-      onChange: function (e) {},
-      ref: composedRef,
-      ...finalProps
+      if (onChange) {
+        onChange({
+          target: {
+            value: text
+          },
+          type: "change"
+        });
+      }
+      if (onInput != null) {
+        onInput({
+          target: {
+            value: text
+          },
+          type: "input"
+        });
+      }
+    };
+  }
+  import_react.default.useEffect(function () {
+    if (!id) return;
+    if (disabled) return;
+    return (0, import_focusable.registerFocusable)(id, {
+      focusAndSelect: function () {
+        var _ref_current;
+        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+      },
+      focus: function () {}
     });
+  }, [id, disabled]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
+    onChange: function (e) {},
+    ref: composedRef,
+    ...finalProps
   });
+});
 //# sourceMappingURL=Input.native.js.map