@wavv/ui 2.4.4-alpha.1 → 2.4.4-alpha.3
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.
|
@@ -15,8 +15,12 @@ type DialogProps = {
|
|
|
15
15
|
confirmText?: string;
|
|
16
16
|
/** The confirm button will be negative (red) */
|
|
17
17
|
negative?: boolean;
|
|
18
|
+
/** Disables the confirm button */
|
|
19
|
+
confirmDisabled?: boolean;
|
|
18
20
|
/** The function called when the confirm button is clicked */
|
|
19
21
|
onConfirm?: () => void;
|
|
22
|
+
/** The function called when the cancel button is clicked */
|
|
23
|
+
onCancel?: () => void;
|
|
20
24
|
/** Controls whether or not the Dialog is open */
|
|
21
25
|
visible: boolean;
|
|
22
26
|
/** The function called when the Dialog is closed */
|
|
@@ -46,5 +50,5 @@ type DialogProps = {
|
|
|
46
50
|
/** The `aria-label` of the dialog */
|
|
47
51
|
'aria-label'?: string;
|
|
48
52
|
} & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
|
|
49
|
-
declare const Dialog: ({ header, text, children, cancelText, confirmText, negative, onConfirm, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
declare const Dialog: ({ header, text, children, cancelText, confirmText, negative, confirmDisabled, onConfirm, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
50
54
|
export default Dialog;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
import { Dialog, Modal, ModalOverlay } from "react-aria-components";
|
|
3
|
+
import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
|
|
4
4
|
import Button from "./Button/index.js";
|
|
5
|
-
import { maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
|
|
5
|
+
import { body1, head3, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
|
|
6
6
|
import Icon from "./Icon/index.js";
|
|
7
7
|
import PortalScope from "./PortalScope.js";
|
|
8
|
-
const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmText = 'Okay', negative, onConfirm, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
|
|
8
|
+
const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmText = 'Okay', negative, confirmDisabled, onConfirm, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
|
|
9
9
|
const { 'aria-label': ariaLabel, ...rest } = props;
|
|
10
10
|
const handleOpenChange = (open)=>{
|
|
11
11
|
if (!open) onClose();
|
|
@@ -36,6 +36,7 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
|
|
|
36
36
|
...rest,
|
|
37
37
|
children: [
|
|
38
38
|
/*#__PURE__*/ jsxs(DialogHeader, {
|
|
39
|
+
slot: "title",
|
|
39
40
|
children: [
|
|
40
41
|
header,
|
|
41
42
|
closeIcon && /*#__PURE__*/ jsx(CloseInHeader, {
|
|
@@ -58,11 +59,12 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
|
|
|
58
59
|
children: [
|
|
59
60
|
/*#__PURE__*/ jsx(Button, {
|
|
60
61
|
secondary: true,
|
|
61
|
-
onClick: onClose,
|
|
62
|
+
onClick: onCancel || onClose,
|
|
62
63
|
children: cancelText
|
|
63
64
|
}),
|
|
64
65
|
/*#__PURE__*/ jsx(Button, {
|
|
65
66
|
negative: negative,
|
|
67
|
+
disabled: confirmDisabled,
|
|
66
68
|
onClick: onConfirm,
|
|
67
69
|
children: confirmText
|
|
68
70
|
})
|
|
@@ -78,26 +80,23 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
|
|
|
78
80
|
children: dialog
|
|
79
81
|
}) : dialog;
|
|
80
82
|
};
|
|
81
|
-
const DialogHeader = styled
|
|
83
|
+
const DialogHeader = styled(Heading)(({ theme })=>({
|
|
82
84
|
display: 'flex',
|
|
83
85
|
alignItems: 'center',
|
|
84
86
|
justifyContent: 'space-between',
|
|
85
87
|
color: theme.modal.color.header,
|
|
86
|
-
fontWeight: theme.font.weight.default,
|
|
87
|
-
fontSize: theme.font.size.xl,
|
|
88
88
|
margin: 0,
|
|
89
89
|
padding: 16,
|
|
90
|
-
borderBottom:
|
|
90
|
+
borderBottom: theme.defaultBorder,
|
|
91
91
|
position: 'relative',
|
|
92
92
|
width: '100%',
|
|
93
93
|
boxSizing: 'border-box'
|
|
94
|
-
}));
|
|
94
|
+
}), head3);
|
|
95
95
|
const DialogContent = styled.div(({ theme, hasFooter })=>({
|
|
96
96
|
color: theme.modal.color.body,
|
|
97
|
-
fontSize: theme.font.size.lg,
|
|
98
97
|
padding: hasFooter ? '16px 16px 8px' : 16,
|
|
99
98
|
boxSizing: 'border-box'
|
|
100
|
-
}));
|
|
99
|
+
}), body1);
|
|
101
100
|
const DialogFooter = styled.div({
|
|
102
101
|
display: 'flex',
|
|
103
102
|
alignItems: 'center',
|
|
@@ -6,3 +6,14 @@ export declare const minWidthHeightProps: ({ minWidth, minHeight }: MinWidthHeig
|
|
|
6
6
|
export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: Padding) => CSSObject;
|
|
7
7
|
export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => CSSObject;
|
|
8
8
|
export declare const positionProps: ({ position, top, bottom, right, left }: Position) => CSSObject;
|
|
9
|
+
export declare const head1: () => CSSObject;
|
|
10
|
+
export declare const head2: () => CSSObject;
|
|
11
|
+
export declare const head3: () => CSSObject;
|
|
12
|
+
export declare const body1: () => CSSObject;
|
|
13
|
+
export declare const body1Medium: () => CSSObject;
|
|
14
|
+
export declare const body2: () => CSSObject;
|
|
15
|
+
export declare const body2Medium: () => CSSObject;
|
|
16
|
+
export declare const body3: () => CSSObject;
|
|
17
|
+
export declare const body3Medium: () => CSSObject;
|
|
18
|
+
export declare const body4: () => CSSObject;
|
|
19
|
+
export declare const body4Medium: () => CSSObject;
|
|
@@ -31,4 +31,59 @@ const positionProps = ({ position, top, bottom, right, left })=>({
|
|
|
31
31
|
right,
|
|
32
32
|
left
|
|
33
33
|
});
|
|
34
|
-
|
|
34
|
+
const head1 = ()=>({
|
|
35
|
+
fontSize: 28,
|
|
36
|
+
fontWeight: 500,
|
|
37
|
+
lineHeight: '33px'
|
|
38
|
+
});
|
|
39
|
+
const head2 = ()=>({
|
|
40
|
+
fontSize: 20,
|
|
41
|
+
fontWeight: 500,
|
|
42
|
+
lineHeight: '24px'
|
|
43
|
+
});
|
|
44
|
+
const head3 = ()=>({
|
|
45
|
+
fontSize: 18,
|
|
46
|
+
fontWeight: 400,
|
|
47
|
+
lineHeight: '22px'
|
|
48
|
+
});
|
|
49
|
+
const body1 = ()=>({
|
|
50
|
+
fontSize: 16,
|
|
51
|
+
fontWeight: 400,
|
|
52
|
+
lineHeight: '19px'
|
|
53
|
+
});
|
|
54
|
+
const body1Medium = ()=>({
|
|
55
|
+
fontSize: 16,
|
|
56
|
+
fontWeight: 500,
|
|
57
|
+
lineHeight: '19px'
|
|
58
|
+
});
|
|
59
|
+
const body2 = ()=>({
|
|
60
|
+
fontSize: 14,
|
|
61
|
+
fontWeight: 400,
|
|
62
|
+
lineHeight: '17px'
|
|
63
|
+
});
|
|
64
|
+
const body2Medium = ()=>({
|
|
65
|
+
fontSize: 14,
|
|
66
|
+
fontWeight: 500,
|
|
67
|
+
lineHeight: '17px'
|
|
68
|
+
});
|
|
69
|
+
const body3 = ()=>({
|
|
70
|
+
fontSize: 12,
|
|
71
|
+
fontWeight: 400,
|
|
72
|
+
lineHeight: '15px'
|
|
73
|
+
});
|
|
74
|
+
const body3Medium = ()=>({
|
|
75
|
+
fontSize: 12,
|
|
76
|
+
fontWeight: 500,
|
|
77
|
+
lineHeight: '15px'
|
|
78
|
+
});
|
|
79
|
+
const body4 = ()=>({
|
|
80
|
+
fontSize: 10,
|
|
81
|
+
fontWeight: 400,
|
|
82
|
+
lineHeight: '12px'
|
|
83
|
+
});
|
|
84
|
+
const body4Medium = ()=>({
|
|
85
|
+
fontSize: 10,
|
|
86
|
+
fontWeight: 500,
|
|
87
|
+
lineHeight: '12px'
|
|
88
|
+
});
|
|
89
|
+
export { body1, body1Medium, body2, body2Medium, body3, body3Medium, body4, body4Medium, head1, head2, head3, marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps, positionProps, widthHeightProps };
|