@seeqdev/qomponents 0.0.184 → 0.0.185

package/dist/src/InputGroup/InputGroup.stories.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputGroup } from './InputGroup';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'InputGroup',
+};
+export const AllTextFields = () => {
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "light", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { value: "value provided", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
+                                {
+                                    variant: 'element',
+                                    element: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: "Custom" }),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", onClick: () => console.log('clicked'), children: "custom grouped element" }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: _jsxs("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: [
+                                    _jsx("div", { className: "tw-rounded-sm tw-bg-green-400 ", children: "Custom element 1" }), _jsx("div", { className: "tw-rounded-sm tw-bg-red-400 tw-mt-1", onClick: () => console.log('clicked'), children: "Custom element 2" })
+                                ] }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit 2" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Delete" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, placeholder: "inputgroup without any appended element", tooltipPlacement: "top", isHtmlTooltip: false, append: [] }) })
+                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { value: "value provided", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", onClick: () => console.log('clicked'), children: "custom grouped element" }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: _jsxs("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: [
+                                    _jsx("div", { className: "tw-rounded-sm tw-bg-green-400 dark:tw-text-sq-dark-text", children: "Custom element 1" }), _jsx("div", { className: "tw-rounded-sm tw-bg-red-400 dark:tw-text-sq-dark-text tw-mt-1", onClick: () => console.log('clicked'), children: "Custom element 2" })
+                                ] }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Delete" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, placeholder: "inputgroup without any appended element", tooltipPlacement: "top", isHtmlTooltip: false, append: [] }) })
+                ] })
+        ] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
+                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
+        ] }));
+};

package/dist/src/InputGroup/InputGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/InputGroup/InputGroup.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { InputGroup } from './InputGroup';
+describe('InputGroup', () => {
+    const defaultProps = {
+        value: 'with tooltip',
+        append: [
+            {
+                variant: 'button',
+                buttonProps: {
+                    icon: 'fc-annotate',
+                    iconStyle: 'theme',
+                },
+            },
+        ],
+        extraClassNames: 'extra-class',
+        tooltip: 'Tooltip title',
+        tooltipDelay: 0,
+        id: 'input-group-id',
+        testId: 'input-group-test-id',
+    };
+    it('renders without crashing', () => {
+        const { getByTestId } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(getByTestId('input-group-test-id')).toBeInTheDocument();
+    });
+    it('applies the correct classes', () => {
+        const { getByTestId } = render(_jsx(InputGroup, { ...defaultProps }));
+        const inputGroup = getByTestId('input-group-test-id');
+        expect(inputGroup).toHaveClass('tw-flex');
+        expect(inputGroup).toHaveClass('tw-outline-none');
+        expect(inputGroup).toHaveClass('extra-class');
+    });
+    it('renders append items', () => {
+        const { getByRole } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(getByRole('button')).toBeInTheDocument();
+    });
+    it('renders input element', () => {
+        const { container } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
+    });
+});

package/dist/src/InputGroup/InputGroup.types.d.ts

@@ -0,0 +1,61 @@
+import { ButtonProps } from '../Button/Button.types';
+import { InputLengthStyleProps, TextFieldProps } from '../TextField/TextField.types';
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface for button elements that can be appended to an InputGroup.
+ * Used when you want to add interactive buttons alongside the input field.
+ */
+interface AppendedButtonProps {
+    /**
+     * Specifies that this appended item is an interactive button.
+     * Button items can trigger actions and provide additional functionality to the input.
+     */
+    variant: 'button';
+    /**
+     * Configuration properties for the button component.
+     * Uses all standard Button props including click handlers, styling, icons, and tooltips.
+     */
+    buttonProps: ButtonProps;
+}
+/**
+ * Interface for custom React elements that can be appended to an InputGroup.
+ * Used when you need to add non-button content like icons, labels, or decorative elements.
+ */
+interface ElementProps {
+    /**
+     * Specifies that this appended item is a custom React element.
+     * Element items are typically decorative or informational and don't have built-in interactivity.
+     */
+    variant: 'element';
+    /**
+     * The React content to render alongside the input field.
+     * Can be any valid React node including text, icons, indicators, or complex components.
+     */
+    element: React.ReactNode;
+}
+export type AppendedProps = AppendedButtonProps | ElementProps | undefined;
+/**
+ * Base interface for InputGroup component properties.
+ * Extends TextFieldProps to inherit all text input functionality while adding group-specific features.
+ */
+interface BaseInputGroupProps extends TextFieldProps {
+    /**
+     * Array of elements to append to the right side of the input field.
+     * Each item can be either a button (for interactive functionality) or an element (for decoration).
+     * Items are displayed in the order they appear in the array, creating a cohesive input group.
+     */
+    append: AppendedProps[];
+    /**
+     * Custom input field component to render instead of the default TextField.
+     * Use this when you need specialized input behavior while maintaining the group styling.
+     * The field will be integrated seamlessly with the appended elements.
+     */
+    field?: React.ReactNode;
+}
+/**
+ * Complete props interface for the InputGroup component.
+ * Combines base input group functionality with tooltip support and text length constraints.
+ * Creates a cohesive input control with attached buttons or decorative elements.
+ */
+export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
+export {};

