@dt-dds/react-avatar 1.0.0-beta.59 → 1.0.0-beta.61

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 (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +85 -15
  3. package/dist/index.d.mts +12 -15
  4. package/dist/index.d.ts +12 -15
  5. package/dist/index.js +59 -300
  6. package/dist/index.mjs +58 -301
  7. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @dt-ui/react-avatar
2
2
 
3
+ ## 1.0.0-beta.61
4
+
5
+ ### Patch Changes
6
+
7
+ - refactor: use component size from core
8
+ - refactor: avatar component
9
+ - Updated dependencies
10
+ - @dt-dds/react-icon@1.0.0-beta.52
11
+
12
+ ## 1.0.0-beta.60
13
+
14
+ ### Minor Changes
15
+
16
+ - feat: persist avatar active state
17
+
3
18
  ## 1.0.0-beta.59
4
19
 
5
20
  ### Patch Changes
package/README.md CHANGED
@@ -2,20 +2,87 @@
2
2
 
3
3
  Avatars can be used to display circular user profile in user menu, tables etc.
4
4
 
5
+ This component is purely presentational and for Interactivity it can be used with IconButton.
6
+
5
7
  ## Avatar Usage
6
8
 
9
+ ### Default
10
+
11
+ ```jsx
12
+ import { Avatar } from '@dt-dds/react';
13
+
14
+ export const App = () => {
15
+ return (
16
+ <Avatar title='User Name' size='medium' />
17
+ );
18
+ };
19
+ ```
20
+
21
+ ### With photo
22
+
23
+ ```jsx
24
+ import { Avatar } from '@dt-dds/react';
25
+
26
+ export const App = () => {
27
+ return (
28
+ <Avatar type='photo' imageSrc='/profile.png' size='medium' />
29
+ );
30
+ };
31
+ ```
32
+
33
+ ### Collapsed
34
+
35
+ ```jsx
36
+ import { Avatar } from '@dt-dds/react';
37
+
38
+ export const App = () => {
39
+ return (
40
+ <Avatar type='collapsed' collapsedCount='+1' size='medium' />
41
+ );
42
+ };
43
+ ```
44
+
45
+ ### Thumbnail
46
+
47
+ ```jsx
48
+ import { Avatar } from '@dt-dds/react';
49
+
50
+ export const App = () => {
51
+ return (
52
+ <Avatar type='thumbnail' size='medium' />
53
+ );
54
+ };
55
+ ```
56
+
57
+ ### Sizes
58
+
59
+ ```jsx
60
+ import { Avatar } from '@dt-dds/react';
61
+
62
+ export const App = () => {
63
+ return (
64
+ <>
65
+ <Avatar title='User Name' size='small' />
66
+ <Avatar title='User Name' size='medium' />
67
+ <Avatar title='User Name' size='large' />
68
+ </>
69
+ );
70
+ };
71
+ ```
72
+
73
+ ### Types with different sizes
74
+
7
75
  ```jsx
8
- import { Avatar, AvatarType, AvatarSize } from '@dt-dds/react';
76
+ import { Avatar } from '@dt-dds/react';
9
77
 
10
78
  export const App = () => {
11
79
  return (
12
- <div>
13
- <Avatar
14
- type={AvatarType.Primary}
15
- size={AvatarSize.Medium}
16
- title='User Name'
17
- />
18
- </div>
80
+ <>
81
+ <Avatar type='letter' title='John Doe' size='large' />
82
+ <Avatar type='photo' imageSrc='/profile.png' size='small' />
83
+ <Avatar type='thumbnail' size='medium' />
84
+ <Avatar type='collapsed' collapsedCount='+4' size='medium' />
85
+ </>
19
86
  );
20
87
  };
21
88
  ```
@@ -26,13 +93,16 @@ export const App = () => {
26
93
 
27
94
  This component can contain upto two simple characters by passing a string in prop `title`
28
95
 
29
- | Property | Type | Default | Description |
30
- | ------------ | ------------------ | ------- | ------------------------------------------------------------------ |
31
- | `title` | `ReactNode` | - | Letter characters shown in the avatar |
32
- | `type` | `enum<AvatarType>` | primary | You can choose type of the Avatar you want for different use cases |
33
- | `size` | `enum<AvatarSize>` | medium | Sets the Avatar size given the available options |
34
- | `imageSrc` | `string` | - | Optional profile image path (will only work with "Profile" type) |
35
- | `dataTestId` | `string` | avatar | Avatar test identifier |
96
+ | Property | Type | Default | Description |
97
+ | ----------------- | ------------------ | ------- | ------------------------------------------------------------------ |
98
+ | `title` | `string` | - | Letter characters shown in the avatar |
99
+ | `type` | `AvatarType` | `'letter'` | Selects which visual style the Avatar uses. Accepts: <br/>• `'letter'` – shows initials. <br/>• `'collapsed'` – shows "+N" for group overflow. <br/>• `'thumbnail'` – generic placeholder icon. <br/>• `'photo'` – uses `imageSrc` with automatic fallback to type thumbnail. |
100
+ | `size` | `AvatarSize` | `'medium'` | Controls the Avatar dimensions. Accepts: <br/>• `'small'` – compact UI. <br/>• `'medium'` – default. <br/>• `'large'` – prominent/profile use. |
101
+ | `imageSrc` | `string` | - | Optional image path (will only work with "Photo" type) |
102
+ | `dataTestId` | `string` | avatar | Avatar test identifier |
103
+ | `collapsedCount` | `string` | '+1' | Number displayed inside a collapsed avatar (max 3 characters). Defaults to `'+1'` when `type="collapsed"`. |
104
+ | `customInitials` | `string` | - | Custom initials to display (max 2 characters). Replaces `title` if present. |
105
+ | `hasTooltip` | `Boolean` | false | Shows tooltip when hovering on the Avatar |
36
106
 
37
107
  ## Stack
38
108
 
package/dist/index.d.mts CHANGED
@@ -1,38 +1,35 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { ComponentSize } from '@dt-dds/react-core';
3
4
 
4
5
  declare const AvatarType: {
5
- readonly Primary: "primary";
6
- readonly Secondary: "secondary";
7
- readonly Tertiary: "tertiary";
8
- readonly Profile: "profile";
6
+ readonly Letter: "letter";
7
+ readonly Collapsed: "collapsed";
8
+ readonly Thumbnail: "thumbnail";
9
+ readonly Photo: "photo";
9
10
  };
10
11
  type AvatarType = (typeof AvatarType)[keyof typeof AvatarType];
11
12
 
12
- declare const AvatarSize: {
13
- readonly Small: "small";
14
- readonly Medium: "medium";
15
- readonly Large: "large";
16
- };
17
- type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
18
-
13
+ type AvatarSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
19
14
  interface AvatarStyledProps {
20
- type: AvatarType;
15
+ type?: AvatarType;
21
16
  size: AvatarSize;
22
17
  }
23
-
24
18
  interface AvatarProps extends AvatarStyledProps {
25
19
  title: string;
26
20
  imageSrc?: string;
27
21
  dataTestId?: string;
22
+ style?: React.CSSProperties;
28
23
  customInitials?: string;
29
24
  hasTooltip?: boolean;
25
+ collapsedCount?: string;
30
26
  }
31
- declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, }: AvatarProps) => react_jsx_runtime.JSX.Element;
27
+
28
+ declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, collapsedCount, hasTooltip, style, }: AvatarProps) => react_jsx_runtime.JSX.Element;
32
29
 
