@dt-dds/react-avatar 1.0.0-beta.50

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.
package/dist/index.js ADDED
@@ -0,0 +1,411 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ 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
+ var __export = (target, all) => {
26
+ for (var name in all)
27
+ __defProp(target, name, { get: all[name], enumerable: true });
28
+ };
29
+ var __copyProps = (to, from, except, desc) => {
30
+ if (from && typeof from === "object" || typeof from === "function") {
31
+ for (let key of __getOwnPropNames(from))
32
+ if (!__hasOwnProp.call(to, key) && key !== except)
33
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
34
+ }
35
+ return to;
36
+ };
37
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
38
+ // If the importer is in node compatibility mode or this is not an ESM
39
+ // file that has been converted to a CommonJS file using a Babel-
40
+ // compatible transform (i.e. "__esModule" has not been set), then set
41
+ // "default" to the CommonJS "module.exports" for node compatibility.
42
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
43
+ mod
44
+ ));
45
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
46
+
47
+ // index.ts
48
+ var avatar_exports = {};
49
+ __export(avatar_exports, {
50
+ Avatar: () => Avatar_default,
51
+ AvatarSize: () => AvatarSize,
52
+ AvatarType: () => AvatarType
53
+ });
54
+ module.exports = __toCommonJS(avatar_exports);
55
+
56
+ // src/Avatar.tsx
57
+ 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");
254
+
255
+ // src/Avatar.styled.ts
256
+ var import_styled = __toESM(require("@emotion/styled"));
257
+
258
+ // src/constants/AvatarType.ts
259
+ 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"
271
+ };
272
+
273
+ // src/Avatar.styled.ts
274
+ var AvatarStyled = import_styled.default.div`
275
+ ${({ theme, type, size }) => {
276
+ let styles = `
277
+ & > * {
278
+ width: 100%;
279
+ height: 100%;
280
+ display: flex;
281
+ align-items: center;
282
+ justify-content: center;
283
+ font-weight: 700;
284
+ text-transform: uppercase;
285
+ border-radius: ${theme.radius.full};
286
+ cursor: pointer;
287
+ }
288
+ `;
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
+ }
319
+ switch (type) {
320
+ case AvatarType.Primary:
321
+ styles += `
322
+ color: ${theme.palette.content.contrast};
323
+
324
+ & > * {
325
+ background-color: ${theme.palette.primary.default};
326
+
327
+ &:hover {
328
+ background-color: ${theme.palette.primary.dark};
329
+ }
330
+ }
331
+ `;
332
+ break;
333
+ case AvatarType.Secondary:
334
+ styles += `
335
+ color: ${theme.palette.content.contrast};
336
+
337
+ & > * {
338
+ background-color: ${theme.palette.secondary.default};
339
+
340
+ &:hover {
341
+ background-color: ${theme.palette.secondary.dark};
342
+ }
343
+ }
344
+ `;
345
+ break;
346
+ case AvatarType.Tertiary:
347
+ styles += `
348
+ color: ${theme.palette.primary.default};
349
+
350
+ & > * {
351
+ background-color: ${theme.palette.content.contrast};
352
+
353
+ &:hover {
354
+ background-color: ${theme.palette.primary.light};
355
+ }
356
+ }
357
+ `;
358
+ break;
359
+ case AvatarType.Profile:
360
+ styles += `
361
+ & > * {
362
+ padding: initial;
363
+ }
364
+ `;
365
+ break;
366
+ }
367
+ return styles;
368
+ }}
369
+ `;
370
+
371
+ // src/utils/acronymGenerator.ts
372
+ var acronymGenerator = (text = "") => {
373
+ const textSliced = text.split(" ").slice(0, 2).join(" ");
374
+ return textSliced.split(/\s/).reduce((response, word) => response += word.slice(0, 1), "").toUpperCase();
375
+ };
376
+
377
+ // src/Avatar.tsx
378
+ var import_jsx_runtime58 = require("react/jsx-runtime");
379
+ var Avatar = ({
380
+ title,
381
+ type = AvatarType.Primary,
382
+ size = AvatarSize.Medium,
383
+ imageSrc = "",
384
+ dataTestId,
385
+ customInitials
386
+ }) => {
387
+ const [showThumbnail, setShowThumbnail] = (0, import_react3.useState)(false);
388
+ const handleImageError = () => {
389
+ setShowThumbnail(true);
390
+ };
391
+ const renderProfileImage = () => showThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AvatarThumbnail_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { alt: title, onError: handleImageError, src: imageSrc });
392
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_tooltip.Tooltip, { children: [
393
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
394
+ AvatarStyled,
395
+ {
396
+ "data-testid": dataTestId != null ? dataTestId : "avatar",
397
+ size,
398
+ type,
399
+ children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
400
+ }
401
+ ),
402
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_tooltip.Tooltip.Content, { children: title })
403
+ ] });
404
+ };
405
+ var Avatar_default = Avatar;
406
+ // Annotate the CommonJS export names for ESM import in node:
407
+ 0 && (module.exports = {
408
+ Avatar,
409
+ AvatarSize,
410
+ AvatarType
411
+ });