@nextui-org/avatar
Advanced tools
Comparing version 2.0.27 to 2.0.28
@@ -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, |
@@ -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, |
@@ -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, |
@@ -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 @@ } & {}; |
@@ -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 { |
{ | ||
"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", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
73947
1995
+ 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/utils@3.23.2