33
30
  declare module '@emotion/react' {
34
31
  interface Theme extends CustomTheme {
35
32
  }
36
33
  }
37
34
 
38
- export { Avatar, AvatarSize, AvatarType };
35
+ export { Avatar, AvatarType };
package/dist/index.d.ts CHANGED
@@ -1,38 +1,35 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { ComponentSize } from '@dt-dds/react-core';
3
4
 
4
5
  declare const AvatarType: {
5
- readonly Primary: "primary";
6
- readonly Secondary: "secondary";
7
- readonly Tertiary: "tertiary";
8
- readonly Profile: "profile";
6
+ readonly Letter: "letter";
7
+ readonly Collapsed: "collapsed";
8
+ readonly Thumbnail: "thumbnail";
9
+ readonly Photo: "photo";
9
10
  };
10
11
  type AvatarType = (typeof AvatarType)[keyof typeof AvatarType];
11
12
 
12
- declare const AvatarSize: {
13
- readonly Small: "small";
14
- readonly Medium: "medium";
15
- readonly Large: "large";
16
- };
17
- type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
18
-
13
+ type AvatarSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
19
14
  interface AvatarStyledProps {
20
- type: AvatarType;
15
+ type?: AvatarType;
21
16
  size: AvatarSize;
22
17
  }
23
-
24
18
  interface AvatarProps extends AvatarStyledProps {
25
19
  title: string;
26
20
  imageSrc?: string;
27
21
  dataTestId?: string;
22
+ style?: React.CSSProperties;
28
23
  customInitials?: string;
29
24
  hasTooltip?: boolean;
25
+ collapsedCount?: string;
30
26
  }
31
- declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, }: AvatarProps) => react_jsx_runtime.JSX.Element;
27
+
28
+ declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, collapsedCount, hasTooltip, style, }: AvatarProps) => react_jsx_runtime.JSX.Element;
32
29
 
33
30
  declare module '@emotion/react' {
34
31
  interface Theme extends CustomTheme {
35
32
  }
36
33
  }
37
34
 
38
- export { Avatar, AvatarSize, AvatarType };
35
+ export { Avatar, AvatarType };
package/dist/index.js CHANGED
@@ -1,27 +1,10 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
6
  var __getProtoOf = Object.getPrototypeOf;
