@radix-ui/react-avatar - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0-rc.1

dist/index.d.ts

@@ -1,23 +0,35 @@
-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 {
+import * as React from 'react';
+import * as Radix from '@radix-ui/react-primitive';
+import { Primitive } from '@radix-ui/react-primitive';
+
+declare type Scope<C = any> = {
+    [scopeName: string]: React.Context<C>[];
+} | undefined;
+declare type ScopeHook = (scope: Scope) => {
+    [__scopeProp: string]: Scope;
+};
+interface CreateScope {
+    scopeName: string;
+    (): ScopeHook;
 }
-export const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
-type PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;
-export interface AvatarImageProps extends PrimitiveImageProps {
+
+declare const createAvatarScope: CreateScope;
+declare type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+declare type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
+interface AvatarProps extends PrimitiveSpanProps {
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare type PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;
+interface AvatarImageProps extends PrimitiveImageProps {
     onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
 }
-export const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
-export interface AvatarFallbackProps extends PrimitiveSpanProps {
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends PrimitiveSpanProps {
     delayMs?: number;
 }
-export const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
-export const Root: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
-export const Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
-export const Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Root: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+declare const Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
 
-//# sourceMappingURL=index.d.ts.map
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Fallback, Image, Root, createAvatarScope };

dist/index.js

@@ -1,129 +0,121 @@
-var $6FDFN$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
-var $6FDFN$react = require("react");
-var $6FDFN$radixuireactcontext = require("@radix-ui/react-context");
-var $6FDFN$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
-var $6FDFN$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
-var $6FDFN$radixuireactprimitive = require("@radix-ui/react-primitive");
+"use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "createAvatarScope", () => $94437fed6c1d6d8a$export$90370d16b488820f);
-$parcel$export(module.exports, "Avatar", () => $94437fed6c1d6d8a$export$e2255cf6045e8d47);
-$parcel$export(module.exports, "AvatarImage", () => $94437fed6c1d6d8a$export$2cd8ae1985206fe8);
-$parcel$export(module.exports, "AvatarFallback", () => $94437fed6c1d6d8a$export$69fffb6a9571fbfe);
-$parcel$export(module.exports, "Root", () => $94437fed6c1d6d8a$export$be92b6f5f03c0fe9);
-$parcel$export(module.exports, "Image", () => $94437fed6c1d6d8a$export$3e431a229df88919);
-$parcel$export(module.exports, "Fallback", () => $94437fed6c1d6d8a$export$fb8d7f40caaeea67);
-
-
-
-
-
-
-/* -------------------------------------------------------------------------------------------------
- * Avatar
- * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$AVATAR_NAME = 'Avatar';
-const [$94437fed6c1d6d8a$var$createAvatarContext, $94437fed6c1d6d8a$export$90370d16b488820f] = $6FDFN$radixuireactcontext.createContextScope($94437fed6c1d6d8a$var$AVATAR_NAME);
-const [$94437fed6c1d6d8a$var$AvatarProvider, $94437fed6c1d6d8a$var$useAvatarContext] = $94437fed6c1d6d8a$var$createAvatarContext($94437fed6c1d6d8a$var$AVATAR_NAME);
-const $94437fed6c1d6d8a$export$e2255cf6045e8d47 = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeAvatar: __scopeAvatar , ...avatarProps } = props;
-    const [imageLoadingStatus, setImageLoadingStatus] = $6FDFN$react.useState('idle');
-    return /*#__PURE__*/ $6FDFN$react.createElement($94437fed6c1d6d8a$var$AvatarProvider, {
-        scope: __scopeAvatar,
-        imageLoadingStatus: imageLoadingStatus,
-        onImageLoadingStatusChange: setImageLoadingStatus
-    }, /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, avatarProps, {
-        ref: forwardedRef
-    })));
-});
-/*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$e2255cf6045e8d47, {
-    displayName: $94437fed6c1d6d8a$var$AVATAR_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * AvatarImage
- * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$IMAGE_NAME = 'AvatarImage';
-const $94437fed6c1d6d8a$export$2cd8ae1985206fe8 = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeAvatar: __scopeAvatar , src: src , onLoadingStatusChange: onLoadingStatusChange = ()=>{} , ...imageProps } = props;
-    const context = $94437fed6c1d6d8a$var$useAvatarContext($94437fed6c1d6d8a$var$IMAGE_NAME, __scopeAvatar);
-    const imageLoadingStatus = $94437fed6c1d6d8a$var$useImageLoadingStatus(src);
-    const handleLoadingStatusChange = $6FDFN$radixuireactusecallbackref.useCallbackRef((status)=>{
+  // packages/react/avatar/src/Avatar.tsx
+  var React = __toESM(__require("react"));
+  var import_react_context = __require("@radix-ui/react-context");
+  var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
+  var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
+  var import_react_primitive = __require("@radix-ui/react-primitive");
+  var import_jsx_runtime = __require("react/jsx-runtime");
+  var AVATAR_NAME = "Avatar";
+  var [createAvatarContext, createAvatarScope] = (0, import_react_context.createContextScope)(AVATAR_NAME);
+  var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
+  var Avatar = React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeAvatar, ...avatarProps } = props;
+      const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AvatarProvider,
+        {
+          scope: __scopeAvatar,
+          imageLoadingStatus,
+          onImageLoadingStatusChange: setImageLoadingStatus,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.span, { ...avatarProps, ref: forwardedRef })
+        }
+      );
+    }
+  );
+  Avatar.displayName = AVATAR_NAME;
+  var IMAGE_NAME = "AvatarImage";
+  var AvatarImage = React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeAvatar, src, onLoadingStatusChange = () => {
+      }, ...imageProps } = props;
+      const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
+      const imageLoadingStatus = useImageLoadingStatus(src);
+      const handleLoadingStatusChange = (0, import_react_use_callback_ref.useCallbackRef)((status) => {
         onLoadingStatusChange(status);
         context.onImageLoadingStatusChange(status);
-    });
-    $6FDFN$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (imageLoadingStatus !== 'idle') handleLoadingStatusChange(imageLoadingStatus);
-    }, [
-        imageLoadingStatus,
-        handleLoadingStatusChange
-    ]);
-    return imageLoadingStatus === 'loaded' ? /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.img, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, imageProps, {
-        ref: forwardedRef,
-        src: src
-    })) : null;
-});
-/*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$2cd8ae1985206fe8, {
-    displayName: $94437fed6c1d6d8a$var$IMAGE_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * AvatarFallback
- * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$FALLBACK_NAME = 'AvatarFallback';
-const $94437fed6c1d6d8a$export$69fffb6a9571fbfe = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeAvatar: __scopeAvatar , delayMs: delayMs , ...fallbackProps } = props;
-    const context = $94437fed6c1d6d8a$var$useAvatarContext($94437fed6c1d6d8a$var$FALLBACK_NAME, __scopeAvatar);
-    const [canRender, setCanRender] = $6FDFN$react.useState(delayMs === undefined);
-    $6FDFN$react.useEffect(()=>{
-        if (delayMs !== undefined) {
-            const timerId = window.setTimeout(()=>setCanRender(true)
-            , delayMs);
-            return ()=>window.clearTimeout(timerId)
-            ;
+      });
+      (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+        if (imageLoadingStatus !== "idle") {
+          handleLoadingStatusChange(imageLoadingStatus);
         }
-    }, [
-        delayMs
-    ]);
-    return canRender && context.imageLoadingStatus !== 'loaded' ? /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, fallbackProps, {
-        ref: forwardedRef
-    })) : null;
-});
-/*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$69fffb6a9571fbfe, {
-    displayName: $94437fed6c1d6d8a$var$FALLBACK_NAME
-});
-/* -----------------------------------------------------------------------------------------------*/ function $94437fed6c1d6d8a$var$useImageLoadingStatus(src) {
-    const [loadingStatus, setLoadingStatus] = $6FDFN$react.useState('idle');
-    $6FDFN$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (!src) {
-            setLoadingStatus('error');
-            return;
+      }, [imageLoadingStatus, handleLoadingStatusChange]);
+      return imageLoadingStatus === "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;
+    }
+  );
+  AvatarImage.displayName = IMAGE_NAME;
+  var FALLBACK_NAME = "AvatarFallback";
+  var AvatarFallback = React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeAvatar, delayMs, ...fallbackProps } = props;
+      const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
+      const [canRender, setCanRender] = React.useState(delayMs === void 0);
+      React.useEffect(() => {
+        if (delayMs !== void 0) {
+          const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+          return () => window.clearTimeout(timerId);
         }
-        let isMounted = true;
-        const image = new window.Image();
-        const updateStatus = (status)=>()=>{
-                if (!isMounted) return;
-                setLoadingStatus(status);
-            }
-        ;
-        setLoadingStatus('loading');
-        image.onload = updateStatus('loaded');
-        image.onerror = updateStatus('error');
-        image.src = src;
-        return ()=>{
-            isMounted = false;
-        };
-    }, [
-        src
-    ]);
+      }, [delayMs]);
+      return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;
+    }
+  );
+  AvatarFallback.displayName = FALLBACK_NAME;
+  function useImageLoadingStatus(src) {
+    const [loadingStatus, setLoadingStatus] = React.useState("idle");
+    (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+      if (!src) {
+        setLoadingStatus("error");
+        return;
+      }
+      let isMounted = true;
+      const image = new window.Image();
+      const updateStatus = (status) => () => {
+        if (!isMounted) return;
+        setLoadingStatus(status);
+      };
+      setLoadingStatus("loading");
+      image.onload = updateStatus("loaded");
+      image.onerror = updateStatus("error");
+      image.src = src;
+      return () => {
+        isMounted = false;
+      };
+    }, [src]);
     return loadingStatus;
