@povio/ui 3.3.0-rc.3 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +55 -206
- package/dist/components/buttons/Button/button.cva.d.ts +1 -1
- package/dist/components/buttons/InlineIconButton/InlineIconButton.js +9 -34
- package/dist/components/buttons/shared/ButtonContent.js +22 -80
- package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +10 -24
- package/dist/components/inputs/Checkbox/CheckboxGroup.d.ts +5 -1
- package/dist/components/inputs/Checkbox/CheckboxGroup.js +234 -201
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +93 -227
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -0
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +170 -273
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -147
- package/dist/components/inputs/DateTime/shared/Calendar.js +139 -339
- package/dist/components/inputs/DateTime/shared/CalendarCell.js +114 -308
- package/dist/components/inputs/DateTime/shared/CalendarGrid.js +35 -150
- package/dist/components/inputs/DateTime/shared/CalendarHeader.js +95 -229
- package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +115 -296
- package/dist/components/inputs/DateTime/shared/DateField.js +135 -301
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +142 -338
- package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +144 -134
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts +2 -0
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js +33 -0
- package/dist/components/inputs/File/FileUpload.js +1 -1
- package/dist/components/inputs/File/InputUpload.js +65 -261
- package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +48 -180
- package/dist/components/inputs/File/shared/FileUploadContentError.js +95 -265
- package/dist/components/inputs/File/shared/FileUploadContentFilled.js +99 -261
- package/dist/components/inputs/File/shared/FileUploadContentLoading.js +56 -234
- package/dist/components/inputs/File/shared/ProgressBar.js +15 -102
- package/dist/components/inputs/FormField/FormField.js +34 -47
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +2 -1
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +77 -314
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +56 -2
- package/dist/components/inputs/Selection/Select/QuerySelect.js +82 -94
- package/dist/components/inputs/Selection/Select/Select.js +3 -3
- package/dist/components/inputs/Selection/shared/SelectInput.js +1 -0
- package/dist/components/inputs/Selection/shared/SelectListBox.js +51 -163
- package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +1 -0
- package/dist/components/inputs/Selection/shared/querySelect.utils.js +1 -0
- package/dist/components/inputs/Selection/shared/select.context.js +19 -9
- package/dist/components/inputs/Selection/shared/useSelectItems.js +48 -108
- package/dist/components/inputs/Skeleton/InputFrame.js +177 -552
- package/dist/components/inputs/TextEditor/TextEditor.js +87 -389
- package/dist/components/inputs/shared/InputClear.js +24 -40
- package/dist/components/inputs/shared/input.cva.js +1 -1
- package/dist/components/navigation/Accordion/Accordion.js +22 -69
- package/dist/components/navigation/Accordion/AccordionItem.js +41 -86
- package/dist/components/navigation/Stepper/Stepper.js +22 -67
- package/dist/components/overlays/ActionModal/ActionModal.js +35 -169
- package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +29 -110
- package/dist/components/shared/pagination/Pagination.js +22 -108
- package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
- package/dist/components/status/Alert/Alert.js +30 -97
- package/dist/components/table/InfiniteTable.js +16 -67
- package/dist/components/table/Table.d.ts +2 -8
- package/dist/components/table/Table.js +33 -55
- package/dist/components/text/Typography/Typography.js +8 -23
- package/dist/config/confirmation.context.js +1 -1
- package/dist/config/theme.context.js +45 -98
- package/dist/config/uiConfig.context.d.ts +1 -0
- package/dist/config/uiConfig.context.js +10 -40
- package/dist/config/uiOverrides.context.d.ts +0 -1
- package/dist/helpers/dynamicColumns.js +2 -1
- package/dist/hooks/useDebounceCallback.js +17 -51
- package/dist/hooks/useFormAutosave.js +33 -120
- package/dist/hooks/useLongPressRepeat.js +20 -55
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/utils/date-time.utils.d.ts +0 -1
- package/dist/utils/date-time.utils.js +21 -45
- package/dist/utils/intl.utils.d.ts +7 -0
- package/dist/utils/intl.utils.js +38 -0
- package/dist/utils/intl.utils.spec.d.ts +1 -0
- package/package.json +2 -2
- package/dist/components/inputs/FormField/formField.cva.d.ts +0 -11
- package/dist/components/inputs/FormField/formField.cva.js +0 -16
- package/dist/components/table/TableColumnFilterInput.d.ts +0 -9
- package/dist/components/table/TableColumnFilterInput.js +0 -108
- package/dist/components/table/TableColumnFilterPlaceholder.d.ts +0 -5
- package/dist/components/table/TableColumnFilterPlaceholder.js +0 -41
- package/dist/components/table/TableColumnFilterRow.d.ts +0 -16
- package/dist/components/table/TableColumnFilterRow.js +0 -68
|
@@ -2,125 +2,44 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
|
|
|
2
2
|
import { BottomSheet } from "../BottomSheet/BottomSheet.js";
|
|
3
3
|
import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
|
|
4
4
|
import { popoverDefinition } from "../../shared/popover.cva.js";
|
|
5
|
-
import { c } from "react/compiler-runtime";
|
|
6
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { clsx } from "clsx";
|
|
8
7
|
import { Dialog, DialogTrigger, Popover } from "react-aria-components";
|
|
9
8
|
//#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
|
|
10
|
-
var ResponsivePopover = (
|
|
11
|
-
const $ = c(33);
|
|
12
|
-
const { trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps } = t0;
|
|
9
|
+
var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps }) => {
|
|
13
10
|
const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
|
|
14
11
|
const isDesktop = useBreakpoint("md");
|
|
15
|
-
|
|
16
|
-
if (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
t3 = $[5];
|
|
34
|
-
}
|
|
35
|
-
const offset = t2 === void 0 ? 0 : t2;
|
|
36
|
-
const placement = t3 === void 0 ? "bottom start" : t3;
|
|
37
|
-
if (!isDesktop) {
|
|
38
|
-
let t4;
|
|
39
|
-
if ($[6] !== children) {
|
|
40
|
-
t4 = /* @__PURE__ */ jsx("div", {
|
|
41
|
-
className: "p-4",
|
|
42
|
-
children
|
|
43
|
-
});
|
|
44
|
-
$[6] = children;
|
|
45
|
-
$[7] = t4;
|
|
46
|
-
} else t4 = $[7];
|
|
47
|
-
let t5;
|
|
48
|
-
if ($[8] !== bottomSheetProps || $[9] !== isOpen || $[10] !== onOpenChange || $[11] !== sheetLabel || $[12] !== t4 || $[13] !== trigger) {
|
|
49
|
-
t5 = /* @__PURE__ */ jsx(BottomSheet, {
|
|
50
|
-
height: "auto",
|
|
51
|
-
isDismissable: true,
|
|
52
|
-
label: sheetLabel,
|
|
53
|
-
...bottomSheetProps,
|
|
54
|
-
isOpen,
|
|
55
|
-
onOpenChange,
|
|
56
|
-
trigger,
|
|
57
|
-
children: t4
|
|
58
|
-
});
|
|
59
|
-
$[8] = bottomSheetProps;
|
|
60
|
-
$[9] = isOpen;
|
|
61
|
-
$[10] = onOpenChange;
|
|
62
|
-
$[11] = sheetLabel;
|
|
63
|
-
$[12] = t4;
|
|
64
|
-
$[13] = trigger;
|
|
65
|
-
$[14] = t5;
|
|
66
|
-
} else t5 = $[14];
|
|
67
|
-
return t5;
|
|
68
|
-
}
|
|
69
|
-
let t4;
|
|
70
|
-
if ($[15] !== popoverClassName) {
|
|
71
|
-
t4 = clsx("my-4 outline-none", popoverClassName);
|
|
72
|
-
$[15] = popoverClassName;
|
|
73
|
-
$[16] = t4;
|
|
74
|
-
} else t4 = $[16];
|
|
75
|
-
let t5;
|
|
76
|
-
if ($[17] !== popoverCva) {
|
|
77
|
-
t5 = clsx(popoverCva({}), "overflow-hidden p-2");
|
|
78
|
-
$[17] = popoverCva;
|
|
79
|
-
$[18] = t5;
|
|
80
|
-
} else t5 = $[18];
|
|
81
|
-
let t6;
|
|
82
|
-
if ($[19] !== children || $[20] !== t5) {
|
|
83
|
-
t6 = /* @__PURE__ */ jsx(Dialog, {
|
|
84
|
-
className: "outline-none",
|
|
85
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
86
|
-
className: t5,
|
|
87
|
-
children
|
|
88
|
-
})
|
|
89
|
-
});
|
|
90
|
-
$[19] = children;
|
|
91
|
-
$[20] = t5;
|
|
92
|
-
$[21] = t6;
|
|
93
|
-
} else t6 = $[21];
|
|
94
|
-
let t7;
|
|
95
|
-
if ($[22] !== offset || $[23] !== placement || $[24] !== restPopoverProps || $[25] !== t4 || $[26] !== t6) {
|
|
96
|
-
t7 = /* @__PURE__ */ jsx(Popover, {
|
|
12
|
+
const { offset = 0, placement = "bottom start", ...restPopoverProps } = popoverProps ?? {};
|
|
13
|
+
if (!isDesktop) return /* @__PURE__ */ jsx(BottomSheet, {
|
|
14
|
+
height: "auto",
|
|
15
|
+
isDismissable: true,
|
|
16
|
+
label: sheetLabel,
|
|
17
|
+
...bottomSheetProps,
|
|
18
|
+
isOpen,
|
|
19
|
+
onOpenChange,
|
|
20
|
+
trigger,
|
|
21
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
22
|
+
className: "p-4",
|
|
23
|
+
children
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
return /* @__PURE__ */ jsxs(DialogTrigger, {
|
|
27
|
+
isOpen,
|
|
28
|
+
onOpenChange,
|
|
29
|
+
children: [trigger, /* @__PURE__ */ jsx(Popover, {
|
|
97
30
|
...restPopoverProps,
|
|
98
|
-
className:
|
|
31
|
+
className: clsx("my-4 outline-none", popoverClassName),
|
|
99
32
|
offset,
|
|
100
33
|
placement,
|
|
101
|
-
children:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
let t8;
|
|
111
|
-
if ($[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t7 || $[31] !== trigger) {
|
|
112
|
-
t8 = /* @__PURE__ */ jsxs(DialogTrigger, {
|
|
113
|
-
isOpen,
|
|
114
|
-
onOpenChange,
|
|
115
|
-
children: [trigger, t7]
|
|
116
|
-
});
|
|
117
|
-
$[28] = isOpen;
|
|
118
|
-
$[29] = onOpenChange;
|
|
119
|
-
$[30] = t7;
|
|
120
|
-
$[31] = trigger;
|
|
121
|
-
$[32] = t8;
|
|
122
|
-
} else t8 = $[32];
|
|
123
|
-
return t8;
|
|
34
|
+
children: /* @__PURE__ */ jsx(Dialog, {
|
|
35
|
+
className: "outline-none",
|
|
36
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
37
|
+
className: clsx(popoverCva({}), "overflow-hidden p-2"),
|
|
38
|
+
children
|
|
39
|
+
})
|
|
40
|
+
})
|
|
41
|
+
})]
|
|
42
|
+
});
|
|
124
43
|
};
|
|
125
44
|
//#endregion
|
|
126
45
|
export { ResponsivePopover };
|
|
@@ -2,31 +2,16 @@ import { Typography } from "../../text/Typography/Typography.js";
|
|
|
2
2
|
import "../../../config/i18n.js";
|
|
3
3
|
import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
|
|
4
4
|
import { PaginationList } from "./PaginationList.js";
|
|
5
|
-
import { c } from "react/compiler-runtime";
|
|
6
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { clsx } from "clsx";
|
|
8
7
|
import { useTranslation } from "react-i18next";
|
|
9
8
|
//#region src/components/shared/pagination/Pagination.tsx
|
|
10
|
-
var Pagination = (
|
|
11
|
-
const $ = c(34);
|
|
12
|
-
const { size: t1, variant: t2, color: t3, page, totalItems, totalPages, pageSize, hideText: t4, hideFirstLast: t5, hidePrevNext: t6, hideNumbers: t7, className, onPageChange, onPageSizeChange } = t0;
|
|
13
|
-
const size = t1 === void 0 ? "s" : t1;
|
|
14
|
-
const variant = t2 === void 0 ? "subtle" : t2;
|
|
15
|
-
const color = t3 === void 0 ? "secondary" : t3;
|
|
16
|
-
const hideText = t4 === void 0 ? true : t4;
|
|
17
|
-
const hideFirstLast = t5 === void 0 ? true : t5;
|
|
18
|
-
const hidePrevNext = t6 === void 0 ? false : t6;
|
|
19
|
-
const hideNumbers = t7 === void 0 ? false : t7;
|
|
9
|
+
var Pagination = ({ size = "s", variant = "subtle", color = "secondary", page, totalItems, totalPages, pageSize, hideText = true, hideFirstLast = true, hidePrevNext = false, hideNumbers = false, className, onPageChange, onPageSizeChange }) => {
|
|
20
10
|
const { t } = useTranslation("ui");
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
$[1] = t8;
|
|
26
|
-
} else t8 = $[1];
|
|
27
|
-
let t9;
|
|
28
|
-
if ($[2] !== color || $[3] !== hideFirstLast || $[4] !== hideNumbers || $[5] !== hidePrevNext || $[6] !== hideText || $[7] !== onPageChange || $[8] !== page || $[9] !== pageSize || $[10] !== size || $[11] !== totalItems || $[12] !== totalPages || $[13] !== variant) {
|
|
29
|
-
t9 = totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
|
|
11
|
+
return /* @__PURE__ */ jsxs("nav", {
|
|
12
|
+
id: "pagination",
|
|
13
|
+
className: clsx("flex items-center gap-2", className),
|
|
14
|
+
children: [totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
|
|
30
15
|
page,
|
|
31
16
|
size,
|
|
32
17
|
color,
|
|
@@ -37,95 +22,24 @@ var Pagination = (t0) => {
|
|
|
37
22
|
hideNumbers,
|
|
38
23
|
totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
|
|
39
24
|
onPageChange
|
|
40
|
-
})
|
|
41
|
-
$[2] = color;
|
|
42
|
-
$[3] = hideFirstLast;
|
|
43
|
-
$[4] = hideNumbers;
|
|
44
|
-
$[5] = hidePrevNext;
|
|
45
|
-
$[6] = hideText;
|
|
46
|
-
$[7] = onPageChange;
|
|
47
|
-
$[8] = page;
|
|
48
|
-
$[9] = pageSize;
|
|
49
|
-
$[10] = size;
|
|
50
|
-
$[11] = totalItems;
|
|
51
|
-
$[12] = totalPages;
|
|
52
|
-
$[13] = variant;
|
|
53
|
-
$[14] = t9;
|
|
54
|
-
} else t9 = $[14];
|
|
55
|
-
let t10;
|
|
56
|
-
if ($[15] !== t) {
|
|
57
|
-
t10 = t(_temp);
|
|
58
|
-
$[15] = t;
|
|
59
|
-
$[16] = t10;
|
|
60
|
-
} else t10 = $[16];
|
|
61
|
-
let t11;
|
|
62
|
-
if ($[17] !== t10) {
|
|
63
|
-
t11 = /* @__PURE__ */ jsx(Typography, {
|
|
64
|
-
variant: "default",
|
|
65
|
-
size: "label-2",
|
|
66
|
-
as: "span",
|
|
67
|
-
className: "whitespace-nowrap text-text-default-1",
|
|
68
|
-
children: t10
|
|
69
|
-
});
|
|
70
|
-
$[17] = t10;
|
|
71
|
-
$[18] = t11;
|
|
72
|
-
} else t11 = $[18];
|
|
73
|
-
let t12;
|
|
74
|
-
if ($[19] !== onPageSizeChange) {
|
|
75
|
-
t12 = (value) => onPageSizeChange?.(Number(value));
|
|
76
|
-
$[19] = onPageSizeChange;
|
|
77
|
-
$[20] = t12;
|
|
78
|
-
} else t12 = $[20];
|
|
79
|
-
let t13;
|
|
80
|
-
if ($[21] !== t) {
|
|
81
|
-
t13 = t(_temp2);
|
|
82
|
-
$[21] = t;
|
|
83
|
-
$[22] = t13;
|
|
84
|
-
} else t13 = $[22];
|
|
85
|
-
let t14;
|
|
86
|
-
if ($[23] !== pageSize || $[24] !== t12 || $[25] !== t13) {
|
|
87
|
-
t14 = /* @__PURE__ */ jsx(NumberInput, {
|
|
88
|
-
value: pageSize,
|
|
89
|
-
onChange: t12,
|
|
90
|
-
label: t13,
|
|
91
|
-
hideLabel: true,
|
|
92
|
-
className: "w-min",
|
|
93
|
-
inputClassName: "min-w-12 !px-3 !py-0-5"
|
|
94
|
-
});
|
|
95
|
-
$[23] = pageSize;
|
|
96
|
-
$[24] = t12;
|
|
97
|
-
$[25] = t13;
|
|
98
|
-
$[26] = t14;
|
|
99
|
-
} else t14 = $[26];
|
|
100
|
-
let t15;
|
|
101
|
-
if ($[27] !== t11 || $[28] !== t14) {
|
|
102
|
-
t15 = /* @__PURE__ */ jsxs("div", {
|
|
25
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
103
26
|
className: "flex items-center gap-2",
|
|
104
|
-
children: [
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
$[33] = t16;
|
|
121
|
-
} else t16 = $[33];
|
|
122
|
-
return t16;
|
|
27
|
+
children: [/* @__PURE__ */ jsx(Typography, {
|
|
28
|
+
variant: "default",
|
|
29
|
+
size: "label-2",
|
|
30
|
+
as: "span",
|
|
31
|
+
className: "whitespace-nowrap text-text-default-1",
|
|
32
|
+
children: t(($) => $.ui.pagination.resultsPerPage)
|
|
33
|
+
}), /* @__PURE__ */ jsx(NumberInput, {
|
|
34
|
+
value: pageSize,
|
|
35
|
+
onChange: (value) => onPageSizeChange?.(Number(value)),
|
|
36
|
+
label: t(($_0) => $_0.ui.pagination.resultsPerPage),
|
|
37
|
+
hideLabel: true,
|
|
38
|
+
className: "w-min",
|
|
39
|
+
inputClassName: "min-w-12 !px-3 !py-0-5"
|
|
40
|
+
})]
|
|
41
|
+
})]
|
|
42
|
+
});
|
|
123
43
|
};
|
|
124
|
-
function _temp($) {
|
|
125
|
-
return $.ui.pagination.resultsPerPage;
|
|
126
|
-
}
|
|
127
|
-
function _temp2($_0) {
|
|
128
|
-
return $_0.ui.pagination.resultsPerPage;
|
|
129
|
-
}
|
|
130
44
|
//#endregion
|
|
131
45
|
export { Pagination };
|
|
@@ -3,112 +3,45 @@ import { Typography } from "../../text/Typography/Typography.js";
|
|
|
3
3
|
import { Loader } from "../Loader/Loader.js";
|
|
4
4
|
import { alertDefinition } from "./alert.cva.js";
|
|
5
5
|
import { statusIconDefinition, statusSeparatorDefinition } from "../shared/status.cva.js";
|
|
6
|
-
import { c } from "react/compiler-runtime";
|
|
7
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
7
|
//#region src/components/status/Alert/Alert.tsx
|
|
9
|
-
var Alert = (
|
|
10
|
-
const $ = c(31);
|
|
11
|
-
const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
|
|
12
|
-
const isLoading = t1 === void 0 ? false : t1;
|
|
8
|
+
var Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
|
|
13
9
|
const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
|
|
14
10
|
const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
|
|
15
11
|
const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
t2 = alertCva({
|
|
12
|
+
return /* @__PURE__ */ jsx("div", {
|
|
13
|
+
className: alertCva({
|
|
19
14
|
variant,
|
|
20
15
|
color,
|
|
21
16
|
className
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
$[1] = className;
|
|
25
|
-
$[2] = color;
|
|
26
|
-
$[3] = variant;
|
|
27
|
-
$[4] = t2;
|
|
28
|
-
} else t2 = $[4];
|
|
29
|
-
let t3;
|
|
30
|
-
if ($[5] !== isLoading) {
|
|
31
|
-
t3 = isLoading && /* @__PURE__ */ jsx(Loader, {
|
|
32
|
-
size: "default",
|
|
33
|
-
className: "shrink-0"
|
|
34
|
-
});
|
|
35
|
-
$[5] = isLoading;
|
|
36
|
-
$[6] = t3;
|
|
37
|
-
} else t3 = $[6];
|
|
38
|
-
let t4;
|
|
39
|
-
if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
|
|
40
|
-
t4 = !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
|
|
41
|
-
variant,
|
|
42
|
-
color
|
|
43
|
-
}) });
|
|
44
|
-
$[7] = Icon;
|
|
45
|
-
$[8] = color;
|
|
46
|
-
$[9] = iconCva;
|
|
47
|
-
$[10] = isLoading;
|
|
48
|
-
$[11] = variant;
|
|
49
|
-
$[12] = t4;
|
|
50
|
-
} else t4 = $[12];
|
|
51
|
-
let t5;
|
|
52
|
-
if ($[13] !== text) {
|
|
53
|
-
t5 = /* @__PURE__ */ jsx(Typography, {
|
|
54
|
-
size: "label-2",
|
|
55
|
-
children: text
|
|
56
|
-
});
|
|
57
|
-
$[13] = text;
|
|
58
|
-
$[14] = t5;
|
|
59
|
-
} else t5 = $[14];
|
|
60
|
-
let t6;
|
|
61
|
-
if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
|
|
62
|
-
t6 = /* @__PURE__ */ jsxs("div", {
|
|
63
|
-
className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
|
|
64
|
-
children: [
|
|
65
|
-
t3,
|
|
66
|
-
t4,
|
|
67
|
-
t5
|
|
68
|
-
]
|
|
69
|
-
});
|
|
70
|
-
$[15] = t3;
|
|
71
|
-
$[16] = t4;
|
|
72
|
-
$[17] = t5;
|
|
73
|
-
$[18] = t6;
|
|
74
|
-
} else t6 = $[18];
|
|
75
|
-
let t7;
|
|
76
|
-
if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
|
|
77
|
-
t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
|
|
78
|
-
variant,
|
|
79
|
-
color
|
|
80
|
-
}) }), /* @__PURE__ */ jsx("div", {
|
|
81
|
-
className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
|
|
82
|
-
children: rightContent
|
|
83
|
-
})] });
|
|
84
|
-
$[19] = color;
|
|
85
|
-
$[20] = hasSeparator;
|
|
86
|
-
$[21] = rightContent;
|
|
87
|
-
$[22] = separatorCva;
|
|
88
|
-
$[23] = variant;
|
|
89
|
-
$[24] = t7;
|
|
90
|
-
} else t7 = $[24];
|
|
91
|
-
let t8;
|
|
92
|
-
if ($[25] !== t6 || $[26] !== t7) {
|
|
93
|
-
t8 = /* @__PURE__ */ jsxs("div", {
|
|
17
|
+
}),
|
|
18
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
94
19
|
className: "flex w-auto flex-col items-center md:flex-row",
|
|
95
|
-
children: [
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
20
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
21
|
+
className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
|
|
22
|
+
children: [
|
|
23
|
+
isLoading && /* @__PURE__ */ jsx(Loader, {
|
|
24
|
+
size: "default",
|
|
25
|
+
className: "shrink-0"
|
|
26
|
+
}),
|
|
27
|
+
!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
|
|
28
|
+
variant,
|
|
29
|
+
color
|
|
30
|
+
}) }),
|
|
31
|
+
/* @__PURE__ */ jsx(Typography, {
|
|
32
|
+
size: "label-2",
|
|
33
|
+
children: text
|
|
34
|
+
})
|
|
35
|
+
]
|
|
36
|
+
}), !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
|
|
37
|
+
variant,
|
|
38
|
+
color
|
|
39
|
+
}) }), /* @__PURE__ */ jsx("div", {
|
|
40
|
+
className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
|
|
41
|
+
children: rightContent
|
|
42
|
+
})] })]
|
|
43
|
+
})
|
|
44
|
+
});
|
|
112
45
|
};
|
|
113
46
|
//#endregion
|
|
114
47
|
export { Alert };
|
|
@@ -1,79 +1,28 @@
|
|
|
1
1
|
import { Loader } from "../status/Loader/Loader.js";
|
|
2
2
|
import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
|
|
3
3
|
import { Table } from "./Table.js";
|
|
4
|
-
import { c } from "react/compiler-runtime";
|
|
5
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useCallback } from "react";
|
|
6
6
|
//#region src/components/table/InfiniteTable.tsx
|
|
7
|
-
var InfiniteTable = (
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
let hasNextPage;
|
|
11
|
-
let rest;
|
|
12
|
-
let t1;
|
|
13
|
-
if ($[0] !== t0) {
|
|
14
|
-
({hasNextPage, isFetchingNextPage: t1, fetchNextPage, ...rest} = t0);
|
|
15
|
-
$[0] = t0;
|
|
16
|
-
$[1] = fetchNextPage;
|
|
17
|
-
$[2] = hasNextPage;
|
|
18
|
-
$[3] = rest;
|
|
19
|
-
$[4] = t1;
|
|
20
|
-
} else {
|
|
21
|
-
fetchNextPage = $[1];
|
|
22
|
-
hasNextPage = $[2];
|
|
23
|
-
rest = $[3];
|
|
24
|
-
t1 = $[4];
|
|
25
|
-
}
|
|
26
|
-
const isFetchingNextPage = t1 === void 0 ? false : t1;
|
|
27
|
-
let t2;
|
|
28
|
-
if ($[5] !== fetchNextPage || $[6] !== hasNextPage || $[7] !== isFetchingNextPage) {
|
|
29
|
-
t2 = () => {
|
|
7
|
+
var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
|
|
8
|
+
const { ref } = useIntersectionObserver({
|
|
9
|
+
onIntersection: useCallback(() => {
|
|
30
10
|
if (!isFetchingNextPage && hasNextPage) fetchNextPage();
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
onIntersection: handleLoadMore,
|
|
42
|
-
rootMargin: "100px"
|
|
43
|
-
};
|
|
44
|
-
$[9] = handleLoadMore;
|
|
45
|
-
$[10] = t3;
|
|
46
|
-
} else t3 = $[10];
|
|
47
|
-
const { ref } = useIntersectionObserver(t3);
|
|
48
|
-
let t4;
|
|
49
|
-
if ($[11] !== rest) {
|
|
50
|
-
t4 = /* @__PURE__ */ jsx(Table, { ...rest });
|
|
51
|
-
$[11] = rest;
|
|
52
|
-
$[12] = t4;
|
|
53
|
-
} else t4 = $[12];
|
|
54
|
-
let t5;
|
|
55
|
-
if ($[13] !== hasNextPage || $[14] !== isFetchingNextPage || $[15] !== ref) {
|
|
56
|
-
t5 = (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
|
|
11
|
+
}, [
|
|
12
|
+
isFetchingNextPage,
|
|
13
|
+
hasNextPage,
|
|
14
|
+
fetchNextPage
|
|
15
|
+
]),
|
|
16
|
+
rootMargin: "100px"
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
19
|
+
className: "flex flex-col",
|
|
20
|
+
children: [/* @__PURE__ */ jsx(Table, { ...rest }), (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
|
|
57
21
|
ref,
|
|
58
22
|
className: "flex justify-center py-4",
|
|
59
23
|
children: /* @__PURE__ */ jsx(Loader, {})
|
|
60
|
-
})
|
|
61
|
-
|
|
62
|
-
$[14] = isFetchingNextPage;
|
|
63
|
-
$[15] = ref;
|
|
64
|
-
$[16] = t5;
|
|
65
|
-
} else t5 = $[16];
|
|
66
|
-
let t6;
|
|
67
|
-
if ($[17] !== t4 || $[18] !== t5) {
|
|
68
|
-
t6 = /* @__PURE__ */ jsxs("div", {
|
|
69
|
-
className: "flex flex-col",
|
|
70
|
-
children: [t4, t5]
|
|
71
|
-
});
|
|
72
|
-
$[17] = t4;
|
|
73
|
-
$[18] = t5;
|
|
74
|
-
$[19] = t6;
|
|
75
|
-
} else t6 = $[19];
|
|
76
|
-
return t6;
|
|
24
|
+
})]
|
|
25
|
+
});
|
|
77
26
|
};
|
|
78
27
|
//#endregion
|
|
79
28
|
export { InfiniteTable };
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core';
|
|
2
2
|
import { ColumnDef, ColumnOrderState, OnChangeFn, Table as ReactTable, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
|
|
3
3
|
import { TFunction } from 'i18next';
|
|
4
|
-
import { ComponentType, Dispatch,
|
|
5
|
-
import { UseFormReturn } from 'react-hook-form';
|
|
6
|
-
import { InputDef } from '../inputs/Inputs/InputItem';
|
|
4
|
+
import { ComponentType, Dispatch, SetStateAction } from 'react';
|
|
7
5
|
import { TableRowVariantProps } from './table.cva';
|
|
8
6
|
export type BulkSelectionActionsComponent<T> = ComponentType<{
|
|
9
7
|
table: ReactTable<T>;
|
|
@@ -32,12 +30,8 @@ export interface TableProps<T> extends TableRowVariantProps {
|
|
|
32
30
|
enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
|
|
33
31
|
defaultSelectedRows?: RowSelectionState;
|
|
34
32
|
onRowSelectionChange?: OnChangeFn<RowSelectionState>;
|
|
35
|
-
filterForm?: UseFormReturn<Record<string, any>>;
|
|
36
|
-
filterDefs?: InputDef<any>[];
|
|
37
|
-
headerFilterCellClassName?: string;
|
|
38
|
-
emptyContent?: ReactNode;
|
|
39
33
|
}
|
|
40
34
|
export declare const RowDragHandleCell: ({ rowId }: {
|
|
41
35
|
rowId: string;
|
|
42
36
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
-
export declare const Table: <T>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange,
|
|
37
|
+
export declare const Table: <T>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|