10
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues = (a, b) => {
14
- for (var prop in b || (b = {}))
15
- if (__hasOwnProp.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- if (__getOwnPropSymbols)
18
- for (var prop of __getOwnPropSymbols(b)) {
19
- if (__propIsEnum.call(b, prop))
20
- __defNormalProp(a, prop, b[prop]);
21
- }
22
- return a;
23
- };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
8
  var __export = (target, all) => {
26
9
  for (var name in all)
27
10
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -47,227 +30,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
30
  // index.ts
48
31
  var index_exports = {};
49
32
  __export(index_exports, {
50
- Avatar: () => Avatar_default,
51
- AvatarSize: () => AvatarSize,
33
+ Avatar: () => Avatar,
52
34
  AvatarType: () => AvatarType
53
35
  });
54
36
  module.exports = __toCommonJS(index_exports);
55
37
 
56
38
  // src/Avatar.tsx
39
+ var import_react_icon = require("@dt-dds/react-icon");
57
40
  var import_react_tooltip = require("@dt-dds/react-tooltip");
58
- var import_react3 = require("react");
59
-
60
- // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
61
- var import_jsx_runtime = require("react/jsx-runtime");
62
-
63
- // ../../dt-dds-react/core/assets/svgs/Apis.tsx
64
- var import_jsx_runtime2 = require("react/jsx-runtime");
65
-
66
- // ../../dt-dds-react/core/assets/svgs/Apps.tsx
67
- var import_jsx_runtime3 = require("react/jsx-runtime");
68
-
69
- // ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
70
- var import_jsx_runtime4 = require("react/jsx-runtime");
71
-
72
- // ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
73
- var import_jsx_runtime5 = require("react/jsx-runtime");
74
-
75
- // ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
76
- var import_jsx_runtime6 = require("react/jsx-runtime");
77
-
78
- // ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
79
- var import_jsx_runtime7 = require("react/jsx-runtime");
80
-
81
- // ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
82
- var import_jsx_runtime8 = require("react/jsx-runtime");
83
- var AvatarThumbnail = (props) => {
84
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
85
- "svg",
86
- __spreadProps(__spreadValues({
87
- fill: "none",
88
- height: "32",
89
- viewBox: "0 0 33 32",
90
- width: "33",
91
- xmlns: "http://www.w3.org/2000/svg"
92
- }, props), {
93
- children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { clipPath: "url(#clip0_1627_31268)", children: [
95
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { fill: "#D3D4D5", height: "32", rx: "16", width: "32", x: "0.5" }),
96
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "16.5", cy: "34", fill: "white", r: "14" }),
97
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "16.5", cy: "13", fill: "white", r: "5" })
98
- ] }),
99
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("clipPath", { id: "clip0_1627_31268", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { fill: "white", height: "32", rx: "16", width: "32", x: "0.5" }) }) })
100
- ]
101
- })
102
- );
103
- };
104
- var AvatarThumbnail_default = AvatarThumbnail;
105
-
106
- // ../../dt-dds-react/core/assets/svgs/Bolt.tsx
107
- var import_jsx_runtime9 = require("react/jsx-runtime");
108
-
109
- // ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
110
- var import_jsx_runtime10 = require("react/jsx-runtime");
111
-
112
- // ../../dt-dds-react/core/assets/svgs/Cancel.tsx
113
- var import_jsx_runtime11 = require("react/jsx-runtime");
114
-
115
- // ../../dt-dds-react/core/assets/svgs/Check.tsx
116
- var import_jsx_runtime12 = require("react/jsx-runtime");
117
-
118
- // ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
119
- var import_jsx_runtime13 = require("react/jsx-runtime");
120
-
121
- // ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
122
- var import_jsx_runtime14 = require("react/jsx-runtime");
123
-
124
- // ../../dt-dds-react/core/assets/svgs/Close.tsx
125
- var import_jsx_runtime15 = require("react/jsx-runtime");
126
-
127
- // ../../dt-dds-react/core/assets/svgs/Copy.tsx
128
- var import_jsx_runtime16 = require("react/jsx-runtime");
129
-
130
- // ../../dt-dds-react/core/assets/svgs/Delete.tsx
131
- var import_jsx_runtime17 = require("react/jsx-runtime");
132
-
133
- // ../../dt-dds-react/core/assets/svgs/Edit.tsx
134
- var import_jsx_runtime18 = require("react/jsx-runtime");
135
-
136
- // ../../dt-dds-react/core/assets/svgs/Email.tsx
137
- var import_jsx_runtime19 = require("react/jsx-runtime");
138
-
139
- // ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
140
- var import_jsx_runtime20 = require("react/jsx-runtime");
141
-
142
- // ../../dt-dds-react/core/assets/svgs/Error.tsx
143
- var import_react = require("@emotion/react");
144
- var import_jsx_runtime21 = require("react/jsx-runtime");
145
-
146
- // ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
147
- var import_jsx_runtime22 = require("react/jsx-runtime");
148
-
149
- // ../../dt-dds-react/core/assets/svgs/EVStation.tsx
150
- var import_jsx_runtime23 = require("react/jsx-runtime");
151
-
152
- // ../../dt-dds-react/core/assets/svgs/Info.tsx
153
- var import_jsx_runtime24 = require("react/jsx-runtime");
154
-
155
- // ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
156
- var import_jsx_runtime25 = require("react/jsx-runtime");
157
-
158
- // ../../dt-dds-react/core/assets/svgs/Input.tsx
159
- var import_jsx_runtime26 = require("react/jsx-runtime");
160
-
161
- // ../../dt-dds-react/core/assets/svgs/Language.tsx
162
- var import_jsx_runtime27 = require("react/jsx-runtime");
163
-
164
- // ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
165
- var import_jsx_runtime28 = require("react/jsx-runtime");
166
-
167
- // ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
168
- var import_jsx_runtime29 = require("react/jsx-runtime");
169
-
170
- // ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
171
- var import_jsx_runtime30 = require("react/jsx-runtime");
172
-
173
- // ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
174
- var import_jsx_runtime31 = require("react/jsx-runtime");
175
-
176
- // ../../dt-dds-react/core/assets/svgs/Menu.tsx
177
- var import_jsx_runtime32 = require("react/jsx-runtime");
178
-
179
- // ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
180
- var import_jsx_runtime33 = require("react/jsx-runtime");
181
-
182
- // ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
183
- var import_jsx_runtime34 = require("react/jsx-runtime");
184
-
185
- // ../../dt-dds-react/core/assets/svgs/NoData.tsx
186
- var import_react2 = require("@emotion/react");
187
- var import_jsx_runtime35 = require("react/jsx-runtime");
188
-
189
- // ../../dt-dds-react/core/assets/svgs/NotFound.tsx
190
- var import_jsx_runtime36 = require("react/jsx-runtime");
191
-
192
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
193
- var import_jsx_runtime37 = require("react/jsx-runtime");
194
-
195
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
196
- var import_jsx_runtime38 = require("react/jsx-runtime");
197
-
198
- // ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
199
- var import_jsx_runtime39 = require("react/jsx-runtime");
200
-
201
- // ../../dt-dds-react/core/assets/svgs/Payments.tsx
202
- var import_jsx_runtime40 = require("react/jsx-runtime");
203
-
204
- // ../../dt-dds-react/core/assets/svgs/Products.tsx
205
- var import_jsx_runtime41 = require("react/jsx-runtime");
206
-
207
- // ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
208
- var import_jsx_runtime42 = require("react/jsx-runtime");
209
-
210
- // ../../dt-dds-react/core/assets/svgs/Share.tsx
211
- var import_jsx_runtime43 = require("react/jsx-runtime");
212
-
213
- // ../../dt-dds-react/core/assets/svgs/Signout.tsx
214
- var import_jsx_runtime44 = require("react/jsx-runtime");
215
-
216
- // ../../dt-dds-react/core/assets/svgs/Teams.tsx
217
- var import_jsx_runtime45 = require("react/jsx-runtime");
218
-
219
- // ../../dt-dds-react/core/assets/svgs/Timeline.tsx
220
- var import_jsx_runtime46 = require("react/jsx-runtime");
221
-
222
- // ../../dt-dds-react/core/assets/svgs/Topic.tsx
223
- var import_jsx_runtime47 = require("react/jsx-runtime");
224
-
225
- // ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
226
- var import_jsx_runtime48 = require("react/jsx-runtime");
227
-
228
- // ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
229
- var import_jsx_runtime49 = require("react/jsx-runtime");
230
-
231
- // ../../dt-dds-react/core/assets/svgs/Username.tsx
232
- var import_jsx_runtime50 = require("react/jsx-runtime");
233
-
234
- // ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
235
- var import_jsx_runtime51 = require("react/jsx-runtime");
236
-
237
- // ../../dt-dds-react/core/assets/svgs/Visibility.tsx
238
- var import_jsx_runtime52 = require("react/jsx-runtime");
239
-
240
- // ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
241
- var import_jsx_runtime53 = require("react/jsx-runtime");
242
-
243
- // ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
244
- var import_jsx_runtime54 = require("react/jsx-runtime");
245
-
246
- // ../../dt-dds-react/core/assets/svgs/Warning.tsx
247
- var import_jsx_runtime55 = require("react/jsx-runtime");
248
-
249
- // ../../dt-dds-react/core/assets/svgs/Wifi.tsx
250
- var import_jsx_runtime56 = require("react/jsx-runtime");
251
-
252
- // ../../dt-dds-react/core/assets/svgs/Settings.tsx
253
- var import_jsx_runtime57 = require("react/jsx-runtime");
41
+ var import_react = require("react");
254
42
 
