@povio/ui 3.3.0-rc.4 → 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/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/DateTime/DatePicker/DatePicker.js +93 -227
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +84 -202
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -132
- 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 -306
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +140 -338
- package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
- 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/NumberRangeInput/NumberRangeInput.js +75 -313
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
- package/dist/components/inputs/Selection/Select/QuerySelect.js +30 -96
- 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/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/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/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.js +8 -39
- package/dist/config/uiOverrides.context.d.ts +0 -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 +0 -1
- package/dist/index.js +1 -2
- 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
|
@@ -1,81 +1,34 @@
|
|
|
1
1
|
import { UIOverrides } from "../../../config/uiOverrides.context.js";
|
|
2
2
|
import { accordionDefinition } from "./accordion.cva.js";
|
|
3
3
|
import { AccordionItem } from "./AccordionItem.js";
|
|
4
|
-
import { c } from "react/compiler-runtime";
|
|
5
4
|
import { jsx } from "react/jsx-runtime";
|
|
6
5
|
import { clsx } from "clsx";
|
|
7
6
|
import { DisclosureGroup } from "react-aria-components";
|
|
8
7
|
//#region src/components/navigation/Accordion/Accordion.tsx
|
|
9
|
-
var Accordion = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const t4 = items.length === 1;
|
|
17
|
-
let t5;
|
|
18
|
-
if ($[0] !== accordionCva || $[1] !== className || $[2] !== t4 || $[3] !== variant) {
|
|
19
|
-
t5 = clsx(accordionCva({
|
|
8
|
+
var Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
|
|
9
|
+
return /* @__PURE__ */ jsx(DisclosureGroup, {
|
|
10
|
+
allowsMultipleExpanded,
|
|
11
|
+
expandedKeys,
|
|
12
|
+
defaultExpandedKeys,
|
|
13
|
+
onExpandedChange,
|
|
14
|
+
className: clsx(UIOverrides.useCva("accordion.cva", accordionDefinition)({
|
|
20
15
|
className,
|
|
21
16
|
variant,
|
|
22
|
-
singleItem:
|
|
23
|
-
}))
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
subheading: item.subheading,
|
|
38
|
-
icon: item.icon,
|
|
39
|
-
variant,
|
|
40
|
-
actionPosition,
|
|
41
|
-
disabled: item.disabled || disabled,
|
|
42
|
-
isSingle: items.length === 1,
|
|
43
|
-
children: item.children
|
|
44
|
-
}, item.id);
|
|
45
|
-
$[10] = actionPosition;
|
|
46
|
-
$[11] = disabled;
|
|
47
|
-
$[12] = items.length;
|
|
48
|
-
$[13] = variant;
|
|
49
|
-
$[14] = t7;
|
|
50
|
-
} else t7 = $[14];
|
|
51
|
-
t6 = items.map(t7);
|
|
52
|
-
$[5] = actionPosition;
|
|
53
|
-
$[6] = disabled;
|
|
54
|
-
$[7] = items;
|
|
55
|
-
$[8] = variant;
|
|
56
|
-
$[9] = t6;
|
|
57
|
-
} else t6 = $[9];
|
|
58
|
-
let t7;
|
|
59
|
-
if ($[15] !== allowsMultipleExpanded || $[16] !== defaultExpandedKeys || $[17] !== disabled || $[18] !== expandedKeys || $[19] !== onExpandedChange || $[20] !== t5 || $[21] !== t6) {
|
|
60
|
-
t7 = /* @__PURE__ */ jsx(DisclosureGroup, {
|
|
61
|
-
allowsMultipleExpanded,
|
|
62
|
-
expandedKeys,
|
|
63
|
-
defaultExpandedKeys,
|
|
64
|
-
onExpandedChange,
|
|
65
|
-
className: t5,
|
|
66
|
-
isDisabled: disabled,
|
|
67
|
-
children: t6
|
|
68
|
-
});
|
|
69
|
-
$[15] = allowsMultipleExpanded;
|
|
70
|
-
$[16] = defaultExpandedKeys;
|
|
71
|
-
$[17] = disabled;
|
|
72
|
-
$[18] = expandedKeys;
|
|
73
|
-
$[19] = onExpandedChange;
|
|
74
|
-
$[20] = t5;
|
|
75
|
-
$[21] = t6;
|
|
76
|
-
$[22] = t7;
|
|
77
|
-
} else t7 = $[22];
|
|
78
|
-
return t7;
|
|
17
|
+
singleItem: items.length === 1
|
|
18
|
+
})),
|
|
19
|
+
isDisabled: disabled,
|
|
20
|
+
children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, {
|
|
21
|
+
id: item.id,
|
|
22
|
+
heading: item.heading,
|
|
23
|
+
subheading: item.subheading,
|
|
24
|
+
icon: item.icon,
|
|
25
|
+
variant,
|
|
26
|
+
actionPosition,
|
|
27
|
+
disabled: item.disabled || disabled,
|
|
28
|
+
isSingle: items.length === 1,
|
|
29
|
+
children: item.children
|
|
30
|
+
}, item.id))
|
|
31
|
+
});
|
|
79
32
|
};
|
|
80
33
|
//#endregion
|
|
81
34
|
export { Accordion };
|
|
@@ -2,15 +2,10 @@ import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
|
|
|
2
2
|
import { UIOverrides } from "../../../config/uiOverrides.context.js";
|
|
3
3
|
import { Typography } from "../../text/Typography/Typography.js";
|
|
4
4
|
import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
|
|
5
|
-
import { c } from "react/compiler-runtime";
|
|
6
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
|
|
8
7
|
//#region src/components/navigation/Accordion/AccordionItem.tsx
|
|
9
|
-
var AccordionItem = (
|
|
10
|
-
const $ = c(25);
|
|
11
|
-
const { id, disabled, heading, subheading, children, icon: Icon, variant: t1, actionPosition: t2, isSingle } = t0;
|
|
12
|
-
const variant = t1 === void 0 ? "filled" : t1;
|
|
13
|
-
const actionPosition = t2 === void 0 ? "right" : t2;
|
|
8
|
+
var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
|
|
14
9
|
const itemCva = UIOverrides.useCva("accordion.itemCva", accordionItemDefinition);
|
|
15
10
|
const triggerCva = UIOverrides.useCva("accordion.triggerCva", accordionTriggerDefinition);
|
|
16
11
|
const headingCva = UIOverrides.useCva("accordion.headingCva", accordionHeadingDefinition);
|
|
@@ -20,89 +15,49 @@ var AccordionItem = (t0) => {
|
|
|
20
15
|
const iconCva = UIOverrides.useCva("accordion.iconCva", accordionIconDefinition);
|
|
21
16
|
const panelCva = UIOverrides.useCva("accordion.panelCva", accordionPanelDefinition);
|
|
22
17
|
const panelContentCva = UIOverrides.useCva("accordion.panelContentCva", accordionPanelContentDefinition);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
return /* @__PURE__ */ jsx(Disclosure, {
|
|
19
|
+
id,
|
|
20
|
+
className: itemCva({
|
|
26
21
|
variant,
|
|
27
22
|
singleItem: isSingle
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}),
|
|
57
|
-
subheading && /* @__PURE__ */ jsx(Typography, {
|
|
58
|
-
size: "label-3",
|
|
59
|
-
variant: "default",
|
|
60
|
-
className: headingSubtitleCva({}),
|
|
61
|
-
children: subheading
|
|
62
|
-
})
|
|
63
|
-
]
|
|
64
|
-
})
|
|
65
|
-
}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
|
|
66
|
-
}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
|
|
67
|
-
className: panelCva({ isExpanded }),
|
|
68
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
69
|
-
className: panelContentCva({}),
|
|
70
|
-
children
|
|
23
|
+
}),
|
|
24
|
+
isDisabled: disabled,
|
|
25
|
+
children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
|
|
26
|
+
slot: "trigger",
|
|
27
|
+
className: triggerCva({
|
|
28
|
+
variant,
|
|
29
|
+
actionPosition,
|
|
30
|
+
disabled
|
|
31
|
+
}),
|
|
32
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
33
|
+
className: headingCva({}),
|
|
34
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
35
|
+
className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
|
|
36
|
+
children: [
|
|
37
|
+
Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
|
|
38
|
+
/* @__PURE__ */ jsx(Typography, {
|
|
39
|
+
size: "label-2",
|
|
40
|
+
variant: "default",
|
|
41
|
+
className: headingTitleCva({}),
|
|
42
|
+
children: heading
|
|
43
|
+
}),
|
|
44
|
+
subheading && /* @__PURE__ */ jsx(Typography, {
|
|
45
|
+
size: "label-3",
|
|
46
|
+
variant: "default",
|
|
47
|
+
className: headingSubtitleCva({}),
|
|
48
|
+
children: subheading
|
|
49
|
+
})
|
|
50
|
+
]
|
|
71
51
|
})
|
|
72
|
-
})
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
$[11] = headingSubtitleCva;
|
|
82
|
-
$[12] = headingTitleCva;
|
|
83
|
-
$[13] = iconCva;
|
|
84
|
-
$[14] = panelContentCva;
|
|
85
|
-
$[15] = panelCva;
|
|
86
|
-
$[16] = subheading;
|
|
87
|
-
$[17] = triggerCva;
|
|
88
|
-
$[18] = variant;
|
|
89
|
-
$[19] = t4;
|
|
90
|
-
} else t4 = $[19];
|
|
91
|
-
let t5;
|
|
92
|
-
if ($[20] !== disabled || $[21] !== id || $[22] !== t3 || $[23] !== t4) {
|
|
93
|
-
t5 = /* @__PURE__ */ jsx(Disclosure, {
|
|
94
|
-
id,
|
|
95
|
-
className: t3,
|
|
96
|
-
isDisabled: disabled,
|
|
97
|
-
children: t4
|
|
98
|
-
});
|
|
99
|
-
$[20] = disabled;
|
|
100
|
-
$[21] = id;
|
|
101
|
-
$[22] = t3;
|
|
102
|
-
$[23] = t4;
|
|
103
|
-
$[24] = t5;
|
|
104
|
-
} else t5 = $[24];
|
|
105
|
-
return t5;
|
|
52
|
+
}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
|
|
53
|
+
}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
|
|
54
|
+
className: panelCva({ isExpanded }),
|
|
55
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
56
|
+
className: panelContentCva({}),
|
|
57
|
+
children
|
|
58
|
+
})
|
|
59
|
+
})] })
|
|
60
|
+
});
|
|
106
61
|
};
|
|
107
62
|
//#endregion
|
|
108
63
|
export { AccordionItem };
|
|
@@ -2,78 +2,33 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
|
|
|
2
2
|
import { stepperDefinition } from "./stepper.cva.js";
|
|
3
3
|
import { StepperItem } from "./StepperItem.js";
|
|
4
4
|
import { StepperSeparator } from "./StepperSeparator.js";
|
|
5
|
-
import { c } from "react/compiler-runtime";
|
|
6
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { Fragment as Fragment$1 } from "react";
|
|
8
7
|
//#region src/components/navigation/Stepper/Stepper.tsx
|
|
9
|
-
var Stepper = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const orientation = t1 === void 0 ? "horizontal" : t1;
|
|
13
|
-
const contentOrientation = t2 === void 0 ? "horizontal" : t2;
|
|
14
|
-
const stepperCva = UIOverrides.useCva("stepper.cva", stepperDefinition);
|
|
15
|
-
let t3;
|
|
16
|
-
if ($[0] !== className || $[1] !== orientation || $[2] !== stepperCva) {
|
|
17
|
-
t3 = stepperCva({
|
|
8
|
+
var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
|
|
9
|
+
return /* @__PURE__ */ jsx("div", {
|
|
10
|
+
className: UIOverrides.useCva("stepper.cva", stepperDefinition)({
|
|
18
11
|
orientation,
|
|
19
12
|
className
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
|
|
40
|
-
}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
|
|
41
|
-
orientation,
|
|
42
|
-
contentOrientation
|
|
43
|
-
})] }, step.id);
|
|
44
|
-
};
|
|
45
|
-
$[12] = contentOrientation;
|
|
46
|
-
$[13] = currentStep;
|
|
47
|
-
$[14] = iconsOnly;
|
|
48
|
-
$[15] = onStepClick;
|
|
49
|
-
$[16] = orientation;
|
|
50
|
-
$[17] = steps.length;
|
|
51
|
-
$[18] = titlesOnly;
|
|
52
|
-
$[19] = t5;
|
|
53
|
-
} else t5 = $[19];
|
|
54
|
-
t4 = steps.map(t5);
|
|
55
|
-
$[4] = contentOrientation;
|
|
56
|
-
$[5] = currentStep;
|
|
57
|
-
$[6] = iconsOnly;
|
|
58
|
-
$[7] = onStepClick;
|
|
59
|
-
$[8] = orientation;
|
|
60
|
-
$[9] = steps;
|
|
61
|
-
$[10] = titlesOnly;
|
|
62
|
-
$[11] = t4;
|
|
63
|
-
} else t4 = $[11];
|
|
64
|
-
let t5;
|
|
65
|
-
if ($[20] !== t3 || $[21] !== t4) {
|
|
66
|
-
t5 = /* @__PURE__ */ jsx("div", {
|
|
67
|
-
className: t3,
|
|
68
|
-
role: "group",
|
|
69
|
-
"aria-label": "Progress",
|
|
70
|
-
children: t4
|
|
71
|
-
});
|
|
72
|
-
$[20] = t3;
|
|
73
|
-
$[21] = t4;
|
|
74
|
-
$[22] = t5;
|
|
75
|
-
} else t5 = $[22];
|
|
76
|
-
return t5;
|
|
13
|
+
}),
|
|
14
|
+
role: "group",
|
|
15
|
+
"aria-label": "Progress",
|
|
16
|
+
children: steps.map((step, index) => {
|
|
17
|
+
const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
|
|
18
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
|
|
19
|
+
step,
|
|
20
|
+
stepNumber: index + 1,
|
|
21
|
+
status,
|
|
22
|
+
contentOrientation,
|
|
23
|
+
iconsOnly,
|
|
24
|
+
titlesOnly,
|
|
25
|
+
onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
|
|
26
|
+
}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
|
|
27
|
+
orientation,
|
|
28
|
+
contentOrientation
|
|
29
|
+
})] }, step.id);
|
|
30
|
+
})
|
|
31
|
+
});
|
|
77
32
|
};
|
|
78
33
|
//#endregion
|
|
79
34
|
export { Stepper };
|
|
@@ -2,7 +2,6 @@ import { Typography } from "../../text/Typography/Typography.js";
|
|
|
2
2
|
import { UIConfig } from "../../../config/uiConfig.context.js";
|
|
3
3
|
import { Button } from "../../buttons/Button/Button.js";
|
|
4
4
|
import { Modal } from "../Modal/Modal.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
|
//#region src/components/overlays/ActionModal/ActionModal.tsx
|
|
@@ -11,178 +10,45 @@ var textAlignClassMap = {
|
|
|
11
10
|
center: "text-center",
|
|
12
11
|
right: "text-right"
|
|
13
12
|
};
|
|
14
|
-
var ActionModal = (
|
|
15
|
-
const $ = c(52);
|
|
16
|
-
let description;
|
|
17
|
-
let descriptionClassName;
|
|
18
|
-
let descriptionTypography;
|
|
19
|
-
let heading;
|
|
20
|
-
let modalClassName;
|
|
21
|
-
let modalProps;
|
|
22
|
-
let primaryAction;
|
|
23
|
-
let secondaryAction;
|
|
24
|
-
let t1;
|
|
25
|
-
let t2;
|
|
26
|
-
let titleClassName;
|
|
27
|
-
let titleTypography;
|
|
28
|
-
if ($[0] !== t0) {
|
|
29
|
-
({heading, description, primaryAction, secondaryAction, buttonSize: t1, textAlign: t2, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps} = t0);
|
|
30
|
-
$[0] = t0;
|
|
31
|
-
$[1] = description;
|
|
32
|
-
$[2] = descriptionClassName;
|
|
33
|
-
$[3] = descriptionTypography;
|
|
34
|
-
$[4] = heading;
|
|
35
|
-
$[5] = modalClassName;
|
|
36
|
-
$[6] = modalProps;
|
|
37
|
-
$[7] = primaryAction;
|
|
38
|
-
$[8] = secondaryAction;
|
|
39
|
-
$[9] = t1;
|
|
40
|
-
$[10] = t2;
|
|
41
|
-
$[11] = titleClassName;
|
|
42
|
-
$[12] = titleTypography;
|
|
43
|
-
} else {
|
|
44
|
-
description = $[1];
|
|
45
|
-
descriptionClassName = $[2];
|
|
46
|
-
descriptionTypography = $[3];
|
|
47
|
-
heading = $[4];
|
|
48
|
-
modalClassName = $[5];
|
|
49
|
-
modalProps = $[6];
|
|
50
|
-
primaryAction = $[7];
|
|
51
|
-
secondaryAction = $[8];
|
|
52
|
-
t1 = $[9];
|
|
53
|
-
t2 = $[10];
|
|
54
|
-
titleClassName = $[11];
|
|
55
|
-
titleTypography = $[12];
|
|
56
|
-
}
|
|
57
|
-
const buttonSize = t1 === void 0 ? "m" : t1;
|
|
58
|
-
const textAlign = t2 === void 0 ? "left" : t2;
|
|
13
|
+
var ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
|
|
59
14
|
const ui = UIConfig.useConfig();
|
|
60
15
|
const textAlignClass = textAlignClassMap[textAlign];
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
$[14] = t3;
|
|
66
|
-
} else t3 = $[14];
|
|
67
|
-
const t4 = titleTypography ?? ui.actionModal.titleTypography;
|
|
68
|
-
let t5;
|
|
69
|
-
if ($[15] !== textAlignClass || $[16] !== titleClassName) {
|
|
70
|
-
t5 = clsx("text-text-default-1", textAlignClass, titleClassName);
|
|
71
|
-
$[15] = textAlignClass;
|
|
72
|
-
$[16] = titleClassName;
|
|
73
|
-
$[17] = t5;
|
|
74
|
-
} else t5 = $[17];
|
|
75
|
-
let t6;
|
|
76
|
-
if ($[18] !== heading || $[19] !== t4 || $[20] !== t5) {
|
|
77
|
-
t6 = /* @__PURE__ */ jsx(Typography, {
|
|
78
|
-
...t4,
|
|
79
|
-
as: "h2",
|
|
80
|
-
className: t5,
|
|
81
|
-
children: heading
|
|
82
|
-
});
|
|
83
|
-
$[18] = heading;
|
|
84
|
-
$[19] = t4;
|
|
85
|
-
$[20] = t5;
|
|
86
|
-
$[21] = t6;
|
|
87
|
-
} else t6 = $[21];
|
|
88
|
-
const t7 = descriptionTypography ?? ui.actionModal.descriptionTypography;
|
|
89
|
-
let t8;
|
|
90
|
-
if ($[22] !== descriptionClassName || $[23] !== textAlignClass) {
|
|
91
|
-
t8 = clsx("text-text-default-1", textAlignClass, descriptionClassName);
|
|
92
|
-
$[22] = descriptionClassName;
|
|
93
|
-
$[23] = textAlignClass;
|
|
94
|
-
$[24] = t8;
|
|
95
|
-
} else t8 = $[24];
|
|
96
|
-
let t9;
|
|
97
|
-
if ($[25] !== description || $[26] !== t7 || $[27] !== t8) {
|
|
98
|
-
t9 = /* @__PURE__ */ jsx(Typography, {
|
|
99
|
-
...t7,
|
|
100
|
-
className: t8,
|
|
101
|
-
children: description
|
|
102
|
-
});
|
|
103
|
-
$[25] = description;
|
|
104
|
-
$[26] = t7;
|
|
105
|
-
$[27] = t8;
|
|
106
|
-
$[28] = t9;
|
|
107
|
-
} else t9 = $[28];
|
|
108
|
-
let t10;
|
|
109
|
-
if ($[29] !== t6 || $[30] !== t9) {
|
|
110
|
-
t10 = /* @__PURE__ */ jsxs("div", {
|
|
16
|
+
return /* @__PURE__ */ jsxs(Modal, {
|
|
17
|
+
modalClassName: clsx("w-modal", modalClassName),
|
|
18
|
+
...modalProps,
|
|
19
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
111
20
|
className: "flex flex-col gap-modal-gap-text",
|
|
112
|
-
children: [
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
color: secondaryAction?.color ?? "secondary",
|
|
124
|
-
width: "fill",
|
|
125
|
-
onPress: secondaryAction?.onPress,
|
|
126
|
-
className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
|
|
127
|
-
children: secondaryAction?.label
|
|
128
|
-
});
|
|
129
|
-
$[32] = buttonSize;
|
|
130
|
-
$[33] = secondaryAction;
|
|
131
|
-
$[34] = t11;
|
|
132
|
-
} else t11 = $[34];
|
|
133
|
-
const t12 = primaryAction?.variant ?? "contained";
|
|
134
|
-
const t13 = primaryAction?.color ?? "primary";
|
|
135
|
-
const t14 = primaryAction.onPress;
|
|
136
|
-
const t15 = primaryAction?.className;
|
|
137
|
-
let t16;
|
|
138
|
-
if ($[35] !== t15) {
|
|
139
|
-
t16 = clsx("min-w-40 flex-1 shrink-0", t15);
|
|
140
|
-
$[35] = t15;
|
|
141
|
-
$[36] = t16;
|
|
142
|
-
} else t16 = $[36];
|
|
143
|
-
let t17;
|
|
144
|
-
if ($[37] !== buttonSize || $[38] !== primaryAction.label || $[39] !== primaryAction.onPress || $[40] !== t12 || $[41] !== t13 || $[42] !== t16) {
|
|
145
|
-
t17 = /* @__PURE__ */ jsx(Button, {
|
|
146
|
-
variant: t12,
|
|
147
|
-
size: buttonSize,
|
|
148
|
-
color: t13,
|
|
149
|
-
width: "fill",
|
|
150
|
-
onPress: t14,
|
|
151
|
-
className: t16,
|
|
152
|
-
children: primaryAction.label
|
|
153
|
-
});
|
|
154
|
-
$[37] = buttonSize;
|
|
155
|
-
$[38] = primaryAction.label;
|
|
156
|
-
$[39] = primaryAction.onPress;
|
|
157
|
-
$[40] = t12;
|
|
158
|
-
$[41] = t13;
|
|
159
|
-
$[42] = t16;
|
|
160
|
-
$[43] = t17;
|
|
161
|
-
} else t17 = $[43];
|
|
162
|
-
let t18;
|
|
163
|
-
if ($[44] !== t11 || $[45] !== t17) {
|
|
164
|
-
t18 = /* @__PURE__ */ jsxs("div", {
|
|
21
|
+
children: [/* @__PURE__ */ jsx(Typography, {
|
|
22
|
+
...titleTypography ?? ui.actionModal.titleTypography,
|
|
23
|
+
as: "h2",
|
|
24
|
+
className: clsx("text-text-default-1", textAlignClass, titleClassName),
|
|
25
|
+
children: heading
|
|
26
|
+
}), /* @__PURE__ */ jsx(Typography, {
|
|
27
|
+
...descriptionTypography ?? ui.actionModal.descriptionTypography,
|
|
28
|
+
className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
|
|
29
|
+
children: description
|
|
30
|
+
})]
|
|
31
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
165
32
|
className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
|
|
166
|
-
children: [
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
return t19;
|
|
33
|
+
children: [secondaryAction && /* @__PURE__ */ jsx(Button, {
|
|
34
|
+
variant: secondaryAction?.variant ?? "contained",
|
|
35
|
+
size: buttonSize,
|
|
36
|
+
color: secondaryAction?.color ?? "secondary",
|
|
37
|
+
width: "fill",
|
|
38
|
+
onPress: secondaryAction?.onPress,
|
|
39
|
+
className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
|
|
40
|
+
children: secondaryAction?.label
|
|
41
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
42
|
+
variant: primaryAction?.variant ?? "contained",
|
|
43
|
+
size: buttonSize,
|
|
44
|
+
color: primaryAction?.color ?? "primary",
|
|
45
|
+
width: "fill",
|
|
46
|
+
onPress: primaryAction.onPress,
|
|
47
|
+
className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
|
|
48
|
+
children: primaryAction.label
|
|
49
|
+
})]
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
186
52
|
};
|
|
187
53
|
//#endregion
|
|
188
54
|
export { ActionModal };
|