reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Image/tests/Image.stories.js

@@ -1,18 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageAttributes = exports.renderImage = exports.ratio = exports.fallback = exports.onError = exports.onLoad = exports.outline = exports.displayMode = exports.radius = exports.size = exports.src = void 0;
-const test_1 = require("storybook/test");
-const Icon_1 = __importDefault(require("../../../components/Icon"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-const Image_1 = __importDefault(require("../Image"));
-exports.default = {
+import { expect, fn, waitFor } from "storybook/test";
+import Avatar from "../../../components/Avatar/index.js";
+import Icon from "../../../components/Icon/index.js";
+import Modal from "../../../components/Modal/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+import Image from "../Image.js";
+export default {
     title: "Utility components/Image",
-    component: Image_1.default,
+    component: Image,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/image",
@@ -20,195 +17,229 @@ exports.default = {
     },
 };
 const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
-exports.src = {
+export const src = {
     name: "src, alt",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="src, alt">
-				<Image_1.default src={imgUrl} alt="Image alt"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="src, alt">
+				<Image src={imgUrl} alt="Image alt"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="src">
-				<Image_1.default src={imgUrl}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="src">
+				<Image src={imgUrl}/>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const presentation = canvas.getByRole("presentation");
         const img = canvas.getByRole("img");
-        (0, test_1.expect)(presentation).toBeInTheDocument();
-        (0, test_1.expect)(img).toBeInTheDocument();
-        (0, test_1.expect)(img).toHaveAccessibleName("Image alt");
+        expect(presentation).toBeInTheDocument();
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Image alt");
     },
 };
-exports.size = {
+export const size = {
     name: "width, height, maxWidth, aspectRatio",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="width: 200px">
-				<Image_1.default src={imgUrl} width="200px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="height: 200px">
-				<Image_1.default src={imgUrl} height="200px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="maxWidth: 200px">
-				<Image_1.default src={imgUrl} maxWidth="200px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="aspectRatio: 1/1">
-				<Image_1.default src={imgUrl} aspectRatio={1 / 1} width="300px"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
-				<Image_1.default src={imgUrl} width={{ s: "200px", m: "300px" }}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: 200px, fallback">
-				<Image_1.default fallback={imgUrl} width="200px"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="width: 200px">
+				<Image src={imgUrl} width="200px"/>
+			</Example.Item>
+			<Example.Item title="height: 200px">
+				<Image src={imgUrl} height="200px"/>
+			</Example.Item>
+			<Example.Item title="maxWidth: 200px">
+				<Image src={imgUrl} maxWidth="200px"/>
+			</Example.Item>
+			<Example.Item title="aspectRatio: 1/1">
+				<Image src={imgUrl} aspectRatio={1 / 1} width="300px"/>
+			</Example.Item>
+			<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
+				<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
+			</Example.Item>
+			<Example.Item title="width: 200px, fallback">
+				<Image fallback={imgUrl} width="200px"/>
+			</Example.Item>
+		</Example>),
 };
-exports.radius = {
+export const radius = {
     name: "borderRadius",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="radius: small">
-				<View_1.default width="300px">
-					<Image_1.default src={imgUrl} borderRadius="small"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="radius: medium">
-				<View_1.default width="300px">
-					<Image_1.default src={imgUrl} borderRadius="medium"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="radius: large">
-				<View_1.default width="300px">
-					<Image_1.default src={imgUrl} borderRadius="large"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="radius: circular">
-				<View_1.default width="300px">
-					<Image_1.default src={imgUrl} borderRadius="circular"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="radius: small">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="small"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="radius: medium">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="medium"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="radius: large">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="large"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="radius: circular">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="circular"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.displayMode = {
+export const displayMode = {
     name: "displayMode",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="mode: cover">
-				<Image_1.default src={imgUrl} height="200px" width="100%" displayMode="cover"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="mode: contain">
-				<Image_1.default src={imgUrl} height="200px" width="100%" displayMode="contain"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="mode: cover">
+				<Image src={imgUrl} height="200px" width="100%" displayMode="cover"/>
+			</Example.Item>
+			<Example.Item title="mode: contain">
+				<Image src={imgUrl} height="200px" width="100%" displayMode="contain"/>
+			</Example.Item>
+		</Example>),
 };
-exports.outline = {
+export const outline = {
     name: "outline",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="outline: true">
-				<Image_1.default src={imgUrl} height="200px" width="100%" outline borderRadius="small"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="outline: true">
+				<Image src={imgUrl} height="200px" width="100%" outline borderRadius="small"/>
+			</Example.Item>
+			<Example.Item title="outline: true, image larger than the root">
+				<Image src={largeImage} alt="large photo" width="36px" height="36px" outline attributes={{ id: "test-outline-root" }}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const img = canvas.getByAltText("large photo");
+        const root = img.parentElement;
+        // Root attributes are applied to the wrapper only
+        expect(root).toHaveAttribute("id", "test-outline-root");
+        expect(img).not.toHaveAttribute("id");
+        await waitFor(() => expect(img.complete).toBe(true));
+        const rootRect = root.getBoundingClientRect();
+        const imgRect = img.getBoundingClientRect();
+        expect(rootRect.width).toBe(36);
+        expect(rootRect.height).toBe(36);
+        expect(imgRect.width).toBe(36);
+        expect(imgRect.height).toBe(36);
+    },
 };
-exports.onLoad = {
+export const onLoad = {
     name: "onLoad",
     args: {
-        handleLoad: (0, test_1.fn)(),
+        handleLoad: fn(),
     },
-    render: (args) => <Image_1.default src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
+    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
     play: async ({ canvas, args }) => {
         const { handleLoad } = args;
         const img = canvas.getByRole("img");
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(handleLoad).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(handleLoad).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: img, type: "load" }));
+        await waitFor(() => {
+            expect(handleLoad).toHaveBeenCalledTimes(1);
+            expect(handleLoad).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "load" }));
         });
     },
 };
