@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,6 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
3
|
var React = require('react');
|
|
5
4
|
var camelCase = require('lodash/camelCase');
|
|
6
5
|
var castArray = require('lodash/castArray');
|
|
@@ -9,24 +8,450 @@ var common = require('@itcase/common');
|
|
|
9
8
|
var maxBy = require('lodash/maxBy');
|
|
10
9
|
|
|
11
10
|
function _interopNamespaceDefault(e) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
11
|
+
var n = Object.create(null);
|
|
12
|
+
if (e) {
|
|
13
|
+
Object.keys(e).forEach(function (k) {
|
|
14
|
+
if (k !== 'default') {
|
|
15
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () { return e[k]; }
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
n.default = e;
|
|
24
|
+
return Object.freeze(n);
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
29
28
|
|
|
29
|
+
function getDefaultExportFromCjs (x) {
|
|
30
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
var jsxRuntime = {exports: {}};
|
|
34
|
+
|
|
35
|
+
var reactJsxRuntime_production = {};
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* @license React
|
|
39
|
+
* react-jsx-runtime.production.js
|
|
40
|
+
*
|
|
41
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
42
|
+
*
|
|
43
|
+
* This source code is licensed under the MIT license found in the
|
|
44
|
+
* LICENSE file in the root directory of this source tree.
|
|
45
|
+
*/
|
|
46
|
+
|
|
47
|
+
var hasRequiredReactJsxRuntime_production;
|
|
48
|
+
|
|
49
|
+
function requireReactJsxRuntime_production () {
|
|
50
|
+
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
|
|
51
|
+
hasRequiredReactJsxRuntime_production = 1;
|
|
52
|
+
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
53
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
54
|
+
function jsxProd(type, config, maybeKey) {
|
|
55
|
+
var key = null;
|
|
56
|
+
void 0 !== maybeKey && (key = "" + maybeKey);
|
|
57
|
+
void 0 !== config.key && (key = "" + config.key);
|
|
58
|
+
if ("key" in config) {
|
|
59
|
+
maybeKey = {};
|
|
60
|
+
for (var propName in config)
|
|
61
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
62
|
+
} else maybeKey = config;
|
|
63
|
+
config = maybeKey.ref;
|
|
64
|
+
return {
|
|
65
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
66
|
+
type: type,
|
|
67
|
+
key: key,
|
|
68
|
+
ref: void 0 !== config ? config : null,
|
|
69
|
+
props: maybeKey
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
|
|
73
|
+
reactJsxRuntime_production.jsx = jsxProd;
|
|
74
|
+
reactJsxRuntime_production.jsxs = jsxProd;
|
|
75
|
+
return reactJsxRuntime_production;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
var reactJsxRuntime_development = {};
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* @license React
|
|
82
|
+
* react-jsx-runtime.development.js
|
|
83
|
+
*
|
|
84
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
85
|
+
*
|
|
86
|
+
* This source code is licensed under the MIT license found in the
|
|
87
|
+
* LICENSE file in the root directory of this source tree.
|
|
88
|
+
*/
|
|
89
|
+
|
|
90
|
+
var hasRequiredReactJsxRuntime_development;
|
|
91
|
+
|
|
92
|
+
function requireReactJsxRuntime_development () {
|
|
93
|
+
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
|
|
94
|
+
hasRequiredReactJsxRuntime_development = 1;
|
|
95
|
+
"production" !== process.env.NODE_ENV &&
|
|
96
|
+
(function () {
|
|
97
|
+
function getComponentNameFromType(type) {
|
|
98
|
+
if (null == type) return null;
|
|
99
|
+
if ("function" === typeof type)
|
|
100
|
+
return type.$$typeof === REACT_CLIENT_REFERENCE
|
|
101
|
+
? null
|
|
102
|
+
: type.displayName || type.name || null;
|
|
103
|
+
if ("string" === typeof type) return type;
|
|
104
|
+
switch (type) {
|
|
105
|
+
case REACT_FRAGMENT_TYPE:
|
|
106
|
+
return "Fragment";
|
|
107
|
+
case REACT_PROFILER_TYPE:
|
|
108
|
+
return "Profiler";
|
|
109
|
+
case REACT_STRICT_MODE_TYPE:
|
|
110
|
+
return "StrictMode";
|
|
111
|
+
case REACT_SUSPENSE_TYPE:
|
|
112
|
+
return "Suspense";
|
|
113
|
+
case REACT_SUSPENSE_LIST_TYPE:
|
|
114
|
+
return "SuspenseList";
|
|
115
|
+
case REACT_ACTIVITY_TYPE:
|
|
116
|
+
return "Activity";
|
|
117
|
+
}
|
|
118
|
+
if ("object" === typeof type)
|
|
119
|
+
switch (
|
|
120
|
+
("number" === typeof type.tag &&
|
|
121
|
+
console.error(
|
|
122
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
123
|
+
),
|
|
124
|
+
type.$$typeof)
|
|
125
|
+
) {
|
|
126
|
+
case REACT_PORTAL_TYPE:
|
|
127
|
+
return "Portal";
|
|
128
|
+
case REACT_CONTEXT_TYPE:
|
|
129
|
+
return type.displayName || "Context";
|
|
130
|
+
case REACT_CONSUMER_TYPE:
|
|
131
|
+
return (type._context.displayName || "Context") + ".Consumer";
|
|
132
|
+
case REACT_FORWARD_REF_TYPE:
|
|
133
|
+
var innerType = type.render;
|
|
134
|
+
type = type.displayName;
|
|
135
|
+
type ||
|
|
136
|
+
((type = innerType.displayName || innerType.name || ""),
|
|
137
|
+
(type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
|
|
138
|
+
return type;
|
|
139
|
+
case REACT_MEMO_TYPE:
|
|
140
|
+
return (
|
|
141
|
+
(innerType = type.displayName || null),
|
|
142
|
+
null !== innerType
|
|
143
|
+
? innerType
|
|
144
|
+
: getComponentNameFromType(type.type) || "Memo"
|
|
145
|
+
);
|
|
146
|
+
case REACT_LAZY_TYPE:
|
|
147
|
+
innerType = type._payload;
|
|
148
|
+
type = type._init;
|
|
149
|
+
try {
|
|
150
|
+
return getComponentNameFromType(type(innerType));
|
|
151
|
+
} catch (x) {}
|
|
152
|
+
}
|
|
153
|
+
return null;
|
|
154
|
+
}
|
|
155
|
+
function testStringCoercion(value) {
|
|
156
|
+
return "" + value;
|
|
157
|
+
}
|
|
158
|
+
function checkKeyStringCoercion(value) {
|
|
159
|
+
try {
|
|
160
|
+
testStringCoercion(value);
|
|
161
|
+
var JSCompiler_inline_result = !1;
|
|
162
|
+
} catch (e) {
|
|
163
|
+
JSCompiler_inline_result = true;
|
|
164
|
+
}
|
|
165
|
+
if (JSCompiler_inline_result) {
|
|
166
|
+
JSCompiler_inline_result = console;
|
|
167
|
+
var JSCompiler_temp_const = JSCompiler_inline_result.error;
|
|
168
|
+
var JSCompiler_inline_result$jscomp$0 =
|
|
169
|
+
("function" === typeof Symbol &&
|
|
170
|
+
Symbol.toStringTag &&
|
|
171
|
+
value[Symbol.toStringTag]) ||
|
|
172
|
+
value.constructor.name ||
|
|
173
|
+
"Object";
|
|
174
|
+
JSCompiler_temp_const.call(
|
|
175
|
+
JSCompiler_inline_result,
|
|
176
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
177
|
+
JSCompiler_inline_result$jscomp$0
|
|
178
|
+
);
|
|
179
|
+
return testStringCoercion(value);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
function getTaskName(type) {
|
|
183
|
+
if (type === REACT_FRAGMENT_TYPE) return "<>";
|
|
184
|
+
if (
|
|
185
|
+
"object" === typeof type &&
|
|
186
|
+
null !== type &&
|
|
187
|
+
type.$$typeof === REACT_LAZY_TYPE
|
|
188
|
+
)
|
|
189
|
+
return "<...>";
|
|
190
|
+
try {
|
|
191
|
+
var name = getComponentNameFromType(type);
|
|
192
|
+
return name ? "<" + name + ">" : "<...>";
|
|
193
|
+
} catch (x) {
|
|
194
|
+
return "<...>";
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
function getOwner() {
|
|
198
|
+
var dispatcher = ReactSharedInternals.A;
|
|
199
|
+
return null === dispatcher ? null : dispatcher.getOwner();
|
|
200
|
+
}
|
|
201
|
+
function UnknownOwner() {
|
|
202
|
+
return Error("react-stack-top-frame");
|
|
203
|
+
}
|
|
204
|
+
function hasValidKey(config) {
|
|
205
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
206
|
+
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
207
|
+
if (getter && getter.isReactWarning) return false;
|
|
208
|
+
}
|
|
209
|
+
return void 0 !== config.key;
|
|
210
|
+
}
|
|
211
|
+
function defineKeyPropWarningGetter(props, displayName) {
|
|
212
|
+
function warnAboutAccessingKey() {
|
|
213
|
+
specialPropKeyWarningShown ||
|
|
214
|
+
((specialPropKeyWarningShown = true),
|
|
215
|
+
console.error(
|
|
216
|
+
"%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)",
|
|
217
|
+
displayName
|
|
218
|
+
));
|
|
219
|
+
}
|
|
220
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
221
|
+
Object.defineProperty(props, "key", {
|
|
222
|
+
get: warnAboutAccessingKey,
|
|
223
|
+
configurable: true
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
function elementRefGetterWithDeprecationWarning() {
|
|
227
|
+
var componentName = getComponentNameFromType(this.type);
|
|
228
|
+
didWarnAboutElementRef[componentName] ||
|
|
229
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
230
|
+
console.error(
|
|
231
|
+
"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."
|
|
232
|
+
));
|
|
233
|
+
componentName = this.props.ref;
|
|
234
|
+
return void 0 !== componentName ? componentName : null;
|
|
235
|
+
}
|
|
236
|
+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
|
|
237
|
+
var refProp = props.ref;
|
|
238
|
+
type = {
|
|
239
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
240
|
+
type: type,
|
|
241
|
+
key: key,
|
|
242
|
+
props: props,
|
|
243
|
+
_owner: owner
|
|
244
|
+
};
|
|
245
|
+
null !== (void 0 !== refProp ? refProp : null)
|
|
246
|
+
? Object.defineProperty(type, "ref", {
|
|
247
|
+
enumerable: false,
|
|
248
|
+
get: elementRefGetterWithDeprecationWarning
|
|
249
|
+
})
|
|
250
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
251
|
+
type._store = {};
|
|
252
|
+
Object.defineProperty(type._store, "validated", {
|
|
253
|
+
configurable: false,
|
|
254
|
+
enumerable: false,
|
|
255
|
+
writable: true,
|
|
256
|
+
value: 0
|
|
257
|
+
});
|
|
258
|
+
Object.defineProperty(type, "_debugInfo", {
|
|
259
|
+
configurable: false,
|
|
260
|
+
enumerable: false,
|
|
261
|
+
writable: true,
|
|
262
|
+
value: null
|
|
263
|
+
});
|
|
264
|
+
Object.defineProperty(type, "_debugStack", {
|
|
265
|
+
configurable: false,
|
|
266
|
+
enumerable: false,
|
|
267
|
+
writable: true,
|
|
268
|
+
value: debugStack
|
|
269
|
+
});
|
|
270
|
+
Object.defineProperty(type, "_debugTask", {
|
|
271
|
+
configurable: false,
|
|
272
|
+
enumerable: false,
|
|
273
|
+
writable: true,
|
|
274
|
+
value: debugTask
|
|
275
|
+
});
|
|
276
|
+
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
277
|
+
return type;
|
|
278
|
+
}
|
|
279
|
+
function jsxDEVImpl(
|
|
280
|
+
type,
|
|
281
|
+
config,
|
|
282
|
+
maybeKey,
|
|
283
|
+
isStaticChildren,
|
|
284
|
+
debugStack,
|
|
285
|
+
debugTask
|
|
286
|
+
) {
|
|
287
|
+
var children = config.children;
|
|
288
|
+
if (void 0 !== children)
|
|
289
|
+
if (isStaticChildren)
|
|
290
|
+
if (isArrayImpl(children)) {
|
|
291
|
+
for (
|
|
292
|
+
isStaticChildren = 0;
|
|
293
|
+
isStaticChildren < children.length;
|
|
294
|
+
isStaticChildren++
|
|
295
|
+
)
|
|
296
|
+
validateChildKeys(children[isStaticChildren]);
|
|
297
|
+
Object.freeze && Object.freeze(children);
|
|
298
|
+
} else
|
|
299
|
+
console.error(
|
|
300
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
301
|
+
);
|
|
302
|
+
else validateChildKeys(children);
|
|
303
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
304
|
+
children = getComponentNameFromType(type);
|
|
305
|
+
var keys = Object.keys(config).filter(function (k) {
|
|
306
|
+
return "key" !== k;
|
|
307
|
+
});
|
|
308
|
+
isStaticChildren =
|
|
309
|
+
0 < keys.length
|
|
310
|
+
? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
|
|
311
|
+
: "{key: someKey}";
|
|
312
|
+
didWarnAboutKeySpread[children + isStaticChildren] ||
|
|
313
|
+
((keys =
|
|
314
|
+
0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
|
|
315
|
+
console.error(
|
|
316
|
+
'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} />',
|
|
317
|
+
isStaticChildren,
|
|
318
|
+
children,
|
|
319
|
+
keys,
|
|
320
|
+
children
|
|
321
|
+
),
|
|
322
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
323
|
+
}
|
|
324
|
+
children = null;
|
|
325
|
+
void 0 !== maybeKey &&
|
|
326
|
+
(checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
|
|
327
|
+
hasValidKey(config) &&
|
|
328
|
+
(checkKeyStringCoercion(config.key), (children = "" + config.key));
|
|
329
|
+
if ("key" in config) {
|
|
330
|
+
maybeKey = {};
|
|
331
|
+
for (var propName in config)
|
|
332
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
333
|
+
} else maybeKey = config;
|
|
334
|
+
children &&
|
|
335
|
+
defineKeyPropWarningGetter(
|
|
336
|
+
maybeKey,
|
|
337
|
+
"function" === typeof type
|
|
338
|
+
? type.displayName || type.name || "Unknown"
|
|
339
|
+
: type
|
|
340
|
+
);
|
|
341
|
+
return ReactElement(
|
|
342
|
+
type,
|
|
343
|
+
children,
|
|
344
|
+
maybeKey,
|
|
345
|
+
getOwner(),
|
|
346
|
+
debugStack,
|
|
347
|
+
debugTask
|
|
348
|
+
);
|
|
349
|
+
}
|
|
350
|
+
function validateChildKeys(node) {
|
|
351
|
+
isValidElement(node)
|
|
352
|
+
? node._store && (node._store.validated = 1)
|
|
353
|
+
: "object" === typeof node &&
|
|
354
|
+
null !== node &&
|
|
355
|
+
node.$$typeof === REACT_LAZY_TYPE &&
|
|
356
|
+
("fulfilled" === node._payload.status
|
|
357
|
+
? isValidElement(node._payload.value) &&
|
|
358
|
+
node._payload.value._store &&
|
|
359
|
+
(node._payload.value._store.validated = 1)
|
|
360
|
+
: node._store && (node._store.validated = 1));
|
|
361
|
+
}
|
|
362
|
+
function isValidElement(object) {
|
|
363
|
+
return (
|
|
364
|
+
"object" === typeof object &&
|
|
365
|
+
null !== object &&
|
|
366
|
+
object.$$typeof === REACT_ELEMENT_TYPE
|
|
367
|
+
);
|
|
368
|
+
}
|
|
369
|
+
var React$1 = React,
|
|
370
|
+
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
371
|
+
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
372
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
373
|
+
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
|
|
374
|
+
REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
|
|
375
|
+
REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
|
|
376
|
+
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
|
|
377
|
+
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
|
|
378
|
+
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
|
|
379
|
+
REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
|
|
380
|
+
REACT_MEMO_TYPE = Symbol.for("react.memo"),
|
|
381
|
+
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
|
|
382
|
+
REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
|
|
383
|
+
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
|
|
384
|
+
ReactSharedInternals =
|
|
385
|
+
React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
|
|
386
|
+
hasOwnProperty = Object.prototype.hasOwnProperty,
|
|
387
|
+
isArrayImpl = Array.isArray,
|
|
388
|
+
createTask = console.createTask
|
|
389
|
+
? console.createTask
|
|
390
|
+
: function () {
|
|
391
|
+
return null;
|
|
392
|
+
};
|
|
393
|
+
React$1 = {
|
|
394
|
+
react_stack_bottom_frame: function (callStackForError) {
|
|
395
|
+
return callStackForError();
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
var specialPropKeyWarningShown;
|
|
399
|
+
var didWarnAboutElementRef = {};
|
|
400
|
+
var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
|
|
401
|
+
React$1,
|
|
402
|
+
UnknownOwner
|
|
403
|
+
)();
|
|
404
|
+
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
|
|
405
|
+
var didWarnAboutKeySpread = {};
|
|
406
|
+
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
|
|
407
|
+
reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
|
|
408
|
+
var trackActualOwner =
|
|
409
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
410
|
+
return jsxDEVImpl(
|
|
411
|
+
type,
|
|
412
|
+
config,
|
|
413
|
+
maybeKey,
|
|
414
|
+
false,
|
|
415
|
+
trackActualOwner
|
|
416
|
+
? Error("react-stack-top-frame")
|
|
417
|
+
: unknownOwnerDebugStack,
|
|
418
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
419
|
+
);
|
|
420
|
+
};
|
|
421
|
+
reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
|
|
422
|
+
var trackActualOwner =
|
|
423
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
424
|
+
return jsxDEVImpl(
|
|
425
|
+
type,
|
|
426
|
+
config,
|
|
427
|
+
maybeKey,
|
|
428
|
+
true,
|
|
429
|
+
trackActualOwner
|
|
430
|
+
? Error("react-stack-top-frame")
|
|
431
|
+
: unknownOwnerDebugStack,
|
|
432
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
433
|
+
);
|
|
434
|
+
};
|
|
435
|
+
})();
|
|
436
|
+
return reactJsxRuntime_development;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
var hasRequiredJsxRuntime;
|
|
440
|
+
|
|
441
|
+
function requireJsxRuntime () {
|
|
442
|
+
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
|
|
443
|
+
hasRequiredJsxRuntime = 1;
|
|
444
|
+
|
|
445
|
+
if (process.env.NODE_ENV === 'production') {
|
|
446
|
+
jsxRuntime.exports = requireReactJsxRuntime_production();
|
|
447
|
+
} else {
|
|
448
|
+
jsxRuntime.exports = requireReactJsxRuntime_development();
|
|
449
|
+
}
|
|
450
|
+
return jsxRuntime.exports;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
var jsxRuntimeExports = requireJsxRuntime();
|
|
454
|
+
|
|
30
455
|
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}
|
|
31
456
|
|
|
32
457
|
const byteToHex = [];
|
|
@@ -88,10 +513,6 @@ function v4(options, buf, offset) {
|
|
|
88
513
|
return _v4(options);
|
|
89
514
|
}
|
|
90
515
|
|
|
91
|
-
function getDefaultExportFromCjs (x) {
|
|
92
|
-
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
516
|
var cssMediaquery = {};
|
|
96
517
|
|
|
97
518
|
/*
|
|
@@ -2872,24 +3293,185 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
|
|
|
2872
3293
|
return appearanceConfig;
|
|
2873
3294
|
};
|
|
2874
3295
|
|
|
2875
|
-
const STATUSES
|
|
3296
|
+
const STATUSES = {
|
|
2876
3297
|
error: 'error',
|
|
2877
3298
|
info: 'info',
|
|
2878
3299
|
success: 'success',
|
|
2879
3300
|
warning: 'warning',
|
|
2880
3301
|
};
|
|
2881
|
-
const NotificationsContext
|
|
3302
|
+
const NotificationsContext = React.createContext([]);
|
|
2882
3303
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
2883
|
-
const NotificationsAPIContext
|
|
3304
|
+
const NotificationsAPIContext = React.createContext({
|
|
2884
3305
|
hideNotifications: (targetId) => { },
|
|
2885
3306
|
showNotification: (notification, onClose) => { },
|
|
2886
|
-
notificationStatuses: STATUSES
|
|
3307
|
+
notificationStatuses: STATUSES,
|
|
2887
3308
|
});
|
|
3309
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
3310
|
+
function NotificationsProvider(props) {
|
|
3311
|
+
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
3312
|
+
const [notificationsList, setNotificationsList] = React.useState(() => {
|
|
3313
|
+
// We need to set id to every notification item and original list also be have new id's
|
|
3314
|
+
return (initialNotificationsList || []).map((notificationItem) => {
|
|
3315
|
+
return createNotification(notificationItem, notificationItem.onClose);
|
|
3316
|
+
});
|
|
3317
|
+
});
|
|
3318
|
+
const hideNotifications = React.useCallback((targetId) => {
|
|
3319
|
+
// If not target, then nothing to hide
|
|
3320
|
+
if (!targetId) {
|
|
3321
|
+
return;
|
|
3322
|
+
}
|
|
3323
|
+
setNotificationsList((prevNotificationsList) => {
|
|
3324
|
+
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
3325
|
+
// Check on need to hide, if current notification is target for hide
|
|
3326
|
+
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
3327
|
+
// Callback for close if exists
|
|
3328
|
+
if (isNeedToHide) {
|
|
3329
|
+
clearTimeout(notificationItem._closeTimeout);
|
|
3330
|
+
// @typescript-eslint/no-unused-expressions
|
|
3331
|
+
notificationItem.onClose && notificationItem.onClose();
|
|
3332
|
+
}
|
|
3333
|
+
// Save in state if no need to hide
|
|
3334
|
+
return !isNeedToHide;
|
|
3335
|
+
});
|
|
3336
|
+
// Set new notifications list without target item to state
|
|
3337
|
+
return newState;
|
|
3338
|
+
});
|
|
3339
|
+
}, []);
|
|
3340
|
+
const showNotification = React.useCallback((notification, onClose) => {
|
|
3341
|
+
const newNotificationItem = createNotification(notification, onClose);
|
|
3342
|
+
setNotificationsList((prevNotificationsList) => {
|
|
3343
|
+
const newState = prevNotificationsList.slice();
|
|
3344
|
+
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
3345
|
+
// Add new notification
|
|
3346
|
+
if (existsNotificationIndex === -1) {
|
|
3347
|
+
return [...newState, newNotificationItem];
|
|
3348
|
+
}
|
|
3349
|
+
// Or update exists notification
|
|
3350
|
+
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
3351
|
+
// Clear timeout to avoid close event for updated notification
|
|
3352
|
+
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
3353
|
+
updatedNotificationItem._closeTimeout = undefined;
|
|
3354
|
+
// Replace exists notification by new one
|
|
3355
|
+
newState[existsNotificationIndex] = newNotificationItem;
|
|
3356
|
+
return newState;
|
|
3357
|
+
});
|
|
3358
|
+
if (newNotificationItem.closeByTime) {
|
|
3359
|
+
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
3360
|
+
}
|
|
3361
|
+
return newNotificationItem;
|
|
3362
|
+
},
|
|
3363
|
+
// "hideNotifications" is never changed
|
|
3364
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3365
|
+
[]);
|
|
3366
|
+
const notificationsAPI = React.useMemo(() => ({
|
|
3367
|
+
hideNotifications: hideNotifications,
|
|
3368
|
+
notificationStatuses: STATUSES,
|
|
3369
|
+
showNotification: showNotification,
|
|
3370
|
+
}),
|
|
3371
|
+
// Functions is never changes, no sense to set as dependencies
|
|
3372
|
+
// eslint-disable-next-line
|
|
3373
|
+
[]);
|
|
3374
|
+
React.useEffect(() => {
|
|
3375
|
+
// Set timeout for initial notifications list one time on first render
|
|
3376
|
+
notificationsList.forEach((notificationItem) => {
|
|
3377
|
+
if (notificationItem.closeByTime) {
|
|
3378
|
+
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
3379
|
+
}
|
|
3380
|
+
});
|
|
3381
|
+
// Show notifications on all requests errors.
|
|
3382
|
+
// Enable one time without disabling. Use "isLogging" on request config level
|
|
3383
|
+
// to disable notifications logger.
|
|
3384
|
+
if (isLogRequestsErrors) {
|
|
3385
|
+
common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
3386
|
+
log: (responseError) => {
|
|
3387
|
+
if (responseError.message) {
|
|
3388
|
+
// prevent from showing many network errors
|
|
3389
|
+
const errorListToDedupe = ['network'];
|
|
3390
|
+
const id = errorListToDedupe.includes(responseError.key)
|
|
3391
|
+
? responseError.key
|
|
3392
|
+
: undefined;
|
|
3393
|
+
showNotification({
|
|
3394
|
+
id: id,
|
|
3395
|
+
title: responseError.message,
|
|
3396
|
+
status: 'error',
|
|
3397
|
+
closeByTime: 4000,
|
|
3398
|
+
});
|
|
3399
|
+
}
|
|
3400
|
+
},
|
|
3401
|
+
};
|
|
3402
|
+
}
|
|
3403
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3404
|
+
}, []);
|
|
3405
|
+
return (jsxRuntimeExports.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntimeExports.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
3406
|
+
}
|
|
2888
3407
|
function useNotifications() {
|
|
2889
|
-
return React.useContext(NotificationsContext
|
|
3408
|
+
return React.useContext(NotificationsContext);
|
|
2890
3409
|
}
|
|
2891
3410
|
function useNotificationsAPI() {
|
|
2892
|
-
return React.useContext(NotificationsAPIContext
|
|
3411
|
+
return React.useContext(NotificationsAPIContext);
|
|
3412
|
+
}
|
|
3413
|
+
const statusToAppearanceList = {
|
|
3414
|
+
error: 'errorPrimary sizeS solid rounded',
|
|
3415
|
+
info: 'infoPrimary sizeS solid rounded',
|
|
3416
|
+
success: 'successPrimary sizeS solid rounded',
|
|
3417
|
+
warning: 'warningPrimary sizeS solid rounded',
|
|
3418
|
+
};
|
|
3419
|
+
function createNotification(notification, onClose) {
|
|
3420
|
+
// Default notification item properties
|
|
3421
|
+
let id = v4().split('-')[0];
|
|
3422
|
+
let title = '';
|
|
3423
|
+
let text = '';
|
|
3424
|
+
let closeIcon = '';
|
|
3425
|
+
let closeIconSrc = '';
|
|
3426
|
+
let type = 'float';
|
|
3427
|
+
let buttonLabel = '';
|
|
3428
|
+
let status = STATUSES.warning;
|
|
3429
|
+
let closeByTime = 4500;
|
|
3430
|
+
let appearance = statusToAppearanceList[status];
|
|
3431
|
+
let after = null;
|
|
3432
|
+
let isLoading = false;
|
|
3433
|
+
let closeIconAppearance = '';
|
|
3434
|
+
let onClickButton = () => { };
|
|
3435
|
+
if (typeof notification === 'string') {
|
|
3436
|
+
text = notification;
|
|
3437
|
+
}
|
|
3438
|
+
else if (typeof notification === 'object') {
|
|
3439
|
+
id = String(notification.id ?? id);
|
|
3440
|
+
title = notification.title ?? title;
|
|
3441
|
+
text = notification.text ?? text;
|
|
3442
|
+
closeIconAppearance =
|
|
3443
|
+
notification.closeIconAppearance ?? closeIconAppearance;
|
|
3444
|
+
type = notification.type ?? type;
|
|
3445
|
+
closeIcon = notification.closeIcon ?? closeIcon;
|
|
3446
|
+
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
3447
|
+
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
3448
|
+
onClickButton = notification.onClickButton ?? onClickButton;
|
|
3449
|
+
status = notification.status ?? status;
|
|
3450
|
+
closeByTime = notification.closeByTime ?? closeByTime;
|
|
3451
|
+
isLoading = notification.isLoading ?? isLoading;
|
|
3452
|
+
after = notification.after ?? after;
|
|
3453
|
+
appearance =
|
|
3454
|
+
notification.appearance ??
|
|
3455
|
+
statusToAppearanceList[notification.status] ??
|
|
3456
|
+
appearance;
|
|
3457
|
+
}
|
|
3458
|
+
return {
|
|
3459
|
+
id: id,
|
|
3460
|
+
appearance: appearance,
|
|
3461
|
+
type: type,
|
|
3462
|
+
title: title,
|
|
3463
|
+
status: status,
|
|
3464
|
+
text: text,
|
|
3465
|
+
buttonLabel: buttonLabel,
|
|
3466
|
+
after: after,
|
|
3467
|
+
closeByTime: closeByTime,
|
|
3468
|
+
closeIcon: closeIcon,
|
|
3469
|
+
closeIconAppearance: closeIconAppearance,
|
|
3470
|
+
closeIconSrc: closeIconSrc,
|
|
3471
|
+
isLoading: isLoading,
|
|
3472
|
+
onClickButton: onClickButton,
|
|
3473
|
+
onClose: onClose,
|
|
3474
|
+
};
|
|
2893
3475
|
}
|
|
2894
3476
|
|
|
2895
3477
|
var tablet = "48em";
|
|
@@ -3027,7 +3609,7 @@ const setViewportProperty = () => {
|
|
|
3027
3609
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
3028
3610
|
};
|
|
3029
3611
|
|
|
3030
|
-
const UserDeviceContext
|
|
3612
|
+
const UserDeviceContext = React.createContext({
|
|
3031
3613
|
isMobile: false,
|
|
3032
3614
|
isTablet: false,
|
|
3033
3615
|
isDesktop: false,
|
|
@@ -3035,7 +3617,7 @@ const UserDeviceContext$1 = React.createContext({
|
|
|
3035
3617
|
deviceCurrentType: '',
|
|
3036
3618
|
deviceTypesList: [],
|
|
3037
3619
|
});
|
|
3038
|
-
React.memo(function UIProvider(props) {
|
|
3620
|
+
const UIProvider = React.memo(function UIProvider(props) {
|
|
3039
3621
|
const { userDeviceState = {}, children } = props;
|
|
3040
3622
|
/** NOTE:
|
|
3041
3623
|
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
@@ -3081,10 +3663,10 @@ React.memo(function UIProvider(props) {
|
|
|
3081
3663
|
setViewportProperty();
|
|
3082
3664
|
window.addEventListener('resize', setViewportProperty);
|
|
3083
3665
|
}, []);
|
|
3084
|
-
return (
|
|
3666
|
+
return (jsxRuntimeExports.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
|
|
3085
3667
|
});
|
|
3086
3668
|
function useUserDeviceContext() {
|
|
3087
|
-
const context = React.useContext(UserDeviceContext
|
|
3669
|
+
const context = React.useContext(UserDeviceContext);
|
|
3088
3670
|
if (!context) {
|
|
3089
3671
|
throw new Error('useUserDeviceContext is not defined');
|
|
3090
3672
|
}
|
|
@@ -3476,7 +4058,7 @@ function useStyles(props) {
|
|
|
3476
4058
|
}
|
|
3477
4059
|
else {
|
|
3478
4060
|
// Some properties doesn't have any units
|
|
3479
|
-
const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
|
|
4061
|
+
const ignorePX = ['zIndex', 'order', 'flexGrow', 'opacity'].includes(styleAttributeKey);
|
|
3480
4062
|
if (!ignorePX) {
|
|
3481
4063
|
// Add px to non-unit value
|
|
3482
4064
|
value = `${value}px`;
|
|
@@ -3601,7 +4183,7 @@ function Text(props) {
|
|
|
3601
4183
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
3602
4184
|
const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
|
|
3603
4185
|
const { styles: textStyles } = useStyles(props);
|
|
3604
|
-
return (
|
|
4186
|
+
return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
|
|
3605
4187
|
textColorDisabledClass &&
|
|
3606
4188
|
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
3607
4189
|
!isDisabled &&
|
|
@@ -3870,8 +4452,8 @@ function Badge(props) {
|
|
|
3870
4452
|
: dot
|
|
3871
4453
|
? 'badge_type_dot'
|
|
3872
4454
|
: 'badge_type_fill';
|
|
3873
|
-
return (
|
|
3874
|
-
(value && (
|
|
4455
|
+
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 ||
|
|
4456
|
+
(value && (jsxRuntimeExports.jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
|
|
3875
4457
|
}
|
|
3876
4458
|
|
|
3877
4459
|
const linkConfig = {
|
|
@@ -3881,11 +4463,11 @@ function LinkWrapper(props) {
|
|
|
3881
4463
|
if (href) {
|
|
3882
4464
|
const Component = LinkComponent || linkConfig.LinkComponent;
|
|
3883
4465
|
{
|
|
3884
|
-
return (
|
|
4466
|
+
return (jsxRuntimeExports.jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
|
|
3885
4467
|
}
|
|
3886
4468
|
}
|
|
3887
4469
|
else if (LinkComponent) {
|
|
3888
|
-
return
|
|
4470
|
+
return jsxRuntimeExports.jsx(LinkComponent, { ...otherProps, children: children });
|
|
3889
4471
|
}
|
|
3890
4472
|
return React.Children.toArray(children)
|
|
3891
4473
|
.filter(Boolean)
|
|
@@ -4102,7 +4684,7 @@ function Title(props) {
|
|
|
4102
4684
|
}
|
|
4103
4685
|
return size ? size : 'span';
|
|
4104
4686
|
}, [tag, size]);
|
|
4105
|
-
return (
|
|
4687
|
+
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 &&
|
|
4106
4688
|
textColorDisabledClass &&
|
|
4107
4689
|
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
4108
4690
|
!isDisabled &&
|
|
@@ -4116,7 +4698,7 @@ function Title(props) {
|
|
|
4116
4698
|
`text-color_hover_${textColorHoverClass}`, isActive &&
|
|
4117
4699
|
!isDisabled &&
|
|
4118
4700
|
textColorActiveHoverClass &&
|
|
4119
|
-
`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,
|
|
4701
|
+
`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] }));
|
|
4120
4702
|
}
|
|
4121
4703
|
|
|
4122
4704
|
const tooltipAppearanceDefault = {
|
|
@@ -4284,11 +4866,11 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
4284
4866
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4285
4867
|
const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
4286
4868
|
const { styles: tooltipStyles } = useStyles(props);
|
|
4287
|
-
return (
|
|
4869
|
+
return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
|
|
4288
4870
|
? isTooltipVisible
|
|
4289
4871
|
? 'tooltip_state_open'
|
|
4290
4872
|
: 'tooltip_state_close'
|
|
4291
|
-
: 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 && (
|
|
4873
|
+
: 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] }));
|
|
4292
4874
|
});
|
|
4293
4875
|
|
|
4294
4876
|
const UrlAssetPrefixContext = React.createContext({
|
|
@@ -4331,7 +4913,7 @@ const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
|
|
|
4331
4913
|
}
|
|
4332
4914
|
return resultProps;
|
|
4333
4915
|
}, {});
|
|
4334
|
-
return
|
|
4916
|
+
return jsxRuntimeExports.jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
4335
4917
|
});
|
|
4336
4918
|
return HOC;
|
|
4337
4919
|
};
|
|
@@ -4733,16 +5315,16 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
4733
5315
|
if (height) {
|
|
4734
5316
|
sizes.height = height;
|
|
4735
5317
|
}
|
|
4736
|
-
return
|
|
5318
|
+
return jsxRuntimeExports.jsx(SvgComponent, { ...sizes });
|
|
4737
5319
|
}
|
|
4738
5320
|
if (imageSrc) {
|
|
4739
5321
|
if (imageSrc.endsWith('.svg')) {
|
|
4740
5322
|
if (saveFillStroke) {
|
|
4741
|
-
return
|
|
5323
|
+
return jsxRuntimeExports.jsx(InlineSVG, { src: imageSrc });
|
|
4742
5324
|
}
|
|
4743
|
-
return
|
|
5325
|
+
return jsxRuntimeExports.jsx(InlineSVG, { src: imageSrc, preProcessor: removeFillStroke });
|
|
4744
5326
|
}
|
|
4745
|
-
return
|
|
5327
|
+
return jsxRuntimeExports.jsx("img", { src: imageSrc });
|
|
4746
5328
|
}
|
|
4747
5329
|
return null;
|
|
4748
5330
|
}, [SvgImage, imageSrc, width, height, saveFillStroke]);
|
|
@@ -4750,7 +5332,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
4750
5332
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4751
5333
|
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;
|
|
4752
5334
|
const { styles: iconStyles } = useStyles(props);
|
|
4753
|
-
return (
|
|
5335
|
+
return (jsxRuntimeExports.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
4754
5336
|
? fillClass && `fill_${fillClass}`
|
|
4755
5337
|
: fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
|
|
4756
5338
|
? fillHoverClass && `fill_hover_${fillHoverClass}`
|
|
@@ -4763,7 +5345,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
4763
5345
|
`icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
|
|
4764
5346
|
iconFillDisabledClass &&
|
|
4765
5347
|
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
4766
|
-
`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,
|
|
5348
|
+
`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] }));
|
|
4767
5349
|
}));
|
|
4768
5350
|
const removeFillStroke = (code) => {
|
|
4769
5351
|
return code
|
|
@@ -4909,7 +5491,7 @@ function Loader(props) {
|
|
|
4909
5491
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
4910
5492
|
const { fillClass, borderColorClass, textColor, textSize, heightClass, itemFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
4911
5493
|
const { styles: loader } = useStyles(props);
|
|
4912
|
-
return (
|
|
5494
|
+
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 }))] }));
|
|
4913
5495
|
}
|
|
4914
5496
|
|
|
4915
5497
|
const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
|
|
@@ -5358,13 +5940,13 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
5358
5940
|
iconBefore ||
|
|
5359
5941
|
iconBeforeSrc ||
|
|
5360
5942
|
iconSrc;
|
|
5361
|
-
return (
|
|
5943
|
+
return (jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
|
|
5362
5944
|
? 'button_type_default'
|
|
5363
5945
|
: label
|
|
5364
5946
|
? 'button_type_label'
|
|
5365
5947
|
: buttonTypeClass
|
|
5366
5948
|
? 'button_type_icon'
|
|
5367
|
-
: '', 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 && (
|
|
5949
|
+
: '', 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] })] }));
|
|
5368
5950
|
});
|
|
5369
5951
|
|
|
5370
5952
|
var _path$3t;
|
|
@@ -5534,248 +6116,16 @@ function Notification(props) {
|
|
|
5534
6116
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
5535
6117
|
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;
|
|
5536
6118
|
const { styles: notificationStyles } = useStyles(props);
|
|
5537
|
-
return (
|
|
6119
|
+
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] }));
|
|
5538
6120
|
}
|
|
5539
6121
|
|
|
5540
6122
|
function NotificationWrapper(props) {
|
|
5541
6123
|
const notifications = useNotifications();
|
|
5542
6124
|
const { hideNotifications } = useNotificationsAPI();
|
|
5543
6125
|
const { className, dataTestId, dataTour } = props;
|
|
5544
|
-
return (
|
|
6126
|
+
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))) }) }));
|
|
5545
6127
|
}
|
|
5546
6128
|
|
|
5547
|
-
const STATUSES = {
|
|
5548
|
-
error: 'error',
|
|
5549
|
-
info: 'info',
|
|
5550
|
-
success: 'success',
|
|
5551
|
-
warning: 'warning',
|
|
5552
|
-
};
|
|
5553
|
-
const NotificationsContext = React.createContext([]);
|
|
5554
|
-
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
5555
|
-
const NotificationsAPIContext = React.createContext({
|
|
5556
|
-
hideNotifications: (targetId) => { },
|
|
5557
|
-
showNotification: (notification, onClose) => { },
|
|
5558
|
-
notificationStatuses: STATUSES,
|
|
5559
|
-
});
|
|
5560
|
-
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
5561
|
-
function NotificationsProvider(props) {
|
|
5562
|
-
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
5563
|
-
const [notificationsList, setNotificationsList] = React.useState(() => {
|
|
5564
|
-
// We need to set id to every notification item and original list also be have new id's
|
|
5565
|
-
return (initialNotificationsList || []).map((notificationItem) => {
|
|
5566
|
-
return createNotification(notificationItem, notificationItem.onClose);
|
|
5567
|
-
});
|
|
5568
|
-
});
|
|
5569
|
-
const hideNotifications = React.useCallback((targetId) => {
|
|
5570
|
-
// If not target, then nothing to hide
|
|
5571
|
-
if (!targetId) {
|
|
5572
|
-
return;
|
|
5573
|
-
}
|
|
5574
|
-
setNotificationsList((prevNotificationsList) => {
|
|
5575
|
-
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
5576
|
-
// Check on need to hide, if current notification is target for hide
|
|
5577
|
-
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
5578
|
-
// Callback for close if exists
|
|
5579
|
-
if (isNeedToHide) {
|
|
5580
|
-
clearTimeout(notificationItem._closeTimeout);
|
|
5581
|
-
// @typescript-eslint/no-unused-expressions
|
|
5582
|
-
notificationItem.onClose && notificationItem.onClose();
|
|
5583
|
-
}
|
|
5584
|
-
// Save in state if no need to hide
|
|
5585
|
-
return !isNeedToHide;
|
|
5586
|
-
});
|
|
5587
|
-
// Set new notifications list without target item to state
|
|
5588
|
-
return newState;
|
|
5589
|
-
});
|
|
5590
|
-
}, []);
|
|
5591
|
-
const showNotification = React.useCallback((notification, onClose) => {
|
|
5592
|
-
const newNotificationItem = createNotification(notification, onClose);
|
|
5593
|
-
setNotificationsList((prevNotificationsList) => {
|
|
5594
|
-
const newState = prevNotificationsList.slice();
|
|
5595
|
-
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
5596
|
-
// Add new notification
|
|
5597
|
-
if (existsNotificationIndex === -1) {
|
|
5598
|
-
return [...newState, newNotificationItem];
|
|
5599
|
-
}
|
|
5600
|
-
// Or update exists notification
|
|
5601
|
-
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
5602
|
-
// Clear timeout to avoid close event for updated notification
|
|
5603
|
-
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
5604
|
-
updatedNotificationItem._closeTimeout = undefined;
|
|
5605
|
-
// Replace exists notification by new one
|
|
5606
|
-
newState[existsNotificationIndex] = newNotificationItem;
|
|
5607
|
-
return newState;
|
|
5608
|
-
});
|
|
5609
|
-
if (newNotificationItem.closeByTime) {
|
|
5610
|
-
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
5611
|
-
}
|
|
5612
|
-
return newNotificationItem;
|
|
5613
|
-
},
|
|
5614
|
-
// "hideNotifications" is never changed
|
|
5615
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5616
|
-
[]);
|
|
5617
|
-
const notificationsAPI = React.useMemo(() => ({
|
|
5618
|
-
hideNotifications: hideNotifications,
|
|
5619
|
-
notificationStatuses: STATUSES,
|
|
5620
|
-
showNotification: showNotification,
|
|
5621
|
-
}),
|
|
5622
|
-
// Functions is never changes, no sense to set as dependencies
|
|
5623
|
-
// eslint-disable-next-line
|
|
5624
|
-
[]);
|
|
5625
|
-
React.useEffect(() => {
|
|
5626
|
-
// Set timeout for initial notifications list one time on first render
|
|
5627
|
-
notificationsList.forEach((notificationItem) => {
|
|
5628
|
-
if (notificationItem.closeByTime) {
|
|
5629
|
-
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
5630
|
-
}
|
|
5631
|
-
});
|
|
5632
|
-
// Show notifications on all requests errors.
|
|
5633
|
-
// Enable one time without disabling. Use "isLogging" on request config level
|
|
5634
|
-
// to disable notifications logger.
|
|
5635
|
-
if (isLogRequestsErrors) {
|
|
5636
|
-
common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
5637
|
-
log: (responseError) => {
|
|
5638
|
-
if (responseError.message) {
|
|
5639
|
-
// prevent from showing many network errors
|
|
5640
|
-
const errorListToDedupe = ['network'];
|
|
5641
|
-
const id = errorListToDedupe.includes(responseError.key)
|
|
5642
|
-
? responseError.key
|
|
5643
|
-
: undefined;
|
|
5644
|
-
showNotification({
|
|
5645
|
-
id: id,
|
|
5646
|
-
title: responseError.message,
|
|
5647
|
-
status: 'error',
|
|
5648
|
-
closeByTime: 4000,
|
|
5649
|
-
});
|
|
5650
|
-
}
|
|
5651
|
-
},
|
|
5652
|
-
};
|
|
5653
|
-
}
|
|
5654
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5655
|
-
}, []);
|
|
5656
|
-
return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
5657
|
-
}
|
|
5658
|
-
const statusToAppearanceList = {
|
|
5659
|
-
error: 'errorPrimary sizeS solid rounded',
|
|
5660
|
-
info: 'infoPrimary sizeS solid rounded',
|
|
5661
|
-
success: 'successPrimary sizeS solid rounded',
|
|
5662
|
-
warning: 'warningPrimary sizeS solid rounded',
|
|
5663
|
-
};
|
|
5664
|
-
function createNotification(notification, onClose) {
|
|
5665
|
-
// Default notification item properties
|
|
5666
|
-
let id = v4().split('-')[0];
|
|
5667
|
-
let title = '';
|
|
5668
|
-
let text = '';
|
|
5669
|
-
let closeIcon = '';
|
|
5670
|
-
let closeIconSrc = '';
|
|
5671
|
-
let type = 'float';
|
|
5672
|
-
let buttonLabel = '';
|
|
5673
|
-
let status = STATUSES.warning;
|
|
5674
|
-
let closeByTime = 4500;
|
|
5675
|
-
let appearance = statusToAppearanceList[status];
|
|
5676
|
-
let after = null;
|
|
5677
|
-
let isLoading = false;
|
|
5678
|
-
let closeIconAppearance = '';
|
|
5679
|
-
let onClickButton = () => { };
|
|
5680
|
-
if (typeof notification === 'string') {
|
|
5681
|
-
text = notification;
|
|
5682
|
-
}
|
|
5683
|
-
else if (typeof notification === 'object') {
|
|
5684
|
-
id = String(notification.id ?? id);
|
|
5685
|
-
title = notification.title ?? title;
|
|
5686
|
-
text = notification.text ?? text;
|
|
5687
|
-
closeIconAppearance =
|
|
5688
|
-
notification.closeIconAppearance ?? closeIconAppearance;
|
|
5689
|
-
type = notification.type ?? type;
|
|
5690
|
-
closeIcon = notification.closeIcon ?? closeIcon;
|
|
5691
|
-
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
5692
|
-
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
5693
|
-
onClickButton = notification.onClickButton ?? onClickButton;
|
|
5694
|
-
status = notification.status ?? status;
|
|
5695
|
-
closeByTime = notification.closeByTime ?? closeByTime;
|
|
5696
|
-
isLoading = notification.isLoading ?? isLoading;
|
|
5697
|
-
after = notification.after ?? after;
|
|
5698
|
-
appearance =
|
|
5699
|
-
notification.appearance ??
|
|
5700
|
-
statusToAppearanceList[notification.status] ??
|
|
5701
|
-
appearance;
|
|
5702
|
-
}
|
|
5703
|
-
return {
|
|
5704
|
-
id: id,
|
|
5705
|
-
appearance: appearance,
|
|
5706
|
-
type: type,
|
|
5707
|
-
title: title,
|
|
5708
|
-
status: status,
|
|
5709
|
-
text: text,
|
|
5710
|
-
buttonLabel: buttonLabel,
|
|
5711
|
-
after: after,
|
|
5712
|
-
closeByTime: closeByTime,
|
|
5713
|
-
closeIcon: closeIcon,
|
|
5714
|
-
closeIconAppearance: closeIconAppearance,
|
|
5715
|
-
closeIconSrc: closeIconSrc,
|
|
5716
|
-
isLoading: isLoading,
|
|
5717
|
-
onClickButton: onClickButton,
|
|
5718
|
-
onClose: onClose,
|
|
5719
|
-
};
|
|
5720
|
-
}
|
|
5721
|
-
|
|
5722
|
-
const UserDeviceContext = React.createContext({
|
|
5723
|
-
isMobile: false,
|
|
5724
|
-
isTablet: false,
|
|
5725
|
-
isDesktop: false,
|
|
5726
|
-
deviceCurrentMainType: '',
|
|
5727
|
-
deviceCurrentType: '',
|
|
5728
|
-
deviceTypesList: [],
|
|
5729
|
-
});
|
|
5730
|
-
const UIProvider = React.memo(function UIProvider(props) {
|
|
5731
|
-
const { userDeviceState = {}, children } = props;
|
|
5732
|
-
/** NOTE:
|
|
5733
|
-
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
5734
|
-
* when changing the device type(browser width), the hook will first "enable"
|
|
5735
|
-
* the new type(set true), and then "disable" the previous one(set false),
|
|
5736
|
-
* what provoke to double rendering, and in moment we have two different types as "true".
|
|
5737
|
-
* We will need to look at how to change this behavior.
|
|
5738
|
-
*/
|
|
5739
|
-
const allDevicesTypes = useMediaQueries(userDeviceState);
|
|
5740
|
-
const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
|
|
5741
|
-
const deviceCurrentMainType = (isMobile && 'mobile') ||
|
|
5742
|
-
(isTablet && 'tablet') ||
|
|
5743
|
-
(isDesktop && 'desktop') ||
|
|
5744
|
-
'';
|
|
5745
|
-
const [deviceCurrentType, deviceTypesList] = React.useMemo(() => {
|
|
5746
|
-
const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
|
|
5747
|
-
// In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
|
|
5748
|
-
let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
|
|
5749
|
-
// If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
|
|
5750
|
-
(key) => fullNamedDeviceTypes[key]);
|
|
5751
|
-
// Or set main type (e.g. "isMobile")
|
|
5752
|
-
if (!deviceCurrentType) {
|
|
5753
|
-
deviceCurrentType = deviceCurrentMainType;
|
|
5754
|
-
}
|
|
5755
|
-
deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
|
|
5756
|
-
// On server side render we doesn't known user device and we need to set special word
|
|
5757
|
-
return [deviceCurrentType || '_none_', deviceTypesList];
|
|
5758
|
-
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
|
|
5759
|
-
const deviceContextState = React.useMemo(() => {
|
|
5760
|
-
return {
|
|
5761
|
-
...allDevicesTypes,
|
|
5762
|
-
deviceCurrentMainType: deviceCurrentMainType,
|
|
5763
|
-
deviceCurrentType: deviceCurrentType,
|
|
5764
|
-
deviceTypesList: deviceTypesList,
|
|
5765
|
-
};
|
|
5766
|
-
}, [
|
|
5767
|
-
allDevicesTypes,
|
|
5768
|
-
deviceCurrentMainType,
|
|
5769
|
-
deviceCurrentType,
|
|
5770
|
-
deviceTypesList,
|
|
5771
|
-
]);
|
|
5772
|
-
React.useEffect(() => {
|
|
5773
|
-
setViewportProperty();
|
|
5774
|
-
window.addEventListener('resize', setViewportProperty);
|
|
5775
|
-
}, []);
|
|
5776
|
-
return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
|
|
5777
|
-
});
|
|
5778
|
-
|
|
5779
6129
|
exports.NotificationWrapper = NotificationWrapper;
|
|
5780
6130
|
exports.NotificationsProvider = NotificationsProvider;
|
|
5781
6131
|
exports.UIProvider = UIProvider;
|