@radix-ui/react-avatar 0.1.1-rc.9 → 0.1.2-rc.3

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as Radix from "@radix-ui/react-primitive";
 import { Primitive } from "@radix-ui/react-primitive";
+export const createAvatarScope: import("@radix-ui/react-context").CreateScope;
 type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
 export interface AvatarProps extends PrimitiveSpanProps {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"A;A;A;AAcA,0BAA0B,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,4BAAsB,SAAQ,kBAAkB;CAAG;AAEnD,OAAA,MAAM,2FAUJ,CAAC;AAWH,2BAA2B,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAChF,iCAA2B,SAAQ,mBAAmB;IACpD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC9D;AAED,OAAA,MAAM,sGAoBL,CAAC;AAWF,oCAA8B,SAAQ,kBAAkB;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,OAAA,MAAM,2GAiBL,CAAC;AAmCF,OAAA,MAAM,yFAAa,CAAC;AACpB,OAAA,MAAM,gGAAmB,CAAC;AAC1B,OAAA,MAAM,qGAAyB,CAAC","sources":["./packages/react/avatar/src/packages/react/avatar/src/Avatar.tsx","./packages/react/avatar/src/packages/react/avatar/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"A;A;A;AAgBA,OAAA,wFAAgF,CAAC;AAEjF,0BAA0B,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,4BAAsB,SAAQ,kBAAkB;CAAG;AAEnD,OAAA,MAAM,2FAcL,CAAC;AAWF,2BAA2B,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAChF,iCAA2B,SAAQ,mBAAmB;IACpD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC9D;AAED,OAAA,MAAM,sGAoBL,CAAC;AAWF,oCAA8B,SAAQ,kBAAkB;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,OAAA,MAAM,2GAiBL,CAAC;AAmCF,OAAA,MAAM,yFAAa,CAAC;AACpB,OAAA,MAAM,gGAAmB,CAAC;AAC1B,OAAA,MAAM,qGAAyB,CAAC","sources":["./packages/react/avatar/src/packages/react/avatar/src/Avatar.tsx","./packages/react/avatar/src/packages/react/avatar/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e,t,r,a=require("@radix-ui/react-primitive").Primitive,o=require("@radix-ui/react-use-layout-effect").useLayoutEffect,n=require("@radix-ui/react-use-callback-ref").useCallbackRef,i=require("@radix-ui/react-context").createContext,u=(e={},t=require("react"),Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e),s=(r=require("@babel/runtime/helpers/extends"))&&r.__esModule?r.default:r;const[c,l]=i("Avatar"),d=/*#__PURE__*/u.forwardRef(((e,t)=>{const[r,o]=u.useState("idle");/*#__PURE__*/return u.createElement(c,{imageLoadingStatus:r,onImageLoadingStatusChange:o},/*#__PURE__*/u.createElement(a.span,s({},e,{ref:t})))}));exports.Avatar=d;const f=/*#__PURE__*/u.forwardRef(((e,t)=>{const{src:r,onLoadingStatusChange:i=(()=>{}),...c}=e,d=l("AvatarImage"),f=function(e){const[t,r]=u.useState("idle");return u.useEffect((()=>{if(!e)return void r("error");let t=!0;const a=new window.Image,o=e=>()=>{t&&r(e)};return r("loading"),a.onload=o("loaded"),a.onerror=o("error"),a.src=e,()=>{t=!1}}),[e]),t}(r),g=n((e=>{i(e),d.onImageLoadingStatusChange(e)}));return o((()=>{"idle"!==f&&g(f)}),[f,g]),"loaded"===f?/*#__PURE__*/u.createElement(a.img,s({},c,{ref:t,src:r})):null}));exports.AvatarImage=f;const g=/*#__PURE__*/u.forwardRef(((e,t)=>{const{delayMs:r,...o}=e,n=l("AvatarFallback"),[i,c]=u.useState(void 0===r);return u.useEffect((()=>{if(void 0!==r){const e=window.setTimeout((()=>c(!0)),r);return()=>window.clearTimeout(e)}}),[r]),i&&"loaded"!==n.imageLoadingStatus?/*#__PURE__*/u.createElement(a.span,s({},o,{ref:t})):null}));exports.AvatarFallback=g;const m=d;exports.Root=m;const x=f;exports.Image=x;const v=g;exports.Fallback=v;
+var e,t,r,a=require("@radix-ui/react-primitive").Primitive,o=require("@radix-ui/react-use-layout-effect").useLayoutEffect,n=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-context").createContextScope,s=(e={},t=require("react"),Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e),i=(r=require("@babel/runtime/helpers/extends"))&&r.__esModule?r.default:r;const[u,l]=c("Avatar");exports.createAvatarScope=l;const[d,f]=u("Avatar"),g=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,...o}=e,[n,c]=s.useState("idle");/*#__PURE__*/return s.createElement(d,{scope:r,imageLoadingStatus:n,onImageLoadingStatusChange:c},/*#__PURE__*/s.createElement(a.span,i({},o,{ref:t})))}));exports.Avatar=g;const m=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,src:c,onLoadingStatusChange:u=(()=>{}),...l}=e,d=f("AvatarImage",r),g=function(e){const[t,r]=s.useState("idle");return s.useEffect((()=>{if(!e)return void r("error");let t=!0;const a=new window.Image,o=e=>()=>{t&&r(e)};return r("loading"),a.onload=o("loaded"),a.onerror=o("error"),a.src=e,()=>{t=!1}}),[e]),t}(c),m=n((e=>{u(e),d.onImageLoadingStatusChange(e)}));return o((()=>{"idle"!==g&&m(g)}),[g,m]),"loaded"===g?/*#__PURE__*/s.createElement(a.img,i({},l,{ref:t,src:c})):null}));exports.AvatarImage=m;const p=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,delayMs:o,...n}=e,c=f("AvatarFallback",r),[u,l]=s.useState(void 0===o);return s.useEffect((()=>{if(void 0!==o){const e=window.setTimeout((()=>l(!0)),o);return()=>window.clearTimeout(e)}}),[o]),u&&"loaded"!==c.imageLoadingStatus?/*#__PURE__*/s.createElement(a.span,i({},n,{ref:t})):null}));exports.AvatarFallback=p;const v=g;exports.Root=v;const x=m;exports.Image=x;const A=p;exports.Fallback=A;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":"IAYgCA,EAAMC,EAZNC,qOAYAF,KAAMC,mBACpCE,OAAOC,KAAKH,GAAQI,SAAQ,SAASC,GACvB,YAARA,GAA6B,eAARA,GAIzBH,OAAOI,eAAeP,EAAMM,EAAK,CAC/BE,YAAY,EACZC,IAAK,WACH,OAAOR,EAAOK,SAKbN,MA1BuBE,8CAClBA,EAAEQ,WAAaR,EAAES,QAAUT,ECWzC,MASOU,EAAgBC,GAAoBC,EATvB,UAedC,eAASC,EAAMC,YAAuC,CAACC,EAAOC,KAClE,MAAOC,EAAoBC,GAAyBL,EAAMM,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEL,mBAAoBA,EACpBM,2BAA4BL,gBAE5BE,EAAAC,cAACG,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAA2BY,IAAKX,0BAWtC,MAQMY,eAAcf,EAAMC,YACxB,CAACC,EAAOC,KACN,MAAMa,IAAEA,EAAFC,sBAAOA,EAAwB,YAAaC,GAAehB,EAC3DiB,EAAUtB,EAXD,eAYTO,EAsDV,SAA+BY,GAC7B,MAAOI,EAAeC,GAAoBrB,EAAMM,SAA6B,QA0B7E,OAxBAN,EAAMsB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB9B,GACF4B,EAA0B5B,KAE3B,CAACA,EAAoB4B,IAEM,WAAvB5B,eACLG,EAAAC,cAACG,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKX,EAAca,IAAKA,KACrD,8BAUR,MAOMoB,eAAiBpC,EAAMC,YAC3B,CAACC,EAAOC,KACN,MAAMkC,QAAEA,KAAYC,GAAkBpC,EAChCiB,EAAUtB,EAVE,mBAWX0C,EAAWC,GAAgBxC,EAAMM,cAAqBmC,IAAZJ,GASjD,OAPArC,EAAMsB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQf,gCAC1BG,EAAAC,cAACG,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKX,KACtC,iCAqCR,MAAM0C,EAAO9C,iBACb,MAAM2B,EAAQX,kBACd,MAAM+B,EAAWV","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\n","import * as React from 'react';\nimport { createContext } 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 * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n  imageLoadingStatus: ImageLoadingStatus;\n  onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>((props, forwardedRef) => {\n  const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n  return (\n    <AvatarProvider\n      imageLoadingStatus={imageLoadingStatus}\n      onImageLoadingStatusChange={setImageLoadingStatus}\n    >\n      <Primitive.span {...props} ref={forwardedRef} />\n    </AvatarProvider>\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 = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n  (props, forwardedRef) => {\n    const { src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n    const context = useAvatarContext(IMAGE_NAME);\n    const imageLoadingStatus = useImageLoadingStatus(src);\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, forwardedRef) => {\n    const { delayMs, ...fallbackProps } = props;\n    const context = useAvatarContext(FALLBACK_NAME);\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(src?: string) {\n  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n  React.useEffect(() => {\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    image.src = src;\n\n    return () => {\n      isMounted = false;\n    };\n  }, [src]);\n\n  return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  //\n  Root,\n  Image,\n  Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","AvatarProvider","useAvatarContext","createContext","Avatar","React","forwardRef","props","forwardedRef","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$c23965db28f1a5b5bcad2d58e45a8153$var$AvatarProvider","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.js.map"}
+{"mappings":"IAYgCA,EAAMC,EAZNC,0OAYAF,KAAMC,mBACpCE,OAAOC,KAAKH,GAAQI,SAAQ,SAASC,GACvB,YAARA,GAA6B,eAARA,GAIzBH,OAAOI,eAAeP,EAAMM,EAAK,CAC/BE,YAAY,EACZC,IAAK,WACH,OAAOR,EAAOK,SAKbN,MA1BuBE,8CAClBA,EAAEQ,WAAaR,EAAES,QAAUT,ECYzC,MAGOU,EAAqBC,GAAqBC,EAH7B,sCAYpB,MAAOC,EAAgBC,GAAoBJ,EAZvB,UAkBdK,eAASC,EAAMC,YACnB,CAACC,EAAiCC,KAChC,MAAMC,cAAEA,KAAkBC,GAAgBH,GACnCI,EAAoBC,GAAyBP,EAAMQ,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEC,MAAOR,EACPE,mBAAoBA,EACpBO,2BAA4BN,gBAE5BE,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAAiCY,IAAKd,0BAY9C,MAQMe,eAAclB,EAAMC,YACxB,CAACC,EAAsCC,KACrC,MAAMC,cAAEA,EAAFe,IAAiBA,EAAjBC,sBAAsBA,EAAwB,YAAaC,GAAenB,EAC1EoB,EAAUxB,EAXD,cAW8BM,GACvCE,EAsDV,SAA+Ba,GAC7B,MAAOI,EAAeC,GAAoBxB,EAAMQ,SAA6B,QA0B7E,OAxBAR,EAAMyB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB/B,GACF6B,EAA0B7B,KAE3B,CAACA,EAAoB6B,IAEM,WAAvB7B,eACLG,EAAAC,cAACI,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKd,EAAcgB,IAAKA,KACrD,8BAUR,MAOMoB,eAAiBvC,EAAMC,YAC3B,CAACC,EAAyCC,KACxC,MAAMC,cAAEA,EAAFoC,QAAiBA,KAAYC,GAAkBvC,EAC/CoB,EAAUxB,EAVE,iBAU8BM,IACzCsC,EAAWC,GAAgB3C,EAAMQ,cAAqBoC,IAAZJ,GASjD,OAPAxC,EAAMyB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQhB,gCAC1BG,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKd,KACtC,iCAqCR,MAAM6C,EAAOjD,iBACb,MAAM8B,EAAQX,kBACd,MAAM+B,EAAWV","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\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 * as Radix from '@radix-ui/react-primitive';\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 = Radix.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 = Radix.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);\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(src?: string) {\n  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n  React.useEffect(() => {\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    image.src = src;\n\n    return () => {\n      isMounted = false;\n    };\n  }, [src]);\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"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","createAvatarContext","createAvatarScope","createContextScope","AvatarProvider","useAvatarContext","Avatar","React","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$c23965db28f1a5b5bcad2d58e45a8153$var$AvatarProvider","scope","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.js.map"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import{Primitive as e}from"@radix-ui/react-primitive";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useCallbackRef as a}from"@radix-ui/react-use-callback-ref";import{createContext as r}from"@radix-ui/react-context";import*as o from"react";import n from"@babel/runtime/helpers/esm/extends";const[i,c]=r("Avatar");export const Avatar=/*#__PURE__*/o.forwardRef(((t,a)=>{const[r,c]=o.useState("idle");/*#__PURE__*/return o.createElement(i,{imageLoadingStatus:r,onImageLoadingStatusChange:c},/*#__PURE__*/o.createElement(e.span,n({},t,{ref:a})))}));/*#__PURE__*/export const AvatarImage=/*#__PURE__*/o.forwardRef(((r,i)=>{const{src:s,onLoadingStatusChange:l=(()=>{}),...d}=r,m=c("AvatarImage"),u=function(e){const[t,a]=o.useState("idle");return o.useEffect((()=>{if(!e)return void a("error");let t=!0;const r=new window.Image,o=e=>()=>{t&&a(e)};return a("loading"),r.onload=o("loaded"),r.onerror=o("error"),r.src=e,()=>{t=!1}}),[e]),t}(s),f=a((e=>{l(e),m.onImageLoadingStatusChange(e)}));return t((()=>{"idle"!==u&&f(u)}),[u,f]),"loaded"===u?/*#__PURE__*/o.createElement(e.img,n({},d,{ref:i,src:s})):null}));/*#__PURE__*/export const AvatarFallback=/*#__PURE__*/o.forwardRef(((t,a)=>{const{delayMs:r,...i}=t,s=c("AvatarFallback"),[l,d]=o.useState(void 0===r);return o.useEffect((()=>{if(void 0!==r){const e=window.setTimeout((()=>d(!0)),r);return()=>window.clearTimeout(e)}}),[r]),l&&"loaded"!==s.imageLoadingStatus?/*#__PURE__*/o.createElement(e.span,n({},i,{ref:a})):null}));/*#__PURE__*/export const Root=Avatar;export const Image=AvatarImage;export const Fallback=AvatarFallback;
+import{Primitive as e}from"@radix-ui/react-primitive";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useCallbackRef as a}from"@radix-ui/react-use-callback-ref";import{createContextScope as r}from"@radix-ui/react-context";import*as o from"react";import n from"@babel/runtime/helpers/esm/extends";const[c,i]=r("Avatar");export{i as createAvatarScope};const[s,l]=c("Avatar");export const Avatar=/*#__PURE__*/o.forwardRef(((t,a)=>{const{__scopeAvatar:r,...c}=t,[i,l]=o.useState("idle");/*#__PURE__*/return o.createElement(s,{scope:r,imageLoadingStatus:i,onImageLoadingStatusChange:l},/*#__PURE__*/o.createElement(e.span,n({},c,{ref:a})))}));/*#__PURE__*/export const AvatarImage=/*#__PURE__*/o.forwardRef(((r,c)=>{const{__scopeAvatar:i,src:s,onLoadingStatusChange:d=(()=>{}),...m}=r,u=l("AvatarImage",i),f=function(e){const[t,a]=o.useState("idle");return o.useEffect((()=>{if(!e)return void a("error");let t=!0;const r=new window.Image,o=e=>()=>{t&&a(e)};return a("loading"),r.onload=o("loaded"),r.onerror=o("error"),r.src=e,()=>{t=!1}}),[e]),t}(s),p=a((e=>{d(e),u.onImageLoadingStatusChange(e)}));return t((()=>{"idle"!==f&&p(f)}),[f,p]),"loaded"===f?/*#__PURE__*/o.createElement(e.img,n({},m,{ref:c,src:s})):null}));/*#__PURE__*/export const AvatarFallback=/*#__PURE__*/o.forwardRef(((t,a)=>{const{__scopeAvatar:r,delayMs:c,...i}=t,s=l("AvatarFallback",r),[d,m]=o.useState(void 0===c);return o.useEffect((()=>{if(void 0!==c){const e=window.setTimeout((()=>m(!0)),c);return()=>window.clearTimeout(e)}}),[c]),d&&"loaded"!==s.imageLoadingStatus?/*#__PURE__*/o.createElement(e.span,n({},i,{ref:a})):null}));/*#__PURE__*/export const Root=Avatar;export const Image=AvatarImage;export const Fallback=AvatarFallback;
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +1 @@
-{"mappings":"8TAYA,MASOA,EAAgBC,GAAoBC,EATvB,iBAepB,MAAMC,oBAASC,EAAMC,YAAuC,CAACC,EAAOC,KAClE,MAAOC,EAAoBC,GAAyBL,EAAMM,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEL,mBAAoBA,EACpBM,2BAA4BL,gBAE5BE,EAAAC,cAACG,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAA2BY,IAAKX,6BAmBtC,MAAMY,yBAAcf,EAAMC,YACxB,CAACC,EAAOC,KACN,MAAMa,IAAEA,EAAFC,sBAAOA,EAAwB,YAAaC,GAAehB,EAC3DiB,EAAUtB,EAXD,eAYTO,EAsDV,SAA+BY,GAC7B,MAAOI,EAAeC,GAAoBrB,EAAMM,SAA6B,QA0B7E,OAxBAN,EAAMsB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB9B,GACF4B,EAA0B5B,KAE3B,CAACA,EAAoB4B,IAEM,WAAvB5B,eACLG,EAAAC,cAACG,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKX,EAAca,IAAKA,KACrD,4BAiBR,MAAMoB,4BAAiBpC,EAAMC,YAC3B,CAACC,EAAOC,KACN,MAAMkC,QAAEA,KAAYC,GAAkBpC,EAChCiB,EAAUtB,EAVE,mBAWX0C,EAAWC,GAAgBxC,EAAMM,cAAqBmC,IAAZJ,GASjD,OAPArC,EAAMsB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQf,gCAC1BG,EAAAC,cAACG,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKX,KACtC,4BAqCR,MAAM0C,KAAO9C,cACb,MAAM2B,MAAQX,mBACd,MAAM+B,SAAWV","sources":["./packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContext } 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 * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n  imageLoadingStatus: ImageLoadingStatus;\n  onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>((props, forwardedRef) => {\n  const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n  return (\n    <AvatarProvider\n      imageLoadingStatus={imageLoadingStatus}\n      onImageLoadingStatusChange={setImageLoadingStatus}\n    >\n      <Primitive.span {...props} ref={forwardedRef} />\n    </AvatarProvider>\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 = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n  (props, forwardedRef) => {\n    const { src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n    const context = useAvatarContext(IMAGE_NAME);\n    const imageLoadingStatus = useImageLoadingStatus(src);\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, forwardedRef) => {\n    const { delayMs, ...fallbackProps } = props;\n    const context = useAvatarContext(FALLBACK_NAME);\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(src?: string) {\n  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n  React.useEffect(() => {\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    image.src = src;\n\n    return () => {\n      isMounted = false;\n    };\n  }, [src]);\n\n  return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  //\n  Root,\n  Image,\n  Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["AvatarProvider","useAvatarContext","createContext","Avatar","React","forwardRef","props","forwardedRef","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$d82452236d68c76d85a6435a1ccf2f2$var$AvatarProvider","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersEsmExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.module.js.map"}
+{"mappings":"mUAaA,MAGOA,EAAqBC,GAAqBC,EAH7B,yCAYpB,MAAOC,EAAgBC,GAAoBJ,EAZvB,iBAkBpB,MAAMK,oBAASC,EAAMC,YACnB,CAACC,EAAiCC,KAChC,MAAMC,cAAEA,KAAkBC,GAAgBH,GACnCI,EAAoBC,GAAyBP,EAAMQ,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEC,MAAOR,EACPE,mBAAoBA,EACpBO,2BAA4BN,gBAE5BE,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAAiCY,IAAKd,6BAoB9C,MAAMe,yBAAclB,EAAMC,YACxB,CAACC,EAAsCC,KACrC,MAAMC,cAAEA,EAAFe,IAAiBA,EAAjBC,sBAAsBA,EAAwB,YAAaC,GAAenB,EAC1EoB,EAAUxB,EAXD,cAW8BM,GACvCE,EAsDV,SAA+Ba,GAC7B,MAAOI,EAAeC,GAAoBxB,EAAMQ,SAA6B,QA0B7E,OAxBAR,EAAMyB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB/B,GACF6B,EAA0B7B,KAE3B,CAACA,EAAoB6B,IAEM,WAAvB7B,eACLG,EAAAC,cAACI,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKd,EAAcgB,IAAKA,KACrD,4BAiBR,MAAMoB,4BAAiBvC,EAAMC,YAC3B,CAACC,EAAyCC,KACxC,MAAMC,cAAEA,EAAFoC,QAAiBA,KAAYC,GAAkBvC,EAC/CoB,EAAUxB,EAVE,iBAU8BM,IACzCsC,EAAWC,GAAgB3C,EAAMQ,cAAqBoC,IAAZJ,GASjD,OAPAxC,EAAMyB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQhB,gCAC1BG,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKd,KACtC,4BAqCR,MAAM6C,KAAOjD,cACb,MAAM8B,MAAQX,mBACd,MAAM+B,SAAWV","sources":["./packages/react/avatar/src/Avatar.tsx"],"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 * as Radix from '@radix-ui/react-primitive';\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 = Radix.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 = Radix.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);\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(src?: string) {\n  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n  React.useEffect(() => {\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    image.src = src;\n\n    return () => {\n      isMounted = false;\n    };\n  }, [src]);\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"],"names":["createAvatarContext","createAvatarScope","createContextScope","AvatarProvider","useAvatarContext","Avatar","React","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$d82452236d68c76d85a6435a1ccf2f2$var$AvatarProvider","scope","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersEsmExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-avatar",
-  "version": "0.1.1-rc.9",
+  "version": "0.1.2-rc.3",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-context": "0.1.0",
-    "@radix-ui/react-primitive": "0.1.1-rc.9",
+    "@radix-ui/react-context": "0.1.1",
+    "@radix-ui/react-primitive": "0.1.2-rc.3",
     "@radix-ui/react-use-callback-ref": "0.1.0",
     "@radix-ui/react-use-layout-effect": "0.1.0"
   },
@@ -33,5 +33,5 @@
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
   },
-  "stableVersion": "0.1.0"
+  "stableVersion": "0.1.1"
 }