@dust-tt/sparkle 0.2.91-pr2 → 0.2.92-pr

package/dist/cjs/_index.d.ts

@@ -56,6 +56,8 @@ import Spinner from "./components/Spinner";
 export { Spinner };
 import { Modal } from "./components/Modal";
 export { Modal };
+import { ElementModal } from "./components/ElementModal";
+export { ElementModal };
 import { Dialog } from "./components/Dialog";
 export { Dialog };
 import { Input } from "./components/Input";

package/dist/cjs/components/ElementModal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ModalProps } from "./Modal";
+type ElementModalProps<T> = Omit<ModalProps, "isOpen"> & {
+    openOnElement: T | null;
+};
+export declare function ElementModal<T>({ openOnElement, ...props }: ElementModalProps<T>): React.JSX.Element;
+export {};

package/dist/cjs/components/Modal.d.ts

@@ -5,7 +5,7 @@ export declare enum ModalType {
     FullScreen = "full-screen",
     Side = "side"
 }
-type ModalProps = {
+export type ModalProps = {
     isOpen: boolean;
     onClose: () => void;
     action?: ButtonProps;
@@ -19,4 +19,3 @@ type ModalProps = {
     variant?: "full-screen" | "side-sm" | "side-md" | "dialogue";
 };
 export declare function Modal({ isOpen, onClose, action, children, hasChanged, onSave, saveLabel, isSaving, savingLabel, title, variant, }: ModalProps): React.JSX.Element;
-export {};

package/dist/cjs/index.js

@@ -33556,7 +33556,7 @@ var variantSize = {
 var modalStyles = (_a = {},
     _a[ModalType.Side] = {
         containerClasses: "s-h-full s-ml-auto",
-        panelClasses: "s-h-full s-max-h-full s-shadow-xl s-border s-border-structure-100",
+        panelClasses: "s-h-full s-max-h-full s-shadow-xl s-border s-border-structure-100 s-w-full s-max-w-full",
         transitionEnterFrom: "s-opacity-0 s-translate-x-16",
         transitionEnterTo: "s-opacity-100 s-translate-x-0",
         transitionLeaveFrom: "s-opacity-100 s-translate-x-0",
@@ -33589,11 +33589,6 @@ function Modal(_a) {
     if (variant === "dialogue") {
         console.warn("Dialogue variant of Modal is deprecated. Please use either another variant of Modal or the Dialog component.");
     }
-    // checks whether we are on mobile or desktop
-    var isMobile = window.innerWidth < 640;
-    if (isMobile) {
-        variant = "full-screen";
-    }
     var buttonBarProps = hasChanged
         ? {
             variant: "validate",
@@ -33619,6 +33614,21 @@ function Modal(_a) {
                         React.createElement("div", { className: classNames("s-pb-6 s-pt-16", innerContainerClasses) }, children)))))));
 }
 
+function ElementModal(_a) {
+    var openOnElement = _a.openOnElement, props = __rest(_a, ["openOnElement"]);
+    var onClose = props.onClose;
+    var _b = __read(React.useState(false), 2), isClosingTransition = _b[0], setIsClosingTransition = _b[1];
+    var realOnClose = function () {
+        setIsClosingTransition(true);
+        setTimeout(function () {
+            onClose();
+            setIsClosingTransition(false);
+        }, 200);
+    };
+    props.onClose = realOnClose;
+    return (React.createElement(Modal, __assign({ isOpen: openOnElement !== null && !isClosingTransition }, props)));
+}
+
 function Dialog(_a) {
     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, title = _a.title;
     return (React.createElement(tt, { show: isOpen, as: React.Fragment, appear: true },
@@ -33874,6 +33884,7 @@ exports.DriveLogo = SvgDrive;
 exports.DropdownMenu = DropdownMenu;
 exports.DustIcon = SvgDust$1;
 exports.DustStrokeIcon = SvgDust;
+exports.ElementModal = ElementModal;
 exports.EmotionLaughIcon = SvgEmotionLaugh$1;
 exports.EmotionLaughStrokeIcon = SvgEmotionLaugh;
 exports.EqualizerIcon = SvgEqualizer$1;