@seed-design/react-image 0.1.0 → 1.0.0

package/lib/{Image-12s-LZ-Fna1t.cjs → Image-12s-BrqESAov.cjs}

@@ -127,7 +127,12 @@ const ImageContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     });
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.img, {
         ref: reactComposeRefs.composeRefs(refs.image, ref),
-        ...domUtils.mergeProps(contentProps, otherProps),
+        ...domUtils.mergeProps(contentProps, otherProps, {
+            // if loading is lazy, we should not hide the image even if it's not loaded yet,
+            // because the browser should be able to check if it's in the viewport.
+            // TODO: it should be better than this; why doesn't useImage properly handle this case?
+            hidden: otherProps.loading === "lazy" ? false : contentProps.hidden
+        }),
         onLoad: (e)=>{
             handleLoad();
             onLoad?.(e);

package/lib/{Image-12s-BLdJ3cIN.js → Image-12s-GoG3c-IV.js}

@@ -127,7 +127,12 @@ const ImageContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     return /*#__PURE__*/ jsx(Primitive.img, {
         ref: composeRefs(refs.image, ref),
-        ...mergeProps(contentProps, otherProps),
+        ...mergeProps(contentProps, otherProps, {
+            // if loading is lazy, we should not hide the image even if it's not loaded yet,
+            // because the browser should be able to check if it's in the viewport.
+            // TODO: it should be better than this; why doesn't useImage properly handle this case?
+            hidden: otherProps.loading === "lazy" ? false : contentProps.hidden
+        }),
         onLoad: (e)=>{
             handleLoad();
             onLoad?.(e);

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Image12s = require('./Image-12s-LZ-Fna1t.cjs');
+var Image12s = require('./Image-12s-BrqESAov.cjs');
 
 var Image_namespace = {
   __proto__: null,

package/lib/index.js

@@ -1,5 +1,5 @@
-import { I as ImageContent, a as ImageFallback, b as ImageRoot } from './Image-12s-BLdJ3cIN.js';
-export { c as useImage, u as useImageContext } from './Image-12s-BLdJ3cIN.js';
+import { I as ImageContent, a as ImageFallback, b as ImageRoot } from './Image-12s-GoG3c-IV.js';
+export { c as useImage, u as useImageContext } from './Image-12s-GoG3c-IV.js';
 
 var Image_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-image",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,8 +30,8 @@
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-layout-effect": "^1.1.1",
-    "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0"
+    "@seed-design/dom-utils": "^2.0.0",
+    "@seed-design/react-primitive": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

package/src/Image.tsx

@@ -4,7 +4,7 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import * as React from "react";
+import type * as React from "react";
 import { forwardRef } from "react";
 import { useImage, type UseImageProps } from "./useImage";
 import { ImageProvider, useImageContext } from "./useImageContext";
@@ -43,7 +43,12 @@ export const ImageContent = forwardRef<HTMLImageElement, ImageContentProps>((pro
   return (
     <Primitive.img
       ref={composeRefs(refs.image, ref)}
-      {...mergeProps(contentProps, otherProps)}
+      {...mergeProps(contentProps, otherProps, {
+        // if loading is lazy, we should not hide the image even if it's not loaded yet,
+        // because the browser should be able to check if it's in the viewport.
+        // TODO: it should be better than this; why doesn't useImage properly handle this case?
+        hidden: otherProps.loading === "lazy" ? false : contentProps.hidden,
+      })}
       onLoad={(e) => {
         handleLoad();
         onLoad?.(e);

package/src/useImage.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "bun:test";
+
+import type { ReactElement } from "react";
+
+import { useImage, type UseImageProps } from "./useImage";
+
+const ROOT_TEST_ID = "image-root";
+const FALLBACK_TEXT = "AB";
+const IMAGE_ALT_TEXT = "Fake Image";
+
+function setUp(jsx: ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+function Image(props: UseImageProps) {
+  const { rootProps, getContentProps, fallbackProps } = useImage(props);
+  return (
+    <div data-testid={ROOT_TEST_ID} {...rootProps}>
+      <img {...getContentProps({})} alt={IMAGE_ALT_TEXT} />
+      <span {...fallbackProps}>{FALLBACK_TEXT}</span>
+    </div>
+  );
+}
+
+describe("useImage", () => {
+  it("initial state is loading", () => {
+    const { getByAltText } = setUp(<Image />);
+    const image = getByAltText(IMAGE_ALT_TEXT);
+    expect(image).toHaveAttribute("data-loading-state", "loading");
+  });
+
+  it("should not render the image initially", () => {
+    const { getByAltText } = setUp(<Image />);
+    const image = getByAltText(IMAGE_ALT_TEXT);
+    expect(image).not.toBeVisible();
+  });
+
+  it("should render the fallback initially", () => {
+    const { queryByText } = setUp(<Image />);
+    const fallback = queryByText(FALLBACK_TEXT);
+    expect(fallback).toBeVisible();
+  });
+});