@radix-ui/react-avatar 1.1.5 → 1.1.6
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.js +2 -12
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +1 -11
- package/dist/index.mjs.map +2 -2
- package/package.json +8 -7
package/dist/index.js
CHANGED
|
@@ -47,6 +47,7 @@ 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");
|
|
50
51
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
51
52
|
var AVATAR_NAME = "Avatar";
|
|
52
53
|
var [createAvatarContext, createAvatarScope] = (0, import_react_context.createContextScope)(AVATAR_NAME);
|
|
@@ -116,7 +117,7 @@ function resolveLoadingStatus(image, src) {
|
|
|
116
117
|
return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
|
|
117
118
|
}
|
|
118
119
|
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
119
|
-
const isHydrated = useIsHydrated();
|
|
120
|
+
const isHydrated = (0, import_react_use_is_hydrated.useIsHydrated)();
|
|
120
121
|
const imageRef = React.useRef(null);
|
|
121
122
|
const image = (() => {
|
|
122
123
|
if (!isHydrated) return null;
|
|
@@ -153,17 +154,6 @@ function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
|
153
154
|
}, [image, crossOrigin, referrerPolicy]);
|
|
154
155
|
return loadingStatus;
|
|
155
156
|
}
|
|
156
|
-
function subscribe() {
|
|
157
|
-
return () => {
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
function useIsHydrated() {
|
|
161
|
-
return React.useSyncExternalStore(
|
|
162
|
-
subscribe,
|
|
163
|
-
() => true,
|
|
164
|
-
() => false
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
157
|
var Root = Avatar;
|
|
168
158
|
var Image = AvatarImage;
|
|
169
159
|
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 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\
|
|
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;
|
|
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';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\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\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
|
@@ -6,6 +6,7 @@ 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";
|
|
9
10
|
import { jsx } from "react/jsx-runtime";
|
|
10
11
|
var AVATAR_NAME = "Avatar";
|
|
11
12
|
var [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
|
|
@@ -112,17 +113,6 @@ function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
|
112
113
|
}, [image, crossOrigin, referrerPolicy]);
|
|
113
114
|
return loadingStatus;
|
|
114
115
|
}
|
|
115
|
-
function subscribe() {
|
|
116
|
-
return () => {
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
function useIsHydrated() {
|
|
120
|
-
return React.useSyncExternalStore(
|
|
121
|
-
subscribe,
|
|
122
|
-
() => true,
|
|
123
|
-
() => false
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
116
|
var Root = Avatar;
|
|
127
117
|
var Image = AvatarImage;
|
|
128
118
|
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 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\
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;
|
|
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';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\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\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.
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,20 +12,21 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@radix-ui/react-context": "1.1.2",
|
|
15
|
-
"@radix-ui/react-primitive": "2.1.0",
|
|
16
15
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
|
17
|
-
"@radix-ui/react-use-layout-effect": "1.1.1"
|
|
16
|
+
"@radix-ui/react-use-layout-effect": "1.1.1",
|
|
17
|
+
"@radix-ui/react-primitive": "2.1.0",
|
|
18
|
+
"@radix-ui/react-use-is-hydrated": "0.0.0"
|
|
18
19
|
},
|
|
19
20
|
"devDependencies": {
|
|
20
21
|
"@types/react": "^19.0.7",
|
|
21
22
|
"@types/react-dom": "^19.0.3",
|
|
22
23
|
"eslint": "^9.18.0",
|
|
23
|
-
"react": "^19.
|
|
24
|
-
"react-dom": "^19.
|
|
24
|
+
"react": "^19.1.0",
|
|
25
|
+
"react-dom": "^19.1.0",
|
|
25
26
|
"typescript": "^5.7.3",
|
|
26
|
-
"@repo/builder": "0.0.0",
|
|
27
27
|
"@repo/eslint-config": "0.0.0",
|
|
28
|
-
"@repo/typescript-config": "0.0.0"
|
|
28
|
+
"@repo/typescript-config": "0.0.0",
|
|
29
|
+
"@repo/builder": "0.0.0"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|
|
31
32
|
"@types/react": "*",
|