255
43
  // src/Avatar.styled.ts
256
44
  var import_styled = __toESM(require("@emotion/styled"));
257
45
 
258
46
  // src/constants/AvatarType.ts
259
47
  var AvatarType = {
260
- Primary: "primary",
261
- Secondary: "secondary",
262
- Tertiary: "tertiary",
263
- Profile: "profile"
264
- };
265
-
266
- // src/constants/AvatarSize.ts
267
- var AvatarSize = {
268
- Small: "small",
269
- Medium: "medium",
270
- Large: "large"
48
+ Letter: "letter",
49
+ Collapsed: "collapsed",
50
+ Thumbnail: "thumbnail",
51
+ Photo: "photo"
271
52
  };
272
53
 
273
54
  // src/Avatar.styled.ts
@@ -280,88 +61,57 @@ var AvatarStyled = import_styled.default.div`
280
61
  display: flex;
281
62
  align-items: center;
282
63
  justify-content: center;
283
- font-weight: 700;
284
64
  text-transform: uppercase;
285
65
  border-radius: ${theme.radius.radius_500};
286
- cursor: pointer;
287
66
  }
288
67
  `;
289
- switch (size) {
290
- case AvatarSize.Small:
291
- styles += `
292
- width: 16px;
293
- height: 16px;
294
- font-size: 8px;
295
- line-height: 10px;
296
-
297
- & > * {
298
- padding: 3px 2px 2px 2px;
299
- }
300
- `;
301
- break;
302
- case AvatarSize.Medium:
303
- styles += `
304
- width: 24px;
305
- height: 24px;
306
- font-size: 10px;
307
- line-height: 14px;
308
- `;
309
- break;
310
- case AvatarSize.Large:
311
- styles += `
312
- width: 32px;
313
- height: 32px;
314
- font-size: 12px;
315
- line-height: 16px;
316
- `;
317
- break;
318
- }
68
+ const sizeStyles = {
69
+ small: `
70
+ width: 20px;
71
+ height: 20px;
72
+ ${theme.fontStyles.bodyXsBold};
73
+ `,
74
+ medium: `
75
+ width: ${theme.spacing.spacing_60};
76
+ height: ${theme.spacing.spacing_60};
77
+ ${theme.fontStyles.bodyXsBold};
78
+ `,
79
+ large: `
80
+ width: ${theme.spacing.spacing_70};
81
+ height: ${theme.spacing.spacing_70};
82
+ ${theme.fontStyles.bodySmBold};
83
+ `
84
+ };
85
+ styles += sizeStyles[size];
319
86
  switch (type) {
320
- case AvatarType.Primary:
87
+ case AvatarType.Letter:
321
88
  styles += `
322
89
  color: ${theme.palette.content.contrast};
323
90
 
324
91
  & > * {
325
92
  background-color: ${theme.palette.primary.default};
326
-
327
- &:hover {
328
- background-color: ${theme.palette.primary.dark};
329
- }
330
93
  }
331
94
  `;
332
95
  break;
333
- case AvatarType.Secondary:
96
+ case AvatarType.Collapsed:
334
97
  styles += `
335
- color: ${theme.palette.content.contrast};
98
+ color: ${theme.palette.content.medium};
336
99
 
337
100
  & > * {
338
- background-color: ${theme.palette.secondary.default};
339
-
340
- &:hover {
341
- background-color: ${theme.palette.secondary.dark};
342
- }
101
+ background-color: ${theme.palette.content.contrast};
343
102
  }
344
103
  `;
345
104
  break;
346
- case AvatarType.Tertiary:
105
+ case AvatarType.Thumbnail:
347
106
  styles += `
348
- color: ${theme.palette.primary.default};
107
+ color: ${theme.palette.content.contrast};
349
108
 
350
109
  & > * {
351
- background-color: ${theme.palette.content.contrast};
352
-
353
- &:hover {
354
- background-color: ${theme.palette.primary.light};
355
- }
110
+ background-color: ${theme.palette.primary.default};
356
111
  }
357
112
  `;
358
113
  break;
359
- case AvatarType.Profile:
360
- styles += `
361
- & > * {
362
- padding: initial;
363
- }
364
- `;
114
+ case AvatarType.Photo:
365
115
  break;
366
116
  }
