@seeqdev/qomponents 0.0.80 → 0.0.82

package/dist/Modal/Modal.stories.d.ts

@@ -6,5 +6,4 @@ export default _default;
 export declare const AllModalsVariants: React.FunctionComponent;
 export declare const ModalsWithDisabledSubmit: React.FunctionComponent;
 export declare const ModalsWithEditableTitle: React.FunctionComponent;
-export declare const ModalsWithIcon: React.FunctionComponent;
 export declare const ModalsWithCustomButton: React.FunctionComponent;

package/dist/index.esm.js

@@ -14058,16 +14058,17 @@ const DialogContent = React__default.forwardRef(({ className, children, ...props
        tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
        tw-rounded-lg ${className}`, ...props }, children))));
 DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
-const DialogHeader = ({ className, ...props }) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
-    React__default.createElement("div", { className: `flex flex-col space-y-1.5 text-center sm:text-left ${className}`, ...props })));
+const DialogHeader = (props) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
+    React__default.createElement("div", { ...props })));
 DialogHeader.displayName = 'DialogHeader';
-const DialogFooter = ({ className, ...props }) => (React__default.createElement("div", { className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`, ...props }));
+const DialogFooter = (props) => React__default.createElement("div", { ...props });
 DialogFooter.displayName = 'DialogFooter';
-const DialogTitle = React__default.forwardRef(({ className, ...props }, ref) => (React__default.createElement($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ref: ref, className: `text-lg font-semibold leading-none tracking-tight ${className}`, ...props })));
+const DialogTitle = React__default.forwardRef((props, ref) => React__default.createElement($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ref: ref, ...props }));
 DialogTitle.displayName = $5d3850c4d0b4e6c7$export$f99233281efd08a0.displayName;
-const DialogDescription = React__default.forwardRef(({ className, ...props }, ref) => (React__default.createElement($5d3850c4d0b4e6c7$export$393edc798c47379d, { ref: ref, className: `text-sm text-muted-foreground ${className}`, ...props })));
+const DialogDescription = React__default.forwardRef((props, ref) => React__default.createElement($5d3850c4d0b4e6c7$export$393edc798c47379d, { ref: ref, ...props }));
 DialogDescription.displayName = $5d3850c4d0b4e6c7$export$393edc798c47379d.displayName;
 const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = React__default.createElement(React__default.Fragment, null), customButtonVariant = 'outline', keepFocusInsideModal = true, }) => {
+    const [isLoading, setIsLoading] = useState(false);
     // the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
     useEffect(() => {
         if (open) {
@@ -14081,6 +14082,17 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
             document.body.style.pointerEvents = 'auto';
         }
     }, [open]);
+    const handleSubmit = async (e) => {
+        if (!onSubmit)
+            return;
+        try {
+            setIsLoading(true);
+            await onSubmit(e);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
     const renderTitle = () => {
         let titleIconElement = React__default.createElement(React__default.Fragment, null);
         if (titleIcon) {
@@ -14126,7 +14138,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                     React__default.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
                     !hideCancelButton && (React__default.createElement(DialogClose, { asChild: true },
                         React__default.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }))),
-                    !hideSubmitButton && (React__default.createElement(Button, { label: submitButtonLabel, onClick: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-min-w-[100px]" })))))))))) : (React__default.createElement(React__default.Fragment, null));
+                    !hideSubmitButton && (React__default.createElement(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" })))))))))) : (React__default.createElement(React__default.Fragment, null));
 };
 
 // We have resorted to returning slots directly rather than exposing primitives that can then