@dust-tt/sparkle 0.2.246 → 0.2.248
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 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Dialog.d.ts +11 -5
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +5 -3
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/ElementDialog.d.ts +2 -2
- package/dist/esm/components/ElementDialog.d.ts.map +1 -1
- package/dist/esm/components/ElementDialog.js.map +1 -1
- package/dist/esm/stories/Dialog.stories.d.ts.map +1 -1
- package/dist/esm/stories/Dialog.stories.js +5 -5
- package/dist/esm/stories/Dialog.stories.js.map +1 -1
- package/dist/esm/stories/ElementDialog.stories.d.ts.map +1 -1
- package/dist/esm/stories/ElementDialog.stories.js +1 -1
- package/dist/esm/stories/ElementDialog.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Dialog.tsx +24 -16
- package/src/components/ElementDialog.tsx +2 -2
- package/src/stories/Dialog.stories.tsx +5 -2
- package/src/stories/ElementDialog.stories.tsx +1 -0
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export type
|
|
3
|
-
alertDialog?: boolean;
|
|
2
|
+
export type BaseDialogProps = {
|
|
4
3
|
backgroundType?: "confetti" | "snow" | "none";
|
|
5
|
-
cancelLabel?: string;
|
|
6
4
|
children: React.ReactNode;
|
|
7
5
|
disabled?: boolean;
|
|
8
6
|
isOpen: boolean;
|
|
9
7
|
isSaving?: boolean;
|
|
10
|
-
onCancel: () => void;
|
|
11
8
|
onValidate: () => void;
|
|
12
9
|
title: string;
|
|
13
10
|
validateLabel?: string;
|
|
14
11
|
validateVariant?: "primary" | "primaryWarning";
|
|
12
|
+
cancelLabel?: string;
|
|
13
|
+
};
|
|
14
|
+
export type DialogProps = BaseDialogProps & {
|
|
15
|
+
alertDialog?: false;
|
|
16
|
+
onCancel: () => void;
|
|
17
|
+
};
|
|
18
|
+
export type AlertDialogProps = BaseDialogProps & {
|
|
19
|
+
alertDialog: true;
|
|
20
|
+
onCancel?: () => void;
|
|
15
21
|
};
|
|
16
|
-
export declare function Dialog({
|
|
22
|
+
export declare function Dialog({ backgroundType, children, disabled, isOpen, isSaving, title, validateLabel, validateVariant, onValidate, ...props }: AlertDialogProps | DialogProps): React.JSX.Element;
|
|
17
23
|
//# 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,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,WAAW,EAAE,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,cAAuB,EACvB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAoB,EACpB,eAA2B,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,WAAW,qBAoFhC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
1
2
|
import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
|
|
2
3
|
import React, { Fragment, useRef } from "react";
|
|
3
4
|
import ConfettiBackground from "../components/ConfettiBackground";
|
|
@@ -5,12 +6,13 @@ import Spinner from "../components/Spinner";
|
|
|
5
6
|
import { classNames } from "../lib/utils";
|
|
6
7
|
import { Button } from "./Button";
|
|
7
8
|
export function Dialog(_a) {
|
|
8
|
-
var _b
|
|
9
|
+
var _b;
|
|
10
|
+
var _c = _a.backgroundType, backgroundType = _c === void 0 ? "none" : _c, children = _a.children, disabled = _a.disabled, isOpen = _a.isOpen, isSaving = _a.isSaving, title = _a.title, _d = _a.validateLabel, validateLabel = _d === void 0 ? "Ok" : _d, _e = _a.validateVariant, validateVariant = _e === void 0 ? "primary" : _e, onValidate = _a.onValidate, props = __rest(_a, ["backgroundType", "children", "disabled", "isOpen", "isSaving", "title", "validateLabel", "validateVariant", "onValidate"]);
|
|
9
11
|
var referentRef = useRef(null);
|
|
10
12
|
return (React.createElement(Transition, { show: isOpen, as: Fragment, appear: true },
|
|
11
13
|
React.createElement(HeadlessDialog, { as: "div", className: "s-relative s-z-50",
|
|
12
14
|
// 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" },
|
|
15
|
+
onClose: props.alertDialog ? function () { } : props.onCancel, role: props.alertDialog ? "alertdialog" : "dialog" },
|
|
14
16
|
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" },
|
|
15
17
|
React.createElement("div", { className: "s-fixed s-inset-0 s-bg-structure-50/80 s-backdrop-blur-sm s-transition-opacity" })),
|
|
16
18
|
React.createElement("div", { className: "s-fixed s-inset-0 s-z-50" },
|
|
@@ -22,7 +24,7 @@ export function Dialog(_a) {
|
|
|
22
24
|
React.createElement("div", { className: "s-flex s-w-full s-justify-end" },
|
|
23
25
|
React.createElement(Button.List, null,
|
|
24
26
|
!isSaving && (React.createElement(React.Fragment, null,
|
|
25
|
-
React.createElement(Button, { label: cancelLabel, variant: "tertiary", onClick: onCancel }),
|
|
27
|
+
props.onCancel && (React.createElement(Button, { label: (_b = props.cancelLabel) !== null && _b !== void 0 ? _b : "Cancel", variant: "tertiary", onClick: props.onCancel })),
|
|
26
28
|
React.createElement(Button, { disabled: disabled, label: validateLabel, variant: validateVariant, onClick: onValidate }))),
|
|
27
29
|
isSaving && React.createElement(Spinner, { variant: "color" }))),
|
|
28
30
|
backgroundType !== "none" && (React.createElement("div", { className: "s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0" },
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
type ElementDialogProps<T> = Omit<
|
|
2
|
+
import { DialogProps } from "./Dialog";
|
|
3
|
+
type ElementDialogProps<T> = Omit<DialogProps, "isOpen" | "onValidate" | "onCancel"> & {
|
|
4
4
|
openOnElement: T | null;
|
|
5
5
|
onValidate: (closeDialogFn: () => void) => void;
|
|
6
6
|
onCancel: (closeDialogFn: () => void) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ElementDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAU,
|
|
1
|
+
{"version":3,"file":"ElementDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ElementDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAC/B,WAAW,EACX,QAAQ,GAAG,YAAY,GAAG,UAAU,CACrC,GAAG;IACF,aAAa,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,aAAa,EACb,aAAa,EACb,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAiBvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementDialog.js","sourceRoot":"","sources":["../../../src/components/ElementDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ElementDialog.js","sourceRoot":"","sources":["../../../src/components/ElementDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAY/C,MAAM,UAAU,aAAa,CAAI,EAMT;IALtB,IAAA,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cALuB,4DAMhC,CADS;IAEF,IAAA,KAAA,OAAgD,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA9D,mBAAmB,QAAA,EAAE,sBAAsB,QAAmB,CAAC;IACtE,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,UAAU,CAAC;YACT,aAAa,EAAE,CAAC;YAChB,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,CACL,oBAAC,MAAM,aACL,MAAM,EAAE,aAAa,KAAK,IAAI,IAAI,CAAC,mBAAmB,EACtD,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,iBAAiB,CAAC,EAA3B,CAA2B,EAC3C,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,iBAAiB,CAAC,EAA7B,CAA6B,IAC3C,KAAK,EACT,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -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,yBAkFzB,CAAC"}
|
|
@@ -14,23 +14,23 @@ export var DialogExample = function () {
|
|
|
14
14
|
var _e = __read(useState(false), 2), isOpen5 = _e[0], setisOpen5 = _e[1];
|
|
15
15
|
return (React.createElement("div", { className: "items-start s-flex s-flex-col s-gap-10" },
|
|
16
16
|
React.createElement("div", null,
|
|
17
|
-
React.createElement(Dialog, { isOpen: isOpen1, title: "Dialog title", onValidate: function () { return setisOpen1(false); }, onCancel: function () { return setisOpen1(false); } },
|
|
17
|
+
React.createElement(Dialog, { isOpen: isOpen1, title: "Dialog title", cancelLabel: "Cancel", onValidate: function () { return setisOpen1(false); }, onCancel: function () { return setisOpen1(false); } },
|
|
18
18
|
React.createElement("div", null, "I'm the modal content")),
|
|
19
19
|
React.createElement(Button, { label: "Dialog with primary validate", onClick: function () { return setisOpen1(true); } })),
|
|
20
20
|
React.createElement("div", null,
|
|
21
|
-
React.createElement(Dialog, { isOpen: isOpen2, title: "Dialog title", onValidate: function () { return setisOpen2(false); }, onCancel: function () { return setisOpen2(false); }, validateVariant: "primaryWarning" },
|
|
21
|
+
React.createElement(Dialog, { isOpen: isOpen2, title: "Dialog title", cancelLabel: "Cancel", onValidate: function () { return setisOpen2(false); }, onCancel: function () { return setisOpen2(false); }, validateVariant: "primaryWarning" },
|
|
22
22
|
React.createElement("div", null, "I'm the modal content")),
|
|
23
23
|
React.createElement(Button, { label: "Dialog with warning validate", onClick: function () { return setisOpen2(true); } })),
|
|
24
24
|
React.createElement("div", null,
|
|
25
|
-
React.createElement(Dialog, { isOpen: isOpen3, title: "Dialog title", onValidate: function () { return setisOpen3(false); }, onCancel: function () { return setisOpen3(false); }, backgroundType: "snow" },
|
|
25
|
+
React.createElement(Dialog, { isOpen: isOpen3, title: "Dialog title", cancelLabel: "Cancel", onValidate: function () { return setisOpen3(false); }, onCancel: function () { return setisOpen3(false); }, backgroundType: "snow" },
|
|
26
26
|
React.createElement("div", null, "I'm the modal content")),
|
|
27
27
|
React.createElement(Button, { label: "Dialog with BACKGROUND", onClick: function () { return setisOpen3(true); } })),
|
|
28
28
|
React.createElement("div", null,
|
|
29
|
-
React.createElement(Dialog, { disabled: true, isOpen: isOpen4, title: "Dialog title", onValidate: function () { return setisOpen4(false); }, onCancel: function () { return setisOpen4(false); } },
|
|
29
|
+
React.createElement(Dialog, { disabled: true, isOpen: isOpen4, title: "Dialog title", cancelLabel: "Cancel", onValidate: function () { return setisOpen4(false); }, onCancel: function () { return setisOpen4(false); } },
|
|
30
30
|
React.createElement("div", null, "I'm the modal content")),
|
|
31
31
|
React.createElement(Button, { label: "Dialog with disabled", onClick: function () { return setisOpen4(true); } })),
|
|
32
32
|
React.createElement("div", null,
|
|
33
|
-
React.createElement(Dialog, { alertDialog: true, isOpen: isOpen5, title: "Alert Dialog title", onValidate: function () { return setisOpen5(false); }
|
|
33
|
+
React.createElement(Dialog, { alertDialog: true, isOpen: isOpen5, title: "Alert Dialog title", onValidate: function () { return setisOpen5(false); } },
|
|
34
34
|
React.createElement("div", null, "I'm the modal content")),
|
|
35
35
|
React.createElement(Button, { label: "Alert dialog", onClick: function () { return setisOpen5(true); } }))));
|
|
36
36
|
};
|
|
@@ -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;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACrD;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;gBAEjC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,eAAe,EAAC,gBAAgB;gBAEhC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,cAAc,EAAC,MAAM;gBAErB,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,QAAQ,QACR,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;gBAEjC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAAI,CACpE;QACN;YACE,oBAAC,MAAM,IACL,WAAW,
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementDialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ElementDialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,aAAa,EAAQ,MAAM,uBAAuB,CAAC;AAEpE,QAAA,MAAM,IAAI;;;CAG4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"ElementDialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ElementDialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,aAAa,EAAQ,MAAM,uBAAuB,CAAC;AAEpE,QAAA,MAAM,IAAI;;;CAG4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,oBAAoB,yBA4ChC,CAAC"}
|
|
@@ -12,7 +12,7 @@ export var ElementDialogExample = function () {
|
|
|
12
12
|
React.createElement(ElementDialog, { openOnElement: element, closeDialogFn: function () { return setElement(null); }, onCancel: function (closeDialogFn) {
|
|
13
13
|
console.log("canceled!");
|
|
14
14
|
closeDialogFn();
|
|
15
|
-
}, title: "Element Modal title", onValidate: function (closeDialogFn) {
|
|
15
|
+
}, cancelLabel: "Cancel", title: "Element Modal title", onValidate: function (closeDialogFn) {
|
|
16
16
|
console.log("validated!");
|
|
17
17
|
closeDialogFn();
|
|
18
18
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementDialog.stories.js","sourceRoot":"","sources":["../../../src/stories/ElementDialog.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEpE,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,aAAa;CACY,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAC5B,IAAA,KAAA,OAAwB,QAAQ,CAA0B,IAAI,CAAC,IAAA,EAA9D,OAAO,QAAA,EAAE,UAAU,QAA2C,CAAC;IACtE,OAAO,CACL,oBAAC,IAAI,CAAC,MAAM,IAAC,GAAG,EAAC,IAAI;QACnB,oBAAC,aAAa,IACZ,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EACrC,QAAQ,EAAE,UAAC,aAAa;gBACtB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;gBACzB,aAAa,EAAE,CAAC;YAClB,CAAC,EACD,KAAK,EAAC,qBAAqB,EAC3B,UAAU,EAAE,UAAC,aAAa;gBACxB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;gBAC1B,aAAa,EAAE,CAAC;YAClB,CAAC;YAED,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,6BAAK,SAAS,EAAC,gCAAgC,6BAEzC;gBACN,6BAAK,SAAS,EAAC,QAAQ;;oBACR,8BAAM,SAAS,EAAC,WAAW,IAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAQ,CAC3D,CACF,CACQ;QAChB,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,uBAAuB,iBAAiB;YACvD,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB;YACF,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB;YACF,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB,CACE,CACM,CACf,CAAC;AACJ,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ElementDialog.stories.js","sourceRoot":"","sources":["../../../src/stories/ElementDialog.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEpE,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,aAAa;CACY,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAC5B,IAAA,KAAA,OAAwB,QAAQ,CAA0B,IAAI,CAAC,IAAA,EAA9D,OAAO,QAAA,EAAE,UAAU,QAA2C,CAAC;IACtE,OAAO,CACL,oBAAC,IAAI,CAAC,MAAM,IAAC,GAAG,EAAC,IAAI;QACnB,oBAAC,aAAa,IACZ,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EACrC,QAAQ,EAAE,UAAC,aAAa;gBACtB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;gBACzB,aAAa,EAAE,CAAC;YAClB,CAAC,EACD,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAC,qBAAqB,EAC3B,UAAU,EAAE,UAAC,aAAa;gBACxB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;gBAC1B,aAAa,EAAE,CAAC;YAClB,CAAC;YAED,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,6BAAK,SAAS,EAAC,gCAAgC,6BAEzC;gBACN,6BAAK,SAAS,EAAC,QAAQ;;oBACR,8BAAM,SAAS,EAAC,WAAW,IAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAQ,CAC3D,CACF,CACQ;QAChB,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,uBAAuB,iBAAiB;YACvD,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB;YACF,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB;YACF,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAjC,CAAiC,EAChD,KAAK,EAAC,WAAW,GACjB,CACE,CACM,CACf,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -7,35 +7,41 @@ import { classNames } from "@sparkle/lib/utils";
|
|
|
7
7
|
|
|
8
8
|
import { Button } from "./Button";
|
|
9
9
|
|
|
10
|
-
export type
|
|
11
|
-
alertDialog?: boolean;
|
|
10
|
+
export type BaseDialogProps = {
|
|
12
11
|
backgroundType?: "confetti" | "snow" | "none";
|
|
13
|
-
cancelLabel?: string;
|
|
14
12
|
children: React.ReactNode;
|
|
15
13
|
disabled?: boolean;
|
|
16
14
|
isOpen: boolean;
|
|
17
15
|
isSaving?: boolean;
|
|
18
|
-
onCancel: () => void;
|
|
19
16
|
onValidate: () => void;
|
|
20
17
|
title: string;
|
|
21
18
|
validateLabel?: string;
|
|
22
19
|
validateVariant?: "primary" | "primaryWarning";
|
|
20
|
+
cancelLabel?: string;
|
|
23
21
|
};
|
|
24
22
|
|
|
23
|
+
export type DialogProps = BaseDialogProps & {
|
|
24
|
+
alertDialog?: false;
|
|
25
|
+
onCancel: () => void;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export type AlertDialogProps = BaseDialogProps & {
|
|
29
|
+
alertDialog: true;
|
|
30
|
+
onCancel?: () => void;
|
|
31
|
+
}
|
|
32
|
+
|
|
25
33
|
export function Dialog({
|
|
26
|
-
alertDialog = false,
|
|
27
34
|
backgroundType = "none",
|
|
28
|
-
cancelLabel = "Cancel",
|
|
29
35
|
children,
|
|
30
36
|
disabled,
|
|
31
37
|
isOpen,
|
|
32
38
|
isSaving,
|
|
33
|
-
onCancel,
|
|
34
|
-
onValidate,
|
|
35
39
|
title,
|
|
36
40
|
validateLabel = "Ok",
|
|
37
41
|
validateVariant = "primary",
|
|
38
|
-
|
|
42
|
+
onValidate,
|
|
43
|
+
...props
|
|
44
|
+
}: AlertDialogProps | DialogProps) {
|
|
39
45
|
const referentRef = useRef<HTMLDivElement>(null);
|
|
40
46
|
|
|
41
47
|
return (
|
|
@@ -44,8 +50,8 @@ export function Dialog({
|
|
|
44
50
|
as="div"
|
|
45
51
|
className="s-relative s-z-50"
|
|
46
52
|
// 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"}
|
|
53
|
+
onClose={props.alertDialog ? () => {} : props.onCancel}
|
|
54
|
+
role={props.alertDialog ? "alertdialog" : "dialog"}
|
|
49
55
|
>
|
|
50
56
|
<Transition.Child
|
|
51
57
|
as={Fragment}
|
|
@@ -86,11 +92,13 @@ export function Dialog({
|
|
|
86
92
|
<Button.List>
|
|
87
93
|
{!isSaving && (
|
|
88
94
|
<>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
95
|
+
{props.onCancel && (
|
|
96
|
+
<Button
|
|
97
|
+
label={props.cancelLabel ?? "Cancel"}
|
|
98
|
+
variant="tertiary"
|
|
99
|
+
onClick={props.onCancel}
|
|
100
|
+
/>
|
|
101
|
+
)}
|
|
94
102
|
<Button
|
|
95
103
|
disabled={disabled}
|
|
96
104
|
label={validateLabel}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useCallback, useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { Dialog,
|
|
3
|
+
import { Dialog, DialogProps } from "./Dialog";
|
|
4
4
|
|
|
5
5
|
type ElementDialogProps<T> = Omit<
|
|
6
|
-
|
|
6
|
+
DialogProps,
|
|
7
7
|
"isOpen" | "onValidate" | "onCancel"
|
|
8
8
|
> & {
|
|
9
9
|
openOnElement: T | null;
|
|
@@ -23,6 +23,7 @@ export const DialogExample = () => {
|
|
|
23
23
|
<Dialog
|
|
24
24
|
isOpen={isOpen1}
|
|
25
25
|
title="Dialog title"
|
|
26
|
+
cancelLabel="Cancel"
|
|
26
27
|
onValidate={() => setisOpen1(false)}
|
|
27
28
|
onCancel={() => setisOpen1(false)}
|
|
28
29
|
>
|
|
@@ -37,6 +38,7 @@ export const DialogExample = () => {
|
|
|
37
38
|
<Dialog
|
|
38
39
|
isOpen={isOpen2}
|
|
39
40
|
title="Dialog title"
|
|
41
|
+
cancelLabel="Cancel"
|
|
40
42
|
onValidate={() => setisOpen2(false)}
|
|
41
43
|
onCancel={() => setisOpen2(false)}
|
|
42
44
|
validateVariant="primaryWarning"
|
|
@@ -52,6 +54,7 @@ export const DialogExample = () => {
|
|
|
52
54
|
<Dialog
|
|
53
55
|
isOpen={isOpen3}
|
|
54
56
|
title="Dialog title"
|
|
57
|
+
cancelLabel="Cancel"
|
|
55
58
|
onValidate={() => setisOpen3(false)}
|
|
56
59
|
onCancel={() => setisOpen3(false)}
|
|
57
60
|
backgroundType="snow"
|
|
@@ -68,6 +71,7 @@ export const DialogExample = () => {
|
|
|
68
71
|
disabled
|
|
69
72
|
isOpen={isOpen4}
|
|
70
73
|
title="Dialog title"
|
|
74
|
+
cancelLabel="Cancel"
|
|
71
75
|
onValidate={() => setisOpen4(false)}
|
|
72
76
|
onCancel={() => setisOpen4(false)}
|
|
73
77
|
>
|
|
@@ -77,11 +81,10 @@ export const DialogExample = () => {
|
|
|
77
81
|
</div>
|
|
78
82
|
<div>
|
|
79
83
|
<Dialog
|
|
80
|
-
alertDialog
|
|
84
|
+
alertDialog={true}
|
|
81
85
|
isOpen={isOpen5}
|
|
82
86
|
title="Alert Dialog title"
|
|
83
87
|
onValidate={() => setisOpen5(false)}
|
|
84
|
-
onCancel={() => setisOpen5(false)}
|
|
85
88
|
>
|
|
86
89
|
<div>I'm the modal content</div>
|
|
87
90
|
</Dialog>
|