367
117
  return styles;
@@ -375,46 +125,55 @@ var acronymGenerator = (text = "") => {
375
125
  };
376
126
 
377
127
  // src/Avatar.tsx
378
- var import_jsx_runtime58 = require("react/jsx-runtime");
128
+ var import_jsx_runtime = require("react/jsx-runtime");
379
129
  var Avatar = ({
380
130
  title,
381
- type = AvatarType.Primary,
382
- size = AvatarSize.Medium,
131
+ type = AvatarType.Letter,
132
+ size = "medium",
383
133
  imageSrc = "",
384
134
  dataTestId,
385
135
  customInitials,
386
- hasTooltip = true
136
+ collapsedCount = "+1",
137
+ hasTooltip = false,
138
+ style
387
139
  }) => {
388
- const [showThumbnail, setShowThumbnail] = (0, import_react3.useState)(false);
140
+ const [hasImageError, setHasImageError] = (0, import_react.useState)(false);
389
141
  const handleImageError = () => {
390
- setShowThumbnail(true);
142
+ setHasImageError(true);
391
143
  };
392
- const renderProfileImage = () => {
393
- if (showThumbnail) {
394
- return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AvatarThumbnail_default, {});
144
+ const shouldRenderPhotoFallback = type === AvatarType.Photo && (hasImageError || !imageSrc);
145
+ const thumbnailIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "person", color: "primary", size }) });
146
+ const renderImage = () => {
147
+ if (shouldRenderPhotoFallback) {
148
+ return thumbnailIcon;
395
149
  }
396
- return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { alt: title, onError: handleImageError, src: imageSrc });
150
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: title, onError: handleImageError, src: imageSrc });
151
+ };
152
+ const contentMap = {
153
+ [AvatarType.Photo]: renderImage(),
154
+ [AvatarType.Thumbnail]: thumbnailIcon,
155
+ [AvatarType.Collapsed]: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: collapsedCount.substring(0, 3) }),
156
+ [AvatarType.Letter]: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
397
157
  };
398
158
  const renderAvatarContent = () => {
399
- return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
159
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
400
160
  AvatarStyled,
401
161
  {
402
162
  "data-testid": dataTestId != null ? dataTestId : "avatar",
403
163
  size,
404
- type,
405
- children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
164
+ style,
165
+ type: shouldRenderPhotoFallback ? AvatarType.Thumbnail : type,
166
+ children: contentMap[type]
406
167
  }
407
168
  );
408
169
  };
409
- return hasTooltip ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_tooltip.Tooltip, { children: [
170
+ return hasTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_tooltip.Tooltip, { children: [
410
171
  renderAvatarContent(),
411
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_tooltip.Tooltip.Content, { children: title })
172
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tooltip.Tooltip.Content, { children: title })
412
173
  ] }) : renderAvatarContent();
413
174
  };
414
- var Avatar_default = Avatar;
415
175
  // Annotate the CommonJS export names for ESM import in node:
