@tamagui/react-native-web-lite 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/TextInput/index.cjs

@@ -2,87 +2,89 @@ 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 TextInput_exports = {};
 __export(TextInput_exports, {
   TextInput: () => TextInput,
   default: () => TextInput_default
 });
 module.exports = __toCommonJS(TextInput_exports);
-var React = __toESM(require("react"), 1),
-  import_react_native_web_internals = require("@tamagui/react-native-web-internals"),
-  import_react_native_web_internals2 = require("@tamagui/react-native-web-internals"),
-  import_createElement = require("../createElement/index.cjs");
+var React = __toESM(require("react"), 1);
+var import_react_native_web_internals = require("@tamagui/react-native-web-internals");
+var import_react_native_web_internals2 = require("@tamagui/react-native-web-internals");
+var import_createElement = require("../createElement/index.cjs");
 const isSelectionStale = (node, selection) => {
+  const {
+    selectionEnd,
+    selectionStart
+  } = node;
+  const {
+    start,
+    end
+  } = selection;
+  return start !== selectionStart || end !== selectionEnd;
+};
+const setSelection = (node, selection) => {
+  if (isSelectionStale(node, selection)) {
     const {
-        selectionEnd,
-        selectionStart
-      } = node,
-      {
-        start,
-        end
-      } = selection;
-    return start !== selectionStart || end !== selectionEnd;
-  },
-  setSelection = (node, selection) => {
-    if (isSelectionStale(node, selection)) {
-      const {
-        start,
-        end
-      } = selection;
-      try {
-        node.setSelectionRange(start, end || start);
-      } catch {}
-    }
-  },
-  forwardPropsList = Object.assign({}, import_react_native_web_internals2.forwardedProps.defaultProps, import_react_native_web_internals2.forwardedProps.accessibilityProps, import_react_native_web_internals2.forwardedProps.clickProps, import_react_native_web_internals2.forwardedProps.focusProps, import_react_native_web_internals2.forwardedProps.keyboardProps, import_react_native_web_internals2.forwardedProps.mouseProps, import_react_native_web_internals2.forwardedProps.touchProps, import_react_native_web_internals2.forwardedProps.styleProps, {
-    autoCapitalize: !0,
-    className: !0,
-    autoComplete: !0,
-    autoCorrect: !0,
-    autoFocus: !0,
-    defaultValue: !0,
-    disabled: !0,
-    lang: !0,
-    maxLength: !0,
-    onChange: !0,
-    onScroll: !0,
-    placeholder: !0,
-    pointerEvents: !0,
-    readOnly: !0,
-    rows: !0,
-    spellCheck: !0,
-    value: !0,
-    type: !0
-  }),
-  pickProps = props => (0, import_react_native_web_internals2.pick)(props, forwardPropsList),
-  useIsomorphicLayoutEffect = typeof window > "u" ? React.useEffect : React.useLayoutEffect;
+      start,
+      end
+    } = selection;
+    try {
+      node.setSelectionRange(start, end || start);
+    } catch (e) {}
+  }
+};
+const forwardPropsList = Object.assign({}, import_react_native_web_internals2.forwardedProps.defaultProps, import_react_native_web_internals2.forwardedProps.accessibilityProps, import_react_native_web_internals2.forwardedProps.clickProps, import_react_native_web_internals2.forwardedProps.focusProps, import_react_native_web_internals2.forwardedProps.keyboardProps, import_react_native_web_internals2.forwardedProps.mouseProps, import_react_native_web_internals2.forwardedProps.touchProps, import_react_native_web_internals2.forwardedProps.styleProps, {
+  autoCapitalize: true,
+  className: true,
+  autoComplete: true,
+  autoCorrect: true,
+  autoFocus: true,
+  defaultValue: true,
+  disabled: true,
+  lang: true,
+  maxLength: true,
+  onChange: true,
+  onScroll: true,
+  placeholder: true,
+  pointerEvents: true,
+  readOnly: true,
+  rows: true,
+  spellCheck: true,
+  value: true,
+  type: true
+});
+const pickProps = props => (0, import_react_native_web_internals2.pick)(props, forwardPropsList);
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 function isEventComposing(nativeEvent) {
   return nativeEvent.isComposing || nativeEvent.keyCode === 229;
 }
@@ -92,7 +94,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
     autoCapitalize = "sentences",
     autoComplete,
     autoCompleteType,
-    autoCorrect = !0,
+    autoCorrect = true,
     blurOnSubmit,
     clearTextOnFocus,
     dir,
@@ -100,7 +102,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
     enterKeyHint,
     inputMode = "text",
     keyboardType,
-    multiline = !1,
+    multiline = false,
     numberOfLines,
     onBlur,
     onChange,
