@radix-ui/react-avatar 1.1.4-rc.8 → 1.1.4-rc.9

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.
Files changed (5) hide show
  1. package/dist/index.js +46 -14
  2. package/dist/index.js.map +2 -2
  3. package/dist/index.mjs +46 -14
  4. package/dist/index.mjs.map +2 -2
  5. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -103,35 +103,67 @@ var AvatarFallback = React.forwardRef(
103
103
  }
104
104
  );
105
105
  AvatarFallback.displayName = FALLBACK_NAME;
106
+ function resolveLoadingStatus(image, src) {
107
+ if (!image) {
108
+ return "idle";
109
+ }
110
+ if (!src) {
111
+ return "error";
112
+ }
113
+ if (image.src !== src) {
114
+ image.src = src;
115
+ }
116
+ return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
117
+ }
106
118
  function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
107
- const [loadingStatus, setLoadingStatus] = React.useState("idle");
108
- (0, import_react_use_layout_effect.useLayoutEffect)(() => {
109
- if (!src) {
110
- setLoadingStatus("error");
111
- return;
119
+ const isHydrated = useIsHydrated();
120
+ const imageRef = React.useRef(null);
121
+ const image = (() => {
122
+ if (!isHydrated) return null;
123
+ if (!imageRef.current) {
124
+ imageRef.current = new window.Image();
112
125
  }
113
- let isMounted = true;
114
- const image = new window.Image();
126
+ return imageRef.current;
127
+ })();
128
+ const [loadingStatus, setLoadingStatus] = React.useState(
129
+ () => resolveLoadingStatus(image, src)
130
+ );
131
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
132
+ setLoadingStatus(resolveLoadingStatus(image, src));
133
+ }, [image, src]);
134
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
115
135
  const updateStatus = (status) => () => {
116
- if (!isMounted) return;
117
136
  setLoadingStatus(status);
118
137
  };
119
- setLoadingStatus("loading");
120
- image.onload = updateStatus("loaded");
121
- image.onerror = updateStatus("error");
138
+ if (!image) return;
139
+ const handleLoad = updateStatus("loaded");
140
+ const handleError = updateStatus("error");
141
+ image.addEventListener("load", handleLoad);
142
+ image.addEventListener("error", handleError);
122
143
  if (referrerPolicy) {
123
144
  image.referrerPolicy = referrerPolicy;
124
145
  }
125
146
  if (typeof crossOrigin === "string") {
126
147
  image.crossOrigin = crossOrigin;
127
148
  }
128
- image.src = src;
129
149
  return () => {
130
- isMounted = false;
150
+ image.removeEventListener("load", handleLoad);
151
+ image.removeEventListener("error", handleError);
131
152
  };
132
- }, [src, referrerPolicy, crossOrigin]);
153
+ }, [image, crossOrigin, referrerPolicy]);
133
154
  return loadingStatus;
134
155
  }
156
+ function subscribe() {
157
+ return () => {
158
+ };
159
+ }
160
+ function useIsHydrated() {
161
+ return React.useSyncExternalStore(
162
+ subscribe,
163
+ () => true,
164
+ () => false
165
+ );
166
+ }
135
167
  var Root = Avatar;
136
168
  var Image = AvatarImage;