416
176
  0 && (module.exports = {
417
177
  Avatar,
418
- AvatarSize,
419
178
  AvatarType
420
179
  });
package/dist/index.mjs CHANGED
@@ -1,238 +1,17 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
-
21
1
  // src/Avatar.tsx
2
+ import { Icon } from "@dt-dds/react-icon";
22
3
  import { Tooltip } from "@dt-dds/react-tooltip";
23
4
  import { useState } from "react";
24
5
 
25
- // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
26
- import { jsx, jsxs } from "react/jsx-runtime";
27
-
28
- // ../../dt-dds-react/core/assets/svgs/Apis.tsx
29
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
30
-
31
- // ../../dt-dds-react/core/assets/svgs/Apps.tsx
32
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
33
-
34
- // ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
35
- import { jsx as jsx4 } from "react/jsx-runtime";
36
-
37
- // ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
38
- import { jsx as jsx5 } from "react/jsx-runtime";
39
-
40
- // ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
41
- import { jsx as jsx6 } from "react/jsx-runtime";
42
-
43
- // ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
44
- import { jsx as jsx7 } from "react/jsx-runtime";
45
-
46
- // ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
47
- import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
48
- var AvatarThumbnail = (props) => {
49
- return /* @__PURE__ */ jsxs4(
50
- "svg",
51
- __spreadProps(__spreadValues({
52
- fill: "none",
53
- height: "32",
54
- viewBox: "0 0 33 32",
55
- width: "33",
56
- xmlns: "http://www.w3.org/2000/svg"
57
- }, props), {
58
- children: [
59
- /* @__PURE__ */ jsxs4("g", { clipPath: "url(#clip0_1627_31268)", children: [
60
- /* @__PURE__ */ jsx8("rect", { fill: "#D3D4D5", height: "32", rx: "16", width: "32", x: "0.5" }),
61
- /* @__PURE__ */ jsx8("circle", { cx: "16.5", cy: "34", fill: "white", r: "14" }),
62
- /* @__PURE__ */ jsx8("circle", { cx: "16.5", cy: "13", fill: "white", r: "5" })
63
- ] }),
64
- /* @__PURE__ */ jsx8("defs", { children: /* @__PURE__ */ jsx8("clipPath", { id: "clip0_1627_31268", children: /* @__PURE__ */ jsx8("rect", { fill: "white", height: "32", rx: "16", width: "32", x: "0.5" }) }) })
65
- ]
66
- })
67
- );
68
- };
69
- var AvatarThumbnail_default = AvatarThumbnail;
70
-
71
- // ../../dt-dds-react/core/assets/svgs/Bolt.tsx
72
- import { jsx as jsx9 } from "react/jsx-runtime";
73
-
74
- // ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
75
- import { jsx as jsx10 } from "react/jsx-runtime";
76
-
77
- // ../../dt-dds-react/core/assets/svgs/Cancel.tsx
78
- import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
79
-
80
- // ../../dt-dds-react/core/assets/svgs/Check.tsx
81
- import { jsx as jsx12 } from "react/jsx-runtime";
82
-
83
- // ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
84
- import { jsx as jsx13 } from "react/jsx-runtime";
85
-
86
- // ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
87
- import { jsx as jsx14 } from "react/jsx-runtime";
88
-
89
- // ../../dt-dds-react/core/assets/svgs/Close.tsx
90
- import { jsx as jsx15 } from "react/jsx-runtime";
91
-
92
- // ../../dt-dds-react/core/assets/svgs/Copy.tsx
93
- import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
94
-
95
- // ../../dt-dds-react/core/assets/svgs/Delete.tsx
96
- import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
97
-
98
- // ../../dt-dds-react/core/assets/svgs/Edit.tsx
99
- import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
100
-
101
- // ../../dt-dds-react/core/assets/svgs/Email.tsx
102
- import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
103
-
104
- // ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
105
- import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
106
-
107
- // ../../dt-dds-react/core/assets/svgs/Error.tsx
108
- import { useTheme } from "@emotion/react";
109
- import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
110
-
111
- // ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
112
- import { jsx as jsx22 } from "react/jsx-runtime";
113
-
114
- // ../../dt-dds-react/core/assets/svgs/EVStation.tsx
115
- import { jsx as jsx23 } from "react/jsx-runtime";
116
-
117
- // ../../dt-dds-react/core/assets/svgs/Info.tsx
118
- import { jsx as jsx24 } from "react/jsx-runtime";
119
-
120
- // ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
121
- import { jsx as jsx25 } from "react/jsx-runtime";
122
-
123
- // ../../dt-dds-react/core/assets/svgs/Input.tsx
124
- import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
125
-
126
- // ../../dt-dds-react/core/assets/svgs/Language.tsx
127
- import { jsx as jsx27 } from "react/jsx-runtime";
128
-
129
- // ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
130
- import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
131
-
132
- // ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
133
- import { jsx as jsx29 } from "react/jsx-runtime";
134
-
135
- // ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
136
- import { jsx as jsx30 } from "react/jsx-runtime";
137
-
138
- // ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
139
- import { jsx as jsx31 } from "react/jsx-runtime";
140
-
141
- // ../../dt-dds-react/core/assets/svgs/Menu.tsx
142
- import { jsx as jsx32 } from "react/jsx-runtime";
143
-
144
- // ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
145
- import { jsx as jsx33 } from "react/jsx-runtime";
146
-
147
- // ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
148
- import { jsx as jsx34 } from "react/jsx-runtime";
149
-
150
- // ../../dt-dds-react/core/assets/svgs/NoData.tsx
151
- import { useTheme as useTheme2 } from "@emotion/react";
152
- import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
153
-
154
- // ../../dt-dds-react/core/assets/svgs/NotFound.tsx
155
- import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
156
-
157
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
158
- import { jsx as jsx37 } from "react/jsx-runtime";
159
-
160
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
161
- import { jsx as jsx38 } from "react/jsx-runtime";
162
-
163
- // ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
164
- import { jsx as jsx39 } from "react/jsx-runtime";
165
-
166
- // ../../dt-dds-react/core/assets/svgs/Payments.tsx
167
- import { jsx as jsx40 } from "react/jsx-runtime";
168
-
169
- // ../../dt-dds-react/core/assets/svgs/Products.tsx
170
- import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
171
-
172
- // ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
173
- import { jsx as jsx42 } from "react/jsx-runtime";
174
-
175
- // ../../dt-dds-react/core/assets/svgs/Share.tsx
176
- import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
177
-
178
- // ../../dt-dds-react/core/assets/svgs/Signout.tsx
179
- import { jsx as jsx44 } from "react/jsx-runtime";
180
-
181
- // ../../dt-dds-react/core/assets/svgs/Teams.tsx
182
- import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
183
-
184
- // ../../dt-dds-react/core/assets/svgs/Timeline.tsx
185
- import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
186
-
187
- // ../../dt-dds-react/core/assets/svgs/Topic.tsx
188
- import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
189
-
190
- // ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
191
- import { jsx as jsx48 } from "react/jsx-runtime";
192
-
193
- // ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
194
- import { jsx as jsx49 } from "react/jsx-runtime";
195
-
196
- // ../../dt-dds-react/core/assets/svgs/Username.tsx
197
- import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
198
-
199
- // ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
200
- import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
201
-
202
- // ../../dt-dds-react/core/assets/svgs/Visibility.tsx
203
- import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
204
-
205
- // ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
206
- import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
207
-
208
- // ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
209
- import { jsx as jsx54 } from "react/jsx-runtime";
210
-
211
- // ../../dt-dds-react/core/assets/svgs/Warning.tsx
212
- import { jsx as jsx55 } from "react/jsx-runtime";
213
-
214
- // ../../dt-dds-react/core/assets/svgs/Wifi.tsx
215
- import { jsx as jsx56 } from "react/jsx-runtime";
216
-
217
- // ../../dt-dds-react/core/assets/svgs/Settings.tsx
218
- import { jsx as jsx57 } from "react/jsx-runtime";
219
-
220
6
  // src/Avatar.styled.ts
