@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/components/UiComponents.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
+import React, { ReactNode, CSSProperties, ChangeEvent } from 'react';
+import { QuillTheme } from '@quillsql/react';
 export interface Option {
     value: string;
     label: string;
@@ -8,9 +9,11 @@ export interface SelectComponentProps {
     value: string;
     options: Option[];
     disabled?: boolean;
+    isLoading?: boolean;
     label?: string;
     theme?: any;
     style?: CSSProperties;
+    hideEmptyOption?: boolean;
 }
 export interface TextInputComponentProps {
     onChange: (e: any) => void;
@@ -30,8 +33,8 @@ export interface ModalComponentProps {
     isOpen: boolean;
     onClose?: () => void;
     title?: string;
-    setIsOpen: (isOpen: boolean) => void;
-    theme?: any;
+    theme?: QuillTheme;
+    style?: CSSProperties;
 }
 export interface HeaderProps {
     children: any;
@@ -47,13 +50,15 @@ export interface DeleteButtonProps {
     style: any;
 }
 export declare const MemoizedTextInput: ({ value, onChange, placeholder, id, width, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedButton: ({ label, onClick, isLoading, primary, style, width, }: {
+export declare const MemoizedButton: ({ label, onClick, isLoading, primary, style, width, disabled, tooltipText, }: {
     label: any;
     onClick: any;
     isLoading?: boolean | undefined;
     primary?: boolean | undefined;
     style?: {} | undefined;
     width?: string | undefined;
+    disabled?: boolean | undefined;
+    tooltipText?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const MemoizedSecondaryButton: ({ label, onClick, isLoading, }: {
     label: any;
@@ -90,6 +95,15 @@ export declare function MemoizedPopover({ onClose, parentRef, children, style, o
     isOpen: any;
     setIsOpen: any;
 }): import("react/jsx-runtime").JSX.Element;
+export interface TabsComponentProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+}
+export declare const QuillTabs: ({ options, value, onChange, }: TabsComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }: {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
@@ -102,7 +116,22 @@ export declare const MemoizedDeleteButton: ({ onClick, style }: {
     onClick: any;
     style: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingSpinner: ({ ...props }: {
-    [x: string]: any;
+export declare const LoadingSpinner: ({ scale }: {
+    scale?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillErrorMessageComponent: ({ containerStyle, errorMessage, }: {
+    containerStyle?: CSSProperties;
+    errorMessage: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const OverflowContainer: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillToolTip: ({ children, text, enabled, containerStyle, textStyle, displayBelow, }: {
+    children: ReactNode;
+    text: string;
+    enabled: boolean;
+    containerStyle?: CSSProperties;
+    textStyle?: CSSProperties;
+    displayBelow?: boolean;
+}) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
 //# sourceMappingURL=UiComponents.d.ts.map

package/dist/esm/components/UiComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKT,aAAa,EACb,WAAW,EACZ,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAI3D,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,iBAAiB,iDAM3B,uBAAuB,4CAkCzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;6CA8D1B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;6CAyCnC,CAAC;AAEF,eAAO,MAAM,cAAc;;6CAa1B,CAAC;AAEF,eAAO,MAAM,aAAa;;6CAYzB,CAAC;AAEF,eAAO,MAAM,YAAY;;6CAYxB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV;;;;;;;;;;CAAA,2CAgEA;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,SAAS,kCAInB,kBAAkB,4CAoDpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,CAiGd;AAED,eAAO,MAAM,oBAAoB;;;6CA2BhC,CAAC;AAEF,eAAO,MAAM,cAAc,cAAmB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4CA6C/D,CAAC;AAEF,eAAO,MAAM,0BAA0B,sCAGpC;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB,4CAsBA,CAAC;AAEF,eAAO,MAAM,iBAAiB;;6CA4F7B,CAAC;AAEF,eAAO,MAAM,YAAY,0EAOtB;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,uHA2EA,CAAC"}

package/dist/esm/components/UiComponents.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 //@ts-nocheck
-import { useContext, useRef, } from 'react';
+import { useContext, useEffect, useState, useRef, } from 'react';
 import { XIcon } from '../assets';
 import { ThemeContext } from '@quillsql/react';
 import useOnClickOutside from '../hooks/useOnClickOutside';
+import { QuillToolTipPortal } from './QuillToolTipPortal';
 export const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("div", { style: { position: 'relative', width: width }, children: [_jsx("style", { children: `
@@ -26,27 +27,39 @@ export const MemoizedTextInput = ({ value, onChange, placeholder, id, width, })
                     width: width ? 'calc(100% - 24px)' : '180px',
                 } })] }));
 };
-export const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', }) => {
+export const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', disabled = false, tooltipText = '', }) => {
     const [theme] = useContext(ThemeContext);
-    return (_jsxs("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily, ...style, width: width }, children: [_jsx("style", { children: `
-    .quill-button {
-        background-color: ${primary ? '#212121' : 'white'};
-        color: ${primary ? 'white' : '#212121'};
-        height: 40px;
-       border: 1px solid transparent;
-       font-weight: 500;
-       border-radius: 6px;
-       box-sizing: content-box;
-       padding-left: 16px;
-       padding-right: 16px;
-       white-space: nowrap;
-       font-size: 15px;
-       cursor: pointer;
-    }
-    .quill-button:hover {
-      background-color: rgba(56, 65, 81, 0.9);
-      border-radius: 6px;
-    }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
+    return (_jsx(QuillToolTipPortal, { text: tooltipText, enabled: tooltipText !== '', children: _jsxs("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', onClick: disabled ? undefined : onClick, style: {
+                fontFamily: theme?.fontFamily,
+                color: primary ? 'white' : '#212121',
+                height: 40,
+                display: 'flex',
+                border: 'none',
+                fontWeight: 500,
+                borderRadius: 6,
+                boxSizing: 'content-box',
+                paddingLeft: 16,
+                paddingRight: 16,
+                whiteSpace: 'nowrap',
+                fontSize: 15,
+                cursor: disabled ? 'default' : 'pointer',
+                position: 'relative',
+                justifyContent: 'center',
+                alignItems: 'center',
+                ...style,
+                width: width,
+            }, children: [_jsx("style", { children: `
+        .quill-button {
+            background-color: ${primary ? '#212121' : 'white'};
+        }
+        .quill-button-disabled {
+          background-color: rgba(56, 65, 81, 0.6);
+        }
+        .quill-button:hover {
+          background-color: rgba(56, 65, 81, 0.9);
+        }` }), isLoading ? (_jsx("div", { style: { position: 'absolute' }, children: _jsx(LoadingSpinner, {}) })) : null, _jsx("div", { style: {
+                        visibility: isLoading ? 'hidden' : 'visible',
+                    }, children: label })] }) }));
 };
 export const MemoizedSecondaryButton = ({ label, onClick, isLoading = false, }) => {
     const [theme] = useContext(ThemeContext);
@@ -103,7 +116,7 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
         if (isTriggerElem) {
             handleCloseModal();
         }
-    });
+    }, isOpen);
     const handleCloseModal = () => {
         setIsOpen(false);
         if (onClose) {
@@ -129,8 +142,56 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
                         ...style,
                     }, children: children }) }))] }));
 }
+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',
+            ...(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 function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
     const [theme] = useContext(ThemeContext);
+    useEffect(() => {
+        // Prevent scrolling in the background when the modal is open
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            // Re-enable scrolling when the modal is closed/unmounted
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen]);
     if (!isOpen) {
         return null;
     }
@@ -157,9 +218,9 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                     borderStyle: 'solid',
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
-                    overflow: 'scroll',
                     width: width ?? 'auto',
                     height: height ?? 'auto',
+                    overflow: 'auto',
                     maxWidth: 'calc(100vw - 82px)',
                     maxHeight: 'calc(100vh - 82px)',
                 }, children: _jsxs("div", { style: {
@@ -167,7 +228,6 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                         width: '100%',
                         maxWidth: 'calc(100vw - 82px)',
                         maxHeight: 'calc(100vh - 82px)',
-                        overflowY: 'scroll',
                         backgroundColor: '#ffffff',
                         display: 'flex',
                         flexDirection: 'column',
@@ -185,15 +245,14 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                                         marginLeft: 20,
                                         // width: '90%',
                                         textAlign: 'left',
-                                        paddingTop: 18,
                                         color: theme?.primaryTextColor,
                                     }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
 }
-export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
+export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { title: "Delete", className: "quill-delete-button", type: "button", onClick: onClick, style: {
         height: 40,
         width: 40,
         border: 'none',
-        cursor: 'pointer',
+        cursor: onClick ? 'pointer' : 'default',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -206,4 +265,148 @@ export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { c
   .quill-delete-button:hover {
     background-color: rgba(56, 65, 81, 0.03);
   }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
-export const LoadingSpinner = ({ ...props }) => (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "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: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "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 LoadingSpinner = ({ scale = 1 }) => (_jsxs("svg", { width: "24", height: "24", style: { scale: scale }, 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 QuillErrorMessageComponent = ({ containerStyle, errorMessage, }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("div", { style: {
+            borderRadius: 8,
+            backgroundColor: '#FF9494',
+            paddingLeft: '12px',
+            paddingRight: '8px',
+            height: 30,
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: 13,
+            fontWeight: 'bold',
+            fontFamily: theme?.fontFamily,
+            color: 'white',
+            ...containerStyle,
+        }, children: errorMessage }));
+};
+export const OverflowContainer = ({ children }) => {
+    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',
+    };
+    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: visible;
+          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;
+          transform: translateX(-50%);
+        }
+
+        .tooltip-container .tooltip-text::before {
+          border-color: rgba(231, 231, 231, 0);
+          ${displayBelow ? 'border-bottom-color: #e7e7e7;' : 'border-top-color: #e7e7e7;'}
+          border-width: 6px;
+        }
+
+        .tooltip-container .tooltip-text::after {
+          border-color: rgba(255, 255, 255, 0);
+          ${displayBelow ? 'border-bottom-color: #ffffff;' : 'border-top-color: #ffffff;'}
+          border-width: 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);
+};

package/dist/esm/components/VirtualTableTile.d.ts

@@ -0,0 +1,7 @@
+import { QuillTheme } from '../Admin';
+export default function VirtualTableTile({ query, name, theme, }: {
+    query: string;
+    name: string;
+    theme?: QuillTheme;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VirtualTableTile.d.ts.map

package/dist/esm/components/VirtualTableTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTableTile.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualTableTile.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,2CAgFA"}

package/dist/esm/components/VirtualTableTile.js

@@ -0,0 +1,48 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Highlight, themes } from 'prism-react-renderer';
+export default function VirtualTableTile({ query, name, theme, }) {
+    return (_jsxs("div", { className: `table-cell-${name}`, style: {
+            flex: 1,
+            width: '100%',
+            borderRadius: 8,
+            border: '1px solid #E5E7EB',
+        }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '0.5em 0.5em 0.5em 1em',
+                    borderBottom: '1px solid #E5E7EB',
+                    borderTopLeftRadius: 8,
+                    borderTopRightRadius: 8,
+                }, children: _jsx("h3", { style: {
+                        fontFamily: theme?.fontFamily,
+                        color: theme?.primaryTextColor,
+                        boxSizing: 'content-box',
+                        fontSize: 16,
+                        height: 32,
+                        alignContent: 'center',
+                        marginTop: 'auto',
+                        marginBottom: 'auto',
+                        fontWeight: '500',
+                        textOverflow: 'ellipsis',
+                        padding: 0,
+                        whiteSpace: 'nowrap',
+                        display: 'block',
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                    }, children: name }) }), _jsx(Highlight, { theme: themes.nightOwlLight, code: query || '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, style: {
+                        ...style,
+                        textAlign: 'left',
+                        padding: '1em',
+                        overflow: 'auto',
+                        height: 132,
+                        width: '100%',
+                        borderBottomLeftRadius: 8,
+                        borderBottomRightRadius: 8,
+                    }, children: tokens.map((line, i) => (_createElement("div", { ...getLineProps({ line }), key: i, style: {
+                            wordWrap: 'normal',
+                            whiteSpace: 'normal',
+                        } }, line.map((token, key) => (_jsx("span", { ...getTokenProps({ token }) }, key)))))) })) })] }, name));
+}

package/dist/esm/components/index.d.ts

@@ -1,6 +1,6 @@
-export { default as EnvSelectPopover } from "./EnvSelectPopover";
-export { default as OrgSelect } from "./OrgSelect";
-export { default as DropDownMenu } from "./DropDownMenu";
-export { default as DashboardManager } from "../public_components/DashboardManager";
-export { default as DashboardSelectPopover } from "./DashboardSelectPopover";
+export { default as EnvSelectPopover } from '../public_components/EnvSelectPopover';
+export { default as OrgSelect } from './OrgSelect';
+export { default as DropDownMenu } from './DropDownMenu';
+export { default as DashboardManager } from '../public_components/DashboardManager';
+export { default as DashboardSelectPopover } from './DashboardSelectPopover';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/components/index.js

@@ -1,5 +1,5 @@
-export { default as EnvSelectPopover } from "./EnvSelectPopover";
-export { default as OrgSelect } from "./OrgSelect";
-export { default as DropDownMenu } from "./DropDownMenu";
-export { default as DashboardManager } from "../public_components/DashboardManager";
-export { default as DashboardSelectPopover } from "./DashboardSelectPopover";
+export { default as EnvSelectPopover } from '../public_components/EnvSelectPopover';
+export { default as OrgSelect } from './OrgSelect';
+export { default as DropDownMenu } from './DropDownMenu';
+export { default as DashboardManager } from '../public_components/DashboardManager';
+export { default as DashboardSelectPopover } from './DashboardSelectPopover';

package/dist/esm/constants/dataTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const ALL_INT_TYPES: string[];
+//# sourceMappingURL=dataTypes.d.ts.map

package/dist/esm/constants/dataTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTypes.d.ts","sourceRoot":"","sources":["../../../src/constants/dataTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,UAmBzB,CAAC"}

package/dist/esm/constants/dataTypes.js

@@ -0,0 +1,20 @@
+export const ALL_INT_TYPES = [
+    'int4',
+    'int8',
+    'int2',
+    'integer',
+    'bigint',
+    'smallint',
+    'tinyint',
+    'byteint',
+    'real',
+    'double precision',
+    'smallserial',
+    'serial',
+    'bigserial',
+    'serial4',
+    'serial8',
+    'serial2',
+    'int64',
+    'int',
+];

package/dist/esm/forms/client_onboard/ConnectDatabase.d.ts

@@ -1,12 +1,21 @@
 import { CSSProperties } from 'react';
-import { ConnectionError, ConnectionType } from '../../utils/databases';
-import { SchemaDetails } from '../../utils/schema';
-export default function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, envClientId, }: {
+import { ConnectionType } from '../../utils/databases';
+import { QuillProviderClient } from '../../Admin';
+import { ColumnsByTable } from '../../utils/table';
+export default function ConnectDatabase({ containerStyle, header1Style, header2Style, environmentDetails, setEnvironmentDetails, fetchSchemasLoading, onConnectDatabase, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
-    environmentDetails?: ConnectionType;
-    setEnvironmentDetails: (connectionInfo?: ConnectionType, schemaDetails?: SchemaDetails, schemaError?: ConnectionError, clientId?: string) => void;
-    envClientId?: string;
+    header3Style?: CSSProperties;
+    environmentDetails: {
+        connection: ConnectionType;
+        client: Partial<QuillProviderClient & {
+            schemaNames: string[];
+        }>;
+        schema?: ColumnsByTable[];
+    };
+    setEnvironmentDetails: (connectionInfo: ConnectionType, schema: ColumnsByTable[], selectedSchemaNames: string[], clientId: string) => void;
+    fetchSchemasLoading: boolean;
+    onConnectDatabase?: (clientId: string) => Promise<void>;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectDatabase.d.ts.map

package/dist/esm/forms/client_onboard/ConnectDatabase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectDatabase.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectDatabase.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AAG/D,OAAO,EACL,eAAe,EACf,cAAc,EAIf,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,kBAAkB,EAClB,WAAgB,GACjB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,qBAAqB,EAAE,CACrB,cAAc,CAAC,EAAE,cAAc,EAC/B,aAAa,CAAC,EAAE,aAAa,EAC7B,WAAW,CAAC,EAAE,eAAe,EAC7B,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAwYA"}
+{"version":3,"file":"ConnectDatabase.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectDatabase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EASf,MAAM,uBAAuB,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE;QAClB,UAAU,EAAE,cAAc,CAAC;QAC3B,MAAM,EAAE,OAAO,CAAC,mBAAmB,GAAG;YAAE,WAAW,EAAE,MAAM,EAAE,CAAA;SAAE,CAAC,CAAC;QACjE,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;KAC3B,CAAC;IACF,qBAAqB,EAAE,CACrB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,cAAc,EAAE,EACxB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD,2CA0lBA"}