137
169
  var Fallback = AvatarFallback;
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';\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 onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<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 return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\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.ElementRef<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 const imageLoadingStatus = useImageLoadingStatus(src, imageProps);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\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.ElementRef<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 { referrerPolicy, crossOrigin }: AvatarImageProps\n) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n useLayoutEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n if (typeof crossOrigin === 'string') {\n image.crossOrigin = crossOrigin;\n }\n image.src = src;\n return () => {\n isMounted = false;\n };\n }, [src, referrerPolicy, crossOrigin]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
5
- "mappings": "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",
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 onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<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 return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\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.ElementRef<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 const imageLoadingStatus = useImageLoadingStatus(src, imageProps);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\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.ElementRef<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 resolveLoadingStatus(image: HTMLImageElement | null, src?: string): ImageLoadingStatus {\n if (!image) {\n return 'idle';\n }\n if (!src) {\n return 'error';\n }\n if (image.src !== src) {\n image.src = src;\n }\n return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';\n}\n\nfunction useImageLoadingStatus(\n src: string | undefined,\n { referrerPolicy, crossOrigin }: AvatarImageProps\n) {\n const isHydrated = useIsHydrated();\n const imageRef = React.useRef<HTMLImageElement | null>(null);\n const image = (() => {\n if (!isHydrated) return null;\n if (!imageRef.current) {\n imageRef.current = new window.Image();\n }\n return imageRef.current;\n })();\n\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>(() =>\n resolveLoadingStatus(image, src)\n );\n\n useLayoutEffect(() => {\n setLoadingStatus(resolveLoadingStatus(image, src));\n }, [image, src]);\n\n useLayoutEffect(() => {\n const updateStatus = (status: ImageLoadingStatus) => () => {\n setLoadingStatus(status);\n };\n\n if (!image) return;\n\n const handleLoad = updateStatus('loaded');\n const handleError = updateStatus('error');\n image.addEventListener('load', handleLoad);\n image.addEventListener('error', handleError);\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n if (typeof crossOrigin === 'string') {\n image.crossOrigin = crossOrigin;\n }\n\n return () => {\n image.removeEventListener('load', handleLoad);\n image.removeEventListener('error', handleError);\n };\n }, [image, crossOrigin, referrerPolicy]);\n\n return loadingStatus;\n}\n\nfunction subscribe() {\n return () => {};\n}\n\nfunction useIsHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false\n );\n}\n\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/index.mjs CHANGED
@@ -62,35 +62,67 @@ var AvatarFallback = React.forwardRef(
62
62
  }
63
63
  );
64
64
  AvatarFallback.displayName = FALLBACK_NAME;
65
+ function resolveLoadingStatus(image, src) {
66
+ if (!image) {
67
+ return "idle";
68
+ }
69
+ if (!src) {
70
+ return "error";
71
+ }
72
+ if (image.src !== src) {
73
+ image.src = src;
74
+ }
75
+ return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
76
+ }
65
77
  function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
66
- const [loadingStatus, setLoadingStatus] = React.useState("idle");
67
- useLayoutEffect(() => {
68
- if (!src) {
69
- setLoadingStatus("error");
70
- return;
78
+ const isHydrated = useIsHydrated();
79
+ const imageRef = React.useRef(null);
80
+ const image = (() => {
81
+ if (!isHydrated) return null;
82
+ if (!imageRef.current) {
83
+ imageRef.current = new window.Image();
71
84
  }
72
- let isMounted = true;
73
- const image = new window.Image();
85
+ return imageRef.current;
86
+ })();
87
+ const [loadingStatus, setLoadingStatus] = React.useState(
88
+ () => resolveLoadingStatus(image, src)
89
+ );
90
+ useLayoutEffect(() => {
91
+ setLoadingStatus(resolveLoadingStatus(image, src));
92
+ }, [image, src]);
93
+ useLayoutEffect(() => {
74
94
  const updateStatus = (status) => () => {
75
- if (!isMounted) return;
76
95
  setLoadingStatus(status);
77
96
  };
78
- setLoadingStatus("loading");
79
- image.onload = updateStatus("loaded");
80
- image.onerror = updateStatus("error");
97
+ if (!image) return;
98
+ const handleLoad = updateStatus("loaded");
99
+ const handleError = updateStatus("error");
100
+ image.addEventListener("load", handleLoad);
101
+ image.addEventListener("error", handleError);
81
102
  if (referrerPolicy) {
82
103
  image.referrerPolicy = referrerPolicy;
83
104
  }
84
105
  if (typeof crossOrigin === "string") {
85
106
  image.crossOrigin = crossOrigin;
86
107
  }
87
- image.src = src;
88
108
  return () => {
89
- isMounted = false;
109
+ image.removeEventListener("load", handleLoad);
110
+ image.removeEventListener("error", handleError);
90
111
  };
91
- }, [src, referrerPolicy, crossOrigin]);
112
+ }, [image, crossOrigin, referrerPolicy]);
92
113
  return loadingStatus;
93
114
  }