package/dist/src/InputGroup/InputGroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/InputGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { InputGroup as default } from './InputGroup';
+export type { AppendedProps } from './InputGroup.types';

package/dist/src/InputGroup/index.js

@@ -0,0 +1 @@
+export { InputGroup as default } from './InputGroup';

package/dist/src/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import '../styles.css';
+import { ModalProps } from './Modal.types';
+declare const Modal: React.FunctionComponent<ModalProps>;
+export default Modal;

package/dist/src/Modal/Modal.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import classNames from 'classnames';
+import '../styles.css';
+import Button from '../Button';
+import Icon from '../Icon';
+import TextField from '../TextField';
+const Dialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [
+        _jsx("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0 " }), _jsxs(DialogPrimitive.Content, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
+       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: [
+                _jsx(DialogPrimitive.DialogTitle, { className: "tw-hidden" }), children] })
+    ] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = (props) => (_jsx("div", { className: "tw-w-full tw-justify-between", children: _jsx("div", { ...props }) }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = (props) => _jsx("div", { ...props });
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Title, { ref: ref, ...props }));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Description, { ref: ref, ...props }));
+DialogDescription.displayName = DialogPrimitive.Description.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 = _jsx(_Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, }) => {
+    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) {
+            // Pushing the change to the end of the call stack
+            const timer = setTimeout(() => {
+                document.body.style.pointerEvents = '';
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            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 = _jsx(_Fragment, {});
+        if (titleIcon) {
+            if (typeof titleIcon === 'string') {
+                titleIconElement = (_jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
+            }
+            else {
+                titleIconElement = _jsx("div", { className: "tw-mt-1.5", children: titleIcon });
+            }
+        }
+        return (_jsxs(_Fragment, { children: [titleIcon && titleIconPosition === 'left' ? _jsx("div", { className: "tw-flex tw-mr-2", children: titleIconElement }) : _jsx(_Fragment, {}), _jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (_jsxs("div", { className: "tw-flex tw-w-full tw-items-center", children: [
+                            _jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && _jsx("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0", children: titleError })] })) : (customHeader ?? (_jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [
+                            _jsxs("div", { className: "tw-flex tw-items-center", children: [
+                                    _jsx("h3", { children: title }), titleSuffixLabel && _jsx("span", { className: "tw-text-xl tw-pl-0.5", children: titleSuffixLabel })] }), subtitle && (_jsx("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? _jsx("div", { className: "tw-flex tw-ml-4", children: titleIconElement }) : _jsx(_Fragment, {})] }));
+    };
+    return open ? (_jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: _jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
+                'tw-max-w-xs': size === 'xs',
+                'tw-max-w-sm': size === 'sm',
+                'tw-max-w-md': size === 'md',
+                'tw-max-w-lg': size === 'lg',
+                'tw-max-w-xl': size === 'xl',
+                'tw-max-w-2xl': size === '2xl',
+                'tw-max-w-3xl': size === '3xl',
+                'tw-max-w-4xl': size === '4xl',
+                'tw-max-w-5xl': size === '5xl',
+                'tw-max-w-6xl': size === '6xl',
+            }, dialogClassName), children: [
+                _jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4", children: [
+                        _jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (_jsx(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: _jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), _jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (_jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (_jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [
+                            _jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (_jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), _jsxs("div", { className: "tw-flex tw-justify-end", children: [
+                                    _jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (_jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })
+                        ] })) }))] }) })) : (_jsx(_Fragment, {}));
+};
+export default Modal;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllModalsVariants: React.FunctionComponent;
+export declare const ModalsWithDisabledSubmit: React.FunctionComponent;
+export declare const ModalsWithEditableTitle: React.FunctionComponent;
+export declare const ModalsWithCustomButton: React.FunctionComponent;
+export declare const ModalsWithVariantButton: React.FunctionComponent;

package/dist/src/Modal/Modal.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Modal from './Modal';
+import Button from '../Button';
+export default {
+    title: 'Modal',
+};
+const modalBody = (_jsx("div", { children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }));
+const waitUntil = async (timeout) => {
+    return new Promise((resolve) => {
+        setTimeout(() => resolve('yes'), timeout);
+    });
+};
+const ModalComponent = ({ bodyClass = '', title: originalTitle, titleIcon, isTitleEditable, children, hideCloseIcon, disableSubmitButton, size, buttonLabel = 'Open Modal', customButton, customButtonLabel, submitButtonVariant, onSubmit, }) => {
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState(originalTitle);
+    useEffect(() => {
+        return () => {
+            document.body.className = '';
+        };
+    }, []);
+    const onClose = () => {
+        document.body.className = '';
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: "tw-p-4", children: [
+            _jsx(Button, { onClick: () => {
+                    document.body.className = bodyClass;
+                    setOpen(true);
+                }, label: buttonLabel }), _jsx(Modal, { open: open, onClose: onClose, title: title, titleIcon: titleIcon, isTitleEditable: isTitleEditable, onTitleChanged: (event) => setTitle(event.target.value), hideCloseIcon: hideCloseIcon, disableSubmitButton: disableSubmitButton, size: size, onSubmit: onSubmit, customButton: customButton, submitButtonVariant: submitButtonVariant, onPointerDownOutside: onClose, customButtonLabel: customButtonLabel, children: children })
+        ] }));
+};
+export const AllModalsVariants = () => {
+    const colors = ['Topic', 'Analysis', 'Datalab', 'Vantage'];
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+    return (_jsx("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => (_jsxs("div", { children: [
+                _jsxs("b", { children: [color, " colors"] }), _jsx("div", { className: "tw-p-4 light", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()}`, title: "Modal example", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}`))) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()} tw-dark color_${color.toLowerCase()}_dark`, title: "Modal example", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}_dark`))) })
+            ] }, color))) }));
+};
+export const ModalsWithDisabledSubmit = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+        _jsxs("div", { children: [
+                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
+            ] })
+    ] }));
+export const ModalsWithEditableTitle = () => {
+    const colors = ['Topic', 'Analysis', 'Datalab', 'Vantage'];
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+    return (_jsx("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => (_jsxs("div", { children: [
+                _jsxs("b", { children: [color, " colors"] }), _jsx("div", { className: "tw-p-4 light", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()}`, title: "Editable title example", isTitleEditable: true, titleIcon: "fc-check", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}`))) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()} tw-dark color_${color.toLowerCase()}_dark`, title: "Editable title example", isTitleEditable: true, titleIcon: "fc-check", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}_dark`))) })
+            ] }, color))) }));
+};
+export const ModalsWithCustomButton = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+        _jsxs("div", { children: [
+                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
+            ] })
+    ] }));
+export const ModalsWithVariantButton = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+        _jsxs("div", { children: [
+                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "theme" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "theme-light" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "warning" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "danger", customButtonLabel: "Back" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "outline" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "no-border", customButtonLabel: "Back" }) })
+            ] }), _jsxs("div", { children: [
+                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "theme", customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Modal with custom button", children: modalBody, submitButtonVariant: "outline", customButton: true, customButtonLabel: "Back" }) })
+            ] })
+    ] }));

