@quillsql/react 2.15.2 → 2.15.4

package/dist/esm/components/UiComponents.js

@@ -1,924 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect, useRef, useState, } from 'react';
-import { XIcon } from '../assets';
-import { ThemeContext } from '../Context';
-import QuillTable from './QuillTable';
-import ChartSkeleton, { QuillLoadingSkeleton } from './Chart/ChartSkeleton';
-import { DEFAULT_PAGINATION } from '../utils/paginationProcessing';
-import { useOnClickOutside } from '../hooks';
-import { createPortal } from 'react-dom';
-import { getScrollableParent } from '../utils/ui';
-import { getEffectiveZIndex } from '../hooks/useOnClickOutside';
-/**
- * The fallback TextInput element for Quill.
- */
-export const QuillTextInput = forwardRef(({ id, value, width, label, placeholder, onChange, disabled, }, ref) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("label", { style: {
-            position: 'relative',
-            borderRadius: '6px',
-            width: width,
-            minWidth: width,
-        }, children: [label && (_jsx("div", { style: {
-                    fontSize: 14,
-                    color: theme?.secondaryTextColor,
-                    fontFamily: theme?.fontFamily,
-                    paddingBottom: 5,
-                    fontWeight: 600,
-                }, children: label })), _jsx("input", { ref: ref, style: {
-                    display: 'flex',
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                    borderRadius: 6,
-                    border: '1px solid #E7E7E7',
-                    fontSize: 14,
-                    boxSizing: 'border-box',
-                    paddingLeft: 13,
-                    backgroundColor: theme?.backgroundColor,
-                    color: theme?.primaryTextColor,
-                    fontFamily: theme?.fontFamily,
-                    width: width,
-                    minWidth: width,
-                }, id: id, value: value, placeholder: placeholder, onChange: onChange, disabled: disabled })] }));
-});
-export const MemoizedButton = ({ label, onClick, disabled, icon, tooltipText, isLoading, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx(QuillToolTip, { enabled: !!tooltipText && tooltipText !== '', text: tooltipText ?? '', children: _jsxs("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', onClick: onClick, disabled: disabled, style: {
-                fontFamily: theme?.fontFamily,
-                fontSize: '14px',
-                display: 'flex',
-                flexDirection: 'row',
-                whiteSpace: 'nowrap',
-                alignItems: 'center',
-                gap: 6,
-                borderRadius: 6,
-                height: 38,
-                border: '1px solid transparent',
-                fontWeight: theme?.buttonFontWeight ?? 600,
-                boxSizing: 'content-box',
-                paddingLeft: 16,
-                paddingRight: 16,
-                cursor: disabled ? 'default' : 'pointer',
-                position: 'relative',
-                justifyContent: 'center',
-            }, children: [_jsx("style", { children: `
-      .quill-button {
-        background-color: ${theme?.primaryButtonColor};
-        color: ${theme?.primaryButtonTextColor ?? 'white'};
-      }
-      .quill-button-disabled {
-        background-color: ${theme?.primaryButtonColor};
-        color: ${theme?.primaryButtonTextColor ?? 'white'};
-        opacity: 0.5;
-      }
-      .quill-button:hover {
-        background-color: ${theme?.hoverPrimaryButtonColor};
-        color: ${theme?.hoverPrimaryButtonTextColor ?? 'white'};
-      }` }), isLoading ? (_jsx("div", { style: { position: 'absolute' }, children: _jsx(LoadingSpinner, {}) })) : null, _jsxs("div", { style: {
-                        visibility: isLoading ? 'hidden' : 'visible',
-                    }, children: [icon, label] })] }) }));
-};
-export const MemoizedSecondaryButton = ({ label, onClick, icon, disabled, tooltipText, width, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx(QuillToolTip, { enabled: !!tooltipText && tooltipText !== '', text: tooltipText ?? '', children: _jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: {
-                fontFamily: theme?.fontFamily,
-                color: theme?.primaryTextColor,
-                height: '38px', // 40px - 2px for top and bottom border
-                border: '1px solid #E7E7E7',
-                fontWeight: 500,
-                borderRadius: '6px',
-                paddingLeft: '16px',
-                paddingRight: '16px',
-                boxSizing: width ? 'border-box' : 'content-box',
-                fontSize: '14px',
-                cursor: 'pointer',
-                whiteSpace: 'nowrap',
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-                width: width,
-            }, disabled: disabled, children: [_jsx("style", { children: `
-      .quill-secondary-button {
-        background-color: white;
-      }
-      .quill-secondary-button:hover {
-        background-color: #F4F4F5;
-      }
-      .quill-secondary-button:disabled {
-        opacity: 0.5;
-        background-color: white;
-      }
-      .icon-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        flex-shrink: 0;
-      }
-      ` }), icon && _jsx("div", { className: "icon-container", children: icon }), label && (_jsx("span", { style: {
-                        flexGrow: 1,
-                        minWidth: 0,
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                    }, children: label }))] }) }));
-};
-export const MemoizedHeader = ({ label }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("h1", { style: {
-            fontSize: 16,
-            fontWeight: 600,
-            fontFamily: theme?.fontFamily,
-            color: theme?.primaryTextColor || '#384151',
-            userSelect: 'none',
-            margin: 0,
-            paddingBottom: 0,
-        }, children: label }));
-};
-export const MemoizedSubHeader = ({ label }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("h2", { style: {
-            fontSize: 14,
-            fontWeight: 600,
-            fontFamily: theme?.fontFamily,
-            color: theme?.secondaryTextColor || '#575E6A',
-            userSelect: 'none',
-            margin: 0,
-            paddingTop: 6,
-            paddingBottom: 6,
-        }, children: label }));
-};
-export const MemoizedLabel = ({ label }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("h1", { style: {
-            fontSize: 14,
-            fontWeight: 600,
-            fontFamily: theme?.fontFamily,
-            color: theme?.secondaryTextColor || '#575E6A',
-            userSelect: 'none',
-            margin: 0,
-        }, children: label }));
-};
-export const MemoizedCheckbox = ({ isChecked, label, onChange, containerStyle, disabled, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("label", { style: {
-            display: 'flex',
-            width: '100%',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            gap: 4,
-            ...containerStyle,
-        }, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, disabled: disabled, style: {
-                    width: '14px',
-                    height: '14px',
-                    margin: 'auto 0',
-                    cursor: 'pointer',
-                } }), _jsx("span", { style: {
-                    display: 'block',
-                    marginTop: 'auto',
-                    marginBottom: 'auto',
-                    marginLeft: '6px',
-                    whiteSpace: 'nowrap',
-                    textOverflow: 'ellipsis',
-                    overflow: 'hidden',
-                    fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                }, children: label })] }));
-};
-export const DEFAULT_TAB_OPTIONS = [
-    { label: 'or', value: 'OR' },
-    { label: 'and', value: 'AND' },
-];
-export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) => (_jsx("div", { style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: '0.25rem',
-        outlineStyle: 'none',
-        background: '#F9FAFB',
-        padding: '5px',
-    }, children: options.map((option, index) => (_jsx("button", { onClick: () => {
-            // Manually create a synthetic ChangeEvent and pass it to callback
-            const changeEvent = { target: { value: option.value } };
-            onChange(changeEvent);
-        }, style: {
-            borderRadius: '0.25rem',
-            borderWidth: '1px',
-            outlineStyle: 'none',
-            transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            transitionDuration: '300ms',
-            margin: '0px',
-            paddingTop: '0.375rem',
-            paddingBottom: '0.375rem',
-            paddingLeft: '0.75rem',
-            paddingRight: '0.75rem',
-            border: '1px solid transparent',
-            ...(option.value === value
-                ? {
-                    fontWeight: 700,
-                    backgroundColor: '#ffffff',
-                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                    color: '#212121',
-                    borderColor: '#e7e7e7',
-                }
-                : {
-                    borderColor: 'transparent',
-                    fontWeight: 500,
-                    backgroundColor: 'transparent',
-                    color: '#606572',
-                }),
-        }, children: option.label }, index))) }));
-export const MemoizedText = ({ label }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("p", { style: {
-            fontSize: 12,
-            fontWeight: 400,
-            margin: 0,
-            color: '#575E6A',
-            userSelect: 'none',
-            fontFamily: theme?.fontFamily,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-        }, children: label }));
-};
-/**
- * The one, true Quill popover component.
- */
-export const MemoizedPopover = ({ isOpen, setIsOpen, triggerLabel, popoverTitle = undefined, popoverChildren, containerStyle, disabled, ignoredRefs, horizontalPadding = 20, titlePaddingLeft = 0, }) => {
-    const [theme] = useContext(ThemeContext);
-    const [rightAlignment, setRightAlignment] = useState('auto');
-    const modalRef = useRef(null);
-    const popoverRef = useRef(null);
-    useEffect(() => {
-        const listener = (event) => {
-            const target = event.target;
-            if (modalRef.current?.contains(target) ||
-                target.closest('[data-portal-ignore]') ||
-                ignoredRefs?.some((ref) => ref.current && ref.current.contains(event.target))) {
-                return;
-            }
-            setIsOpen(false);
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', listener);
-        }
-        else {
-            document.removeEventListener('mousedown', listener);
-        }
-        return () => {
-            document.removeEventListener('mousedown', listener);
-        };
-    }, [isOpen, ignoredRefs, setIsOpen, modalRef]);
-    useEffect(() => {
-        updatePopoverPosition();
-        window.addEventListener('resize', updatePopoverPosition);
-        return () => {
-            window.removeEventListener('resize', updatePopoverPosition);
-        };
-    }, [popoverRef.current, rightAlignment]);
-    const updatePopoverPosition = () => {
-        if (popoverRef.current && modalRef.current) {
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const modalRect = modalRef.current.getBoundingClientRect();
-            if (rightAlignment === 'auto' &&
-                window.innerWidth - popoverRect.right < 1 &&
-                popoverRect.left > popoverRect.width // need enough space on left too
-            ) {
-                setRightAlignment(0);
-            }
-            else if (rightAlignment === 0 &&
-                window.innerWidth - popoverRect.right + modalRect.width >
-                    popoverRect.width) {
-                setRightAlignment('auto');
-            }
-        }
-    };
-    return (_jsxs("div", { style: containerStyle, children: [triggerLabel, !disabled && isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsxs("div", { ref: popoverRef, style: {
-                        background: theme?.backgroundColor || 'white',
-                        position: 'absolute',
-                        boxShadow: '0px 1px 12px 0px #E7E7E705',
-                        border: theme
-                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#E7E7E7'}`
-                            : '1px solid #E7E7E7',
-                        boxSizing: 'content-box',
-                        zIndex: 999,
-                        // top: 12,
-                        borderRadius: 6,
-                        padding: `20px ${horizontalPadding}px 20px ${horizontalPadding}px`,
-                        right: rightAlignment,
-                    }, children: [popoverTitle && (_jsx("h1", { style: {
-                                fontWeight: '600',
-                                fontSize: 18,
-                                margin: 0,
-                                textAlign: 'left',
-                                marginBottom: 5,
-                                color: theme?.primaryTextColor,
-                                fontFamily: theme?.fontFamily,
-                                paddingLeft: titlePaddingLeft,
-                            }, children: popoverTitle })), popoverChildren] }) }))] }));
-};
-export function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
-    const [theme] = useContext(ThemeContext);
-    if (!isOpen) {
-        // @ts-ignore
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
-                    position: 'fixed',
-                    top: '0',
-                    right: '0',
-                    bottom: '0',
-                    left: '0',
-                    zIndex: '50',
-                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                    backdropFilter: 'blur(5px)',
-                }, onClick: () => setIsOpen(false) }), _jsx("div", { style: {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    zIndex: '50',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                    background: 'white',
-                    borderRadius: 8,
-                    borderStyle: 'solid',
-                    borderWidth: 1,
-                    borderColor: '#E7E7E7',
-                    overflow: 'scroll',
-                    width: width ?? 'auto',
-                    height: height ?? 'auto',
-                    maxWidth: 'calc(100vw - 82px)',
-                    maxHeight: 'calc(100vh - 82px)',
-                }, children: _jsxs("div", { style: {
-                        width: '100%',
-                        height: '100%',
-                        overflowY: 'scroll',
-                        backgroundColor: '#ffffff',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        position: 'relative',
-                        fontFamily: theme?.fontFamily,
-                    }, children: [_jsxs("div", { id: "quill-modal-header", style: {
-                                boxSizing: 'border-box',
-                                display: 'flex',
-                                flexDirection: 'row',
-                                width: '100%',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                padding: 10,
-                            }, children: [_jsx("h2", { style: {
-                                        fontSize: 18,
-                                        fontWeight: '600',
-                                        // width: '90%',
-                                        textAlign: 'left',
-                                        paddingLeft: 10,
-                                        color: theme?.primaryTextColor,
-                                    }, children: title }), _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })] }), _jsx("div", { style: {
-                                height: 'calc(100% - 60px)', // full height minus title
-                                width: '100%', // full width minus margin
-                            }, children: children })] }) })] }));
-}
-export const MemoizedDeleteButton = ({ onClick, }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
-        height: 40,
-        width: 40,
-        border: 'none',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 6,
-    }, children: [_jsx("style", { children: `
-  .quill-delete-button {
-      background-color: white;
-  }
-  .quill-delete-button:hover {
-    background-color: #F4F4F5;
-  }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
-export const LoadingSpinner = () => (_jsx("div", { style: {
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-    }, children: _jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-                , strokeDashoffset: "9.81" // calc(2 * 3.14 * 9.375 / 6)
-                , stroke: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 19.63" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)
-                , strokeDashoffset: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-                , stroke: "#ADB1B9", fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }) }));
-export const QuillTableSQLEditorComponent = ({ rows, columns, isLoading = false, rowCount, rowCountIsLoading, rowsPerPage, onPageChange, onSortChange, containerStyle, currentPage, setCurrentPage, hideLabels, }) => {
-    const [sort, setSort] = useState({ field: '', direction: '' });
-    const [page, setPage] = useState(0);
-    return (_jsx(QuillTable, { rows: rows, columns: columns, hideLabels: hideLabels ?? true, rowsPerPage: rowsPerPage || DEFAULT_PAGINATION.rowsPerPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => {
-            setPage(page);
-            setCurrentPage && setCurrentPage(page);
-            onPageChange && onPageChange(page);
-        }, onSortChange: (sort) => {
-            setSort(sort);
-            setCurrentPage && setCurrentPage(0);
-            setPage(0);
-            onSortChange && onSortChange(sort);
-        }, sort: sort, currentPage: currentPage ?? page, isLoading: isLoading, containerStyle: containerStyle }));
-};
-export const QuillTableReportBuilderComponent = ({ rows, columns, isLoading = false, rowCount, rowCountIsLoading, rowsPerPage, onPageChange, onSortChange, containerStyle, currentPage, setCurrentPage, disableSort, }) => {
-    const [sort, setSort] = useState({ field: '', direction: '' });
-    const [page, setPage] = useState(0);
-    useEffect(() => {
-        if (disableSort) {
-            setSort({ field: '', direction: '' });
-        }
-    }, [disableSort]);
-    return (_jsx(QuillTable, { rows: rows, columns: columns, rowsPerPage: rowsPerPage || DEFAULT_PAGINATION.rowsPerPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => {
-            setPage(page);
-            setCurrentPage && setCurrentPage(page);
-            onPageChange && onPageChange(page);
-        }, onSortChange: (sort) => {
-            setSort(sort);
-            setCurrentPage && setCurrentPage(0);
-            setPage(0);
-            onSortChange && onSortChange(sort);
-        }, sort: sort, currentPage: currentPage ?? page, isLoading: isLoading, containerStyle: containerStyle, disableSort: disableSort, overrideInMemortSort: true }));
-};
-export const QuillTableComponent = ({ rows, columns, isLoading = false, rowCount, rowCountIsLoading, onPageChange, onSortChange, currentPage, hideLabels, }) => {
-    const [sort, setSort] = useState({ field: '', direction: '' });
-    const [page, setPage] = useState(0);
-    const [initialLoad, setInitialLoad] = useState(true);
-    useEffect(() => {
-        if (initialLoad && !isLoading) {
-            setInitialLoad(false);
-        }
-    }, [isLoading]);
-    useEffect(() => {
-        setPage(currentPage || 0);
-    }, [currentPage]);
-    if (initialLoad) {
-        return (_jsx("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                margin: 'auto',
-                width: '100%',
-                height: '100%',
-            }, children: _jsx(ChartSkeleton, {}) }));
-    }
-    return (_jsx(QuillTable, { rows: rows, columns: columns, hideLabels: hideLabels, rowsPerPage: DEFAULT_PAGINATION.rowsPerPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => {
-            setPage(page);
-            onPageChange && onPageChange(page);
-        }, onSortChange: (sort) => {
-            setSort(sort);
-            setPage(0);
-            onSortChange && onSortChange(sort);
-        }, sort: sort, currentPage: page, isLoading: isLoading }));
-};
-export const QuillEmptyDashboardComponent = () => _jsx("div", {});
-const defaultFilterContainerStyles = {
-    display: 'flex',
-    width: '100%',
-    marginBottom: 25,
-    height: 66,
-};
-export const QuillLoadingDashboardComponent = ({ containerStyle, chartContainerStyle, LoadingComponent = QuillLoadingSkeleton, }) => {
-    return (_jsxs("div", { style: { ...containerStyle, overflow: 'hidden' }, children: [_jsx("div", { style: defaultFilterContainerStyles, children: _jsx(LoadingComponent, {}) }), _jsx("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill,minmax(400px, 1fr))',
-                    gridTemplateRows: `repeat(${170}px)`,
-                    gap: 40,
-                }, children: Array.from({ length: 4 }).map((_, index) => (_jsx("div", { style: chartContainerStyle, children: _jsx(LoadingComponent, {}, index) }, index))) })] }));
-};
-export const QuillChartBuilderInputRowContainer = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 12,
-        }, children: children }));
-};
-export const QuillChartBuilderInputColumnContainer = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 10,
-        }, children: children }));
-};
-export const QuillPivotRowContainer = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 16,
-        }, children: children }));
-};
-export const QuillPivotColumnContainer = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 32,
-        }, children: children }));
-};
-export const QuillFilterContainerComponent = ({ children, }) => {
-    return (_jsx("div", { style: {
-            width: '100%',
-            marginBottom: 25,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-end',
-            flexWrap: 'wrap',
-            gap: 12,
-        }, children: children }));
-};
-export const QuillModalComponent = ({ isOpen, setIsOpen, children, triggerLabel, title, }) => {
-    const [theme] = useContext(ThemeContext);
-    const [rightAlignment, setRightAlignment] = useState('auto');
-    const modalRef = useRef(null);
-    const popoverRef = useRef(null);
-    useEffect(() => {
-        const listener = (event) => {
-            if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
-                if (setIsOpen)
-                    setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', listener);
-        }
-        else {
-            document.removeEventListener('mousedown', listener);
-        }
-        return () => {
-            document.removeEventListener('mousedown', listener);
-        };
-    }, [modalRef, setIsOpen, isOpen]);
-    useEffect(() => {
-        updatePopoverPosition();
-        window.addEventListener('resize', updatePopoverPosition);
-        return () => {
-            window.removeEventListener('resize', updatePopoverPosition);
-        };
-    }, [popoverRef.current, rightAlignment]);
-    const updatePopoverPosition = () => {
-        if (popoverRef.current && modalRef.current) {
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const modalRect = modalRef.current.getBoundingClientRect();
-            if (rightAlignment === 'auto' &&
-                window.innerWidth - popoverRect.right < 1 &&
-                popoverRect.left > popoverRect.width // need enough space on left too
-            ) {
-                setRightAlignment(0);
-            }
-            else if (rightAlignment === 0 &&
-                window.innerWidth - popoverRect.right + modalRect.width >
-                    popoverRect.width) {
-                setRightAlignment('auto');
-            }
-        }
-    };
-    return (_jsxs("div", { style: { position: 'relative' }, ref: modalRef, children: [_jsx(MemoizedSecondaryButton, { onClick: () => {
-                    setIsOpen(!isOpen);
-                }, label: triggerLabel || '' }), title && title === 'Filters'
-                ? isOpen && (_jsx("div", { id: "quill-popover-modal", style: { position: 'relative', top: 10 }, children: _jsxs("div", { ref: popoverRef, style: {
-                            background: theme?.backgroundColor || 'white',
-                            position: 'absolute',
-                            boxShadow: '0px 1px 12px 0px #E7E7E705',
-                            border: theme
-                                ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#E7E7E7'}`
-                                : '1px solid #E7E7E7',
-                            boxSizing: 'content-box',
-                            zIndex: 999,
-                            // top: 12,
-                            borderRadius: 6,
-                            padding: 15,
-                            right: rightAlignment,
-                        }, children: [_jsx("h1", { style: {
-                                    fontWeight: '600',
-                                    fontSize: 18,
-                                    margin: 0,
-                                    textAlign: 'left',
-                                    marginBottom: 5,
-                                    color: theme?.primaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                }, children: title }), children] }) }))
-                : isOpen && (_jsxs("div", { children: [_jsx("div", { style: {
-                                position: 'fixed',
-                                top: '0',
-                                right: '0',
-                                bottom: '0',
-                                left: '0',
-                                zIndex: '50',
-                                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                                backdropFilter: 'blur(5px)',
-                            }, onClick: () => {
-                                setIsOpen(false);
-                            } }), _jsx("div", { style: {
-                                position: 'fixed',
-                                left: '50%',
-                                top: '50%',
-                                zIndex: '50',
-                                maxHeight: '90vh',
-                                minWidth: 462,
-                                maxWidth: '90vw',
-                                display: 'flex',
-                                transform: 'translateX(-50%) translateY(-50%)',
-                                background: 'white',
-                                borderRadius: 8,
-                                borderStyle: 'solid',
-                                borderWidth: 1,
-                                borderColor: '#e7e7e7',
-                                padding: 30,
-                                overflow: 'auto',
-                            }, children: _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minWidth: '60vw',
-                                }, children: [_jsx("h1", { style: {
-                                            fontWeight: '600',
-                                            fontSize: 18,
-                                            margin: 0,
-                                            textAlign: 'left',
-                                            marginBottom: 20,
-                                            color: theme?.primaryTextColor,
-                                            fontFamily: theme?.fontFamily,
-                                        }, children: title }), children] }) })] }))] }));
-};
-export const QuillChartBuilderFormContainer = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 24,
-            overflow: 'auto',
-            flexGrow: 1,
-            marginBottom: 40,
-        }, children: children }));
-};
-export const QuillErrorMessageComponent = ({ errorMessage, containerStyle, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            borderRadius: 8,
-            border: 'solid 1px #D32F2F',
-            backgroundColor: '#FFEBEE',
-            color: '#D32F2F',
-            padding: 12,
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: 14,
-            fontFamily: theme?.fontFamily,
-            fontWeight: 'medium',
-            marginRight: 'auto',
-            ...containerStyle,
-        }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", style: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 8,
-                    color: '#D32F2F',
-                }, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" }) }), errorMessage] }));
-};
-export const QuillColumnSearchEmptyState = () => {
-    const [theme] = useContext(ThemeContext);
-    return _jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
-};
-export const QuillLoadingComponent = () => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            width: 250,
-            minWidth: 250,
-            height: '100%',
-            paddingLeft: 20,
-            paddingRight: 30,
-            paddingTop: 40,
-            display: 'flex',
-            margin: '0px auto',
-            justifyContent: 'center',
-        }, children: [_jsx("div", { style: { height: 100 } }), _jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-                        , strokeDashoffset: "9.81" // calc(2 * 3.14 * 9.375 / 6)
-                        , stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 19.63" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)
-                        , strokeDashoffset: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-                        , stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] }));
-};
-export const OverflowContainer = ({ children, style, }) => {
-    const containerRef = useRef(null);
-    const [showTopShadow, setShowTopShadow] = useState(false);
-    const [showBottomShadow, setShowBottomShadow] = useState(false);
-    const checkOverflow = () => {
-        const container = containerRef.current;
-        if (container) {
-            const { scrollTop, scrollHeight, clientHeight } = container;
-            setShowTopShadow(scrollTop > 0);
-            setShowBottomShadow(scrollHeight > clientHeight && scrollTop < scrollHeight - clientHeight);
-        }
-    };
-    useEffect(() => {
-        const container = containerRef.current;
-        if (container) {
-            checkOverflow();
-            const topObserver = new IntersectionObserver(([entry]) => setShowTopShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
-            const bottomObserver = new IntersectionObserver(([entry]) => setShowBottomShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
-            const topSentinel = document.createElement('div');
-            const bottomSentinel = document.createElement('div');
-            container.insertBefore(topSentinel, container.firstChild);
-            container.appendChild(bottomSentinel);
-            topObserver.observe(topSentinel);
-            bottomObserver.observe(bottomSentinel);
-            return () => {
-                topObserver.disconnect();
-                bottomObserver.disconnect();
-                container.removeChild(topSentinel);
-                container.removeChild(bottomSentinel);
-            };
-        }
-    }, []);
-    const containerStyle = {
-        position: 'relative',
-        overflowY: 'auto',
-        overscrollBehavior: 'none',
-        ...style,
-    };
-    const shadowStyle = {
-        position: 'sticky',
-        left: 0,
-        right: 0,
-        height: '8px',
-        marginTop: '-8px',
-        pointerEvents: 'none',
-        zIndex: 1,
-        // transition: 'opacity 0.3s ease',
-    };
-    const topShadowStyle = {
-        top: 0,
-        background: 'linear-gradient(to bottom, rgba(56, 65, 81, 0.08), rgba(0,0,0,0))',
-        opacity: showTopShadow ? 1 : 0,
-        ...shadowStyle,
-    };
-    const bottomShadowStyle = {
-        bottom: 0,
-        background: 'linear-gradient(to top, rgba(56, 65, 81, 0.08), rgba(0,0,0,0))',
-        opacity: showBottomShadow ? 1 : 0,
-        ...shadowStyle,
-    };
-    return (_jsxs("div", { style: containerStyle, ref: containerRef, onScroll: checkOverflow, onTouchMove: checkOverflow, onMouseMove: checkOverflow, children: [_jsx("div", { style: topShadowStyle }), children, _jsx("div", { style: bottomShadowStyle })] }));
-};
-export const QuillToolTip = ({ children, text, enabled = true, containerStyle = {}, textStyle = {}, displayBelow = false, }) => {
-    const [theme] = useContext(ThemeContext);
-    return enabled ? (_jsxs("div", { className: "tooltip-container", style: { ...containerStyle }, children: [_jsx("style", { children: `
-        .tooltip-container {
-          position: relative;
-          display: inline-block;
-        }
-
-        /* Tooltip text */
-        .tooltip-container .tooltip-text {
-          visibility: hidden;
-          width: auto;
-          background-color: #ffffff;
-          color: #212121;
-          text-align: center;
-          border-radius: 5px;
-          padding: 5px;
-          position: absolute;
-          z-index: 10;
-          ${displayBelow ? 'top: 125%;' : 'bottom: 125%;'}
-          opacity: 0;
-          transition: opacity 0.3s;
-          font-family: ${theme?.fontFamily};
-          font-size: small;
-          white-space: nowrap;
-          border-width: 1px;
-          border-style: solid;
-          border-color: #e7e7e7;
-          padding: 10px;
-        }
-
-        /* Tooltip arrow */
-        .tooltip-container .tooltip-text::before,
-        .tooltip-container .tooltip-text::after {
-          content: "";
-          position: absolute;
-          ${displayBelow ? 'bottom: 100%;' : 'top: 100%;'}
-          left: 50%;
-          border: solid transparent;
-          height: 0;
-          width: 0;
-          pointer-events: none;
-        }
-
-        .tooltip-container .tooltip-text::before {
-          border-color: rgba(231, 231, 231, 0);
-          ${displayBelow ? 'border-bottom-color: #e7e7e7;' : 'border-top-color: #e7e7e7;'}
-          border-width: 6px;
-          margin-left: -5.5px;
-        }
-
-        .tooltip-container .tooltip-text::after {
-          border-color: rgba(255, 255, 255, 0);
-          ${displayBelow ? 'border-bottom-color: #ffffff;' : 'border-top-color: #ffffff;'}
-          border-width: 5px;
-          margin-left: -5px;
-        }
-
-        /* Show the tooltip when hovering over the button */
-        .tooltip-container:hover .tooltip-text {
-          visibility: visible;
-          opacity: 1;
-        }` }), children, _jsx("div", { className: "tooltip-text", style: { ...textStyle }, children: text })] })) : (children);
-};
-export const QuillChartBuilderCheckboxComponent = ({ isChecked, label, onChange, disabled, containerStyle, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("div", { style: {
-            boxShadow: '0px 1px 4px #E7E7E705',
-            paddingTop: 4,
-            paddingBottom: 4,
-            paddingLeft: 8,
-            paddingRight: 8,
-            border: '1px solid #E7E7E7',
-            borderRadius: 4,
-            display: 'flex',
-            alignItems: 'center',
-            backgroundColor: disabled
-                ? '#F5F5F5'
-                : theme?.backgroundColor || 'white',
-            opacity: disabled ? 0.6 : 1,
-            pointerEvents: disabled ? 'none' : 'auto',
-            ...containerStyle,
-        }, children: _jsx(MemoizedCheckbox, { isChecked: isChecked, label: label, onChange: disabled ? () => { } : onChange, containerStyle: { fontSize: 14, fontWeight: 500, height: '100%' } }) }));
-};
-export const QuillPortal = ({ children, containerStyle, anchorRef, showModal, setShowModal, }) => {
-    const modalRef = useRef(null);
-    const [popoverPosition, setPopoverPosition] = useState(undefined);
-    const [z, setZ] = useState(10);
-    const scrollableParentRef = useRef(document.body);
-    const updatePosition = () => {
-        if (anchorRef.current) {
-            requestAnimationFrame(() => {
-                const rect = anchorRef?.current?.getBoundingClientRect();
-                if (rect) {
-                    const viewportHeight = window.innerHeight;
-                    // Calculate available space below the element with a 64px bottom margin
-                    const availableHeight = viewportHeight - rect.bottom - 64;
-                    setPopoverPosition({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
-                        width: rect.width,
-                        maxHeight: availableHeight,
-                    });
-                }
-            });
-        }
-    };
-    useEffect(() => {
-        let resizeObserver;
-        let mutationObserver;
-        if (showModal && anchorRef.current) {
-            updatePosition();
-            setZ(getEffectiveZIndex(anchorRef.current) + 1);
-            resizeObserver = new ResizeObserver(() => updatePosition());
-            resizeObserver.observe(anchorRef.current);
-            mutationObserver = new MutationObserver(() => updatePosition());
-            mutationObserver.observe(anchorRef.current, {
-                attributes: true,
-                subtree: true,
-            });
-            // Track scrolling of the nearest scrollable ancestor
-            scrollableParentRef.current = getScrollableParent(anchorRef.current);
-            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
-                passive: true,
-            });
-            const handleResize = () => requestAnimationFrame(updatePosition);
-            window.addEventListener('resize', handleResize, { passive: true });
-            return () => {
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-                scrollableParentRef.current.removeEventListener('scroll', updatePosition);
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [showModal]);
-    useOnClickOutside(modalRef, (event) => {
-        if (!anchorRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    return createPortal(_jsx("div", { style: {
-            position: 'absolute',
-            top: `${popoverPosition?.top ?? 0}px`,
-            left: `${popoverPosition?.left ?? 0}px`,
-            width: `${popoverPosition?.width ?? 0}px`,
-            maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
-            visibility: popoverPosition ? 'visible' : 'hidden',
-            // display: 'flex',
-            // flexDirection: 'column',
-            // boxSizing: 'border-box',
-            // borderWidth: 1,
-            // borderStyle: 'solid',
-            // borderColor: theme?.borderColor,
-            // borderRadius: 6,
-            // background: theme?.backgroundColor,
-            // marginTop: 12,
-            zIndex: z,
-            // padding: 6,
-            // fontFamily: theme?.fontFamily,
-            // overflow: 'scroll',
-            // fontSize: 14,
-            ...containerStyle,
-        }, ref: modalRef, "data-portal-ignore": "true", children: children }), document.body);
-};