115
+ function subscribe() {
116
+ return () => {
117
+ };
118
+ }
119
+ function useIsHydrated() {
120
+ return React.useSyncExternalStore(
121
+ subscribe,
122
+ () => true,
123
+ () => false
124
+ );
125
+ }
94
126
  var Root = Avatar;
95
127
  var Image = AvatarImage;
96
128
  var Fallback = AvatarFallback;
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';\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 onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<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 return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\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.ElementRef<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 const imageLoadingStatus = useImageLoadingStatus(src, imageProps);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\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.ElementRef<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 { referrerPolicy, crossOrigin }: AvatarImageProps\n) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n useLayoutEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n if (typeof crossOrigin === 'string') {\n image.crossOrigin = crossOrigin;\n }\n image.src = src;\n return () => {\n isMounted = false;\n };\n }, [src, referrerPolicy, crossOrigin]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
5
- "mappings": "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",
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 onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<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 return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\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.ElementRef<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 const imageLoadingStatus = useImageLoadingStatus(src, imageProps);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\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.ElementRef<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 resolveLoadingStatus(image: HTMLImageElement | null, src?: string): ImageLoadingStatus {\n if (!image) {\n return 'idle';\n }\n if (!src) {\n return 'error';\n }\n if (image.src !== src) {\n image.src = src;\n }\n return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';\n}\n\nfunction useImageLoadingStatus(\n src: string | undefined,\n { referrerPolicy, crossOrigin }: AvatarImageProps\n) {\n const isHydrated = useIsHydrated();\n const imageRef = React.useRef<HTMLImageElement | null>(null);\n const image = (() => {\n if (!isHydrated) return null;\n if (!imageRef.current) {\n imageRef.current = new window.Image();\n }\n return imageRef.current;\n })();\n\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>(() =>\n resolveLoadingStatus(image, src)\n );\n\n useLayoutEffect(() => {\n setLoadingStatus(resolveLoadingStatus(image, src));\n }, [image, src]);\n\n useLayoutEffect(() => {\n const updateStatus = (status: ImageLoadingStatus) => () => {\n setLoadingStatus(status);\n };\n\n if (!image) return;\n\n const handleLoad = updateStatus('loaded');\n const handleError = updateStatus('error');\n image.addEventListener('load', handleLoad);\n image.addEventListener('error', handleError);\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n if (typeof crossOrigin === 'string') {\n image.crossOrigin = crossOrigin;\n }\n\n return () => {\n image.removeEventListener('load', handleLoad);\n image.removeEventListener('error', handleError);\n };\n }, [image, crossOrigin, referrerPolicy]);\n\n return loadingStatus;\n}\n\nfunction subscribe() {\n return () => {};\n}\n\nfunction useIsHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false\n );\n}\n\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-avatar",
3
- "version": "1.1.4-rc.8",
3
+ "version": "1.1.4-rc.9",
4
4
  "license": "MIT",
5
5
  "source": "./src/index.ts",
6
6
  "main": "./dist/index.js",
@@ -33,10 +33,10 @@
33
33
  "version": "yarn version"
34
34
  },
35
35
  "dependencies": {
36
- "@radix-ui/react-context": "1.1.2-rc.8",
37
- "@radix-ui/react-primitive": "2.0.3-rc.8",
38
- "@radix-ui/react-use-callback-ref": "1.1.1-rc.8",
39
- "@radix-ui/react-use-layout-effect": "1.1.1-rc.8"
36
+ "@radix-ui/react-context": "1.1.2-rc.9",
37
+ "@radix-ui/react-primitive": "2.0.3-rc.9",
38
+ "@radix-ui/react-use-callback-ref": "1.1.1-rc.9",
39
+ "@radix-ui/react-use-layout-effect": "1.1.1-rc.9"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@repo/eslint-config": "0.0.0",