-}
-const $94437fed6c1d6d8a$export$be92b6f5f03c0fe9 = $94437fed6c1d6d8a$export$e2255cf6045e8d47;
-const $94437fed6c1d6d8a$export$3e431a229df88919 = $94437fed6c1d6d8a$export$2cd8ae1985206fe8;
-const $94437fed6c1d6d8a$export$fb8d7f40caaeea67 = $94437fed6c1d6d8a$export$69fffb6a9571fbfe;
-
-
-
-
+  }
+  var Root = Avatar;
+  var Image = AvatarImage;
+  var Fallback = AvatarFallback;
+})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@radix-ui/react-avatar",
-  "version": "1.0.4",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
@@ -31,7 +31,6 @@ "exports": {
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-context": "1.0.1",
-    "@radix-ui/react-primitive": "1.0.3",
-    "@radix-ui/react-use-callback-ref": "1.0.1",
-    "@radix-ui/react-use-layout-effect": "1.0.1"
+    "@radix-ui/react-context": "1.1.0-rc.1",
+    "@radix-ui/react-primitive": "1.1.0-rc.1",
+    "@radix-ui/react-use-callback-ref": "1.1.0-rc.1",
+    "@radix-ui/react-use-layout-effect": "1.1.0-rc.1"
   },
@@ -59,3 +58,4 @@ "peerDependencies": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  }
+  },
+  "stableVersion": "1.0.4"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

8

decreased by-11.11%

Lines of code

250

increased by2.04%

Worsened metrics

Total package byte prevSize

29644

decreased by-24.43%

Number of package files

8

decreased by-11.11%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-compose-refs@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-context@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-primitive@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-slot@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-callback-ref@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-layout-effect@1.1.0-rc.1(transitive)

• - Removed@babel/runtime@^7.13.10

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@radix-ui/react-compose-refs@1.0.1(transitive)

• - Removed@radix-ui/react-context@1.0.1(transitive)

• - Removed@radix-ui/react-primitive@1.0.3(transitive)

• - Removed@radix-ui/react-slot@1.0.2(transitive)

• - Removed@radix-ui/react-use-callback-ref@1.0.1(transitive)

• - Removed@radix-ui/react-use-layout-effect@1.0.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@radix-ui/react-context@1.1.0-rc.1

• Updated@radix-ui/react-primitive@1.1.0-rc.1

• Updated@radix-ui/react-use-callback-ref@1.1.0-rc.1

• Updated@radix-ui/react-use-layout-effect@1.1.0-rc.1