intelicoreact 2.0.11 → 2.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Atomic/UI/Accordion/Accordion.interface.d.ts +17 -0
- package/dist/Atomic/UI/Accordion/index.d.ts +1 -1
- package/dist/classes.cjs.map +1 -1
- package/dist/classes.d.ts +6 -0
- package/dist/index.cjs +461 -990
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +6 -1
- package/dist/index.js +452 -981
- package/dist/index.js.map +4 -4
- package/dist/layout.cjs +0 -560
- package/dist/layout.cjs.map +4 -4
- package/dist/layout.d.ts +5 -2
- package/dist/layout.js +0 -560
- package/dist/layout.js.map +4 -4
- package/dist/router-ui.cjs +989 -0
- package/dist/router-ui.cjs.map +7 -0
- package/dist/router-ui.d.ts +20 -0
- package/dist/router-ui.js +957 -0
- package/dist/router-ui.js.map +7 -0
- package/dist/ui.cjs +897 -1275
- package/dist/ui.cjs.map +4 -4
- package/dist/ui.d.ts +4 -6
- package/dist/ui.js +867 -1245
- package/dist/ui.js.map +4 -4
- package/package.json +16 -1
- package/router-ui/package.json +5 -0
package/dist/ui.cjs
CHANGED
|
@@ -29,7 +29,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/ui.ts
|
|
30
30
|
var ui_exports = {};
|
|
31
31
|
__export(ui_exports, {
|
|
32
|
-
Accordion: () => Accordion_default2,
|
|
33
32
|
AccordionTable: () => AccordionTable_default,
|
|
34
33
|
AccordionText: () => AccordionText_default,
|
|
35
34
|
AdvTag: () => AdvTag_default,
|
|
@@ -38,7 +37,6 @@ __export(ui_exports, {
|
|
|
38
37
|
Arrow: () => Arrow_default,
|
|
39
38
|
Box: () => Box_default,
|
|
40
39
|
Button: () => Button_default,
|
|
41
|
-
ButtonsBar: () => ButtonsBar_default2,
|
|
42
40
|
CircleProgressBar: () => CircleProgressBar_default,
|
|
43
41
|
DateTime: () => DateTime_default,
|
|
44
42
|
DebugContainer: () => DebugContainer_default,
|
|
@@ -50,7 +48,6 @@ __export(ui_exports, {
|
|
|
50
48
|
ModalHOC: () => ModalHOC_default,
|
|
51
49
|
ModalTitle: () => ModalTitle_default,
|
|
52
50
|
MonoAccordion: () => MonoAccordion_default2,
|
|
53
|
-
NavLine: () => NavLine_default2,
|
|
54
51
|
PageTitle: () => PageTitle_default2,
|
|
55
52
|
Price: () => Price_default2,
|
|
56
53
|
PriceRange: () => PriceRange_default2,
|
|
@@ -67,342 +64,15 @@ __export(ui_exports, {
|
|
|
67
64
|
});
|
|
68
65
|
module.exports = __toCommonJS(ui_exports);
|
|
69
66
|
|
|
70
|
-
// src/Atomic/UI/Accordion/Accordion.tsx
|
|
71
|
-
var import_classnames3 = __toESM(require("classnames"), 1);
|
|
72
|
-
var import_react3 = require("react");
|
|
73
|
-
var Icons2 = __toESM(require("react-feather"), 1);
|
|
74
|
-
var import_react_router_dom2 = require("react-router-dom");
|
|
75
|
-
|
|
76
|
-
// src/Functions/utils.js
|
|
77
|
-
var import_react = require("react");
|
|
78
|
-
var import_moment_timezone = __toESM(require("moment-timezone"), 1);
|
|
79
|
-
|
|
80
|
-
// src/Constants/index.constants.js
|
|
81
|
-
var DEFAULT_COLORS = [
|
|
82
|
-
"#D9C1FF",
|
|
83
|
-
"#FFBAF0",
|
|
84
|
-
"#FFB8CE",
|
|
85
|
-
"#FFC3A2",
|
|
86
|
-
"#FFDB7C",
|
|
87
|
-
"#F9F871",
|
|
88
|
-
"#C3FCF1",
|
|
89
|
-
"#F6F2CB",
|
|
90
|
-
"#E0F8D1",
|
|
91
|
-
"#B1DFFB",
|
|
92
|
-
"#8DECFE",
|
|
93
|
-
"#76F7ED",
|
|
94
|
-
"#8AFEC8"
|
|
95
|
-
];
|
|
96
|
-
var KEYBOARD_KEY_CODES = {
|
|
97
|
-
Backspace: 8,
|
|
98
|
-
Delete: 46,
|
|
99
|
-
ARROW_LEFT: 37,
|
|
100
|
-
ARROW_RIGHT: 39
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
// src/Functions/utils.js
|
|
104
|
-
var getIsOnlyAnObject = (input) => {
|
|
105
|
-
return typeof input === "object" && // "отбивает" примитивы и функции
|
|
106
|
-
input instanceof Object && // "отбивает" null
|
|
107
|
-
!Array.isArray(input) && // "отбивает" массивы
|
|
108
|
-
!(input instanceof Set) && // "отбивает" сеты
|
|
109
|
-
!(input instanceof Map);
|
|
110
|
-
};
|
|
111
|
-
var handleObjectChange = (updateObject, updateFunction) => (data, prop = "", isNumber) => {
|
|
112
|
-
let value;
|
|
113
|
-
if (data?.target) {
|
|
114
|
-
value = data.target.type === "checkbox" ? data.target.checked : data.target.value;
|
|
115
|
-
} else value = data;
|
|
116
|
-
value = isNumber ? Number(value) : value;
|
|
117
|
-
const props = prop.split(".");
|
|
118
|
-
const currentObject = props.reduce((res, chapter, index) => {
|
|
119
|
-
if (props.length !== index + 1) res = res[chapter];
|
|
120
|
-
return res;
|
|
121
|
-
}, updateObject);
|
|
122
|
-
currentObject[props.pop()] = value;
|
|
123
|
-
updateFunction();
|
|
124
|
-
};
|
|
125
|
-
var useOutsideToggle = (ref, setOut, open) => {
|
|
126
|
-
function handleClickOutside(event) {
|
|
127
|
-
if (ref.current && !ref.current.contains(event.target)) {
|
|
128
|
-
setOut(open);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
(0, import_react.useEffect)(() => {
|
|
132
|
-
document.addEventListener("mouseup", handleClickOutside);
|
|
133
|
-
return () => {
|
|
134
|
-
document.removeEventListener("mouseup", handleClickOutside);
|
|
135
|
-
};
|
|
136
|
-
}, [ref]);
|
|
137
|
-
};
|
|
138
|
-
var getStyles = (el, prop) => {
|
|
139
|
-
if (!el) return null;
|
|
140
|
-
if (!prop) return window.getComputedStyle(el);
|
|
141
|
-
return window.getComputedStyle(el).getPropertyValue(prop);
|
|
142
|
-
};
|
|
143
|
-
var getColorById = (id, colors) => {
|
|
144
|
-
if (!id) return "#FF7D00";
|
|
145
|
-
const idToArr = Array.from(id);
|
|
146
|
-
const colorsArr = colors && colors.length > 0 ? colors : DEFAULT_COLORS;
|
|
147
|
-
let number = idToArr.reduce((acc, item) => {
|
|
148
|
-
if (Number(item)) {
|
|
149
|
-
return acc + Number(item);
|
|
150
|
-
}
|
|
151
|
-
return acc;
|
|
152
|
-
}, 0);
|
|
153
|
-
while (number >= colorsArr.length) {
|
|
154
|
-
number -= colorsArr.length;
|
|
155
|
-
}
|
|
156
|
-
return colorsArr[number];
|
|
157
|
-
};
|
|
158
|
-
var addBitDepthPoints = (value, step = 3) => {
|
|
159
|
-
const isFraction = value?.includes(".");
|
|
160
|
-
const valueBeforeDot = isFraction ? value?.slice(0, value?.indexOf(".")) : value;
|
|
161
|
-
const intPart = valueBeforeDot.split("").reverse().reduce(
|
|
162
|
-
(acc, item, idx) => idx % step === 0 && idx !== 0 ? [...acc, ",", item] : [...acc, item],
|
|
163
|
-
[]
|
|
164
|
-
).reverse().join("");
|
|
165
|
-
return isFraction ? intPart + value?.slice(value?.indexOf(".")) : intPart;
|
|
166
|
-
};
|
|
167
|
-
var firstLetterCapital = (str) => typeof str === "string" ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : str;
|
|
168
|
-
var capitalized = firstLetterCapital;
|
|
169
|
-
var checkedRef = (ref) => ref ? typeof ref === "function" ? (node) => ref(node) : ref : null;
|
|
170
|
-
String.prototype.longerThan = function(compareWith) {
|
|
171
|
-
return this?.length > compareWith?.length;
|
|
172
|
-
};
|
|
173
|
-
String.prototype.lastIndexEqualsTo = function(index) {
|
|
174
|
-
return this?.length - 1 === index;
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
// src/Atomic/UI/Accordion/AccordionItem.tsx
|
|
178
|
-
var import_classnames2 = __toESM(require("classnames"), 1);
|
|
179
|
-
var import_react2 = require("react");
|
|
180
|
-
var Icons = __toESM(require("react-feather"), 1);
|
|
181
|
-
var import_react_router_dom = require("react-router-dom");
|
|
182
|
-
|
|
183
|
-
// src/Atomic/UI/Status/Status.tsx
|
|
184
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
185
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
186
|
-
function defaultOnClick() {
|
|
187
|
-
}
|
|
188
|
-
var Status = ({
|
|
189
|
-
icon,
|
|
190
|
-
value,
|
|
191
|
-
label,
|
|
192
|
-
status,
|
|
193
|
-
disabled,
|
|
194
|
-
type,
|
|
195
|
-
active = 0,
|
|
196
|
-
pause = 0,
|
|
197
|
-
className,
|
|
198
|
-
noBackground,
|
|
199
|
-
children,
|
|
200
|
-
testId = "status",
|
|
201
|
-
onClick = defaultOnClick
|
|
202
|
-
}) => {
|
|
203
|
-
if (!status) return null;
|
|
204
|
-
const text = children && typeof children === "string" ? children : value || label || status;
|
|
205
|
-
const formattedLabel = text?.[0].toUpperCase() + text?.slice(1);
|
|
206
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick, "data-testid": testId, className: (0, import_classnames.default)({ disabled }, className), children: type === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: active === 0 && pause === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status status--error", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: active }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "status status--warning", children: [
|
|
207
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "status--number-active", children: active }),
|
|
208
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "color--gray-gull", children: " / " }),
|
|
209
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: pause > 0 ? "color--froly" : "color--gray-gull", children: pause })
|
|
210
|
-
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
211
|
-
"div",
|
|
212
|
-
{
|
|
213
|
-
className: (0, import_classnames.default)(
|
|
214
|
-
"status",
|
|
215
|
-
`status--${status}`,
|
|
216
|
-
{
|
|
217
|
-
"status--no-bg": noBackground && status === "pause",
|
|
218
|
-
"color--gray-gull": noBackground && status === "pause" && !className,
|
|
219
|
-
"j4": !!icon
|
|
220
|
-
},
|
|
221
|
-
className
|
|
222
|
-
),
|
|
223
|
-
children: [
|
|
224
|
-
icon,
|
|
225
|
-
formattedLabel
|
|
226
|
-
]
|
|
227
|
-
}
|
|
228
|
-
) });
|
|
229
|
-
};
|
|
230
|
-
var Status_default = Status;
|
|
231
|
-
|
|
232
|
-
// src/Atomic/UI/Status/index.ts
|
|
233
|
-
var Status_default2 = Status_default;
|
|
234
|
-
|
|
235
|
-
// src/Atomic/UI/Accordion/AccordionItem.tsx
|
|
236
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
237
|
-
var AccordionItem = ({
|
|
238
|
-
item,
|
|
239
|
-
onClick,
|
|
240
|
-
isOpen,
|
|
241
|
-
className,
|
|
242
|
-
children,
|
|
243
|
-
noChevron,
|
|
244
|
-
testId = "accordion-item"
|
|
245
|
-
}) => {
|
|
246
|
-
const Icon = Icons[item.icon];
|
|
247
|
-
const [maxHeight, setMaxHeight] = (0, import_react2.useState)(0);
|
|
248
|
-
const ref = (0, import_react2.useRef)(null);
|
|
249
|
-
const getItemsHeight = () => {
|
|
250
|
-
let itemHeight = 0;
|
|
251
|
-
ref.current?.childNodes.forEach((el) => {
|
|
252
|
-
itemHeight += el.offsetHeight;
|
|
253
|
-
});
|
|
254
|
-
return itemHeight + 20;
|
|
255
|
-
};
|
|
256
|
-
(0, import_react2.useEffect)(() => {
|
|
257
|
-
setMaxHeight(isOpen ? getItemsHeight() : 0);
|
|
258
|
-
}, [isOpen]);
|
|
259
|
-
const calculateStatusCount = () => {
|
|
260
|
-
return item?.rows?.reduce(
|
|
261
|
-
(acc, row) => {
|
|
262
|
-
const result = row.cols.reduce(
|
|
263
|
-
(accum, col) => ({
|
|
264
|
-
active: accum.active + (col.status === "active" ? 1 : 0),
|
|
265
|
-
pause: accum.pause + (col.status === "pause" ? 1 : 0)
|
|
266
|
-
}),
|
|
267
|
-
{ active: 0, pause: 0 }
|
|
268
|
-
);
|
|
269
|
-
return {
|
|
270
|
-
active: acc.active + result.active,
|
|
271
|
-
pause: acc.pause + result.pause
|
|
272
|
-
};
|
|
273
|
-
},
|
|
274
|
-
{ active: 0, pause: 0 }
|
|
275
|
-
);
|
|
276
|
-
};
|
|
277
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
278
|
-
"div",
|
|
279
|
-
{
|
|
280
|
-
"data-testid": testId,
|
|
281
|
-
className: (0, import_classnames2.default)("accordion--item", className),
|
|
282
|
-
role: "region",
|
|
283
|
-
"aria-labelledby": `accordion-title-${item.title}`,
|
|
284
|
-
children: [
|
|
285
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
286
|
-
"div",
|
|
287
|
-
{
|
|
288
|
-
className: (0, import_classnames2.default)("accordion--title-box", {
|
|
289
|
-
"accordion--title-open": isOpen
|
|
290
|
-
}),
|
|
291
|
-
onClick: () => onClick(!isOpen),
|
|
292
|
-
id: `accordion-title-${item.title}`,
|
|
293
|
-
role: "button",
|
|
294
|
-
"aria-expanded": isOpen,
|
|
295
|
-
"aria-controls": `accordion-content-${item.title}`,
|
|
296
|
-
tabIndex: 0,
|
|
297
|
-
children: [
|
|
298
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "j4 no-wrap", children: [
|
|
299
|
-
item?.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: (0, import_classnames2.default)("mr5", item?.className), "aria-hidden": "true" }),
|
|
300
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "accordion--title", children: item.title || "Menu Chapter" })
|
|
301
|
-
] }),
|
|
302
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "j6 accordion-title__right-box", children: [
|
|
303
|
-
item.status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mr5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
304
|
-
Status_default2,
|
|
305
|
-
{
|
|
306
|
-
type: item?.status.type,
|
|
307
|
-
value: item?.status.value,
|
|
308
|
-
status: item?.status.status,
|
|
309
|
-
active: calculateStatusCount()?.active,
|
|
310
|
-
pause: calculateStatusCount()?.pause
|
|
311
|
-
}
|
|
312
|
-
) }),
|
|
313
|
-
!noChevron && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
314
|
-
Icons.ChevronRight,
|
|
315
|
-
{
|
|
316
|
-
"aria-hidden": "true",
|
|
317
|
-
className: (0, import_classnames2.default)("accordion--title-chevron", {
|
|
318
|
-
"accordion--title-chevron-open": isOpen
|
|
319
|
-
})
|
|
320
|
-
}
|
|
321
|
-
)
|
|
322
|
-
] })
|
|
323
|
-
]
|
|
324
|
-
}
|
|
325
|
-
),
|
|
326
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
327
|
-
"div",
|
|
328
|
-
{
|
|
329
|
-
ref,
|
|
330
|
-
style: { maxHeight },
|
|
331
|
-
className: (0, import_classnames2.default)("accordion--content", {
|
|
332
|
-
"accordion--content-is-open": isOpen
|
|
333
|
-
}),
|
|
334
|
-
id: `accordion-content-${item.title}`,
|
|
335
|
-
role: "region",
|
|
336
|
-
"aria-labelledby": `accordion-title-${item.title}`,
|
|
337
|
-
children: item.children ? item.children.map((el) => {
|
|
338
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom.NavLink, { to: el.link, className: "accordion--content-item accordion--menu-link", children: el?.title || "Menu item" }, el.id);
|
|
339
|
-
}) : children
|
|
340
|
-
}
|
|
341
|
-
)
|
|
342
|
-
]
|
|
343
|
-
}
|
|
344
|
-
);
|
|
345
|
-
};
|
|
346
|
-
var AccordionItem_default = AccordionItem;
|
|
347
|
-
|
|
348
|
-
// src/Atomic/UI/Accordion/Accordion.tsx
|
|
349
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
350
|
-
var CN = "accordion";
|
|
351
|
-
var Accordion = ({
|
|
352
|
-
items,
|
|
353
|
-
className,
|
|
354
|
-
itemClassName,
|
|
355
|
-
isMenuHovered,
|
|
356
|
-
isOpen,
|
|
357
|
-
testId = CN
|
|
358
|
-
}) => {
|
|
359
|
-
const [data, setData] = (0, import_react3.useState)(items);
|
|
360
|
-
const onChange = handleObjectChange(setData, () => setData([...data]));
|
|
361
|
-
const handleArrayChange = (e, index, prop) => {
|
|
362
|
-
data[index][prop] = e;
|
|
363
|
-
onChange(data);
|
|
364
|
-
};
|
|
365
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames3.default)(CN, className), "data-testid": testId, role: "list", "aria-label": "Accordion list", children: items?.map((item, index) => {
|
|
366
|
-
const Icon = Icons2[item.icon];
|
|
367
|
-
return item.link ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
368
|
-
import_react_router_dom2.NavLink,
|
|
369
|
-
{
|
|
370
|
-
"data-testid": `${testId}-link-${index}`,
|
|
371
|
-
to: item.link,
|
|
372
|
-
className: (0, import_classnames3.default)("main-menu--item main-menu--items-box-title"),
|
|
373
|
-
children: [
|
|
374
|
-
item?.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: (0, import_classnames3.default)("mr5", item?.className) }),
|
|
375
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_classnames3.default)({ hidden: !isOpen && !isMenuHovered }), children: item?.title || "Link" })
|
|
376
|
-
]
|
|
377
|
-
},
|
|
378
|
-
index
|
|
379
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
380
|
-
AccordionItem_default,
|
|
381
|
-
{
|
|
382
|
-
testId: `${testId}-item-${index}`,
|
|
383
|
-
className: itemClassName,
|
|
384
|
-
item,
|
|
385
|
-
isOpen: !!item.isOpen,
|
|
386
|
-
onClick: (value) => handleArrayChange(value, index, "isOpen")
|
|
387
|
-
},
|
|
388
|
-
index
|
|
389
|
-
);
|
|
390
|
-
}) });
|
|
391
|
-
};
|
|
392
|
-
var Accordion_default = Accordion;
|
|
393
|
-
|
|
394
|
-
// src/Atomic/UI/Accordion/index.ts
|
|
395
|
-
var Accordion_default2 = Accordion_default;
|
|
396
|
-
|
|
397
67
|
// src/Atomic/UI/AccordionTable/AccordionTable.js
|
|
398
|
-
var
|
|
399
|
-
var
|
|
68
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
69
|
+
var import_classnames2 = __toESM(require("classnames"), 1);
|
|
400
70
|
var import_react_feather = require("react-feather");
|
|
401
71
|
|
|
402
72
|
// src/Atomic/UI/MonoAccordion/MonoAccordion.js
|
|
403
|
-
var
|
|
404
|
-
var
|
|
405
|
-
var
|
|
73
|
+
var import_react = __toESM(require("react"), 1);
|
|
74
|
+
var import_classnames = __toESM(require("classnames"), 1);
|
|
75
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
406
76
|
var RC = "mono-accordion";
|
|
407
77
|
var MonoAccordion = ({
|
|
408
78
|
titleJSX,
|
|
@@ -415,9 +85,9 @@ var MonoAccordion = ({
|
|
|
415
85
|
testId = "mono-accordion",
|
|
416
86
|
datasetProp = {}
|
|
417
87
|
}) => {
|
|
418
|
-
const [maxHeight, setMaxHeight] = (0,
|
|
419
|
-
const titleRef = (0,
|
|
420
|
-
const containerRef = (0,
|
|
88
|
+
const [maxHeight, setMaxHeight] = (0, import_react.useState)();
|
|
89
|
+
const titleRef = (0, import_react.useRef)();
|
|
90
|
+
const containerRef = (0, import_react.useRef)();
|
|
421
91
|
const setHeight = (value) => {
|
|
422
92
|
if (value !== void 0) setMaxHeight((state) => `${value}px`);
|
|
423
93
|
else
|
|
@@ -434,38 +104,38 @@ var MonoAccordion = ({
|
|
|
434
104
|
e?.stopPropagation();
|
|
435
105
|
} else return e;
|
|
436
106
|
};
|
|
437
|
-
(0,
|
|
107
|
+
(0, import_react.useEffect)(() => {
|
|
438
108
|
if (!isOpen) setHeight(0);
|
|
439
109
|
else setHeight();
|
|
440
110
|
}, [isOpen, children]);
|
|
441
|
-
return /* @__PURE__ */ (0,
|
|
111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
442
112
|
"div",
|
|
443
113
|
{
|
|
444
114
|
...datasetProp,
|
|
445
115
|
"data-testid": testId,
|
|
446
|
-
className: (0,
|
|
116
|
+
className: (0, import_classnames.default)(RC, className, {
|
|
447
117
|
[`${RC}_is-open`]: isOpen,
|
|
448
118
|
[`${RC}_disabled`]: disabled
|
|
449
119
|
}),
|
|
450
120
|
children: [
|
|
451
|
-
/* @__PURE__ */ (0,
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
452
122
|
"div",
|
|
453
123
|
{
|
|
454
124
|
className: `${RC}__head`,
|
|
455
125
|
onClick: handleClick,
|
|
456
126
|
children: [
|
|
457
|
-
/* @__PURE__ */ (0,
|
|
458
|
-
/* @__PURE__ */ (0,
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: titleRef, className: `${RC}__tile-container`, children: titleJSX }),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${RC}__icon-container`, children: icon })
|
|
459
129
|
]
|
|
460
130
|
}
|
|
461
131
|
),
|
|
462
|
-
/* @__PURE__ */ (0,
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
463
133
|
"div",
|
|
464
134
|
{
|
|
465
135
|
ref: containerRef,
|
|
466
136
|
style: { maxHeight },
|
|
467
|
-
className: (0,
|
|
468
|
-
children: /* @__PURE__ */ (0,
|
|
137
|
+
className: (0, import_classnames.default)(`${RC}__container`),
|
|
138
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${RC}__content-wrapper`, children })
|
|
469
139
|
}
|
|
470
140
|
)
|
|
471
141
|
]
|
|
@@ -475,7 +145,7 @@ var MonoAccordion = ({
|
|
|
475
145
|
var MonoAccordion_default = MonoAccordion;
|
|
476
146
|
|
|
477
147
|
// src/Atomic/UI/AccordionTable/AccordionTable.js
|
|
478
|
-
var
|
|
148
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
479
149
|
var AccordionTable = ({
|
|
480
150
|
className,
|
|
481
151
|
header,
|
|
@@ -486,8 +156,8 @@ var AccordionTable = ({
|
|
|
486
156
|
},
|
|
487
157
|
sortParams
|
|
488
158
|
}) => {
|
|
489
|
-
const [accordions, setAccordions] = (0,
|
|
490
|
-
const sortedColClassName = (item) => (0,
|
|
159
|
+
const [accordions, setAccordions] = (0, import_react2.useState)(items);
|
|
160
|
+
const sortedColClassName = (item) => (0, import_classnames2.default)(
|
|
491
161
|
"accordion-table__header-item",
|
|
492
162
|
item.className,
|
|
493
163
|
{
|
|
@@ -530,16 +200,16 @@ var AccordionTable = ({
|
|
|
530
200
|
};
|
|
531
201
|
const renderTd = (tr) => {
|
|
532
202
|
return Object.entries(tr)?.map(([key, value]) => {
|
|
533
|
-
return key === "promoDetails" || key === "disclosure" ? null : /* @__PURE__ */ (0,
|
|
203
|
+
return key === "promoDetails" || key === "disclosure" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
534
204
|
"div",
|
|
535
205
|
{
|
|
536
206
|
style: { flexBasis: `${getHeaderItem(key)?.width}%` },
|
|
537
|
-
className: (0,
|
|
207
|
+
className: (0, import_classnames2.default)(
|
|
538
208
|
"accordion-table__td",
|
|
539
209
|
`accordion-table__td--${key}`,
|
|
540
210
|
getHeaderItem(key)?.className
|
|
541
211
|
),
|
|
542
|
-
children: /* @__PURE__ */ (0,
|
|
212
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
543
213
|
"p",
|
|
544
214
|
{
|
|
545
215
|
className: "accordion-table__statistics-td-value",
|
|
@@ -554,10 +224,10 @@ var AccordionTable = ({
|
|
|
554
224
|
};
|
|
555
225
|
const renderTr = (rows) => {
|
|
556
226
|
return rows?.map((row, index) => {
|
|
557
|
-
return /* @__PURE__ */ (0,
|
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
558
228
|
"div",
|
|
559
229
|
{
|
|
560
|
-
className: (0,
|
|
230
|
+
className: (0, import_classnames2.default)(
|
|
561
231
|
"accordion-table__tr",
|
|
562
232
|
{
|
|
563
233
|
"accordion-table__tr-with-promo": row.promoDetails || row.cols?.promoDetails
|
|
@@ -565,13 +235,13 @@ var AccordionTable = ({
|
|
|
565
235
|
row.className
|
|
566
236
|
),
|
|
567
237
|
children: [
|
|
568
|
-
/* @__PURE__ */ (0,
|
|
569
|
-
row.promoDetails || row.cols?.promoDetails ? /* @__PURE__ */ (0,
|
|
570
|
-
/* @__PURE__ */ (0,
|
|
571
|
-
/* @__PURE__ */ (0,
|
|
238
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "df w100", children: renderTd(row.cols || row) }),
|
|
239
|
+
row.promoDetails || row.cols?.promoDetails ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__tr-promo-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "accordion-table__tr-promo", children: [
|
|
240
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.Tag, { className: "tr-promo-icon", width: 16, height: 16 }),
|
|
241
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "tr-promo-label", children: "PROMOTION" }),
|
|
572
242
|
row.promoDetails || row.cols?.promoDetails
|
|
573
243
|
] }) }) : null,
|
|
574
|
-
row.disclosure || row.cols?.disclosure ? /* @__PURE__ */ (0,
|
|
244
|
+
row.disclosure || row.cols?.disclosure ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__tr-promo-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__tr-promo accordion-table__tr-promo-disclosure", children: row.disclosure || row.cols?.disclosure }) }) : null
|
|
575
245
|
]
|
|
576
246
|
},
|
|
577
247
|
index
|
|
@@ -579,34 +249,34 @@ var AccordionTable = ({
|
|
|
579
249
|
});
|
|
580
250
|
};
|
|
581
251
|
const defineAccordionTitle = (row) => {
|
|
582
|
-
return /* @__PURE__ */ (0,
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
583
253
|
"div",
|
|
584
254
|
{
|
|
585
255
|
onClick: (e) => handle.accordionChange(row.key, e),
|
|
586
256
|
className: "accordion-table__accordion-label-box",
|
|
587
257
|
children: [
|
|
588
|
-
/* @__PURE__ */ (0,
|
|
589
|
-
/* @__PURE__ */ (0,
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "accordion-table__accordion-label-wrapper j4", children: [
|
|
259
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
590
260
|
import_react_feather.ChevronDown,
|
|
591
261
|
{
|
|
592
262
|
width: 8,
|
|
593
263
|
height: 4,
|
|
594
|
-
className: (0,
|
|
264
|
+
className: (0, import_classnames2.default)("accordion-label-box__icon", {
|
|
595
265
|
"accordion-label-box__icon--open": row.isOpen
|
|
596
266
|
})
|
|
597
267
|
}
|
|
598
268
|
),
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
600
|
-
row.statistics && /* @__PURE__ */ (0,
|
|
601
|
-
return /* @__PURE__ */ (0,
|
|
269
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "accordion-label-box__label", children: row.label }),
|
|
270
|
+
row.statistics && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_classnames2.default)("accordion-table__tr", row.className), children: Object.entries(row.statistics).map(([key, value]) => {
|
|
271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
602
272
|
"div",
|
|
603
273
|
{
|
|
604
274
|
style: { width: `${getHeaderItem(key)?.width}%` },
|
|
605
|
-
className: (0,
|
|
275
|
+
className: (0, import_classnames2.default)(
|
|
606
276
|
"accordion-table__statistics-td",
|
|
607
277
|
getHeaderItem(key)?.className
|
|
608
278
|
),
|
|
609
|
-
children: /* @__PURE__ */ (0,
|
|
279
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__statistics-td-value-wrapper", children: key === "status" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__statistics-td-value", children: value }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
610
280
|
"p",
|
|
611
281
|
{
|
|
612
282
|
className: "accordion-table__statistics-td-value",
|
|
@@ -624,33 +294,33 @@ var AccordionTable = ({
|
|
|
624
294
|
}
|
|
625
295
|
);
|
|
626
296
|
};
|
|
627
|
-
(0,
|
|
297
|
+
(0, import_react2.useEffect)(() => {
|
|
628
298
|
setAccordions(items);
|
|
629
299
|
}, [items]);
|
|
630
|
-
return /* @__PURE__ */ (0,
|
|
631
|
-
/* @__PURE__ */ (0,
|
|
632
|
-
return /* @__PURE__ */ (0,
|
|
300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_classnames2.default)("accordion-table", className), children: [
|
|
301
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__header", children: header?.map((item) => {
|
|
302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
633
303
|
"div",
|
|
634
304
|
{
|
|
635
305
|
style: { flexBasis: `${item.width}%` },
|
|
636
306
|
className: sortedColClassName(item),
|
|
637
307
|
onClick: () => !item.noSort && handle.setSort(item.key),
|
|
638
308
|
children: [
|
|
639
|
-
sortParams && item.key === sortParams.key && sortParams.key !== "actions" && (sortParams.direction === "DESC" ? /* @__PURE__ */ (0,
|
|
309
|
+
sortParams && item.key === sortParams.key && sortParams.key !== "actions" && (sortParams.direction === "DESC" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.ArrowDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.ArrowUp, { size: 16 })),
|
|
640
310
|
item.label
|
|
641
311
|
]
|
|
642
312
|
},
|
|
643
313
|
item.key
|
|
644
314
|
);
|
|
645
315
|
}) }),
|
|
646
|
-
/* @__PURE__ */ (0,
|
|
647
|
-
return /* @__PURE__ */ (0,
|
|
316
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "accordion-table__body", children: accordions?.map((accordion) => {
|
|
317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
648
318
|
MonoAccordion_default,
|
|
649
319
|
{
|
|
650
320
|
testId,
|
|
651
321
|
onClick: (e) => handle.accordionChange(accordion.key, e),
|
|
652
322
|
isOpen: accordion.isOpen,
|
|
653
|
-
className: (0,
|
|
323
|
+
className: (0, import_classnames2.default)(
|
|
654
324
|
"accordion-table__body-accordion",
|
|
655
325
|
{
|
|
656
326
|
"accordion-table__body-accordion--closed": !accordion.isOpen
|
|
@@ -668,12 +338,12 @@ var AccordionTable = ({
|
|
|
668
338
|
var AccordionTable_default = AccordionTable;
|
|
669
339
|
|
|
670
340
|
// src/Atomic/UI/AccordionText/AccordionText.js
|
|
671
|
-
var
|
|
672
|
-
var
|
|
673
|
-
var
|
|
341
|
+
var import_react3 = require("react");
|
|
342
|
+
var import_react4 = __toESM(require("react"), 1);
|
|
343
|
+
var import_classnames3 = __toESM(require("classnames"), 1);
|
|
674
344
|
var import_react_feather2 = require("react-feather");
|
|
675
|
-
var
|
|
676
|
-
var defaultText = /* @__PURE__ */ (0,
|
|
345
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
346
|
+
var defaultText = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." });
|
|
677
347
|
var AccordionText = ({
|
|
678
348
|
isDefaultOpen = false,
|
|
679
349
|
isOuterOpen = false,
|
|
@@ -681,13 +351,13 @@ var AccordionText = ({
|
|
|
681
351
|
text = defaultText,
|
|
682
352
|
shortText = null
|
|
683
353
|
}) => {
|
|
684
|
-
const bodyRef = (0,
|
|
685
|
-
const [isOpen, setIsOpen] = (0,
|
|
686
|
-
const [isNeedTrimText, setIsNeedTrimText] = (0,
|
|
687
|
-
(0,
|
|
354
|
+
const bodyRef = (0, import_react3.useRef)(null);
|
|
355
|
+
const [isOpen, setIsOpen] = (0, import_react3.useState)(isDefaultOpen);
|
|
356
|
+
const [isNeedTrimText, setIsNeedTrimText] = (0, import_react3.useState)(false);
|
|
357
|
+
(0, import_react3.useEffect)(() => {
|
|
688
358
|
setIsOpen(isOuterOpen);
|
|
689
359
|
}, [isOuterOpen]);
|
|
690
|
-
(0,
|
|
360
|
+
(0, import_react3.useEffect)(() => {
|
|
691
361
|
const checkEllipsis = () => {
|
|
692
362
|
if (bodyRef.current) {
|
|
693
363
|
setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
|
|
@@ -706,25 +376,25 @@ var AccordionText = ({
|
|
|
706
376
|
}
|
|
707
377
|
};
|
|
708
378
|
}, [text]);
|
|
709
|
-
return /* @__PURE__ */ (0,
|
|
379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
710
380
|
"div",
|
|
711
381
|
{
|
|
712
|
-
className: (0,
|
|
382
|
+
className: (0, import_classnames3.default)("accordion-text", className, {
|
|
713
383
|
"accordion-text--open": isOpen
|
|
714
384
|
}),
|
|
715
385
|
onClick: () => setIsOpen((prevIsOpen) => !prevIsOpen),
|
|
716
386
|
children: [
|
|
717
|
-
/* @__PURE__ */ (0,
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
718
388
|
"div",
|
|
719
389
|
{
|
|
720
|
-
className: (0,
|
|
390
|
+
className: (0, import_classnames3.default)("accordion-text__body", {
|
|
721
391
|
"accordion-text__body--trim-text": isNeedTrimText && !isOpen
|
|
722
392
|
}),
|
|
723
393
|
ref: bodyRef,
|
|
724
394
|
children: shortText ? isOpen ? text : shortText : text
|
|
725
395
|
}
|
|
726
396
|
),
|
|
727
|
-
/* @__PURE__ */ (0,
|
|
397
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "accordion-text__toggle", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_feather2.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_feather2.ChevronDown, {}) })
|
|
728
398
|
]
|
|
729
399
|
}
|
|
730
400
|
);
|
|
@@ -732,40 +402,40 @@ var AccordionText = ({
|
|
|
732
402
|
var AccordionText_default = AccordionText;
|
|
733
403
|
|
|
734
404
|
// src/Atomic/UI/AdvancedTag/AdvancedTags.tsx
|
|
735
|
-
var
|
|
736
|
-
var
|
|
405
|
+
var import_classnames7 = __toESM(require("classnames"), 1);
|
|
406
|
+
var import_react7 = require("react");
|
|
737
407
|
|
|
738
408
|
// src/Atomic/UI/Tag/Tag.tsx
|
|
739
|
-
var
|
|
740
|
-
var
|
|
409
|
+
var import_classnames5 = __toESM(require("classnames"), 1);
|
|
410
|
+
var import_react5 = require("react");
|
|
741
411
|
var import_react_dom = require("react-dom");
|
|
742
412
|
var import_react_feather3 = require("react-feather");
|
|
743
413
|
|
|
744
414
|
// src/Atomic/Layout/Spinner/Spinner.tsx
|
|
745
|
-
var
|
|
746
|
-
var
|
|
747
|
-
var
|
|
748
|
-
var Spinner = ({ size = null, className, testId =
|
|
749
|
-
return /* @__PURE__ */ (0,
|
|
415
|
+
var import_classnames4 = __toESM(require("classnames"), 1);
|
|
416
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
417
|
+
var CN = "loader-box";
|
|
418
|
+
var Spinner = ({ size = null, className, testId = CN }) => {
|
|
419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
750
420
|
"div",
|
|
751
421
|
{
|
|
752
422
|
role: "status",
|
|
753
423
|
"aria-live": "polite",
|
|
754
424
|
"aria-busy": "true",
|
|
755
425
|
"data-testid": testId,
|
|
756
|
-
className: (0,
|
|
757
|
-
|
|
426
|
+
className: (0, import_classnames4.default)(
|
|
427
|
+
CN,
|
|
758
428
|
{
|
|
759
429
|
j5: size !== "small",
|
|
760
430
|
j8: size === "small"
|
|
761
431
|
},
|
|
762
432
|
className
|
|
763
433
|
),
|
|
764
|
-
children: /* @__PURE__ */ (0,
|
|
765
|
-
/* @__PURE__ */ (0,
|
|
766
|
-
/* @__PURE__ */ (0,
|
|
767
|
-
/* @__PURE__ */ (0,
|
|
768
|
-
/* @__PURE__ */ (0,
|
|
434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_classnames4.default)("lds-ring", { [`lds-ring_${size}`]: size }), children: [
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {}),
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {}),
|
|
437
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {}),
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {})
|
|
769
439
|
] })
|
|
770
440
|
}
|
|
771
441
|
);
|
|
@@ -776,9 +446,9 @@ var Spinner_default = Spinner;
|
|
|
776
446
|
var Spinner_default2 = Spinner_default;
|
|
777
447
|
|
|
778
448
|
// src/Atomic/UI/Tag/Tag.tsx
|
|
779
|
-
var
|
|
780
|
-
var
|
|
781
|
-
function
|
|
449
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
450
|
+
var CN2 = "tag";
|
|
451
|
+
function defaultOnClick() {
|
|
782
452
|
}
|
|
783
453
|
var Tag2 = ({
|
|
784
454
|
value,
|
|
@@ -795,15 +465,15 @@ var Tag2 = ({
|
|
|
795
465
|
id,
|
|
796
466
|
isUseInTable,
|
|
797
467
|
isNoDismiss = true,
|
|
798
|
-
onClick =
|
|
799
|
-
testId =
|
|
468
|
+
onClick = defaultOnClick,
|
|
469
|
+
testId = CN2
|
|
800
470
|
}) => {
|
|
801
|
-
const tagRef = (0,
|
|
802
|
-
const [isTagHover, setIsTagHover] = (0,
|
|
803
|
-
const [isTagPopupOpened, setIsTagPopupOpened] = (0,
|
|
471
|
+
const tagRef = (0, import_react5.useRef)(null);
|
|
472
|
+
const [isTagHover, setIsTagHover] = (0, import_react5.useState)(false);
|
|
473
|
+
const [isTagPopupOpened, setIsTagPopupOpened] = (0, import_react5.useState)(false);
|
|
804
474
|
const { x, y, height, width } = tagRef?.current?.getBoundingClientRect() ?? {};
|
|
805
475
|
const { scrollY } = window;
|
|
806
|
-
const tagPopupStyles = (0,
|
|
476
|
+
const tagPopupStyles = (0, import_react5.useMemo)(() => {
|
|
807
477
|
if (!isTagPopupOpened || !tagRef?.current) return {};
|
|
808
478
|
const { x: x2, y: y2, height: height2, width: width2 } = tagRef?.current?.getBoundingClientRect();
|
|
809
479
|
return {
|
|
@@ -812,7 +482,7 @@ var Tag2 = ({
|
|
|
812
482
|
transform: `translate(calc(-1 * calc(100% - ${width2 / 2 + 22}px)), ${height2 + 10}px)`
|
|
813
483
|
};
|
|
814
484
|
}, [isTagPopupOpened, x, y, width, height, scrollY]);
|
|
815
|
-
const tagLabelStyle = (0,
|
|
485
|
+
const tagLabelStyle = (0, import_react5.useMemo)(() => {
|
|
816
486
|
const styleObj = {};
|
|
817
487
|
const bgColor = style?.backgroundColor ?? style?.background;
|
|
818
488
|
if (bgColor === "#242424") {
|
|
@@ -834,13 +504,13 @@ var Tag2 = ({
|
|
|
834
504
|
const handleClickOutside = () => {
|
|
835
505
|
setIsTagPopupOpened(false);
|
|
836
506
|
};
|
|
837
|
-
(0,
|
|
507
|
+
(0, import_react5.useEffect)(() => {
|
|
838
508
|
document.addEventListener("click", handleClickOutside, true);
|
|
839
509
|
return () => {
|
|
840
510
|
document.removeEventListener("click", handleClickOutside, true);
|
|
841
511
|
};
|
|
842
512
|
}, []);
|
|
843
|
-
(0,
|
|
513
|
+
(0, import_react5.useEffect)(() => {
|
|
844
514
|
const handleScroll = () => {
|
|
845
515
|
setIsTagPopupOpened(false);
|
|
846
516
|
};
|
|
@@ -849,7 +519,7 @@ var Tag2 = ({
|
|
|
849
519
|
window.removeEventListener("scroll", handleScroll, true);
|
|
850
520
|
};
|
|
851
521
|
}, []);
|
|
852
|
-
return /* @__PURE__ */ (0,
|
|
522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
853
523
|
"div",
|
|
854
524
|
{
|
|
855
525
|
onMouseEnter: () => setIsTagHover(true),
|
|
@@ -857,15 +527,15 @@ var Tag2 = ({
|
|
|
857
527
|
"data-testid": testId,
|
|
858
528
|
role: "listitem",
|
|
859
529
|
"aria-label": `Tag: ${label || name}`,
|
|
860
|
-
className: (0,
|
|
530
|
+
className: (0, import_classnames5.default)(CN2, className, { "tag-warn": warning }),
|
|
861
531
|
style: style ?? {},
|
|
862
532
|
onClick: (event) => handle.onTagClick(event),
|
|
863
533
|
ref: tagRef,
|
|
864
534
|
children: [
|
|
865
|
-
warning && typeof warning === "string" && /* @__PURE__ */ (0,
|
|
866
|
-
warning && typeof warning === "string" && isTagHover && isWarningHint && /* @__PURE__ */ (0,
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
868
|
-
removeItem && !isNoDismiss && /* @__PURE__ */ (0,
|
|
535
|
+
warning && typeof warning === "string" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_feather3.AlertTriangle, { className: "advanced-tags--warning-icon mr5", "aria-label": "Warning" }),
|
|
536
|
+
warning && typeof warning === "string" && isTagHover && isWarningHint && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tag__warn-hint", role: "tooltip", children: warning }),
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tag__label", style: tagLabelStyle, children: label || name }),
|
|
538
|
+
removeItem && !isNoDismiss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
869
539
|
"button",
|
|
870
540
|
{
|
|
871
541
|
type: "button",
|
|
@@ -876,11 +546,11 @@ var Tag2 = ({
|
|
|
876
546
|
},
|
|
877
547
|
"aria-label": `Remove ${label || name}`,
|
|
878
548
|
className: "tag__button",
|
|
879
|
-
children: /* @__PURE__ */ (0,
|
|
549
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_feather3.X, { className: "color--text" })
|
|
880
550
|
}
|
|
881
551
|
),
|
|
882
552
|
isTagPopupOpened && (0, import_react_dom.createPortal)(
|
|
883
|
-
/* @__PURE__ */ (0,
|
|
553
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id: `tagPopup${value}`, className: (0, import_classnames5.default)("tag__popup", popupClassName), style: tagPopupStyles, children: !popupInfoContent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner_default2, { size: "small" }) : popupInfoContent }),
|
|
884
554
|
document.getElementById("root")
|
|
885
555
|
)
|
|
886
556
|
]
|
|
@@ -890,10 +560,10 @@ var Tag2 = ({
|
|
|
890
560
|
var Tag_default = Tag2;
|
|
891
561
|
|
|
892
562
|
// src/Atomic/UI/AdvancedTag/AdvTag.tsx
|
|
893
|
-
var
|
|
894
|
-
var
|
|
563
|
+
var import_classnames6 = __toESM(require("classnames"), 1);
|
|
564
|
+
var import_react6 = require("react");
|
|
895
565
|
var import_react_feather4 = require("react-feather");
|
|
896
|
-
var
|
|
566
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
897
567
|
var AdvTag = ({
|
|
898
568
|
item,
|
|
899
569
|
className,
|
|
@@ -917,19 +587,19 @@ var AdvTag = ({
|
|
|
917
587
|
},
|
|
918
588
|
type
|
|
919
589
|
} = item;
|
|
920
|
-
const [isOpen, setIsOpen] = (0,
|
|
921
|
-
const [clickedWarning, setClickedWarning] = (0,
|
|
922
|
-
const hintRef = (0,
|
|
923
|
-
const activeNumberClass = (0,
|
|
590
|
+
const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
|
|
591
|
+
const [clickedWarning, setClickedWarning] = (0, import_react6.useState)("");
|
|
592
|
+
const hintRef = (0, import_react6.useRef)(null);
|
|
593
|
+
const activeNumberClass = (0, import_classnames6.default)("strong", {
|
|
924
594
|
"color--pause": active === 0,
|
|
925
595
|
"color--green-haze": active > 0
|
|
926
596
|
});
|
|
927
|
-
const pauseNumberClass = (0,
|
|
597
|
+
const pauseNumberClass = (0, import_classnames6.default)("strong", {
|
|
928
598
|
"color--pause": pause === 0,
|
|
929
599
|
"color--light-red": pause > 0
|
|
930
600
|
});
|
|
931
601
|
const isEmptyEntitys = isEntityAndCounter && (!entityAndCounter?.counter || entityAndCounter.counter === 0) || !isEntityAndCounter && (warnLeft || !merchants);
|
|
932
|
-
const advancedTagClass = (0,
|
|
602
|
+
const advancedTagClass = (0, import_classnames6.default)("advanced-tags", {
|
|
933
603
|
"advanced-tags--error": isEmptyEntitys
|
|
934
604
|
}, className);
|
|
935
605
|
const onWarningClick = (warn) => {
|
|
@@ -941,22 +611,22 @@ var AdvTag = ({
|
|
|
941
611
|
setIsOpen(false);
|
|
942
612
|
}
|
|
943
613
|
};
|
|
944
|
-
(0,
|
|
614
|
+
(0, import_react6.useEffect)(() => {
|
|
945
615
|
document.addEventListener("click", handleClickOutside, true);
|
|
946
616
|
return () => {
|
|
947
617
|
document.removeEventListener("click", handleClickOutside, true);
|
|
948
618
|
};
|
|
949
619
|
}, []);
|
|
950
620
|
if (!item) return null;
|
|
951
|
-
const renderClassicTag = () => /* @__PURE__ */ (0,
|
|
952
|
-
warnLeft && /* @__PURE__ */ (0,
|
|
621
|
+
const renderClassicTag = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-testid": testId, className: advancedTagClass, ref: hintRef, children: [
|
|
622
|
+
warnLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
953
623
|
"div",
|
|
954
624
|
{
|
|
955
625
|
"data-testid": `${testId}-left`,
|
|
956
626
|
className: "advanced-tags--warning-icon-wrapper",
|
|
957
627
|
onMouseEnter: () => onWarningClick("warnLeft"),
|
|
958
628
|
onMouseLeave: () => setIsOpen(false),
|
|
959
|
-
children: /* @__PURE__ */ (0,
|
|
629
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
960
630
|
import_react_feather4.AlertTriangle,
|
|
961
631
|
{
|
|
962
632
|
width: 16,
|
|
@@ -966,23 +636,23 @@ var AdvTag = ({
|
|
|
966
636
|
)
|
|
967
637
|
}
|
|
968
638
|
),
|
|
969
|
-
labelLeft && /* @__PURE__ */ (0,
|
|
970
|
-
labelRight && /* @__PURE__ */ (0,
|
|
971
|
-
type !== "simple" && /* @__PURE__ */ (0,
|
|
972
|
-
type !== "simple" && /* @__PURE__ */ (0,
|
|
973
|
-
/* @__PURE__ */ (0,
|
|
974
|
-
/* @__PURE__ */ (0,
|
|
975
|
-
/* @__PURE__ */ (0,
|
|
639
|
+
labelLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr5", children: labelLeft }),
|
|
640
|
+
labelRight && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: labelRight }),
|
|
641
|
+
type !== "simple" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml5 mr5", children: "|" }),
|
|
642
|
+
type !== "simple" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "df", children: [
|
|
643
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: activeNumberClass, children: active }),
|
|
644
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "strong color--pause", children: "/" }),
|
|
645
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: pauseNumberClass, children: pause })
|
|
976
646
|
] }),
|
|
977
|
-
type !== "simple" && /* @__PURE__ */ (0,
|
|
978
|
-
merchants ? /* @__PURE__ */ (0,
|
|
647
|
+
type !== "simple" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml5 mr5", children: "|" }),
|
|
648
|
+
merchants ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: merchants }) : type !== "simple" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
979
649
|
"div",
|
|
980
650
|
{
|
|
981
651
|
"data-testid": `${testId}-right`,
|
|
982
652
|
className: "advanced-tags--warning-icon-wrapper",
|
|
983
653
|
onMouseEnter: () => onWarningClick("warnRight"),
|
|
984
654
|
onMouseLeave: () => setIsOpen(false),
|
|
985
|
-
children: /* @__PURE__ */ (0,
|
|
655
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
986
656
|
import_react_feather4.AlertTriangle,
|
|
987
657
|
{
|
|
988
658
|
width: 16,
|
|
@@ -992,20 +662,20 @@ var AdvTag = ({
|
|
|
992
662
|
)
|
|
993
663
|
}
|
|
994
664
|
),
|
|
995
|
-
isOpen && warnLeftMsg && clickedWarning === "warnLeft" && /* @__PURE__ */ (0,
|
|
665
|
+
isOpen && warnLeftMsg && clickedWarning === "warnLeft" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
996
666
|
"span",
|
|
997
667
|
{
|
|
998
|
-
className: (0,
|
|
668
|
+
className: (0, import_classnames6.default)(
|
|
999
669
|
"advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
|
|
1000
670
|
{ "advanced-tags__warn-text--warnLeft--to-top": toTop }
|
|
1001
671
|
),
|
|
1002
672
|
children: warnLeftMsg
|
|
1003
673
|
}
|
|
1004
674
|
),
|
|
1005
|
-
isOpen && warnRightMsg && clickedWarning === "warnRight" && /* @__PURE__ */ (0,
|
|
675
|
+
isOpen && warnRightMsg && clickedWarning === "warnRight" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1006
676
|
"span",
|
|
1007
677
|
{
|
|
1008
|
-
className: (0,
|
|
678
|
+
className: (0, import_classnames6.default)(
|
|
1009
679
|
"advanced-tags__warn-text",
|
|
1010
680
|
"advanced-tags__warn-text--warnRight",
|
|
1011
681
|
{ "advanced-tags__warn-text--warnRight--to-top": toTop }
|
|
@@ -1016,15 +686,15 @@ var AdvTag = ({
|
|
|
1016
686
|
] });
|
|
1017
687
|
const renderWithEntityAndCounterTag = () => {
|
|
1018
688
|
const isNullcounter = entityAndCounter?.counter?.toString() === "0";
|
|
1019
|
-
return /* @__PURE__ */ (0,
|
|
1020
|
-
isNullcounter && /* @__PURE__ */ (0,
|
|
689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-testid": testId, className: advancedTagClass, ref: hintRef, children: [
|
|
690
|
+
isNullcounter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1021
691
|
"div",
|
|
1022
692
|
{
|
|
1023
693
|
"data-testid": `${testId}-left`,
|
|
1024
694
|
className: "advanced-tags--warning-icon-wrapper",
|
|
1025
695
|
onMouseEnter: () => onWarningClick("warnLeft"),
|
|
1026
696
|
onMouseLeave: () => setIsOpen(false),
|
|
1027
|
-
children: /* @__PURE__ */ (0,
|
|
697
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1028
698
|
import_react_feather4.AlertTriangle,
|
|
1029
699
|
{
|
|
1030
700
|
width: 16,
|
|
@@ -1034,21 +704,21 @@ var AdvTag = ({
|
|
|
1034
704
|
)
|
|
1035
705
|
}
|
|
1036
706
|
),
|
|
1037
|
-
isOpen && entityAndCounter?.nullCounterMessage && clickedWarning === "warnLeft" && /* @__PURE__ */ (0,
|
|
707
|
+
isOpen && entityAndCounter?.nullCounterMessage && clickedWarning === "warnLeft" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1038
708
|
"span",
|
|
1039
709
|
{
|
|
1040
|
-
className: (0,
|
|
710
|
+
className: (0, import_classnames6.default)(
|
|
1041
711
|
"advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
|
|
1042
712
|
{ "advanced-tags__warn-text--warnLeft--to-top": toTop }
|
|
1043
713
|
),
|
|
1044
714
|
children: entityAndCounter.nullCounterMessage
|
|
1045
715
|
}
|
|
1046
716
|
),
|
|
1047
|
-
entityAndCounter?.title && /* @__PURE__ */ (0,
|
|
1048
|
-
/* @__PURE__ */ (0,
|
|
717
|
+
entityAndCounter?.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr5", children: entityAndCounter.title }),
|
|
718
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1049
719
|
"div",
|
|
1050
720
|
{
|
|
1051
|
-
className: (0,
|
|
721
|
+
className: (0, import_classnames6.default)("advanced-tags__counter", {
|
|
1052
722
|
"advanced-tags__counter--null": isNullcounter,
|
|
1053
723
|
"advanced-tags__counter--bold": !isNullcounter
|
|
1054
724
|
}),
|
|
@@ -1062,7 +732,7 @@ var AdvTag = ({
|
|
|
1062
732
|
var AdvTag_default = AdvTag;
|
|
1063
733
|
|
|
1064
734
|
// src/Atomic/UI/AdvancedTag/AdvancedTags.tsx
|
|
1065
|
-
var
|
|
735
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1066
736
|
var AdvancedTags = ({
|
|
1067
737
|
items,
|
|
1068
738
|
noItemsTagLabel,
|
|
@@ -1070,26 +740,26 @@ var AdvancedTags = ({
|
|
|
1070
740
|
testId = "advanced-tag-test",
|
|
1071
741
|
toTop = true
|
|
1072
742
|
}) => {
|
|
1073
|
-
const [showedItems, setShowedItems] = (0,
|
|
1074
|
-
const [showMore, setShowMore] = (0,
|
|
743
|
+
const [showedItems, setShowedItems] = (0, import_react7.useState)(items.slice(0, 2));
|
|
744
|
+
const [showMore, setShowMore] = (0, import_react7.useState)(true);
|
|
1075
745
|
const onShowMoreClick = () => {
|
|
1076
746
|
setShowedItems(showMore ? items : items.slice(0, 2));
|
|
1077
747
|
setShowMore(!showMore);
|
|
1078
748
|
};
|
|
1079
749
|
if ((!items || !items.length) && noItemsTagLabel) {
|
|
1080
|
-
return /* @__PURE__ */ (0,
|
|
750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1081
751
|
Tag_default,
|
|
1082
752
|
{
|
|
1083
753
|
label: noItemsTagLabel?.toString(),
|
|
1084
|
-
className: (0,
|
|
754
|
+
className: (0, import_classnames7.default)(className, "tag-warn")
|
|
1085
755
|
}
|
|
1086
756
|
);
|
|
1087
757
|
}
|
|
1088
758
|
if ((!items || !items.length) && !noItemsTagLabel) return null;
|
|
1089
|
-
return /* @__PURE__ */ (0,
|
|
759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": testId, className: (0, import_classnames7.default)(className, "j4 wrap"), children: [
|
|
1090
760
|
showedItems.map((item, index) => {
|
|
1091
761
|
if (!item) return null;
|
|
1092
|
-
return /* @__PURE__ */ (0,
|
|
762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1093
763
|
AdvTag_default,
|
|
1094
764
|
{
|
|
1095
765
|
toTop,
|
|
@@ -1099,7 +769,7 @@ var AdvancedTags = ({
|
|
|
1099
769
|
index
|
|
1100
770
|
);
|
|
1101
771
|
}),
|
|
1102
|
-
items.length >= 3 && /* @__PURE__ */ (0,
|
|
772
|
+
items.length >= 3 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1103
773
|
"span",
|
|
1104
774
|
{
|
|
1105
775
|
"data-testid": `${testId}-showMore`,
|
|
@@ -1116,13 +786,13 @@ var AdvancedTags_default = AdvancedTags;
|
|
|
1116
786
|
var AdvancedTag_default = AdvancedTags_default;
|
|
1117
787
|
|
|
1118
788
|
// src/Atomic/UI/Alert/Alert.tsx
|
|
1119
|
-
var
|
|
1120
|
-
var
|
|
789
|
+
var import_classnames9 = __toESM(require("classnames"), 1);
|
|
790
|
+
var import_react8 = require("react");
|
|
1121
791
|
var import_react_feather5 = require("react-feather");
|
|
1122
792
|
|
|
1123
793
|
// src/Atomic/UI/Button/Button.tsx
|
|
1124
|
-
var
|
|
1125
|
-
var
|
|
794
|
+
var import_classnames8 = __toESM(require("classnames"), 1);
|
|
795
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1126
796
|
var RC2 = "button";
|
|
1127
797
|
var Button = ({
|
|
1128
798
|
label,
|
|
@@ -1141,13 +811,13 @@ var Button = ({
|
|
|
1141
811
|
...props
|
|
1142
812
|
}) => {
|
|
1143
813
|
const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
|
|
1144
|
-
return /* @__PURE__ */ (0,
|
|
814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1145
815
|
"button",
|
|
1146
816
|
{
|
|
1147
817
|
"data-testid": testId,
|
|
1148
818
|
tabIndex,
|
|
1149
819
|
style,
|
|
1150
|
-
className: (0,
|
|
820
|
+
className: (0, import_classnames8.default)(
|
|
1151
821
|
RC2,
|
|
1152
822
|
{
|
|
1153
823
|
[`${RC2}_${variant}`]: variant,
|
|
@@ -1162,7 +832,7 @@ var Button = ({
|
|
|
1162
832
|
...props,
|
|
1163
833
|
children: [
|
|
1164
834
|
!noRenderIcon && icon,
|
|
1165
|
-
label && /* @__PURE__ */ (0,
|
|
835
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_classnames8.default)("button__text", { "text-ellipsis": isTextEllipsis }), children: label }),
|
|
1166
836
|
!label && children ? children : null
|
|
1167
837
|
]
|
|
1168
838
|
}
|
|
@@ -1171,7 +841,7 @@ var Button = ({
|
|
|
1171
841
|
var Button_default = Button;
|
|
1172
842
|
|
|
1173
843
|
// src/Atomic/UI/Alert/Alert.tsx
|
|
1174
|
-
var
|
|
844
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1175
845
|
var Alert = ({
|
|
1176
846
|
message,
|
|
1177
847
|
icon,
|
|
@@ -1184,52 +854,149 @@ var Alert = ({
|
|
|
1184
854
|
isLoading,
|
|
1185
855
|
buttonParams
|
|
1186
856
|
}) => {
|
|
1187
|
-
const [onClose, setOnClose] = (0,
|
|
857
|
+
const [onClose, setOnClose] = (0, import_react8.useState)(false);
|
|
1188
858
|
const renderActionsBlock = () => {
|
|
1189
859
|
if (buttonParams) {
|
|
1190
|
-
return /* @__PURE__ */ (0,
|
|
1191
|
-
/* @__PURE__ */ (0,
|
|
1192
|
-
!noDismiss && /* @__PURE__ */ (0,
|
|
860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "j6 alert__btns-box", children: [
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default, { ...buttonParams }),
|
|
862
|
+
!noDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "alert__close-btn", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_feather5.X, { "data-testid": `${testId}-close`, onClick: () => setOnClose(!onClose) }) })
|
|
1193
863
|
] });
|
|
1194
864
|
}
|
|
1195
865
|
if (!noDismiss) {
|
|
1196
|
-
return /* @__PURE__ */ (0,
|
|
866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "alert__close-btn", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_feather5.X, { "data-testid": `${testId}-close`, onClick: () => setOnClose(!onClose) }) });
|
|
1197
867
|
} else {
|
|
1198
868
|
return null;
|
|
1199
869
|
}
|
|
1200
870
|
};
|
|
1201
|
-
return /* @__PURE__ */ (0,
|
|
871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1202
872
|
"div",
|
|
1203
873
|
{
|
|
1204
874
|
"data-testid": testId,
|
|
1205
|
-
className: (0,
|
|
875
|
+
className: (0, import_classnames9.default)(className, { hidden: onClose }, `alert alert--${variant}`, {
|
|
1206
876
|
"hidden": isHidden,
|
|
1207
877
|
"alert--loading": isLoading
|
|
1208
878
|
}),
|
|
1209
879
|
children: [
|
|
1210
|
-
/* @__PURE__ */ (0,
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "alert__icon-text-box j4", children: [
|
|
1211
881
|
icon,
|
|
1212
|
-
/* @__PURE__ */ (0,
|
|
882
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: children || message })
|
|
1213
883
|
] }),
|
|
1214
884
|
renderActionsBlock(),
|
|
1215
|
-
isLoading && /* @__PURE__ */ (0,
|
|
885
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner_default, { size: "small", testId: "loader-box" })
|
|
1216
886
|
]
|
|
1217
887
|
}
|
|
1218
|
-
);
|
|
888
|
+
);
|
|
889
|
+
};
|
|
890
|
+
var Alert_default = Alert;
|
|
891
|
+
|
|
892
|
+
// src/Atomic/UI/Alert/index.ts
|
|
893
|
+
var Alert_default2 = Alert_default;
|
|
894
|
+
|
|
895
|
+
// src/Atomic/UI/Arrow/Arrow.tsx
|
|
896
|
+
var import_classnames10 = __toESM(require("classnames"), 1);
|
|
897
|
+
var import_react10 = require("react");
|
|
898
|
+
|
|
899
|
+
// src/Functions/utils.js
|
|
900
|
+
var import_react9 = require("react");
|
|
901
|
+
var import_moment_timezone = __toESM(require("moment-timezone"), 1);
|
|
902
|
+
|
|
903
|
+
// src/Constants/index.constants.js
|
|
904
|
+
var DEFAULT_COLORS = [
|
|
905
|
+
"#D9C1FF",
|
|
906
|
+
"#FFBAF0",
|
|
907
|
+
"#FFB8CE",
|
|
908
|
+
"#FFC3A2",
|
|
909
|
+
"#FFDB7C",
|
|
910
|
+
"#F9F871",
|
|
911
|
+
"#C3FCF1",
|
|
912
|
+
"#F6F2CB",
|
|
913
|
+
"#E0F8D1",
|
|
914
|
+
"#B1DFFB",
|
|
915
|
+
"#8DECFE",
|
|
916
|
+
"#76F7ED",
|
|
917
|
+
"#8AFEC8"
|
|
918
|
+
];
|
|
919
|
+
|
|
920
|
+
// src/Functions/utils.js
|
|
921
|
+
var getIsOnlyAnObject = (input) => {
|
|
922
|
+
return typeof input === "object" && // "отбивает" примитивы и функции
|
|
923
|
+
input instanceof Object && // "отбивает" null
|
|
924
|
+
!Array.isArray(input) && // "отбивает" массивы
|
|
925
|
+
!(input instanceof Set) && // "отбивает" сеты
|
|
926
|
+
!(input instanceof Map);
|
|
927
|
+
};
|
|
928
|
+
var handleObjectChange = (updateObject, updateFunction) => (data, prop = "", isNumber) => {
|
|
929
|
+
let value;
|
|
930
|
+
if (data?.target) {
|
|
931
|
+
value = data.target.type === "checkbox" ? data.target.checked : data.target.value;
|
|
932
|
+
} else value = data;
|
|
933
|
+
value = isNumber ? Number(value) : value;
|
|
934
|
+
const props = prop.split(".");
|
|
935
|
+
const currentObject = props.reduce((res, chapter, index) => {
|
|
936
|
+
if (props.length !== index + 1) res = res[chapter];
|
|
937
|
+
return res;
|
|
938
|
+
}, updateObject);
|
|
939
|
+
currentObject[props.pop()] = value;
|
|
940
|
+
updateFunction();
|
|
941
|
+
};
|
|
942
|
+
var useOutsideToggle = (ref, setOut, open) => {
|
|
943
|
+
function handleClickOutside(event) {
|
|
944
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
945
|
+
setOut(open);
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
(0, import_react9.useEffect)(() => {
|
|
949
|
+
document.addEventListener("mouseup", handleClickOutside);
|
|
950
|
+
return () => {
|
|
951
|
+
document.removeEventListener("mouseup", handleClickOutside);
|
|
952
|
+
};
|
|
953
|
+
}, [ref]);
|
|
954
|
+
};
|
|
955
|
+
var getStyles = (el, prop) => {
|
|
956
|
+
if (!el) return null;
|
|
957
|
+
if (!prop) return window.getComputedStyle(el);
|
|
958
|
+
return window.getComputedStyle(el).getPropertyValue(prop);
|
|
959
|
+
};
|
|
960
|
+
var getColorById = (id, colors) => {
|
|
961
|
+
if (!id) return "#FF7D00";
|
|
962
|
+
const idToArr = Array.from(id);
|
|
963
|
+
const colorsArr = colors && colors.length > 0 ? colors : DEFAULT_COLORS;
|
|
964
|
+
let number = idToArr.reduce((acc, item) => {
|
|
965
|
+
if (Number(item)) {
|
|
966
|
+
return acc + Number(item);
|
|
967
|
+
}
|
|
968
|
+
return acc;
|
|
969
|
+
}, 0);
|
|
970
|
+
while (number >= colorsArr.length) {
|
|
971
|
+
number -= colorsArr.length;
|
|
972
|
+
}
|
|
973
|
+
return colorsArr[number];
|
|
974
|
+
};
|
|
975
|
+
var addBitDepthPoints = (value, step = 3) => {
|
|
976
|
+
const isFraction = value?.includes(".");
|
|
977
|
+
const valueBeforeDot = isFraction ? value?.slice(0, value?.indexOf(".")) : value;
|
|
978
|
+
const intPart = valueBeforeDot.split("").reverse().reduce(
|
|
979
|
+
(acc, item, idx) => idx % step === 0 && idx !== 0 ? [...acc, ",", item] : [...acc, item],
|
|
980
|
+
[]
|
|
981
|
+
).reverse().join("");
|
|
982
|
+
return isFraction ? intPart + value?.slice(value?.indexOf(".")) : intPart;
|
|
983
|
+
};
|
|
984
|
+
var firstLetterCapital = (str) => typeof str === "string" ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : str;
|
|
985
|
+
var capitalized = firstLetterCapital;
|
|
986
|
+
var checkedRef = (ref) => ref ? typeof ref === "function" ? (node) => ref(node) : ref : null;
|
|
987
|
+
String.prototype.longerThan = function(compareWith) {
|
|
988
|
+
return this?.length > compareWith?.length;
|
|
989
|
+
};
|
|
990
|
+
String.prototype.lastIndexEqualsTo = function(index) {
|
|
991
|
+
return this?.length - 1 === index;
|
|
1219
992
|
};
|
|
1220
|
-
var Alert_default = Alert;
|
|
1221
|
-
|
|
1222
|
-
// src/Atomic/UI/Alert/index.ts
|
|
1223
|
-
var Alert_default2 = Alert_default;
|
|
1224
993
|
|
|
1225
994
|
// src/Atomic/UI/Arrow/Arrow.tsx
|
|
1226
|
-
var
|
|
1227
|
-
var import_react12 = require("react");
|
|
1228
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
995
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1229
996
|
function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
1230
|
-
const ref = (0,
|
|
1231
|
-
const [color, setColor] = (0,
|
|
1232
|
-
(0,
|
|
997
|
+
const ref = (0, import_react10.useRef)(null);
|
|
998
|
+
const [color, setColor] = (0, import_react10.useState)("currentColor");
|
|
999
|
+
(0, import_react10.useEffect)(() => {
|
|
1233
1000
|
if (ref.current) {
|
|
1234
1001
|
setColor(getStyles(ref.current, "color"));
|
|
1235
1002
|
}
|
|
@@ -1238,7 +1005,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1238
1005
|
function renderSVG() {
|
|
1239
1006
|
if (type === "left") {
|
|
1240
1007
|
if (isAlt) {
|
|
1241
|
-
return /* @__PURE__ */ (0,
|
|
1008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1242
1009
|
"svg",
|
|
1243
1010
|
{
|
|
1244
1011
|
"data-testid": testId,
|
|
@@ -1249,7 +1016,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1249
1016
|
height: "16",
|
|
1250
1017
|
viewBox: "0 0 16 16",
|
|
1251
1018
|
children: [
|
|
1252
|
-
/* @__PURE__ */ (0,
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1253
1020
|
"path",
|
|
1254
1021
|
{
|
|
1255
1022
|
d: "M12.7,8H3.3",
|
|
@@ -1260,7 +1027,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1260
1027
|
strokeLinejoin: "round"
|
|
1261
1028
|
}
|
|
1262
1029
|
),
|
|
1263
|
-
/* @__PURE__ */ (0,
|
|
1030
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1264
1031
|
"path",
|
|
1265
1032
|
{
|
|
1266
1033
|
d: "M8,3.3L3.3,8L8,12.7",
|
|
@@ -1275,7 +1042,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1275
1042
|
}
|
|
1276
1043
|
);
|
|
1277
1044
|
}
|
|
1278
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1279
1046
|
"svg",
|
|
1280
1047
|
{
|
|
1281
1048
|
"data-testid": testId,
|
|
@@ -1284,7 +1051,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1284
1051
|
viewBox: "0 0 24 24",
|
|
1285
1052
|
fill: "none",
|
|
1286
1053
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1287
|
-
children: /* @__PURE__ */ (0,
|
|
1054
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1288
1055
|
"path",
|
|
1289
1056
|
{
|
|
1290
1057
|
d: "M15 18L9 12L15 6",
|
|
@@ -1298,7 +1065,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1298
1065
|
);
|
|
1299
1066
|
}
|
|
1300
1067
|
if (isAlt) {
|
|
1301
|
-
return /* @__PURE__ */ (0,
|
|
1068
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1302
1069
|
"svg",
|
|
1303
1070
|
{
|
|
1304
1071
|
"data-testid": testId,
|
|
@@ -1308,7 +1075,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1308
1075
|
height: "16",
|
|
1309
1076
|
viewBox: "0 0 16 16",
|
|
1310
1077
|
children: [
|
|
1311
|
-
/* @__PURE__ */ (0,
|
|
1078
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1312
1079
|
"path",
|
|
1313
1080
|
{
|
|
1314
1081
|
d: "M3.3,8h9.3",
|
|
@@ -1319,7 +1086,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1319
1086
|
strokeLinejoin: "round"
|
|
1320
1087
|
}
|
|
1321
1088
|
),
|
|
1322
|
-
/* @__PURE__ */ (0,
|
|
1089
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1323
1090
|
"path",
|
|
1324
1091
|
{
|
|
1325
1092
|
d: "M8,3.3L12.7,8L8,12.7",
|
|
@@ -1334,7 +1101,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1334
1101
|
}
|
|
1335
1102
|
);
|
|
1336
1103
|
}
|
|
1337
|
-
return /* @__PURE__ */ (0,
|
|
1104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1338
1105
|
"svg",
|
|
1339
1106
|
{
|
|
1340
1107
|
"data-testid": testId,
|
|
@@ -1343,7 +1110,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1343
1110
|
viewBox: "0 0 24 24",
|
|
1344
1111
|
fill: "none",
|
|
1345
1112
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1346
|
-
children: /* @__PURE__ */ (0,
|
|
1113
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1347
1114
|
"path",
|
|
1348
1115
|
{
|
|
1349
1116
|
d: "M9 18L15 12L9 6",
|
|
@@ -1356,12 +1123,12 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1356
1123
|
}
|
|
1357
1124
|
);
|
|
1358
1125
|
}
|
|
1359
|
-
return /* @__PURE__ */ (0,
|
|
1126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1360
1127
|
"div",
|
|
1361
1128
|
{
|
|
1362
1129
|
"data-testid": `arrow--key-${testId}--type-${type}`,
|
|
1363
1130
|
ref,
|
|
1364
|
-
className: (0,
|
|
1131
|
+
className: (0, import_classnames10.default)("arrow", `arrow_${type}`, className, {
|
|
1365
1132
|
arrow_disabled: disabled
|
|
1366
1133
|
}),
|
|
1367
1134
|
onClick,
|
|
@@ -1372,8 +1139,8 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
|
1372
1139
|
var Arrow_default = Arrow;
|
|
1373
1140
|
|
|
1374
1141
|
// src/Atomic/UI/Box/Box.tsx
|
|
1375
|
-
var
|
|
1376
|
-
var
|
|
1142
|
+
var import_classnames11 = __toESM(require("classnames"), 1);
|
|
1143
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1377
1144
|
var directionVariants = {
|
|
1378
1145
|
column: "column",
|
|
1379
1146
|
row: "row"
|
|
@@ -1397,12 +1164,12 @@ function Box({
|
|
|
1397
1164
|
const styles = {
|
|
1398
1165
|
flexDirection: direction
|
|
1399
1166
|
};
|
|
1400
|
-
return /* @__PURE__ */ (0,
|
|
1167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1401
1168
|
"div",
|
|
1402
1169
|
{
|
|
1403
1170
|
style: styles,
|
|
1404
1171
|
"data-testid": "box",
|
|
1405
|
-
className: (0,
|
|
1172
|
+
className: (0, import_classnames11.default)(
|
|
1406
1173
|
"box",
|
|
1407
1174
|
`box--padding-${paddingVariant}`,
|
|
1408
1175
|
`box--radii-${radiiVariant}`,
|
|
@@ -1419,80 +1186,10 @@ function Box({
|
|
|
1419
1186
|
}
|
|
1420
1187
|
var Box_default = Box;
|
|
1421
1188
|
|
|
1422
|
-
// src/Atomic/UI/ButtonsBar/ButtonsBar.tsx
|
|
1423
|
-
var import_classnames15 = __toESM(require("classnames"), 1);
|
|
1424
|
-
var import_react_router_dom3 = require("react-router-dom");
|
|
1425
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1426
|
-
var ButtonsBar = ({
|
|
1427
|
-
className,
|
|
1428
|
-
rejectBtnLabel,
|
|
1429
|
-
rejectBtnIcon,
|
|
1430
|
-
isRejectBtnIconRight,
|
|
1431
|
-
rejectBtnVariant,
|
|
1432
|
-
rejectBtnClass,
|
|
1433
|
-
isRejectBtnDisabled,
|
|
1434
|
-
rejectLink,
|
|
1435
|
-
onReject,
|
|
1436
|
-
confirmBtnLabel,
|
|
1437
|
-
confirmBtnIcon,
|
|
1438
|
-
isConfirmBtnIconRight,
|
|
1439
|
-
confirmBtnVariant,
|
|
1440
|
-
confirmBtnClass,
|
|
1441
|
-
isConfirmBtnDisabled,
|
|
1442
|
-
onConfirm,
|
|
1443
|
-
testIdFirstBtn = "button-bar-first-item",
|
|
1444
|
-
testIdSecondBtn = "button-bar-second-item"
|
|
1445
|
-
}) => {
|
|
1446
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames15.default)("button-bar", className), children: [
|
|
1447
|
-
rejectLink ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_router_dom3.Link, { className: "text-decoration-none", to: rejectLink, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1448
|
-
Button_default,
|
|
1449
|
-
{
|
|
1450
|
-
testId: testIdFirstBtn,
|
|
1451
|
-
label: rejectBtnLabel,
|
|
1452
|
-
variant: rejectBtnVariant,
|
|
1453
|
-
onClick: onReject,
|
|
1454
|
-
disabled: isRejectBtnDisabled,
|
|
1455
|
-
icon: rejectBtnIcon,
|
|
1456
|
-
isIconRight: isRejectBtnIconRight,
|
|
1457
|
-
className: (0, import_classnames15.default)(rejectBtnClass, { mr5: confirmBtnLabel })
|
|
1458
|
-
}
|
|
1459
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1460
|
-
Button_default,
|
|
1461
|
-
{
|
|
1462
|
-
testId: testIdFirstBtn,
|
|
1463
|
-
label: rejectBtnLabel,
|
|
1464
|
-
variant: rejectBtnVariant,
|
|
1465
|
-
onClick: onReject,
|
|
1466
|
-
disabled: isRejectBtnDisabled,
|
|
1467
|
-
icon: rejectBtnIcon,
|
|
1468
|
-
isIconRight: isRejectBtnIconRight,
|
|
1469
|
-
className: (0, import_classnames15.default)(rejectBtnClass, { mr5: confirmBtnLabel })
|
|
1470
|
-
}
|
|
1471
|
-
),
|
|
1472
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1473
|
-
Button_default,
|
|
1474
|
-
{
|
|
1475
|
-
testId: testIdSecondBtn,
|
|
1476
|
-
label: confirmBtnLabel,
|
|
1477
|
-
variant: confirmBtnVariant,
|
|
1478
|
-
onClick: onConfirm,
|
|
1479
|
-
disabled: isConfirmBtnDisabled,
|
|
1480
|
-
icon: confirmBtnIcon,
|
|
1481
|
-
isIconRight: isConfirmBtnIconRight,
|
|
1482
|
-
className: confirmBtnClass
|
|
1483
|
-
}
|
|
1484
|
-
)
|
|
1485
|
-
] });
|
|
1486
|
-
};
|
|
1487
|
-
var ButtonsBar_default = ButtonsBar;
|
|
1488
|
-
|
|
1489
|
-
// src/Atomic/UI/ButtonsBar/index.ts
|
|
1490
|
-
var ButtonsBar_default2 = ButtonsBar_default;
|
|
1491
|
-
|
|
1492
1189
|
// src/Atomic/UI/CircleProgressBar/CircleProgressBar.js
|
|
1493
|
-
var
|
|
1494
|
-
var
|
|
1495
|
-
var
|
|
1190
|
+
var import_react11 = __toESM(require("react"), 1);
|
|
1191
|
+
var import_classnames12 = __toESM(require("classnames"), 1);
|
|
1192
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1496
1193
|
var CircleProgressBar = ({
|
|
1497
1194
|
amount,
|
|
1498
1195
|
totalAmount,
|
|
@@ -1513,17 +1210,17 @@ var CircleProgressBar = ({
|
|
|
1513
1210
|
finish: "#f06d8d",
|
|
1514
1211
|
meter: "#ffcad6"
|
|
1515
1212
|
};
|
|
1516
|
-
const [strokeDashoffset, setStrokeDashoffset] = (0,
|
|
1517
|
-
(0,
|
|
1213
|
+
const [strokeDashoffset, setStrokeDashoffset] = (0, import_react11.useState)(isReverseType ? String(0) : circumference);
|
|
1214
|
+
(0, import_react11.useEffect)(() => {
|
|
1518
1215
|
setStrokeDashoffset(circumference - circumference * amountProgress / 100);
|
|
1519
1216
|
}, [amountProgress]);
|
|
1520
|
-
return /* @__PURE__ */ (0,
|
|
1217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1521
1218
|
"div",
|
|
1522
1219
|
{
|
|
1523
1220
|
"data-testid": testId,
|
|
1524
|
-
className: (0,
|
|
1221
|
+
className: (0, import_classnames12.default)("limit-progress-bar", { "limit-progress-bar--reverse": isReverseType }, className),
|
|
1525
1222
|
children: [
|
|
1526
|
-
/* @__PURE__ */ (0,
|
|
1223
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1527
1224
|
"svg",
|
|
1528
1225
|
{
|
|
1529
1226
|
className: "limit-progress-bar__progress",
|
|
@@ -1531,7 +1228,7 @@ var CircleProgressBar = ({
|
|
|
1531
1228
|
height: "124",
|
|
1532
1229
|
viewBox: "0 0 124 124",
|
|
1533
1230
|
children: [
|
|
1534
|
-
/* @__PURE__ */ (0,
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("defs", { children: isReverseType ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1535
1232
|
"linearGradient",
|
|
1536
1233
|
{
|
|
1537
1234
|
id: "limit-progress-bar-linear-gradient-reverse",
|
|
@@ -1540,14 +1237,14 @@ var CircleProgressBar = ({
|
|
|
1540
1237
|
x2: "0",
|
|
1541
1238
|
y2: "0",
|
|
1542
1239
|
children: [
|
|
1543
|
-
/* @__PURE__ */ (0,
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1544
1241
|
"stop",
|
|
1545
1242
|
{
|
|
1546
1243
|
offset: "0",
|
|
1547
1244
|
stopColor: colors.finish || defaultColors.finish
|
|
1548
1245
|
}
|
|
1549
1246
|
),
|
|
1550
|
-
/* @__PURE__ */ (0,
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1551
1248
|
"stop",
|
|
1552
1249
|
{
|
|
1553
1250
|
offset: "1",
|
|
@@ -1556,7 +1253,7 @@ var CircleProgressBar = ({
|
|
|
1556
1253
|
)
|
|
1557
1254
|
]
|
|
1558
1255
|
}
|
|
1559
|
-
) : /* @__PURE__ */ (0,
|
|
1256
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1560
1257
|
"linearGradient",
|
|
1561
1258
|
{
|
|
1562
1259
|
id: "limit-progress-bar-linear-gradient",
|
|
@@ -1565,14 +1262,14 @@ var CircleProgressBar = ({
|
|
|
1565
1262
|
x2: "0",
|
|
1566
1263
|
y2: "0",
|
|
1567
1264
|
children: [
|
|
1568
|
-
/* @__PURE__ */ (0,
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1569
1266
|
"stop",
|
|
1570
1267
|
{
|
|
1571
1268
|
offset: "0",
|
|
1572
1269
|
stopColor: colors.start || defaultColors.start
|
|
1573
1270
|
}
|
|
1574
1271
|
),
|
|
1575
|
-
/* @__PURE__ */ (0,
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1576
1273
|
"stop",
|
|
1577
1274
|
{
|
|
1578
1275
|
offset: "1",
|
|
@@ -1582,7 +1279,7 @@ var CircleProgressBar = ({
|
|
|
1582
1279
|
]
|
|
1583
1280
|
}
|
|
1584
1281
|
) }),
|
|
1585
|
-
/* @__PURE__ */ (0,
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1586
1283
|
"circle",
|
|
1587
1284
|
{
|
|
1588
1285
|
className: "limit-progress-bar__meter",
|
|
@@ -1593,7 +1290,7 @@ var CircleProgressBar = ({
|
|
|
1593
1290
|
strokeWidth: String(innerLineStrokeWidth)
|
|
1594
1291
|
}
|
|
1595
1292
|
),
|
|
1596
|
-
/* @__PURE__ */ (0,
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1597
1294
|
"circle",
|
|
1598
1295
|
{
|
|
1599
1296
|
className: "limit-progress-bar__value",
|
|
@@ -1611,7 +1308,7 @@ var CircleProgressBar = ({
|
|
|
1611
1308
|
]
|
|
1612
1309
|
}
|
|
1613
1310
|
),
|
|
1614
|
-
/* @__PURE__ */ (0,
|
|
1311
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "limit-progress-bar__content", children })
|
|
1615
1312
|
]
|
|
1616
1313
|
}
|
|
1617
1314
|
);
|
|
@@ -1619,10 +1316,10 @@ var CircleProgressBar = ({
|
|
|
1619
1316
|
var CircleProgressBar_default = CircleProgressBar;
|
|
1620
1317
|
|
|
1621
1318
|
// src/Atomic/UI/DateTime/DateTime.tsx
|
|
1622
|
-
var
|
|
1319
|
+
var import_classnames13 = __toESM(require("classnames"), 1);
|
|
1623
1320
|
var import_moment_timezone2 = __toESM(require("moment-timezone"), 1);
|
|
1624
|
-
var
|
|
1625
|
-
var
|
|
1321
|
+
var import_react12 = require("react");
|
|
1322
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1626
1323
|
var RC3 = "date-time";
|
|
1627
1324
|
var DEFAULT_DATE_FORMAT = "DD.MM.YYYY";
|
|
1628
1325
|
var DEFAULT_TIME_FORMAT = "HH:mm:ss";
|
|
@@ -1638,23 +1335,23 @@ var DateTime = ({
|
|
|
1638
1335
|
}) => {
|
|
1639
1336
|
const dateFormat = inputDateFormat ?? DEFAULT_DATE_FORMAT;
|
|
1640
1337
|
const timeFormat = inputTimeFormat ?? DEFAULT_TIME_FORMAT;
|
|
1641
|
-
const date = (0,
|
|
1338
|
+
const date = (0, import_react12.useMemo)(() => {
|
|
1642
1339
|
return (valueFormat ? (0, import_moment_timezone2.default)(value, valueFormat) : (0, import_moment_timezone2.default)(value)).format(
|
|
1643
1340
|
dateFormat
|
|
1644
1341
|
);
|
|
1645
1342
|
}, [value, valueFormat, dateFormat]);
|
|
1646
|
-
const time = (0,
|
|
1343
|
+
const time = (0, import_react12.useMemo)(() => {
|
|
1647
1344
|
return (valueFormat ? (0, import_moment_timezone2.default)(value, valueFormat) : (0, import_moment_timezone2.default)(value)).format(
|
|
1648
1345
|
timeFormat
|
|
1649
1346
|
);
|
|
1650
1347
|
}, [value, valueFormat, timeFormat]);
|
|
1651
|
-
return /* @__PURE__ */ (0,
|
|
1652
|
-
!isNoDate && /* @__PURE__ */ (0,
|
|
1653
|
-
!isNoTime && /* @__PURE__ */ (0,
|
|
1348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-testid": testId, className: (0, import_classnames13.default)(RC3, className), children: [
|
|
1349
|
+
!isNoDate && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "data-testid": `${testId}-date`, className: `${RC3}__date`, children: date }),
|
|
1350
|
+
!isNoTime && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1654
1351
|
"span",
|
|
1655
1352
|
{
|
|
1656
1353
|
"data-testid": `${testId}-time`,
|
|
1657
|
-
className: (0,
|
|
1354
|
+
className: (0, import_classnames13.default)(`${RC3}__time`, {
|
|
1658
1355
|
[`${RC3}_color--pause`]: !isNoDate
|
|
1659
1356
|
}),
|
|
1660
1357
|
children: time
|
|
@@ -1665,32 +1362,32 @@ var DateTime = ({
|
|
|
1665
1362
|
var DateTime_default = DateTime;
|
|
1666
1363
|
|
|
1667
1364
|
// src/Atomic/UI/DebugContainer/DebugContainer.tsx
|
|
1668
|
-
var
|
|
1669
|
-
var
|
|
1365
|
+
var import_classnames14 = __toESM(require("classnames"), 1);
|
|
1366
|
+
var import_react13 = require("react");
|
|
1670
1367
|
var import_react_feather6 = require("react-feather");
|
|
1671
|
-
var
|
|
1368
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1672
1369
|
var defaultData = {};
|
|
1673
1370
|
var DebugContainer = ({ data = defaultData, children, className }) => {
|
|
1674
|
-
const [isVisible, setIsVisible] = (0,
|
|
1675
|
-
const renderData = () => /* @__PURE__ */ (0,
|
|
1371
|
+
const [isVisible, setIsVisible] = (0, import_react13.useState)(true);
|
|
1372
|
+
const renderData = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("pre", { children: [
|
|
1676
1373
|
"{\n",
|
|
1677
1374
|
Object.keys(data).map((key) => ` ${key}: ${String(data[key])},
|
|
1678
1375
|
`),
|
|
1679
1376
|
"}"
|
|
1680
1377
|
] });
|
|
1681
|
-
return /* @__PURE__ */ (0,
|
|
1682
|
-
isVisible && /* @__PURE__ */ (0,
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1684
|
-
data && Object.keys(data).length > 0 && /* @__PURE__ */ (0,
|
|
1685
|
-
children && /* @__PURE__ */ (0,
|
|
1378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_classnames14.default)("debug-container", className), "data-testid": "debug-container", children: [
|
|
1379
|
+
isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "debug-container__body", children: [
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h5", { children: "Debug:" }),
|
|
1381
|
+
data && Object.keys(data).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "debug-container__body-row", "data-testid": "debug-data", children: renderData() }),
|
|
1382
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "debug-container__body-row", "data-testid": "debug-children", children })
|
|
1686
1383
|
] }),
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1688
1385
|
"div",
|
|
1689
1386
|
{
|
|
1690
1387
|
className: "debug-container__toggler",
|
|
1691
1388
|
onClick: () => setIsVisible((v) => !v),
|
|
1692
1389
|
"data-testid": "debug-toggler",
|
|
1693
|
-
children: isVisible ? /* @__PURE__ */ (0,
|
|
1390
|
+
children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather6.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather6.ChevronDown, {})
|
|
1694
1391
|
}
|
|
1695
1392
|
)
|
|
1696
1393
|
] });
|
|
@@ -1698,24 +1395,24 @@ var DebugContainer = ({ data = defaultData, children, className }) => {
|
|
|
1698
1395
|
var DebugContainer_default = DebugContainer;
|
|
1699
1396
|
|
|
1700
1397
|
// src/Atomic/UI/DebugContainer/useDebugContainer.tsx
|
|
1701
|
-
var
|
|
1702
|
-
var
|
|
1398
|
+
var import_react14 = require("react");
|
|
1399
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1703
1400
|
function useDebugContainer() {
|
|
1704
|
-
const [data, setData] = (0,
|
|
1401
|
+
const [data, setData] = (0, import_react14.useState)({});
|
|
1705
1402
|
return {
|
|
1706
1403
|
debugData: data,
|
|
1707
1404
|
setDebugData: setData,
|
|
1708
|
-
renderDebugContainer: /* @__PURE__ */ (0,
|
|
1405
|
+
renderDebugContainer: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebugContainer_default, { data })
|
|
1709
1406
|
};
|
|
1710
1407
|
}
|
|
1711
1408
|
var useDebugContainer_default = useDebugContainer;
|
|
1712
1409
|
|
|
1713
1410
|
// src/Atomic/UI/DoubleString/DoubleString.tsx
|
|
1714
|
-
var
|
|
1411
|
+
var import_classnames15 = __toESM(require("classnames"), 1);
|
|
1715
1412
|
var import_moment = __toESM(require("moment"), 1);
|
|
1716
|
-
var
|
|
1413
|
+
var import_react15 = require("react");
|
|
1717
1414
|
var import_react_feather7 = require("react-feather");
|
|
1718
|
-
var
|
|
1415
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1719
1416
|
var RC4 = "double-string";
|
|
1720
1417
|
var DoubleString = ({
|
|
1721
1418
|
value,
|
|
@@ -1735,33 +1432,33 @@ var DoubleString = ({
|
|
|
1735
1432
|
isUseHideMode = false,
|
|
1736
1433
|
isShowHiddenValueAvailable = false
|
|
1737
1434
|
}) => {
|
|
1738
|
-
const [isValueHidden, setIsValueHidden] = (0,
|
|
1435
|
+
const [isValueHidden, setIsValueHidden] = (0, import_react15.useState)(isUseHideMode);
|
|
1739
1436
|
const computedValue = isFormatValueToDate ? (0, import_moment.default)(value, parseFormat).format(displayFormat) : value;
|
|
1740
|
-
const valueRef = (0,
|
|
1437
|
+
const valueRef = (0, import_react15.useRef)(null);
|
|
1741
1438
|
;
|
|
1742
|
-
const descriptionRef = (0,
|
|
1743
|
-
const [elemsWidth, setElemsWidth] = (0,
|
|
1439
|
+
const descriptionRef = (0, import_react15.useRef)(null);
|
|
1440
|
+
const [elemsWidth, setElemsWidth] = (0, import_react15.useState)({
|
|
1744
1441
|
valueWidth: 0,
|
|
1745
1442
|
descriptionWidth: 0
|
|
1746
1443
|
});
|
|
1747
|
-
const [isOnClickON, setIsOnClickON] = (0,
|
|
1444
|
+
const [isOnClickON, setIsOnClickON] = (0, import_react15.useState)(false);
|
|
1748
1445
|
const handle = {
|
|
1749
1446
|
click: () => {
|
|
1750
1447
|
setIsOnClickON(!isOnClickON);
|
|
1751
1448
|
}
|
|
1752
1449
|
};
|
|
1753
|
-
(0,
|
|
1450
|
+
(0, import_react15.useEffect)(() => {
|
|
1754
1451
|
const valueWidth = valueRef?.current?.clientWidth ?? 0;
|
|
1755
1452
|
const descriptionWidth = descriptionRef?.current?.clientWidth ?? 0;
|
|
1756
1453
|
setElemsWidth({ valueWidth, descriptionWidth });
|
|
1757
1454
|
}, [descriptionRef, valueRef]);
|
|
1758
|
-
return /* @__PURE__ */ (0,
|
|
1759
|
-
/* @__PURE__ */ (0,
|
|
1455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { "data-testid": testId, className: (0, import_classnames15.default)(RC4, className), children: [
|
|
1456
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1760
1457
|
"p",
|
|
1761
1458
|
{
|
|
1762
1459
|
onClick: () => handle.click(),
|
|
1763
1460
|
ref: valueRef,
|
|
1764
|
-
className: (0,
|
|
1461
|
+
className: (0, import_classnames15.default)(
|
|
1765
1462
|
`${RC4}__value`,
|
|
1766
1463
|
{
|
|
1767
1464
|
"double-string--value-opened": isOnClickON && isUseOnClick
|
|
@@ -1769,27 +1466,27 @@ var DoubleString = ({
|
|
|
1769
1466
|
{ pointer: isUseOnClick }
|
|
1770
1467
|
),
|
|
1771
1468
|
title: !noTitle && elemsWidth.valueWidth > 99 ? computedValue : "",
|
|
1772
|
-
children: !revert ? /* @__PURE__ */ (0,
|
|
1773
|
-
isUseHideMode ? /* @__PURE__ */ (0,
|
|
1774
|
-
isUseHideMode && isShowHiddenValueAvailable && isValueHidden && /* @__PURE__ */ (0,
|
|
1775
|
-
isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && /* @__PURE__ */ (0,
|
|
1776
|
-
valuePostfix && /* @__PURE__ */ (0,
|
|
1469
|
+
children: !revert ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
1470
|
+
isUseHideMode ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: !isValueHidden ? computedValue : "*********" }) : computedValue,
|
|
1471
|
+
isUseHideMode && isShowHiddenValueAvailable && isValueHidden && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_feather7.Eye, { "data-testid": "double-string-eye", className: `${RC4}__hide-mode-icon`, onClick: () => setIsValueHidden(false) }),
|
|
1472
|
+
isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_feather7.EyeOff, { "data-testid": "double-string-eyeoff", className: `${RC4}__hide-mode-icon`, onClick: () => setIsValueHidden(true) }),
|
|
1473
|
+
valuePostfix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: (0, import_classnames15.default)(`${RC4}__value-postfix`), children: valuePostfix })
|
|
1777
1474
|
] }) : description
|
|
1778
1475
|
}
|
|
1779
1476
|
),
|
|
1780
|
-
/* @__PURE__ */ (0,
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1781
1478
|
"p",
|
|
1782
1479
|
{
|
|
1783
1480
|
ref: descriptionRef,
|
|
1784
|
-
className: (0,
|
|
1481
|
+
className: (0, import_classnames15.default)(`${RC4}__description`),
|
|
1785
1482
|
title: !noTitle && elemsWidth.descriptionWidth > 99 ? computedValue : "",
|
|
1786
|
-
children: !revert ? description : /* @__PURE__ */ (0,
|
|
1483
|
+
children: !revert ? description : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
1787
1484
|
computedValue,
|
|
1788
|
-
valuePostfix && /* @__PURE__ */ (0,
|
|
1485
|
+
valuePostfix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: (0, import_classnames15.default)(`${RC4}__value-postfix`), children: valuePostfix })
|
|
1789
1486
|
] })
|
|
1790
1487
|
}
|
|
1791
1488
|
),
|
|
1792
|
-
subDescription && /* @__PURE__ */ (0,
|
|
1489
|
+
subDescription && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: (0, import_classnames15.default)(`${RC4}__sub-description`), children: subDescription })
|
|
1793
1490
|
] });
|
|
1794
1491
|
};
|
|
1795
1492
|
var DoubleString_default = DoubleString;
|
|
@@ -1798,15 +1495,15 @@ var DoubleString_default = DoubleString;
|
|
|
1798
1495
|
var DoubleString_default2 = DoubleString_default;
|
|
1799
1496
|
|
|
1800
1497
|
// src/Atomic/UI/Hint/Hint.tsx
|
|
1801
|
-
var
|
|
1802
|
-
var
|
|
1498
|
+
var import_classnames16 = __toESM(require("classnames"), 1);
|
|
1499
|
+
var import_react16 = require("react");
|
|
1803
1500
|
var import_react_dom2 = require("react-dom");
|
|
1804
1501
|
var import_react_feather8 = require("react-feather");
|
|
1805
1502
|
|
|
1806
1503
|
// src/Molecular/CustomIcons/components/HelpCircleFilled.tsx
|
|
1807
|
-
var
|
|
1504
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1808
1505
|
function HelpCircleFilled(props) {
|
|
1809
|
-
return /* @__PURE__ */ (0,
|
|
1506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1810
1507
|
"svg",
|
|
1811
1508
|
{
|
|
1812
1509
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1815,14 +1512,14 @@ function HelpCircleFilled(props) {
|
|
|
1815
1512
|
fill: "none",
|
|
1816
1513
|
...props,
|
|
1817
1514
|
children: [
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1819
1516
|
"path",
|
|
1820
1517
|
{
|
|
1821
1518
|
fill: "#9AA0B9",
|
|
1822
1519
|
d: "M8 14.667A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.334Z"
|
|
1823
1520
|
}
|
|
1824
1521
|
),
|
|
1825
|
-
/* @__PURE__ */ (0,
|
|
1522
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1826
1523
|
"path",
|
|
1827
1524
|
{
|
|
1828
1525
|
stroke: "#fff",
|
|
@@ -1877,7 +1574,7 @@ function HandleClickOutsideObj(id, setIsOpen) {
|
|
|
1877
1574
|
}
|
|
1878
1575
|
|
|
1879
1576
|
// src/Atomic/UI/Hint/Hint.tsx
|
|
1880
|
-
var
|
|
1577
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1881
1578
|
var hintTimeoutMap = /* @__PURE__ */ new Map();
|
|
1882
1579
|
var isContentHoveredOuter = false;
|
|
1883
1580
|
var DEFAULT_EMPTY_OBJ = {};
|
|
@@ -1903,13 +1600,13 @@ var Hint = ({
|
|
|
1903
1600
|
isLoading,
|
|
1904
1601
|
isCloseOnChildrenClick = false
|
|
1905
1602
|
}) => {
|
|
1906
|
-
const hintRef = (0,
|
|
1907
|
-
const [hintId] = (0,
|
|
1908
|
-
const [iAmOpenedOptions] = (0,
|
|
1909
|
-
const [isOpen, setIsOpen] = (0,
|
|
1910
|
-
const [isStyleComputed, setIsStyleComputed] = (0,
|
|
1911
|
-
const [handleScroll] = (0,
|
|
1912
|
-
const [handleClickOutside] = (0,
|
|
1603
|
+
const hintRef = (0, import_react16.useRef)(null);
|
|
1604
|
+
const [hintId] = (0, import_react16.useState)(id ?? key ?? Math.random().toString(16).slice(2));
|
|
1605
|
+
const [iAmOpenedOptions] = (0, import_react16.useState)({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });
|
|
1606
|
+
const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
|
|
1607
|
+
const [isStyleComputed, setIsStyleComputed] = (0, import_react16.useState)(false);
|
|
1608
|
+
const [handleScroll] = (0, import_react16.useState)(new HandleScrollObj(setIsOpen));
|
|
1609
|
+
const [handleClickOutside] = (0, import_react16.useState)(new HandleClickOutsideObj(hintId, setIsOpen));
|
|
1913
1610
|
const isCallbackExist = typeof onClickCallback === "function";
|
|
1914
1611
|
const handle = {
|
|
1915
1612
|
onMouseEnter: () => {
|
|
@@ -1959,11 +1656,11 @@ var Hint = ({
|
|
|
1959
1656
|
}
|
|
1960
1657
|
};
|
|
1961
1658
|
const getHintMarkUp = (className2) => {
|
|
1962
|
-
return /* @__PURE__ */ (0,
|
|
1659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1963
1660
|
"div",
|
|
1964
1661
|
{
|
|
1965
1662
|
"data-testid": "test-hint-text",
|
|
1966
|
-
className: (0,
|
|
1663
|
+
className: (0, import_classnames16.default)("hint__text", `hint__text_${side}`, `hint--${className2}__text`),
|
|
1967
1664
|
onMouseEnter: () => {
|
|
1968
1665
|
if (isHoverableContent) isContentHoveredOuter = true;
|
|
1969
1666
|
},
|
|
@@ -1971,7 +1668,7 @@ var Hint = ({
|
|
|
1971
1668
|
onClick: handle.onClick,
|
|
1972
1669
|
style: { visibility: isStyleComputed ? "visible" : "hidden" },
|
|
1973
1670
|
children: [
|
|
1974
|
-
isLoading && /* @__PURE__ */ (0,
|
|
1671
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Spinner_default, { size: "small" }),
|
|
1975
1672
|
hint,
|
|
1976
1673
|
children
|
|
1977
1674
|
]
|
|
@@ -2028,7 +1725,7 @@ var Hint = ({
|
|
|
2028
1725
|
if (!hc) return null;
|
|
2029
1726
|
return (0, import_react_dom2.createPortal)(getHintMarkUp(className2), hc);
|
|
2030
1727
|
};
|
|
2031
|
-
(0,
|
|
1728
|
+
(0, import_react16.useEffect)(() => {
|
|
2032
1729
|
initHintContainer(hintId, hintContainer);
|
|
2033
1730
|
const iAmOpenedCallback = (ev) => {
|
|
2034
1731
|
const event = ev;
|
|
@@ -2054,7 +1751,7 @@ var Hint = ({
|
|
|
2054
1751
|
}
|
|
2055
1752
|
};
|
|
2056
1753
|
}, []);
|
|
2057
|
-
(0,
|
|
1754
|
+
(0, import_react16.useEffect)(() => {
|
|
2058
1755
|
setIsStyleComputed(false);
|
|
2059
1756
|
setHintContainerStyles();
|
|
2060
1757
|
onOpenChange?.(isOpen);
|
|
@@ -2073,8 +1770,8 @@ var Hint = ({
|
|
|
2073
1770
|
}
|
|
2074
1771
|
};
|
|
2075
1772
|
}, [isOpen]);
|
|
2076
|
-
return /* @__PURE__ */ (0,
|
|
2077
|
-
/* @__PURE__ */ (0,
|
|
1773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-testid": testId, className: (0, import_classnames16.default)("hint", className), ref: hintRef, children: [
|
|
1774
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2078
1775
|
"button",
|
|
2079
1776
|
{
|
|
2080
1777
|
tabIndex: isAccessability ? 0 : -1,
|
|
@@ -2083,14 +1780,14 @@ var Hint = ({
|
|
|
2083
1780
|
onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback?.() : setIsOpen(!isOpen)),
|
|
2084
1781
|
onMouseEnter: handle.onMouseEnter,
|
|
2085
1782
|
onMouseLeave: handle.onMouseLeave,
|
|
2086
|
-
className: (0,
|
|
1783
|
+
className: (0, import_classnames16.default)("hint__button", { hint__button_active: isOpen }),
|
|
2087
1784
|
children: [
|
|
2088
|
-
icon || icon === null || /* @__PURE__ */ (0,
|
|
2089
|
-
variant === "outlined" && /* @__PURE__ */ (0,
|
|
2090
|
-
variant === "filled" && /* @__PURE__ */ (0,
|
|
2091
|
-
variant === "warning" && /* @__PURE__ */ (0,
|
|
1785
|
+
icon || icon === null || /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
1786
|
+
variant === "outlined" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_feather8.HelpCircle, { width: 16, height: 16, className: "hint__icon outlined" }),
|
|
1787
|
+
variant === "filled" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HelpCircleFilled, { className: "hint__icon filled" }),
|
|
1788
|
+
variant === "warning" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_feather8.AlertTriangle, { className: "hint__icon", color: "#F06D8D", width: 16, height: 16 })
|
|
2092
1789
|
] }),
|
|
2093
|
-
label && /* @__PURE__ */ (0,
|
|
1790
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: (0, import_classnames16.default)("hint__label", { "color--primary": isOpen }), children: typeof label === "string" ? capitalized(label) : label })
|
|
2094
1791
|
]
|
|
2095
1792
|
}
|
|
2096
1793
|
),
|
|
@@ -2103,21 +1800,21 @@ var Hint_default = Hint;
|
|
|
2103
1800
|
var Hint_default2 = Hint_default;
|
|
2104
1801
|
|
|
2105
1802
|
// src/Atomic/UI/Modal/Modal.tsx
|
|
2106
|
-
var
|
|
2107
|
-
var
|
|
1803
|
+
var import_classnames19 = __toESM(require("classnames"), 1);
|
|
1804
|
+
var import_react23 = require("react");
|
|
2108
1805
|
|
|
2109
1806
|
// src/Functions/useKeyPress/useHandleKeyPress.ts
|
|
2110
|
-
var
|
|
1807
|
+
var import_react18 = require("react");
|
|
2111
1808
|
|
|
2112
1809
|
// src/Functions/useKeyPress/useKeyPress.ts
|
|
2113
|
-
var
|
|
1810
|
+
var import_react17 = require("react");
|
|
2114
1811
|
function isISuspendProcessing(x) {
|
|
2115
1812
|
return getIsOnlyAnObject(x) && Object.values(x).every((v) => typeof v === "function");
|
|
2116
1813
|
}
|
|
2117
1814
|
function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing) {
|
|
2118
|
-
const [keyPressed, setKeyPressed] = (0,
|
|
1815
|
+
const [keyPressed, setKeyPressed] = (0, import_react17.useState)(false);
|
|
2119
1816
|
const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
|
|
2120
|
-
const downHandler = (0,
|
|
1817
|
+
const downHandler = (0, import_react17.useCallback)(
|
|
2121
1818
|
(event) => {
|
|
2122
1819
|
const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
|
|
2123
1820
|
const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
|
|
@@ -2130,7 +1827,7 @@ function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing)
|
|
|
2130
1827
|
// ? хоть в коде используем "безопасный"
|
|
2131
1828
|
[clamping, targetKey, suspendProcessing]
|
|
2132
1829
|
);
|
|
2133
|
-
const upHandler = (0,
|
|
1830
|
+
const upHandler = (0, import_react17.useCallback)(
|
|
2134
1831
|
(event) => {
|
|
2135
1832
|
const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
|
|
2136
1833
|
const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
|
|
@@ -2143,7 +1840,7 @@ function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing)
|
|
|
2143
1840
|
// ? хоть в коде используем "безопасный"
|
|
2144
1841
|
[clamping, targetKey, suspendProcessing]
|
|
2145
1842
|
);
|
|
2146
|
-
(0,
|
|
1843
|
+
(0, import_react17.useEffect)(
|
|
2147
1844
|
() => {
|
|
2148
1845
|
const handleDown = (event) => downHandler(event);
|
|
2149
1846
|
const handleUp = (event) => upHandler(event);
|
|
@@ -2175,12 +1872,12 @@ function useHandleKeyPress({
|
|
|
2175
1872
|
const { isWithSubmitAndCloseManagement } = withEventManagementStructure || {};
|
|
2176
1873
|
const isPressEnter = useKeyPress_default("Enter", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
|
|
2177
1874
|
const isPressEscape = useKeyPress_default("Escape", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
|
|
2178
|
-
(0,
|
|
1875
|
+
(0, import_react18.useEffect)(() => {
|
|
2179
1876
|
if (!isWithSubmitAndCloseManagement && isPressEscape && typeof escCallback === "function") {
|
|
2180
1877
|
escCallback();
|
|
2181
1878
|
}
|
|
2182
1879
|
}, [isPressEscape, escCallback]);
|
|
2183
|
-
(0,
|
|
1880
|
+
(0, import_react18.useEffect)(() => {
|
|
2184
1881
|
if (!isWithSubmitAndCloseManagement && isPressEnter && typeof enterCallback === "function") {
|
|
2185
1882
|
enterCallback();
|
|
2186
1883
|
}
|
|
@@ -2267,17 +1964,17 @@ function dispatchEventForModalManagement(realEvent, nameOfCustomEvent, uniqueIdO
|
|
|
2267
1964
|
}
|
|
2268
1965
|
|
|
2269
1966
|
// src/Atomic/UI/Modal/partials/ModalFooter.tsx
|
|
2270
|
-
var
|
|
2271
|
-
var
|
|
2272
|
-
var
|
|
2273
|
-
var ModalFooter = (0,
|
|
1967
|
+
var import_classnames17 = __toESM(require("classnames"), 1);
|
|
1968
|
+
var import_react19 = require("react");
|
|
1969
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1970
|
+
var ModalFooter = (0, import_react19.memo)(
|
|
2274
1971
|
({ className = "", children, wrapperRef, testId = "modal-footer" }) => {
|
|
2275
|
-
return /* @__PURE__ */ (0,
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2276
1973
|
"footer",
|
|
2277
1974
|
{
|
|
2278
1975
|
"data-testid": testId,
|
|
2279
1976
|
ref: wrapperRef,
|
|
2280
|
-
className: (0,
|
|
1977
|
+
className: (0, import_classnames17.default)("modal__footer", className),
|
|
2281
1978
|
role: "contentinfo",
|
|
2282
1979
|
"aria-label": "Modal footer",
|
|
2283
1980
|
children
|
|
@@ -2289,11 +1986,11 @@ ModalFooter.displayName = "ModalFooter";
|
|
|
2289
1986
|
var ModalFooter_default = ModalFooter;
|
|
2290
1987
|
|
|
2291
1988
|
// src/Atomic/UI/Modal/partials/ModalTitle.tsx
|
|
2292
|
-
var
|
|
2293
|
-
var
|
|
1989
|
+
var import_classnames18 = __toESM(require("classnames"), 1);
|
|
1990
|
+
var import_react20 = require("react");
|
|
2294
1991
|
var import_react_feather9 = require("react-feather");
|
|
2295
|
-
var
|
|
2296
|
-
var ModalTitle = (0,
|
|
1992
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1993
|
+
var ModalTitle = (0, import_react20.memo)(
|
|
2297
1994
|
({
|
|
2298
1995
|
variant = "primary",
|
|
2299
1996
|
children,
|
|
@@ -2305,44 +2002,44 @@ var ModalTitle = (0, import_react22.memo)(
|
|
|
2305
2002
|
wrapperRef,
|
|
2306
2003
|
testId = "modal-title"
|
|
2307
2004
|
}) => {
|
|
2308
|
-
const closeModalRef = (0,
|
|
2309
|
-
const handleClick = (0,
|
|
2310
|
-
(0,
|
|
2005
|
+
const closeModalRef = (0, import_react20.useRef)(onClose);
|
|
2006
|
+
const handleClick = (0, import_react20.useMemo)(() => () => closeModalRef.current?.(), []);
|
|
2007
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
2311
2008
|
closeModalRef.current = closeBtnDisable ? void 0 : onClose;
|
|
2312
2009
|
}, [onClose, closeBtnDisable]);
|
|
2313
|
-
return /* @__PURE__ */ (0,
|
|
2010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2314
2011
|
"header",
|
|
2315
2012
|
{
|
|
2316
2013
|
"data-testid": testId,
|
|
2317
2014
|
ref: wrapperRef,
|
|
2318
|
-
className: (0,
|
|
2015
|
+
className: (0, import_classnames18.default)("modal__header", className, {
|
|
2319
2016
|
[`modal__header-${variant}`]: variant
|
|
2320
2017
|
}),
|
|
2321
2018
|
role: "banner",
|
|
2322
2019
|
"aria-label": "Modal header",
|
|
2323
2020
|
children: [
|
|
2324
|
-
/* @__PURE__ */ (0,
|
|
2021
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2325
2022
|
"span",
|
|
2326
2023
|
{
|
|
2327
|
-
className: (0,
|
|
2024
|
+
className: (0, import_classnames18.default)("modal__header-title", {
|
|
2328
2025
|
[`modal__header-${variant}-title`]: variant
|
|
2329
2026
|
}),
|
|
2330
2027
|
id: `${testId}-heading`,
|
|
2331
2028
|
children
|
|
2332
2029
|
}
|
|
2333
2030
|
),
|
|
2334
|
-
!isForced && /* @__PURE__ */ (0,
|
|
2031
|
+
!isForced && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2335
2032
|
"button",
|
|
2336
2033
|
{
|
|
2337
2034
|
type: "button",
|
|
2338
2035
|
onClick: handleClick,
|
|
2339
|
-
className: (0,
|
|
2036
|
+
className: (0, import_classnames18.default)("modal-close-icon-box", {
|
|
2340
2037
|
"modal-close-icon-box-primary": variant === "primary",
|
|
2341
2038
|
"modal-close-icon-box--hidden": noHeaderCloseBtn
|
|
2342
2039
|
}),
|
|
2343
2040
|
"aria-label": "Close modal",
|
|
2344
2041
|
title: "Close modal",
|
|
2345
|
-
children: !noHeaderCloseBtn && /* @__PURE__ */ (0,
|
|
2042
|
+
children: !noHeaderCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_feather9.X, { className: "modal-close-icon", role: "img", "aria-hidden": "true" })
|
|
2346
2043
|
}
|
|
2347
2044
|
)
|
|
2348
2045
|
]
|
|
@@ -2354,10 +2051,10 @@ ModalTitle.displayName = "ModalTitle";
|
|
|
2354
2051
|
var ModalTitle_default = ModalTitle;
|
|
2355
2052
|
|
|
2356
2053
|
// src/Atomic/UI/Modal/partials/useMobileModal.tsx
|
|
2357
|
-
var
|
|
2054
|
+
var import_react22 = require("react");
|
|
2358
2055
|
|
|
2359
2056
|
// src/Functions/useIsMobile/useIsMobile.ts
|
|
2360
|
-
var
|
|
2057
|
+
var import_react21 = require("react");
|
|
2361
2058
|
function useIsMobile({ isWithoutWidthCheck = false } = {}) {
|
|
2362
2059
|
const isIPad = () => {
|
|
2363
2060
|
const ua = navigator.userAgent || navigator.vendor || window.opera;
|
|
@@ -2368,8 +2065,8 @@ function useIsMobile({ isWithoutWidthCheck = false } = {}) {
|
|
|
2368
2065
|
const getIsMobile = () => {
|
|
2369
2066
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || isIPad();
|
|
2370
2067
|
};
|
|
2371
|
-
const [isMobile, setIsMobile] = (0,
|
|
2372
|
-
(0,
|
|
2068
|
+
const [isMobile, setIsMobile] = (0, import_react21.useState)(getIsMobile());
|
|
2069
|
+
(0, import_react21.useEffect)(() => {
|
|
2373
2070
|
if (getIsMobile()) {
|
|
2374
2071
|
setIsMobile(true);
|
|
2375
2072
|
}
|
|
@@ -2383,7 +2080,7 @@ function useIsMobile({ isWithoutWidthCheck = false } = {}) {
|
|
|
2383
2080
|
var useIsMobile_default = useIsMobile;
|
|
2384
2081
|
|
|
2385
2082
|
// src/Atomic/UI/Modal/partials/useMobileModal.tsx
|
|
2386
|
-
var
|
|
2083
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2387
2084
|
var SCROLL_DIRECTION = {
|
|
2388
2085
|
UP: "up",
|
|
2389
2086
|
DOWN: "down"
|
|
@@ -2394,28 +2091,28 @@ function useMobileModal({
|
|
|
2394
2091
|
withFixedFooter = false,
|
|
2395
2092
|
isOpen = false
|
|
2396
2093
|
}) {
|
|
2397
|
-
const modalMobileContainerRef = (0,
|
|
2398
|
-
const modalMobileHeaderRef = (0,
|
|
2399
|
-
const modalMobileFooterRef = (0,
|
|
2400
|
-
const modalMobileBodyRef = (0,
|
|
2094
|
+
const modalMobileContainerRef = (0, import_react22.useRef)(null);
|
|
2095
|
+
const modalMobileHeaderRef = (0, import_react22.useRef)(null);
|
|
2096
|
+
const modalMobileFooterRef = (0, import_react22.useRef)(null);
|
|
2097
|
+
const modalMobileBodyRef = (0, import_react22.useRef)(null);
|
|
2401
2098
|
const { isMobile } = useIsMobile_default();
|
|
2402
|
-
const [modalHeight, setModalHeight] = (0,
|
|
2403
|
-
const [modalsLogic, setModalsLogic] = (0,
|
|
2099
|
+
const [modalHeight, setModalHeight] = (0, import_react22.useState)(0);
|
|
2100
|
+
const [modalsLogic, setModalsLogic] = (0, import_react22.useState)({
|
|
2404
2101
|
IS_HEADER_HIDDEN: false,
|
|
2405
2102
|
IS_HEADER_STICKY: false,
|
|
2406
2103
|
IS_FOOTER_HIDDEN: false,
|
|
2407
2104
|
IS_FOOTER_STICKY: withFixedFooter
|
|
2408
2105
|
});
|
|
2409
|
-
const [modalsLogicProps, setModalsLogicProps] = (0,
|
|
2106
|
+
const [modalsLogicProps, setModalsLogicProps] = (0, import_react22.useState)({
|
|
2410
2107
|
headerHeight: 0,
|
|
2411
2108
|
footerHeight: 0
|
|
2412
2109
|
});
|
|
2413
|
-
const [scrollDirection, setScrollDirection] = (0,
|
|
2414
|
-
const [scrollTopPrev, setScrollTopPrev] = (0,
|
|
2415
|
-
const [scrollTop, setScrollTop] = (0,
|
|
2416
|
-
const [scrollHeight, setScrollHeight] = (0,
|
|
2417
|
-
const [, setContainerScrollHeight] = (0,
|
|
2418
|
-
(0,
|
|
2110
|
+
const [scrollDirection, setScrollDirection] = (0, import_react22.useState)(SCROLL_DIRECTION.UP);
|
|
2111
|
+
const [scrollTopPrev, setScrollTopPrev] = (0, import_react22.useState)(0);
|
|
2112
|
+
const [scrollTop, setScrollTop] = (0, import_react22.useState)(0);
|
|
2113
|
+
const [scrollHeight, setScrollHeight] = (0, import_react22.useState)(1);
|
|
2114
|
+
const [, setContainerScrollHeight] = (0, import_react22.useState)(1);
|
|
2115
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
2419
2116
|
const el = modalMobileContainerRef?.current;
|
|
2420
2117
|
if (el) {
|
|
2421
2118
|
el.addEventListener("scroll", () => {
|
|
@@ -2426,12 +2123,12 @@ function useMobileModal({
|
|
|
2426
2123
|
});
|
|
2427
2124
|
}
|
|
2428
2125
|
}, [modalMobileContainerRef?.current]);
|
|
2429
|
-
(0,
|
|
2126
|
+
(0, import_react22.useEffect)(() => {
|
|
2430
2127
|
setScrollDirection(
|
|
2431
2128
|
(prevScrollDirection) => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection
|
|
2432
2129
|
);
|
|
2433
2130
|
}, [scrollTop, scrollTopPrev]);
|
|
2434
|
-
(0,
|
|
2131
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
2435
2132
|
if (isOpen) {
|
|
2436
2133
|
const modalStyle = modalRef?.current ? modalRef?.current.style || window.getComputedStyle(modalRef?.current) : {};
|
|
2437
2134
|
const computedModalHeight = modalRef?.current ? modalHeight + Number.parseFloat(modalStyle?.marginTop || "0") : 0;
|
|
@@ -2447,7 +2144,7 @@ function useMobileModal({
|
|
|
2447
2144
|
}
|
|
2448
2145
|
}
|
|
2449
2146
|
}, [modalsLogicProps, isOpen, isMobile, modalHeight]);
|
|
2450
|
-
(0,
|
|
2147
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
2451
2148
|
if (isMobile && isOpen) {
|
|
2452
2149
|
const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
|
|
2453
2150
|
if (newModalHeight && modalHeight !== newModalHeight) {
|
|
@@ -2455,7 +2152,7 @@ function useMobileModal({
|
|
|
2455
2152
|
}
|
|
2456
2153
|
}
|
|
2457
2154
|
});
|
|
2458
|
-
(0,
|
|
2155
|
+
(0, import_react22.useEffect)(() => {
|
|
2459
2156
|
if (isMobile && withMobileLogic) {
|
|
2460
2157
|
const { footerHeight, headerHeight } = modalsLogicProps;
|
|
2461
2158
|
setModalsLogic((prevStickyLogic) => ({
|
|
@@ -2475,7 +2172,7 @@ function useMobileModal({
|
|
|
2475
2172
|
modalHeight,
|
|
2476
2173
|
window.innerHeight
|
|
2477
2174
|
]);
|
|
2478
|
-
(0,
|
|
2175
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
2479
2176
|
if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== void 0) {
|
|
2480
2177
|
setModalsLogicProps((state) => ({
|
|
2481
2178
|
...state,
|
|
@@ -2483,7 +2180,7 @@ function useMobileModal({
|
|
|
2483
2180
|
}));
|
|
2484
2181
|
}
|
|
2485
2182
|
}, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
|
|
2486
|
-
(0,
|
|
2183
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
2487
2184
|
if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== void 0) {
|
|
2488
2185
|
setModalsLogicProps((state) => ({
|
|
2489
2186
|
...state,
|
|
@@ -2491,7 +2188,7 @@ function useMobileModal({
|
|
|
2491
2188
|
}));
|
|
2492
2189
|
}
|
|
2493
2190
|
}, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
|
|
2494
|
-
(0,
|
|
2191
|
+
(0, import_react22.useEffect)(() => {
|
|
2495
2192
|
if (modalMobileContainerRef?.current) {
|
|
2496
2193
|
setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
|
|
2497
2194
|
setScrollHeight(
|
|
@@ -2499,7 +2196,7 @@ function useMobileModal({
|
|
|
2499
2196
|
);
|
|
2500
2197
|
}
|
|
2501
2198
|
}, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);
|
|
2502
|
-
(0,
|
|
2199
|
+
(0, import_react22.useEffect)(() => {
|
|
2503
2200
|
window.addEventListener("resize", () => {
|
|
2504
2201
|
setContainerScrollHeight((containerScrollHeight) => {
|
|
2505
2202
|
setScrollHeight(containerScrollHeight - window.innerHeight);
|
|
@@ -2507,10 +2204,10 @@ function useMobileModal({
|
|
|
2507
2204
|
});
|
|
2508
2205
|
});
|
|
2509
2206
|
}, []);
|
|
2510
|
-
const renderModal = (0,
|
|
2207
|
+
const renderModal = (0, import_react22.useCallback)(
|
|
2511
2208
|
(modal) => {
|
|
2512
2209
|
if (!isMobile || !withMobileLogic) return modal;
|
|
2513
|
-
return /* @__PURE__ */ (0,
|
|
2210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "modal-mobile-container", ref: modalMobileContainerRef, children: modal });
|
|
2514
2211
|
},
|
|
2515
2212
|
[isMobile, withMobileLogic]
|
|
2516
2213
|
);
|
|
@@ -2529,7 +2226,7 @@ function useMobileModal({
|
|
|
2529
2226
|
}
|
|
2530
2227
|
|
|
2531
2228
|
// src/Atomic/UI/Modal/Modal.tsx
|
|
2532
|
-
var
|
|
2229
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2533
2230
|
var attrsForModalBodyDefault = {};
|
|
2534
2231
|
var KEY_CODE = Object.freeze({
|
|
2535
2232
|
ENTER: 13,
|
|
@@ -2593,11 +2290,11 @@ function Modal({
|
|
|
2593
2290
|
withMobileLogic,
|
|
2594
2291
|
children
|
|
2595
2292
|
}) {
|
|
2596
|
-
const internalRef = (0,
|
|
2293
|
+
const internalRef = (0, import_react23.useRef)(null);
|
|
2597
2294
|
const modalRef = ref || internalRef;
|
|
2598
|
-
const onConfirmRef = (0,
|
|
2599
|
-
const closeModalRef = (0,
|
|
2600
|
-
const onDeclineRef = (0,
|
|
2295
|
+
const onConfirmRef = (0, import_react23.useRef)(onConfirm);
|
|
2296
|
+
const closeModalRef = (0, import_react23.useRef)(closeModal);
|
|
2297
|
+
const onDeclineRef = (0, import_react23.useRef)(onDecline);
|
|
2601
2298
|
const isSubmittingByEnter = submitOnEnter === false ? false : isSubmittingByEnterOuter;
|
|
2602
2299
|
const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
|
|
2603
2300
|
const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
|
|
@@ -2619,7 +2316,7 @@ function Modal({
|
|
|
2619
2316
|
withFixedFooter,
|
|
2620
2317
|
isOpen
|
|
2621
2318
|
});
|
|
2622
|
-
const handle = (0,
|
|
2319
|
+
const handle = (0, import_react23.useMemo)(() => ({
|
|
2623
2320
|
confirm: () => onConfirmRef.current?.(),
|
|
2624
2321
|
close: () => closeModalRef.current?.(),
|
|
2625
2322
|
decline: () => {
|
|
@@ -2646,17 +2343,17 @@ function Modal({
|
|
|
2646
2343
|
},
|
|
2647
2344
|
suspendProcessing
|
|
2648
2345
|
});
|
|
2649
|
-
(0,
|
|
2346
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
2650
2347
|
onConfirmRef.current = isOnConfirmBlocked ? void 0 : onConfirm;
|
|
2651
2348
|
}, [onConfirm, isOnConfirmBlocked]);
|
|
2652
|
-
(0,
|
|
2349
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
2653
2350
|
closeModalRef.current = isCloseModalBlocked ? void 0 : closeModal;
|
|
2654
2351
|
}, [closeModal, isCloseModalBlocked]);
|
|
2655
|
-
(0,
|
|
2352
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
2656
2353
|
onDeclineRef.current = isOnDeclineBlocked ? () => {
|
|
2657
2354
|
} : onDecline;
|
|
2658
2355
|
}, [onDecline, isOnDeclineBlocked]);
|
|
2659
|
-
(0,
|
|
2356
|
+
(0, import_react23.useEffect)(() => {
|
|
2660
2357
|
const outerTarget = getIsOnlyAnObject(withEventManagement) ? withEventManagement.listenersTarget : void 0;
|
|
2661
2358
|
const target = outerTarget ?? document;
|
|
2662
2359
|
const onKeyPress = getOnKeyPress({ id, onSubmit: handle.confirm, onClose: handle.close, suspendProcessing });
|
|
@@ -2672,7 +2369,7 @@ function Modal({
|
|
|
2672
2369
|
};
|
|
2673
2370
|
}, []);
|
|
2674
2371
|
if (!isOpen) return null;
|
|
2675
|
-
return /* @__PURE__ */ (0,
|
|
2372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2676
2373
|
"div",
|
|
2677
2374
|
{
|
|
2678
2375
|
id: `${id}`,
|
|
@@ -2683,8 +2380,8 @@ function Modal({
|
|
|
2683
2380
|
"aria-modal": "true",
|
|
2684
2381
|
"aria-labelledby": `${testId}-title`,
|
|
2685
2382
|
children: renderModal(
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
2687
|
-
/* @__PURE__ */ (0,
|
|
2383
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
2384
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2688
2385
|
"div",
|
|
2689
2386
|
{
|
|
2690
2387
|
"data-testid": `${testId}-overlay`,
|
|
@@ -2693,23 +2390,23 @@ function Modal({
|
|
|
2693
2390
|
role: "presentation"
|
|
2694
2391
|
}
|
|
2695
2392
|
),
|
|
2696
|
-
/* @__PURE__ */ (0,
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2697
2394
|
"div",
|
|
2698
2395
|
{
|
|
2699
2396
|
ref: modalRef,
|
|
2700
2397
|
style: { width: typeof size === "number" ? `${size}px` : `${size?.replace("px", "")}px` },
|
|
2701
|
-
className: (0,
|
|
2398
|
+
className: (0, import_classnames19.default)(className, {
|
|
2702
2399
|
"modal": isOpen,
|
|
2703
2400
|
"modal--no-header": isOpen && noHeader && !customHeader,
|
|
2704
2401
|
"modal-mobile": isOpen && isMobile,
|
|
2705
2402
|
"hidden": !isOpen
|
|
2706
2403
|
}),
|
|
2707
2404
|
children: [
|
|
2708
|
-
customHeader || !noHeader && /* @__PURE__ */ (0,
|
|
2405
|
+
customHeader || !noHeader && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2709
2406
|
ModalTitle_default,
|
|
2710
2407
|
{
|
|
2711
2408
|
wrapperRef: modalMobileHeaderRef,
|
|
2712
|
-
className: (0,
|
|
2409
|
+
className: (0, import_classnames19.default)({
|
|
2713
2410
|
"modal__header--hidden": MODALS_LOGIC.IS_HEADER_HIDDEN,
|
|
2714
2411
|
"modal__header--sticky": !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
|
|
2715
2412
|
}),
|
|
@@ -2717,38 +2414,38 @@ function Modal({
|
|
|
2717
2414
|
isForced: forced,
|
|
2718
2415
|
onClose: handle.close,
|
|
2719
2416
|
noHeaderCloseBtn,
|
|
2720
|
-
children: /* @__PURE__ */ (0,
|
|
2417
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: `${testId}-title`, children: renderModalTitle({ mode, title, onlyTitle }) })
|
|
2721
2418
|
}
|
|
2722
2419
|
),
|
|
2723
|
-
/* @__PURE__ */ (0,
|
|
2420
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2724
2421
|
"div",
|
|
2725
2422
|
{
|
|
2726
2423
|
...atributesForModalBody,
|
|
2727
2424
|
ref: modalMobileBodyRef,
|
|
2728
|
-
className: (0,
|
|
2425
|
+
className: (0, import_classnames19.default)("modal__body", {
|
|
2729
2426
|
"modal__body--no-footer": noFooter
|
|
2730
2427
|
}),
|
|
2731
2428
|
role: "document",
|
|
2732
2429
|
children
|
|
2733
2430
|
}
|
|
2734
2431
|
),
|
|
2735
|
-
(!noFooter || customFooter) && /* @__PURE__ */ (0,
|
|
2432
|
+
(!noFooter || customFooter) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2736
2433
|
ModalFooter_default,
|
|
2737
2434
|
{
|
|
2738
2435
|
wrapperRef: modalMobileFooterRef,
|
|
2739
|
-
className: (0,
|
|
2436
|
+
className: (0, import_classnames19.default)({
|
|
2740
2437
|
"modal__footer--hidden": MODALS_LOGIC.IS_FOOTER_HIDDEN,
|
|
2741
2438
|
"modal__footer--sticky": !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY && scrollTop !== scrollHeight,
|
|
2742
2439
|
"modal__footer_with-left-content": leftContentOfFooter
|
|
2743
2440
|
}),
|
|
2744
|
-
children: customFooter || /* @__PURE__ */ (0,
|
|
2441
|
+
children: customFooter || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
2745
2442
|
leftContentOfFooter,
|
|
2746
|
-
(!noCloseBtn || !noConfirmBtn) && /* @__PURE__ */ (0,
|
|
2747
|
-
!noCloseBtn && /* @__PURE__ */ (0,
|
|
2443
|
+
(!noCloseBtn || !noConfirmBtn) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "modal__buttons-block", children: [
|
|
2444
|
+
!noCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2748
2445
|
Button_default,
|
|
2749
2446
|
{
|
|
2750
2447
|
testId: "modal",
|
|
2751
|
-
className: (0,
|
|
2448
|
+
className: (0, import_classnames19.default)(closeBtnClassName, btnClassNames),
|
|
2752
2449
|
variant: closeBtnVariant || "dark-outline",
|
|
2753
2450
|
onClick: handle.decline,
|
|
2754
2451
|
label: closeBtnText || "Cancel",
|
|
@@ -2759,13 +2456,13 @@ function Modal({
|
|
|
2759
2456
|
"aria-label": "Close modal"
|
|
2760
2457
|
}
|
|
2761
2458
|
),
|
|
2762
|
-
!noConfirmBtn && /* @__PURE__ */ (0,
|
|
2459
|
+
!noConfirmBtn && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2763
2460
|
Button_default,
|
|
2764
2461
|
{
|
|
2765
2462
|
testId: "modal",
|
|
2766
2463
|
onClick: handle.confirm,
|
|
2767
2464
|
label: confirmBtnLabel || mode && mode?.[0].toUpperCase() + mode?.slice(1) || "Apply",
|
|
2768
|
-
className: (0,
|
|
2465
|
+
className: (0, import_classnames19.default)("ml5", confirmBtnClassName, btnClassNames),
|
|
2769
2466
|
variant: confirmBtnVariant,
|
|
2770
2467
|
disabled: confirmBtnDisable,
|
|
2771
2468
|
icon: confirmBtnIcon,
|
|
@@ -2789,9 +2486,9 @@ Modal.displayName = "Modal";
|
|
|
2789
2486
|
var Modal_default = Modal;
|
|
2790
2487
|
|
|
2791
2488
|
// src/Atomic/UI/Modal/ModalHOC.tsx
|
|
2792
|
-
var
|
|
2793
|
-
var
|
|
2794
|
-
var
|
|
2489
|
+
var import_classnames20 = __toESM(require("classnames"), 1);
|
|
2490
|
+
var import_react24 = require("react");
|
|
2491
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2795
2492
|
var ModalHOC = ({
|
|
2796
2493
|
id,
|
|
2797
2494
|
zIndex = 100,
|
|
@@ -2809,313 +2506,68 @@ var ModalHOC = ({
|
|
|
2809
2506
|
isClosingByEsc: isClosingByEscOuter = true,
|
|
2810
2507
|
closeOnEsc
|
|
2811
2508
|
}) => {
|
|
2812
|
-
const modalRef = (0,
|
|
2813
|
-
const closeModalRef = (0,
|
|
2509
|
+
const modalRef = (0, import_react24.useRef)(null);
|
|
2510
|
+
const closeModalRef = (0, import_react24.useRef)(closeModal);
|
|
2814
2511
|
const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
|
|
2815
2512
|
const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
|
|
2816
|
-
const handleClose = (0,
|
|
2513
|
+
const handleClose = (0, import_react24.useMemo)(() => () => closeModalRef.current?.(), []);
|
|
2817
2514
|
useHandleKeyPress_default({
|
|
2818
2515
|
escCallback: isClosingByEsc && typeof closeModal === "function" ? handleClose : void 0,
|
|
2819
2516
|
withEventManagementStructure
|
|
2820
2517
|
});
|
|
2821
|
-
(0,
|
|
2518
|
+
(0, import_react24.useLayoutEffect)(() => {
|
|
2822
2519
|
closeModalRef.current = closeBtnDisable ? void 0 : closeModal;
|
|
2823
2520
|
}, [closeModal, closeBtnDisable]);
|
|
2824
|
-
(0,
|
|
2521
|
+
(0, import_react24.useEffect)(() => {
|
|
2825
2522
|
const onKeyPress = getOnKeyPress({ id, onClose: handleClose });
|
|
2826
2523
|
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2827
2524
|
if (isClosingByEsc) document.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2828
2525
|
}
|
|
2829
|
-
return () => {
|
|
2830
|
-
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2831
|
-
if (isClosingByEsc) document.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2832
|
-
}
|
|
2833
|
-
};
|
|
2834
|
-
}, []);
|
|
2835
|
-
if (!isOpen) return null;
|
|
2836
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
-
/* @__PURE__ */ (0,
|
|
2838
|
-
/* @__PURE__ */ (0,
|
|
2839
|
-
"div",
|
|
2840
|
-
{
|
|
2841
|
-
ref: modalRef,
|
|
2842
|
-
style: { width: size },
|
|
2843
|
-
className: (0,
|
|
2844
|
-
role: "dialog",
|
|
2845
|
-
"aria-modal": "true",
|
|
2846
|
-
"aria-labelledby": testId,
|
|
2847
|
-
tabIndex: -1,
|
|
2848
|
-
children
|
|
2849
|
-
}
|
|
2850
|
-
)
|
|
2851
|
-
] });
|
|
2852
|
-
};
|
|
2853
|
-
var ModalHOC_default = ModalHOC;
|
|
2854
|
-
|
|
2855
|
-
// src/Atomic/UI/Modal/index.ts
|
|
2856
|
-
var Modal_default2 = Modal_default;
|
|
2857
|
-
|
|
2858
|
-
// src/Atomic/UI/MonoAccordion/index.ts
|
|
2859
|
-
var MonoAccordion_default2 = MonoAccordion_default;
|
|
2860
|
-
|
|
2861
|
-
// src/Atomic/UI/NavLine/NavLine.tsx
|
|
2862
|
-
var import_classnames25 = __toESM(require("classnames"), 1);
|
|
2863
|
-
var import_react27 = require("react");
|
|
2864
|
-
var Icons3 = __toESM(require("react-feather"), 1);
|
|
2865
|
-
var import_react_router_dom4 = require("react-router-dom");
|
|
2866
|
-
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2867
|
-
var CN4 = "nav-line";
|
|
2868
|
-
function checkedRef2(ref) {
|
|
2869
|
-
if (!ref) return null;
|
|
2870
|
-
return typeof ref === "function" ? (node) => ref(node) : ref;
|
|
2871
|
-
}
|
|
2872
|
-
var NavLine = ({
|
|
2873
|
-
root = "",
|
|
2874
|
-
activeTab,
|
|
2875
|
-
variant,
|
|
2876
|
-
onChange,
|
|
2877
|
-
className,
|
|
2878
|
-
items,
|
|
2879
|
-
children,
|
|
2880
|
-
isLocal = false,
|
|
2881
|
-
mode,
|
|
2882
|
-
isNavigateByKeys,
|
|
2883
|
-
isTabLoading,
|
|
2884
|
-
scrollMode = false,
|
|
2885
|
-
testId = CN4
|
|
2886
|
-
}) => {
|
|
2887
|
-
const [navLineItems, setNavLineItems] = (0, import_react27.useState)([]);
|
|
2888
|
-
const wrapperRef = (0, import_react27.useRef)(null);
|
|
2889
|
-
const wrapperInnerRef = (0, import_react27.useRef)(null);
|
|
2890
|
-
const [showScrollButtons, setShowScrollButtons] = (0, import_react27.useState)(false);
|
|
2891
|
-
const [canScrollLeft, setCanScrollLeft] = (0, import_react27.useState)(false);
|
|
2892
|
-
const [canScrollRight, setCanScrollRight] = (0, import_react27.useState)(false);
|
|
2893
|
-
const [isScrollBlocked, setIsScrollBlocked] = (0, import_react27.useState)(false);
|
|
2894
|
-
const checkScroll = (0, import_react27.useCallback)(() => {
|
|
2895
|
-
const inner = wrapperInnerRef.current;
|
|
2896
|
-
if (!inner) return;
|
|
2897
|
-
const hasOverflow = inner.scrollWidth > inner.clientWidth;
|
|
2898
|
-
const canScrollLeft2 = inner.scrollLeft > 0;
|
|
2899
|
-
const canScrollRight2 = inner.scrollLeft < inner.scrollWidth - inner.clientWidth;
|
|
2900
|
-
setShowScrollButtons(hasOverflow);
|
|
2901
|
-
setCanScrollLeft(canScrollLeft2);
|
|
2902
|
-
setCanScrollRight(canScrollRight2);
|
|
2903
|
-
}, []);
|
|
2904
|
-
const scroll = (0, import_react27.useCallback)(
|
|
2905
|
-
(direction) => {
|
|
2906
|
-
if (isScrollBlocked || !wrapperInnerRef.current) return;
|
|
2907
|
-
setIsScrollBlocked(true);
|
|
2908
|
-
const scrollAmount = 100;
|
|
2909
|
-
const offset = direction === "left" ? -scrollAmount : scrollAmount;
|
|
2910
|
-
try {
|
|
2911
|
-
wrapperInnerRef.current.scrollBy({
|
|
2912
|
-
left: offset,
|
|
2913
|
-
behavior: "smooth"
|
|
2914
|
-
});
|
|
2915
|
-
} catch (error) {
|
|
2916
|
-
console.error("scrollBy is not supported", error);
|
|
2917
|
-
if (wrapperInnerRef.current) {
|
|
2918
|
-
wrapperInnerRef.current.scrollLeft += offset;
|
|
2919
|
-
}
|
|
2920
|
-
}
|
|
2921
|
-
setTimeout(() => {
|
|
2922
|
-
setIsScrollBlocked(false);
|
|
2923
|
-
checkScroll();
|
|
2924
|
-
}, 300);
|
|
2925
|
-
},
|
|
2926
|
-
[isScrollBlocked, checkScroll]
|
|
2927
|
-
);
|
|
2928
|
-
const handleWheel = (0, import_react27.useCallback)(
|
|
2929
|
-
(e) => {
|
|
2930
|
-
if (!scrollMode) return;
|
|
2931
|
-
e.preventDefault();
|
|
2932
|
-
if (e.deltaY > 0) {
|
|
2933
|
-
scroll("right");
|
|
2934
|
-
} else {
|
|
2935
|
-
scroll("left");
|
|
2936
|
-
}
|
|
2937
|
-
},
|
|
2938
|
-
[scroll, scrollMode]
|
|
2939
|
-
);
|
|
2940
|
-
const onTabChange = (0, import_react27.useCallback)(
|
|
2941
|
-
(item) => {
|
|
2942
|
-
if (!item.disabled && !(mode === "create" && item.tabId !== "general")) {
|
|
2943
|
-
onChange(item.tabId);
|
|
2944
|
-
}
|
|
2945
|
-
},
|
|
2946
|
-
[mode, onChange]
|
|
2947
|
-
);
|
|
2948
|
-
const navigateByKeys = (0, import_react27.useCallback)(
|
|
2949
|
-
(event) => {
|
|
2950
|
-
if (event.repeat) return;
|
|
2951
|
-
const activeTabIndex = items.findIndex((tab) => tab.tabId === activeTab);
|
|
2952
|
-
const nextTabID = items[activeTabIndex + 1]?.tabId;
|
|
2953
|
-
const prevTabID = items[activeTabIndex - 1]?.tabId;
|
|
2954
|
-
if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) {
|
|
2955
|
-
onChange(nextTabID);
|
|
2956
|
-
} else if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) {
|
|
2957
|
-
onChange(prevTabID);
|
|
2958
|
-
}
|
|
2959
|
-
},
|
|
2960
|
-
[activeTab, items, onChange]
|
|
2961
|
-
);
|
|
2962
|
-
(0, import_react27.useEffect)(() => {
|
|
2963
|
-
setNavLineItems(
|
|
2964
|
-
items.map((item) => ({
|
|
2965
|
-
...item,
|
|
2966
|
-
ref: (0, import_react27.createRef)()
|
|
2967
|
-
}))
|
|
2968
|
-
);
|
|
2969
|
-
}, [items]);
|
|
2970
|
-
(0, import_react27.useEffect)(() => {
|
|
2971
|
-
if (isNavigateByKeys && !isTabLoading) {
|
|
2972
|
-
document.addEventListener("keydown", navigateByKeys);
|
|
2973
|
-
}
|
|
2974
|
-
return () => document.removeEventListener("keydown", navigateByKeys);
|
|
2975
|
-
}, [isNavigateByKeys, isTabLoading, navigateByKeys]);
|
|
2976
|
-
(0, import_react27.useEffect)(() => {
|
|
2977
|
-
if (!scrollMode) return;
|
|
2978
|
-
const inner = wrapperInnerRef.current;
|
|
2979
|
-
if (!inner) return;
|
|
2980
|
-
const resizeObserver = new ResizeObserver(checkScroll);
|
|
2981
|
-
resizeObserver.observe(inner);
|
|
2982
|
-
inner.addEventListener("scroll", checkScroll);
|
|
2983
|
-
inner.addEventListener("wheel", handleWheel, { passive: false });
|
|
2984
|
-
checkScroll();
|
|
2985
|
-
return () => {
|
|
2986
|
-
resizeObserver.disconnect();
|
|
2987
|
-
inner.removeEventListener("scroll", checkScroll);
|
|
2988
|
-
inner.removeEventListener("wheel", handleWheel);
|
|
2989
|
-
};
|
|
2990
|
-
}, [scrollMode, checkScroll, handleWheel]);
|
|
2991
|
-
const renderNavItem = (item) => {
|
|
2992
|
-
const Icon = item.icon ? Icons3[item.icon] : null;
|
|
2993
|
-
const isDisabled = item.disabled || mode === "create" && item.tabId !== "general";
|
|
2994
|
-
const commonProps = {
|
|
2995
|
-
"title": item.title,
|
|
2996
|
-
"className": (0, import_classnames25.default)(
|
|
2997
|
-
{ "nav-line__item": !variant },
|
|
2998
|
-
{ "nav-line--simple__item": variant === "simple" },
|
|
2999
|
-
{ active: activeTab === item.tabId },
|
|
3000
|
-
{ disabled: isDisabled },
|
|
3001
|
-
{ "nav-line__item--hidden": item.isHidden }
|
|
3002
|
-
),
|
|
3003
|
-
"role": "tab",
|
|
3004
|
-
"aria-selected": activeTab === item.tabId,
|
|
3005
|
-
"aria-disabled": isDisabled,
|
|
3006
|
-
"tabIndex": isDisabled ? -1 : 0
|
|
3007
|
-
};
|
|
3008
|
-
const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "nav-line__content", children: [
|
|
3009
|
-
Icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "nav-line__item--icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, {}) }),
|
|
3010
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: (0, import_classnames25.default)({ "nav-line__item--label": variant !== "simple" }), children: item.label }),
|
|
3011
|
-
item.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "nav-line-count", "aria-label": `${item.count} items`, children: [
|
|
3012
|
-
"(",
|
|
3013
|
-
item.count,
|
|
3014
|
-
")"
|
|
3015
|
-
] })
|
|
3016
|
-
] });
|
|
3017
|
-
if (isLocal) {
|
|
3018
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3019
|
-
"span",
|
|
3020
|
-
{
|
|
3021
|
-
...commonProps,
|
|
3022
|
-
ref: checkedRef2(item.ref),
|
|
3023
|
-
onClick: () => !isDisabled && onTabChange(item),
|
|
3024
|
-
onKeyPress: (e) => {
|
|
3025
|
-
if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
|
|
3026
|
-
e.preventDefault();
|
|
3027
|
-
onTabChange(item);
|
|
3028
|
-
}
|
|
3029
|
-
},
|
|
3030
|
-
children: content
|
|
3031
|
-
},
|
|
3032
|
-
`tab__${item.tabId}`
|
|
3033
|
-
);
|
|
3034
|
-
}
|
|
3035
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3036
|
-
import_react_router_dom4.NavLink,
|
|
3037
|
-
{
|
|
3038
|
-
...commonProps,
|
|
3039
|
-
to: `${root}${item?.linkChapter || item.tabId}/`,
|
|
3040
|
-
onClick: (e) => {
|
|
3041
|
-
if (isDisabled) {
|
|
3042
|
-
e.preventDefault();
|
|
3043
|
-
}
|
|
3044
|
-
},
|
|
3045
|
-
children: content
|
|
3046
|
-
},
|
|
3047
|
-
`tab__${item.tabId}`
|
|
3048
|
-
);
|
|
3049
|
-
};
|
|
3050
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "nav-line-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3051
|
-
"div",
|
|
3052
|
-
{
|
|
3053
|
-
"data-testid": testId,
|
|
3054
|
-
className: (0, import_classnames25.default)(
|
|
3055
|
-
{ [CN4]: !variant },
|
|
3056
|
-
{ [`${CN4}--simple`]: variant === "simple" },
|
|
3057
|
-
{ [`${CN4}--scroll-mode`]: scrollMode },
|
|
3058
|
-
className
|
|
3059
|
-
),
|
|
3060
|
-
ref: wrapperRef,
|
|
3061
|
-
children: [
|
|
3062
|
-
scrollMode && showScrollButtons && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3063
|
-
"button",
|
|
3064
|
-
{
|
|
3065
|
-
type: "button",
|
|
3066
|
-
"data-testid": "nav-line-scroll-prev",
|
|
3067
|
-
className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
|
|
3068
|
-
onClick: () => scroll("left"),
|
|
3069
|
-
"aria-label": "Scroll previous",
|
|
3070
|
-
disabled: !canScrollLeft,
|
|
3071
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icons3.ChevronLeft, {})
|
|
3072
|
-
}
|
|
3073
|
-
),
|
|
3074
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3075
|
-
"div",
|
|
3076
|
-
{
|
|
3077
|
-
ref: wrapperInnerRef,
|
|
3078
|
-
className: (0, import_classnames25.default)({ "nav-line__inner": !variant }, { "nav-line--simple__inner": variant === "simple" }),
|
|
3079
|
-
role: "tablist",
|
|
3080
|
-
"aria-orientation": "horizontal",
|
|
3081
|
-
children: navLineItems.map(renderNavItem)
|
|
3082
|
-
}
|
|
3083
|
-
),
|
|
3084
|
-
scrollMode && showScrollButtons && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3085
|
-
"button",
|
|
3086
|
-
{
|
|
3087
|
-
type: "button",
|
|
3088
|
-
"data-testid": "nav-line-scroll-next",
|
|
3089
|
-
className: "nav-line--simple__arrow nav-line--simple__arrow--next",
|
|
3090
|
-
onClick: () => scroll("right"),
|
|
3091
|
-
"aria-label": "Scroll next",
|
|
3092
|
-
disabled: !canScrollRight,
|
|
3093
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icons3.ChevronRight, {})
|
|
3094
|
-
}
|
|
3095
|
-
),
|
|
3096
|
-
children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "nav-line__body", role: "tabpanel", children })
|
|
3097
|
-
]
|
|
3098
|
-
}
|
|
3099
|
-
) });
|
|
2526
|
+
return () => {
|
|
2527
|
+
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2528
|
+
if (isClosingByEsc) document.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2529
|
+
}
|
|
2530
|
+
};
|
|
2531
|
+
}, []);
|
|
2532
|
+
if (!isOpen) return null;
|
|
2533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { id: `${id}`, style: { zIndex }, "data-testid": testId, className: "modal-box j5", role: "presentation", children: [
|
|
2534
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "modal-overlay", onClick: handleClose, role: "presentation", "aria-hidden": "true" }),
|
|
2535
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2536
|
+
"div",
|
|
2537
|
+
{
|
|
2538
|
+
ref: modalRef,
|
|
2539
|
+
style: { width: size },
|
|
2540
|
+
className: (0, import_classnames20.default)(className, "modal"),
|
|
2541
|
+
role: "dialog",
|
|
2542
|
+
"aria-modal": "true",
|
|
2543
|
+
"aria-labelledby": testId,
|
|
2544
|
+
tabIndex: -1,
|
|
2545
|
+
children
|
|
2546
|
+
}
|
|
2547
|
+
)
|
|
2548
|
+
] });
|
|
3100
2549
|
};
|
|
3101
|
-
var
|
|
2550
|
+
var ModalHOC_default = ModalHOC;
|
|
3102
2551
|
|
|
3103
|
-
// src/Atomic/UI/
|
|
3104
|
-
var
|
|
2552
|
+
// src/Atomic/UI/Modal/index.ts
|
|
2553
|
+
var Modal_default2 = Modal_default;
|
|
2554
|
+
|
|
2555
|
+
// src/Atomic/UI/MonoAccordion/index.ts
|
|
2556
|
+
var MonoAccordion_default2 = MonoAccordion_default;
|
|
3105
2557
|
|
|
3106
2558
|
// src/Atomic/UI/PageTitle/PageTitle.tsx
|
|
3107
|
-
var
|
|
2559
|
+
var import_classnames21 = __toESM(require("classnames"), 1);
|
|
3108
2560
|
var import_react_feather10 = require("react-feather");
|
|
3109
|
-
var
|
|
2561
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3110
2562
|
var RC5 = "page-title";
|
|
3111
|
-
var PageTitle = ({ title, pages, children, testId = RC5 }) => /* @__PURE__ */ (0,
|
|
3112
|
-
/* @__PURE__ */ (0,
|
|
3113
|
-
/* @__PURE__ */ (0,
|
|
3114
|
-
pages.length > 0 && /* @__PURE__ */ (0,
|
|
3115
|
-
/* @__PURE__ */ (0,
|
|
3116
|
-
pages.map(({ name, path }, index) => /* @__PURE__ */ (0,
|
|
3117
|
-
/* @__PURE__ */ (0,
|
|
3118
|
-
pages.length - 1 === index ? /* @__PURE__ */ (0,
|
|
2563
|
+
var PageTitle = ({ title, pages, children, testId = RC5 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-testid": testId, className: RC5, role: "region", "aria-label": title, children: [
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `${RC5}__wrap`, children: [
|
|
2565
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: `${RC5}__title`, children: title }),
|
|
2566
|
+
pages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { className: `${RC5}__pages`, "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ol", { className: `${RC5}__list`, children: [
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { className: `${RC5}__link`, href: "/", "aria-label": "Home page", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_feather10.Home, { "aria-hidden": "true" }) }) }),
|
|
2568
|
+
pages.map(({ name, path }, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { children: [
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: `${RC5}__delimiter`, "aria-hidden": "true", children: "/" }),
|
|
2570
|
+
pages.length - 1 === index ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: (0, import_classnames21.default)(`${RC5}__link`, `${RC5}__link_last`), "aria-current": "page", children: name }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { className: `${RC5}__link`, href: path, children: name })
|
|
3119
2571
|
] }, path))
|
|
3120
2572
|
] }) })
|
|
3121
2573
|
] }),
|
|
@@ -3127,7 +2579,7 @@ var PageTitle_default = PageTitle;
|
|
|
3127
2579
|
var PageTitle_default2 = PageTitle_default;
|
|
3128
2580
|
|
|
3129
2581
|
// src/Atomic/UI/Price/Price.tsx
|
|
3130
|
-
var
|
|
2582
|
+
var import_classnames22 = __toESM(require("classnames"), 1);
|
|
3131
2583
|
|
|
3132
2584
|
// src/Functions/fieldValueFormatters.js
|
|
3133
2585
|
var getSafelyValue = (value) => value !== void 0 && value !== null ? value?.toString?.() || "" : "";
|
|
@@ -3237,15 +2689,15 @@ var formatToPriceWithCurrency = (value, currencyCode, symbolPosition = "before")
|
|
|
3237
2689
|
};
|
|
3238
2690
|
|
|
3239
2691
|
// src/Atomic/UI/Price/Price.tsx
|
|
3240
|
-
var
|
|
3241
|
-
var
|
|
3242
|
-
var Price = ({ value, currencyCode, isSymbolAfter, className, testId =
|
|
2692
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2693
|
+
var CN3 = "price";
|
|
2694
|
+
var Price = ({ value, currencyCode, isSymbolAfter, className, testId = CN3 }) => {
|
|
3243
2695
|
if (value === void 0 || value === null) return null;
|
|
3244
|
-
return /* @__PURE__ */ (0,
|
|
2696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3245
2697
|
"div",
|
|
3246
2698
|
{
|
|
3247
2699
|
"data-testid": testId,
|
|
3248
|
-
className: (0,
|
|
2700
|
+
className: (0, import_classnames22.default)(CN3, className),
|
|
3249
2701
|
role: "contentinfo",
|
|
3250
2702
|
"aria-label": `Price: ${formatToPriceWithCurrency(value, currencyCode, isSymbolAfter ? "after" : "before")}`,
|
|
3251
2703
|
children: formatToPriceWithCurrency(value, currencyCode, isSymbolAfter ? "after" : "before")
|
|
@@ -3258,15 +2710,15 @@ var Price_default = Price;
|
|
|
3258
2710
|
var Price_default2 = Price_default;
|
|
3259
2711
|
|
|
3260
2712
|
// src/Atomic/UI/PriceRange/PriceRange.tsx
|
|
3261
|
-
var
|
|
3262
|
-
var
|
|
3263
|
-
var
|
|
3264
|
-
var PriceRange = ({ from, to, mode, testId =
|
|
3265
|
-
return /* @__PURE__ */ (0,
|
|
2713
|
+
var import_classnames23 = __toESM(require("classnames"), 1);
|
|
2714
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2715
|
+
var CN4 = "price-range";
|
|
2716
|
+
var PriceRange = ({ from, to, mode, testId = CN4 }) => {
|
|
2717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "data-testid": testId, className: (0, import_classnames23.default)(CN4, "j4"), role: "region", "aria-label": "Price range", children: mode === "simple" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { "aria-live": "polite", children: [
|
|
3266
2718
|
from,
|
|
3267
2719
|
" - ",
|
|
3268
2720
|
to
|
|
3269
|
-
] }) : /* @__PURE__ */ (0,
|
|
2721
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { "aria-live": "polite", children: [
|
|
3270
2722
|
formatToPriceWithUSD(from?.toString()),
|
|
3271
2723
|
" - ",
|
|
3272
2724
|
formatToPriceWithUSD(to?.toString())
|
|
@@ -3278,9 +2730,9 @@ var PriceRange_default = PriceRange;
|
|
|
3278
2730
|
var PriceRange_default2 = PriceRange_default;
|
|
3279
2731
|
|
|
3280
2732
|
// src/Atomic/UI/ProgressLine/ProgressLine.tsx
|
|
3281
|
-
var
|
|
3282
|
-
var
|
|
3283
|
-
var
|
|
2733
|
+
var import_classnames24 = __toESM(require("classnames"), 1);
|
|
2734
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2735
|
+
var CN5 = "progress-line";
|
|
3284
2736
|
var ProgressLine = ({
|
|
3285
2737
|
label = "",
|
|
3286
2738
|
labelAlign = "left",
|
|
@@ -3299,7 +2751,7 @@ var ProgressLine = ({
|
|
|
3299
2751
|
useVariantLabelColor = true,
|
|
3300
2752
|
isShowLine = true,
|
|
3301
2753
|
className,
|
|
3302
|
-
testId =
|
|
2754
|
+
testId = CN5
|
|
3303
2755
|
}) => {
|
|
3304
2756
|
const getFilledLineWidth = () => {
|
|
3305
2757
|
if (value > maxValue) value = maxValue;
|
|
@@ -3307,21 +2759,21 @@ var ProgressLine = ({
|
|
|
3307
2759
|
};
|
|
3308
2760
|
const renderLabel = () => {
|
|
3309
2761
|
if (!label) return null;
|
|
3310
|
-
return /* @__PURE__ */ (0,
|
|
2762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `progress-line__wrapper__label align-${labelAlign}`, children: label });
|
|
3311
2763
|
};
|
|
3312
2764
|
const renderProgressValue = () => {
|
|
3313
2765
|
if (!renderValue) return null;
|
|
3314
|
-
return /* @__PURE__ */ (0,
|
|
2766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "progress-line__wrapper__value", "aria-live": "polite", children: renderValueInPercents ? getFilledLineWidth() : `${addBitDepthPoints(String(value))} ${valueMeasurement}` });
|
|
3315
2767
|
};
|
|
3316
2768
|
const renderExtremums = () => {
|
|
3317
2769
|
if (!showExtremums) return null;
|
|
3318
|
-
return /* @__PURE__ */ (0,
|
|
3319
|
-
/* @__PURE__ */ (0,
|
|
3320
|
-
/* @__PURE__ */ (0,
|
|
2770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { "aria-hidden": "true", className: `progress-line__wrapper__extremums position-${extremumsPosition}`, children: [
|
|
2771
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "progress-line__wrapper__extremums--min", children: renderValueInPercents ? "0 %" : `${minValue} ${valueMeasurement}` }),
|
|
2772
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "progress-line__wrapper__extremums--max", children: renderValueInPercents ? "100 %" : `${maxValue} ${valueMeasurement}` })
|
|
3321
2773
|
] });
|
|
3322
2774
|
};
|
|
3323
2775
|
const renderFilledLine = () => {
|
|
3324
|
-
return /* @__PURE__ */ (0,
|
|
2776
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3325
2777
|
"div",
|
|
3326
2778
|
{
|
|
3327
2779
|
className: "progress-line__wrapper__line--filled",
|
|
@@ -3335,14 +2787,14 @@ var ProgressLine = ({
|
|
|
3335
2787
|
);
|
|
3336
2788
|
};
|
|
3337
2789
|
const renderLine = () => {
|
|
3338
|
-
return /* @__PURE__ */ (0,
|
|
2790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "progress-line__wrapper__line", children: [
|
|
3339
2791
|
renderExtremums(),
|
|
3340
2792
|
renderFilledLine()
|
|
3341
2793
|
] });
|
|
3342
2794
|
};
|
|
3343
|
-
return /* @__PURE__ */ (0,
|
|
2795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_classnames24.default)(CN5, className), "data-testid": testId, role: "region", "aria-label": "Progress line", children: [
|
|
3344
2796
|
renderLabel(),
|
|
3345
|
-
/* @__PURE__ */ (0,
|
|
2797
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3346
2798
|
"div",
|
|
3347
2799
|
{
|
|
3348
2800
|
className: `progress-line__wrapper variant-${useVariantLabelColor && variant} value-${valueVerticalPosition}-${valueHorizontalPosition} ${className}`,
|
|
@@ -3359,13 +2811,65 @@ var ProgressLine_default = ProgressLine;
|
|
|
3359
2811
|
// src/Atomic/UI/ProgressLine/index.ts
|
|
3360
2812
|
var ProgressLine_default2 = ProgressLine_default;
|
|
3361
2813
|
|
|
2814
|
+
// src/Atomic/UI/Status/Status.tsx
|
|
2815
|
+
var import_classnames25 = __toESM(require("classnames"), 1);
|
|
2816
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2817
|
+
function defaultOnClick2() {
|
|
2818
|
+
}
|
|
2819
|
+
var Status = ({
|
|
2820
|
+
icon,
|
|
2821
|
+
value,
|
|
2822
|
+
label,
|
|
2823
|
+
status,
|
|
2824
|
+
disabled,
|
|
2825
|
+
type,
|
|
2826
|
+
active = 0,
|
|
2827
|
+
pause = 0,
|
|
2828
|
+
className,
|
|
2829
|
+
noBackground,
|
|
2830
|
+
children,
|
|
2831
|
+
testId = "status",
|
|
2832
|
+
onClick = defaultOnClick2
|
|
2833
|
+
}) => {
|
|
2834
|
+
if (!status) return null;
|
|
2835
|
+
const text = children && typeof children === "string" ? children : value || label || status;
|
|
2836
|
+
const formattedLabel = text?.[0].toUpperCase() + text?.slice(1);
|
|
2837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { onClick, "data-testid": testId, className: (0, import_classnames25.default)({ disabled }, className), children: type === "number" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: active === 0 && pause === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "status status--error", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: active }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "status status--warning", children: [
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "status--number-active", children: active }),
|
|
2839
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "color--gray-gull", children: " / " }),
|
|
2840
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: pause > 0 ? "color--froly" : "color--gray-gull", children: pause })
|
|
2841
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2842
|
+
"div",
|
|
2843
|
+
{
|
|
2844
|
+
className: (0, import_classnames25.default)(
|
|
2845
|
+
"status",
|
|
2846
|
+
`status--${status}`,
|
|
2847
|
+
{
|
|
2848
|
+
"status--no-bg": noBackground && status === "pause",
|
|
2849
|
+
"color--gray-gull": noBackground && status === "pause" && !className,
|
|
2850
|
+
"j4": !!icon
|
|
2851
|
+
},
|
|
2852
|
+
className
|
|
2853
|
+
),
|
|
2854
|
+
children: [
|
|
2855
|
+
icon,
|
|
2856
|
+
formattedLabel
|
|
2857
|
+
]
|
|
2858
|
+
}
|
|
2859
|
+
) });
|
|
2860
|
+
};
|
|
2861
|
+
var Status_default = Status;
|
|
2862
|
+
|
|
2863
|
+
// src/Atomic/UI/Status/index.ts
|
|
2864
|
+
var Status_default2 = Status_default;
|
|
2865
|
+
|
|
3362
2866
|
// src/Atomic/UI/Table/Table.js
|
|
3363
|
-
var
|
|
3364
|
-
var
|
|
2867
|
+
var import_react32 = __toESM(require("react"), 1);
|
|
2868
|
+
var import_classnames32 = __toESM(require("classnames"), 1);
|
|
3365
2869
|
|
|
3366
2870
|
// src/Atomic/UI/Table/Partials/TdHeader.js
|
|
3367
|
-
var
|
|
3368
|
-
var
|
|
2871
|
+
var import_react25 = __toESM(require("react"), 1);
|
|
2872
|
+
var import_classnames26 = __toESM(require("classnames"), 1);
|
|
3369
2873
|
|
|
3370
2874
|
// src/Langs.js
|
|
3371
2875
|
var Langs = {
|
|
@@ -3536,50 +3040,168 @@ var Langs = {
|
|
|
3536
3040
|
var Langs_default = Langs;
|
|
3537
3041
|
|
|
3538
3042
|
// src/Atomic/UI/Table/Partials/TdHeader.js
|
|
3539
|
-
var
|
|
3043
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
3540
3044
|
var TdHeader = ({ item, testId = "td-header" }) => {
|
|
3541
3045
|
const txt = Langs_default[global.lng];
|
|
3542
3046
|
switch (item.type) {
|
|
3543
3047
|
case "double":
|
|
3544
|
-
return /* @__PURE__ */ (0,
|
|
3545
|
-
/* @__PURE__ */ (0,
|
|
3546
|
-
/* @__PURE__ */ (0,
|
|
3048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { "data-testid": testId, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "j46", children: [
|
|
3049
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "", children: txt.labels[item.left] || item.left }),
|
|
3050
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "", children: txt.labels[item.right] || item.right })
|
|
3547
3051
|
] }) });
|
|
3548
3052
|
default:
|
|
3549
|
-
return /* @__PURE__ */ (0,
|
|
3550
|
-
/* @__PURE__ */ (0,
|
|
3551
|
-
item.button && /* @__PURE__ */ (0,
|
|
3053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { "data-testid": testId, className: (0, import_classnames26.default)(item.className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_classnames26.default)({ df: item.button }), children: [
|
|
3054
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr5", children: txt.labels[item.label] || item.label }),
|
|
3055
|
+
item.button && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "cards-table__btn", children: txt.buttons[item.button] || item.button })
|
|
3552
3056
|
] }) });
|
|
3553
3057
|
}
|
|
3554
3058
|
};
|
|
3555
3059
|
var TdHeader_default = TdHeader;
|
|
3556
3060
|
|
|
3557
3061
|
// src/Atomic/UI/Table/Partials/TdRow.js
|
|
3558
|
-
var
|
|
3559
|
-
var
|
|
3062
|
+
var import_react31 = __toESM(require("react"), 1);
|
|
3063
|
+
var import_classnames31 = __toESM(require("classnames"), 1);
|
|
3560
3064
|
|
|
3561
3065
|
// src/Atomic/UI/Table/TdTypes/TdRange.js
|
|
3562
|
-
var
|
|
3066
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
3563
3067
|
var TdRange = ({ item }) => {
|
|
3564
3068
|
if (!item) return false;
|
|
3565
|
-
return /* @__PURE__ */ (0,
|
|
3566
|
-
/* @__PURE__ */ (0,
|
|
3567
|
-
/* @__PURE__ */ (0,
|
|
3568
|
-
/* @__PURE__ */ (0,
|
|
3069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
|
|
3070
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: item.from }),
|
|
3071
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: " - " }),
|
|
3072
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: item.to })
|
|
3569
3073
|
] });
|
|
3570
3074
|
};
|
|
3571
3075
|
var TdRange_default = TdRange;
|
|
3572
3076
|
|
|
3573
3077
|
// src/Atomic/UI/Table/Partials/TdCell.js
|
|
3574
|
-
var
|
|
3078
|
+
var import_react30 = __toESM(require("react"), 1);
|
|
3079
|
+
|
|
3080
|
+
// src/Atomic/UI/Accordion/AccordionItem.tsx
|
|
3081
|
+
var import_classnames27 = __toESM(require("classnames"), 1);
|
|
3082
|
+
var import_react26 = require("react");
|
|
3083
|
+
var Icons = __toESM(require("react-feather"), 1);
|
|
3084
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3085
|
+
var DefaultLink = ({ to, className, children }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href: to, className, children });
|
|
3086
|
+
var AccordionItem = ({
|
|
3087
|
+
item,
|
|
3088
|
+
onClick,
|
|
3089
|
+
isOpen,
|
|
3090
|
+
className,
|
|
3091
|
+
children,
|
|
3092
|
+
noChevron,
|
|
3093
|
+
linkComponent: LinkComponent = DefaultLink,
|
|
3094
|
+
testId = "accordion-item"
|
|
3095
|
+
}) => {
|
|
3096
|
+
const Icon = Icons[item.icon];
|
|
3097
|
+
const [maxHeight, setMaxHeight] = (0, import_react26.useState)(0);
|
|
3098
|
+
const ref = (0, import_react26.useRef)(null);
|
|
3099
|
+
const getItemsHeight = () => {
|
|
3100
|
+
let itemHeight = 0;
|
|
3101
|
+
ref.current?.childNodes.forEach((el) => {
|
|
3102
|
+
itemHeight += el.offsetHeight;
|
|
3103
|
+
});
|
|
3104
|
+
return itemHeight + 20;
|
|
3105
|
+
};
|
|
3106
|
+
(0, import_react26.useEffect)(() => {
|
|
3107
|
+
setMaxHeight(isOpen ? getItemsHeight() : 0);
|
|
3108
|
+
}, [isOpen]);
|
|
3109
|
+
const calculateStatusCount = () => {
|
|
3110
|
+
return item?.rows?.reduce(
|
|
3111
|
+
(acc, row) => {
|
|
3112
|
+
const result = row.cols.reduce(
|
|
3113
|
+
(accum, col) => ({
|
|
3114
|
+
active: accum.active + (col.status === "active" ? 1 : 0),
|
|
3115
|
+
pause: accum.pause + (col.status === "pause" ? 1 : 0)
|
|
3116
|
+
}),
|
|
3117
|
+
{ active: 0, pause: 0 }
|
|
3118
|
+
);
|
|
3119
|
+
return {
|
|
3120
|
+
active: acc.active + result.active,
|
|
3121
|
+
pause: acc.pause + result.pause
|
|
3122
|
+
};
|
|
3123
|
+
},
|
|
3124
|
+
{ active: 0, pause: 0 }
|
|
3125
|
+
);
|
|
3126
|
+
};
|
|
3127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3128
|
+
"div",
|
|
3129
|
+
{
|
|
3130
|
+
"data-testid": testId,
|
|
3131
|
+
className: (0, import_classnames27.default)("accordion--item", className),
|
|
3132
|
+
role: "region",
|
|
3133
|
+
"aria-labelledby": `accordion-title-${item.title}`,
|
|
3134
|
+
children: [
|
|
3135
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3136
|
+
"div",
|
|
3137
|
+
{
|
|
3138
|
+
className: (0, import_classnames27.default)("accordion--title-box", {
|
|
3139
|
+
"accordion--title-open": isOpen
|
|
3140
|
+
}),
|
|
3141
|
+
onClick: () => onClick(!isOpen),
|
|
3142
|
+
id: `accordion-title-${item.title}`,
|
|
3143
|
+
role: "button",
|
|
3144
|
+
"aria-expanded": isOpen,
|
|
3145
|
+
"aria-controls": `accordion-content-${item.title}`,
|
|
3146
|
+
tabIndex: 0,
|
|
3147
|
+
children: [
|
|
3148
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "j4 no-wrap", children: [
|
|
3149
|
+
item?.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: (0, import_classnames27.default)("mr5", item?.className), "aria-hidden": "true" }),
|
|
3150
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "accordion--title", children: item.title || "Menu Chapter" })
|
|
3151
|
+
] }),
|
|
3152
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "j6 accordion-title__right-box", children: [
|
|
3153
|
+
item.status && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mr5", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3154
|
+
Status_default2,
|
|
3155
|
+
{
|
|
3156
|
+
type: item?.status.type,
|
|
3157
|
+
value: item?.status.value,
|
|
3158
|
+
status: item?.status.status,
|
|
3159
|
+
active: calculateStatusCount()?.active,
|
|
3160
|
+
pause: calculateStatusCount()?.pause
|
|
3161
|
+
}
|
|
3162
|
+
) }),
|
|
3163
|
+
!noChevron && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3164
|
+
Icons.ChevronRight,
|
|
3165
|
+
{
|
|
3166
|
+
"aria-hidden": "true",
|
|
3167
|
+
className: (0, import_classnames27.default)("accordion--title-chevron", {
|
|
3168
|
+
"accordion--title-chevron-open": isOpen
|
|
3169
|
+
})
|
|
3170
|
+
}
|
|
3171
|
+
)
|
|
3172
|
+
] })
|
|
3173
|
+
]
|
|
3174
|
+
}
|
|
3175
|
+
),
|
|
3176
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3177
|
+
"div",
|
|
3178
|
+
{
|
|
3179
|
+
ref,
|
|
3180
|
+
style: { maxHeight },
|
|
3181
|
+
className: (0, import_classnames27.default)("accordion--content", {
|
|
3182
|
+
"accordion--content-is-open": isOpen
|
|
3183
|
+
}),
|
|
3184
|
+
id: `accordion-content-${item.title}`,
|
|
3185
|
+
role: "region",
|
|
3186
|
+
"aria-labelledby": `accordion-title-${item.title}`,
|
|
3187
|
+
children: item.children ? item.children.map((el) => {
|
|
3188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkComponent, { to: el.link, className: "accordion--content-item accordion--menu-link", children: el?.title || "Menu item" }, el.id);
|
|
3189
|
+
}) : children
|
|
3190
|
+
}
|
|
3191
|
+
)
|
|
3192
|
+
]
|
|
3193
|
+
}
|
|
3194
|
+
);
|
|
3195
|
+
};
|
|
3196
|
+
var AccordionItem_default = AccordionItem;
|
|
3575
3197
|
|
|
3576
3198
|
// src/Atomic/UI/Table/TdTypes/TdActions.js
|
|
3577
|
-
var
|
|
3578
|
-
var
|
|
3199
|
+
var import_react27 = __toESM(require("react"), 1);
|
|
3200
|
+
var Icons2 = __toESM(require("react-feather"), 1);
|
|
3579
3201
|
|
|
3580
3202
|
// src/Atomic/FormElements/Switcher/Switcher.tsx
|
|
3581
|
-
var
|
|
3582
|
-
var
|
|
3203
|
+
var import_classnames28 = __toESM(require("classnames"), 1);
|
|
3204
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3583
3205
|
var RC6 = "switcher";
|
|
3584
3206
|
var Switcher = ({
|
|
3585
3207
|
label,
|
|
@@ -3592,34 +3214,34 @@ var Switcher = ({
|
|
|
3592
3214
|
hintSide,
|
|
3593
3215
|
testId = "switcher"
|
|
3594
3216
|
}) => {
|
|
3595
|
-
return /* @__PURE__ */ (0,
|
|
3217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3596
3218
|
"div",
|
|
3597
3219
|
{
|
|
3598
3220
|
"data-testid": testId,
|
|
3599
|
-
className: (0,
|
|
3221
|
+
className: (0, import_classnames28.default)(RC6, className, { [`${RC6}_disabled`]: disabled }),
|
|
3600
3222
|
children: [
|
|
3601
|
-
/* @__PURE__ */ (0,
|
|
3223
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3602
3224
|
"button",
|
|
3603
3225
|
{
|
|
3604
3226
|
type: "button",
|
|
3605
3227
|
"data-testid": `${testId}-button`,
|
|
3606
|
-
className: (0,
|
|
3228
|
+
className: (0, import_classnames28.default)(`${RC6}__button`),
|
|
3607
3229
|
disabled,
|
|
3608
3230
|
onClick: (e) => onChange(!isActive, e),
|
|
3609
3231
|
children: [
|
|
3610
|
-
/* @__PURE__ */ (0,
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3611
3233
|
"div",
|
|
3612
3234
|
{
|
|
3613
|
-
className: (0,
|
|
3235
|
+
className: (0, import_classnames28.default)(`${RC6}__button-content`, {
|
|
3614
3236
|
[`${RC6}__button-content_active`]: isActive
|
|
3615
3237
|
}),
|
|
3616
|
-
children: /* @__PURE__ */ (0,
|
|
3238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${RC6}__ball` })
|
|
3617
3239
|
}
|
|
3618
3240
|
),
|
|
3619
|
-
label && /* @__PURE__ */ (0,
|
|
3241
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3620
3242
|
"span",
|
|
3621
3243
|
{
|
|
3622
|
-
className: (0,
|
|
3244
|
+
className: (0, import_classnames28.default)(`${RC6}__label`, {
|
|
3623
3245
|
[`${RC6}__label_bold`]: isLabelBold
|
|
3624
3246
|
}),
|
|
3625
3247
|
children: label
|
|
@@ -3628,7 +3250,7 @@ var Switcher = ({
|
|
|
3628
3250
|
]
|
|
3629
3251
|
}
|
|
3630
3252
|
),
|
|
3631
|
-
hint && /* @__PURE__ */ (0,
|
|
3253
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Hint_default, { className: `${RC6}__hint`, hint, side: hintSide })
|
|
3632
3254
|
]
|
|
3633
3255
|
}
|
|
3634
3256
|
);
|
|
@@ -3636,61 +3258,61 @@ var Switcher = ({
|
|
|
3636
3258
|
var Switcher_default = Switcher;
|
|
3637
3259
|
|
|
3638
3260
|
// src/Atomic/UI/Table/TdTypes/TdActions.js
|
|
3639
|
-
var
|
|
3261
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3640
3262
|
var TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
|
|
3641
3263
|
if (!actions) return false;
|
|
3642
|
-
const [state, setState] = (0,
|
|
3264
|
+
const [state, setState] = (0, import_react27.useState)(actions);
|
|
3643
3265
|
const handleArrayChange = (value, index, prop) => {
|
|
3644
3266
|
state[index][prop] = value;
|
|
3645
3267
|
setState([...state]);
|
|
3646
3268
|
onChange(state);
|
|
3647
3269
|
};
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "j6", children: actions?.map((action, index) => {
|
|
3649
3271
|
switch (action.type) {
|
|
3650
3272
|
case "download":
|
|
3651
|
-
return /* @__PURE__ */ (0,
|
|
3273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3652
3274
|
"div",
|
|
3653
3275
|
{
|
|
3654
3276
|
className: "td-actions--item td-actions--download",
|
|
3655
3277
|
onClick: () => {
|
|
3656
3278
|
},
|
|
3657
|
-
children: /* @__PURE__ */ (0,
|
|
3279
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icons2.Download, {})
|
|
3658
3280
|
},
|
|
3659
3281
|
index
|
|
3660
3282
|
);
|
|
3661
3283
|
case "edit":
|
|
3662
|
-
return /* @__PURE__ */ (0,
|
|
3284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3663
3285
|
"div",
|
|
3664
3286
|
{
|
|
3665
3287
|
className: "td-actions--item td-actions--edit",
|
|
3666
3288
|
onClick: () => {
|
|
3667
3289
|
},
|
|
3668
|
-
children: /* @__PURE__ */ (0,
|
|
3290
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icons2.Edit3, {})
|
|
3669
3291
|
},
|
|
3670
3292
|
index
|
|
3671
3293
|
);
|
|
3672
3294
|
case "delete":
|
|
3673
|
-
return /* @__PURE__ */ (0,
|
|
3295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3674
3296
|
"div",
|
|
3675
3297
|
{
|
|
3676
3298
|
className: "td-actions--item td-actions--delete",
|
|
3677
3299
|
onClick: () => onActionClick("delete", rowItem),
|
|
3678
|
-
children: /* @__PURE__ */ (0,
|
|
3300
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icons2.Trash2, {})
|
|
3679
3301
|
},
|
|
3680
3302
|
index
|
|
3681
3303
|
);
|
|
3682
3304
|
case "undo":
|
|
3683
|
-
return /* @__PURE__ */ (0,
|
|
3305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3684
3306
|
"div",
|
|
3685
3307
|
{
|
|
3686
3308
|
className: "td-actions--item td-actions--undo",
|
|
3687
3309
|
onClick: () => onActionClick("undo", rowItem),
|
|
3688
|
-
children: /* @__PURE__ */ (0,
|
|
3310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icons2.RotateCcw, {})
|
|
3689
3311
|
},
|
|
3690
3312
|
index
|
|
3691
3313
|
);
|
|
3692
3314
|
case "switcher":
|
|
3693
|
-
return /* @__PURE__ */ (0,
|
|
3315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "df", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3694
3316
|
Switcher_default,
|
|
3695
3317
|
{
|
|
3696
3318
|
label: action.label || null,
|
|
@@ -3705,28 +3327,28 @@ var TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
|
|
|
3705
3327
|
};
|
|
3706
3328
|
|
|
3707
3329
|
// src/Atomic/UI/Table/TdTypes/TdPriority.js
|
|
3708
|
-
var
|
|
3709
|
-
var
|
|
3330
|
+
var import_react28 = __toESM(require("react"), 1);
|
|
3331
|
+
var import_classnames29 = __toESM(require("classnames"), 1);
|
|
3710
3332
|
var import_react_feather11 = require("react-feather");
|
|
3711
|
-
var
|
|
3333
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3712
3334
|
var TdPriority = ({ onClick, rowIndex, cardLength }) => {
|
|
3713
|
-
return /* @__PURE__ */ (0,
|
|
3714
|
-
/* @__PURE__ */ (0,
|
|
3715
|
-
/* @__PURE__ */ (0,
|
|
3716
|
-
/* @__PURE__ */ (0,
|
|
3335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "cards-table__priority", children: [
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mr5", children: rowIndex + 1 }),
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "df", children: [
|
|
3338
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3717
3339
|
import_react_feather11.ArrowDown,
|
|
3718
3340
|
{
|
|
3719
3341
|
onClick: () => onClick(rowIndex),
|
|
3720
|
-
className: (0,
|
|
3342
|
+
className: (0, import_classnames29.default)("table--icon", {
|
|
3721
3343
|
disabled: rowIndex + 1 === cardLength
|
|
3722
3344
|
})
|
|
3723
3345
|
}
|
|
3724
3346
|
),
|
|
3725
|
-
/* @__PURE__ */ (0,
|
|
3347
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3726
3348
|
import_react_feather11.ArrowUp,
|
|
3727
3349
|
{
|
|
3728
3350
|
onClick: () => onClick(rowIndex, true),
|
|
3729
|
-
className: (0,
|
|
3351
|
+
className: (0, import_classnames29.default)("table--icon", { disabled: rowIndex === 0 })
|
|
3730
3352
|
}
|
|
3731
3353
|
)
|
|
3732
3354
|
] })
|
|
@@ -3735,17 +3357,17 @@ var TdPriority = ({ onClick, rowIndex, cardLength }) => {
|
|
|
3735
3357
|
var TdPriority_default = TdPriority;
|
|
3736
3358
|
|
|
3737
3359
|
// src/Atomic/UI/Table/TdTypes/TdWeight.js
|
|
3738
|
-
var
|
|
3739
|
-
var
|
|
3740
|
-
var
|
|
3360
|
+
var import_react29 = require("react");
|
|
3361
|
+
var import_classnames30 = __toESM(require("classnames"), 1);
|
|
3362
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3741
3363
|
var TdWeight = ({ value, percent, onChange, className }) => {
|
|
3742
|
-
const [state, setState] = (0,
|
|
3364
|
+
const [state, setState] = (0, import_react29.useState)(value);
|
|
3743
3365
|
const {
|
|
3744
3366
|
isToggled: isEdited,
|
|
3745
3367
|
toggleOff: unsetIsEdited,
|
|
3746
3368
|
toggleOn: setIsEdited
|
|
3747
3369
|
} = useOutsideToggle(false);
|
|
3748
|
-
(0,
|
|
3370
|
+
(0, import_react29.useEffect)(() => {
|
|
3749
3371
|
setState(value);
|
|
3750
3372
|
}, [value, isEdited]);
|
|
3751
3373
|
const handleKeyUp = ({ keyCode, target }) => {
|
|
@@ -3755,7 +3377,7 @@ var TdWeight = ({ value, percent, onChange, className }) => {
|
|
|
3755
3377
|
unsetIsEdited();
|
|
3756
3378
|
}
|
|
3757
3379
|
};
|
|
3758
|
-
return /* @__PURE__ */ (0,
|
|
3380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: isEdited ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3759
3381
|
Input,
|
|
3760
3382
|
{
|
|
3761
3383
|
value: state,
|
|
@@ -3764,9 +3386,9 @@ var TdWeight = ({ value, percent, onChange, className }) => {
|
|
|
3764
3386
|
onKeyUp: handleKeyUp,
|
|
3765
3387
|
autoFocus: true
|
|
3766
3388
|
}
|
|
3767
|
-
) : /* @__PURE__ */ (0,
|
|
3768
|
-
/* @__PURE__ */ (0,
|
|
3769
|
-
/* @__PURE__ */ (0,
|
|
3389
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: (0, import_classnames30.default)("td-weight", className), onClick: setIsEdited, children: [
|
|
3390
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: value }),
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ml2 color--grey-gull", children: [
|
|
3770
3392
|
"(",
|
|
3771
3393
|
percent,
|
|
3772
3394
|
"%)"
|
|
@@ -3776,7 +3398,7 @@ var TdWeight = ({ value, percent, onChange, className }) => {
|
|
|
3776
3398
|
var TdWeight_default = TdWeight;
|
|
3777
3399
|
|
|
3778
3400
|
// src/Atomic/UI/Table/Partials/TdCell.js
|
|
3779
|
-
var
|
|
3401
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3780
3402
|
var TdCell = ({
|
|
3781
3403
|
type,
|
|
3782
3404
|
item,
|
|
@@ -3789,22 +3411,22 @@ var TdCell = ({
|
|
|
3789
3411
|
rowItem,
|
|
3790
3412
|
isDeleted
|
|
3791
3413
|
}) => {
|
|
3792
|
-
const [isAccordionOpen, setIsAccordionOpen] = (0,
|
|
3414
|
+
const [isAccordionOpen, setIsAccordionOpen] = (0, import_react30.useState)(item.isOpen);
|
|
3793
3415
|
const percent = item.type === "weight" && getAdviceWeight(isDeleted ? 0 : item.value);
|
|
3794
3416
|
switch (type) {
|
|
3795
3417
|
case "accordion":
|
|
3796
|
-
return /* @__PURE__ */ (0,
|
|
3418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3797
3419
|
AccordionItem_default,
|
|
3798
3420
|
{
|
|
3799
3421
|
className: item.itemClassName,
|
|
3800
3422
|
item,
|
|
3801
3423
|
isOpen: isAccordionOpen,
|
|
3802
3424
|
onClick: (e) => setIsAccordionOpen(e),
|
|
3803
|
-
children: /* @__PURE__ */ (0,
|
|
3425
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Table_default, { rows: item.rows, className: "accordion--table" })
|
|
3804
3426
|
}
|
|
3805
3427
|
);
|
|
3806
3428
|
case "actions":
|
|
3807
|
-
return /* @__PURE__ */ (0,
|
|
3429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3808
3430
|
TdActions,
|
|
3809
3431
|
{
|
|
3810
3432
|
rowItem,
|
|
@@ -3814,11 +3436,11 @@ var TdCell = ({
|
|
|
3814
3436
|
}
|
|
3815
3437
|
);
|
|
3816
3438
|
case "advancedTags":
|
|
3817
|
-
return /* @__PURE__ */ (0,
|
|
3439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AdvancedTags_default, { items: item });
|
|
3818
3440
|
case "link":
|
|
3819
|
-
return /* @__PURE__ */ (0,
|
|
3441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { href: item.link, children: item.label });
|
|
3820
3442
|
case "priority":
|
|
3821
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3822
3444
|
TdPriority_default,
|
|
3823
3445
|
{
|
|
3824
3446
|
rowIndex,
|
|
@@ -3827,7 +3449,7 @@ var TdCell = ({
|
|
|
3827
3449
|
}
|
|
3828
3450
|
);
|
|
3829
3451
|
case "status":
|
|
3830
|
-
return /* @__PURE__ */ (0,
|
|
3452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3831
3453
|
Status_default,
|
|
3832
3454
|
{
|
|
3833
3455
|
className: item.className,
|
|
@@ -3836,9 +3458,9 @@ var TdCell = ({
|
|
|
3836
3458
|
}
|
|
3837
3459
|
);
|
|
3838
3460
|
case "tags":
|
|
3839
|
-
return item.map((tag, index) => /* @__PURE__ */ (0,
|
|
3461
|
+
return item.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag_default, { label: tag.label }, index));
|
|
3840
3462
|
case "weight":
|
|
3841
|
-
return /* @__PURE__ */ (0,
|
|
3463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3842
3464
|
TdWeight_default,
|
|
3843
3465
|
{
|
|
3844
3466
|
value: item.value,
|
|
@@ -3847,13 +3469,13 @@ var TdCell = ({
|
|
|
3847
3469
|
}
|
|
3848
3470
|
);
|
|
3849
3471
|
default:
|
|
3850
|
-
return /* @__PURE__ */ (0,
|
|
3472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: item.className, children: item.value });
|
|
3851
3473
|
}
|
|
3852
3474
|
};
|
|
3853
3475
|
var TdCell_default = TdCell;
|
|
3854
3476
|
|
|
3855
3477
|
// src/Atomic/UI/Table/Partials/TdRow.js
|
|
3856
|
-
var
|
|
3478
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3857
3479
|
var TdRow = ({
|
|
3858
3480
|
item,
|
|
3859
3481
|
onChange,
|
|
@@ -3870,27 +3492,27 @@ var TdRow = ({
|
|
|
3870
3492
|
isDeleted,
|
|
3871
3493
|
testId = "td-row"
|
|
3872
3494
|
}) => {
|
|
3873
|
-
const [isOpen, setIsOpen] = (0,
|
|
3495
|
+
const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
|
|
3874
3496
|
const handleChange = handleObjectChange(item, () => onChange({ ...item }));
|
|
3875
|
-
return /* @__PURE__ */ (0,
|
|
3876
|
-
/* @__PURE__ */ (0,
|
|
3877
|
-
type && rowSpan && /* @__PURE__ */ (0,
|
|
3497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { "data-testid": testId, children: [
|
|
3499
|
+
type && rowSpan && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: "rel", rowSpan: rowSpan + 1, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3878
3500
|
"span",
|
|
3879
3501
|
{
|
|
3880
|
-
className: (0,
|
|
3502
|
+
className: (0, import_classnames31.default)(
|
|
3881
3503
|
type && `cards-table__score cards-table__score-${cardStatus}`
|
|
3882
3504
|
),
|
|
3883
|
-
children: /* @__PURE__ */ (0,
|
|
3505
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TdRange_default, { item: range })
|
|
3884
3506
|
}
|
|
3885
3507
|
) }),
|
|
3886
3508
|
Object.entries(item).map(
|
|
3887
|
-
([key, value]) => key === "id" || key === "isDeleted" ? null : /* @__PURE__ */ (0,
|
|
3509
|
+
([key, value]) => key === "id" || key === "isDeleted" ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3888
3510
|
"td",
|
|
3889
3511
|
{
|
|
3890
|
-
className: (0,
|
|
3512
|
+
className: (0, import_classnames31.default)("cards-table__body-item", {
|
|
3891
3513
|
"cards-table__accordion": value.type === "accordion"
|
|
3892
3514
|
}),
|
|
3893
|
-
children: /* @__PURE__ */ (0,
|
|
3515
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3894
3516
|
TdCell_default,
|
|
3895
3517
|
{
|
|
3896
3518
|
onActionClick,
|
|
@@ -3910,10 +3532,10 @@ var TdRow = ({
|
|
|
3910
3532
|
)
|
|
3911
3533
|
)
|
|
3912
3534
|
] }),
|
|
3913
|
-
type && colSpan ? /* @__PURE__ */ (0,
|
|
3914
|
-
/* @__PURE__ */ (0,
|
|
3915
|
-
/* @__PURE__ */ (0,
|
|
3916
|
-
/* @__PURE__ */ (0,
|
|
3535
|
+
type && colSpan ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { children: [
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", {}),
|
|
3537
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("td", { colSpan, children: [
|
|
3538
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3917
3539
|
"span",
|
|
3918
3540
|
{
|
|
3919
3541
|
className: "cards-table__title-select-lender-btn",
|
|
@@ -3921,7 +3543,7 @@ var TdRow = ({
|
|
|
3921
3543
|
children: "Select Lender"
|
|
3922
3544
|
}
|
|
3923
3545
|
),
|
|
3924
|
-
/* @__PURE__ */ (0,
|
|
3546
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3925
3547
|
Modal_default,
|
|
3926
3548
|
{
|
|
3927
3549
|
closeModal: () => setIsOpen(false),
|
|
@@ -3938,7 +3560,7 @@ var TdRow = ({
|
|
|
3938
3560
|
var TdRow_default = TdRow;
|
|
3939
3561
|
|
|
3940
3562
|
// src/Atomic/UI/Table/Table.js
|
|
3941
|
-
var
|
|
3563
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3942
3564
|
var Table = ({
|
|
3943
3565
|
rows,
|
|
3944
3566
|
onChange,
|
|
@@ -3951,16 +3573,16 @@ var Table = ({
|
|
|
3951
3573
|
rows[index] = value;
|
|
3952
3574
|
onChange({ header: [...header], rows: [...rows] });
|
|
3953
3575
|
};
|
|
3954
|
-
return /* @__PURE__ */ (0,
|
|
3576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3955
3577
|
"div",
|
|
3956
3578
|
{
|
|
3957
3579
|
"data-testid": testId,
|
|
3958
|
-
className: (0,
|
|
3580
|
+
className: (0, import_classnames32.default)("simple-table", {
|
|
3959
3581
|
[`simple-table--${className}`]: className
|
|
3960
3582
|
}),
|
|
3961
|
-
children: /* @__PURE__ */ (0,
|
|
3962
|
-
/* @__PURE__ */ (0,
|
|
3963
|
-
/* @__PURE__ */ (0,
|
|
3583
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { children: [
|
|
3584
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { children: header?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TdHeader_default, { item }, item.key)) }) }),
|
|
3585
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { children: rows && rows?.length ? rows?.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3964
3586
|
TdRow_default,
|
|
3965
3587
|
{
|
|
3966
3588
|
onActionClick,
|
|
@@ -3970,7 +3592,7 @@ var Table = ({
|
|
|
3970
3592
|
onChange: (value) => handleArrayChange(value, index)
|
|
3971
3593
|
},
|
|
3972
3594
|
typeof row.id === "object" ? row.id.value : row.id
|
|
3973
|
-
)) : /* @__PURE__ */ (0,
|
|
3595
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "row--not-found", colSpan: header?.length, children: "Not set" }) }) })
|
|
3974
3596
|
] })
|
|
3975
3597
|
}
|
|
3976
3598
|
);
|
|
@@ -3981,10 +3603,10 @@ var Table_default = Table;
|
|
|
3981
3603
|
var Tag_default2 = Tag_default;
|
|
3982
3604
|
|
|
3983
3605
|
// src/Atomic/UI/TagList/TagList.tsx
|
|
3984
|
-
var
|
|
3985
|
-
var
|
|
3606
|
+
var import_classnames33 = __toESM(require("classnames"), 1);
|
|
3607
|
+
var import_react33 = require("react");
|
|
3986
3608
|
var import_react_feather12 = require("react-feather");
|
|
3987
|
-
var
|
|
3609
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3988
3610
|
var TagList = ({
|
|
3989
3611
|
disabled,
|
|
3990
3612
|
className,
|
|
@@ -4001,11 +3623,11 @@ var TagList = ({
|
|
|
4001
3623
|
onToggleRenderAll,
|
|
4002
3624
|
isUseInTable
|
|
4003
3625
|
}) => {
|
|
4004
|
-
const wrapperRef = (0,
|
|
4005
|
-
const [tagList, setTagList] = (0,
|
|
4006
|
-
const [staticTagsCount, setStaticTagsCount] = (0,
|
|
4007
|
-
const [renderItemsCount, setRenderItemsCount] = (0,
|
|
4008
|
-
const [renderAll, setRenderAll] = (0,
|
|
3626
|
+
const wrapperRef = (0, import_react33.useRef)(null);
|
|
3627
|
+
const [tagList, setTagList] = (0, import_react33.useState)([]);
|
|
3628
|
+
const [staticTagsCount, setStaticTagsCount] = (0, import_react33.useState)(-1);
|
|
3629
|
+
const [renderItemsCount, setRenderItemsCount] = (0, import_react33.useState)(-1);
|
|
3630
|
+
const [renderAll, setRenderAll] = (0, import_react33.useState)(!withToggle);
|
|
4009
3631
|
const wrapperWidth = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
|
|
4010
3632
|
const setRenderAllInterceptor = (v, event) => {
|
|
4011
3633
|
setRenderAll(v);
|
|
@@ -4056,12 +3678,12 @@ var TagList = ({
|
|
|
4056
3678
|
});
|
|
4057
3679
|
if (!item) return null;
|
|
4058
3680
|
const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
|
|
4059
|
-
return /* @__PURE__ */ (0,
|
|
3681
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4060
3682
|
"div",
|
|
4061
3683
|
{
|
|
4062
3684
|
className: `tag-list_wrapper_item ${isHidden ? "tag-list_wrapper_item--hidden" : ""}`,
|
|
4063
3685
|
ref: checkedRef(item?.itemRef),
|
|
4064
|
-
children: /* @__PURE__ */ (0,
|
|
3686
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4065
3687
|
Tag_default,
|
|
4066
3688
|
{
|
|
4067
3689
|
testId: `test-taglist-item-${item?.id ?? item?.value}`,
|
|
@@ -4082,7 +3704,7 @@ var TagList = ({
|
|
|
4082
3704
|
}
|
|
4083
3705
|
const restItems = tagList.length - renderItemsCount;
|
|
4084
3706
|
if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
|
|
4085
|
-
return /* @__PURE__ */ (0,
|
|
3707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4086
3708
|
Tag_default,
|
|
4087
3709
|
{
|
|
4088
3710
|
label: `+${restItems}`,
|
|
@@ -4097,7 +3719,7 @@ var TagList = ({
|
|
|
4097
3719
|
if (renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length) {
|
|
4098
3720
|
return null;
|
|
4099
3721
|
}
|
|
4100
|
-
return /* @__PURE__ */ (0,
|
|
3722
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4101
3723
|
Tag_default,
|
|
4102
3724
|
{
|
|
4103
3725
|
label: "...",
|
|
@@ -4107,14 +3729,14 @@ var TagList = ({
|
|
|
4107
3729
|
}
|
|
4108
3730
|
);
|
|
4109
3731
|
};
|
|
4110
|
-
(0,
|
|
3732
|
+
(0, import_react33.useEffect)(() => {
|
|
4111
3733
|
setStaticTagsCount(-1);
|
|
4112
3734
|
setRenderItemsCount(-1);
|
|
4113
3735
|
setRenderAllInterceptor(false, null);
|
|
4114
|
-
const itemsWithRef = items.map((item) => ({ ...item, itemRef: (0,
|
|
3736
|
+
const itemsWithRef = items.map((item) => ({ ...item, itemRef: (0, import_react33.createRef)() }));
|
|
4115
3737
|
setTagList(itemsWithRef);
|
|
4116
3738
|
}, [items]);
|
|
4117
|
-
(0,
|
|
3739
|
+
(0, import_react33.useLayoutEffect)(() => {
|
|
4118
3740
|
if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
|
|
4119
3741
|
let computedWidth = wrapperWidth;
|
|
4120
3742
|
if (computedWidth === 0) {
|
|
@@ -4127,20 +3749,20 @@ var TagList = ({
|
|
|
4127
3749
|
}
|
|
4128
3750
|
}
|
|
4129
3751
|
}, [tagList, wrapperWidth, wrapperRef?.current]);
|
|
4130
|
-
(0,
|
|
3752
|
+
(0, import_react33.useLayoutEffect)(() => {
|
|
4131
3753
|
setRenderItemsCount(staticTagsCount);
|
|
4132
3754
|
}, [staticTagsCount]);
|
|
4133
|
-
(0,
|
|
3755
|
+
(0, import_react33.useEffect)(() => {
|
|
4134
3756
|
setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
|
|
4135
3757
|
}, [renderAll]);
|
|
4136
|
-
(0,
|
|
3758
|
+
(0, import_react33.useEffect)(() => {
|
|
4137
3759
|
if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
|
|
4138
3760
|
}, [wrapperRef?.current]);
|
|
4139
|
-
return /* @__PURE__ */ (0,
|
|
3761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
4140
3762
|
"div",
|
|
4141
3763
|
{
|
|
4142
3764
|
"data-testid": testId,
|
|
4143
|
-
className: (0,
|
|
3765
|
+
className: (0, import_classnames33.default)(
|
|
4144
3766
|
"tag-list_wrapper",
|
|
4145
3767
|
`${renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`,
|
|
4146
3768
|
className,
|
|
@@ -4155,7 +3777,7 @@ var TagList = ({
|
|
|
4155
3777
|
renderTags(),
|
|
4156
3778
|
renderMoreTags(),
|
|
4157
3779
|
renderHideTags(),
|
|
4158
|
-
typeof onEditClick === "function" && /* @__PURE__ */ (0,
|
|
3780
|
+
typeof onEditClick === "function" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tag-list__edit-trigger", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_feather12.Edit3, { onClick: onEditClick }) })
|
|
4159
3781
|
]
|
|
4160
3782
|
}
|
|
4161
3783
|
);
|
|
@@ -4163,12 +3785,12 @@ var TagList = ({
|
|
|
4163
3785
|
var TagList_default = TagList;
|
|
4164
3786
|
|
|
4165
3787
|
// src/Atomic/UI/UserBox/UserBox.tsx
|
|
4166
|
-
var
|
|
3788
|
+
var import_classnames35 = __toESM(require("classnames"), 1);
|
|
4167
3789
|
|
|
4168
3790
|
// src/Atomic/FormElements/Label/Label.tsx
|
|
4169
|
-
var
|
|
4170
|
-
var
|
|
4171
|
-
var
|
|
3791
|
+
var import_classnames34 = __toESM(require("classnames"), 1);
|
|
3792
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3793
|
+
var CN6 = "label";
|
|
4172
3794
|
var Label = ({
|
|
4173
3795
|
className = "",
|
|
4174
3796
|
label = "",
|
|
@@ -4180,15 +3802,15 @@ var Label = ({
|
|
|
4180
3802
|
error = null,
|
|
4181
3803
|
isAccessability = false,
|
|
4182
3804
|
isAccessabilityHint = false,
|
|
4183
|
-
testId =
|
|
3805
|
+
testId = CN6
|
|
4184
3806
|
}) => {
|
|
4185
|
-
const correctLabel = isRequired ? /* @__PURE__ */ (0,
|
|
3807
|
+
const correctLabel = isRequired ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
4186
3808
|
label,
|
|
4187
3809
|
" ",
|
|
4188
|
-
/* @__PURE__ */ (0,
|
|
3810
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "label_asterisk", children: "*" }),
|
|
4189
3811
|
" ",
|
|
4190
|
-
note && /* @__PURE__ */ (0,
|
|
4191
|
-
hint && /* @__PURE__ */ (0,
|
|
3812
|
+
note && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "label_note", children: note }),
|
|
3813
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4192
3814
|
Hint_default,
|
|
4193
3815
|
{
|
|
4194
3816
|
id: `hint-${label}`,
|
|
@@ -4204,11 +3826,11 @@ var Label = ({
|
|
|
4204
3826
|
},
|
|
4205
3827
|
`hint-${label}`
|
|
4206
3828
|
)
|
|
4207
|
-
] }) : /* @__PURE__ */ (0,
|
|
3829
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
4208
3830
|
label,
|
|
4209
3831
|
" ",
|
|
4210
|
-
note && /* @__PURE__ */ (0,
|
|
4211
|
-
hint && /* @__PURE__ */ (0,
|
|
3832
|
+
note && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "label_note", children: note }),
|
|
3833
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4212
3834
|
Hint_default,
|
|
4213
3835
|
{
|
|
4214
3836
|
isAccessability: isAccessabilityHint,
|
|
@@ -4225,21 +3847,21 @@ var Label = ({
|
|
|
4225
3847
|
void 0
|
|
4226
3848
|
)
|
|
4227
3849
|
] });
|
|
4228
|
-
return /* @__PURE__ */ (0,
|
|
3850
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4229
3851
|
"span",
|
|
4230
3852
|
{
|
|
4231
3853
|
tabIndex: isAccessability ? 0 : -1,
|
|
4232
3854
|
"aria-label": label,
|
|
4233
|
-
className: (0,
|
|
3855
|
+
className: (0, import_classnames34.default)(CN6, { label_bold: isLabelBolt, error, isRequired }, className),
|
|
4234
3856
|
"data-testid": testId,
|
|
4235
|
-
children: /* @__PURE__ */ (0,
|
|
3857
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "label_text", "data-testid": "label-text", children: correctLabel })
|
|
4236
3858
|
}
|
|
4237
3859
|
);
|
|
4238
3860
|
};
|
|
4239
3861
|
var Label_default = Label;
|
|
4240
3862
|
|
|
4241
3863
|
// src/Atomic/UI/UserBox/UserBox.tsx
|
|
4242
|
-
var
|
|
3864
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
4243
3865
|
var UserBox = ({
|
|
4244
3866
|
name = "Username",
|
|
4245
3867
|
role,
|
|
@@ -4253,28 +3875,28 @@ var UserBox = ({
|
|
|
4253
3875
|
const getNameFirstLetter = name.charAt(0).toUpperCase();
|
|
4254
3876
|
const renderUser = () => {
|
|
4255
3877
|
if (isModal) {
|
|
4256
|
-
return /* @__PURE__ */ (0,
|
|
4257
|
-
/* @__PURE__ */ (0,
|
|
4258
|
-
/* @__PURE__ */ (0,
|
|
4259
|
-
/* @__PURE__ */ (0,
|
|
4260
|
-
role && /* @__PURE__ */ (0,
|
|
3878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
3879
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { backgroundColor: getColorById(id, colors) }, className: "td-user-box__avatar", children: getNameFirstLetter }),
|
|
3880
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "td-user-box__user-data", children: [
|
|
3881
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button_default, { className: "p0 no-shadow", onClick, label: name, variant: "link" }),
|
|
3882
|
+
role && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: role })
|
|
4261
3883
|
] })
|
|
4262
3884
|
] });
|
|
4263
3885
|
} else {
|
|
4264
|
-
return /* @__PURE__ */ (0,
|
|
4265
|
-
/* @__PURE__ */ (0,
|
|
4266
|
-
/* @__PURE__ */ (0,
|
|
4267
|
-
/* @__PURE__ */ (0,
|
|
4268
|
-
role && /* @__PURE__ */ (0,
|
|
3886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { backgroundColor: getColorById(id) }, className: "td-user-box__avatar", children: getNameFirstLetter }),
|
|
3888
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "td-user-box__user-data", children: [
|
|
3889
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label_default, { label: name }),
|
|
3890
|
+
role && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-label": `User role: ${role}`, children: role })
|
|
4269
3891
|
] })
|
|
4270
3892
|
] });
|
|
4271
3893
|
}
|
|
4272
3894
|
};
|
|
4273
|
-
return /* @__PURE__ */ (0,
|
|
3895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
4274
3896
|
"div",
|
|
4275
3897
|
{
|
|
4276
3898
|
"data-testid": testId,
|
|
4277
|
-
className: (0,
|
|
3899
|
+
className: (0, import_classnames35.default)("td-user-box", className),
|
|
4278
3900
|
role: "region",
|
|
4279
3901
|
"aria-label": `User box for ${name}`,
|
|
4280
3902
|
children: renderUser()
|
|
@@ -4287,41 +3909,41 @@ var UserBox_default = UserBox;
|
|
|
4287
3909
|
var UserBox_default2 = UserBox_default;
|
|
4288
3910
|
|
|
4289
3911
|
// src/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.tsx
|
|
4290
|
-
var
|
|
3912
|
+
var import_classnames38 = __toESM(require("classnames"), 1);
|
|
4291
3913
|
|
|
4292
3914
|
// src/Atomic/UI/WizardStepper/ui/icons.tsx
|
|
4293
|
-
var
|
|
4294
|
-
var DoneIcon = () => /* @__PURE__ */ (0,
|
|
4295
|
-
/* @__PURE__ */ (0,
|
|
4296
|
-
/* @__PURE__ */ (0,
|
|
4297
|
-
/* @__PURE__ */ (0,
|
|
3915
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3916
|
+
var DoneIcon = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3917
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { width: "20", height: "20", rx: "10", fill: "#69A457" }),
|
|
3918
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("mask", { id: "mask0_54394_4001", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "2", y: "2", width: "16", height: "16", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M14.5 7L9 12.5L6 9.5", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
3919
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { mask: "url(#mask0_54394_4001)", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "2", y: "2", width: "16", height: "16", fill: "white" }) })
|
|
4298
3920
|
] });
|
|
4299
3921
|
var TodoIcon = () => {
|
|
4300
|
-
return /* @__PURE__ */ (0,
|
|
4301
|
-
/* @__PURE__ */ (0,
|
|
4302
|
-
/* @__PURE__ */ (0,
|
|
3922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3923
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { clipPath: "url(#clip0_54394_4448)", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "10", cy: "10", r: "7", fill: "white", stroke: "#B3B8CB", strokeWidth: "2" }) }),
|
|
3924
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("clipPath", { id: "clip0_54394_4448", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { width: "16", height: "16", fill: "white", transform: "translate(2 2)" }) }) })
|
|
4303
3925
|
] });
|
|
4304
3926
|
};
|
|
4305
3927
|
var ActiveIcon = () => {
|
|
4306
|
-
return /* @__PURE__ */ (0,
|
|
4307
|
-
/* @__PURE__ */ (0,
|
|
3928
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3929
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { width: "20", height: "20", rx: "10", fill: "#E8F9E5" }),
|
|
4308
3930
|
"ii",
|
|
4309
|
-
/* @__PURE__ */ (0,
|
|
4310
|
-
/* @__PURE__ */ (0,
|
|
3931
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("mask", { id: "mask0_54394_1459", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "2", y: "2", width: "16", height: "16", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "10", cy: "10", r: "4", fill: "#171D33" }) }),
|
|
3932
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { mask: "url(#mask0_54394_1459)", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "2", y: "2", width: "16", height: "16", fill: "#171D33" }) })
|
|
4311
3933
|
] });
|
|
4312
3934
|
};
|
|
4313
3935
|
var alternativeIconSet = {
|
|
4314
|
-
defaultIcon: /* @__PURE__ */ (0,
|
|
4315
|
-
doneIcon: /* @__PURE__ */ (0,
|
|
4316
|
-
activeIcon: /* @__PURE__ */ (0,
|
|
3936
|
+
defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TodoIcon, {}),
|
|
3937
|
+
doneIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DoneIcon, {}),
|
|
3938
|
+
activeIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ActiveIcon, {})
|
|
4317
3939
|
};
|
|
4318
3940
|
|
|
4319
3941
|
// src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx
|
|
4320
|
-
var
|
|
3942
|
+
var import_classnames37 = __toESM(require("classnames"), 1);
|
|
4321
3943
|
|
|
4322
3944
|
// src/Atomic/UI/WizardStepper/constructor.js
|
|
4323
|
-
var
|
|
4324
|
-
var
|
|
3945
|
+
var import_react34 = __toESM(require("react"), 1);
|
|
3946
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
4325
3947
|
var WIZARD_STEP_VARIANTS = Object.freeze({
|
|
4326
3948
|
DEFAULT: "default",
|
|
4327
3949
|
DONE: "done",
|
|
@@ -4329,31 +3951,31 @@ var WIZARD_STEP_VARIANTS = Object.freeze({
|
|
|
4329
3951
|
});
|
|
4330
3952
|
|
|
4331
3953
|
// src/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.tsx
|
|
4332
|
-
var
|
|
4333
|
-
var
|
|
3954
|
+
var import_classnames36 = __toESM(require("classnames"), 1);
|
|
3955
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
4334
3956
|
var DefaultPoint = () => {
|
|
4335
|
-
return /* @__PURE__ */ (0,
|
|
3957
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "8", cy: "8", r: "4" }) });
|
|
4336
3958
|
};
|
|
4337
3959
|
var DonePoint = () => {
|
|
4338
|
-
return /* @__PURE__ */ (0,
|
|
3960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M12.5 5L7 10.5L4 7.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4339
3961
|
};
|
|
4340
3962
|
var RC7 = "state-icon";
|
|
4341
3963
|
var { ACTIVE, DEFAULT, DONE } = WIZARD_STEP_VARIANTS;
|
|
4342
3964
|
var StateIcon = ({ variant = DEFAULT, className }) => {
|
|
4343
3965
|
const computedState = variant === ACTIVE || variant === DONE ? variant : DEFAULT;
|
|
4344
3966
|
const Inner = {
|
|
4345
|
-
[DEFAULT]: /* @__PURE__ */ (0,
|
|
4346
|
-
[ACTIVE]: /* @__PURE__ */ (0,
|
|
4347
|
-
[DONE]: /* @__PURE__ */ (0,
|
|
3967
|
+
[DEFAULT]: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DefaultPoint, {}),
|
|
3968
|
+
[ACTIVE]: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DefaultPoint, {}),
|
|
3969
|
+
[DONE]: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DonePoint, {})
|
|
4348
3970
|
};
|
|
4349
|
-
return /* @__PURE__ */ (0,
|
|
3971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_classnames36.default)(RC7, `${RC7}--${computedState}`, className), children: Inner[computedState] });
|
|
4350
3972
|
};
|
|
4351
3973
|
|
|
4352
3974
|
// src/Atomic/UI/WizardStepper/ui/StateIcon/index.ts
|
|
4353
3975
|
var StateIcon_default = StateIcon;
|
|
4354
3976
|
|
|
4355
3977
|
// src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx
|
|
4356
|
-
var
|
|
3978
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
4357
3979
|
var RC8 = "step-row";
|
|
4358
3980
|
var { DEFAULT: DEFAULT2, ACTIVE: ACTIVE2, DONE: DONE2 } = WIZARD_STEP_VARIANTS;
|
|
4359
3981
|
var StepRow = ({
|
|
@@ -4380,29 +4002,29 @@ var StepRow = ({
|
|
|
4380
4002
|
})();
|
|
4381
4003
|
const CorrectIcon = () => {
|
|
4382
4004
|
if (!customIcons || Object?.values(customIcons)?.every((icon) => !icon)) {
|
|
4383
|
-
return /* @__PURE__ */ (0,
|
|
4005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StateIcon_default, { variant: rowVariant });
|
|
4384
4006
|
}
|
|
4385
4007
|
return alternaviteIconFromProps || null;
|
|
4386
4008
|
};
|
|
4387
|
-
return /* @__PURE__ */ (0,
|
|
4388
|
-
/* @__PURE__ */ (0,
|
|
4389
|
-
/* @__PURE__ */ (0,
|
|
4390
|
-
/* @__PURE__ */ (0,
|
|
4391
|
-
/* @__PURE__ */ (0,
|
|
4392
|
-
/* @__PURE__ */ (0,
|
|
4393
|
-
isOptional && /* @__PURE__ */ (0,
|
|
4009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_classnames37.default)(RC8, `${RC8}--${rowVariant}`, className), children: [
|
|
4010
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: (0, import_classnames37.default)(`${RC8}__state-point`, `${RC8}__state-point--${rowVariant}`), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CorrectIcon, {}) }),
|
|
4011
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `${RC8}__content`, children: [
|
|
4012
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `${RC8}__title`, children: [
|
|
4013
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `${RC8}__title-left`, children: [
|
|
4014
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: (0, import_classnames37.default)(`${RC8}__title-text`, { "text-muted": rowVariant === DEFAULT2 }), children: title }),
|
|
4015
|
+
isOptional && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Status_default, { label: "Optional", status: "draft" })
|
|
4394
4016
|
] }),
|
|
4395
|
-
titleSlot && /* @__PURE__ */ (0,
|
|
4017
|
+
titleSlot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${RC8}__title-right`, children: titleSlot })
|
|
4396
4018
|
] }),
|
|
4397
|
-
description && /* @__PURE__ */ (0,
|
|
4398
|
-
contentSlot && /* @__PURE__ */ (0,
|
|
4019
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${RC8}__description`, children: description }),
|
|
4020
|
+
contentSlot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${RC8}__body`, children: contentSlot })
|
|
4399
4021
|
] })
|
|
4400
4022
|
] }, label);
|
|
4401
4023
|
};
|
|
4402
4024
|
var StepRow_default = StepRow;
|
|
4403
4025
|
|
|
4404
4026
|
// src/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.tsx
|
|
4405
|
-
var
|
|
4027
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
4406
4028
|
var StepWrapper = ({
|
|
4407
4029
|
steps,
|
|
4408
4030
|
customIcons,
|
|
@@ -4410,10 +4032,10 @@ var StepWrapper = ({
|
|
|
4410
4032
|
className,
|
|
4411
4033
|
testId = "step-wrapper"
|
|
4412
4034
|
}) => {
|
|
4413
|
-
if (!steps?.length) return /* @__PURE__ */ (0,
|
|
4035
|
+
if (!steps?.length) return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { "data-testid": "empty-state", children: "No steps available" });
|
|
4414
4036
|
const renderStepRow = (step) => {
|
|
4415
4037
|
const { key, ...stepProps } = step;
|
|
4416
|
-
return /* @__PURE__ */ (0,
|
|
4038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4417
4039
|
StepRow_default,
|
|
4418
4040
|
{
|
|
4419
4041
|
...stepProps,
|
|
@@ -4424,28 +4046,28 @@ var StepWrapper = ({
|
|
|
4424
4046
|
};
|
|
4425
4047
|
switch (variant) {
|
|
4426
4048
|
case "ghost":
|
|
4427
|
-
return /* @__PURE__ */ (0,
|
|
4049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4428
4050
|
Box_default,
|
|
4429
4051
|
{
|
|
4430
|
-
className: (0,
|
|
4052
|
+
className: (0, import_classnames38.default)("step-wrapper", "step-wrapper-ghost", className),
|
|
4431
4053
|
"data-testid": testId,
|
|
4432
4054
|
children: steps?.map(renderStepRow)
|
|
4433
4055
|
}
|
|
4434
4056
|
);
|
|
4435
4057
|
case "cardActive":
|
|
4436
|
-
return /* @__PURE__ */ (0,
|
|
4058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4437
4059
|
"div",
|
|
4438
4060
|
{
|
|
4439
|
-
className: (0,
|
|
4061
|
+
className: (0, import_classnames38.default)("step-wrapper", "step-wrapper-card-active", className),
|
|
4440
4062
|
"data-testid": testId,
|
|
4441
4063
|
children: steps?.map(renderStepRow)
|
|
4442
4064
|
}
|
|
4443
4065
|
);
|
|
4444
4066
|
default:
|
|
4445
|
-
return /* @__PURE__ */ (0,
|
|
4067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4446
4068
|
"div",
|
|
4447
4069
|
{
|
|
4448
|
-
className: (0,
|
|
4070
|
+
className: (0, import_classnames38.default)("step-wrapper", className),
|
|
4449
4071
|
"data-testid": testId,
|
|
4450
4072
|
children: steps?.map(renderStepRow)
|
|
4451
4073
|
}
|