@dust-tt/sparkle 0.2.245 → 0.2.246
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/dist/cjs/index.js +4 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Dialog.d.ts +6 -5
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +4 -2
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/stories/Dialog.stories.d.ts.map +1 -1
- package/dist/esm/stories/Dialog.stories.js +6 -1
- package/dist/esm/stories/Dialog.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Dialog.tsx +18 -10
- package/src/stories/Dialog.stories.tsx +14 -0
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export type ModalProps = {
|
|
3
|
-
|
|
3
|
+
alertDialog?: boolean;
|
|
4
|
+
backgroundType?: "confetti" | "snow" | "none";
|
|
5
|
+
cancelLabel?: string;
|
|
4
6
|
children: React.ReactNode;
|
|
5
7
|
disabled?: boolean;
|
|
6
8
|
isOpen: boolean;
|
|
9
|
+
isSaving?: boolean;
|
|
7
10
|
onCancel: () => void;
|
|
8
11
|
onValidate: () => void;
|
|
9
|
-
|
|
12
|
+
title: string;
|
|
10
13
|
validateLabel?: string;
|
|
11
14
|
validateVariant?: "primary" | "primaryWarning";
|
|
12
|
-
isSaving?: boolean;
|
|
13
|
-
backgroundType?: "confetti" | "snow" | "none";
|
|
14
15
|
};
|
|
15
|
-
export declare function Dialog({
|
|
16
|
+
export declare function Dialog({ alertDialog, backgroundType, cancelLabel, children, disabled, isOpen, isSaving, onCancel, onValidate, title, validateLabel, validateVariant, }: ModalProps): React.JSX.Element;
|
|
16
17
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,MAAM,MAAM,UAAU,GAAG;IACvB,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;CAChD,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,WAAmB,EACnB,cAAuB,EACvB,WAAsB,EACtB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,EACL,aAAoB,EACpB,eAA2B,GAC5B,EAAE,UAAU,qBAkFZ"}
|
|
@@ -5,10 +5,12 @@ import Spinner from "../components/Spinner";
|
|
|
5
5
|
import { classNames } from "../lib/utils";
|
|
6
6
|
import { Button } from "./Button";
|
|
7
7
|
export function Dialog(_a) {
|
|
8
|
-
var
|
|
8
|
+
var _b = _a.alertDialog, alertDialog = _b === void 0 ? false : _b, _c = _a.backgroundType, backgroundType = _c === void 0 ? "none" : _c, _d = _a.cancelLabel, cancelLabel = _d === void 0 ? "Cancel" : _d, children = _a.children, disabled = _a.disabled, isOpen = _a.isOpen, isSaving = _a.isSaving, onCancel = _a.onCancel, onValidate = _a.onValidate, title = _a.title, _e = _a.validateLabel, validateLabel = _e === void 0 ? "Ok" : _e, _f = _a.validateVariant, validateVariant = _f === void 0 ? "primary" : _f;
|
|
9
9
|
var referentRef = useRef(null);
|
|
10
10
|
return (React.createElement(Transition, { show: isOpen, as: Fragment, appear: true },
|
|
11
|
-
React.createElement(HeadlessDialog, { as: "div", className: "s-relative s-z-50",
|
|
11
|
+
React.createElement(HeadlessDialog, { as: "div", className: "s-relative s-z-50",
|
|
12
|
+
// If it's an alert dialog, we don't want to close it when clicking outside.
|
|
13
|
+
onClose: alertDialog ? function () { } : onCancel, role: alertDialog ? "alertdialog" : "dialog" },
|
|
12
14
|
React.createElement(Transition.Child, { as: Fragment, enter: "s-ease-out s-duration-150", enterFrom: "s-opacity-0", enterTo: "s-opacity-100", leave: "s-ease-in s-duration-150", leaveFrom: "s-opacity-100", leaveTo: "s-opacity-0" },
|
|
13
15
|
React.createElement("div", { className: "s-fixed s-inset-0 s-bg-structure-50/80 s-backdrop-blur-sm s-transition-opacity" })),
|
|
14
16
|
React.createElement("div", { className: "s-fixed s-inset-0 s-z-50" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,kBAAkB,MAAM,wCAAwC,CAAC;AACxE,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;CAGqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;CAGqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,yBA+EzB,CAAC"}
|
|
@@ -11,6 +11,7 @@ export var DialogExample = function () {
|
|
|
11
11
|
var _b = __read(useState(false), 2), isOpen2 = _b[0], setisOpen2 = _b[1];
|
|
12
12
|
var _c = __read(useState(false), 2), isOpen3 = _c[0], setisOpen3 = _c[1];
|
|
13
13
|
var _d = __read(useState(false), 2), isOpen4 = _d[0], setisOpen4 = _d[1];
|
|
14
|
+
var _e = __read(useState(false), 2), isOpen5 = _e[0], setisOpen5 = _e[1];
|
|
14
15
|
return (React.createElement("div", { className: "items-start s-flex s-flex-col s-gap-10" },
|
|
15
16
|
React.createElement("div", null,
|
|
16
17
|
React.createElement(Dialog, { isOpen: isOpen1, title: "Dialog title", onValidate: function () { return setisOpen1(false); }, onCancel: function () { return setisOpen1(false); } },
|
|
@@ -27,6 +28,10 @@ export var DialogExample = function () {
|
|
|
27
28
|
React.createElement("div", null,
|
|
28
29
|
React.createElement(Dialog, { disabled: true, isOpen: isOpen4, title: "Dialog title", onValidate: function () { return setisOpen4(false); }, onCancel: function () { return setisOpen4(false); } },
|
|
29
30
|
React.createElement("div", null, "I'm the modal content")),
|
|
30
|
-
React.createElement(Button, { label: "Dialog with disabled", onClick: function () { return setisOpen4(true); } }))
|
|
31
|
+
React.createElement(Button, { label: "Dialog with disabled", onClick: function () { return setisOpen4(true); } })),
|
|
32
|
+
React.createElement("div", null,
|
|
33
|
+
React.createElement(Dialog, { alertDialog: true, isOpen: isOpen5, title: "Alert Dialog title", onValidate: function () { return setisOpen5(false); }, onCancel: function () { return setisOpen5(false); } },
|
|
34
|
+
React.createElement("div", null, "I'm the modal content")),
|
|
35
|
+
React.createElement(Button, { label: "Alert dialog", onClick: function () { return setisOpen5(true); } }))));
|
|
31
36
|
};
|
|
32
37
|
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;CACY,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,37 +8,45 @@ import { classNames } from "@sparkle/lib/utils";
|
|
|
8
8
|
import { Button } from "./Button";
|
|
9
9
|
|
|
10
10
|
export type ModalProps = {
|
|
11
|
-
|
|
11
|
+
alertDialog?: boolean;
|
|
12
|
+
backgroundType?: "confetti" | "snow" | "none";
|
|
13
|
+
cancelLabel?: string;
|
|
12
14
|
children: React.ReactNode;
|
|
13
15
|
disabled?: boolean;
|
|
14
16
|
isOpen: boolean;
|
|
17
|
+
isSaving?: boolean;
|
|
15
18
|
onCancel: () => void;
|
|
16
19
|
onValidate: () => void;
|
|
17
|
-
|
|
20
|
+
title: string;
|
|
18
21
|
validateLabel?: string;
|
|
19
22
|
validateVariant?: "primary" | "primaryWarning";
|
|
20
|
-
isSaving?: boolean;
|
|
21
|
-
backgroundType?: "confetti" | "snow" | "none";
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
export function Dialog({
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
alertDialog = false,
|
|
27
|
+
backgroundType = "none",
|
|
28
|
+
cancelLabel = "Cancel",
|
|
27
29
|
children,
|
|
28
30
|
disabled,
|
|
31
|
+
isOpen,
|
|
32
|
+
isSaving,
|
|
29
33
|
onCancel,
|
|
30
34
|
onValidate,
|
|
31
|
-
|
|
35
|
+
title,
|
|
32
36
|
validateLabel = "Ok",
|
|
33
37
|
validateVariant = "primary",
|
|
34
|
-
isSaving,
|
|
35
|
-
backgroundType = "none",
|
|
36
38
|
}: ModalProps) {
|
|
37
39
|
const referentRef = useRef<HTMLDivElement>(null);
|
|
38
40
|
|
|
39
41
|
return (
|
|
40
42
|
<Transition show={isOpen} as={Fragment} appear={true}>
|
|
41
|
-
<HeadlessDialog
|
|
43
|
+
<HeadlessDialog
|
|
44
|
+
as="div"
|
|
45
|
+
className="s-relative s-z-50"
|
|
46
|
+
// If it's an alert dialog, we don't want to close it when clicking outside.
|
|
47
|
+
onClose={alertDialog ? () => {} : onCancel}
|
|
48
|
+
role={alertDialog ? "alertdialog" : "dialog"}
|
|
49
|
+
>
|
|
42
50
|
<Transition.Child
|
|
43
51
|
as={Fragment}
|
|
44
52
|
enter="s-ease-out s-duration-150"
|
|
@@ -15,6 +15,8 @@ export const DialogExample = () => {
|
|
|
15
15
|
const [isOpen2, setisOpen2] = useState(false);
|
|
16
16
|
const [isOpen3, setisOpen3] = useState(false);
|
|
17
17
|
const [isOpen4, setisOpen4] = useState(false);
|
|
18
|
+
const [isOpen5, setisOpen5] = useState(false);
|
|
19
|
+
|
|
18
20
|
return (
|
|
19
21
|
<div className="items-start s-flex s-flex-col s-gap-10">
|
|
20
22
|
<div>
|
|
@@ -73,6 +75,18 @@ export const DialogExample = () => {
|
|
|
73
75
|
</Dialog>
|
|
74
76
|
<Button label="Dialog with disabled" onClick={() => setisOpen4(true)} />
|
|
75
77
|
</div>
|
|
78
|
+
<div>
|
|
79
|
+
<Dialog
|
|
80
|
+
alertDialog
|
|
81
|
+
isOpen={isOpen5}
|
|
82
|
+
title="Alert Dialog title"
|
|
83
|
+
onValidate={() => setisOpen5(false)}
|
|
84
|
+
onCancel={() => setisOpen5(false)}
|
|
85
|
+
>
|
|
86
|
+
<div>I'm the modal content</div>
|
|
87
|
+
</Dialog>
|
|
88
|
+
<Button label="Alert dialog" onClick={() => setisOpen5(true)} />
|
|
89
|
+
</div>
|
|
76
90
|
</div>
|
|
77
91
|
);
|
|
78
92
|
};
|