@nextui-org/avatar - npm Package Compare versions

Comparing version 2.0.27 to 2.0.28

dist/avatar-group.js

@@ -27,3 +27,3 @@ "use client";
 module.exports = __toCommonJS(avatar_group_exports);
-var import_system2 = require("@nextui-org/system");
+var import_system3 = require("@nextui-org/system");
 
@@ -119,3 +119,3 @@ // src/avatar-group-context.ts
 var import_react3 = require("react");
-var import_system = require("@nextui-org/system");
+var import_system2 = require("@nextui-org/system");
 
@@ -154,2 +154,3 @@ // src/avatar-icon.tsx
 var import_theme2 = require("@nextui-org/theme");
+var import_system = require("@nextui-org/system");
 var import_utils = require("@react-aria/utils");
@@ -162,4 +163,5 @@ var import_react_utils4 = require("@nextui-org/react-utils");
 var import_interactions = require("@react-aria/interactions");
-function useAvatar(props = {}) {
-  var _a, _b, _c, _d, _e;
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = (0, import_system.useProviderContext)();
   const groupContext = useAvatarGroupContext();
@@ -191,3 +193,3 @@ const isInGroup = !!groupContext;
     ...otherProps
-  } = props;
+  } = originalProps;
   const Component = as || "span";
@@ -198,2 +200,3 @@ const domRef = (0, import_react_utils4.useDOMRef)(ref);
   const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
+  const disableAnimation = (_g = (_f = originalProps.disableAnimation) != null ? _f : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _g : false;
   const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
@@ -212,6 +215,16 @@ const isImgLoaded = imageStatus === "loaded";
         isInGroup,
+        disableAnimation,
         isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
       });
     },
-    [color, radius, size, isBordered, isDisabled, isInGroup, groupContext == null ? void 0 : groupContext.isGrid]
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      disableAnimation,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
   );
@@ -223,3 +236,3 @@ const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
   const getAvatarProps = (0, import_react2.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: domRef,
@@ -231,3 +244,3 @@ tabIndex: canBeFocused ? 0 : -1,
       className: slots.base({
-        class: (0, import_shared_utils2.clsx)(baseStyles, props2 == null ? void 0 : props2.className)
+        class: (0, import_shared_utils2.clsx)(baseStyles, props == null ? void 0 : props.className)
       }),
@@ -239,10 +252,11 @@ ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
   const getImageProps = (0, import_react2.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: imgRef,
       src,
+      disableAnimation,
       "data-loaded": (0, import_shared_utils2.dataAttr)(isImgLoaded),
       className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
-      ...(0, import_utils.mergeProps)(imgProps, props2)
+      ...(0, import_utils.mergeProps)(imgProps, props)
     }),
-    [slots, isImgLoaded, imgProps, src, imgRef]
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef]
   );
@@ -271,3 +285,3 @@ return {
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Avatar = (0, import_system.forwardRef)((props, ref) => {
+var Avatar = (0, import_system2.forwardRef)((props, ref) => {
   const {
@@ -309,3 +323,3 @@ Component,
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var AvatarGroup = (0, import_system2.forwardRef)((props, ref) => {
+var AvatarGroup = (0, import_system3.forwardRef)((props, ref) => {
   const {
@@ -312,0 +326,0 @@ Component,

dist/avatar.js

@@ -28,3 +28,3 @@ "use client";
 var import_react2 = require("react");
-var import_system = require("@nextui-org/system");
+var import_system2 = require("@nextui-org/system");
 
@@ -63,2 +63,3 @@ // src/avatar-icon.tsx
 var import_theme = require("@nextui-org/theme");
+var import_system = require("@nextui-org/system");
 var import_utils = require("@react-aria/utils");
@@ -80,4 +81,5 @@ var import_react_utils2 = require("@nextui-org/react-utils");
 // src/use-avatar.ts
-function useAvatar(props = {}) {
-  var _a, _b, _c, _d, _e;
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = (0, import_system.useProviderContext)();
   const groupContext = useAvatarGroupContext();
@@ -109,3 +111,3 @@ const isInGroup = !!groupContext;
     ...otherProps
-  } = props;
+  } = originalProps;
   const Component = as || "span";
@@ -116,2 +118,3 @@ const domRef = (0, import_react_utils2.useDOMRef)(ref);
   const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
+  const disableAnimation = (_g = (_f = originalProps.disableAnimation) != null ? _f : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _g : false;
   const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
@@ -130,6 +133,16 @@ const isImgLoaded = imageStatus === "loaded";
         isInGroup,
+        disableAnimation,
         isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
       });
     },
-    [color, radius, size, isBordered, isDisabled, isInGroup, groupContext == null ? void 0 : groupContext.isGrid]
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      disableAnimation,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
   );
@@ -141,3 +154,3 @@ const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const getAvatarProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: domRef,
@@ -149,3 +162,3 @@ tabIndex: canBeFocused ? 0 : -1,
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className)
+        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
       }),
@@ -157,10 +170,11 @@ ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
   const getImageProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: imgRef,
       src,
+      disableAnimation,
       "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
       className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
-      ...(0, import_utils.mergeProps)(imgProps, props2)
+      ...(0, import_utils.mergeProps)(imgProps, props)
     }),
-    [slots, isImgLoaded, imgProps, src, imgRef]
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef]
   );
