@dt-dds/react-message 1.0.0-beta.88 → 1.0.0-beta.90
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/CHANGELOG.md +17 -0
- package/README.md +23 -36
- package/dist/index.d.mts +12 -10
- package/dist/index.d.ts +12 -10
- package/dist/index.js +214 -335
- package/dist/index.mjs +239 -333
- package/package.json +3 -2
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
5
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
7
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
10
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
11
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -17,283 +21,92 @@ var __spreadValues = (a, b) => {
|
|
|
17
21
|
return a;
|
|
18
22
|
};
|
|
19
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
29
|
-
|
|
30
|
-
// ../../dt-dds-react/core/assets/svgs/Apps.tsx
|
|
31
|
-
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
32
|
-
|
|
33
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
|
|
34
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
35
|
-
|
|
36
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
|
|
37
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
38
|
-
|
|
39
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
|
|
40
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
41
|
-
|
|
42
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
|
|
43
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
44
|
-
|
|
45
|
-
// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
|
|
46
|
-
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
47
|
-
|
|
48
|
-
// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
|
|
49
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
50
|
-
|
|
51
|
-
// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
|
|
52
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
53
|
-
|
|
54
|
-
// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
|
|
55
|
-
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
56
|
-
|
|
57
|
-
// ../../dt-dds-react/core/assets/svgs/Check.tsx
|
|
58
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
59
|
-
|
|
60
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
|
|
61
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
62
|
-
var CheckCircleOutlineIcon = (props) => {
|
|
63
|
-
return /* @__PURE__ */ jsx13(
|
|
64
|
-
"svg",
|
|
65
|
-
__spreadProps(__spreadValues({
|
|
66
|
-
fill: "currentColor",
|
|
67
|
-
height: "24",
|
|
68
|
-
viewBox: "0 0 24 24",
|
|
69
|
-
width: "24",
|
|
70
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
71
|
-
}, props), {
|
|
72
|
-
children: /* @__PURE__ */ jsx13("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" })
|
|
73
|
-
})
|
|
74
|
-
);
|
|
24
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
25
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
26
|
+
}) : x)(function(x) {
|
|
27
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
28
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
29
|
+
});
|
|
30
|
+
var __commonJS = (cb, mod) => function __require2() {
|
|
31
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
75
32
|
};
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
var CloseIcon = (props) => {
|
|
84
|
-
return /* @__PURE__ */ jsx15(
|
|
85
|
-
"svg",
|
|
86
|
-
__spreadProps(__spreadValues({
|
|
87
|
-
fill: "none",
|
|
88
|
-
height: "24",
|
|
89
|
-
viewBox: "0 0 24 24",
|
|
90
|
-
width: "24",
|
|
91
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
92
|
-
}, props), {
|
|
93
|
-
children: /* @__PURE__ */ jsx15(
|
|
94
|
-
"path",
|
|
95
|
-
{
|
|
96
|
-
d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
|
|
97
|
-
fill: "currentColor"
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
})
|
|
101
|
-
);
|
|
33
|
+
var __copyProps = (to, from, except, desc) => {
|
|
34
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
35
|
+
for (let key of __getOwnPropNames(from))
|
|
36
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
37
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
38
|
+
}
|
|
39
|
+
return to;
|
|
102
40
|
};
|
|
103
|
-
var
|
|
104
|
-
|
|
105
|
-
//
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
41
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
42
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
43
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
44
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
45
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
46
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
47
|
+
mod
|
|
48
|
+
));
|
|
49
|
+
|
|
50
|
+
// ../box/dist/index.js
|
|
51
|
+
var require_dist = __commonJS({
|
|
52
|
+
"../box/dist/index.js"(exports, module) {
|
|
53
|
+
"use strict";
|
|
54
|
+
var __create2 = Object.create;
|
|
55
|
+
var __defProp2 = Object.defineProperty;
|
|
56
|
+
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
57
|
+
var __getOwnPropNames2 = Object.getOwnPropertyNames;
|
|
58
|
+
var __getProtoOf2 = Object.getPrototypeOf;
|
|
59
|
+
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
60
|
+
var __export = (target, all) => {
|
|
61
|
+
for (var name in all)
|
|
62
|
+
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
63
|
+
};
|
|
64
|
+
var __copyProps2 = (to, from, except, desc) => {
|
|
65
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
66
|
+
for (let key of __getOwnPropNames2(from))
|
|
67
|
+
if (!__hasOwnProp2.call(to, key) && key !== except)
|
|
68
|
+
__defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
|
|
69
|
+
}
|
|
70
|
+
return to;
|
|
71
|
+
};
|
|
72
|
+
var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
|
|
73
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
74
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
75
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
76
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
77
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
|
|
78
|
+
mod
|
|
79
|
+
));
|
|
80
|
+
var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
|
|
81
|
+
var index_exports = {};
|
|
82
|
+
__export(index_exports, {
|
|
83
|
+
Box: () => Box2
|
|
84
|
+
});
|
|
85
|
+
module.exports = __toCommonJS(index_exports);
|
|
86
|
+
var import_styled2 = __toESM2(__require("@emotion/styled"));
|
|
87
|
+
var BoxStyled = import_styled2.default.div`
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: center;
|
|
91
|
+
`;
|
|
92
|
+
var import_jsx_runtime2 = __require("react/jsx-runtime");
|
|
93
|
+
var Box2 = ({
|
|
94
|
+
dataTestId,
|
|
95
|
+
children,
|
|
96
|
+
element = "div",
|
|
97
|
+
style
|
|
98
|
+
}) => {
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxStyled, { as: element, "data-testid": dataTestId, style, children });
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
});
|
|
119
103
|
|
|
120
|
-
//
|
|
104
|
+
// src/Message.tsx
|
|
105
|
+
var import_react_box = __toESM(require_dist());
|
|
106
|
+
import { Icon } from "@dt-dds/react-icon";
|
|
107
|
+
import { Typography } from "@dt-dds/react-typography";
|
|
121
108
|
import { useTheme } from "@emotion/react";
|
|
122
|
-
import {
|
|
123
|
-
var Error2 = (props) => {
|
|
124
|
-
const theme = useTheme();
|
|
125
|
-
return /* @__PURE__ */ jsxs11(
|
|
126
|
-
"svg",
|
|
127
|
-
__spreadProps(__spreadValues({
|
|
128
|
-
color: theme.palette.error.default,
|
|
129
|
-
fill: "none",
|
|
130
|
-
height: "24",
|
|
131
|
-
viewBox: "0 0 24 24",
|
|
132
|
-
width: "24",
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
134
|
-
}, props), {
|
|
135
|
-
children: [
|
|
136
|
-
/* @__PURE__ */ jsx21(
|
|
137
|
-
"path",
|
|
138
|
-
{
|
|
139
|
-
d: "M19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711Z",
|
|
140
|
-
fill: "currentColor"
|
|
141
|
-
}
|
|
142
|
-
),
|
|
143
|
-
/* @__PURE__ */ jsx21(
|
|
144
|
-
"path",
|
|
145
|
-
{
|
|
146
|
-
d: "M12.8797 13.6863L13.1157 6.48828H10.8997L11.0997 13.6863H12.8797ZM11.9907 17.5123C12.1621 17.5181 12.333 17.4894 12.4932 17.4281C12.6534 17.3667 12.7997 17.2739 12.9234 17.1551C13.0471 17.0362 13.1458 16.8938 13.2136 16.7362C13.2813 16.5786 13.3168 16.4091 13.318 16.2375C13.3191 16.066 13.2859 15.8959 13.2202 15.7375C13.1545 15.579 13.0577 15.4353 12.9356 15.3148C12.8135 15.1944 12.6684 15.0996 12.5091 15.0361C12.3497 14.9727 12.1792 14.9418 12.0077 14.9453C11.6733 14.9521 11.3547 15.0892 11.1198 15.3274C10.8849 15.5656 10.7522 15.886 10.75 16.2205C10.7478 16.555 10.8762 16.8772 11.1079 17.1184C11.3397 17.3597 11.6564 17.501 11.9907 17.5123Z",
|
|
147
|
-
fill: "white"
|
|
148
|
-
}
|
|
149
|
-
)
|
|
150
|
-
]
|
|
151
|
-
})
|
|
152
|
-
);
|
|
153
|
-
};
|
|
154
|
-
var Error_default = Error2;
|
|
155
|
-
|
|
156
|
-
// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
|
|
157
|
-
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
158
|
-
|
|
159
|
-
// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
|
|
160
|
-
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
161
|
-
|
|
162
|
-
// ../../dt-dds-react/core/assets/svgs/Info.tsx
|
|
163
|
-
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
164
|
-
var Info = (props) => {
|
|
165
|
-
return /* @__PURE__ */ jsx24(
|
|
166
|
-
"svg",
|
|
167
|
-
__spreadProps(__spreadValues({
|
|
168
|
-
fill: "currentColor",
|
|
169
|
-
height: "24",
|
|
170
|
-
viewBox: "0 0 24 24",
|
|
171
|
-
width: "24",
|
|
172
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
173
|
-
}, props), {
|
|
174
|
-
children: /* @__PURE__ */ jsx24("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" })
|
|
175
|
-
})
|
|
176
|
-
);
|
|
177
|
-
};
|
|
178
|
-
var Info_default = Info;
|
|
179
|
-
|
|
180
|
-
// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
|
|
181
|
-
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
182
|
-
|
|
183
|
-
// ../../dt-dds-react/core/assets/svgs/Input.tsx
|
|
184
|
-
import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
185
|
-
|
|
186
|
-
// ../../dt-dds-react/core/assets/svgs/Language.tsx
|
|
187
|
-
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
188
|
-
|
|
189
|
-
// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
|
|
190
|
-
import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
191
|
-
|
|
192
|
-
// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
|
|
193
|
-
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
194
|
-
|
|
195
|
-
// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
|
|
196
|
-
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
197
|
-
|
|
198
|
-
// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
|
|
199
|
-
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
200
|
-
|
|
201
|
-
// ../../dt-dds-react/core/assets/svgs/Menu.tsx
|
|
202
|
-
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
203
|
-
|
|
204
|
-
// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
|
|
205
|
-
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
206
|
-
|
|
207
|
-
// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
|
|
208
|
-
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
209
|
-
|
|
210
|
-
// ../../dt-dds-react/core/assets/svgs/NoData.tsx
|
|
211
|
-
import { useTheme as useTheme2 } from "@emotion/react";
|
|
212
|
-
import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
213
|
-
|
|
214
|
-
// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
|
|
215
|
-
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
216
|
-
|
|
217
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
|
|
218
|
-
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
219
|
-
|
|
220
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
|
|
221
|
-
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
222
|
-
|
|
223
|
-
// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
|
|
224
|
-
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
225
|
-
|
|
226
|
-
// ../../dt-dds-react/core/assets/svgs/Payments.tsx
|
|
227
|
-
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
228
|
-
|
|
229
|
-
// ../../dt-dds-react/core/assets/svgs/Products.tsx
|
|
230
|
-
import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
231
|
-
|
|
232
|
-
// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
|
|
233
|
-
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
234
|
-
|
|
235
|
-
// ../../dt-dds-react/core/assets/svgs/Share.tsx
|
|
236
|
-
import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
237
|
-
|
|
238
|
-
// ../../dt-dds-react/core/assets/svgs/Signout.tsx
|
|
239
|
-
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
240
|
-
|
|
241
|
-
// ../../dt-dds-react/core/assets/svgs/Teams.tsx
|
|
242
|
-
import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
243
|
-
|
|
244
|
-
// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
|
|
245
|
-
import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
246
|
-
|
|
247
|
-
// ../../dt-dds-react/core/assets/svgs/Topic.tsx
|
|
248
|
-
import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
249
|
-
|
|
250
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
|
|
251
|
-
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
252
|
-
|
|
253
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
|
|
254
|
-
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
255
|
-
|
|
256
|
-
// ../../dt-dds-react/core/assets/svgs/Username.tsx
|
|
257
|
-
import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
258
|
-
|
|
259
|
-
// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
|
|
260
|
-
import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
261
|
-
|
|
262
|
-
// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
|
|
263
|
-
import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
264
|
-
|
|
265
|
-
// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
|
|
266
|
-
import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
267
|
-
|
|
268
|
-
// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
|
|
269
|
-
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
270
|
-
|
|
271
|
-
// ../../dt-dds-react/core/assets/svgs/Warning.tsx
|
|
272
|
-
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
273
|
-
var Warning = (props) => {
|
|
274
|
-
return /* @__PURE__ */ jsx55(
|
|
275
|
-
"svg",
|
|
276
|
-
__spreadProps(__spreadValues({
|
|
277
|
-
fill: "currentColor",
|
|
278
|
-
height: "24",
|
|
279
|
-
viewBox: "0 0 24 24",
|
|
280
|
-
width: "24",
|
|
281
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
282
|
-
}, props), {
|
|
283
|
-
children: /* @__PURE__ */ jsx55("path", { d: "M1 21.5H23L12 2.5L1 21.5ZM13 18.5H11V16.5H13V18.5ZM13 14.5H11V10.5H13V14.5Z" })
|
|
284
|
-
})
|
|
285
|
-
);
|
|
286
|
-
};
|
|
287
|
-
var Warning_default = Warning;
|
|
288
|
-
|
|
289
|
-
// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
|
|
290
|
-
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
291
|
-
|
|
292
|
-
// ../../dt-dds-react/core/assets/svgs/Settings.tsx
|
|
293
|
-
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
294
|
-
|
|
295
|
-
// src/Message.styled.ts
|
|
296
|
-
import styled from "@emotion/styled";
|
|
109
|
+
import { Children, cloneElement, useMemo } from "react";
|
|
297
110
|
|
|
298
111
|
// src/types/index.ts
|
|
299
112
|
var OMessageType = {
|
|
@@ -304,96 +117,189 @@ var OMessageType = {
|
|
|
304
117
|
Warning: "warning"
|
|
305
118
|
};
|
|
306
119
|
|
|
120
|
+
// src/constants/index.ts
|
|
121
|
+
var MESSAGE_ICONS = {
|
|
122
|
+
[OMessageType.Error]: "error",
|
|
123
|
+
[OMessageType.Info]: "info",
|
|
124
|
+
[OMessageType.Success]: "check_circle",
|
|
125
|
+
[OMessageType.Warning]: "warning"
|
|
126
|
+
};
|
|
127
|
+
|
|
307
128
|
// src/Message.styled.ts
|
|
129
|
+
import styled from "@emotion/styled";
|
|
308
130
|
var MessageStyled = styled.div`
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
131
|
+
display: grid;
|
|
132
|
+
width: 100%;
|
|
133
|
+
padding: ${({ theme }) => `${theme.spacing.spacing_40} ${theme.spacing.spacing_50}`};
|
|
134
|
+
border-radius: ${({ theme }) => theme.shape.message};
|
|
135
|
+
|
|
136
|
+
${({ theme, messageType, orientation }) => {
|
|
137
|
+
const isDefault = messageType === OMessageType.Default;
|
|
138
|
+
const background = isDefault ? theme.palette.surface.light : theme.palette[messageType].light;
|
|
139
|
+
const border = isDefault ? theme.palette.border.medium : theme.palette[messageType].default;
|
|
140
|
+
const baseGrid = `
|
|
141
|
+
grid-template-columns: ${isDefault ? "1fr fit-content(100%)" : "fit-content(100%) 1fr fit-content(100%)"};
|
|
142
|
+
background-color: ${background};
|
|
143
|
+
border: 1px solid ${border};
|
|
144
|
+
gap: ${theme.spacing.spacing_50}
|
|
145
|
+
`;
|
|
146
|
+
if (orientation === "vertical") {
|
|
147
|
+
return `
|
|
148
|
+
${baseGrid};
|
|
149
|
+
grid-template-columns: 1fr fit-content(100%);
|
|
150
|
+
gap: ${theme.spacing.spacing_30};
|
|
151
|
+
|
|
152
|
+
& > :nth-child(1) {
|
|
153
|
+
grid-column: 1;
|
|
154
|
+
grid-row: 1;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
${isDefault ? `
|
|
158
|
+
& > :nth-child(2) {
|
|
159
|
+
grid-column: 2;
|
|
160
|
+
grid-row: 1;
|
|
161
|
+
}
|
|
162
|
+
` : `
|
|
163
|
+
& > :nth-child(2) {
|
|
164
|
+
grid-column: 1;
|
|
165
|
+
grid-row: 2;
|
|
166
|
+
}
|
|
167
|
+
& > :nth-child(3) {
|
|
168
|
+
grid-column: 2;
|
|
169
|
+
grid-row: 1;
|
|
170
|
+
}
|
|
171
|
+
`}
|
|
172
|
+
`;
|
|
173
|
+
}
|
|
174
|
+
return baseGrid;
|
|
175
|
+
}}
|
|
335
176
|
`;
|
|
336
|
-
var
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
177
|
+
var MessageActionsStyled = styled.div`
|
|
178
|
+
display: flex;
|
|
179
|
+
flex-direction: row;
|
|
180
|
+
gap: ${({ theme }) => theme.spacing.spacing_20};
|
|
181
|
+
|
|
182
|
+
button {
|
|
183
|
+
${({ theme, messageType }) => {
|
|
184
|
+
const isDefault = messageType === "default";
|
|
185
|
+
const color = isDefault ? theme.palette.content.default : theme.palette[messageType].dark;
|
|
186
|
+
const hoverBg = isDefault ? theme.palette.surface.medium : theme.palette[messageType].medium;
|
|
187
|
+
return `
|
|
188
|
+
color: ${color};
|
|
189
|
+
|
|
190
|
+
&:hover {
|
|
191
|
+
background-color: ${hoverBg};
|
|
192
|
+
color: ${color};
|
|
193
|
+
}
|
|
194
|
+
`;
|
|
195
|
+
}}
|
|
196
|
+
}
|
|
342
197
|
`;
|
|
343
198
|
var MessageButtonCloseStyled = styled.button`
|
|
344
|
-
${({ theme }) => `
|
|
345
|
-
color: ${theme.palette.content.default};
|
|
199
|
+
${({ theme, messageType, orientation }) => `
|
|
346
200
|
border: 0;
|
|
347
201
|
cursor: pointer;
|
|
348
202
|
background: transparent;
|
|
349
203
|
display: flex;
|
|
204
|
+
height: fit-content;
|
|
205
|
+
|
|
206
|
+
${orientation === "horizontal" && "align-self: center"};
|
|
350
207
|
|
|
208
|
+
&:focus-visible {
|
|
209
|
+
outline: 2px solid ${theme.palette.primary.default};
|
|
210
|
+
outline-offset: 1px;
|
|
211
|
+
}
|
|
212
|
+
|
|
351
213
|
&:hover {
|
|
352
|
-
background-color: ${theme.palette.surface.
|
|
214
|
+
background-color: ${messageType === OMessageType.Default ? theme.palette.surface.medium : theme.palette[messageType].medium};
|
|
353
215
|
}
|
|
354
216
|
`}
|
|
355
217
|
`;
|
|
356
218
|
|
|
357
219
|
// src/Message.tsx
|
|
358
|
-
import { jsx
|
|
359
|
-
var MessageIcons = {
|
|
360
|
-
[OMessageType.Error]: Error_default,
|
|
361
|
-
[OMessageType.Info]: Info_default,
|
|
362
|
-
[OMessageType.Success]: CheckCircle_default,
|
|
363
|
-
[OMessageType.Warning]: Warning_default,
|
|
364
|
-
[OMessageType.Default]: null
|
|
365
|
-
};
|
|
220
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
366
221
|
var Message = ({
|
|
367
222
|
children,
|
|
368
223
|
dataTestId,
|
|
369
224
|
style,
|
|
370
225
|
type = OMessageType.Default,
|
|
371
|
-
onClose
|
|
226
|
+
onClose,
|
|
227
|
+
description,
|
|
228
|
+
title,
|
|
229
|
+
orientation = "horizontal"
|
|
372
230
|
}) => {
|
|
373
|
-
const
|
|
374
|
-
const
|
|
375
|
-
|
|
231
|
+
const theme = useTheme();
|
|
232
|
+
const isDefault = type === OMessageType.Default;
|
|
233
|
+
const isHorizontal = orientation === "horizontal";
|
|
234
|
+
const isDismissible = !!onClose;
|
|
235
|
+
const textColor = isDefault ? "content.default" : `${type}.dark`;
|
|
236
|
+
const iconColor = isDefault ? theme.palette.content.default : theme.palette[type].dark;
|
|
237
|
+
const clonedChildren = useMemo(
|
|
238
|
+
() => Children.map(children, (child) => {
|
|
239
|
+
return child && cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
|
|
240
|
+
type
|
|
241
|
+
}));
|
|
242
|
+
}),
|
|
243
|
+
[children, type]
|
|
244
|
+
);
|
|
245
|
+
return /* @__PURE__ */ jsxs(
|
|
376
246
|
MessageStyled,
|
|
377
247
|
{
|
|
378
248
|
"data-testid": dataTestId != null ? dataTestId : "message",
|
|
249
|
+
messageType: type,
|
|
250
|
+
orientation,
|
|
379
251
|
style,
|
|
380
|
-
type,
|
|
381
252
|
children: [
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
253
|
+
!isDefault && /* @__PURE__ */ jsx(
|
|
254
|
+
Icon,
|
|
255
|
+
{
|
|
256
|
+
code: MESSAGE_ICONS[type],
|
|
257
|
+
color: theme.palette[type].dark,
|
|
258
|
+
"data-testid": "message-icon",
|
|
259
|
+
dataTestId: "message-icon"
|
|
260
|
+
}
|
|
261
|
+
),
|
|
262
|
+
/* @__PURE__ */ jsxs(
|
|
263
|
+
import_react_box.Box,
|
|
264
|
+
{
|
|
265
|
+
dataTestId: "message-content",
|
|
266
|
+
style: {
|
|
267
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
268
|
+
justifyContent: "space-between",
|
|
269
|
+
gap: isHorizontal ? theme.spacing.spacing_30 : theme.spacing.spacing_50,
|
|
270
|
+
alignItems: isHorizontal ? "center" : "start"
|
|
271
|
+
},
|
|
272
|
+
children: [
|
|
273
|
+
/* @__PURE__ */ jsxs(import_react_box.Box, { style: { alignItems: "flex-start" }, children: [
|
|
274
|
+
title ? /* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
|
|
275
|
+
/* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
|
|
276
|
+
] }),
|
|
277
|
+
clonedChildren
|
|
278
|
+
]
|
|
279
|
+
}
|
|
280
|
+
),
|
|
281
|
+
isDismissible ? /* @__PURE__ */ jsx(
|
|
282
|
+
MessageButtonCloseStyled,
|
|
283
|
+
{
|
|
284
|
+
"aria-label": "Close message",
|
|
285
|
+
messageType: type,
|
|
286
|
+
onClick: onClose,
|
|
287
|
+
orientation,
|
|
288
|
+
children: /* @__PURE__ */ jsx(Icon, { code: "close", color: iconColor })
|
|
289
|
+
}
|
|
290
|
+
) : null
|
|
385
291
|
]
|
|
386
292
|
}
|
|
387
293
|
);
|
|
388
294
|
};
|
|
389
|
-
Message.
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
295
|
+
Message.Actions = ({ children, dataTestId, type }) => /* @__PURE__ */ jsx(
|
|
296
|
+
MessageActionsStyled,
|
|
297
|
+
{
|
|
298
|
+
"data-testid": dataTestId != null ? dataTestId : "message-actions",
|
|
299
|
+
messageType: type,
|
|
300
|
+
children
|
|
301
|
+
}
|
|
302
|
+
);
|
|
396
303
|
export {
|
|
397
|
-
Message
|
|
398
|
-
MessageIcons
|
|
304
|
+
Message
|
|
399
305
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dt-dds/react-message",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.90",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./dist/index.js"
|
|
@@ -20,9 +20,10 @@
|
|
|
20
20
|
"test:update:snapshot": "jest -u"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
+
"@dt-dds/react-button": "1.0.0-beta.74",
|
|
23
24
|
"@dt-dds/react-core": "1.0.0-beta.50",
|
|
25
|
+
"@dt-dds/react-icon": "1.0.0-beta.51",
|
|
24
26
|
"@dt-dds/react-typography": "1.0.0-beta.41",
|
|
25
|
-
"@dt-dds/react-link": "1.0.0-beta.49",
|
|
26
27
|
"@dt-dds/themes": "1.0.0-beta.9"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|