@synerise/ds-avatar 0.17.28 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Avatar.d.ts +1 -1
  3. package/dist/Avatar.js +8 -12
  4. package/dist/Avatar.types.d.ts +11 -7
  5. package/dist/ObjectAvatar/ObjectAvatar.d.ts +1 -1
  6. package/dist/modules.d.js +1 -1
  7. package/dist/style/index.css +1 -1
  8. package/dist/utils.d.ts +3 -3
  9. package/dist/utils.js +6 -10
  10. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.18.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.17.28...@synerise/ds-avatar@0.18.0) (2025-01-29)
7
+
8
+
9
+ ### Features
10
+
11
+ * antd@4.24 react@18 ([d97a667](https://github.com/synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.17.28](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.17.27...@synerise/ds-avatar@0.17.28) (2025-01-21)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-avatar
package/dist/Avatar.d.ts CHANGED
@@ -9,5 +9,5 @@ export declare const ICON_SIZES: {
9
9
  large: number;
10
10
  extraLarge: number;
11
11
  };
12
- declare const Avatar: React.FC<AvatarProps>;
12
+ declare const Avatar: ({ backgroundColor, backgroundColorHue, children, disabled, hasStatus, iconComponent, iconScale, tooltip, size, src, ...antdProps }: AvatarProps) => React.JSX.Element;
13
13
  export default Avatar;
package/dist/Avatar.js CHANGED
@@ -1,13 +1,8 @@
1
- var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size"],
1
+ var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size", "src"],
2
2
  _excluded2 = ["type"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
8
- function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
9
4
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
10
- import React from 'react';
5
+ import React, { cloneElement } from 'react';
11
6
  import Tooltip from '@synerise/ds-tooltip';
12
7
  import '@synerise/ds-core/dist/js/style';
13
8
  import { isIconComponent, getTooltipProps } from './utils';
@@ -21,7 +16,6 @@ export var ICON_SIZES = {
21
16
  extraLarge: 42
22
17
  };
23
18
  var Avatar = function Avatar(_ref) {
24
- var _iconElement;
25
19
  var backgroundColor = _ref.backgroundColor,
26
20
  _ref$backgroundColorH = _ref.backgroundColorHue,
27
21
  backgroundColorHue = _ref$backgroundColorH === void 0 ? '500' : _ref$backgroundColorH,
@@ -37,18 +31,19 @@ var Avatar = function Avatar(_ref) {
37
31
  tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
38
32
  _ref$size = _ref.size,
39
33
  size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
34
+ src = _ref.src,
40
35
  antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
41
- var sizes = _objectSpread({}, ICON_SIZES);
36
+ var sizes = _extends({}, ICON_SIZES);
42
37
  var iconElement = iconComponent;
43
38
 
44
39
  // Enforce icon to be scaled
45
- if (isIconComponent((_iconElement = iconElement) == null ? void 0 : _iconElement.type) && iconScale) {
40
+ if (isIconComponent(iconComponent) && iconScale) {
46
41
  var _iconElement$props$co;
47
42
  if ((_iconElement$props$co = iconElement.props.component) != null && (_iconElement$props$co = _iconElement$props$co.type) != null && (_iconElement$props$co = _iconElement$props$co.name) != null && _iconElement$props$co.match(/S$/)) {
48
43
  sizes.small = 24;
49
44
  }
50
45
  var iconSize = sizes[size] || sizes[DEFAULT_SIZE];
51
- iconElement = React.cloneElement(iconElement, {
46
+ iconElement = cloneElement(iconElement, {
52
47
  size: iconSize
53
48
  });
54
49
  }
@@ -69,7 +64,8 @@ var Avatar = function Avatar(_ref) {
69
64
  backgroundColor: backgroundColor,
70
65
  backgroundColorHue: backgroundColorHue,
71
66
  disabled: disabled,
72
- size: size
67
+ size: size,
68
+ src: src !== '' ? src : undefined
73
69
  }, antdProps), iconElement || children));
74
70
  };
75
71
  export default Avatar;
package/dist/Avatar.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import type { ReactNode, MouseEvent as ReactMouseEvent } from 'react';
2
2
  import type { BadgeStatus } from '@synerise/ds-badge';
3
3
  import { AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
4
4
  import { TooltipProps } from '@synerise/ds-tooltip/dist/Tooltip.types';
@@ -6,10 +6,11 @@ export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mar
6
6
  export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
7
7
  export type Size = 'small' | 'medium' | 'large' | 'extraLarge' | undefined;
8
8
  export type TooltipObject = TooltipProps & {
9
- name?: React.ReactNode;
10
- email?: React.ReactNode;
9
+ name?: ReactNode;
10
+ email?: ReactNode;
11
11
  };
12
- export interface AvatarProps extends Omit<AntAvatarProps, 'size' | 'icon'> {
12
+ export type AvatarProps = Omit<AntAvatarProps, 'size' | 'icon' | 'src'> & {
13
+ src?: string;
13
14
  /**
14
15
  * Aligns a badge with the avatar
15
16
  */
@@ -21,7 +22,7 @@ export interface AvatarProps extends Omit<AntAvatarProps, 'size' | 'icon'> {
21
22
  /**
22
23
  * Provides a custom component as a child. If both are provided, the prop icon has a greater priority
23
24
  */
24
- iconComponent?: React.ReactNode;
25
+ iconComponent?: ReactNode;
25
26
  /**
26
27
  * Auto scale icons for sizes
27
28
  * @default true
@@ -43,13 +44,14 @@ export interface AvatarProps extends Omit<AntAvatarProps, 'size' | 'icon'> {
43
44
  * Text on a tooltip
44
45
  */
45
46
  tooltip?: TooltipObject | boolean;
46
- }
47
+ children?: ReactNode;
48
+ };
47
49
  type DefinedAvatarProps = Pick<AvatarProps, 'style' | 'disabled' | 'iconComponent' | 'size' | 'src'> & {
48
50
  backgroundColor?: 'auto' | Color | string;
49
51
  badgeStatus?: BadgeStatus;
50
52
  text?: string;
51
53
  tooltip?: TooltipObject | boolean;
52
- onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
54
+ onClick?: (event?: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
53
55
  };
54
56
  export type ObjectAvatar = {
55
57
  name?: string | null;
@@ -60,6 +62,7 @@ export type ObjectAvatar = {
60
62
  export type ObjectAvatarProps = DefinedAvatarProps & {
61
63
  object?: ObjectAvatar;
62
64
  color?: Color;
65
+ children?: ReactNode;
63
66
  };
64
67
  export type UserAvatar = {
65
68
  firstName?: string | null;
@@ -69,5 +72,6 @@ export type UserAvatar = {
69
72
  };
70
73
  export type UserAvatarProps = DefinedAvatarProps & {
71
74
  user?: UserAvatar;
75
+ children?: ReactNode;
72
76
  };
73
77
  export {};
package/dist/ObjectAvatar/ObjectAvatar.d.ts CHANGED
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  import { ObjectAvatarProps } from '../Avatar.types';
3
3
  export declare const DEFAULT_COLOR_HUE = "600";
4
4
  export declare const DEFAULT_COLOR = "grey";
5
- declare const ObjectAvatar: React.FC<ObjectAvatarProps>;
5
+ declare const ObjectAvatar: ({ backgroundColor, badgeStatus, iconComponent, color, object, size, src, tooltip, text, children, disabled, style, ...restProps }: ObjectAvatarProps) => React.JSX.Element;
6
6
  export default ObjectAvatar;
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom/extend-expect';
1
+ import '@testing-library/jest-dom';
package/dist/style/index.css CHANGED
@@ -1 +1 @@
1
- .ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-avatar{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;overflow:hidden;color:#fff;white-space:nowrap;text-align:center;vertical-align:middle;background:#ccc;width:32px;height:32px;line-height:32px;border-radius:50%}.ant-avatar-image{background:0 0}.ant-avatar-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar.ant-avatar-icon{font-size:18px}.ant-avatar.ant-avatar-icon>.anticon{margin:0}.ant-avatar-lg{width:40px;height:40px;line-height:40px;border-radius:50%}.ant-avatar-lg-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-lg.ant-avatar-icon{font-size:24px}.ant-avatar-lg.ant-avatar-icon>.anticon{margin:0}.ant-avatar-sm{width:24px;height:24px;line-height:24px;border-radius:50%}.ant-avatar-sm-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-sm.ant-avatar-icon{font-size:14px}.ant-avatar-sm.ant-avatar-icon>.anticon{margin:0}.ant-avatar-square{border-radius:3px}.ant-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.ant-avatar-group{display:inline-flex}.ant-avatar-group .ant-avatar{border:1px solid #fff}.ant-avatar-group .ant-avatar:not(:first-child){margin-left:-8px}.ant-avatar-group-popover .ant-avatar+.ant-avatar{margin-left:3px}.ant-avatar-group-rtl .ant-avatar:not(:first-child){margin-right:-8px;margin-left:0}.ant-avatar-group-popover.ant-popover-rtl .ant-avatar+.ant-avatar{margin-right:3px;margin-left:0}
1
+ .ant-avatar{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;overflow:hidden;color:#fff;white-space:nowrap;text-align:center;vertical-align:middle;background:#ccc;width:32px;height:32px;line-height:32px;border-radius:50%}.ant-avatar-image{background:0 0}.ant-avatar .ant-image-img{display:block}.ant-avatar-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar.ant-avatar-icon{font-size:18px}.ant-avatar.ant-avatar-icon>.anticon{margin:0}.ant-avatar-lg{width:40px;height:40px;line-height:40px;border-radius:50%}.ant-avatar-lg-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-lg.ant-avatar-icon{font-size:24px}.ant-avatar-lg.ant-avatar-icon>.anticon{margin:0}.ant-avatar-sm{width:24px;height:24px;line-height:24px;border-radius:50%}.ant-avatar-sm-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-sm.ant-avatar-icon{font-size:14px}.ant-avatar-sm.ant-avatar-icon>.anticon{margin:0}.ant-avatar-square{border-radius:3px}.ant-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.ant-avatar-group{display:inline-flex}.ant-avatar-group .ant-avatar{border:1px solid #fff}.ant-avatar-group .ant-avatar:not(:first-child){margin-left:-8px}.ant-avatar-group-popover .ant-avatar+.ant-avatar{margin-left:3px}.ant-avatar-group-rtl .ant-avatar:not(:first-child){margin-right:-8px;margin-left:0}.ant-avatar-group-popover.ant-popover-rtl .ant-avatar+.ant-avatar{margin-right:3px;margin-left:0}
package/dist/utils.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import React from 'react';
1
+ import { ReactElement, ReactNode } from 'react';
2
2
  import { Color, ColorHue, UserAvatar, AvatarProps, TooltipObject } from './Avatar.types';
3
3
  export declare function getUserText(user: UserAvatar, src?: string | null, text?: string | null): string | null;
4
- export declare function isIconComponent(component: React.ReactNode | undefined): boolean;
4
+ export declare function isIconComponent(component: ReactNode | undefined): boolean;
5
5
  export declare function getObjectName(name?: string | null, text?: string): string | null;
6
- export declare function addIconColor(iconComponent: React.ReactNode, color: string): React.ReactElement;
6
+ export declare function addIconColor(iconComponent: ReactNode, color: string): ReactElement;
7
7
  export declare function getColorByText(text: string | null, backgroundColor?: 'auto' | Color | string): [Color, ColorHue];
8
8
  export declare function getTooltipProps(tooltip: AvatarProps['tooltip']): TooltipObject;
package/dist/utils.js CHANGED
@@ -1,9 +1,5 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
3
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
5
- function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
6
- import React from 'react';
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ import { cloneElement } from 'react';
7
3
  import Icon from '@synerise/ds-icon';
8
4
  import selectColorByLetter from '@synerise/ds-utils/dist/selectColorByLetter/selectColorByLetter';
9
5
  function getFirstLetter(from) {
@@ -48,7 +44,7 @@ export function addIconColor(iconComponent, color) {
48
44
  var _iconElement;
49
45
  var iconElement = iconComponent;
50
46
  if (iconElement && !((_iconElement = iconElement) != null && (_iconElement = _iconElement.props) != null && _iconElement.color)) {
51
- iconElement = React.cloneElement(iconElement, {
47
+ iconElement = cloneElement(iconElement, {
52
48
  color: color
53
49
  });
54
50
  }
@@ -63,17 +59,17 @@ export function getColorByText(text, backgroundColor) {
63
59
  return [color, hue];
64
60
  }
65
61
  export function getTooltipProps(tooltip) {
66
- var tooltipProps = typeof tooltip === 'object' ? _objectSpread({}, tooltip, {
62
+ var tooltipProps = typeof tooltip === 'object' ? _extends({}, tooltip, {
67
63
  title: tooltip.title || tooltip.name,
68
64
  description: tooltip.description || tooltip.email
69
65
  }) : {};
70
66
  var tooltipType = ['title', 'description', 'status'].reduce(function (prev, next) {
71
67
  return tooltipProps[next] ? prev + 1 : prev;
72
68
  }, 0) === 1 ? 'default' : 'avatar';
73
- var finalTooltipProps = tooltipType === 'default' ? _objectSpread({}, tooltipProps, {
69
+ var finalTooltipProps = tooltipType === 'default' ? _extends({}, tooltipProps, {
74
70
  title: tooltipProps.title || tooltipProps.description || tooltipProps.status,
75
71
  type: 'default'
76
- }) : _objectSpread({}, tooltipProps, {
72
+ }) : _extends({}, tooltipProps, {
77
73
  type: 'avatar'
78
74
  });
79
75
  return finalTooltipProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-avatar",
3
- "version": "0.17.28",
3
+ "version": "0.18.0",
4
4
  "description": "Avatar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,18 +34,18 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-badge": "^0.8.25",
38
- "@synerise/ds-icon": "^0.70.0",
39
- "@synerise/ds-status": "^0.7.4",
40
- "@synerise/ds-tooltip": "^0.14.55",
41
- "@synerise/ds-typography": "^0.16.12",
42
- "@synerise/ds-utils": "^0.31.2"
37
+ "@synerise/ds-badge": "^0.9.0",
38
+ "@synerise/ds-icon": "^0.71.0",
39
+ "@synerise/ds-status": "^0.8.0",
40
+ "@synerise/ds-tooltip": "^0.15.0",
41
+ "@synerise/ds-typography": "^0.17.0",
42
+ "@synerise/ds-utils": "^0.32.0"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@synerise/ds-core": "*",
46
- "antd": "4.7.0",
47
- "react": ">=16.9.0 <= 17.0.2",
48
- "styled-components": "5.0.1"
46
+ "antd": "4.24.16",
47
+ "react": ">=16.9.0 <= 18.3.1",
48
+ "styled-components": "^5.3.3"
49
49
  },
50
- "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
50
+ "gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
51
51
  }