master-components-react-ts 2.1.3 → 2.1.6
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/assets/Icons/IconArrowUp.js +2 -2
- package/dist/assets/Icons/IconCalendar.js +6 -6
- package/dist/assets/Icons/IconCheck.js +2 -2
- package/dist/assets/Icons/IconCheckCircle.js +2 -2
- package/dist/assets/Icons/IconCheckmark.js +2 -2
- package/dist/assets/Icons/IconCircularLoading.js +5 -5
- package/dist/assets/Icons/IconClose.js +3 -3
- package/dist/assets/Icons/IconCloseBackground.js +2 -2
- package/dist/assets/Icons/IconCloseCircle.js +2 -2
- package/dist/assets/Icons/IconErrorDash.js +2 -2
- package/dist/assets/Icons/IconExclamation.js +2 -2
- package/dist/assets/Icons/IconLeft.js +2 -2
- package/dist/assets/Icons/IconLoading.js +4 -4
- package/dist/assets/Icons/IconMinus.js +2 -2
- package/dist/assets/Icons/IconRadioChecked.js +6 -6
- package/dist/assets/Icons/IconRadioCheckedDisabled.js +6 -6
- package/dist/assets/Icons/IconRadioUnchecked.js +4 -4
- package/dist/assets/Icons/IconRadioUncheckedDisabled.js +4 -4
- package/dist/assets/Icons/IconRight.js +2 -2
- package/dist/assets/Icons/IconSave.js +2 -2
- package/dist/assets/Icons/IconSearch.js +4 -4
- package/dist/assets/Icons/IconSuccess.js +2 -2
- package/dist/assets/Icons/IconTrash.js +2 -2
- package/dist/assets/style-CXs6Ghy1.css +2249 -0
- package/dist/components/ActionDropdown/ActionDropdown.js +6 -6
- package/dist/components/Checkbox/Checkbox.js +4 -4
- package/dist/components/DatePicker/Calendar.js +50 -50
- package/dist/components/DatePicker/DatePicker.js +6 -6
- package/dist/components/Dropdown/Dropdown.js +29 -29
- package/dist/components/FormInput/FormInput.js +13 -13
- package/dist/components/InlineLoading/InlineLoading.js +11 -11
- package/dist/components/MainButton/MainButton.js +6 -6
- package/dist/components/NotificationToast/NotificationContext.js +3 -3
- package/dist/components/NotificationToast/NotificationToast.js +12 -12
- package/dist/components/Popup/Popup.js +12 -12
- package/dist/components/Radio/Radio.js +7 -7
- package/dist/components/Skeleton/Skeleton.js +2 -2
- package/dist/components/Textarea/Textarea.js +9 -9
- package/dist/components/TimePicker/TimePicker.js +18 -18
- package/dist/components/Toggle/Toggle.js +3 -3
- package/dist/components/Tooltip/Tooltip.js +6 -6
- package/package.json +6 -3
- package/dist/_virtual/jsx-runtime.js +0 -4
- package/dist/_virtual/react-jsx-runtime.production.js +0 -4
- package/dist/assets/components/ActionDropdown/ActionDropdown.module-CJpBa8kB.css +0 -85
- package/dist/assets/components/Checkbox/Checkbox.module-_XqqEodq.css +0 -82
- package/dist/assets/components/DatePicker/Calendar.module-D3fcZWFD.css +0 -316
- package/dist/assets/components/DatePicker/Datepicker.module-BxWRyQpP.css +0 -39
- package/dist/assets/components/Dropdown/Dropdown.module-DgjqziBo.css +0 -242
- package/dist/assets/components/FormInput/FormInput.module-DvfUbgbC.css +0 -240
- package/dist/assets/components/InlineLoading/InlineLoading.module-iVTVTMU0.css +0 -40
- package/dist/assets/components/MainButton/MainButton.module-8Us8t8Lb.css +0 -306
- package/dist/assets/components/NotificationToast/NotificationToast.module-mSanXElM.css +0 -179
- package/dist/assets/components/Popup/Popup.module-C1XFPW6u.css +0 -152
- package/dist/assets/components/Radio/Radio.module-BvqKw6WX.css +0 -21
- package/dist/assets/components/Skeleton/Skeleton.module-BxbVrXDg.css +0 -57
- package/dist/assets/components/Textarea/Textarea.module-BxaBUjlU.css +0 -167
- package/dist/assets/components/TimePicker/TimePicker.module-DfRiUaeb.css +0 -150
- package/dist/assets/components/Toggle/Toggle.module-DBfTR8Br.css +0 -75
- package/dist/assets/components/Tooltip/Tooltip.module-DEYqvQtd.css +0 -113
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.js +0 -35
- package/dist/node_modules/react/jsx-runtime.js +0 -10
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import style from "./ActionDropdown.module.scss.js";
|
|
3
3
|
import { IconArrowUp } from "../../assets/Icons/IconArrowUp.js";
|
|
4
4
|
import { useState, useRef, useEffect } from "react";
|
|
@@ -50,12 +50,12 @@ const ActionDropdown = ({ title, data, onSelect }) => {
|
|
|
50
50
|
document.removeEventListener("wheel", ScrollHandler);
|
|
51
51
|
};
|
|
52
52
|
}, []);
|
|
53
|
-
return /* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
-
/* @__PURE__ */
|
|
53
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style.actionDropdownContainer} ${Collapsed ? style.collapsed : ""}`, children: [
|
|
54
|
+
/* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
|
|
55
|
+
/* @__PURE__ */ jsx("p", { title, className: style.actionDropdownTitle, children: Selected?.label || title }),
|
|
56
|
+
/* @__PURE__ */ jsx("div", { className: style.actionDropdownIcon, children: /* @__PURE__ */ jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
|
|
57
57
|
] }),
|
|
58
|
-
Collapsed && /* @__PURE__ */
|
|
58
|
+
Collapsed && /* @__PURE__ */ jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsx(
|
|
59
59
|
"li",
|
|
60
60
|
{
|
|
61
61
|
onClick: (e) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState } from "react";
|
|
3
3
|
import style from "./Checkbox.module.scss.js";
|
|
4
4
|
import { useNamespace } from "../../context/NamespaceContext.js";
|
|
@@ -33,7 +33,7 @@ const Checkbox = ({
|
|
|
33
33
|
}
|
|
34
34
|
return checkBoxStyle ?? {};
|
|
35
35
|
};
|
|
36
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ jsxs(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
style: getStyle(),
|
|
@@ -43,8 +43,8 @@ const Checkbox = ({
|
|
|
43
43
|
onMouseLeave: () => setIsActive(false),
|
|
44
44
|
onClick: onChange,
|
|
45
45
|
children: [
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
checked ? multipleChecked ? /* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ jsx("input", { ref: CheckboxRef, type: "checkbox", disabled, checked: checked ?? false, hidden: true, readOnly: true, required: required ?? false }),
|
|
47
|
+
checked ? multipleChecked ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheckmark, {}) : ""
|
|
48
48
|
]
|
|
49
49
|
}
|
|
50
50
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
3
|
import dayjs from "dayjs";
|
|
4
4
|
import style from "./Calendar.module.scss.js";
|
|
@@ -288,63 +288,63 @@ const Calendar = ({
|
|
|
288
288
|
defaultValue.state = false;
|
|
289
289
|
}
|
|
290
290
|
}, []);
|
|
291
|
-
return /* @__PURE__ */
|
|
291
|
+
return /* @__PURE__ */ jsx(
|
|
292
292
|
"div",
|
|
293
293
|
{
|
|
294
294
|
ref: CalendarRef,
|
|
295
295
|
className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datePicker} ${IsFocused ? style.focused : ""} ${pickerType === "dual" ? quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? style.dualCalendarWithQuick : style.dualCalendar : ""} `,
|
|
296
296
|
onClick: (e) => e.stopPropagation(),
|
|
297
297
|
style: pickerType === "dual" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? { width: "848px" } : {},
|
|
298
|
-
children: /* @__PURE__ */
|
|
299
|
-
pickerType === "dual" ? /* @__PURE__ */
|
|
300
|
-
/* @__PURE__ */
|
|
301
|
-
/* @__PURE__ */
|
|
302
|
-
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */
|
|
303
|
-
/* @__PURE__ */
|
|
304
|
-
/* @__PURE__ */
|
|
305
|
-
] }) : /* @__PURE__ */
|
|
306
|
-
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */
|
|
298
|
+
children: /* @__PURE__ */ jsxs("div", { className: style.div, children: [
|
|
299
|
+
pickerType === "dual" ? /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", justifyContent: "space-between" }, children: [
|
|
300
|
+
/* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "80px" }, children: [
|
|
301
|
+
/* @__PURE__ */ jsxs("div", { className: style.left, children: [
|
|
302
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
|
|
303
|
+
/* @__PURE__ */ jsx(IconLeft, {}),
|
|
304
|
+
/* @__PURE__ */ jsx(IconLeft, {})
|
|
305
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
306
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
307
307
|
] }),
|
|
308
|
-
/* @__PURE__ */
|
|
308
|
+
/* @__PURE__ */ jsx("div", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") })
|
|
309
309
|
] }),
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */
|
|
313
|
-
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */
|
|
314
|
-
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */
|
|
315
|
-
/* @__PURE__ */
|
|
316
|
-
/* @__PURE__ */
|
|
317
|
-
] }) : /* @__PURE__ */
|
|
310
|
+
/* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "80px" }, children: [
|
|
311
|
+
/* @__PURE__ */ jsx("span", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.add(1, "month").format("MMMM") : CurrentMonth.add(1, "month").format("MMMM YYYY") }),
|
|
312
|
+
/* @__PURE__ */ jsxs("div", { className: style.right, children: [
|
|
313
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
314
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
|
|
315
|
+
/* @__PURE__ */ jsx(IconRight, {}),
|
|
316
|
+
/* @__PURE__ */ jsx(IconRight, {})
|
|
317
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
318
318
|
] })
|
|
319
319
|
] })
|
|
320
|
-
] }) : /* @__PURE__ */
|
|
321
|
-
/* @__PURE__ */
|
|
322
|
-
/* @__PURE__ */
|
|
323
|
-
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */
|
|
324
|
-
/* @__PURE__ */
|
|
325
|
-
/* @__PURE__ */
|
|
326
|
-
] }) : /* @__PURE__ */
|
|
327
|
-
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */
|
|
320
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: style.datePickerHeader, children: [
|
|
321
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
322
|
+
/* @__PURE__ */ jsxs("div", { className: style.left, children: [
|
|
323
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
|
|
324
|
+
/* @__PURE__ */ jsx(IconLeft, {}),
|
|
325
|
+
/* @__PURE__ */ jsx(IconLeft, {})
|
|
326
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
327
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
328
328
|
] }),
|
|
329
|
-
/* @__PURE__ */
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */
|
|
332
|
-
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
334
|
-
/* @__PURE__ */
|
|
335
|
-
] }) : /* @__PURE__ */
|
|
329
|
+
/* @__PURE__ */ jsx("div", { className: style.currentDateHeader, style: monthStyle ?? {}, onClick: HandleChooseMonth, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") }),
|
|
330
|
+
/* @__PURE__ */ jsxs("div", { className: style.right, children: [
|
|
331
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
332
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
|
|
333
|
+
/* @__PURE__ */ jsx(IconRight, {}),
|
|
334
|
+
/* @__PURE__ */ jsx(IconRight, {})
|
|
335
|
+
] }) : /* @__PURE__ */ jsx("div", { className: style.doubleIcon })
|
|
336
336
|
] })
|
|
337
337
|
] }),
|
|
338
|
-
pickerType === "single" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 && /* @__PURE__ */
|
|
339
|
-
return /* @__PURE__ */
|
|
338
|
+
pickerType === "single" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 && /* @__PURE__ */ jsx("ul", { className: style.quickPick, children: getQuickPickers().slice(0, 3).map((item) => {
|
|
339
|
+
return /* @__PURE__ */ jsx("li", { style: quickPickStyle ?? {}, onClick: () => handleQuickPick(item), children: item.name }, item.key);
|
|
340
340
|
}) })
|
|
341
341
|
] }),
|
|
342
|
-
/* @__PURE__ */
|
|
343
|
-
ShowMonths ? /* @__PURE__ */
|
|
344
|
-
/* @__PURE__ */
|
|
345
|
-
/* @__PURE__ */
|
|
346
|
-
/* @__PURE__ */
|
|
347
|
-
currentMonthMatrix.map((week, index) => /* @__PURE__ */
|
|
342
|
+
/* @__PURE__ */ jsxs("div", { className: style.calendarWrapper, children: [
|
|
343
|
+
ShowMonths ? /* @__PURE__ */ jsx("ul", { className: style.monthsWrapper, children: months.map((month) => /* @__PURE__ */ jsx("li", { className: `${style.month} ${PickedMonth === month ? style.pickedMonth : ""}`, onClick: () => setPickedMonth(month), children: /* @__PURE__ */ jsx("div", { className: style.monthName, children: month }) })) }) : /* @__PURE__ */ jsxs("table", { children: [
|
|
344
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
|
|
345
|
+
/* @__PURE__ */ jsxs("tbody", { children: [
|
|
346
|
+
/* @__PURE__ */ jsx("tr", { className: style.spacerRow, children: /* @__PURE__ */ jsx("td", {}) }),
|
|
347
|
+
currentMonthMatrix.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
|
|
348
348
|
const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
|
|
349
349
|
const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
|
|
350
350
|
const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
|
|
@@ -357,7 +357,7 @@ const Calendar = ({
|
|
|
357
357
|
isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
|
|
358
358
|
}
|
|
359
359
|
const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
|
|
360
|
-
return /* @__PURE__ */
|
|
360
|
+
return /* @__PURE__ */ jsx(
|
|
361
361
|
"td",
|
|
362
362
|
{
|
|
363
363
|
style: {
|
|
@@ -384,11 +384,11 @@ const Calendar = ({
|
|
|
384
384
|
}) }, index))
|
|
385
385
|
] })
|
|
386
386
|
] }),
|
|
387
|
-
/* @__PURE__ */
|
|
388
|
-
pickerType === "dual" && /* @__PURE__ */
|
|
389
|
-
pickerType === "dual" && /* @__PURE__ */
|
|
390
|
-
/* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
387
|
+
/* @__PURE__ */ jsx("div", { className: style.buttonWrapper, children: /* @__PURE__ */ jsx(MainButton, { label: "Current date", onClick: () => handleDayClick(dayjs(), true) }) }),
|
|
388
|
+
pickerType === "dual" && /* @__PURE__ */ jsx("div", { className: style.border }),
|
|
389
|
+
pickerType === "dual" && /* @__PURE__ */ jsxs("table", { children: [
|
|
390
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
|
|
391
|
+
/* @__PURE__ */ jsx("tbody", { children: nextMonthMatrix?.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
|
|
392
392
|
const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
|
|
393
393
|
const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
|
|
394
394
|
const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
|
|
@@ -401,7 +401,7 @@ const Calendar = ({
|
|
|
401
401
|
isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
|
|
402
402
|
}
|
|
403
403
|
const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
|
|
404
|
-
return /* @__PURE__ */
|
|
404
|
+
return /* @__PURE__ */ jsx(
|
|
405
405
|
"td",
|
|
406
406
|
{
|
|
407
407
|
style: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
3
|
import dayjs from "dayjs";
|
|
4
4
|
import style from "./Datepicker.module.scss.js";
|
|
@@ -155,8 +155,8 @@ const DatePicker = ({
|
|
|
155
155
|
document.removeEventListener("wheel", ScrollHandler);
|
|
156
156
|
};
|
|
157
157
|
}, []);
|
|
158
|
-
return /* @__PURE__ */
|
|
159
|
-
/* @__PURE__ */
|
|
158
|
+
return /* @__PURE__ */ jsxs("div", { className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datepickerContainer}`, children: [
|
|
159
|
+
/* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsx(
|
|
160
160
|
FormInput,
|
|
161
161
|
{
|
|
162
162
|
...rest,
|
|
@@ -165,12 +165,12 @@ const DatePicker = ({
|
|
|
165
165
|
value: Value,
|
|
166
166
|
toggleFocus: true,
|
|
167
167
|
formInputStyle: { cursor: "pointer" },
|
|
168
|
-
leftSlot: /* @__PURE__ */
|
|
169
|
-
rightSlot: /* @__PURE__ */
|
|
168
|
+
leftSlot: /* @__PURE__ */ jsx("div", { className: style.datepickerLeftIcon, children: /* @__PURE__ */ jsx(IconCalendar, {}) }),
|
|
169
|
+
rightSlot: /* @__PURE__ */ jsx("div", { className: `${style.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsx(IconCloseCircle, {}) }),
|
|
170
170
|
readOnly: true
|
|
171
171
|
}
|
|
172
172
|
) }),
|
|
173
|
-
IsFocused && /* @__PURE__ */
|
|
173
|
+
IsFocused && /* @__PURE__ */ jsx(
|
|
174
174
|
Calendar,
|
|
175
175
|
{
|
|
176
176
|
namespace,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
3
|
import style from "./Dropdown.module.scss.js";
|
|
4
4
|
import FormInput from "../FormInput/FormInput.js";
|
|
@@ -191,8 +191,8 @@ const Dropdown = ({
|
|
|
191
191
|
onBlur?.();
|
|
192
192
|
}
|
|
193
193
|
}, [IsFocused]);
|
|
194
|
-
return /* @__PURE__ */
|
|
195
|
-
/* @__PURE__ */
|
|
194
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style.dropdownWrapper}`, style: dropdownWrapperStyle ?? {}, children: [
|
|
195
|
+
/* @__PURE__ */ jsx(
|
|
196
196
|
"div",
|
|
197
197
|
{
|
|
198
198
|
ref: ComponentRef,
|
|
@@ -200,7 +200,7 @@ const Dropdown = ({
|
|
|
200
200
|
style: dropdownInputWrapperStyle ?? {},
|
|
201
201
|
onClick: () => (setIsFocused((state) => !state), CalculatePos()),
|
|
202
202
|
onFocus: Focus,
|
|
203
|
-
children: /* @__PURE__ */
|
|
203
|
+
children: /* @__PURE__ */ jsx(
|
|
204
204
|
FormInput,
|
|
205
205
|
{
|
|
206
206
|
...rest,
|
|
@@ -214,12 +214,12 @@ const Dropdown = ({
|
|
|
214
214
|
},
|
|
215
215
|
toggleFocus: true,
|
|
216
216
|
formInputStyle: { cursor: withInput ? "text" : "pointer" },
|
|
217
|
-
leftSlot: withInput && /* @__PURE__ */
|
|
218
|
-
dropdownType === "currency" ? /* @__PURE__ */
|
|
219
|
-
/* @__PURE__ */
|
|
217
|
+
leftSlot: withInput && /* @__PURE__ */ jsxs("div", { className: style.dropdownInputSlot, children: [
|
|
218
|
+
dropdownType === "currency" ? /* @__PURE__ */ jsx("p", { children: SingleSelectValue?.label }) : /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(SingleSelectValue?.code), alt: "flag" }),
|
|
219
|
+
/* @__PURE__ */ jsx("div", { className: `${style.dropdownRightIconArrow} ${IsFocused ? style.focused : ""}`, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
|
|
220
220
|
] }),
|
|
221
|
-
rightSlot: /* @__PURE__ */
|
|
222
|
-
(withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */
|
|
221
|
+
rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style.dropdownRightIcon} ${IsFocused ? style.focused : ""}`, children: [
|
|
222
|
+
(withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */ jsx(
|
|
223
223
|
"div",
|
|
224
224
|
{
|
|
225
225
|
onClick: (e) => {
|
|
@@ -232,17 +232,17 @@ const Dropdown = ({
|
|
|
232
232
|
}
|
|
233
233
|
},
|
|
234
234
|
className: style.dropdownRightIconClose,
|
|
235
|
-
children: /* @__PURE__ */
|
|
235
|
+
children: /* @__PURE__ */ jsx(IconCloseCircle, {})
|
|
236
236
|
}
|
|
237
237
|
),
|
|
238
|
-
!withInput && /* @__PURE__ */
|
|
238
|
+
!withInput && /* @__PURE__ */ jsx("div", { className: style.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
|
|
239
239
|
] }),
|
|
240
240
|
readOnly: !withInput,
|
|
241
241
|
forDropdown: true,
|
|
242
242
|
inputSlotStyle: { width: "100%" },
|
|
243
|
-
inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */
|
|
243
|
+
inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */ jsxs("ul", { className: style.dropdownInputSlot, style: dropdownInputSlotStyle ?? {}, children: [
|
|
244
244
|
SelectedData.current.slice(0, SelectedDataLength.current).map((el, index) => {
|
|
245
|
-
return /* @__PURE__ */
|
|
245
|
+
return /* @__PURE__ */ jsxs(
|
|
246
246
|
"li",
|
|
247
247
|
{
|
|
248
248
|
ref: ListItemRef,
|
|
@@ -250,8 +250,8 @@ const Dropdown = ({
|
|
|
250
250
|
style: dropdownInputSlotItemStyle ?? {},
|
|
251
251
|
onClick: (e) => e.stopPropagation(),
|
|
252
252
|
children: [
|
|
253
|
-
/* @__PURE__ */
|
|
254
|
-
/* @__PURE__ */
|
|
253
|
+
/* @__PURE__ */ jsx("p", { title: el.label, className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: typeof el.customLabel === "function" ? el.customLabel(el) : el.label }),
|
|
254
|
+
/* @__PURE__ */ jsx(
|
|
255
255
|
"div",
|
|
256
256
|
{
|
|
257
257
|
style: dropdownInputSlotItemCloseStyle ?? {},
|
|
@@ -260,7 +260,7 @@ const Dropdown = ({
|
|
|
260
260
|
e.stopPropagation();
|
|
261
261
|
SelectItem(el);
|
|
262
262
|
},
|
|
263
|
-
children: /* @__PURE__ */
|
|
263
|
+
children: /* @__PURE__ */ jsx(IconClose, { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "#95969C" })
|
|
264
264
|
}
|
|
265
265
|
)
|
|
266
266
|
]
|
|
@@ -268,14 +268,14 @@ const Dropdown = ({
|
|
|
268
268
|
index
|
|
269
269
|
);
|
|
270
270
|
}),
|
|
271
|
-
SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */
|
|
271
|
+
SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */ jsx("li", { className: `${style.dropdownInputSlotItem} ${style.dropdownInputSlotItemMore}`, style: dropdownInputSlotItemMoreStyle ?? {}, children: /* @__PURE__ */ jsx("p", { className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: `+${SelectedData.current.length - SelectedDataLength.current}` }) })
|
|
272
272
|
] }) : null
|
|
273
273
|
}
|
|
274
274
|
)
|
|
275
275
|
}
|
|
276
276
|
),
|
|
277
|
-
data && data.length > 0 && IsFocused && /* @__PURE__ */
|
|
278
|
-
withFilter && /* @__PURE__ */
|
|
277
|
+
data && data.length > 0 && IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, onClick: (e) => e.stopPropagation(), className: style.dropdownListContainer, children: [
|
|
278
|
+
withFilter && /* @__PURE__ */ jsx(
|
|
279
279
|
FormInput,
|
|
280
280
|
{
|
|
281
281
|
placeholder: "Search",
|
|
@@ -286,8 +286,8 @@ const Dropdown = ({
|
|
|
286
286
|
onChange: (value) => setSearchValue(value)
|
|
287
287
|
}
|
|
288
288
|
),
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
return /* @__PURE__ */
|
|
289
|
+
/* @__PURE__ */ jsx("ul", { onClick: (e) => e.stopPropagation(), className: style.dropdownList, ref: ListRef, style: dropdownListStyle ?? {}, children: Data.filter((item) => item?.label?.toLowerCase().includes(SearchValue.toLowerCase())).map((item, index) => {
|
|
290
|
+
return /* @__PURE__ */ jsxs(
|
|
291
291
|
"li",
|
|
292
292
|
{
|
|
293
293
|
style: { ...dropdownItemStyle, cursor: !withMultiselect && item?.disabled ? "not-allowed" : "pointer" },
|
|
@@ -299,7 +299,7 @@ const Dropdown = ({
|
|
|
299
299
|
}
|
|
300
300
|
},
|
|
301
301
|
children: [
|
|
302
|
-
withMultiselect && /* @__PURE__ */
|
|
302
|
+
withMultiselect && /* @__PURE__ */ jsx("div", { className: style.itemCheckbox, style: itemCheckboxStyle ?? {}, children: /* @__PURE__ */ jsx(
|
|
303
303
|
Checkbox,
|
|
304
304
|
{
|
|
305
305
|
multipleChecked: item.id === "SELECT_ALL",
|
|
@@ -308,12 +308,12 @@ const Dropdown = ({
|
|
|
308
308
|
change: () => SelectItem(item)
|
|
309
309
|
}
|
|
310
310
|
) }),
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
withInput ? /* @__PURE__ */
|
|
313
|
-
/* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */
|
|
315
|
-
/* @__PURE__ */
|
|
316
|
-
] }) : /* @__PURE__ */
|
|
311
|
+
/* @__PURE__ */ jsxs("div", { className: style.dropdownItemLabel, style: dropdownItemLabelStyle ?? {}, children: [
|
|
312
|
+
withInput ? /* @__PURE__ */ jsxs("div", { className: style.dropdownItemLabelInput, children: [
|
|
313
|
+
/* @__PURE__ */ jsx("img", { src: getFlagIconUrl(item.code), style: { width: "1.375rem", height: "1.375rem", objectFit: "contain" }, alt: item.name }),
|
|
314
|
+
/* @__PURE__ */ jsx("span", { title: item.name, className: style.countryName, children: item.name || item.label }),
|
|
315
|
+
/* @__PURE__ */ jsx("span", { className: style.countryDialCode, children: dropdownType === "country" ? item.dialCode : item?.label })
|
|
316
|
+
] }) : /* @__PURE__ */ jsx(
|
|
317
317
|
"p",
|
|
318
318
|
{
|
|
319
319
|
title: typeof item.label === "string" ? item.label : "",
|
|
@@ -322,7 +322,7 @@ const Dropdown = ({
|
|
|
322
322
|
children: typeof item.customLabel === "function" ? item.customLabel(item) : item.label
|
|
323
323
|
}
|
|
324
324
|
),
|
|
325
|
-
withMultiselect && /* @__PURE__ */
|
|
325
|
+
withMultiselect && /* @__PURE__ */ jsx("p", { children: item.id === "SELECT_ALL" ? `${Data.filter((el) => el.id !== "SELECT_ALL" && el.selected).length}/${data.length}` : "" })
|
|
326
326
|
] })
|
|
327
327
|
]
|
|
328
328
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import style from "./FormInput.module.scss.js";
|
|
3
3
|
import { useRef, useState, useEffect } from "react";
|
|
4
4
|
import { IconSearch } from "../../assets/Icons/IconSearch.js";
|
|
@@ -89,25 +89,25 @@ const FormInput = ({
|
|
|
89
89
|
setFocused(customFocus);
|
|
90
90
|
}
|
|
91
91
|
}, [customFocus]);
|
|
92
|
-
return /* @__PURE__ */
|
|
93
|
-
label && /* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */
|
|
92
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
|
|
93
|
+
label && /* @__PURE__ */ jsxs("div", { className: style.formInputLabelWrapper, children: [
|
|
94
|
+
/* @__PURE__ */ jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
|
|
95
95
|
label,
|
|
96
96
|
" ",
|
|
97
|
-
typeof label === "string" && required && /* @__PURE__ */
|
|
97
|
+
typeof label === "string" && required && /* @__PURE__ */ jsx("span", { className: style.formInputRequired, children: "*" })
|
|
98
98
|
] }),
|
|
99
|
-
helperSlot && /* @__PURE__ */
|
|
99
|
+
helperSlot && /* @__PURE__ */ jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
|
|
100
100
|
] }),
|
|
101
|
-
/* @__PURE__ */
|
|
101
|
+
/* @__PURE__ */ jsxs(
|
|
102
102
|
"div",
|
|
103
103
|
{
|
|
104
104
|
className: `${style.formInputWrapper} ${inputState.error ? style.errorState : ""} ${withFocus && Focused ? !inputState.error ? style.focused : style.errorFocused : ""} ${withActive && Active ? !inputState.error ? style.active : style.errorActive : ""} ${inputState.error ? style.error : ""} ${inputState.success ? style.success : ""}`,
|
|
105
105
|
style: formInputWrapperStyle ?? {},
|
|
106
106
|
onClick: () => toggleFocus && setFocused((state) => !state),
|
|
107
107
|
children: [
|
|
108
|
-
leftSlot && /* @__PURE__ */
|
|
109
|
-
searchComponent && /* @__PURE__ */
|
|
110
|
-
inputSlot ? /* @__PURE__ */
|
|
108
|
+
leftSlot && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
|
|
109
|
+
searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsx(IconSearch, {})) }),
|
|
110
|
+
inputSlot ? /* @__PURE__ */ jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsx(
|
|
111
111
|
"input",
|
|
112
112
|
{
|
|
113
113
|
className: style.formInput,
|
|
@@ -131,12 +131,12 @@ const FormInput = ({
|
|
|
131
131
|
maxLength
|
|
132
132
|
}
|
|
133
133
|
),
|
|
134
|
-
rightSlot && /* @__PURE__ */
|
|
135
|
-
searchComponent && /* @__PURE__ */
|
|
134
|
+
rightSlot && /* @__PURE__ */ jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
|
|
135
|
+
searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsx(IconCloseCircle, {})) : null }) })
|
|
136
136
|
]
|
|
137
137
|
}
|
|
138
138
|
),
|
|
139
|
-
helperText && /* @__PURE__ */
|
|
139
|
+
helperText && /* @__PURE__ */ jsx(
|
|
140
140
|
"p",
|
|
141
141
|
{
|
|
142
142
|
style: helperTextStyle ?? {},
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import style from "./InlineLoading.module.scss.js";
|
|
3
3
|
import { IconErrorDash } from "../../assets/Icons/IconErrorDash.js";
|
|
4
4
|
import { IconLoading } from "../../assets/Icons/IconLoading.js";
|
|
5
5
|
import { IconSuccess } from "../../assets/Icons/IconSuccess.js";
|
|
6
6
|
const InlineLoading = ({ loading, success, error, msg }) => {
|
|
7
|
-
return /* @__PURE__ */
|
|
8
|
-
loading?.state && /* @__PURE__ */
|
|
9
|
-
/* @__PURE__ */
|
|
10
|
-
/* @__PURE__ */
|
|
7
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
|
|
8
|
+
loading?.state && /* @__PURE__ */ jsxs("div", { className: style.loading, children: [
|
|
9
|
+
/* @__PURE__ */ jsx(IconLoading, { color1: loading?.color1 ?? "#BCC1C2", color2: loading?.color2, size: loading?.size }),
|
|
10
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
11
11
|
] }),
|
|
12
|
-
!loading?.state && success?.state && /* @__PURE__ */
|
|
13
|
-
/* @__PURE__ */
|
|
14
|
-
/* @__PURE__ */
|
|
12
|
+
!loading?.state && success?.state && /* @__PURE__ */ jsxs("div", { children: [
|
|
13
|
+
/* @__PURE__ */ jsx(IconSuccess, { size: success?.size, color: success?.color }),
|
|
14
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
15
15
|
] }),
|
|
16
|
-
!loading?.state && error?.state && /* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */
|
|
16
|
+
!loading?.state && error?.state && /* @__PURE__ */ jsxs("div", { children: [
|
|
17
|
+
/* @__PURE__ */ jsx(IconErrorDash, { size: error?.size, color: error?.color }),
|
|
18
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
19
19
|
] })
|
|
20
20
|
] });
|
|
21
21
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import style from "./MainButton.module.scss.js";
|
|
3
3
|
import { useState, useRef, useEffect } from "react";
|
|
4
4
|
import IconCircularLoading from "../../assets/Icons/IconCircularLoading.js";
|
|
@@ -50,7 +50,7 @@ const MainButton = ({
|
|
|
50
50
|
document.removeEventListener("click", ClickHandler);
|
|
51
51
|
};
|
|
52
52
|
}, []);
|
|
53
|
-
return /* @__PURE__ */
|
|
53
|
+
return /* @__PURE__ */ jsx(
|
|
54
54
|
"button",
|
|
55
55
|
{
|
|
56
56
|
ref: ButtonRef,
|
|
@@ -59,10 +59,10 @@ const MainButton = ({
|
|
|
59
59
|
disabled,
|
|
60
60
|
className: `${style.mainButton} ${style[size]} ${loading ? style.loading : ""} ${Focused ? style.focused : ""} ${style[buttonType]} ${style[colorType]} ${disabled ? style.disabled : ""}`,
|
|
61
61
|
onClick: Click,
|
|
62
|
-
children: loading ? /* @__PURE__ */
|
|
63
|
-
leftSlot && /* @__PURE__ */
|
|
64
|
-
/* @__PURE__ */
|
|
65
|
-
rightSlot && /* @__PURE__ */
|
|
62
|
+
children: loading ? /* @__PURE__ */ jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
|
|
63
|
+
leftSlot && /* @__PURE__ */ jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
|
|
64
|
+
/* @__PURE__ */ jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
|
|
65
|
+
rightSlot && /* @__PURE__ */ jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
|
|
66
66
|
] })
|
|
67
67
|
}
|
|
68
68
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useState, useCallback } from "react";
|
|
3
3
|
import NotificationToast from "./NotificationToast.js";
|
|
4
4
|
import style from "./NotificationToast.module.scss.js";
|
|
@@ -37,9 +37,9 @@ const ToastProvider = ({ children }) => {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}, [toasts.length]);
|
|
40
|
-
return /* @__PURE__ */
|
|
40
|
+
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
|
|
41
41
|
children,
|
|
42
|
-
/* @__PURE__ */
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsx(
|
|
43
43
|
NotificationToast,
|
|
44
44
|
{
|
|
45
45
|
...props,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { IconCloseBlack } from "../../assets/Icons/IconClose.js";
|
|
3
3
|
import style from "./NotificationToast.module.scss.js";
|
|
4
4
|
import { useState, useEffect } from "react";
|
|
@@ -32,25 +32,25 @@ const NotificationToast = ({
|
|
|
32
32
|
clearTimeout(hideTimeout);
|
|
33
33
|
};
|
|
34
34
|
}, [onClose]);
|
|
35
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
36
|
"div",
|
|
37
37
|
{
|
|
38
38
|
className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
|
|
39
39
|
style: description ? { padding: "12px" } : {},
|
|
40
|
-
children: /* @__PURE__ */
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
withInfoIcon && /* @__PURE__ */
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
title && /* @__PURE__ */
|
|
45
|
-
description && /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
41
|
+
/* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
42
|
+
withInfoIcon && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
|
|
43
|
+
/* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeftText, children: [
|
|
44
|
+
title && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
|
|
45
|
+
description && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
|
|
46
46
|
children && children
|
|
47
47
|
] })
|
|
48
48
|
] }),
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ jsx("div", { className: style.notificationToastContentDescription }),
|
|
50
|
+
/* @__PURE__ */ jsxs("div", { className: style.notificationToastContentRight, children: [
|
|
51
51
|
customAction && customAction,
|
|
52
|
-
!description && withUndo && /* @__PURE__ */
|
|
53
|
-
withClose && /* @__PURE__ */
|
|
52
|
+
!description && withUndo && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
|
|
53
|
+
withClose && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsx(
|
|
54
54
|
IconCloseBlack,
|
|
55
55
|
{
|
|
56
56
|
color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
|