@@ -128,109 +130,189 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
     onStartShouldSetResponderCapture,
     onSubmitEditing,
     placeholderTextColor,
-    readOnly = !1,
+    readOnly = false,
     returnKeyType,
     rows = 1,
-    secureTextEntry = !1,
+    secureTextEntry = false,
     selection,
     selectTextOnFocus,
     showSoftInputOnFocus,
     caretHidden,
     spellCheck
   } = props;
-  let type, _inputMode;
-  if (inputMode != null) _inputMode = inputMode, inputMode === "email" ? type = "email" : inputMode === "tel" ? type = "tel" : inputMode === "search" ? type = "search" : inputMode === "url" ? type = "url" : type = "text";else if (keyboardType != null) switch (warn("keyboardType", "keyboardType is deprecated. Use inputMode."), keyboardType) {
-    case "email-address":
+  let type;
+  let _inputMode;
+  if (inputMode != null) {
+    _inputMode = inputMode;
+    if (inputMode === "email") {
       type = "email";
-      break;
-    case "number-pad":
-    case "numeric":
-      _inputMode = "numeric";
-      break;
-    case "decimal-pad":
-      _inputMode = "decimal";
-      break;
-    case "phone-pad":
+    } else if (inputMode === "tel") {
       type = "tel";
-      break;
-    case "search":
-    case "web-search":
+    } else if (inputMode === "search") {
       type = "search";
-      break;
-    case "url":
+    } else if (inputMode === "url") {
       type = "url";
-      break;
-    default:
+    } else {
       type = "text";
+    }
+  } else if (keyboardType != null) {
+    warn("keyboardType", "keyboardType is deprecated. Use inputMode.");
+    switch (keyboardType) {
+      case "email-address":
+        type = "email";
+        break;
+      case "number-pad":
+      case "numeric":
+        _inputMode = "numeric";
+        break;
+      case "decimal-pad":
+        _inputMode = "decimal";
+        break;
+      case "phone-pad":
+        type = "tel";
+        break;
+      case "search":
+      case "web-search":
+        type = "search";
+        break;
+      case "url":
+        type = "url";
+        break;
+      default:
+        type = "text";
+    }
+  }
+  if (secureTextEntry) {
+    type = "password";
   }
-  secureTextEntry && (type = "password");
   const dimensions = React.useRef({
-      height: null,
-      width: null
-    }),
-    hostRef = React.useRef(null),
-    handleContentSizeChange = React.useCallback(hostNode => {
-      if (multiline && onContentSizeChange && hostNode != null) {
-        const newHeight = hostNode.scrollHeight,
-          newWidth = hostNode.scrollWidth;
-        (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) && (dimensions.current.height = newHeight, dimensions.current.width = newWidth, onContentSizeChange({
+    height: null,
+    width: null
+  });
+  const hostRef = React.useRef(null);
+  const handleContentSizeChange = React.useCallback(hostNode => {
+    if (multiline && onContentSizeChange && hostNode != null) {
+      const newHeight = hostNode.scrollHeight;
+      const newWidth = hostNode.scrollWidth;
+      if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
+        dimensions.current.height = newHeight;
+        dimensions.current.width = newWidth;
+        onContentSizeChange({
           nativeEvent: {
             contentSize: {
               height: dimensions.current.height,
               width: dimensions.current.width
             }
           }
-        }));
+        });
       }
-    }, [multiline, onContentSizeChange]),
-    imperativeRef = React.useMemo(() => hostNode => {
-      hostNode != null && (hostNode.clear = () => {
-        hostNode != null && (hostNode.value = "");
-      }, hostNode.isFocused = () => hostNode != null && import_react_native_web_internals2.TextInputState.currentlyFocusedField() === hostNode, handleContentSizeChange(hostNode));
-    }, [handleContentSizeChange]);
+    }
+  }, [multiline, onContentSizeChange]);
+  const imperativeRef = React.useMemo(() => hostNode => {
+    if (hostNode != null) {
+      hostNode.clear = () => {
+        if (hostNode != null) {
+          hostNode.value = "";
+        }
+      };
+      hostNode.isFocused = () => hostNode != null && import_react_native_web_internals2.TextInputState.currentlyFocusedField() === hostNode;
+      handleContentSizeChange(hostNode);
+    }
+  }, [handleContentSizeChange]);
   function handleBlur(e) {
-    import_react_native_web_internals2.TextInputState._currentlyFocusedNode = null, onBlur && (e.nativeEvent.text = e.target.value, onBlur(e));
+    import_react_native_web_internals2.TextInputState._currentlyFocusedNode = null;
+    if (onBlur) {
+      e.nativeEvent.text = e.target.value;
+      onBlur(e);
+    }
   }
   function handleChange(e) {
-    const hostNode = e.target,
-      text = hostNode.value;
-    e.nativeEvent.text = text, handleContentSizeChange(hostNode), onChange && onChange(e), onChangeText && onChangeText(text);
+    const hostNode = e.target;
+    const text = hostNode.value;
+    e.nativeEvent.text = text;
+    handleContentSizeChange(hostNode);
+    if (onChange) {
+      onChange(e);
+    }
+    if (onChangeText) {
+      onChangeText(text);
+    }
   }
   function handleFocus(e) {
     const hostNode = e.target;
-    onFocus && (e.nativeEvent.text = hostNode.value, onFocus(e)), hostNode != null && (import_react_native_web_internals2.TextInputState._currentlyFocusedNode = hostNode, clearTextOnFocus && (hostNode.value = ""), selectTextOnFocus && (focusTimeout != null && clearTimeout(focusTimeout), focusTimeout = setTimeout(() => {
-      hostNode?.select();
-    }, 0)));
+    if (onFocus) {
+      e.nativeEvent.text = hostNode.value;
+      onFocus(e);
+    }
+    if (hostNode != null) {
+      import_react_native_web_internals2.TextInputState._currentlyFocusedNode = hostNode;
+      if (clearTextOnFocus) {
+        hostNode.value = "";
+      }
+      if (selectTextOnFocus) {
+        if (focusTimeout != null) {
+          clearTimeout(focusTimeout);
+        }
+        focusTimeout = setTimeout(() => {
+          if (hostNode != null) {
+            hostNode.select();
+          }
+        }, 0);
+      }
+    }
   }
   function handleKeyDown(e) {
     const hostNode = e.target;
     e.stopPropagation();
-    const shouldBlurOnSubmit = blurOnSubmit ?? !multiline,
-      nativeEvent = e.nativeEvent,
-      isComposing = isEventComposing(nativeEvent);
-    onKeyPress && onKeyPress(e), e.key === "Enter" && !e.shiftKey &&
+    const blurOnSubmitDefault = !multiline;
+    const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
+    const nativeEvent = e.nativeEvent;
+    const isComposing = isEventComposing(nativeEvent);
+    if (onKeyPress) {
+      onKeyPress(e);
+    }
+    if (e.key === "Enter" && !e.shiftKey &&
     // Do not call submit if composition is occuring.
-    !isComposing && !e.isDefaultPrevented() && ((blurOnSubmit || !multiline) && onSubmitEditing && (e.preventDefault(), nativeEvent.text = e.target.value, onSubmitEditing(e)), shouldBlurOnSubmit && hostNode != null && setTimeout(() => hostNode.blur(), 0));
+    !isComposing && !e.isDefaultPrevented()) {
+      if ((blurOnSubmit || !multiline) && onSubmitEditing) {
+        e.preventDefault();
+        nativeEvent.text = e.target.value;
+        onSubmitEditing(e);
+      }
+      if (shouldBlurOnSubmit && hostNode != null) {
+        setTimeout(() => hostNode.blur(), 0);
+      }
+    }
   }
   function handleSelectionChange(e) {
-    if (onSelectionChange) try {
-      const node = e.target,
-        {
+    if (onSelectionChange) {
+      try {
+        const node = e.target;
+        const {
           selectionStart,
           selectionEnd
         } = node;
-      e.nativeEvent.selection = {
-        start: selectionStart,
-        end: selectionEnd
-      }, e.nativeEvent.text = e.target.value, onSelectionChange(e);
-    } catch {}
+        e.nativeEvent.selection = {
+          start: selectionStart,
+          end: selectionEnd
+        };
+        e.nativeEvent.text = e.target.value;
+        onSelectionChange(e);
+      } catch (e2) {}
+    }
   }
   useIsomorphicLayoutEffect(() => {
     const node = hostRef.current;
-    node != null && selection != null && setSelection(node, selection), document.activeElement === node && (import_react_native_web_internals2.TextInputState._currentlyFocusedNode = node);
+    if (node != null && selection != null) {
+      setSelection(node, selection);
+    }
+    if (document.activeElement === node) {
+      import_react_native_web_internals2.TextInputState._currentlyFocusedNode = node;
+    }
   }, [hostRef, selection]);
   const component = multiline ? "textarea" : "input";
-  (0, import_react_native_web_internals2.useElementLayout)(hostRef, onLayout), (0, import_react_native_web_internals2.useResponderEvents)(hostRef, {
+  (0, import_react_native_web_internals2.useElementLayout)(hostRef, onLayout);
+  (0, import_react_native_web_internals2.useResponderEvents)(hostRef, {
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
     onResponderEnd,
@@ -249,23 +331,52 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
     onStartShouldSetResponderCapture
   });
   const {
-      direction: contextDirection
-    } = (0, import_react_native_web_internals2.useLocaleContext)(),
-    supportedProps = pickProps(props);
-  supportedProps.autoCapitalize = autoCapitalize, supportedProps.autoComplete = autoComplete || autoCompleteType || "on", supportedProps.autoCorrect = autoCorrect ? "on" : "off", supportedProps.dir = dir !== void 0 ? dir : "auto", returnKeyType != null && warn("returnKeyType", "returnKeyType is deprecated. Use enterKeyHint."), supportedProps.enterKeyHint = enterKeyHint || returnKeyType, supportedProps.inputMode = _inputMode, supportedProps.onBlur = handleBlur, supportedProps.onChange = handleChange, supportedProps.onFocus = handleFocus, supportedProps.onKeyDown = handleKeyDown, supportedProps.onSelect = handleSelectionChange, editable != null && warn("editable", "editable is deprecated. Use readOnly."), supportedProps.readOnly = readOnly === !0 || editable === !1, numberOfLines != null && warn("numberOfLines", "TextInput numberOfLines is deprecated. Use rows."), supportedProps.rows = multiline ? rows ?? numberOfLines : 1, supportedProps.spellCheck = spellCheck ?? autoCorrect, supportedProps.style = [{
+    direction: contextDirection
+  } = (0, import_react_native_web_internals2.useLocaleContext)();
+  const supportedProps = pickProps(props);
+  supportedProps.autoCapitalize = autoCapitalize;
+  supportedProps.autoComplete = autoComplete || autoCompleteType || "on";
+  supportedProps.autoCorrect = autoCorrect ? "on" : "off";
+  supportedProps.dir = dir !== void 0 ? dir : "auto";
+  if (returnKeyType != null) {
+    warn("returnKeyType", "returnKeyType is deprecated. Use enterKeyHint.");
+  }
+  supportedProps.enterKeyHint = enterKeyHint || returnKeyType;
+  supportedProps.inputMode = _inputMode;
+  supportedProps.onBlur = handleBlur;
+  supportedProps.onChange = handleChange;
+  supportedProps.onFocus = handleFocus;
+  supportedProps.onKeyDown = handleKeyDown;
+  supportedProps.onSelect = handleSelectionChange;
+  if (editable != null) {
+    warn("editable", "editable is deprecated. Use readOnly.");
+  }
+  supportedProps.readOnly = readOnly === true || editable === false;
+  if (numberOfLines != null) {
+    warn("numberOfLines", "TextInput numberOfLines is deprecated. Use rows.");
+  }
+  supportedProps.rows = multiline ? rows != null ? rows : numberOfLines : 1;
+  supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
+  supportedProps.style = [{
     "--placeholderTextColor": placeholderTextColor
-  }, styles.textinput$raw, styles.placeholder, props.style, caretHidden && styles.caretHidden], supportedProps.type = multiline ? void 0 : type, supportedProps.virtualkeyboardpolicy = showSoftInputOnFocus === !1 ? "manual" : "auto";
-  const platformMethodsRef = (0, import_react_native_web_internals2.usePlatformMethods)(supportedProps),
-    setRef = (0, import_react_native_web_internals2.useMergeRefs)(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
+  }, styles.textinput$raw, styles.placeholder, props.style, caretHidden && styles.caretHidden];
+  supportedProps.type = multiline ? void 0 : type;
+  supportedProps.virtualkeyboardpolicy = showSoftInputOnFocus === false ? "manual" : "auto";
+  const platformMethodsRef = (0, import_react_native_web_internals2.usePlatformMethods)(supportedProps);
+  const setRef = (0, import_react_native_web_internals2.useMergeRefs)(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
   supportedProps.ref = setRef;
-  const langDirection = props.lang != null ? (0, import_react_native_web_internals2.getLocaleDirection)(props.lang) : null,
-    writingDirection = props.dir || langDirection || contextDirection;
-  return (0, import_createElement.useCreateElement)(component, supportedProps, {
+  const langDirection = props.lang != null ? (0, import_react_native_web_internals2.getLocaleDirection)(props.lang) : null;
+  const componentDirection = props.dir || langDirection;
+  const writingDirection = componentDirection || contextDirection;
+  const element = (0, import_createElement.useCreateElement)(component, supportedProps, {
     writingDirection
   });
+  return element;
 });
 function warn(...args) {
-  process.env.NODE_ENV !== "production" && console.warn(...args);
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(...args);
+  }
 }
 TextInput.displayName = "TextInput";
 TextInput.State = import_react_native_web_internals2.TextInputState;

package/dist/cjs/TextInput/types.cjs

@@ -3,14 +3,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __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, {
-    get: () => from[key],
-    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-  });
+  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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);

package/dist/cjs/TouchableNativeFeedback.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var TouchableNativeFeedback_exports = {};
 __export(TouchableNativeFeedback_exports, {