@team-monolith/cds 0.14.1 → 0.15.1
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.
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
2
|
+
import { PolymorphicProps } from "@mui/base";
|
|
3
|
+
export interface AlertDialogOwnProps<RootComponentType extends React.ElementType> {
|
|
3
4
|
className?: string;
|
|
4
|
-
component?:
|
|
5
|
+
component?: RootComponentType;
|
|
5
6
|
/** `true` 값일때 모달이 노출됩니다. */
|
|
6
7
|
open: boolean;
|
|
7
8
|
/** 모달이 닫힐 때 호출되는 callback */
|
|
@@ -11,4 +12,11 @@ export interface AlertDialogProps {
|
|
|
11
12
|
/** 모달 좌측에 표기될 아이콘 */
|
|
12
13
|
icon?: React.ReactNode;
|
|
13
14
|
}
|
|
14
|
-
export
|
|
15
|
+
export type AlertDialogProps<RootComponentType extends React.ElementType = AlertDialogTypeMap["defaultComponent"]> = PolymorphicProps<AlertDialogTypeMap<RootComponentType>, RootComponentType>;
|
|
16
|
+
export interface AlertDialogTypeMap<RootComponentType extends React.ElementType = "div"> {
|
|
17
|
+
props: AlertDialogOwnProps<RootComponentType>;
|
|
18
|
+
defaultComponent: RootComponentType;
|
|
19
|
+
}
|
|
20
|
+
type AlertDialogComponent = <RootComponentType extends React.ElementType = "div">(props: AlertDialogProps<RootComponentType>) => React.ReactElement | null;
|
|
21
|
+
export declare const AlertDialog: AlertDialogComponent;
|
|
22
|
+
export {};
|
|
@@ -33,7 +33,7 @@ import shadows from "../../foundation/shadows";
|
|
|
33
33
|
import styled from "@emotion/styled";
|
|
34
34
|
import { MOBILE } from "../../foundation/breakpoints";
|
|
35
35
|
import AlertDialogContext from "./AlertDialogContext";
|
|
36
|
-
export var AlertDialog = React.forwardRef(function (props, ref) {
|
|
36
|
+
export var AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
|
|
37
37
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
|
|
38
38
|
var theme = useTheme();
|
|
39
39
|
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "], ["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "])), theme.color.background.neutralBase, shadows.shadow04, icon
|
|
@@ -52,7 +52,7 @@ var Banner = React.forwardRef(function (props, ref) {
|
|
|
52
52
|
COLOR_TO_STYLE(theme, color),
|
|
53
53
|
fullWidth
|
|
54
54
|
? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 12px;\n width: fit-content;\n "], ["\n border-radius: 12px;\n width: fit-content;\n "]))),
|
|
55
|
-
] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { children: content })] }), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n > button,\n > button:hover {\n color: currentColor;\n }\n "], ["\n > button,\n > button:hover {\n color: currentColor;\n }\n "]))), color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
|
|
55
|
+
] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { children: content })] }), buttonLabel && (_jsx(BannerButton, __assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n > button,\n > button:hover {\n color: currentColor;\n }\n "], ["\n > button,\n > button:hover {\n color: currentColor;\n }\n "]))), color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
|
|
56
56
|
});
|
|
57
57
|
var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"], ["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"])));
|
|
58
58
|
var HeadlineDiv = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-weight: 700;\n"], ["\n font-weight: 700;\n"])));
|
|
@@ -55,7 +55,7 @@ var SIZE_TO_LABEL_STYLE = {
|
|
|
55
55
|
*/
|
|
56
56
|
var SquareButton = React.forwardRef(function (props, ref) {
|
|
57
57
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, disabled = props.disabled, color = props.color, size = props.size, icon = props.icon, label = props.label, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick"]);
|
|
58
|
-
return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
|
|
58
|
+
return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
|
|
59
59
|
});
|
|
60
60
|
var Button = styled.button(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n border-radius: 8px;\n cursor: pointer;\n &:disabled {\n cursor: default;\n }\n ", "\n ", "\n ", "\n"], ["\n border-radius: 8px;\n cursor: pointer;\n &:disabled {\n cursor: default;\n }\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
61
61
|
var theme = _a.theme, color = _a.color;
|