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

package/dist/cjs/Image/index.cjs

@@ -2,50 +2,52 @@ 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 Image_exports = {};
 __export(Image_exports, {
   Image: () => ImageWithStatics,
   default: () => Image_default
 });
 module.exports = __toCommonJS(Image_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"),
-  import_PixelRatio = require("../PixelRatio/index.cjs"),
-  import_View = require("../View/index.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const ERRORED = "ERRORED",
-  LOADED = "LOADED",
-  LOADING = "LOADING",
-  IDLE = "IDLE";
+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");
+var import_PixelRatio = require("../PixelRatio/index.cjs");
+var import_View = require("../View/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ERRORED = "ERRORED";
+const LOADED = "LOADED";
+const LOADING = "LOADING";
+const IDLE = "IDLE";
 let _filterId = 0;
 const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
 function createTintColorSVG(tintColor, id) {
@@ -59,7 +61,7 @@ function createTintColorSVG(tintColor, id) {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("defs", {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("filter", {
         id: `tint-${id}`,
-        suppressHydrationWarning: !0,
+        suppressHydrationWarning: true,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("feFlood", {
           floodColor: `${tintColor}`
         }, tintColor), /* @__PURE__ */(0, import_jsx_runtime.jsx)("feComposite", {
@@ -71,23 +73,45 @@ function createTintColorSVG(tintColor, id) {
   }) : null;
 }
 function getFlatStyle(style, blurRadius, filterId) {
-  const flatStyle = import_react_native_web_internals.StyleSheet.flatten(style),
-    {
-      filter,
-      resizeMode,
-      shadowOffset,
-      tintColor
-    } = flatStyle,
-    filters = [];
+  const flatStyle = import_react_native_web_internals.StyleSheet.flatten(style);
+  const {
+    filter,
+    resizeMode,
+    shadowOffset,
+    tintColor
+  } = flatStyle;
+  const filters = [];
   let _filter = null;
-  if (filter && filters.push(filter), blurRadius && filters.push(`blur(${blurRadius}px)`), shadowOffset) {
+  if (filter) {
+    filters.push(filter);
+  }
+  if (blurRadius) {
+    filters.push(`blur(${blurRadius}px)`);
+  }
+  if (shadowOffset) {
     const shadowString = (0, import_react_native_web_internals.createBoxShadowValue)(flatStyle);
-    shadowString && filters.push(`drop-shadow(${shadowString})`);
+    if (shadowString) {
+      filters.push(`drop-shadow(${shadowString})`);
+    }
   }
-  return tintColor && filterId != null && filters.push(`url(#tint-${filterId})`), filters.length > 0 && (_filter = filters.join(" ")), delete flatStyle.blurRadius, delete flatStyle.shadowColor, delete flatStyle.shadowOpacity, delete flatStyle.shadowOffset, delete flatStyle.shadowRadius, delete flatStyle.tintColor, delete flatStyle.overlayColor, delete flatStyle.resizeMode, [flatStyle, resizeMode, _filter, tintColor];
+  if (tintColor && filterId != null) {
+    filters.push(`url(#tint-${filterId})`);
+  }
+  if (filters.length > 0) {
+    _filter = filters.join(" ");
+  }
+  delete flatStyle.blurRadius;
+  delete flatStyle.shadowColor;
+  delete flatStyle.shadowOpacity;
+  delete flatStyle.shadowOffset;
+  delete flatStyle.shadowRadius;
+  delete flatStyle.tintColor;
+  delete flatStyle.overlayColor;
+  delete flatStyle.resizeMode;
+  return [flatStyle, resizeMode, _filter, tintColor];
 }
 function resolveAssetDimensions(source) {
-  if (typeof source == "number") {
+  if (typeof source === "number") {
     const {
       height,
       width
@@ -96,7 +120,7 @@ function resolveAssetDimensions(source) {
       height,
       width
     };
-  } else if (source != null && !Array.isArray(source) && typeof source == "object") {
+  } else if (source != null && !Array.isArray(source) && typeof source === "object") {
     const {
       height,
       width
@@ -109,7 +133,7 @@ function resolveAssetDimensions(source) {
 }
 function resolveAssetUri(source) {
   let uri = null;
-  if (typeof source == "number") {
+  if (typeof source === "number") {
     const asset = (0, import_react_native_web_internals2.getAssetByID)(source);
     let scale = asset.scales[0];
     if (asset.scales.length > 1) {
@@ -118,12 +142,16 @@ function resolveAssetUri(source) {
     }
     const scaleSuffix = scale !== 1 ? `@${scale}x` : "";
     uri = asset ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}` : "";
-  } else typeof source == "string" ? uri = source : source && typeof source.uri == "string" && (uri = source.uri);
+  } else if (typeof source === "string") {
+    uri = source;
+  } else if (source && typeof source.uri === "string") {
+    uri = source.uri;
+  }
   if (uri) {
     const match = uri.match(svgDataUriPattern);
     if (match) {
-      const [, prefix, svg] = match,
-        encodedSvg = encodeURIComponent(svg);
+      const [, prefix, svg] = match;
+      const encodedSvg = encodeURIComponent(svg);
       return `${prefix}${encodedSvg}`;
     }
   }
@@ -145,45 +173,55 @@ const Image = React.forwardRef((props, ref) => {
     style,
     ...rest
   } = props;
-  if (process.env.NODE_ENV !== "production" && props.children) throw new Error("The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.");
+  if (process.env.NODE_ENV !== "production") {
+    if (props.children) {
+      throw new Error("The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.");
+    }
+  }
   const [state, updateState] = React.useState(() => {
-      const uri2 = resolveAssetUri(source);
-      return uri2 != null && import_react_native_web_internals2.ImageLoader.has(uri2) ? LOADED : IDLE;
-    }),
-    [layout, updateLayout] = React.useState({}),
-    hasTextAncestor = React.useContext(import_react_native_web_internals.TextAncestorContext),
-    hiddenImageRef = React.useRef(null),
-    filterRef = React.useRef(_filterId++),
-    requestRef = React.useRef(null),
-    shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null,
-    [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle({}, blurRadius, filterRef.current),
-    resizeMode = props.resizeMode || _resizeMode || "cover",
-    selectedSource = shouldDisplaySource ? source : defaultSource,
-    displayImageUri = resolveAssetUri(selectedSource),
-    imageSizeStyle = resolveAssetDimensions(selectedSource),
-    backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null,
-    backgroundSize = getBackgroundSize(),
-    hiddenImage = displayImageUri ? (0, import_createElement.createElement)("img", {
-      alt: accessibilityLabel || "",
-      style: styles.accessibilityImage$raw,
-      draggable: draggable || !1,
-      ref: hiddenImageRef,
-      src: displayImageUri
-    }) : null;
+    const uri2 = resolveAssetUri(source);
+    if (uri2 != null) {
+      const isLoaded = import_react_native_web_internals2.ImageLoader.has(uri2);
+      if (isLoaded) {
+        return LOADED;
+      }
+    }
+    return IDLE;
+  });
+  const [layout, updateLayout] = React.useState({});
+  const hasTextAncestor = React.useContext(import_react_native_web_internals.TextAncestorContext);
+  const hiddenImageRef = React.useRef(null);
+  const filterRef = React.useRef(_filterId++);
+  const requestRef = React.useRef(null);
+  const shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null;
+  const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle({}, blurRadius, filterRef.current);
+  const resizeMode = props.resizeMode || _resizeMode || "cover";
+  const selectedSource = shouldDisplaySource ? source : defaultSource;
+  const displayImageUri = resolveAssetUri(selectedSource);
+  const imageSizeStyle = resolveAssetDimensions(selectedSource);
+  const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
+  const backgroundSize = getBackgroundSize();
+  const hiddenImage = displayImageUri ? (0, import_createElement.createElement)("img", {
+    alt: accessibilityLabel || "",
+    style: styles.accessibilityImage$raw,
+    draggable: draggable || false,
+    ref: hiddenImageRef,
+    src: displayImageUri
+  }) : null;
   function getBackgroundSize() {
     if (hiddenImageRef.current != null && (resizeMode === "center" || resizeMode === "repeat")) {
       const {
-          naturalHeight,
-          naturalWidth
-        } = hiddenImageRef.current,
-        {
-          height,
-          width
-        } = layout;
+        naturalHeight,
+        naturalWidth
+      } = hiddenImageRef.current;
+      const {
+        height,
+        width
+      } = layout;
       if (naturalHeight && naturalWidth && height && width) {
-        const scaleFactor = Math.min(1, width / naturalWidth, height / naturalHeight),
-          x = Math.ceil(scaleFactor * naturalWidth),
-          y = Math.ceil(scaleFactor * naturalHeight);
+        const scaleFactor = Math.min(1, width / naturalWidth, height / naturalHeight);
+        const x = Math.ceil(scaleFactor * naturalWidth);
+        const y = Math.ceil(scaleFactor * naturalHeight);
         return `${x}px ${y}px`;
       }
     }
@@ -193,25 +231,49 @@ const Image = React.forwardRef((props, ref) => {
       const {
         layout: layout2
       } = e.nativeEvent;
-      onLayout && onLayout(e), updateLayout(layout2);
+      onLayout && onLayout(e);
+      updateLayout(layout2);
     }
   }
   const uri = resolveAssetUri(source);
-  return React.useEffect(() => {
-    abortPendingRequest(), uri != null && (updateState(LOADING), onLoadStart && onLoadStart(), requestRef.current = import_react_native_web_internals2.ImageLoader.load(uri, function (e) {
-      updateState(LOADED), onLoad && onLoad(e), onLoadEnd && onLoadEnd();
-    }, function () {
-      updateState(ERRORED), onError && onError({
-        nativeEvent: {
-          error: `Failed to load resource ${uri} (404)`
+  React.useEffect(() => {
+    abortPendingRequest();
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+      requestRef.current = import_react_native_web_internals2.ImageLoader.load(uri, function load(e) {
+        updateState(LOADED);
+        if (onLoad) {
+          onLoad(e);
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
         }
-      }), onLoadEnd && onLoadEnd();
-    }));
+      }, function error() {
+        updateState(ERRORED);
+        if (onError) {
+          onError({
+            nativeEvent: {
+              error: `Failed to load resource ${uri} (404)`
+            }
+          });
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      });
+    }
     function abortPendingRequest() {
-      requestRef.current != null && (import_react_native_web_internals2.ImageLoader.abort(requestRef.current), requestRef.current = null);
+      if (requestRef.current != null) {
+        import_react_native_web_internals2.ImageLoader.abort(requestRef.current);
+        requestRef.current = null;
+      }
     }
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_View.View, {
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_View.View, {
     ...rest,
     "aria-label": accessibilityLabel,
     onLayout: handleLayout,
@@ -225,7 +287,7 @@ const Image = React.forwardRef((props, ref) => {
       }, backgroundSize != null && {
         backgroundSize
       }],
-      suppressHydrationWarning: !0
+      suppressHydrationWarning: true
     }), hiddenImage, createTintColorSVG(tintColor, filterRef.current)]
   });
 });
@@ -241,53 +303,53 @@ ImageWithStatics.queryCache = function (uris) {
   return import_react_native_web_internals2.ImageLoader.queryCache(uris);
 };
 const styles = import_react_native_web_internals.StyleSheet.create({
-    root: {
-      flexBasis: "auto",
-      overflow: "hidden",
-      zIndex: 0
-    },
-    inline: {
-      display: "inline-flex"
-    },
-    image: {
-      ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
-      backgroundColor: "transparent",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat",
-      backgroundSize: "cover",
-      height: "100%",
-      width: "100%",
-      zIndex: -1
-    },
-    accessibilityImage$raw: {
-      ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
-      height: "100%",
-      opacity: 0,
-      width: "100%",
-      zIndex: -1
-    }
-  }),
-  resizeModeStyles = import_react_native_web_internals.StyleSheet.create({
-    center: {
-      backgroundSize: "auto"
-    },
-    contain: {
-      backgroundSize: "contain"
-    },
-    cover: {
-      backgroundSize: "cover"
-    },
-    none: {
-      backgroundPosition: "0",
-      backgroundSize: "auto"
-    },
-    repeat: {
-      backgroundPosition: "0",
-      backgroundRepeat: "repeat",
-      backgroundSize: "auto"
-    },
-    stretch: {
-      backgroundSize: "100% 100%"
-    }
-  });
+  root: {
+    flexBasis: "auto",
+    overflow: "hidden",
+    zIndex: 0
+  },
+  inline: {
+    display: "inline-flex"
+  },
+  image: {
+    ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
+    backgroundColor: "transparent",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+    height: "100%",
+    width: "100%",
+    zIndex: -1
+  },
+  accessibilityImage$raw: {
+    ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
+    height: "100%",
+    opacity: 0,
+    width: "100%",
+    zIndex: -1
+  }
+});
+const resizeModeStyles = import_react_native_web_internals.StyleSheet.create({
+  center: {
+    backgroundSize: "auto"
+  },
+  contain: {
+    backgroundSize: "contain"
+  },
+  cover: {
+    backgroundSize: "cover"
+  },
+  none: {
+    backgroundPosition: "0",
+    backgroundSize: "auto"
+  },
+  repeat: {
+    backgroundPosition: "0",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto"
+  },
+  stretch: {
+    backgroundSize: "100% 100%"
+  }
+});
 var Image_default = ImageWithStatics;

package/dist/cjs/Image/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/ImageBackground/__tests__/index-test.cjs

@@ -2,13 +2,15 @@ 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 __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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
@@ -18,12 +20,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // "default" to the CommonJS "module.exports" for node compatibility.
 isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
   value: mod,
-  enumerable: !0
+  enumerable: true
 }) : target, mod));
-var import_react = require("@testing-library/react"),
-  import_Text = __toESM(require("../../Text/index.cjs"), 1),
-  import__ = __toESM(require("../index.cjs"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_Text = __toESM(require("../../Text/index.cjs"), 1);
+var import__ = __toESM(require("../index.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 function findImage(container) {
   return container.firstChild.firstChild;
 }
@@ -39,29 +41,31 @@ describe("components/ImageBackground", () => {
       }));
       expect(getByText("Hello World!")).toBeDefined();
     });
-  }), describe('prop "imageStyle"', () => {
+  });
+  describe('prop "imageStyle"', () => {
     test("sets the style of the underlying Image", () => {
       const imageStyle = {
-          width: 40,
-          height: 60
-        },
-        {
-          container
-        } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
-          imageStyle
-        }));
-      expect(findImage(container).getAttribute("style").includes("width: 40px; height: 60px;")).toBe(!0);
+        width: 40,
+        height: 60
+      };
+      const {
+        container
+      } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
+        imageStyle
+      }));
+      expect(findImage(container).getAttribute("style").includes("width: 40px; height: 60px;")).toBe(true);
     });
-  }), describe('prop "style"', () => {
+  });
+  describe('prop "style"', () => {
     test("sets the style of the container View", () => {
       const style = {
-          margin: 40
-        },
-        {
-          container
-        } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
-          style
-        }));
+        margin: 40
+      };
+      const {
+        container
+      } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
+        style
+      }));
       expect(container.firstChild.getAttribute("style")).toEqual("margin: 40px 40px 40px 40px;");
     });
   });