@@ -189,3 +203,3 @@ return {
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Avatar = (0, import_system.forwardRef)((props, ref) => {
+var Avatar = (0, import_system2.forwardRef)((props, ref) => {
   const {
@@ -192,0 +206,0 @@ Component,

dist/index.js

@@ -36,3 +36,3 @@ "use client";
 var import_react2 = require("react");
-var import_system = require("@nextui-org/system");
+var import_system2 = require("@nextui-org/system");
 
@@ -71,2 +71,3 @@ // src/avatar-icon.tsx
 var import_theme = require("@nextui-org/theme");
+var import_system = require("@nextui-org/system");
 var import_utils = require("@react-aria/utils");
@@ -88,4 +89,5 @@ var import_react_utils2 = require("@nextui-org/react-utils");
 // src/use-avatar.ts
-function useAvatar(props = {}) {
-  var _a, _b, _c, _d, _e;
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = (0, import_system.useProviderContext)();
   const groupContext = useAvatarGroupContext();
@@ -117,3 +119,3 @@ const isInGroup = !!groupContext;
     ...otherProps
-  } = props;
+  } = originalProps;
   const Component = as || "span";
@@ -124,2 +126,3 @@ const domRef = (0, import_react_utils2.useDOMRef)(ref);
   const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
+  const disableAnimation = (_g = (_f = originalProps.disableAnimation) != null ? _f : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _g : false;
   const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
@@ -138,6 +141,16 @@ const isImgLoaded = imageStatus === "loaded";
         isInGroup,
+        disableAnimation,
         isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
       });
     },
-    [color, radius, size, isBordered, isDisabled, isInGroup, groupContext == null ? void 0 : groupContext.isGrid]
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      disableAnimation,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
   );
@@ -149,3 +162,3 @@ const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const getAvatarProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: domRef,
@@ -157,3 +170,3 @@ tabIndex: canBeFocused ? 0 : -1,
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className)
+        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
       }),
@@ -165,10 +178,11 @@ ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
   const getImageProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: imgRef,
       src,
+      disableAnimation,
       "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
       className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
-      ...(0, import_utils.mergeProps)(imgProps, props2)
+      ...(0, import_utils.mergeProps)(imgProps, props)
     }),
-    [slots, isImgLoaded, imgProps, src, imgRef]
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef]
   );
