smartsell-ui-kit 0.0.6 → 0.1.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.
- package/LICENSE +16 -15
- package/README.md +170 -84
- package/dist/img/index.cjs +373 -0
- package/dist/img/index.cjs.map +1 -0
- package/dist/img/index.d.cts +170 -0
- package/dist/img/index.d.ts +170 -0
- package/dist/img/index.js +328 -0
- package/dist/img/index.js.map +1 -0
- package/dist/index.cjs +4608 -1201
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +306 -25
- package/dist/index.d.ts +306 -25
- package/dist/index.js +4952 -1094
- package/dist/index.js.map +1 -1
- package/dist/types.cjs +19 -0
- package/dist/types.cjs.map +1 -0
- package/dist/types.d.cts +4 -0
- package/dist/types.d.ts +4 -0
- package/dist/types.js +1 -0
- package/package.json +30 -19
- package/dist/chunk-UIFTQDYM.js +0 -460
- package/dist/chunk-UIFTQDYM.js.map +0 -1
- package/dist/modal-CS9SuYSC.d.cts +0 -97
- package/dist/modal-CS9SuYSC.d.ts +0 -97
- package/dist/modal.cjs +0 -486
- package/dist/modal.cjs.map +0 -1
- package/dist/modal.d.cts +0 -4
- package/dist/modal.d.ts +0 -4
- package/dist/modal.js +0 -7
- /package/dist/{modal.js.map → types.js.map} +0 -0
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { CSSProperties, ReactNode } from 'react';
|
|
3
|
-
import { SalesTheme, SmartSellSDK } from 'smartsell-sales-sdk';
|
|
4
|
-
|
|
5
|
-
interface UiKitThemeTokens {
|
|
6
|
-
theme: SalesTheme;
|
|
7
|
-
borderSoft: string;
|
|
8
|
-
borderStrong: string;
|
|
9
|
-
surfaceMuted: string;
|
|
10
|
-
surfaceRaised: string;
|
|
11
|
-
overlay: string;
|
|
12
|
-
focusRing: string;
|
|
13
|
-
mutedText: string;
|
|
14
|
-
}
|
|
15
|
-
declare function useUiKitTheme(sdk: SmartSellSDK): UiKitThemeTokens;
|
|
16
|
-
|
|
17
|
-
type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
|
|
18
|
-
type ModalThemeColors = {
|
|
19
|
-
background: string;
|
|
20
|
-
surface: string;
|
|
21
|
-
onSurface: string;
|
|
22
|
-
onBackground: string;
|
|
23
|
-
primary: string;
|
|
24
|
-
onPrimary: string;
|
|
25
|
-
secondary: string;
|
|
26
|
-
onSecondary: string;
|
|
27
|
-
negative: string;
|
|
28
|
-
warning: string;
|
|
29
|
-
};
|
|
30
|
-
interface ModalTheme {
|
|
31
|
-
colors?: Partial<ModalThemeColors>;
|
|
32
|
-
}
|
|
33
|
-
type ModalThemeSource = ModalTheme | UiKitThemeTokens;
|
|
34
|
-
interface ModalAction {
|
|
35
|
-
label: ReactNode;
|
|
36
|
-
onClick: () => void;
|
|
37
|
-
appearance?: ModalActionAppearance;
|
|
38
|
-
style?: CSSProperties;
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
hidden?: boolean;
|
|
41
|
-
}
|
|
42
|
-
interface BaseModalProps {
|
|
43
|
-
children?: ReactNode;
|
|
44
|
-
theme?: ModalThemeSource;
|
|
45
|
-
}
|
|
46
|
-
interface ModalProps extends BaseModalProps {
|
|
47
|
-
isOpen: boolean;
|
|
48
|
-
onClose: () => void;
|
|
49
|
-
title?: ReactNode;
|
|
50
|
-
description?: ReactNode;
|
|
51
|
-
headerContent?: ReactNode;
|
|
52
|
-
footer?: ReactNode;
|
|
53
|
-
confirmAction?: ModalAction;
|
|
54
|
-
cancelAction?: ModalAction;
|
|
55
|
-
closeAction?: ModalAction;
|
|
56
|
-
extraActions?: ModalAction[];
|
|
57
|
-
maxWidth?: number | string;
|
|
58
|
-
closeOnBackdrop?: boolean;
|
|
59
|
-
closeOnEscape?: boolean;
|
|
60
|
-
hideCloseButton?: boolean;
|
|
61
|
-
hideExpandButton?: boolean;
|
|
62
|
-
disableDismiss?: boolean;
|
|
63
|
-
maximized?: boolean;
|
|
64
|
-
contentStyle?: CSSProperties;
|
|
65
|
-
bodyStyle?: CSSProperties;
|
|
66
|
-
isBusy?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface LegacyModalAction {
|
|
69
|
-
name: string;
|
|
70
|
-
onClick: () => void;
|
|
71
|
-
type?: ModalActionAppearance;
|
|
72
|
-
style?: CSSProperties;
|
|
73
|
-
disable?: boolean;
|
|
74
|
-
}
|
|
75
|
-
interface LegacyModalCompatProps extends BaseModalProps {
|
|
76
|
-
title: ReactNode;
|
|
77
|
-
showModal: boolean;
|
|
78
|
-
closeModal: () => void;
|
|
79
|
-
action?: () => void;
|
|
80
|
-
actionNameBtn?: string | undefined;
|
|
81
|
-
hideActionButton?: boolean;
|
|
82
|
-
cancelButton?: () => void;
|
|
83
|
-
disableActionBtn?: boolean;
|
|
84
|
-
isLoading?: boolean;
|
|
85
|
-
onlyCloseButton?: boolean;
|
|
86
|
-
hideCloseIcon?: boolean;
|
|
87
|
-
style?: CSSProperties;
|
|
88
|
-
bodyStyle?: CSSProperties;
|
|
89
|
-
additionalActions?: LegacyModalAction[];
|
|
90
|
-
maximized?: boolean;
|
|
91
|
-
}
|
|
92
|
-
type LegacyModalProps = LegacyModalCompatProps;
|
|
93
|
-
type StandardModalProps = ModalProps;
|
|
94
|
-
type ModalInputProps = ModalProps | LegacyModalCompatProps;
|
|
95
|
-
declare function Modal(props: ModalInputProps): react_jsx_runtime.JSX.Element;
|
|
96
|
-
|
|
97
|
-
export { type LegacyModalAction as L, Modal as M, type StandardModalProps as S, type UiKitThemeTokens as U, type LegacyModalCompatProps as a, type LegacyModalProps as b, type ModalAction as c, type ModalProps as d, type ModalTheme as e, type ModalThemeSource as f, useUiKitTheme as u };
|
package/dist/modal-CS9SuYSC.d.ts
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { CSSProperties, ReactNode } from 'react';
|
|
3
|
-
import { SalesTheme, SmartSellSDK } from 'smartsell-sales-sdk';
|
|
4
|
-
|
|
5
|
-
interface UiKitThemeTokens {
|
|
6
|
-
theme: SalesTheme;
|
|
7
|
-
borderSoft: string;
|
|
8
|
-
borderStrong: string;
|
|
9
|
-
surfaceMuted: string;
|
|
10
|
-
surfaceRaised: string;
|
|
11
|
-
overlay: string;
|
|
12
|
-
focusRing: string;
|
|
13
|
-
mutedText: string;
|
|
14
|
-
}
|
|
15
|
-
declare function useUiKitTheme(sdk: SmartSellSDK): UiKitThemeTokens;
|
|
16
|
-
|
|
17
|
-
type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
|
|
18
|
-
type ModalThemeColors = {
|
|
19
|
-
background: string;
|
|
20
|
-
surface: string;
|
|
21
|
-
onSurface: string;
|
|
22
|
-
onBackground: string;
|
|
23
|
-
primary: string;
|
|
24
|
-
onPrimary: string;
|
|
25
|
-
secondary: string;
|
|
26
|
-
onSecondary: string;
|
|
27
|
-
negative: string;
|
|
28
|
-
warning: string;
|
|
29
|
-
};
|
|
30
|
-
interface ModalTheme {
|
|
31
|
-
colors?: Partial<ModalThemeColors>;
|
|
32
|
-
}
|
|
33
|
-
type ModalThemeSource = ModalTheme | UiKitThemeTokens;
|
|
34
|
-
interface ModalAction {
|
|
35
|
-
label: ReactNode;
|
|
36
|
-
onClick: () => void;
|
|
37
|
-
appearance?: ModalActionAppearance;
|
|
38
|
-
style?: CSSProperties;
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
hidden?: boolean;
|
|
41
|
-
}
|
|
42
|
-
interface BaseModalProps {
|
|
43
|
-
children?: ReactNode;
|
|
44
|
-
theme?: ModalThemeSource;
|
|
45
|
-
}
|
|
46
|
-
interface ModalProps extends BaseModalProps {
|
|
47
|
-
isOpen: boolean;
|
|
48
|
-
onClose: () => void;
|
|
49
|
-
title?: ReactNode;
|
|
50
|
-
description?: ReactNode;
|
|
51
|
-
headerContent?: ReactNode;
|
|
52
|
-
footer?: ReactNode;
|
|
53
|
-
confirmAction?: ModalAction;
|
|
54
|
-
cancelAction?: ModalAction;
|
|
55
|
-
closeAction?: ModalAction;
|
|
56
|
-
extraActions?: ModalAction[];
|
|
57
|
-
maxWidth?: number | string;
|
|
58
|
-
closeOnBackdrop?: boolean;
|
|
59
|
-
closeOnEscape?: boolean;
|
|
60
|
-
hideCloseButton?: boolean;
|
|
61
|
-
hideExpandButton?: boolean;
|
|
62
|
-
disableDismiss?: boolean;
|
|
63
|
-
maximized?: boolean;
|
|
64
|
-
contentStyle?: CSSProperties;
|
|
65
|
-
bodyStyle?: CSSProperties;
|
|
66
|
-
isBusy?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface LegacyModalAction {
|
|
69
|
-
name: string;
|
|
70
|
-
onClick: () => void;
|
|
71
|
-
type?: ModalActionAppearance;
|
|
72
|
-
style?: CSSProperties;
|
|
73
|
-
disable?: boolean;
|
|
74
|
-
}
|
|
75
|
-
interface LegacyModalCompatProps extends BaseModalProps {
|
|
76
|
-
title: ReactNode;
|
|
77
|
-
showModal: boolean;
|
|
78
|
-
closeModal: () => void;
|
|
79
|
-
action?: () => void;
|
|
80
|
-
actionNameBtn?: string | undefined;
|
|
81
|
-
hideActionButton?: boolean;
|
|
82
|
-
cancelButton?: () => void;
|
|
83
|
-
disableActionBtn?: boolean;
|
|
84
|
-
isLoading?: boolean;
|
|
85
|
-
onlyCloseButton?: boolean;
|
|
86
|
-
hideCloseIcon?: boolean;
|
|
87
|
-
style?: CSSProperties;
|
|
88
|
-
bodyStyle?: CSSProperties;
|
|
89
|
-
additionalActions?: LegacyModalAction[];
|
|
90
|
-
maximized?: boolean;
|
|
91
|
-
}
|
|
92
|
-
type LegacyModalProps = LegacyModalCompatProps;
|
|
93
|
-
type StandardModalProps = ModalProps;
|
|
94
|
-
type ModalInputProps = ModalProps | LegacyModalCompatProps;
|
|
95
|
-
declare function Modal(props: ModalInputProps): react_jsx_runtime.JSX.Element;
|
|
96
|
-
|
|
97
|
-
export { type LegacyModalAction as L, Modal as M, type StandardModalProps as S, type UiKitThemeTokens as U, type LegacyModalCompatProps as a, type LegacyModalProps as b, type ModalAction as c, type ModalProps as d, type ModalTheme as e, type ModalThemeSource as f, useUiKitTheme as u };
|
package/dist/modal.cjs
DELETED
|
@@ -1,486 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/modal.ts
|
|
21
|
-
var modal_exports = {};
|
|
22
|
-
__export(modal_exports, {
|
|
23
|
-
Modal: () => Modal
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(modal_exports);
|
|
26
|
-
|
|
27
|
-
// src/components/Modal.tsx
|
|
28
|
-
var import_react = require("react");
|
|
29
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
-
var defaultThemeColors = {
|
|
31
|
-
background: "#f8fafc",
|
|
32
|
-
surface: "#ffffff",
|
|
33
|
-
onSurface: "#0f172a",
|
|
34
|
-
onBackground: "#0f172a",
|
|
35
|
-
primary: "#0f766e",
|
|
36
|
-
onPrimary: "#ffffff",
|
|
37
|
-
secondary: "#1d4ed8",
|
|
38
|
-
onSecondary: "#ffffff",
|
|
39
|
-
negative: "#dc2626",
|
|
40
|
-
warning: "#d97706"
|
|
41
|
-
};
|
|
42
|
-
var withAlpha = (hex, alpha) => {
|
|
43
|
-
const normalized = hex.replace("#", "").trim();
|
|
44
|
-
const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
|
|
45
|
-
const red = Number.parseInt(value.slice(0, 2), 16);
|
|
46
|
-
const green = Number.parseInt(value.slice(2, 4), 16);
|
|
47
|
-
const blue = Number.parseInt(value.slice(4, 6), 16);
|
|
48
|
-
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
49
|
-
};
|
|
50
|
-
var isUiKitThemeTokens = (theme) => {
|
|
51
|
-
return Boolean(theme && typeof theme === "object" && "theme" in theme);
|
|
52
|
-
};
|
|
53
|
-
var resolveTheme = (theme) => {
|
|
54
|
-
var _a;
|
|
55
|
-
const colorOverrides = isUiKitThemeTokens(theme) ? theme.theme.colors : (_a = theme == null ? void 0 : theme.colors) != null ? _a : {};
|
|
56
|
-
const colors = {
|
|
57
|
-
...defaultThemeColors,
|
|
58
|
-
...colorOverrides
|
|
59
|
-
};
|
|
60
|
-
return {
|
|
61
|
-
colors,
|
|
62
|
-
borderSoft: isUiKitThemeTokens(theme) ? theme.borderSoft : withAlpha(colors.onSurface, 0.1),
|
|
63
|
-
borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha(colors.onSurface, 0.16),
|
|
64
|
-
surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha(colors.onSurface, 0.04),
|
|
65
|
-
surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha(colors.surface, 0.94),
|
|
66
|
-
overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha("#030712", 0.62),
|
|
67
|
-
mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha(colors.onSurface, 0.72)
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
var normalizeWidth = (maxWidth) => {
|
|
71
|
-
if (typeof maxWidth === "number") {
|
|
72
|
-
return `${maxWidth}px`;
|
|
73
|
-
}
|
|
74
|
-
return maxWidth != null ? maxWidth : "720px";
|
|
75
|
-
};
|
|
76
|
-
var isLikelyMobileViewport = () => {
|
|
77
|
-
if (typeof window === "undefined" || typeof navigator === "undefined") {
|
|
78
|
-
return false;
|
|
79
|
-
}
|
|
80
|
-
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
|
81
|
-
navigator.userAgent
|
|
82
|
-
);
|
|
83
|
-
};
|
|
84
|
-
var createTitleId = (title) => {
|
|
85
|
-
if (typeof title === "string" || typeof title === "number") {
|
|
86
|
-
const normalized = String(title).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
|
|
87
|
-
return `smartsell-modal-${normalized || "dialog"}`;
|
|
88
|
-
}
|
|
89
|
-
return "smartsell-modal-dialog";
|
|
90
|
-
};
|
|
91
|
-
var isLegacyModalProps = (props) => {
|
|
92
|
-
return "showModal" in props;
|
|
93
|
-
};
|
|
94
|
-
var normalizeLegacyAction = (action, fallbackDisabled = false) => {
|
|
95
|
-
var _a, _b, _c;
|
|
96
|
-
return {
|
|
97
|
-
label: action.name,
|
|
98
|
-
onClick: action.onClick,
|
|
99
|
-
appearance: (_a = action.type) != null ? _a : "contained",
|
|
100
|
-
style: (_b = action.style) != null ? _b : { maxWidth: "150px" },
|
|
101
|
-
disabled: (_c = action.disable) != null ? _c : fallbackDisabled
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
var normalizeModalProps = (props) => {
|
|
105
|
-
var _a, _b;
|
|
106
|
-
if (!isLegacyModalProps(props)) {
|
|
107
|
-
return props;
|
|
108
|
-
}
|
|
109
|
-
const isBusy = Boolean(props.isLoading);
|
|
110
|
-
const disableAction = Boolean(props.disableActionBtn || props.isLoading);
|
|
111
|
-
return {
|
|
112
|
-
isOpen: props.showModal,
|
|
113
|
-
onClose: props.closeModal,
|
|
114
|
-
title: props.title,
|
|
115
|
-
children: props.children,
|
|
116
|
-
theme: props.theme,
|
|
117
|
-
maximized: props.maximized,
|
|
118
|
-
contentStyle: props.style,
|
|
119
|
-
bodyStyle: props.bodyStyle,
|
|
120
|
-
hideCloseButton: props.hideCloseIcon,
|
|
121
|
-
disableDismiss: isBusy,
|
|
122
|
-
closeOnBackdrop: false,
|
|
123
|
-
closeOnEscape: false,
|
|
124
|
-
isBusy,
|
|
125
|
-
closeAction: props.onlyCloseButton ? {
|
|
126
|
-
label: "Close",
|
|
127
|
-
onClick: props.closeModal,
|
|
128
|
-
appearance: "contained",
|
|
129
|
-
disabled: isBusy
|
|
130
|
-
} : void 0,
|
|
131
|
-
cancelAction: props.onlyCloseButton || !props.cancelButton ? void 0 : {
|
|
132
|
-
label: "Cancel",
|
|
133
|
-
onClick: props.cancelButton,
|
|
134
|
-
appearance: "text",
|
|
135
|
-
style: { maxWidth: "100px" }
|
|
136
|
-
},
|
|
137
|
-
confirmAction: props.onlyCloseButton || props.hideActionButton || !props.action ? void 0 : {
|
|
138
|
-
label: (_a = props.actionNameBtn) != null ? _a : "Save",
|
|
139
|
-
onClick: props.action,
|
|
140
|
-
appearance: "contained",
|
|
141
|
-
style: { maxWidth: "100px" },
|
|
142
|
-
disabled: disableAction
|
|
143
|
-
},
|
|
144
|
-
extraActions: props.onlyCloseButton ? void 0 : (_b = props.additionalActions) == null ? void 0 : _b.map((action) => normalizeLegacyAction(action, disableAction))
|
|
145
|
-
};
|
|
146
|
-
};
|
|
147
|
-
function ModalActionButton({
|
|
148
|
-
action,
|
|
149
|
-
theme
|
|
150
|
-
}) {
|
|
151
|
-
var _a, _b;
|
|
152
|
-
const { colors } = theme;
|
|
153
|
-
const {
|
|
154
|
-
label,
|
|
155
|
-
onClick,
|
|
156
|
-
appearance = "contained",
|
|
157
|
-
disabled = false,
|
|
158
|
-
style
|
|
159
|
-
} = action;
|
|
160
|
-
const buttonStyle = {
|
|
161
|
-
width: "100%",
|
|
162
|
-
display: "flex",
|
|
163
|
-
alignItems: "center",
|
|
164
|
-
justifyContent: "center",
|
|
165
|
-
borderRadius: "0.4rem",
|
|
166
|
-
padding: appearance === "link" ? 0 : "1.3rem",
|
|
167
|
-
boxSizing: "border-box",
|
|
168
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
169
|
-
fontWeight: 700,
|
|
170
|
-
fontSize: "1.3rem",
|
|
171
|
-
margin: 0,
|
|
172
|
-
textAlign: "center",
|
|
173
|
-
transition: "0.5s",
|
|
174
|
-
opacity: disabled ? 0.5 : 1,
|
|
175
|
-
filter: disabled ? "saturate(0)" : void 0
|
|
176
|
-
};
|
|
177
|
-
if (appearance === "text") {
|
|
178
|
-
buttonStyle.background = "none";
|
|
179
|
-
buttonStyle.border = "1px solid transparent";
|
|
180
|
-
buttonStyle.color = colors.primary;
|
|
181
|
-
buttonStyle.boxShadow = "none";
|
|
182
|
-
} else if (appearance === "link") {
|
|
183
|
-
buttonStyle.background = "none";
|
|
184
|
-
buttonStyle.border = "none";
|
|
185
|
-
buttonStyle.color = colors.primary;
|
|
186
|
-
buttonStyle.boxShadow = "none";
|
|
187
|
-
} else if (appearance === "outlined") {
|
|
188
|
-
buttonStyle.background = "none";
|
|
189
|
-
buttonStyle.border = `2px solid ${colors.primary}`;
|
|
190
|
-
buttonStyle.color = colors.primary;
|
|
191
|
-
buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.onSurface, 0.08)}`;
|
|
192
|
-
} else {
|
|
193
|
-
buttonStyle.background = colors.primary;
|
|
194
|
-
buttonStyle.border = "1px solid transparent";
|
|
195
|
-
buttonStyle.color = colors.onPrimary;
|
|
196
|
-
buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.primary, 0.22)}`;
|
|
197
|
-
}
|
|
198
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
199
|
-
"div",
|
|
200
|
-
{
|
|
201
|
-
style: {
|
|
202
|
-
width: (_a = style == null ? void 0 : style.width) != null ? _a : (style == null ? void 0 : style.maxWidth) ? "100%" : "max-content",
|
|
203
|
-
display: "flex",
|
|
204
|
-
alignItems: "center",
|
|
205
|
-
justifyContent: "center",
|
|
206
|
-
margin: "0 5px",
|
|
207
|
-
marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
|
|
208
|
-
...style
|
|
209
|
-
},
|
|
210
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
211
|
-
"button",
|
|
212
|
-
{
|
|
213
|
-
type: "button",
|
|
214
|
-
onClick: disabled ? void 0 : onClick,
|
|
215
|
-
disabled,
|
|
216
|
-
style: buttonStyle,
|
|
217
|
-
children: label
|
|
218
|
-
}
|
|
219
|
-
)
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
}
|
|
223
|
-
function UnifiedModal({
|
|
224
|
-
isOpen,
|
|
225
|
-
onClose,
|
|
226
|
-
children,
|
|
227
|
-
title,
|
|
228
|
-
description,
|
|
229
|
-
headerContent,
|
|
230
|
-
footer,
|
|
231
|
-
confirmAction,
|
|
232
|
-
cancelAction,
|
|
233
|
-
closeAction,
|
|
234
|
-
extraActions,
|
|
235
|
-
maxWidth,
|
|
236
|
-
closeOnBackdrop = true,
|
|
237
|
-
closeOnEscape = true,
|
|
238
|
-
hideCloseButton = false,
|
|
239
|
-
hideExpandButton = false,
|
|
240
|
-
disableDismiss = false,
|
|
241
|
-
maximized,
|
|
242
|
-
contentStyle,
|
|
243
|
-
bodyStyle,
|
|
244
|
-
isBusy = false,
|
|
245
|
-
theme
|
|
246
|
-
}) {
|
|
247
|
-
var _a, _b;
|
|
248
|
-
const modalTheme = (0, import_react.useMemo)(() => resolveTheme(theme), [theme]);
|
|
249
|
-
const [isMaximized, setIsMaximized] = (0, import_react.useState)(maximized != null ? maximized : false);
|
|
250
|
-
const titleId = (0, import_react.useMemo)(() => createTitleId(title), [title]);
|
|
251
|
-
(0, import_react.useEffect)(() => {
|
|
252
|
-
if (typeof maximized === "boolean") {
|
|
253
|
-
setIsMaximized(maximized);
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
if (isLikelyMobileViewport()) {
|
|
257
|
-
setIsMaximized(true);
|
|
258
|
-
}
|
|
259
|
-
}, [maximized]);
|
|
260
|
-
(0, import_react.useEffect)(() => {
|
|
261
|
-
if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
|
|
262
|
-
return;
|
|
263
|
-
}
|
|
264
|
-
const previousOverflow = document.body.style.overflow;
|
|
265
|
-
document.body.style.overflow = "hidden";
|
|
266
|
-
const handleKeyDown = (event) => {
|
|
267
|
-
if (!disableDismiss && closeOnEscape && event.key === "Escape") {
|
|
268
|
-
onClose();
|
|
269
|
-
}
|
|
270
|
-
};
|
|
271
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
272
|
-
return () => {
|
|
273
|
-
document.body.style.overflow = previousOverflow;
|
|
274
|
-
window.removeEventListener("keydown", handleKeyDown);
|
|
275
|
-
};
|
|
276
|
-
}, [closeOnEscape, disableDismiss, isOpen, onClose]);
|
|
277
|
-
if (!isOpen) {
|
|
278
|
-
return null;
|
|
279
|
-
}
|
|
280
|
-
const resolvedHeader = headerContent != null ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
281
|
-
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
282
|
-
"h2",
|
|
283
|
-
{
|
|
284
|
-
id: titleId,
|
|
285
|
-
style: {
|
|
286
|
-
margin: 0,
|
|
287
|
-
color: modalTheme.colors.onSurface,
|
|
288
|
-
fontSize: 30,
|
|
289
|
-
fontWeight: 800,
|
|
290
|
-
lineHeight: 1.1
|
|
291
|
-
},
|
|
292
|
-
children: title
|
|
293
|
-
}
|
|
294
|
-
) : null,
|
|
295
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
296
|
-
"p",
|
|
297
|
-
{
|
|
298
|
-
style: {
|
|
299
|
-
margin: 0,
|
|
300
|
-
color: modalTheme.mutedText,
|
|
301
|
-
fontSize: 15,
|
|
302
|
-
lineHeight: 1.6
|
|
303
|
-
},
|
|
304
|
-
children: description
|
|
305
|
-
}
|
|
306
|
-
) : null
|
|
307
|
-
] });
|
|
308
|
-
let footerContent = footer;
|
|
309
|
-
if (footerContent === void 0) {
|
|
310
|
-
if (closeAction && !closeAction.hidden) {
|
|
311
|
-
footerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalActionButton, { action: closeAction, theme: modalTheme });
|
|
312
|
-
} else {
|
|
313
|
-
const resolvedActions = [
|
|
314
|
-
cancelAction ? { ...cancelAction, appearance: (_a = cancelAction.appearance) != null ? _a : "text" } : void 0,
|
|
315
|
-
...(extraActions != null ? extraActions : []).map((action) => {
|
|
316
|
-
var _a2;
|
|
317
|
-
return {
|
|
318
|
-
...action,
|
|
319
|
-
appearance: (_a2 = action.appearance) != null ? _a2 : "contained"
|
|
320
|
-
};
|
|
321
|
-
}),
|
|
322
|
-
confirmAction ? { ...confirmAction, appearance: (_b = confirmAction.appearance) != null ? _b : "contained" } : void 0
|
|
323
|
-
].reduce((items, action) => {
|
|
324
|
-
if (!action || action.hidden) {
|
|
325
|
-
return items;
|
|
326
|
-
}
|
|
327
|
-
items.push(action);
|
|
328
|
-
return items;
|
|
329
|
-
}, []);
|
|
330
|
-
footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
331
|
-
ModalActionButton,
|
|
332
|
-
{
|
|
333
|
-
action,
|
|
334
|
-
theme: modalTheme
|
|
335
|
-
},
|
|
336
|
-
`modal-action-${index}`
|
|
337
|
-
)) : void 0;
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
const shouldRenderFooter = footerContent !== void 0 && footerContent !== null && footerContent !== false;
|
|
341
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
342
|
-
"div",
|
|
343
|
-
{
|
|
344
|
-
"aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
|
|
345
|
-
"aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
|
|
346
|
-
"aria-modal": "true",
|
|
347
|
-
role: "dialog",
|
|
348
|
-
onMouseDown: (event) => {
|
|
349
|
-
if (!disableDismiss && closeOnBackdrop && event.target === event.currentTarget) {
|
|
350
|
-
onClose();
|
|
351
|
-
}
|
|
352
|
-
},
|
|
353
|
-
style: {
|
|
354
|
-
position: "fixed",
|
|
355
|
-
inset: 0,
|
|
356
|
-
zIndex: 70,
|
|
357
|
-
display: "flex",
|
|
358
|
-
alignItems: "center",
|
|
359
|
-
justifyContent: "center",
|
|
360
|
-
padding: isMaximized ? 0 : 16,
|
|
361
|
-
backgroundColor: modalTheme.overlay,
|
|
362
|
-
backdropFilter: "blur(8px)"
|
|
363
|
-
},
|
|
364
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
365
|
-
"div",
|
|
366
|
-
{
|
|
367
|
-
id: isBusy ? "ldg1" : void 0,
|
|
368
|
-
style: {
|
|
369
|
-
position: "relative",
|
|
370
|
-
display: "flex",
|
|
371
|
-
flexDirection: "column",
|
|
372
|
-
width: isMaximized ? "100vw" : "min(100%, 100%)",
|
|
373
|
-
maxWidth: isMaximized ? "100vw" : normalizeWidth(maxWidth),
|
|
374
|
-
height: isMaximized ? "100vh" : void 0,
|
|
375
|
-
maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
|
|
376
|
-
minWidth: isMaximized ? "100vw" : 300,
|
|
377
|
-
borderRadius: isMaximized ? 0 : 30,
|
|
378
|
-
border: `1px solid ${modalTheme.borderSoft}`,
|
|
379
|
-
background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
|
|
380
|
-
boxShadow: `0 34px 80px ${withAlpha("#020617", 0.28)}`,
|
|
381
|
-
color: modalTheme.colors.onSurface,
|
|
382
|
-
overflow: "hidden",
|
|
383
|
-
opacity: isBusy ? 0.5 : 1,
|
|
384
|
-
...contentStyle
|
|
385
|
-
},
|
|
386
|
-
children: [
|
|
387
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
388
|
-
"div",
|
|
389
|
-
{
|
|
390
|
-
style: {
|
|
391
|
-
display: "flex",
|
|
392
|
-
alignItems: "flex-start",
|
|
393
|
-
justifyContent: "space-between",
|
|
394
|
-
gap: 16,
|
|
395
|
-
padding: "24px 24px 16px",
|
|
396
|
-
borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
|
|
397
|
-
},
|
|
398
|
-
children: [
|
|
399
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: resolvedHeader }),
|
|
400
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
401
|
-
!hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
402
|
-
"button",
|
|
403
|
-
{
|
|
404
|
-
"aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
|
|
405
|
-
title: isMaximized ? "Minimize" : "Maximize",
|
|
406
|
-
type: "button",
|
|
407
|
-
onClick: () => setIsMaximized((current) => !current),
|
|
408
|
-
style: {
|
|
409
|
-
height: 42,
|
|
410
|
-
width: 42,
|
|
411
|
-
borderRadius: 999,
|
|
412
|
-
border: `1px solid ${modalTheme.borderSoft}`,
|
|
413
|
-
backgroundColor: "transparent",
|
|
414
|
-
color: modalTheme.colors.onSurface,
|
|
415
|
-
cursor: "pointer",
|
|
416
|
-
fontSize: 18,
|
|
417
|
-
fontWeight: 700
|
|
418
|
-
},
|
|
419
|
-
children: isMaximized ? "\u25A2" : "\u25A1"
|
|
420
|
-
}
|
|
421
|
-
) : null,
|
|
422
|
-
!hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
423
|
-
"button",
|
|
424
|
-
{
|
|
425
|
-
"aria-label": "Close modal",
|
|
426
|
-
type: "button",
|
|
427
|
-
onClick: disableDismiss ? void 0 : onClose,
|
|
428
|
-
style: {
|
|
429
|
-
height: 42,
|
|
430
|
-
width: 42,
|
|
431
|
-
borderRadius: 999,
|
|
432
|
-
border: `1px solid ${modalTheme.borderSoft}`,
|
|
433
|
-
backgroundColor: "transparent",
|
|
434
|
-
color: modalTheme.colors.onSurface,
|
|
435
|
-
cursor: disableDismiss ? "not-allowed" : "pointer",
|
|
436
|
-
fontSize: 20,
|
|
437
|
-
fontWeight: 700,
|
|
438
|
-
opacity: disableDismiss ? 0.5 : 1
|
|
439
|
-
},
|
|
440
|
-
children: "\xD7"
|
|
441
|
-
}
|
|
442
|
-
) : null
|
|
443
|
-
] })
|
|
444
|
-
]
|
|
445
|
-
}
|
|
446
|
-
),
|
|
447
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
448
|
-
"div",
|
|
449
|
-
{
|
|
450
|
-
style: {
|
|
451
|
-
flex: 1,
|
|
452
|
-
minHeight: 0,
|
|
453
|
-
overflow: "auto",
|
|
454
|
-
padding: 24,
|
|
455
|
-
...bodyStyle
|
|
456
|
-
},
|
|
457
|
-
children
|
|
458
|
-
}
|
|
459
|
-
),
|
|
460
|
-
shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
461
|
-
"div",
|
|
462
|
-
{
|
|
463
|
-
style: {
|
|
464
|
-
display: "flex",
|
|
465
|
-
justifyContent: "flex-end",
|
|
466
|
-
gap: 12,
|
|
467
|
-
padding: "16px 24px 24px",
|
|
468
|
-
borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
|
|
469
|
-
},
|
|
470
|
-
children: footerContent
|
|
471
|
-
}
|
|
472
|
-
) : null
|
|
473
|
-
]
|
|
474
|
-
}
|
|
475
|
-
)
|
|
476
|
-
}
|
|
477
|
-
);
|
|
478
|
-
}
|
|
479
|
-
function Modal(props) {
|
|
480
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnifiedModal, { ...normalizeModalProps(props) });
|
|
481
|
-
}
|
|
482
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
483
|
-
0 && (module.exports = {
|
|
484
|
-
Modal
|
|
485
|
-
});
|
|
486
|
-
//# sourceMappingURL=modal.cjs.map
|