-exports.onError = {
+export const onError = {
     name: "onError",
     args: {
-        handleError: (0, test_1.fn)(),
+        handleError: fn(),
     },
-    render: (args) => <Image_1.default src="/invalid.png" alt="photo" onError={args.handleError}/>,
+    render: (args) => <Image src="/invalid.png" alt="photo" onError={args.handleError}/>,
     play: async ({ canvas, args }) => {
         const { handleError } = args;
         const img = canvas.getByRole("img");
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(handleError).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(handleError).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: img, type: "error" }));
+        await waitFor(() => {
+            expect(handleError).toHaveBeenCalledTimes(1);
+            expect(handleError).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "error" }));
         });
     },
 };
-exports.fallback = {
+export const fallback = {
     name: "fallback",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fallback, background, on error">
-				<View_1.default width="300px">
-					<View_1.default aspectRatio={16 / 9}>
-						<Image_1.default src="error" fallback/>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="fallback, image, on error">
-				<View_1.default width="300px">
-					<View_1.default aspectRatio={16 / 9}>
-						<Image_1.default src="error" fallback={imgUrl}/>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="fallback, background, on error">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image src="error" fallback/>
+					</View>
+				</View>
+			</Example.Item>
+			<Example.Item title="fallback, image, on error">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image src="error" fallback={imgUrl}/>
+					</View>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="fallback, icon, on error">
-				<View_1.default width="300px">
-					<Image_1.default aspectRatio={16 / 9} src="error" fallback={<Icon_1.default svg={Zap_1.default} size={10}/>}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="fallback, icon, no url">
-				<View_1.default width="300px">
-					<Image_1.default aspectRatio={16 / 9} fallback={<Icon_1.default svg={Zap_1.default} size={10}/>}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="fallback, icon, on error">
+				<View width="300px">
+					<Image aspectRatio={16 / 9} src="error" fallback={<Icon svg={IconZap} size={10}/>}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="fallback, icon, no url">
+				<View width="300px">
+					<Image aspectRatio={16 / 9} fallback={<Icon svg={IconZap} size={10}/>}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.ratio = {
+export const ratio = {
     name: "aspectRatio",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="ratio: 16/9">
-				<Image_1.default src={imgUrl} aspectRatio={16 / 9}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="ratio: 16/9, displayMode: contain">
-				<Image_1.default src={imgUrl} displayMode="contain" aspectRatio={16 / 9}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="ratio: 16/9">
+				<Image src={imgUrl} aspectRatio={16 / 9}/>
+			</Example.Item>
+			<Example.Item title="ratio: 16/9, displayMode: contain">
+				<Image src={imgUrl} displayMode="contain" aspectRatio={16 / 9}/>
+			</Example.Item>
+		</Example>),
 };
-exports.renderImage = {
+export const renderImage = {
     name: "renderImage",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="renderImage">
-				<Image_1.default src={imgUrl} alt="Amsterdam canal" 
+    render: () => (<Example>
+			<Example.Item title="renderImage">
+				<Image src={imgUrl} alt="Amsterdam canal" 
     // oxlint-disable-next-line jsx_a11y/alt-text
     renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="renderImage, fallback">
-				<Image_1.default src="error" fallback={imgUrl} alt="Amsterdam canal 2" 
+			</Example.Item>
+			<Example.Item title="renderImage, fallback">
+				<Image src="error" fallback={imgUrl} alt="Amsterdam canal 2" 
     // oxlint-disable-next-line jsx_a11y/alt-text
     renderImage={(attributes) => <img {...attributes} id="test-image-fallback"/>}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const images = canvas.getAllByRole("img");
-        (0, test_1.expect)(images[0]).toHaveAccessibleName("Amsterdam canal");
-        (0, test_1.expect)(images[0]).toHaveAttribute("id", "test-image");
-        (0, test_1.expect)(images[1]).toHaveAccessibleName("Amsterdam canal 2");
-        (0, test_1.expect)(images[1]).toHaveAttribute("id", "test-image-fallback");
+        expect(images[0]).toHaveAccessibleName("Amsterdam canal");
+        expect(images[0]).toHaveAttribute("id", "test-image");
+        expect(images[1]).toHaveAccessibleName("Amsterdam canal 2");
+        expect(images[1]).toHaveAttribute("id", "test-image-fallback");
     },
 };
-exports.imageAttributes = {
+export const imageAttributes = {
     name: "className, attributes,imageAttributes",
     render: () => (<div data-testid="root">
-			<Image_1.default src={imgUrl} alt="photo" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ "data-testid": "test-img-id" }}/>
+			<Image src={imgUrl} alt="photo" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ "data-testid": "test-img-id" }}/>
 		</div>),
     play: async ({ canvas }) => {
         const img = canvas.getByRole("img");
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(img).toHaveAttribute("data-testid", "test-img-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(img).toHaveAttribute("data-testid", "test-img-id");
+    },
+};
+const largeImage = "data:image/svg+xml," +
+    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><rect width="100%" height="100%" fill="teal"/></svg>');
+export const testCases = {
+    name: "test: edge cases",
+    render: () => {
+        return (<Example>
+				<Example.Item title="image larger than the root, safari">
+					<Modal active position="center" onClose={() => { }}>
+						<View direction="row" align="center" gap={4}>
+							<Avatar size={9} src={largeImage}/>
+							<Text>Large image</Text>
+						</View>
+					</Modal>
+				</Example.Item>
+			</Example>);
     },
 };

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
-import { type ActionableRef } from "../../components/Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
-    icon?: import("../../components/Icon").IconProps["svg"];
+import { type ActionableRef } from "../../components/Actionable/index.js";
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable/index.js").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+    icon?: import("../../components/Icon/index.js").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";
 } & import("react").RefAttributes<ActionableRef>>;