221
7
  import styled from "@emotion/styled";
222
8
 
223
9
  // src/constants/AvatarType.ts
224
10
  var AvatarType = {
225
- Primary: "primary",
226
- Secondary: "secondary",
227
- Tertiary: "tertiary",
228
- Profile: "profile"
229
- };
230
-
231
- // src/constants/AvatarSize.ts
232
- var AvatarSize = {
233
- Small: "small",
234
- Medium: "medium",
235
- Large: "large"
11
+ Letter: "letter",
12
+ Collapsed: "collapsed",
13
+ Thumbnail: "thumbnail",
14
+ Photo: "photo"
236
15
  };
237
16
 
238
17
  // src/Avatar.styled.ts
@@ -245,88 +24,57 @@ var AvatarStyled = styled.div`
245
24
  display: flex;
246
25
  align-items: center;
247
26
  justify-content: center;
248
- font-weight: 700;
249
27
  text-transform: uppercase;
250
28
  border-radius: ${theme.radius.radius_500};
251
- cursor: pointer;
252
29
  }
253
30
  `;
254
- switch (size) {
255
- case AvatarSize.Small:
256
- styles += `
257
- width: 16px;
258
- height: 16px;
259
- font-size: 8px;
260
- line-height: 10px;
261
-
262
- & > * {
263
- padding: 3px 2px 2px 2px;
264
- }
265
- `;
266
- break;
267
- case AvatarSize.Medium:
268
- styles += `
269
- width: 24px;
270
- height: 24px;
271
- font-size: 10px;
272
- line-height: 14px;
273
- `;
274
- break;
275
- case AvatarSize.Large:
276
- styles += `
277
- width: 32px;
278
- height: 32px;
279
- font-size: 12px;
280
- line-height: 16px;
281
- `;
282
- break;
283
- }
31
+ const sizeStyles = {
32
+ small: `
33
+ width: 20px;
34
+ height: 20px;
35
+ ${theme.fontStyles.bodyXsBold};
36
+ `,
37
+ medium: `
38
+ width: ${theme.spacing.spacing_60};
39
+ height: ${theme.spacing.spacing_60};
40
+ ${theme.fontStyles.bodyXsBold};
41
+ `,
42
+ large: `
43
+ width: ${theme.spacing.spacing_70};
44
+ height: ${theme.spacing.spacing_70};
45
+ ${theme.fontStyles.bodySmBold};
46
+ `
47
+ };
48
+ styles += sizeStyles[size];
284
49
  switch (type) {
285
- case AvatarType.Primary:
50
+ case AvatarType.Letter:
286
51
  styles += `
287
52
  color: ${theme.palette.content.contrast};
288
53
 
289
54
  & > * {
290
55
  background-color: ${theme.palette.primary.default};
291
-
292
- &:hover {
293
- background-color: ${theme.palette.primary.dark};
294
- }
295
56
  }
296
57
  `;
297
58
  break;
298
- case AvatarType.Secondary:
59
+ case AvatarType.Collapsed:
299
60
  styles += `
300
- color: ${theme.palette.content.contrast};
61
+ color: ${theme.palette.content.medium};
301
62
 
302
63
  & > * {
303
- background-color: ${theme.palette.secondary.default};
304
-
305
- &:hover {
306
- background-color: ${theme.palette.secondary.dark};
307
- }
64
+ background-color: ${theme.palette.content.contrast};
308
65
  }
309
66
  `;
310
67
  break;
311
- case AvatarType.Tertiary:
68
+ case AvatarType.Thumbnail:
312
69
  styles += `
313
- color: ${theme.palette.primary.default};
70
+ color: ${theme.palette.content.contrast};
314
71
 
315
72
  & > * {
316
- background-color: ${theme.palette.content.contrast};
317
-
318
- &:hover {
319
- background-color: ${theme.palette.primary.light};
320
- }
73
+ background-color: ${theme.palette.primary.default};
321
74
  }
322
75
  `;
323
76
  break;
324
- case AvatarType.Profile:
325
- styles += `
326
- & > * {
327
- padding: initial;
328
- }
329
- `;
77
+ case AvatarType.Photo:
330
78
  break;
331
79
  }
