@synerise/ds-avatar 1.1.8 → 1.2.1

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 (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/Avatar.js +5 -7
  3. package/dist/Avatar.styles.d.ts +16 -2
  4. package/dist/Avatar.styles.js +13 -12
  5. package/dist/Avatar.types.d.ts +1 -1
  6. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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
+ ## [1.2.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.2.0...@synerise/ds-avatar@1.2.1) (2026-02-06)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-avatar
9
+
10
+ # [1.2.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.1.8...@synerise/ds-avatar@1.2.0) (2026-02-05)
11
+
12
+ ### Features
13
+
14
+ - **tooltip:** migrate to popover ([53ecd29](https://github.com/synerise/synerise-design/commit/53ecd293fa31bdcfd921c6c5fd91db9c2c643eda))
15
+
6
16
  ## [1.1.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.1.7...@synerise/ds-avatar@1.1.8) (2026-02-02)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-avatar
package/dist/Avatar.js CHANGED
@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
5
5
  import React, { cloneElement } from 'react';
6
6
  import '@synerise/ds-core/dist/js/style';
7
7
  import Tooltip from '@synerise/ds-tooltip';
8
- import AntdAvatar from './Avatar.styles';
8
+ import * as S from './Avatar.styles';
9
9
  import "./style/index.css";
10
10
  import { getTooltipProps, isIconComponent } from './utils';
11
11
  export var DEFAULT_SIZE = 'medium';
@@ -28,7 +28,7 @@ var Avatar = function Avatar(_ref) {
28
28
  _ref$iconScale = _ref.iconScale,
29
29
  iconScale = _ref$iconScale === void 0 ? true : _ref$iconScale,
30
30
  _ref$tooltip = _ref.tooltip,
31
- tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
31
+ tooltip = _ref$tooltip === void 0 ? false : _ref$tooltip,
32
32
  _ref$size = _ref.size,
33
33
  size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
34
34
  src = _ref.src,
@@ -54,13 +54,11 @@ var Avatar = function Avatar(_ref) {
54
54
  return next || prev;
55
55
  });
56
56
  return /*#__PURE__*/React.createElement(Tooltip, _extends({
57
- type: type,
58
- mouseLeaveDelay: 0,
59
- mouseEnterDelay: 0
60
- }, tooltipProps), /*#__PURE__*/React.createElement(AntdAvatar, _extends({
57
+ type: type
58
+ }, tooltipProps), /*#__PURE__*/React.createElement(S.AntdAvatar, _extends({
61
59
  className: "ds-avatar",
62
60
  hasStatus: hasStatus,
63
- hasTooltip: hasTooltip,
61
+ hasTooltip: !!hasTooltip,
64
62
  backgroundColor: backgroundColor,
65
63
  backgroundColorHue: backgroundColorHue,
66
64
  disabled: disabled,
package/dist/Avatar.styles.d.ts CHANGED
@@ -1,4 +1,18 @@
1
1
  import React from 'react';
2
2
  export declare const TooltipGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- declare const _default: import("styled-components").StyledComponent<({ backgroundColorHue, backgroundColor, onClick, hasStatus, hasTooltip, ...rest }: any) => React.JSX.Element, any, {}, never>;
4
- export default _default;
3
+ type ExtraAvatarProps = {
4
+ hasTooltip?: boolean;
5
+ };
6
+ export declare const AntdAvatar: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("antd/lib/avatar").AvatarProps, "icon" | "size" | "src"> & {
7
+ src?: string;
8
+ hasStatus?: boolean;
9
+ size?: import("./Avatar.types").Size;
10
+ iconComponent?: React.ReactNode;
11
+ iconScale?: boolean;
12
+ backgroundColor?: import("./Avatar.types").Color | string;
13
+ backgroundColorHue?: import("./Avatar.types").ColorHue;
14
+ disabled?: boolean;
15
+ tooltip?: import("./Avatar.types").TooltipObject | boolean;
16
+ children?: React.ReactNode;
17
+ } & ExtraAvatarProps & React.RefAttributes<HTMLButtonElement>>, any, ExtraAvatarProps, never>;
18
+ export {};
package/dist/Avatar.styles.js CHANGED
@@ -1,8 +1,8 @@
1
- var _excluded = ["backgroundColorHue", "backgroundColor", "onClick", "hasStatus", "hasTooltip"];
1
+ var _excluded = ["backgroundColorHue", "backgroundColor", "hasStatus", "hasTooltip", "size"];
2
2
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
3
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
4
  import Avatar from 'antd/lib/avatar';
5
- import React from 'react';
5
+ import React, { forwardRef } from 'react';
6
6
  import styled, { css } from 'styled-components';
7
7
  import { macro } from '@synerise/ds-typography';
8
8
  export var TooltipGroup = styled.div.withConfig({
@@ -44,20 +44,21 @@ var applyFontSize = function applyFontSize(props) {
44
44
  size = _props$size2 === void 0 ? 'medium' : _props$size2;
45
45
  return css(["", ";"], MACRO_MAPPING[size]);
46
46
  };
47
- export default styled(function (_ref) {
47
+ export var AntdAvatar = styled(/*#__PURE__*/forwardRef(function (_ref, ref) {
48
48
  var backgroundColorHue = _ref.backgroundColorHue,
49
49
  backgroundColor = _ref.backgroundColor,
50
- onClick = _ref.onClick,
51
50
  hasStatus = _ref.hasStatus,
52
51
  hasTooltip = _ref.hasTooltip,
52
+ size = _ref.size,
53
53
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
54
54
  return /*#__PURE__*/React.createElement(Avatar, _extends({
55
- onClick: onClick
55
+ ref: ref,
56
+ size: size === 'medium' || size === 'extraLarge' ? 'default' : size
56
57
  }, rest));
57
- }).withConfig({
58
- displayName: "Avatarstyles",
58
+ })).withConfig({
59
+ displayName: "Avatarstyles__AntdAvatar",
59
60
  componentId: "sc-xcn5o4-1"
60
- })(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & + .ant-badge-dot{display:none;}", ";", ";", ";", ";}"], function (props) {
61
+ })(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & ~ .ant-badge-dot{display:none;}", ";", ";", ";", ";}"], function (props) {
61
62
  return applyBgColors(props);
62
63
  }, function (props) {
63
64
  return applyDisabledStyles(props);
@@ -70,11 +71,11 @@ export default styled(function (_ref) {
70
71
  }, function (props) {
71
72
  return props.onClick ? css(["cursor:pointer;&:active{&::before{opacity:0.1;}}"]) : false;
72
73
  }, function (props) {
73
- return props.hasStatus && css(["& + .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props));
74
+ return props.hasStatus && css(["& ~ .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props));
74
75
  }, function (props) {
75
- return props.size === 'medium' && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}", ";"], props.icon && css(["&.ant-avatar-icon{", ";", "}"], macro.xlAvatarIcon, macro.flexCentered));
76
+ return props.size === 'medium' && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}"]);
76
77
  }, function (props) {
77
- return props.size === 'large' && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}", ";"], props.icon && css(["&.ant-avatar-icon{", ";", "}"], macro.xlAvatarIcon, macro.flexCentered));
78
+ return props.size === 'large' && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}"]);
78
79
  }, function (props) {
79
- return props.size === 'extraLarge' && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}", ";"], macro.xlAvatar, props.icon && css(["&.ant-avatar-icon{", ";", "}"], macro.xlAvatarIcon, macro.flexCentered));
80
+ return props.size === 'extraLarge' && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}"], macro.xlAvatar);
80
81
  });
package/dist/Avatar.types.d.ts CHANGED
@@ -5,7 +5,7 @@ import { type TooltipProps } from '@synerise/ds-tooltip';
5
5
  export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
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
- export type TooltipObject = TooltipProps & {
8
+ export type TooltipObject = Omit<TooltipProps, 'children'> & {
9
9
  name?: ReactNode;
10
10
  email?: ReactNode;
11
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-avatar",
3
- "version": "1.1.8",
3
+ "version": "1.2.1",
4
4
  "description": "Avatar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -35,12 +35,12 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-badge": "^1.0.33",
39
- "@synerise/ds-icon": "^1.11.0",
40
- "@synerise/ds-status": "^1.3.7",
41
- "@synerise/ds-tooltip": "^1.3.7",
42
- "@synerise/ds-typography": "^1.1.2",
43
- "@synerise/ds-utils": "^1.5.4"
38
+ "@synerise/ds-badge": "^1.0.35",
39
+ "@synerise/ds-icon": "^1.11.1",
40
+ "@synerise/ds-status": "^1.3.9",
41
+ "@synerise/ds-tooltip": "^1.4.1",
42
+ "@synerise/ds-typography": "^1.1.4",
43
+ "@synerise/ds-utils": "^1.6.0"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "@synerise/ds-core": "*",
@@ -49,5 +49,5 @@
49
49
  "styled-components": "^5.3.3",
50
50
  "vitest": "4"
51
51
  },
52
- "gitHead": "6a3a82f8bc80e10eeb818795035e05393550e82e"
52
+ "gitHead": "e5a4dcb266c92d3463e4d1e86ef76c87673b678a"
53
53
  }