package/dist/components/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import Icon from "../../components/Icon";
+import Actionable from "../../components/Actionable/index.js";
+import Icon from "../../components/Icon/index.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, fullWidth, } = props;

package/dist/components/Link/Link.types.d.ts

@@ -1,5 +1,5 @@
-import type { ActionableProps } from "../../components/Actionable";
-import type { IconProps } from "../../components/Icon";
+import type { ActionableProps } from "../../components/Actionable/index.js";
+import type { IconProps } from "../../components/Icon/index.js";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation" | "render" | "fullWidth"> & {
     /** Icon at the start position */
     icon?: IconProps["svg"];

package/dist/components/Link/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Link";
-export type { Props as LinkProps } from "./Link.types";
+export { default } from "./Link.js";
+export type { Props as LinkProps } from "./Link.types.js";

package/dist/components/Link/index.js

@@ -1 +1 @@
-export { default } from "./Link";
+export { default } from "./Link.js";

package/dist/components/Link/tests/Link.stories.d.ts

@@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
-        icon?: import("../../Icon").IconProps["svg"];
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable/index.js").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+        icon?: import("../../Icon/index.js").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
+    } & import("react").RefAttributes<import("../../Actionable/index.js").ActionableRef>>;
     parameters: {
         iframe: {
             url: string;