332
80
  return styles;
@@ -340,45 +88,54 @@ var acronymGenerator = (text = "") => {
340
88
  };
341
89
 
342
90
  // src/Avatar.tsx
343
- import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
91
+ import { jsx, jsxs } from "react/jsx-runtime";
344
92
  var Avatar = ({
345
93
  title,
346
- type = AvatarType.Primary,
347
- size = AvatarSize.Medium,
94
+ type = AvatarType.Letter,
95
+ size = "medium",
348
96
  imageSrc = "",
349
97
  dataTestId,
350
98
  customInitials,
351
- hasTooltip = true
99
+ collapsedCount = "+1",
100
+ hasTooltip = false,
101
+ style
352
102
  }) => {
353
- const [showThumbnail, setShowThumbnail] = useState(false);
103
+ const [hasImageError, setHasImageError] = useState(false);
354
104
  const handleImageError = () => {
355
- setShowThumbnail(true);
105
+ setHasImageError(true);
356
106
  };
357
- const renderProfileImage = () => {
358
- if (showThumbnail) {
359
- return /* @__PURE__ */ jsx58(AvatarThumbnail_default, {});
107
+ const shouldRenderPhotoFallback = type === AvatarType.Photo && (hasImageError || !imageSrc);
108
+ const thumbnailIcon = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, { code: "person", color: "primary", size }) });
109
+ const renderImage = () => {
110
+ if (shouldRenderPhotoFallback) {
111
+ return thumbnailIcon;
360
112
  }
361
- return /* @__PURE__ */ jsx58("img", { alt: title, onError: handleImageError, src: imageSrc });
113
+ return /* @__PURE__ */ jsx("img", { alt: title, onError: handleImageError, src: imageSrc });
114
+ };
115
+ const contentMap = {
116
+ [AvatarType.Photo]: renderImage(),
117
+ [AvatarType.Thumbnail]: thumbnailIcon,
118
+ [AvatarType.Collapsed]: /* @__PURE__ */ jsx("div", { children: collapsedCount.substring(0, 3) }),
119
+ [AvatarType.Letter]: /* @__PURE__ */ jsx("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
362
120
  };
363
121
  const renderAvatarContent = () => {
364
- return /* @__PURE__ */ jsx58(
122
+ return /* @__PURE__ */ jsx(
365
123
  AvatarStyled,
366
124
  {
367
125
  "data-testid": dataTestId != null ? dataTestId : "avatar",
368
126
  size,
369
- type,
370
- children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ jsx58("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
127
+ style,
128
+ type: shouldRenderPhotoFallback ? AvatarType.Thumbnail : type,
129
+ children: contentMap[type]
371
130
  }
372
131
  );
373
132
  };
374
- return hasTooltip ? /* @__PURE__ */ jsxs25(Tooltip, { children: [
133
+ return hasTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
375
134
  renderAvatarContent(),
376
- /* @__PURE__ */ jsx58(Tooltip.Content, { children: title })
135
+ /* @__PURE__ */ jsx(Tooltip.Content, { children: title })
377
136
  ] }) : renderAvatarContent();
378
137
  };
379
- var Avatar_default = Avatar;
380
138
  export {
381
- Avatar_default as Avatar,
382
- AvatarSize,
139
+ Avatar,
383
140
  AvatarType
384
141
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-avatar",
3
- "version": "1.0.0-beta.59",
3
+ "version": "1.0.0-beta.61",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -22,6 +22,7 @@
22
22
  "dependencies": {
23
23
  "@dt-dds/react-core": "1.0.0-beta.50",
24
24
  "@dt-dds/react-tooltip": "1.0.0-beta.58",
25
+ "@dt-dds/react-icon": "1.0.0-beta.52",
25
26
  "@dt-dds/themes": "1.0.0-beta.9"
26
27
  },
27
28
  "devDependencies": {