@itcase/storybook-config 1.2.40 → 1.2.42
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/README.md +67 -0
- package/dist/{UIContext-7wI7giOz.js → Notification-BSc5Fd6Y.js} +619 -269
- package/dist/{UIContext-Xx74DZVi.js → Notification-Bk4P88mj.js} +633 -283
- package/dist/cjs/decorators/withNextDecorator.js +4 -5
- package/dist/cjs/decorators/withUiDecorator.js +4 -5
- package/dist/cjs/decorators.js +1 -2
- package/dist/decorators/withNextDecorator.js +2 -3
- package/dist/decorators/withUiDecorator.js +2 -3
- package/dist/decorators.js +1 -2
- package/package.json +38 -55
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import React__default, { useEffect, useContext, useState, useRef, createContext, useReducer, useCallback, isValidElement, cloneElement, memo, useMemo, useImperativeHandle } from 'react';
|
|
4
3
|
import camelCase from 'lodash/camelCase';
|
|
@@ -7,6 +6,432 @@ import upperFirst from 'lodash/upperFirst';
|
|
|
7
6
|
import { formatURL, axiosInstanceITCase } from '@itcase/common';
|
|
8
7
|
import maxBy from 'lodash/maxBy';
|
|
9
8
|
|
|
9
|
+
function getDefaultExportFromCjs (x) {
|
|
10
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
var jsxRuntime = {exports: {}};
|
|
14
|
+
|
|
15
|
+
var reactJsxRuntime_production = {};
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @license React
|
|
19
|
+
* react-jsx-runtime.production.js
|
|
20
|
+
*
|
|
21
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
22
|
+
*
|
|
23
|
+
* This source code is licensed under the MIT license found in the
|
|
24
|
+
* LICENSE file in the root directory of this source tree.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
var hasRequiredReactJsxRuntime_production;
|
|
28
|
+
|
|
29
|
+
function requireReactJsxRuntime_production () {
|
|
30
|
+
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
|
|
31
|
+
hasRequiredReactJsxRuntime_production = 1;
|
|
32
|
+
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
33
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
34
|
+
function jsxProd(type, config, maybeKey) {
|
|
35
|
+
var key = null;
|
|
36
|
+
void 0 !== maybeKey && (key = "" + maybeKey);
|
|
37
|
+
void 0 !== config.key && (key = "" + config.key);
|
|
38
|
+
if ("key" in config) {
|
|
39
|
+
maybeKey = {};
|
|
40
|
+
for (var propName in config)
|
|
41
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
42
|
+
} else maybeKey = config;
|
|
43
|
+
config = maybeKey.ref;
|
|
44
|
+
return {
|
|
45
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
46
|
+
type: type,
|
|
47
|
+
key: key,
|
|
48
|
+
ref: void 0 !== config ? config : null,
|
|
49
|
+
props: maybeKey
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
|
|
53
|
+
reactJsxRuntime_production.jsx = jsxProd;
|
|
54
|
+
reactJsxRuntime_production.jsxs = jsxProd;
|
|
55
|
+
return reactJsxRuntime_production;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
var reactJsxRuntime_development = {};
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* @license React
|
|
62
|
+
* react-jsx-runtime.development.js
|
|
63
|
+
*
|
|
64
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
65
|
+
*
|
|
66
|
+
* This source code is licensed under the MIT license found in the
|
|
67
|
+
* LICENSE file in the root directory of this source tree.
|
|
68
|
+
*/
|
|
69
|
+
|
|
70
|
+
var hasRequiredReactJsxRuntime_development;
|
|
71
|
+
|
|
72
|
+
function requireReactJsxRuntime_development () {
|
|
73
|
+
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
|
|
74
|
+
hasRequiredReactJsxRuntime_development = 1;
|
|
75
|
+
"production" !== process.env.NODE_ENV &&
|
|
76
|
+
(function () {
|
|
77
|
+
function getComponentNameFromType(type) {
|
|
78
|
+
if (null == type) return null;
|
|
79
|
+
if ("function" === typeof type)
|
|
80
|
+
return type.$$typeof === REACT_CLIENT_REFERENCE
|
|
81
|
+
? null
|
|
82
|
+
: type.displayName || type.name || null;
|
|
83
|
+
if ("string" === typeof type) return type;
|
|
84
|
+
switch (type) {
|
|
85
|
+
case REACT_FRAGMENT_TYPE:
|
|
86
|
+
return "Fragment";
|
|
87
|
+
case REACT_PROFILER_TYPE:
|
|
88
|
+
return "Profiler";
|
|
89
|
+
case REACT_STRICT_MODE_TYPE:
|
|
90
|
+
return "StrictMode";
|
|
91
|
+
case REACT_SUSPENSE_TYPE:
|
|
92
|
+
return "Suspense";
|
|
93
|
+
case REACT_SUSPENSE_LIST_TYPE:
|
|
94
|
+
return "SuspenseList";
|
|
95
|
+
case REACT_ACTIVITY_TYPE:
|
|
96
|
+
return "Activity";
|
|
97
|
+
}
|
|
98
|
+
if ("object" === typeof type)
|
|
99
|
+
switch (
|
|
100
|
+
("number" === typeof type.tag &&
|
|
101
|
+
console.error(
|
|
102
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
103
|
+
),
|
|
104
|
+
type.$$typeof)
|
|
105
|
+
) {
|
|
106
|
+
case REACT_PORTAL_TYPE:
|
|
107
|
+
return "Portal";
|
|
108
|
+
case REACT_CONTEXT_TYPE:
|
|
109
|
+
return type.displayName || "Context";
|
|
110
|
+
case REACT_CONSUMER_TYPE:
|
|
111
|
+
return (type._context.displayName || "Context") + ".Consumer";
|
|
112
|
+
case REACT_FORWARD_REF_TYPE:
|
|
113
|
+
var innerType = type.render;
|
|
114
|
+
type = type.displayName;
|
|
115
|
+
type ||
|
|
116
|
+
((type = innerType.displayName || innerType.name || ""),
|
|
117
|
+
(type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
|
|
118
|
+
return type;
|
|
119
|
+
case REACT_MEMO_TYPE:
|
|
120
|
+
return (
|
|
121
|
+
(innerType = type.displayName || null),
|
|
122
|
+
null !== innerType
|
|
123
|
+
? innerType
|
|
124
|
+
: getComponentNameFromType(type.type) || "Memo"
|
|
125
|
+
);
|
|
126
|
+
case REACT_LAZY_TYPE:
|
|
127
|
+
innerType = type._payload;
|
|
128
|
+
type = type._init;
|
|
129
|
+
try {
|
|
130
|
+
return getComponentNameFromType(type(innerType));
|
|
131
|
+
} catch (x) {}
|
|
132
|
+
}
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
function testStringCoercion(value) {
|
|
136
|
+
return "" + value;
|
|
137
|
+
}
|
|
138
|
+
function checkKeyStringCoercion(value) {
|
|
139
|
+
try {
|
|
140
|
+
testStringCoercion(value);
|
|
141
|
+
var JSCompiler_inline_result = !1;
|
|
142
|
+
} catch (e) {
|
|
143
|
+
JSCompiler_inline_result = true;
|
|
144
|
+
}
|
|
145
|
+
if (JSCompiler_inline_result) {
|
|
146
|
+
JSCompiler_inline_result = console;
|
|
147
|
+
var JSCompiler_temp_const = JSCompiler_inline_result.error;
|
|
148
|
+
var JSCompiler_inline_result$jscomp$0 =
|
|
149
|
+
("function" === typeof Symbol &&
|
|
150
|
+
Symbol.toStringTag &&
|
|
151
|
+
value[Symbol.toStringTag]) ||
|
|
152
|
+
value.constructor.name ||
|
|
153
|
+
"Object";
|
|
154
|
+
JSCompiler_temp_const.call(
|
|
155
|
+
JSCompiler_inline_result,
|
|
156
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
157
|
+
JSCompiler_inline_result$jscomp$0
|
|
158
|
+
);
|
|
159
|
+
return testStringCoercion(value);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
function getTaskName(type) {
|
|
163
|
+
if (type === REACT_FRAGMENT_TYPE) return "<>";
|
|
164
|
+
if (
|
|
165
|
+
"object" === typeof type &&
|
|
166
|
+
null !== type &&
|
|
167
|
+
type.$$typeof === REACT_LAZY_TYPE
|
|
168
|
+
)
|
|
169
|
+
return "<...>";
|
|
170
|
+
try {
|
|
171
|
+
var name = getComponentNameFromType(type);
|
|
172
|
+
return name ? "<" + name + ">" : "<...>";
|
|
173
|
+
} catch (x) {
|
|
174
|
+
return "<...>";
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
function getOwner() {
|
|
178
|
+
var dispatcher = ReactSharedInternals.A;
|
|
179
|
+
return null === dispatcher ? null : dispatcher.getOwner();
|
|
180
|
+
}
|
|
181
|
+
function UnknownOwner() {
|
|
182
|
+
return Error("react-stack-top-frame");
|
|
183
|
+
}
|
|
184
|
+
function hasValidKey(config) {
|
|
185
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
186
|
+
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
187
|
+
if (getter && getter.isReactWarning) return false;
|
|
188
|
+
}
|
|
189
|
+
return void 0 !== config.key;
|
|
190
|
+
}
|
|
191
|
+
function defineKeyPropWarningGetter(props, displayName) {
|
|
192
|
+
function warnAboutAccessingKey() {
|
|
193
|
+
specialPropKeyWarningShown ||
|
|
194
|
+
((specialPropKeyWarningShown = true),
|
|
195
|
+
console.error(
|
|
196
|
+
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
197
|
+
displayName
|
|
198
|
+
));
|
|
199
|
+
}
|
|
200
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
201
|
+
Object.defineProperty(props, "key", {
|
|
202
|
+
get: warnAboutAccessingKey,
|
|
203
|
+
configurable: true
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
function elementRefGetterWithDeprecationWarning() {
|
|
207
|
+
var componentName = getComponentNameFromType(this.type);
|
|
208
|
+
didWarnAboutElementRef[componentName] ||
|
|
209
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
210
|
+
console.error(
|
|
211
|
+
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
212
|
+
));
|
|
213
|
+
componentName = this.props.ref;
|
|
214
|
+
return void 0 !== componentName ? componentName : null;
|
|
215
|
+
}
|
|
216
|
+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
|
|
217
|
+
var refProp = props.ref;
|
|
218
|
+
type = {
|
|
219
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
220
|
+
type: type,
|
|
221
|
+
key: key,
|
|
222
|
+
props: props,
|
|
223
|
+
_owner: owner
|
|
224
|
+
};
|
|
225
|
+
null !== (void 0 !== refProp ? refProp : null)
|
|
226
|
+
? Object.defineProperty(type, "ref", {
|
|
227
|
+
enumerable: false,
|
|
228
|
+
get: elementRefGetterWithDeprecationWarning
|
|
229
|
+
})
|
|
230
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
231
|
+
type._store = {};
|
|
232
|
+
Object.defineProperty(type._store, "validated", {
|
|
233
|
+
configurable: false,
|
|
234
|
+
enumerable: false,
|
|
235
|
+
writable: true,
|
|
236
|
+
value: 0
|
|
237
|
+
});
|
|
238
|
+
Object.defineProperty(type, "_debugInfo", {
|
|
239
|
+
configurable: false,
|
|
240
|
+
enumerable: false,
|
|
241
|
+
writable: true,
|
|
242
|
+
value: null
|
|
243
|
+
});
|
|
244
|
+
Object.defineProperty(type, "_debugStack", {
|
|
245
|
+
configurable: false,
|
|
246
|
+
enumerable: false,
|
|
247
|
+
writable: true,
|
|
248
|
+
value: debugStack
|
|
249
|
+
});
|
|
250
|
+
Object.defineProperty(type, "_debugTask", {
|
|
251
|
+
configurable: false,
|
|
252
|
+
enumerable: false,
|
|
253
|
+
writable: true,
|
|
254
|
+
value: debugTask
|
|
255
|
+
});
|
|
256
|
+
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
257
|
+
return type;
|
|
258
|
+
}
|
|
259
|
+
function jsxDEVImpl(
|
|
260
|
+
type,
|
|
261
|
+
config,
|
|
262
|
+
maybeKey,
|
|
263
|
+
isStaticChildren,
|
|
264
|
+
debugStack,
|
|
265
|
+
debugTask
|
|
266
|
+
) {
|
|
267
|
+
var children = config.children;
|
|
268
|
+
if (void 0 !== children)
|
|
269
|
+
if (isStaticChildren)
|
|
270
|
+
if (isArrayImpl(children)) {
|
|
271
|
+
for (
|
|
272
|
+
isStaticChildren = 0;
|
|
273
|
+
isStaticChildren < children.length;
|
|
274
|
+
isStaticChildren++
|
|
275
|
+
)
|
|
276
|
+
validateChildKeys(children[isStaticChildren]);
|
|
277
|
+
Object.freeze && Object.freeze(children);
|
|
278
|
+
} else
|
|
279
|
+
console.error(
|
|
280
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
281
|
+
);
|
|
282
|
+
else validateChildKeys(children);
|
|
283
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
284
|
+
children = getComponentNameFromType(type);
|
|
285
|
+
var keys = Object.keys(config).filter(function (k) {
|
|
286
|
+
return "key" !== k;
|
|
287
|
+
});
|
|
288
|
+
isStaticChildren =
|
|
289
|
+
0 < keys.length
|
|
290
|
+
? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
|
|
291
|
+
: "{key: someKey}";
|
|
292
|
+
didWarnAboutKeySpread[children + isStaticChildren] ||
|
|
293
|
+
((keys =
|
|
294
|
+
0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
|
|
295
|
+
console.error(
|
|
296
|
+
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
|
|
297
|
+
isStaticChildren,
|
|
298
|
+
children,
|
|
299
|
+
keys,
|
|
300
|
+
children
|
|
301
|
+
),
|
|
302
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
303
|
+
}
|
|
304
|
+
children = null;
|
|
305
|
+
void 0 !== maybeKey &&
|
|
306
|
+
(checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
|
|
307
|
+
hasValidKey(config) &&
|
|
308
|
+
(checkKeyStringCoercion(config.key), (children = "" + config.key));
|
|
309
|
+
if ("key" in config) {
|
|
310
|
+
maybeKey = {};
|
|
311
|
+
for (var propName in config)
|
|
312
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
313
|
+
} else maybeKey = config;
|
|
314
|
+
children &&
|
|
315
|
+
defineKeyPropWarningGetter(
|
|
316
|
+
maybeKey,
|
|
317
|
+
"function" === typeof type
|
|
318
|
+
? type.displayName || type.name || "Unknown"
|
|
319
|
+
: type
|
|
320
|
+
);
|
|
321
|
+
return ReactElement(
|
|
322
|
+
type,
|
|
323
|
+
children,
|
|
324
|
+
maybeKey,
|
|
325
|
+
getOwner(),
|
|
326
|
+
debugStack,
|
|
327
|
+
debugTask
|
|
328
|
+
);
|
|
329
|
+
}
|
|
330
|
+
function validateChildKeys(node) {
|
|
331
|
+
isValidElement(node)
|
|
332
|
+
? node._store && (node._store.validated = 1)
|
|
333
|
+
: "object" === typeof node &&
|
|
334
|
+
null !== node &&
|
|
335
|
+
node.$$typeof === REACT_LAZY_TYPE &&
|
|
336
|
+
("fulfilled" === node._payload.status
|
|
337
|
+
? isValidElement(node._payload.value) &&
|
|
338
|
+
node._payload.value._store &&
|
|
339
|
+
(node._payload.value._store.validated = 1)
|
|
340
|
+
: node._store && (node._store.validated = 1));
|
|
341
|
+
}
|
|
342
|
+
function isValidElement(object) {
|
|
343
|
+
return (
|
|
344
|
+
"object" === typeof object &&
|
|
345
|
+
null !== object &&
|
|
346
|
+
object.$$typeof === REACT_ELEMENT_TYPE
|
|
347
|
+
);
|
|
348
|
+
}
|
|
349
|
+
var React = React__default,
|
|
350
|
+
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
351
|
+
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
352
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
353
|
+
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
|
|
354
|
+
REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
|
|
355
|
+
REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
|
|
356
|
+
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
|
|
357
|
+
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
|
|
358
|
+
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
|
|
359
|
+
REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
|
|
360
|
+
REACT_MEMO_TYPE = Symbol.for("react.memo"),
|
|
361
|
+
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
|
|
362
|
+
REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
|
|
363
|
+
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
|
|
364
|
+
ReactSharedInternals =
|
|
365
|
+
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
|
|
366
|
+
hasOwnProperty = Object.prototype.hasOwnProperty,
|
|
367
|
+
isArrayImpl = Array.isArray,
|
|
368
|
+
createTask = console.createTask
|
|
369
|
+
? console.createTask
|
|
370
|
+
: function () {
|
|
371
|
+
return null;
|
|
372
|
+
};
|
|
373
|
+
React = {
|
|
374
|
+
react_stack_bottom_frame: function (callStackForError) {
|
|
375
|
+
return callStackForError();
|
|
376
|
+
}
|
|
377
|
+
};
|
|
378
|
+
var specialPropKeyWarningShown;
|
|
379
|
+
var didWarnAboutElementRef = {};
|
|
380
|
+
var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
|
|
381
|
+
React,
|
|
382
|
+
UnknownOwner
|
|
383
|
+
)();
|
|
384
|
+
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
|
|
385
|
+
var didWarnAboutKeySpread = {};
|
|
386
|
+
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
|
|
387
|
+
reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
|
|
388
|
+
var trackActualOwner =
|
|
389
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
390
|
+
return jsxDEVImpl(
|
|
391
|
+
type,
|
|
392
|
+
config,
|
|
393
|
+
maybeKey,
|
|
394
|
+
false,
|
|
395
|
+
trackActualOwner
|
|
396
|
+
? Error("react-stack-top-frame")
|
|
397
|
+
: unknownOwnerDebugStack,
|
|
398
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
399
|
+
);
|
|
400
|
+
};
|
|
401
|
+
reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
|
|
402
|
+
var trackActualOwner =
|
|
403
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
404
|
+
return jsxDEVImpl(
|
|
405
|
+
type,
|
|
406
|
+
config,
|
|
407
|
+
maybeKey,
|
|
408
|
+
true,
|
|
409
|
+
trackActualOwner
|
|
410
|
+
? Error("react-stack-top-frame")
|
|
411
|
+
: unknownOwnerDebugStack,
|
|
412
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
413
|
+
);
|
|
414
|
+
};
|
|
415
|
+
})();
|
|
416
|
+
return reactJsxRuntime_development;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
var hasRequiredJsxRuntime;
|
|
420
|
+
|
|
421
|
+
function requireJsxRuntime () {
|
|
422
|
+
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
|
|
423
|
+
hasRequiredJsxRuntime = 1;
|
|
424
|
+
|
|
425
|
+
if (process.env.NODE_ENV === 'production') {
|
|
426
|
+
jsxRuntime.exports = requireReactJsxRuntime_production();
|
|
427
|
+
} else {
|
|
428
|
+
jsxRuntime.exports = requireReactJsxRuntime_development();
|
|
429
|
+
}
|
|
430
|
+
return jsxRuntime.exports;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
var jsxRuntimeExports = requireJsxRuntime();
|
|
434
|
+
|
|
10
435
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
11
436
|
|
|
12
437
|
const byteToHex = [];
|
|
@@ -68,10 +493,6 @@ function v4(options, buf, offset) {
|
|
|
68
493
|
return _v4(options);
|
|
69
494
|
}
|
|
70
495
|
|
|
71
|
-
function getDefaultExportFromCjs (x) {
|
|
72
|
-
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
496
|
var cssMediaquery = {};
|
|
76
497
|
|
|
77
498
|
/*
|
|
@@ -2852,24 +3273,185 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
|
|
|
2852
3273
|
return appearanceConfig;
|
|
2853
3274
|
};
|
|
2854
3275
|
|
|
2855
|
-
const STATUSES
|
|
3276
|
+
const STATUSES = {
|
|
2856
3277
|
error: 'error',
|
|
2857
3278
|
info: 'info',
|
|
2858
3279
|
success: 'success',
|
|
2859
3280
|
warning: 'warning',
|
|
2860
3281
|
};
|
|
2861
|
-
const NotificationsContext
|
|
3282
|
+
const NotificationsContext = createContext([]);
|
|
2862
3283
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
2863
|
-
const NotificationsAPIContext
|
|
3284
|
+
const NotificationsAPIContext = createContext({
|
|
2864
3285
|
hideNotifications: (targetId) => { },
|
|
2865
3286
|
showNotification: (notification, onClose) => { },
|
|
2866
|
-
notificationStatuses: STATUSES
|
|
3287
|
+
notificationStatuses: STATUSES,
|
|
2867
3288
|
});
|
|
3289
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
3290
|
+
function NotificationsProvider(props) {
|
|
3291
|
+
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
3292
|
+
const [notificationsList, setNotificationsList] = useState(() => {
|
|
3293
|
+
// We need to set id to every notification item and original list also be have new id's
|
|
3294
|
+
return (initialNotificationsList || []).map((notificationItem) => {
|
|
3295
|
+
return createNotification(notificationItem, notificationItem.onClose);
|
|
3296
|
+
});
|
|
3297
|
+
});
|
|
3298
|
+
const hideNotifications = useCallback((targetId) => {
|
|
3299
|
+
// If not target, then nothing to hide
|
|
3300
|
+
if (!targetId) {
|
|
3301
|
+
return;
|
|
3302
|
+
}
|
|
3303
|
+
setNotificationsList((prevNotificationsList) => {
|
|
3304
|
+
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
3305
|
+
// Check on need to hide, if current notification is target for hide
|
|
3306
|
+
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
3307
|
+
// Callback for close if exists
|
|
3308
|
+
if (isNeedToHide) {
|
|
3309
|
+
clearTimeout(notificationItem._closeTimeout);
|
|
3310
|
+
// @typescript-eslint/no-unused-expressions
|
|
3311
|
+
notificationItem.onClose && notificationItem.onClose();
|
|
3312
|
+
}
|
|
3313
|
+
// Save in state if no need to hide
|
|
3314
|
+
return !isNeedToHide;
|
|
3315
|
+
});
|
|
3316
|
+
// Set new notifications list without target item to state
|
|
3317
|
+
return newState;
|
|
3318
|
+
});
|
|
3319
|
+
}, []);
|
|
3320
|
+
const showNotification = useCallback((notification, onClose) => {
|
|
3321
|
+
const newNotificationItem = createNotification(notification, onClose);
|
|
3322
|
+
setNotificationsList((prevNotificationsList) => {
|
|
3323
|
+
const newState = prevNotificationsList.slice();
|
|
3324
|
+
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
3325
|
+
// Add new notification
|
|
3326
|
+
if (existsNotificationIndex === -1) {
|
|
3327
|
+
return [...newState, newNotificationItem];
|
|
3328
|
+
}
|
|
3329
|
+
// Or update exists notification
|
|
3330
|
+
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
3331
|
+
// Clear timeout to avoid close event for updated notification
|
|
3332
|
+
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
3333
|
+
updatedNotificationItem._closeTimeout = undefined;
|
|
3334
|
+
// Replace exists notification by new one
|
|
3335
|
+
newState[existsNotificationIndex] = newNotificationItem;
|
|
3336
|
+
return newState;
|
|
3337
|
+
});
|
|
3338
|
+
if (newNotificationItem.closeByTime) {
|
|
3339
|
+
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
3340
|
+
}
|
|
3341
|
+
return newNotificationItem;
|
|
3342
|
+
},
|
|
3343
|
+
// "hideNotifications" is never changed
|
|
3344
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3345
|
+
[]);
|
|
3346
|
+
const notificationsAPI = useMemo(() => ({
|
|
3347
|
+
hideNotifications: hideNotifications,
|
|
3348
|
+
notificationStatuses: STATUSES,
|
|
3349
|
+
showNotification: showNotification,
|
|
3350
|
+
}),
|
|
3351
|
+
// Functions is never changes, no sense to set as dependencies
|
|
3352
|
+
// eslint-disable-next-line
|
|
3353
|
+
[]);
|
|
3354
|
+
useEffect(() => {
|
|
3355
|
+
// Set timeout for initial notifications list one time on first render
|
|
3356
|
+
notificationsList.forEach((notificationItem) => {
|
|
3357
|
+
if (notificationItem.closeByTime) {
|
|
3358
|
+
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
3359
|
+
}
|
|
3360
|
+
});
|
|
3361
|
+
// Show notifications on all requests errors.
|
|
3362
|
+
// Enable one time without disabling. Use "isLogging" on request config level
|
|
3363
|
+
// to disable notifications logger.
|
|
3364
|
+
if (isLogRequestsErrors) {
|
|
3365
|
+
axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
3366
|
+
log: (responseError) => {
|
|
3367
|
+
if (responseError.message) {
|
|
3368
|
+
// prevent from showing many network errors
|
|
3369
|
+
const errorListToDedupe = ['network'];
|
|
3370
|
+
const id = errorListToDedupe.includes(responseError.key)
|
|
3371
|
+
? responseError.key
|
|
3372
|
+
: undefined;
|
|
3373
|
+
showNotification({
|
|
3374
|
+
id: id,
|
|
3375
|
+
title: responseError.message,
|
|
3376
|
+
status: 'error',
|
|
3377
|
+
closeByTime: 4000,
|
|
3378
|
+
});
|
|
3379
|
+
}
|
|
3380
|
+
},
|
|
3381
|
+
};
|
|
3382
|
+
}
|
|
3383
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3384
|
+
}, []);
|
|
3385
|
+
return (jsxRuntimeExports.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntimeExports.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
3386
|
+
}
|
|
2868
3387
|
function useNotifications() {
|
|
2869
|
-
return useContext(NotificationsContext
|
|
3388
|
+
return useContext(NotificationsContext);
|
|
2870
3389
|
}
|
|
2871
3390
|
function useNotificationsAPI() {
|
|
2872
|
-
return useContext(NotificationsAPIContext
|
|
3391
|
+
return useContext(NotificationsAPIContext);
|
|
3392
|
+
}
|
|
3393
|
+
const statusToAppearanceList = {
|
|
3394
|
+
error: 'errorPrimary sizeS solid rounded',
|
|
3395
|
+
info: 'infoPrimary sizeS solid rounded',
|
|
3396
|
+
success: 'successPrimary sizeS solid rounded',
|
|
3397
|
+
warning: 'warningPrimary sizeS solid rounded',
|
|
3398
|
+
};
|
|
3399
|
+
function createNotification(notification, onClose) {
|
|
3400
|
+
// Default notification item properties
|
|
3401
|
+
let id = v4().split('-')[0];
|
|
3402
|
+
let title = '';
|
|
3403
|
+
let text = '';
|
|
3404
|
+
let closeIcon = '';
|
|
3405
|
+
let closeIconSrc = '';
|
|
3406
|
+
let type = 'float';
|
|
3407
|
+
let buttonLabel = '';
|
|
3408
|
+
let status = STATUSES.warning;
|
|
3409
|
+
let closeByTime = 4500;
|
|
3410
|
+
let appearance = statusToAppearanceList[status];
|
|
3411
|
+
let after = null;
|
|
3412
|
+
let isLoading = false;
|
|
3413
|
+
let closeIconAppearance = '';
|
|
3414
|
+
let onClickButton = () => { };
|
|
3415
|
+
if (typeof notification === 'string') {
|
|
3416
|
+
text = notification;
|
|
3417
|
+
}
|
|
3418
|
+
else if (typeof notification === 'object') {
|
|
3419
|
+
id = String(notification.id ?? id);
|
|
3420
|
+
title = notification.title ?? title;
|
|
3421
|
+
text = notification.text ?? text;
|
|
3422
|
+
closeIconAppearance =
|
|
3423
|
+
notification.closeIconAppearance ?? closeIconAppearance;
|
|
3424
|
+
type = notification.type ?? type;
|
|
3425
|
+
closeIcon = notification.closeIcon ?? closeIcon;
|
|
3426
|
+
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
3427
|
+
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
3428
|
+
onClickButton = notification.onClickButton ?? onClickButton;
|
|
3429
|
+
status = notification.status ?? status;
|
|
3430
|
+
closeByTime = notification.closeByTime ?? closeByTime;
|
|
3431
|
+
isLoading = notification.isLoading ?? isLoading;
|
|
3432
|
+
after = notification.after ?? after;
|
|
3433
|
+
appearance =
|
|
3434
|
+
notification.appearance ??
|
|
3435
|
+
statusToAppearanceList[notification.status] ??
|
|
3436
|
+
appearance;
|
|
3437
|
+
}
|
|
3438
|
+
return {
|
|
3439
|
+
id: id,
|
|
3440
|
+
appearance: appearance,
|
|
3441
|
+
type: type,
|
|
3442
|
+
title: title,
|
|
3443
|
+
status: status,
|
|
3444
|
+
text: text,
|
|
3445
|
+
buttonLabel: buttonLabel,
|
|
3446
|
+
after: after,
|
|
3447
|
+
closeByTime: closeByTime,
|
|
3448
|
+
closeIcon: closeIcon,
|
|
3449
|
+
closeIconAppearance: closeIconAppearance,
|
|
3450
|
+
closeIconSrc: closeIconSrc,
|
|
3451
|
+
isLoading: isLoading,
|
|
3452
|
+
onClickButton: onClickButton,
|
|
3453
|
+
onClose: onClose,
|
|
3454
|
+
};
|
|
2873
3455
|
}
|
|
2874
3456
|
|
|
2875
3457
|
var tablet = "48em";
|
|
@@ -3007,7 +3589,7 @@ const setViewportProperty = () => {
|
|
|
3007
3589
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
3008
3590
|
};
|
|
3009
3591
|
|
|
3010
|
-
const UserDeviceContext
|
|
3592
|
+
const UserDeviceContext = createContext({
|
|
3011
3593
|
isMobile: false,
|
|
3012
3594
|
isTablet: false,
|
|
3013
3595
|
isDesktop: false,
|
|
@@ -3015,7 +3597,7 @@ const UserDeviceContext$1 = createContext({
|
|
|
3015
3597
|
deviceCurrentType: '',
|
|
3016
3598
|
deviceTypesList: [],
|
|
3017
3599
|
});
|
|
3018
|
-
memo(function UIProvider(props) {
|
|
3600
|
+
const UIProvider = memo(function UIProvider(props) {
|
|
3019
3601
|
const { userDeviceState = {}, children } = props;
|
|
3020
3602
|
/** NOTE:
|
|
3021
3603
|
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
@@ -3061,10 +3643,10 @@ memo(function UIProvider(props) {
|
|
|
3061
3643
|
setViewportProperty();
|
|
3062
3644
|
window.addEventListener('resize', setViewportProperty);
|
|
3063
3645
|
}, []);
|
|
3064
|
-
return (jsx(UserDeviceContext
|
|
3646
|
+
return (jsxRuntimeExports.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
|
|
3065
3647
|
});
|
|
3066
3648
|
function useUserDeviceContext() {
|
|
3067
|
-
const context = useContext(UserDeviceContext
|
|
3649
|
+
const context = useContext(UserDeviceContext);
|
|
3068
3650
|
if (!context) {
|
|
3069
3651
|
throw new Error('useUserDeviceContext is not defined');
|
|
3070
3652
|
}
|
|
@@ -3456,7 +4038,7 @@ function useStyles(props) {
|
|
|
3456
4038
|
}
|
|
3457
4039
|
else {
|
|
3458
4040
|
// Some properties doesn't have any units
|
|
3459
|
-
const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
|
|
4041
|
+
const ignorePX = ['zIndex', 'order', 'flexGrow', 'opacity'].includes(styleAttributeKey);
|
|
3460
4042
|
if (!ignorePX) {
|
|
3461
4043
|
// Add px to non-unit value
|
|
3462
4044
|
value = `${value}px`;
|
|
@@ -3581,7 +4163,7 @@ function Text(props) {
|
|
|
3581
4163
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
3582
4164
|
const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
|
|
3583
4165
|
const { styles: textStyles } = useStyles(props);
|
|
3584
|
-
return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
|
|
4166
|
+
return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
|
|
3585
4167
|
textColorDisabledClass &&
|
|
3586
4168
|
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
3587
4169
|
!isDisabled &&
|
|
@@ -3850,8 +4432,8 @@ function Badge(props) {
|
|
|
3850
4432
|
: dot
|
|
3851
4433
|
? 'badge_type_dot'
|
|
3852
4434
|
: 'badge_type_fill';
|
|
3853
|
-
return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
|
|
3854
|
-
(value && (jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
|
|
4435
|
+
return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: badgeStyles, children: [dot && (jsxRuntimeExports.jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsxRuntimeExports.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntimeExports.jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
|
|
4436
|
+
(value && (jsxRuntimeExports.jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
|
|
3855
4437
|
}
|
|
3856
4438
|
|
|
3857
4439
|
const linkConfig = {
|
|
@@ -3861,11 +4443,11 @@ function LinkWrapper(props) {
|
|
|
3861
4443
|
if (href) {
|
|
3862
4444
|
const Component = LinkComponent || linkConfig.LinkComponent;
|
|
3863
4445
|
{
|
|
3864
|
-
return (jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
|
|
4446
|
+
return (jsxRuntimeExports.jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
|
|
3865
4447
|
}
|
|
3866
4448
|
}
|
|
3867
4449
|
else if (LinkComponent) {
|
|
3868
|
-
return jsx(LinkComponent, { ...otherProps, children: children });
|
|
4450
|
+
return jsxRuntimeExports.jsx(LinkComponent, { ...otherProps, children: children });
|
|
3869
4451
|
}
|
|
3870
4452
|
return React__default.Children.toArray(children)
|
|
3871
4453
|
.filter(Boolean)
|
|
@@ -4082,7 +4664,7 @@ function Title(props) {
|
|
|
4082
4664
|
}
|
|
4083
4665
|
return size ? size : 'span';
|
|
4084
4666
|
}, [tag, size]);
|
|
4085
|
-
return (jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
|
|
4667
|
+
return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
|
|
4086
4668
|
textColorDisabledClass &&
|
|
4087
4669
|
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
4088
4670
|
!isDisabled &&
|
|
@@ -4096,7 +4678,7 @@ function Title(props) {
|
|
|
4096
4678
|
`text-color_hover_${textColorHoverClass}`, isActive &&
|
|
4097
4679
|
!isDisabled &&
|
|
4098
4680
|
textColorActiveHoverClass &&
|
|
4099
|
-
`text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, onClick: onClickIconAfter }))] }), after] }));
|
|
4681
|
+
`text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxRuntimeExports.jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntimeExports.jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsxRuntimeExports.jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, onClick: onClickIconAfter }))] }), after] }));
|
|
4100
4682
|
}
|
|
4101
4683
|
|
|
4102
4684
|
const tooltipAppearanceDefault = {
|
|
@@ -4264,11 +4846,11 @@ const Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
|
|
|
4264
4846
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4265
4847
|
const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
4266
4848
|
const { styles: tooltipStyles } = useStyles(props);
|
|
4267
|
-
return (jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
|
|
4849
|
+
return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
|
|
4268
4850
|
? isTooltipVisible
|
|
4269
4851
|
? 'tooltip_state_open'
|
|
4270
4852
|
: 'tooltip_state_close'
|
|
4271
|
-
: null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
|
|
4853
|
+
: null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntimeExports.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntimeExports.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntimeExports.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
|
|
4272
4854
|
});
|
|
4273
4855
|
|
|
4274
4856
|
const UrlAssetPrefixContext = createContext({
|
|
@@ -4311,7 +4893,7 @@ const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
|
|
|
4311
4893
|
}
|
|
4312
4894
|
return resultProps;
|
|
4313
4895
|
}, {});
|
|
4314
|
-
return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
4896
|
+
return jsxRuntimeExports.jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
4315
4897
|
});
|
|
4316
4898
|
return HOC;
|
|
4317
4899
|
};
|
|
@@ -4713,16 +5295,16 @@ const Icon = urlWithAssetPrefix(React__default.forwardRef(function Icon(props, r
|
|
|
4713
5295
|
if (height) {
|
|
4714
5296
|
sizes.height = height;
|
|
4715
5297
|
}
|
|
4716
|
-
return jsx(SvgComponent, { ...sizes });
|
|
5298
|
+
return jsxRuntimeExports.jsx(SvgComponent, { ...sizes });
|
|
4717
5299
|
}
|
|
4718
5300
|
if (imageSrc) {
|
|
4719
5301
|
if (imageSrc.endsWith('.svg')) {
|
|
4720
5302
|
if (saveFillStroke) {
|
|
4721
|
-
return jsx(InlineSVG, { src: imageSrc });
|
|
5303
|
+
return jsxRuntimeExports.jsx(InlineSVG, { src: imageSrc });
|
|
4722
5304
|
}
|
|
4723
|
-
return jsx(InlineSVG, { src: imageSrc, preProcessor: removeFillStroke });
|
|
5305
|
+
return jsxRuntimeExports.jsx(InlineSVG, { src: imageSrc, preProcessor: removeFillStroke });
|
|
4724
5306
|
}
|
|
4725
|
-
return jsx("img", { src: imageSrc });
|
|
5307
|
+
return jsxRuntimeExports.jsx("img", { src: imageSrc });
|
|
4726
5308
|
}
|
|
4727
5309
|
return null;
|
|
4728
5310
|
}, [SvgImage, imageSrc, width, height, saveFillStroke]);
|
|
@@ -4730,7 +5312,7 @@ const Icon = urlWithAssetPrefix(React__default.forwardRef(function Icon(props, r
|
|
|
4730
5312
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4731
5313
|
const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
|
|
4732
5314
|
const { styles: iconStyles } = useStyles(props);
|
|
4733
|
-
return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
5315
|
+
return (jsxRuntimeExports.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
4734
5316
|
? fillClass && `fill_${fillClass}`
|
|
4735
5317
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
4736
5318
|
? fillHoverClass && `fill_hover_${fillHoverClass}`
|
|
@@ -4743,7 +5325,7 @@ const Icon = urlWithAssetPrefix(React__default.forwardRef(function Icon(props, r
|
|
|
4743
5325
|
`icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
|
|
4744
5326
|
iconFillDisabledClass &&
|
|
4745
5327
|
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
4746
|
-
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
5328
|
+
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntimeExports.jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntimeExports.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
4747
5329
|
}));
|
|
4748
5330
|
const removeFillStroke = (code) => {
|
|
4749
5331
|
return code
|
|
@@ -4889,7 +5471,7 @@ function Loader(props) {
|
|
|
4889
5471
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4890
5472
|
const { fillClass, borderColorClass, textColor, textSize, heightClass, itemFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
4891
5473
|
const { styles: loader } = useStyles(props);
|
|
4892
|
-
return (jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `loader_skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`, type === 'circular' && `border-color_${borderColorClass}`), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
5474
|
+
return (jsxRuntimeExports.jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `loader_skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (jsxRuntimeExports.jsxs("div", { className: "loader__inner", children: [jsxRuntimeExports.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`, type === 'circular' && `border-color_${borderColorClass}`), children: "\u00A0" }), jsxRuntimeExports.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsxRuntimeExports.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (jsxRuntimeExports.jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
4893
5475
|
}
|
|
4894
5476
|
|
|
4895
5477
|
const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
|
|
@@ -5338,13 +5920,13 @@ const Button = React__default.forwardRef(function Button(props, ref) {
|
|
|
5338
5920
|
iconBefore ||
|
|
5339
5921
|
iconBeforeSrc ||
|
|
5340
5922
|
iconSrc;
|
|
5341
|
-
return (jsxs(LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
|
|
5923
|
+
return (jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
|
|
5342
5924
|
? 'button_type_default'
|
|
5343
5925
|
: label
|
|
5344
5926
|
? 'button_type_label'
|
|
5345
5927
|
: buttonTypeClass
|
|
5346
5928
|
? 'button_type_icon'
|
|
5347
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: [isHolding && (jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] })] }));
|
|
5929
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: [isHolding && (jsxRuntimeExports.jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsxRuntimeExports.jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), jsxRuntimeExports.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntimeExports.jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntimeExports.jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntimeExports.jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntimeExports.jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntimeExports.jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] })] }));
|
|
5348
5930
|
});
|
|
5349
5931
|
|
|
5350
5932
|
var _path$3t;
|
|
@@ -5514,246 +6096,14 @@ function Notification(props) {
|
|
|
5514
6096
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
5515
6097
|
const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
|
|
5516
6098
|
const { styles: notificationStyles } = useStyles(props);
|
|
5517
|
-
return (jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), onClickButton && buttonLabel && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
|
|
6099
|
+
return (jsxRuntimeExports.jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntimeExports.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntimeExports.jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntimeExports.jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntimeExports.jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), onClickButton && buttonLabel && (jsxRuntimeExports.jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
|
|
5518
6100
|
}
|
|
5519
6101
|
|
|
5520
6102
|
function NotificationWrapper(props) {
|
|
5521
6103
|
const notifications = useNotifications();
|
|
5522
6104
|
const { hideNotifications } = useNotificationsAPI();
|
|
5523
6105
|
const { className, dataTestId, dataTour } = props;
|
|
5524
|
-
return (jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
|
|
5525
|
-
}
|
|
5526
|
-
|
|
5527
|
-
const STATUSES = {
|
|
5528
|
-
error: 'error',
|
|
5529
|
-
info: 'info',
|
|
5530
|
-
success: 'success',
|
|
5531
|
-
warning: 'warning',
|
|
5532
|
-
};
|
|
5533
|
-
const NotificationsContext = createContext([]);
|
|
5534
|
-
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
5535
|
-
const NotificationsAPIContext = createContext({
|
|
5536
|
-
hideNotifications: (targetId) => { },
|
|
5537
|
-
showNotification: (notification, onClose) => { },
|
|
5538
|
-
notificationStatuses: STATUSES,
|
|
5539
|
-
});
|
|
5540
|
-
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
5541
|
-
function NotificationsProvider(props) {
|
|
5542
|
-
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
5543
|
-
const [notificationsList, setNotificationsList] = useState(() => {
|
|
5544
|
-
// We need to set id to every notification item and original list also be have new id's
|
|
5545
|
-
return (initialNotificationsList || []).map((notificationItem) => {
|
|
5546
|
-
return createNotification(notificationItem, notificationItem.onClose);
|
|
5547
|
-
});
|
|
5548
|
-
});
|
|
5549
|
-
const hideNotifications = useCallback((targetId) => {
|
|
5550
|
-
// If not target, then nothing to hide
|
|
5551
|
-
if (!targetId) {
|
|
5552
|
-
return;
|
|
5553
|
-
}
|
|
5554
|
-
setNotificationsList((prevNotificationsList) => {
|
|
5555
|
-
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
5556
|
-
// Check on need to hide, if current notification is target for hide
|
|
5557
|
-
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
5558
|
-
// Callback for close if exists
|
|
5559
|
-
if (isNeedToHide) {
|
|
5560
|
-
clearTimeout(notificationItem._closeTimeout);
|
|
5561
|
-
// @typescript-eslint/no-unused-expressions
|
|
5562
|
-
notificationItem.onClose && notificationItem.onClose();
|
|
5563
|
-
}
|
|
5564
|
-
// Save in state if no need to hide
|
|
5565
|
-
return !isNeedToHide;
|
|
5566
|
-
});
|
|
5567
|
-
// Set new notifications list without target item to state
|
|
5568
|
-
return newState;
|
|
5569
|
-
});
|
|
5570
|
-
}, []);
|
|
5571
|
-
const showNotification = useCallback((notification, onClose) => {
|
|
5572
|
-
const newNotificationItem = createNotification(notification, onClose);
|
|
5573
|
-
setNotificationsList((prevNotificationsList) => {
|
|
5574
|
-
const newState = prevNotificationsList.slice();
|
|
5575
|
-
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
5576
|
-
// Add new notification
|
|
5577
|
-
if (existsNotificationIndex === -1) {
|
|
5578
|
-
return [...newState, newNotificationItem];
|
|
5579
|
-
}
|
|
5580
|
-
// Or update exists notification
|
|
5581
|
-
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
5582
|
-
// Clear timeout to avoid close event for updated notification
|
|
5583
|
-
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
5584
|
-
updatedNotificationItem._closeTimeout = undefined;
|
|
5585
|
-
// Replace exists notification by new one
|
|
5586
|
-
newState[existsNotificationIndex] = newNotificationItem;
|
|
5587
|
-
return newState;
|
|
5588
|
-
});
|
|
5589
|
-
if (newNotificationItem.closeByTime) {
|
|
5590
|
-
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
5591
|
-
}
|
|
5592
|
-
return newNotificationItem;
|
|
5593
|
-
},
|
|
5594
|
-
// "hideNotifications" is never changed
|
|
5595
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5596
|
-
[]);
|
|
5597
|
-
const notificationsAPI = useMemo(() => ({
|
|
5598
|
-
hideNotifications: hideNotifications,
|
|
5599
|
-
notificationStatuses: STATUSES,
|
|
5600
|
-
showNotification: showNotification,
|
|
5601
|
-
}),
|
|
5602
|
-
// Functions is never changes, no sense to set as dependencies
|
|
5603
|
-
// eslint-disable-next-line
|
|
5604
|
-
[]);
|
|
5605
|
-
useEffect(() => {
|
|
5606
|
-
// Set timeout for initial notifications list one time on first render
|
|
5607
|
-
notificationsList.forEach((notificationItem) => {
|
|
5608
|
-
if (notificationItem.closeByTime) {
|
|
5609
|
-
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
5610
|
-
}
|
|
5611
|
-
});
|
|
5612
|
-
// Show notifications on all requests errors.
|
|
5613
|
-
// Enable one time without disabling. Use "isLogging" on request config level
|
|
5614
|
-
// to disable notifications logger.
|
|
5615
|
-
if (isLogRequestsErrors) {
|
|
5616
|
-
axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
5617
|
-
log: (responseError) => {
|
|
5618
|
-
if (responseError.message) {
|
|
5619
|
-
// prevent from showing many network errors
|
|
5620
|
-
const errorListToDedupe = ['network'];
|
|
5621
|
-
const id = errorListToDedupe.includes(responseError.key)
|
|
5622
|
-
? responseError.key
|
|
5623
|
-
: undefined;
|
|
5624
|
-
showNotification({
|
|
5625
|
-
id: id,
|
|
5626
|
-
title: responseError.message,
|
|
5627
|
-
status: 'error',
|
|
5628
|
-
closeByTime: 4000,
|
|
5629
|
-
});
|
|
5630
|
-
}
|
|
5631
|
-
},
|
|
5632
|
-
};
|
|
5633
|
-
}
|
|
5634
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5635
|
-
}, []);
|
|
5636
|
-
return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
6106
|
+
return (jsxRuntimeExports.jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntimeExports.jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsxRuntimeExports.jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
|
|
5637
6107
|
}
|
|
5638
|
-
const statusToAppearanceList = {
|
|
5639
|
-
error: 'errorPrimary sizeS solid rounded',
|
|
5640
|
-
info: 'infoPrimary sizeS solid rounded',
|
|
5641
|
-
success: 'successPrimary sizeS solid rounded',
|
|
5642
|
-
warning: 'warningPrimary sizeS solid rounded',
|
|
5643
|
-
};
|
|
5644
|
-
function createNotification(notification, onClose) {
|
|
5645
|
-
// Default notification item properties
|
|
5646
|
-
let id = v4().split('-')[0];
|
|
5647
|
-
let title = '';
|
|
5648
|
-
let text = '';
|
|
5649
|
-
let closeIcon = '';
|
|
5650
|
-
let closeIconSrc = '';
|
|
5651
|
-
let type = 'float';
|
|
5652
|
-
let buttonLabel = '';
|
|
5653
|
-
let status = STATUSES.warning;
|
|
5654
|
-
let closeByTime = 4500;
|
|
5655
|
-
let appearance = statusToAppearanceList[status];
|
|
5656
|
-
let after = null;
|
|
5657
|
-
let isLoading = false;
|
|
5658
|
-
let closeIconAppearance = '';
|
|
5659
|
-
let onClickButton = () => { };
|
|
5660
|
-
if (typeof notification === 'string') {
|
|
5661
|
-
text = notification;
|
|
5662
|
-
}
|
|
5663
|
-
else if (typeof notification === 'object') {
|
|
5664
|
-
id = String(notification.id ?? id);
|
|
5665
|
-
title = notification.title ?? title;
|
|
5666
|
-
text = notification.text ?? text;
|
|
5667
|
-
closeIconAppearance =
|
|
5668
|
-
notification.closeIconAppearance ?? closeIconAppearance;
|
|
5669
|
-
type = notification.type ?? type;
|
|
5670
|
-
closeIcon = notification.closeIcon ?? closeIcon;
|
|
5671
|
-
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
5672
|
-
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
5673
|
-
onClickButton = notification.onClickButton ?? onClickButton;
|
|
5674
|
-
status = notification.status ?? status;
|
|
5675
|
-
closeByTime = notification.closeByTime ?? closeByTime;
|
|
5676
|
-
isLoading = notification.isLoading ?? isLoading;
|
|
5677
|
-
after = notification.after ?? after;
|
|
5678
|
-
appearance =
|
|
5679
|
-
notification.appearance ??
|
|
5680
|
-
statusToAppearanceList[notification.status] ??
|
|
5681
|
-
appearance;
|
|
5682
|
-
}
|
|
5683
|
-
return {
|
|
5684
|
-
id: id,
|
|
5685
|
-
appearance: appearance,
|
|
5686
|
-
type: type,
|
|
5687
|
-
title: title,
|
|
5688
|
-
status: status,
|
|
5689
|
-
text: text,
|
|
5690
|
-
buttonLabel: buttonLabel,
|
|
5691
|
-
after: after,
|
|
5692
|
-
closeByTime: closeByTime,
|
|
5693
|
-
closeIcon: closeIcon,
|
|
5694
|
-
closeIconAppearance: closeIconAppearance,
|
|
5695
|
-
closeIconSrc: closeIconSrc,
|
|
5696
|
-
isLoading: isLoading,
|
|
5697
|
-
onClickButton: onClickButton,
|
|
5698
|
-
onClose: onClose,
|
|
5699
|
-
};
|
|
5700
|
-
}
|
|
5701
|
-
|
|
5702
|
-
const UserDeviceContext = createContext({
|
|
5703
|
-
isMobile: false,
|
|
5704
|
-
isTablet: false,
|
|
5705
|
-
isDesktop: false,
|
|
5706
|
-
deviceCurrentMainType: '',
|
|
5707
|
-
deviceCurrentType: '',
|
|
5708
|
-
deviceTypesList: [],
|
|
5709
|
-
});
|
|
5710
|
-
const UIProvider = memo(function UIProvider(props) {
|
|
5711
|
-
const { userDeviceState = {}, children } = props;
|
|
5712
|
-
/** NOTE:
|
|
5713
|
-
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
5714
|
-
* when changing the device type(browser width), the hook will first "enable"
|
|
5715
|
-
* the new type(set true), and then "disable" the previous one(set false),
|
|
5716
|
-
* what provoke to double rendering, and in moment we have two different types as "true".
|
|
5717
|
-
* We will need to look at how to change this behavior.
|
|
5718
|
-
*/
|
|
5719
|
-
const allDevicesTypes = useMediaQueries(userDeviceState);
|
|
5720
|
-
const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
|
|
5721
|
-
const deviceCurrentMainType = (isMobile && 'mobile') ||
|
|
5722
|
-
(isTablet && 'tablet') ||
|
|
5723
|
-
(isDesktop && 'desktop') ||
|
|
5724
|
-
'';
|
|
5725
|
-
const [deviceCurrentType, deviceTypesList] = useMemo(() => {
|
|
5726
|
-
const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
|
|
5727
|
-
// In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
|
|
5728
|
-
let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
|
|
5729
|
-
// If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
|
|
5730
|
-
(key) => fullNamedDeviceTypes[key]);
|
|
5731
|
-
// Or set main type (e.g. "isMobile")
|
|
5732
|
-
if (!deviceCurrentType) {
|
|
5733
|
-
deviceCurrentType = deviceCurrentMainType;
|
|
5734
|
-
}
|
|
5735
|
-
deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
|
|
5736
|
-
// On server side render we doesn't known user device and we need to set special word
|
|
5737
|
-
return [deviceCurrentType || '_none_', deviceTypesList];
|
|
5738
|
-
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
|
|
5739
|
-
const deviceContextState = useMemo(() => {
|
|
5740
|
-
return {
|
|
5741
|
-
...allDevicesTypes,
|
|
5742
|
-
deviceCurrentMainType: deviceCurrentMainType,
|
|
5743
|
-
deviceCurrentType: deviceCurrentType,
|
|
5744
|
-
deviceTypesList: deviceTypesList,
|
|
5745
|
-
};
|
|
5746
|
-
}, [
|
|
5747
|
-
allDevicesTypes,
|
|
5748
|
-
deviceCurrentMainType,
|
|
5749
|
-
deviceCurrentType,
|
|
5750
|
-
deviceTypesList,
|
|
5751
|
-
]);
|
|
5752
|
-
useEffect(() => {
|
|
5753
|
-
setViewportProperty();
|
|
5754
|
-
window.addEventListener('resize', setViewportProperty);
|
|
5755
|
-
}, []);
|
|
5756
|
-
return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
|
|
5757
|
-
});
|
|
5758
6108
|
|
|
5759
6109
|
export { NotificationsProvider as N, UIProvider as U, NotificationWrapper as a };
|