@dust-tt/sparkle 0.2.235 → 0.2.237
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 -18
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Dialog.d.ts +2 -1
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +2 -2
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/TextArea.d.ts +2 -2
- package/dist/esm/components/TextArea.d.ts.map +1 -1
- package/dist/esm/components/TextArea.js +3 -17
- package/dist/esm/components/TextArea.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/dist/esm/stories/TextArea.stories.js +1 -1
- package/dist/esm/stories/TextArea.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Dialog.tsx +4 -1
- package/src/components/TextArea.tsx +4 -20
- package/src/stories/Dialog.stories.tsx +13 -0
- package/src/stories/TextArea.stories.tsx +1 -1
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
export type ModalProps = {
|
|
3
3
|
title: string;
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
+
disabled?: boolean;
|
|
5
6
|
isOpen: boolean;
|
|
6
7
|
onCancel: () => void;
|
|
7
8
|
onValidate: () => void;
|
|
@@ -11,5 +12,5 @@ export type ModalProps = {
|
|
|
11
12
|
isSaving?: boolean;
|
|
12
13
|
backgroundType?: "confetti" | "snow" | "none";
|
|
13
14
|
};
|
|
14
|
-
export declare function Dialog({ isOpen, children, onCancel, onValidate, cancelLabel, validateLabel, validateVariant,
|
|
15
|
+
export declare function Dialog({ title, isOpen, children, disabled, onCancel, onValidate, cancelLabel, validateLabel, validateVariant, isSaving, backgroundType, }: ModalProps): React.JSX.Element;
|
|
15
16
|
//# 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,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAsB,EACtB,aAAoB,EACpB,eAA2B,EAC3B,
|
|
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,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAsB,EACtB,aAAoB,EACpB,eAA2B,EAC3B,QAAQ,EACR,cAAuB,GACxB,EAAE,UAAU,qBA8EZ"}
|
|
@@ -5,7 +5,7 @@ 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 isOpen = _a.isOpen, children = _a.children, onCancel = _a.onCancel, onValidate = _a.onValidate, _b = _a.cancelLabel, cancelLabel = _b === void 0 ? "Cancel" : _b, _c = _a.validateLabel, validateLabel = _c === void 0 ? "Ok" : _c, _d = _a.validateVariant, validateVariant = _d === void 0 ? "primary" : _d,
|
|
8
|
+
var title = _a.title, isOpen = _a.isOpen, children = _a.children, disabled = _a.disabled, onCancel = _a.onCancel, onValidate = _a.onValidate, _b = _a.cancelLabel, cancelLabel = _b === void 0 ? "Cancel" : _b, _c = _a.validateLabel, validateLabel = _c === void 0 ? "Ok" : _c, _d = _a.validateVariant, validateVariant = _d === void 0 ? "primary" : _d, isSaving = _a.isSaving, _e = _a.backgroundType, backgroundType = _e === void 0 ? "none" : _e;
|
|
9
9
|
var referentRef = useRef(null);
|
|
10
10
|
return (React.createElement(Transition, { show: isOpen, as: Fragment, appear: true },
|
|
11
11
|
React.createElement(HeadlessDialog, { as: "div", className: "s-relative s-z-50", onClose: onCancel },
|
|
@@ -21,7 +21,7 @@ export function Dialog(_a) {
|
|
|
21
21
|
React.createElement(Button.List, null,
|
|
22
22
|
!isSaving && (React.createElement(React.Fragment, null,
|
|
23
23
|
React.createElement(Button, { label: cancelLabel, variant: "tertiary", onClick: onCancel }),
|
|
24
|
-
React.createElement(Button, { label: validateLabel, variant: validateVariant, onClick: onValidate }))),
|
|
24
|
+
React.createElement(Button, { disabled: disabled, label: validateLabel, variant: validateVariant, onClick: onValidate }))),
|
|
25
25
|
isSaving && React.createElement(Spinner, { variant: "color" }))),
|
|
26
26
|
backgroundType !== "none" && (React.createElement("div", { className: "s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0" },
|
|
27
27
|
React.createElement(ConfettiBackground, { variant: backgroundType, referentSize: referentRef }))))))))));
|
|
@@ -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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"}
|
|
@@ -6,8 +6,8 @@ type TextAreaProps = {
|
|
|
6
6
|
error?: string | null;
|
|
7
7
|
showErrorLabel?: boolean;
|
|
8
8
|
className?: string;
|
|
9
|
-
|
|
9
|
+
minRows?: number;
|
|
10
10
|
};
|
|
11
|
-
export declare function TextArea({ placeholder, value, onChange, error, showErrorLabel, className,
|
|
11
|
+
export declare function TextArea({ placeholder, value, onChange, error, showErrorLabel, className, minRows }: TextAreaProps): React.JSX.Element;
|
|
12
12
|
export {};
|
|
13
13
|
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,KAAK,EACL,cAAsB,EACtB,SAAS,EACT,OAAY,EACb,EAAE,aAAa,qBA4Bf"}
|
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
2
|
import { classNames } from "../lib/utils";
|
|
3
3
|
export function TextArea(_a) {
|
|
4
|
-
var placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.
|
|
4
|
+
var placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.minRows, minRows = _c === void 0 ? 10 : _c;
|
|
5
5
|
var textareaRef = useRef(null);
|
|
6
|
-
useEffect(function () {
|
|
7
|
-
var textarea = textareaRef.current;
|
|
8
|
-
if (textarea) {
|
|
9
|
-
textarea.style.height = 'auto'; // Reset height
|
|
10
|
-
textarea.style.height = "".concat(textarea.scrollHeight, "px"); // Set to scroll height
|
|
11
|
-
}
|
|
12
|
-
}, [value]); // Re-run when value changes
|
|
13
6
|
return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
|
|
14
|
-
React.createElement("textarea", { rows:
|
|
7
|
+
React.createElement("textarea", { rows: minRows, ref: textareaRef, className: classNames("overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide", !error
|
|
15
8
|
? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
|
|
16
9
|
: "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500", "s-border-structure-200 s-bg-structure-50", "s-resize-y", className !== null && className !== void 0 ? className : ""), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
|
|
17
|
-
var newValue = e.target.value;
|
|
18
|
-
var textAreaComponent = textareaRef.current;
|
|
19
|
-
if (textAreaComponent &&
|
|
20
|
-
(value === null || value === void 0 ? void 0 : value.length) &&
|
|
21
|
-
newValue.length < value.length) {
|
|
22
|
-
textAreaComponent.style.height = "auto"; // Reset height to recalculate
|
|
23
|
-
}
|
|
24
10
|
onChange(e.target.value);
|
|
25
11
|
} }),
|
|
26
12
|
error && showErrorLabel && (React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, error))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAYhD,MAAM,UAAU,QAAQ,CAAC,EAQT;QAPd,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA;IAEZ,IAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,kCACE,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,UAAU,CACnB,8IAA8I,EAC9I,CAAC,KAAK;gBACJ,CAAC,CAAC,0EAA0E;gBAC5E,CAAC,CAAC,8DAA8D,EAClE,0CAA0C,EAC1C,YAAY,EACZ,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAChB,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,GACD;QACD,KAAK,IAAI,cAAc,IAAI,CAC1B,6BAAK,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAO,CACnE,CACG,CACP,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,yBAiEzB,CAAC"}
|
|
@@ -10,6 +10,7 @@ export var DialogExample = function () {
|
|
|
10
10
|
var _a = __read(useState(false), 2), isOpen1 = _a[0], setisOpen1 = _a[1];
|
|
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
|
+
var _d = __read(useState(false), 2), isOpen4 = _d[0], setisOpen4 = _d[1];
|
|
13
14
|
return (React.createElement("div", { className: "items-start s-flex s-flex-col s-gap-10" },
|
|
14
15
|
React.createElement("div", null,
|
|
15
16
|
React.createElement(Dialog, { isOpen: isOpen1, title: "Dialog title", onValidate: function () { return setisOpen1(false); }, onCancel: function () { return setisOpen1(false); } },
|
|
@@ -22,6 +23,10 @@ export var DialogExample = function () {
|
|
|
22
23
|
React.createElement("div", null,
|
|
23
24
|
React.createElement(Dialog, { isOpen: isOpen3, title: "Dialog title", onValidate: function () { return setisOpen3(false); }, onCancel: function () { return setisOpen3(false); }, backgroundType: "snow" },
|
|
24
25
|
React.createElement("div", null, "I'm the modal content")),
|
|
25
|
-
React.createElement(Button, { label: "Dialog with BACKGROUND", onClick: function () { return setisOpen3(true); } }))
|
|
26
|
+
React.createElement(Button, { label: "Dialog with BACKGROUND", onClick: function () { return setisOpen3(true); } })),
|
|
27
|
+
React.createElement("div", null,
|
|
28
|
+
React.createElement(Dialog, { disabled: true, isOpen: isOpen4, title: "Dialog title", onValidate: function () { return setisOpen4(false); }, onCancel: function () { return setisOpen4(false); } },
|
|
29
|
+
React.createElement("div", null, "I'm the modal content")),
|
|
30
|
+
React.createElement(Button, { label: "Dialog with disabled", onClick: function () { return setisOpen4(true); } }))));
|
|
26
31
|
};
|
|
27
32
|
//# 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;IAC9C,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,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
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;IAC9C,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,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -17,7 +17,7 @@ export var TextAreaExample = function () {
|
|
|
17
17
|
React.createElement("div", { className: "s-grid s-grid-cols-3 s-gap-4" },
|
|
18
18
|
React.createElement(TextArea, { placeholder: "placeholder", value: textValues[0], onChange: function (v) {
|
|
19
19
|
return setTextValues([v, textValues[1], textValues[2], textValues[3]]);
|
|
20
|
-
},
|
|
20
|
+
}, minRows: 2 }),
|
|
21
21
|
React.createElement(TextArea, { placeholder: "placeholder", value: textValues[1], error: "errored because blah", onChange: function (v) {
|
|
22
22
|
return setTextValues([textValues[0], v, textValues[2], textValues[3]]);
|
|
23
23
|
}, showErrorLabel: true }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAA,OAA8B,QAAQ,CAAC;QAC3C,EAAE;QACF,kBAAkB;QAClB,gBAAgB;QAChB,EAAE;KACH,CAAC,IAAA,EALK,UAAU,QAAA,EAAE,aAAa,QAK9B,CAAC;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA/D,CAA+D,EAEjE,
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/stories/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAA,OAA8B,QAAQ,CAAC;QAC3C,EAAE;QACF,kBAAkB;QAClB,gBAAgB;QAChB,EAAE;KACH,CAAC,IAAA,EALK,UAAU,QAAA,EAAE,aAAa,QAK9B,CAAC;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA/D,CAA+D,EAEjE,OAAO,EAAE,CAAC,GACV;YACF,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA/D,CAA+D,EAEjE,cAAc,SACd;YACF,oBAAC,QAAQ,IACP,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,QAAQ,EAAE,UAAC,CAAC;oBACV,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAA/D,CAA+D,EAEjE,KAAK,EAAE,sBAAsB,GAC7B,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@ import { Button } from "./Button";
|
|
|
10
10
|
export type ModalProps = {
|
|
11
11
|
title: string;
|
|
12
12
|
children: React.ReactNode;
|
|
13
|
+
disabled?: boolean;
|
|
13
14
|
isOpen: boolean;
|
|
14
15
|
onCancel: () => void;
|
|
15
16
|
onValidate: () => void;
|
|
@@ -21,14 +22,15 @@ export type ModalProps = {
|
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
export function Dialog({
|
|
25
|
+
title,
|
|
24
26
|
isOpen,
|
|
25
27
|
children,
|
|
28
|
+
disabled,
|
|
26
29
|
onCancel,
|
|
27
30
|
onValidate,
|
|
28
31
|
cancelLabel = "Cancel",
|
|
29
32
|
validateLabel = "Ok",
|
|
30
33
|
validateVariant = "primary",
|
|
31
|
-
title,
|
|
32
34
|
isSaving,
|
|
33
35
|
backgroundType = "none",
|
|
34
36
|
}: ModalProps) {
|
|
@@ -84,6 +86,7 @@ export function Dialog({
|
|
|
84
86
|
onClick={onCancel}
|
|
85
87
|
/>
|
|
86
88
|
<Button
|
|
89
|
+
disabled={disabled}
|
|
87
90
|
label={validateLabel}
|
|
88
91
|
variant={validateVariant}
|
|
89
92
|
onClick={onValidate}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
2
|
|
|
3
3
|
import { classNames } from "@sparkle/lib/utils";
|
|
4
4
|
|
|
@@ -9,7 +9,7 @@ type TextAreaProps = {
|
|
|
9
9
|
error?: string | null;
|
|
10
10
|
showErrorLabel?: boolean;
|
|
11
11
|
className?: string;
|
|
12
|
-
|
|
12
|
+
minRows?: number;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export function TextArea({
|
|
@@ -19,21 +19,14 @@ export function TextArea({
|
|
|
19
19
|
error,
|
|
20
20
|
showErrorLabel = false,
|
|
21
21
|
className,
|
|
22
|
-
|
|
22
|
+
minRows = 10
|
|
23
23
|
}: TextAreaProps) {
|
|
24
24
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
25
25
|
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
const textarea = textareaRef.current;
|
|
28
|
-
if (textarea) {
|
|
29
|
-
textarea.style.height = 'auto'; // Reset height
|
|
30
|
-
textarea.style.height = `${textarea.scrollHeight}px`; // Set to scroll height
|
|
31
|
-
}
|
|
32
|
-
}, [value]); // Re-run when value changes
|
|
33
26
|
return (
|
|
34
27
|
<div className="s-flex s-flex-col s-gap-1 s-p-px">
|
|
35
28
|
<textarea
|
|
36
|
-
rows={
|
|
29
|
+
rows={minRows}
|
|
37
30
|
ref={textareaRef}
|
|
38
31
|
className={classNames(
|
|
39
32
|
"overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide",
|
|
@@ -47,15 +40,6 @@ export function TextArea({
|
|
|
47
40
|
placeholder={placeholder}
|
|
48
41
|
value={value ?? ""}
|
|
49
42
|
onChange={(e) => {
|
|
50
|
-
const newValue = e.target.value;
|
|
51
|
-
const textAreaComponent = textareaRef.current;
|
|
52
|
-
if (
|
|
53
|
-
textAreaComponent &&
|
|
54
|
-
value?.length &&
|
|
55
|
-
newValue.length < value.length
|
|
56
|
-
) {
|
|
57
|
-
textAreaComponent.style.height = "auto"; // Reset height to recalculate
|
|
58
|
-
}
|
|
59
43
|
onChange(e.target.value);
|
|
60
44
|
}}
|
|
61
45
|
/>
|
|
@@ -14,6 +14,7 @@ export const DialogExample = () => {
|
|
|
14
14
|
const [isOpen1, setisOpen1] = useState(false);
|
|
15
15
|
const [isOpen2, setisOpen2] = useState(false);
|
|
16
16
|
const [isOpen3, setisOpen3] = useState(false);
|
|
17
|
+
const [isOpen4, setisOpen4] = useState(false);
|
|
17
18
|
return (
|
|
18
19
|
<div className="items-start s-flex s-flex-col s-gap-10">
|
|
19
20
|
<div>
|
|
@@ -60,6 +61,18 @@ export const DialogExample = () => {
|
|
|
60
61
|
onClick={() => setisOpen3(true)}
|
|
61
62
|
/>
|
|
62
63
|
</div>
|
|
64
|
+
<div>
|
|
65
|
+
<Dialog
|
|
66
|
+
disabled
|
|
67
|
+
isOpen={isOpen4}
|
|
68
|
+
title="Dialog title"
|
|
69
|
+
onValidate={() => setisOpen4(false)}
|
|
70
|
+
onCancel={() => setisOpen4(false)}
|
|
71
|
+
>
|
|
72
|
+
<div>I'm the modal content</div>
|
|
73
|
+
</Dialog>
|
|
74
|
+
<Button label="Dialog with disabled" onClick={() => setisOpen4(true)} />
|
|
75
|
+
</div>
|
|
63
76
|
</div>
|
|
64
77
|
);
|
|
65
78
|
};
|