@radix-ui/react-avatar 1.1.12 → 1.2.0-rc.1780862247684
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -4
- package/dist/index.d.ts +1 -4
- package/dist/index.js +74 -51
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +74 -51
- package/dist/index.mjs.map +3 -3
- package/package.json +4 -4
package/dist/index.d.mts
CHANGED
|
@@ -17,8 +17,5 @@ interface AvatarFallbackProps extends PrimitiveSpanProps {
|
|
|
17
17
|
delayMs?: number;
|
|
18
18
|
}
|
|
19
19
|
declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
|
|
20
|
-
declare const Root: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
21
|
-
declare const Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
22
|
-
declare const Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
|
|
23
20
|
|
|
24
|
-
export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Fallback, Image, Root, createAvatarScope };
|
|
21
|
+
export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarFallback as Fallback, AvatarImage as Image, Avatar as Root, createAvatarScope };
|
package/dist/index.d.ts
CHANGED
|
@@ -17,8 +17,5 @@ interface AvatarFallbackProps extends PrimitiveSpanProps {
|
|
|
17
17
|
delayMs?: number;
|
|
18
18
|
}
|
|
19
19
|
declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
|
|
20
|
-
declare const Root: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
21
|
-
declare const Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
22
|
-
declare const Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
|
|
23
20
|
|
|
24
|
-
export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Fallback, Image, Root, createAvatarScope };
|
|
21
|
+
export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarFallback as Fallback, AvatarImage as Image, Avatar as Root, createAvatarScope };
|
package/dist/index.js
CHANGED
|
@@ -34,9 +34,9 @@ __export(index_exports, {
|
|
|
34
34
|
Avatar: () => Avatar,
|
|
35
35
|
AvatarFallback: () => AvatarFallback,
|
|
36
36
|
AvatarImage: () => AvatarImage,
|
|
37
|
-
Fallback: () =>
|
|
38
|
-
Image: () =>
|
|
39
|
-
Root: () =>
|
|
37
|
+
Fallback: () => AvatarFallback,
|
|
38
|
+
Image: () => AvatarImage,
|
|
39
|
+
Root: () => Avatar,
|
|
40
40
|
createAvatarScope: () => createAvatarScope
|
|
41
41
|
});
|
|
42
42
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -47,21 +47,27 @@ var import_react_context = require("@radix-ui/react-context");
|
|
|
47
47
|
var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
|
|
48
48
|
var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
|
|
49
49
|
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
50
|
-
var import_react_use_is_hydrated = require("@radix-ui/react-use-is-hydrated");
|
|
51
50
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
52
51
|
var AVATAR_NAME = "Avatar";
|
|
53
52
|
var [createAvatarContext, createAvatarScope] = (0, import_react_context.createContextScope)(AVATAR_NAME);
|
|
53
|
+
var STATIC_IMAGE_COUNT_STATE = [
|
|
54
|
+
0,
|
|
55
|
+
() => void 0
|
|
56
|
+
];
|
|
54
57
|
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
|
|
55
58
|
var Avatar = React.forwardRef(
|
|
56
59
|
(props, forwardedRef) => {
|
|
57
60
|
const { __scopeAvatar, ...avatarProps } = props;
|
|
58
61
|
const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
|
|
62
|
+
const [imageCount, setImageCount] = useImageCount();
|
|
59
63
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
64
|
AvatarProvider,
|
|
61
65
|
{
|
|
62
66
|
scope: __scopeAvatar,
|
|
63
67
|
imageLoadingStatus,
|
|
64
|
-
|
|
68
|
+
setImageLoadingStatus,
|
|
69
|
+
imageCount,
|
|
70
|
+
setImageCount,
|
|
65
71
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.span, { ...avatarProps, ref: forwardedRef })
|
|
66
72
|
}
|
|
67
73
|
);
|
|
@@ -71,16 +77,23 @@ Avatar.displayName = AVATAR_NAME;
|
|
|
71
77
|
var IMAGE_NAME = "AvatarImage";
|
|
72
78
|
var AvatarImage = React.forwardRef(
|
|
73
79
|
(props, forwardedRef) => {
|
|
74
|
-
const { __scopeAvatar, src, onLoadingStatusChange
|
|
75
|
-
}, ...imageProps } = props;
|
|
80
|
+
const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props;
|
|
76
81
|
const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
|
|
77
|
-
|
|
82
|
+
useUpdateImageCount(context.setImageCount);
|
|
83
|
+
const imageLoadingStatus = useImageLoadingStatus(src, {
|
|
84
|
+
referrerPolicy: imageProps.referrerPolicy,
|
|
85
|
+
crossOrigin: imageProps.crossOrigin,
|
|
86
|
+
loadingStatus: context.imageLoadingStatus,
|
|
87
|
+
setLoadingStatus: context.setImageLoadingStatus
|
|
88
|
+
});
|
|
78
89
|
const handleLoadingStatusChange = (0, import_react_use_callback_ref.useCallbackRef)((status) => {
|
|
79
|
-
onLoadingStatusChange(status);
|
|
80
|
-
context.onImageLoadingStatusChange(status);
|
|
90
|
+
onLoadingStatusChange?.(status);
|
|
81
91
|
});
|
|
92
|
+
const loadingStatusRef = React.useRef(imageLoadingStatus);
|
|
82
93
|
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
83
|
-
|
|
94
|
+
const previousLoadingStatus = loadingStatusRef.current;
|
|
95
|
+
loadingStatusRef.current = imageLoadingStatus;
|
|
96
|
+
if (imageLoadingStatus !== previousLoadingStatus) {
|
|
84
97
|
handleLoadingStatusChange(imageLoadingStatus);
|
|
85
98
|
}
|
|
86
99
|
}, [imageLoadingStatus, handleLoadingStatusChange]);
|
|
@@ -104,57 +117,67 @@ var AvatarFallback = React.forwardRef(
|
|
|
104
117
|
}
|
|
105
118
|
);
|
|
106
119
|
AvatarFallback.displayName = FALLBACK_NAME;
|
|
107
|
-
function
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
if (image.src !== src) {
|
|
115
|
-
image.src = src;
|
|
116
|
-
}
|
|
117
|
-
return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
|
|
118
|
-
}
|
|
119
|
-
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
120
|
-
const isHydrated = (0, import_react_use_is_hydrated.useIsHydrated)();
|
|
121
|
-
const imageRef = React.useRef(null);
|
|
122
|
-
const image = (() => {
|
|
123
|
-
if (!isHydrated) return null;
|
|
124
|
-
if (!imageRef.current) {
|
|
125
|
-
imageRef.current = new window.Image();
|
|
126
|
-
}
|
|
127
|
-
return imageRef.current;
|
|
128
|
-
})();
|
|
129
|
-
const [loadingStatus, setLoadingStatus] = React.useState(
|
|
130
|
-
() => resolveLoadingStatus(image, src)
|
|
131
|
-
);
|
|
132
|
-
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
133
|
-
setLoadingStatus(resolveLoadingStatus(image, src));
|
|
134
|
-
}, [image, src]);
|
|
120
|
+
function useImageLoadingStatus(src, {
|
|
121
|
+
loadingStatus,
|
|
122
|
+
setLoadingStatus,
|
|
123
|
+
referrerPolicy,
|
|
124
|
+
crossOrigin
|
|
125
|
+
}) {
|
|
135
126
|
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
136
|
-
|
|
137
|
-
setLoadingStatus(
|
|
127
|
+
if (!src) {
|
|
128
|
+
setLoadingStatus("error");
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
const image = new window.Image();
|
|
132
|
+
const handleLoad = (event) => {
|
|
133
|
+
const image2 = event.currentTarget;
|
|
134
|
+
setLoadingStatus(getImageLoadingStatus(image2));
|
|
138
135
|
};
|
|
139
|
-
|
|
140
|
-
const handleLoad = updateStatus("loaded");
|
|
141
|
-
const handleError = updateStatus("error");
|
|
136
|
+
const handleError = () => setLoadingStatus("error");
|
|
142
137
|
image.addEventListener("load", handleLoad);
|
|
143
138
|
image.addEventListener("error", handleError);
|
|
144
139
|
if (referrerPolicy) {
|
|
145
140
|
image.referrerPolicy = referrerPolicy;
|
|
146
141
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
142
|
+
image.crossOrigin = crossOrigin ?? null;
|
|
143
|
+
image.src = src;
|
|
144
|
+
setLoadingStatus(getImageLoadingStatus(image));
|
|
150
145
|
return () => {
|
|
151
146
|
image.removeEventListener("load", handleLoad);
|
|
152
147
|
image.removeEventListener("error", handleError);
|
|
148
|
+
setLoadingStatus("idle");
|
|
153
149
|
};
|
|
154
|
-
}, [
|
|
150
|
+
}, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
|
|
155
151
|
return loadingStatus;
|
|
156
152
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
153
|
+
function getImageLoadingStatus(image) {
|
|
154
|
+
return image.complete ? image.naturalWidth > 0 ? "loaded" : "error" : "loading";
|
|
155
|
+
}
|
|
156
|
+
function useImageCount() {
|
|
157
|
+
let state = STATIC_IMAGE_COUNT_STATE;
|
|
158
|
+
if (true) {
|
|
159
|
+
state = React.useState(0);
|
|
160
|
+
const [imageCount] = state;
|
|
161
|
+
const hasWarnedRef = React.useRef(false);
|
|
162
|
+
React.useEffect(() => {
|
|
163
|
+
if (imageCount > 1 && !hasWarnedRef.current) {
|
|
164
|
+
hasWarnedRef.current = true;
|
|
165
|
+
console.warn(
|
|
166
|
+
"Avatar: Only one `Avatar.Image` component should be rendered per `Avatar.Root`, but multiple were detected. This will lead to unexpected behavior."
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
}, [imageCount]);
|
|
170
|
+
}
|
|
171
|
+
return state;
|
|
172
|
+
}
|
|
173
|
+
function useUpdateImageCount(setImageCount) {
|
|
174
|
+
if (true) {
|
|
175
|
+
React.useEffect(() => {
|
|
176
|
+
setImageCount((imageCount) => imageCount + 1);
|
|
177
|
+
return () => {
|
|
178
|
+
setImageCount((imageCount) => imageCount - 1);
|
|
179
|
+
};
|
|
180
|
+
}, [setImageCount]);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
160
183
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/avatar.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n} from './avatar';\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './avatar';\n", "import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,2BAAmC;AACnC,oCAA+B;AAC/B,qCAAgC;AAChC,6BAA0B;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n} from './avatar';\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './avatar';\n", "import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n setImageLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;\n imageCount: number;\n setImageCount: React.Dispatch<React.SetStateAction<number>>;\n};\n\nconst STATIC_IMAGE_COUNT_STATE: [number, React.Dispatch<React.SetStateAction<number>>] = [\n 0,\n () => void 0,\n];\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n const [imageCount, setImageCount] = useImageCount();\n\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n setImageLoadingStatus={setImageLoadingStatus}\n imageCount={imageCount}\n setImageCount={setImageCount}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n },\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ComponentRef<typeof Primitive.img>;\ntype PrimitiveImageProps = React.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n useUpdateImageCount(context.setImageCount);\n\n const imageLoadingStatus = useImageLoadingStatus(src, {\n referrerPolicy: imageProps.referrerPolicy,\n crossOrigin: imageProps.crossOrigin,\n loadingStatus: context.imageLoadingStatus,\n setLoadingStatus: context.setImageLoadingStatus,\n });\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange?.(status);\n });\n\n const loadingStatusRef = React.useRef<ImageLoadingStatus>(imageLoadingStatus);\n\n useLayoutEffect(() => {\n const previousLoadingStatus = loadingStatusRef.current;\n loadingStatusRef.current = imageLoadingStatus;\n\n if (imageLoadingStatus !== previousLoadingStatus) {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n },\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ComponentRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n },\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(\n src: string | undefined,\n {\n loadingStatus,\n setLoadingStatus,\n referrerPolicy,\n crossOrigin,\n }: {\n referrerPolicy: React.HTMLAttributeReferrerPolicy | undefined;\n crossOrigin: string | undefined;\n loadingStatus: ImageLoadingStatus;\n setLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;\n },\n) {\n useLayoutEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n const image = new window.Image();\n const handleLoad = (event: Event) => {\n const image = event.currentTarget as HTMLImageElement;\n setLoadingStatus(getImageLoadingStatus(image));\n };\n const handleError = () => setLoadingStatus('error');\n image.addEventListener('load', handleLoad);\n image.addEventListener('error', handleError);\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n image.crossOrigin = crossOrigin ?? null;\n image.src = src;\n\n setLoadingStatus(getImageLoadingStatus(image));\n return () => {\n image.removeEventListener('load', handleLoad);\n image.removeEventListener('error', handleError);\n setLoadingStatus('idle');\n };\n }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);\n\n return loadingStatus;\n}\n\nfunction getImageLoadingStatus(image: HTMLImageElement) {\n return image.complete ? (image.naturalWidth > 0 ? 'loaded' : 'error') : 'loading';\n}\n\n// Image count is only used in development to warn about multiple images, which\n// is unsupported. Gating behind a development flag to avoid performance\n// overhead in production is safe because useState is guaranteed to run\n// consistently in the same environment.\n// oxlint-disable react-hooks/rules-of-hooks\nfunction useImageCount() {\n let state = STATIC_IMAGE_COUNT_STATE;\n if (process.env.NODE_ENV === 'development') {\n state = React.useState(0);\n const [imageCount] = state;\n const hasWarnedRef = React.useRef(false);\n React.useEffect(() => {\n if (imageCount > 1 && !hasWarnedRef.current) {\n hasWarnedRef.current = true;\n console.warn(\n 'Avatar: Only one `Avatar.Image` component should be rendered per `Avatar.Root`, but multiple were detected. This will lead to unexpected behavior.',\n );\n }\n }, [imageCount]);\n }\n\n return state;\n}\n\nfunction useUpdateImageCount(setImageCount: React.Dispatch<React.SetStateAction<number>>) {\n if (process.env.NODE_ENV === 'development') {\n React.useEffect(() => {\n setImageCount((imageCount) => imageCount + 1);\n return () => {\n setImageCount((imageCount) => imageCount - 1);\n };\n }, [setImageCount]);\n }\n}\n// oxlint-enable react-hooks/rules-of-hooks\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Avatar as Root,\n AvatarImage as Image,\n AvatarFallback as Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["image"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -6,21 +6,27 @@ import { createContextScope } from "@radix-ui/react-context";
|
|
|
6
6
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
7
7
|
import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
|
|
8
8
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
9
|
-
import { useIsHydrated } from "@radix-ui/react-use-is-hydrated";
|
|
10
9
|
import { jsx } from "react/jsx-runtime";
|
|
11
10
|
var AVATAR_NAME = "Avatar";
|
|
12
11
|
var [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
|
|
12
|
+
var STATIC_IMAGE_COUNT_STATE = [
|
|
13
|
+
0,
|
|
14
|
+
() => void 0
|
|
15
|
+
];
|
|
13
16
|
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
|
|
14
17
|
var Avatar = React.forwardRef(
|
|
15
18
|
(props, forwardedRef) => {
|
|
16
19
|
const { __scopeAvatar, ...avatarProps } = props;
|
|
17
20
|
const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
|
|
21
|
+
const [imageCount, setImageCount] = useImageCount();
|
|
18
22
|
return /* @__PURE__ */ jsx(
|
|
19
23
|
AvatarProvider,
|
|
20
24
|
{
|
|
21
25
|
scope: __scopeAvatar,
|
|
22
26
|
imageLoadingStatus,
|
|
23
|
-
|
|
27
|
+
setImageLoadingStatus,
|
|
28
|
+
imageCount,
|
|
29
|
+
setImageCount,
|
|
24
30
|
children: /* @__PURE__ */ jsx(Primitive.span, { ...avatarProps, ref: forwardedRef })
|
|
25
31
|
}
|
|
26
32
|
);
|
|
@@ -30,16 +36,23 @@ Avatar.displayName = AVATAR_NAME;
|
|
|
30
36
|
var IMAGE_NAME = "AvatarImage";
|
|
31
37
|
var AvatarImage = React.forwardRef(
|
|
32
38
|
(props, forwardedRef) => {
|
|
33
|
-
const { __scopeAvatar, src, onLoadingStatusChange
|
|
34
|
-
}, ...imageProps } = props;
|
|
39
|
+
const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props;
|
|
35
40
|
const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
|
|
36
|
-
|
|
41
|
+
useUpdateImageCount(context.setImageCount);
|
|
42
|
+
const imageLoadingStatus = useImageLoadingStatus(src, {
|
|
43
|
+
referrerPolicy: imageProps.referrerPolicy,
|
|
44
|
+
crossOrigin: imageProps.crossOrigin,
|
|
45
|
+
loadingStatus: context.imageLoadingStatus,
|
|
46
|
+
setLoadingStatus: context.setImageLoadingStatus
|
|
47
|
+
});
|
|
37
48
|
const handleLoadingStatusChange = useCallbackRef((status) => {
|
|
38
|
-
onLoadingStatusChange(status);
|
|
39
|
-
context.onImageLoadingStatusChange(status);
|
|
49
|
+
onLoadingStatusChange?.(status);
|
|
40
50
|
});
|
|
51
|
+
const loadingStatusRef = React.useRef(imageLoadingStatus);
|
|
41
52
|
useLayoutEffect(() => {
|
|
42
|
-
|
|
53
|
+
const previousLoadingStatus = loadingStatusRef.current;
|
|
54
|
+
loadingStatusRef.current = imageLoadingStatus;
|
|
55
|
+
if (imageLoadingStatus !== previousLoadingStatus) {
|
|
43
56
|
handleLoadingStatusChange(imageLoadingStatus);
|
|
44
57
|
}
|
|
45
58
|
}, [imageLoadingStatus, handleLoadingStatusChange]);
|
|
@@ -63,66 +76,76 @@ var AvatarFallback = React.forwardRef(
|
|
|
63
76
|
}
|
|
64
77
|
);
|
|
65
78
|
AvatarFallback.displayName = FALLBACK_NAME;
|
|
66
|
-
function
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
if (image.src !== src) {
|
|
74
|
-
image.src = src;
|
|
75
|
-
}
|
|
76
|
-
return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
|
|
77
|
-
}
|
|
78
|
-
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
79
|
-
const isHydrated = useIsHydrated();
|
|
80
|
-
const imageRef = React.useRef(null);
|
|
81
|
-
const image = (() => {
|
|
82
|
-
if (!isHydrated) return null;
|
|
83
|
-
if (!imageRef.current) {
|
|
84
|
-
imageRef.current = new window.Image();
|
|
85
|
-
}
|
|
86
|
-
return imageRef.current;
|
|
87
|
-
})();
|
|
88
|
-
const [loadingStatus, setLoadingStatus] = React.useState(
|
|
89
|
-
() => resolveLoadingStatus(image, src)
|
|
90
|
-
);
|
|
91
|
-
useLayoutEffect(() => {
|
|
92
|
-
setLoadingStatus(resolveLoadingStatus(image, src));
|
|
93
|
-
}, [image, src]);
|
|
79
|
+
function useImageLoadingStatus(src, {
|
|
80
|
+
loadingStatus,
|
|
81
|
+
setLoadingStatus,
|
|
82
|
+
referrerPolicy,
|
|
83
|
+
crossOrigin
|
|
84
|
+
}) {
|
|
94
85
|
useLayoutEffect(() => {
|
|
95
|
-
|
|
96
|
-
setLoadingStatus(
|
|
86
|
+
if (!src) {
|
|
87
|
+
setLoadingStatus("error");
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
const image = new window.Image();
|
|
91
|
+
const handleLoad = (event) => {
|
|
92
|
+
const image2 = event.currentTarget;
|
|
93
|
+
setLoadingStatus(getImageLoadingStatus(image2));
|
|
97
94
|
};
|
|
98
|
-
|
|
99
|
-
const handleLoad = updateStatus("loaded");
|
|
100
|
-
const handleError = updateStatus("error");
|
|
95
|
+
const handleError = () => setLoadingStatus("error");
|
|
101
96
|
image.addEventListener("load", handleLoad);
|
|
102
97
|
image.addEventListener("error", handleError);
|
|
103
98
|
if (referrerPolicy) {
|
|
104
99
|
image.referrerPolicy = referrerPolicy;
|
|
105
100
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
101
|
+
image.crossOrigin = crossOrigin ?? null;
|
|
102
|
+
image.src = src;
|
|
103
|
+
setLoadingStatus(getImageLoadingStatus(image));
|
|
109
104
|
return () => {
|
|
110
105
|
image.removeEventListener("load", handleLoad);
|
|
111
106
|
image.removeEventListener("error", handleError);
|
|
107
|
+
setLoadingStatus("idle");
|
|
112
108
|
};
|
|
113
|
-
}, [
|
|
109
|
+
}, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
|
|
114
110
|
return loadingStatus;
|
|
115
111
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
112
|
+
function getImageLoadingStatus(image) {
|
|
113
|
+
return image.complete ? image.naturalWidth > 0 ? "loaded" : "error" : "loading";
|
|
114
|
+
}
|
|
115
|
+
function useImageCount() {
|
|
116
|
+
let state = STATIC_IMAGE_COUNT_STATE;
|
|
117
|
+
if (true) {
|
|
118
|
+
state = React.useState(0);
|
|
119
|
+
const [imageCount] = state;
|
|
120
|
+
const hasWarnedRef = React.useRef(false);
|
|
121
|
+
React.useEffect(() => {
|
|
122
|
+
if (imageCount > 1 && !hasWarnedRef.current) {
|
|
123
|
+
hasWarnedRef.current = true;
|
|
124
|
+
console.warn(
|
|
125
|
+
"Avatar: Only one `Avatar.Image` component should be rendered per `Avatar.Root`, but multiple were detected. This will lead to unexpected behavior."
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
}, [imageCount]);
|
|
129
|
+
}
|
|
130
|
+
return state;
|
|
131
|
+
}
|
|
132
|
+
function useUpdateImageCount(setImageCount) {
|
|
133
|
+
if (true) {
|
|
134
|
+
React.useEffect(() => {
|
|
135
|
+
setImageCount((imageCount) => imageCount + 1);
|
|
136
|
+
return () => {
|
|
137
|
+
setImageCount((imageCount) => imageCount - 1);
|
|
138
|
+
};
|
|
139
|
+
}, [setImageCount]);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
119
142
|
export {
|
|
120
143
|
Avatar,
|
|
121
144
|
AvatarFallback,
|
|
122
145
|
AvatarImage,
|
|
123
|
-
Fallback,
|
|
124
|
-
Image,
|
|
125
|
-
Root,
|
|
146
|
+
AvatarFallback as Fallback,
|
|
147
|
+
AvatarImage as Image,
|
|
148
|
+
Avatar as Root,
|
|
126
149
|
createAvatarScope
|
|
127
150
|
};
|
|
128
151
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/avatar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n setImageLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;\n imageCount: number;\n setImageCount: React.Dispatch<React.SetStateAction<number>>;\n};\n\nconst STATIC_IMAGE_COUNT_STATE: [number, React.Dispatch<React.SetStateAction<number>>] = [\n 0,\n () => void 0,\n];\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n const [imageCount, setImageCount] = useImageCount();\n\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n setImageLoadingStatus={setImageLoadingStatus}\n imageCount={imageCount}\n setImageCount={setImageCount}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n },\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ComponentRef<typeof Primitive.img>;\ntype PrimitiveImageProps = React.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n useUpdateImageCount(context.setImageCount);\n\n const imageLoadingStatus = useImageLoadingStatus(src, {\n referrerPolicy: imageProps.referrerPolicy,\n crossOrigin: imageProps.crossOrigin,\n loadingStatus: context.imageLoadingStatus,\n setLoadingStatus: context.setImageLoadingStatus,\n });\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange?.(status);\n });\n\n const loadingStatusRef = React.useRef<ImageLoadingStatus>(imageLoadingStatus);\n\n useLayoutEffect(() => {\n const previousLoadingStatus = loadingStatusRef.current;\n loadingStatusRef.current = imageLoadingStatus;\n\n if (imageLoadingStatus !== previousLoadingStatus) {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n },\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ComponentRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n },\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(\n src: string | undefined,\n {\n loadingStatus,\n setLoadingStatus,\n referrerPolicy,\n crossOrigin,\n }: {\n referrerPolicy: React.HTMLAttributeReferrerPolicy | undefined;\n crossOrigin: string | undefined;\n loadingStatus: ImageLoadingStatus;\n setLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;\n },\n) {\n useLayoutEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n const image = new window.Image();\n const handleLoad = (event: Event) => {\n const image = event.currentTarget as HTMLImageElement;\n setLoadingStatus(getImageLoadingStatus(image));\n };\n const handleError = () => setLoadingStatus('error');\n image.addEventListener('load', handleLoad);\n image.addEventListener('error', handleError);\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n image.crossOrigin = crossOrigin ?? null;\n image.src = src;\n\n setLoadingStatus(getImageLoadingStatus(image));\n return () => {\n image.removeEventListener('load', handleLoad);\n image.removeEventListener('error', handleError);\n setLoadingStatus('idle');\n };\n }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);\n\n return loadingStatus;\n}\n\nfunction getImageLoadingStatus(image: HTMLImageElement) {\n return image.complete ? (image.naturalWidth > 0 ? 'loaded' : 'error') : 'loading';\n}\n\n// Image count is only used in development to warn about multiple images, which\n// is unsupported. Gating behind a development flag to avoid performance\n// overhead in production is safe because useState is guaranteed to run\n// consistently in the same environment.\n// oxlint-disable react-hooks/rules-of-hooks\nfunction useImageCount() {\n let state = STATIC_IMAGE_COUNT_STATE;\n if (process.env.NODE_ENV === 'development') {\n state = React.useState(0);\n const [imageCount] = state;\n const hasWarnedRef = React.useRef(false);\n React.useEffect(() => {\n if (imageCount > 1 && !hasWarnedRef.current) {\n hasWarnedRef.current = true;\n console.warn(\n 'Avatar: Only one `Avatar.Image` component should be rendered per `Avatar.Root`, but multiple were detected. This will lead to unexpected behavior.',\n );\n }\n }, [imageCount]);\n }\n\n return state;\n}\n\nfunction useUpdateImageCount(setImageCount: React.Dispatch<React.SetStateAction<number>>) {\n if (process.env.NODE_ENV === 'development') {\n React.useEffect(() => {\n setImageCount((imageCount) => imageCount + 1);\n return () => {\n setImageCount((imageCount) => imageCount - 1);\n };\n }, [setImageCount]);\n }\n}\n// oxlint-enable react-hooks/rules-of-hooks\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Avatar as Root,\n AvatarImage as Image,\n AvatarFallback as Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["image"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-avatar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0-rc.1780862247684",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@radix-ui/react-context": "1.1.4",
|
|
15
|
+
"@radix-ui/react-primitive": "2.1.6-rc.1780862247684",
|
|
15
16
|
"@radix-ui/react-use-callback-ref": "1.1.2",
|
|
16
|
-
"@radix-ui/react-
|
|
17
|
-
"@radix-ui/react-use-is-hydrated": "0.1.1"
|
|
18
|
-
"@radix-ui/react-use-layout-effect": "1.1.2"
|
|
17
|
+
"@radix-ui/react-use-layout-effect": "1.1.2",
|
|
18
|
+
"@radix-ui/react-use-is-hydrated": "0.1.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@types/react": "^19.2.2",
|