package/dist/src/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/src/Modal/Modal.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Modal from './Modal';
+describe('Modal', () => {
+    class Context {
+        props = {
+            onTitleChanged: jest.fn(),
+            disableSubmitButton: false,
+            title: 'Testing Modal Dialog',
+            children: _jsx("div", { children: "Modal content" }),
+            open: true,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderModal = (props) => render(_jsx(Modal, { ...props }));
+    describe('renders Modal', () => {
+        it("doesn't render the modal if the open state is false", () => {
+            const open = false;
+            renderModal({ ...tc.props, open });
+            expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+        });
+        it('renders the modal if the open state is true', () => {
+            renderModal(tc.props);
+            expect(screen.getByTestId('modal')).toBeInTheDocument();
+            expect(screen.getByTestId('modal')).toHaveClass('tw-max-w-xl');
+        });
+        it('calls onClose modal when close button is clicked', async () => {
+            const onClose = jest.fn();
+            const { getByTestId } = renderModal({ ...tc.props, onClose });
+            expect(screen.getByTestId('modal')).toBeInTheDocument();
+            await userEvent.click(getByTestId('closeButton'));
+            expect(onClose).toHaveBeenCalled();
+        });
+        it('hides close button', () => {
+            const hideCloseIcon = true;
+            const { queryByTestId } = renderModal({ ...tc.props, hideCloseIcon });
+            expect(queryByTestId('closeButton')).not.toBeInTheDocument();
+        });
+        it('renders modal size based on the size prop', () => {
+            const size = 'lg';
+            renderModal({ ...tc.props, size });
+            expect(screen.getByTestId('modal')).toHaveClass('tw-max-w-lg');
+        });
+        it('renders not editable title', () => {
+            renderModal(tc.props);
+            expect(screen.getByTestId('modalTitle')).not.toHaveAttribute('value');
+        });
+        it('renders editable title', () => {
+            const isTitleEditable = true;
+            const { getByTestId } = renderModal({ ...tc.props, isTitleEditable });
+            expect(getByTestId('modalTitle')).toHaveAttribute('value');
+        });
+        it('calls onChange when title is modified', async () => {
+            const isTitleEditable = true;
+            const { getByTestId } = renderModal({ ...tc.props, isTitleEditable });
+            await userEvent.type(getByTestId('modalTitle'), 'a');
+            expect(tc.props.onTitleChanged).toHaveBeenCalled();
+        });
+        it('displays icon title', () => {
+            const titleIcon = 'fc-check';
+            const { getByTestId } = renderModal({ ...tc.props, titleIcon });
+            expect(getByTestId('modalTitleIcon')).toBeInTheDocument();
+        });
+        it('calls onSubmit when submit button is clicked', async () => {
+            const onSubmit = jest.fn();
+            const { getByTestId } = renderModal({ ...tc.props, onSubmit });
+            expect(getByTestId('submitButton')).not.toBeDisabled();
+            await userEvent.click(getByTestId('submitButton'));
+            expect(onSubmit).toHaveBeenCalled();
+        });
+        it('displays the disabled submit button', async () => {
+            const onSubmit = jest.fn();
+            const disableSubmitButton = true;
+            const { getByTestId } = renderModal({ ...tc.props, onSubmit, disableSubmitButton });
+            expect(getByTestId('submitButton')).toBeDisabled();
+            await userEvent.click(getByTestId('submitButton'));
+            expect(onSubmit).not.toHaveBeenCalled();
+        });
+        it('calls onClose when cancel button is clicked', async () => {
+            const onClose = jest.fn();
+            const { getByTestId } = renderModal({ ...tc.props, onClose });
+            expect(getByTestId('cancelButton')).not.toBeDisabled();
+            await userEvent.click(getByTestId('cancelButton'));
+            expect(onClose).toHaveBeenCalled();
+        });
+        it('displays custom button', () => {
+            const customButton = true;
+            const customButtonLabel = 'Back';
+            const { getByTestId } = renderModal({ ...tc.props, customButton, customButtonLabel });
+            expect(getByTestId('customButton')).toBeInTheDocument();
+        });
+        it('calls onClickCustomButton when custom button is clicked', async () => {
+            const customButton = true;
+            const customButtonLabel = 'Back';
+            const onClickCustomButton = jest.fn();
+            const { getByTestId } = renderModal({ ...tc.props, customButtonLabel, customButton, onClickCustomButton });
+            expect(getByTestId('customButton')).toBeInTheDocument();
+            await userEvent.click(getByTestId('customButton'));
+            expect(onClickCustomButton).toHaveBeenCalled();
+        });
+    });
+});