@@ -197,3 +211,3 @@ return {
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Avatar = (0, import_system.forwardRef)((props, ref) => {
+var Avatar = (0, import_system2.forwardRef)((props, ref) => {
   const {
@@ -234,3 +248,3 @@ Component,
 // src/avatar-group.tsx
-var import_system2 = require("@nextui-org/system");
+var import_system3 = require("@nextui-org/system");
 
@@ -319,3 +333,3 @@ // src/use-avatar-group.ts
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var AvatarGroup = (0, import_system2.forwardRef)((props, ref) => {
+var AvatarGroup = (0, import_system3.forwardRef)((props, ref) => {
   const {
@@ -322,0 +336,0 @@ Component,

dist/use-avatar.d.ts

@@ -85,3 +85,3 @@ import * as tailwind_variants from 'tailwind-variants';
 type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
-declare function useAvatar(props?: UseAvatarProps): {
+declare function useAvatar(originalProps?: UseAvatarProps): {
     Component: _nextui_org_system.As<any>;
@@ -103,2 +103,3 @@ ImgComponent: react.ElementType<any>;
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -113,2 +114,3 @@ img: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -123,2 +125,3 @@ fallback: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -133,2 +136,3 @@ name: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -143,2 +147,3 @@ icon: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -154,2 +159,3 @@ } & {
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -164,2 +170,3 @@ img: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -174,2 +181,3 @@ fallback: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -184,2 +192,3 @@ name: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -194,2 +203,3 @@ icon: (slotProps?: ({
             isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
         } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
@@ -196,0 +206,0 @@ } & {};

dist/use-avatar.js

@@ -28,2 +28,3 @@ "use client";
 var import_theme = require("@nextui-org/theme");
+var import_system = require("@nextui-org/system");
 var import_utils = require("@react-aria/utils");
@@ -45,4 +46,5 @@ var import_react_utils2 = require("@nextui-org/react-utils");
 // src/use-avatar.ts
-function useAvatar(props = {}) {
-  var _a, _b, _c, _d, _e;
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = (0, import_system.useProviderContext)();
   const groupContext = useAvatarGroupContext();
@@ -74,3 +76,3 @@ const isInGroup = !!groupContext;
     ...otherProps
-  } = props;
+  } = originalProps;
   const Component = as || "span";
@@ -81,2 +83,3 @@ const domRef = (0, import_react_utils2.useDOMRef)(ref);
   const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
+  const disableAnimation = (_g = (_f = originalProps.disableAnimation) != null ? _f : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _g : false;
   const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
@@ -95,6 +98,16 @@ const isImgLoaded = imageStatus === "loaded";
         isInGroup,
+        disableAnimation,
         isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
       });
     },
-    [color, radius, size, isBordered, isDisabled, isInGroup, groupContext == null ? void 0 : groupContext.isGrid]
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      disableAnimation,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
   );
@@ -106,3 +119,3 @@ const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const getAvatarProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: domRef,
@@ -114,3 +127,3 @@ tabIndex: canBeFocused ? 0 : -1,
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className)
+        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
       }),
@@ -122,10 +135,11 @@ ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
   const getImageProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
+    (props = {}) => ({
       ref: imgRef,
       src,
+      disableAnimation,
       "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
       className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
-      ...(0, import_utils.mergeProps)(imgProps, props2)
+      ...(0, import_utils.mergeProps)(imgProps, props)
     }),
-    [slots, isImgLoaded, imgProps, src, imgRef]
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef]
   );
@@ -132,0 +146,0 @@ return {

package.json

 {
   "name": "@nextui-org/avatar",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
@@ -34,5 +34,5 @@ "keywords": [
   "dependencies": {
-    "@react-aria/interactions": "^3.21.1",
-    "@react-aria/focus": "^3.16.2",
-    "@react-aria/utils": "^3.23.2",
+    "@react-aria/interactions": "3.21.1",
+    "@react-aria/focus": "3.16.2",
+    "@react-aria/utils": "3.23.2",
     "@nextui-org/shared-utils": "2.0.5",
@@ -39,0 +39,0 @@ "@nextui-org/react-utils": "2.0.13",

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

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

Total package byte prevSize

73947

increased by3.87%

Lines of code

1995

increased by4.18%

Dependency changes

• + Added@react-aria/focus@3.16.2(transitive)

• + Added@react-aria/interactions@3.21.1(transitive)

• + Added@react-aria/utils@3.23.2(transitive)

• Updated@react-aria/focus@3.16.2

• Updated@react-aria/interactions@3.21.1

• Updated@react-aria/utils@3.23.2