@tamagui/input 2.0.0-rc.8 → 2.0.0

package/dist/cjs/v1/Input.cjs

@@ -2,192 +2,199 @@ 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 && {
+        "--t_placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
+      }),
+      ...(selectionColor && {
+        "--t_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;
+        background-color: var(--t_selectionBackground) !important;
       }
 
       input::placeholder, textarea::placeholder {
-        color: var(--placeholderColor) !important;
+        color: var(--t_placeholderColor) !important;
       }
       `
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
-        ref: composedRef,
-        ...finalProps
-      })]
-    });
-  });
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
+      ref: composedRef,
+      ...finalProps
+    })]
+  });
+});