@quillsql/react 2.9.3 → 2.9.4

package/dist/cjs/SQLEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAoE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,GAC1B,EAAE,cAAc,2CA2YhB"}

package/dist/cjs/SQLEditor.js

@@ -0,0 +1,511 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertPostgresColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+const react_1 = require("react");
+const react_2 = __importDefault(require("@monaco-editor/react"));
+// import './nightOwlLight.css';
+const Context_1 = require("./Context");
+const Table_1 = require("./Table");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
+function convertPostgresColumn(column) {
+    let format;
+    let fieldType;
+    switch (column.dataTypeID) {
+        case 20: // int8
+        case 21: // int2
+        case 23: // int4
+            format = 'whole_number';
+            break;
+        case 700: // float4
+        case 701: // float8
+        case 1700: // numeric
+            format = 'two_decimal_places';
+            break;
+        case 1082: // date
+        case 1083: // time
+        case 1184: // timestamptz
+        case 1114: // timestamp
+            format = 'MMM_dd_yyyy';
+            break;
+        case 1043: // varchar
+        default:
+            format = 'string';
+    }
+    switch (column.dataTypeID) {
+        case 20: // int8
+            fieldType = 'int8';
+            break;
+        case 21: // int2
+            fieldType = 'int2';
+            break;
+        case 23: // int4
+            fieldType = 'int4';
+            break;
+        case 700: // float4
+            fieldType = 'float4';
+            break;
+        case 701: // float8
+            fieldType = 'float8';
+            break;
+        case 1700: // numeric
+            fieldType = 'numeric';
+            break;
+        case 1082: // date
+            fieldType = 'date';
+            break;
+        case 1083: // time
+            fieldType = 'time';
+            break;
+        case 1184: // timestamptz
+            fieldType = 'timestamptz';
+            break;
+        case 1114: // timestamp
+            fieldType = 'timestamp';
+            break;
+        case 1043: // varchar
+        default:
+            fieldType = 'varchar';
+    }
+    return {
+        label: column.name,
+        field: column.name,
+        format,
+        fieldType,
+    };
+}
+exports.convertPostgresColumn = convertPostgresColumn;
+function defineEditorTheme(monaco, theme) {
+    monaco.editor.defineTheme('onedark', {
+        base: theme.darkMode ? 'vs-dark' : 'vs',
+        inherit: true,
+        rules: [
+            {
+                token: 'comment',
+                foreground: '#5d7988',
+                fontStyle: 'italic',
+            },
+            { token: 'constant', foreground: '#e06c75' },
+        ],
+        colors: {
+            'editor.background': '#F9F9F9',
+        },
+    });
+}
+function setEditorTheme(editor, monaco) {
+    try {
+        monaco.editor.setTheme('onedark');
+    }
+    catch (e) {
+        console.log('ERROR: ', e);
+    }
+}
+const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_1.jsx)("button", { style: {
+        borderRadius: '6px',
+        backgroundColor: secondary
+            ? theme?.secondaryButtonColor || '#F5F5F5'
+            : theme?.primaryButtonColor,
+        opacity: 1,
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        // paddingTop: '10px',
+        // paddingBottom: '10px',
+        fontSize: '14px',
+        fontWeight: 600,
+        color: secondary ? theme?.primaryTextColor : '#FFFFFF',
+        cursor: 'pointer',
+        outline: 'none',
+        border: 'none',
+        fontFamily: theme?.fontFamily,
+        height: 38,
+    }, onClick: onClick, children: label }));
+const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
+    return ((0, jsx_runtime_1.jsx)("input", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            fontWeight: 'medium',
+            height: 38,
+            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
+            width: '445px',
+            backgroundColor: theme?.backgroundColor || 'white',
+            color: theme?.primaryTextColor,
+            borderWidth: '1px',
+            borderColor: theme?.borderColor || '#E7E7E7',
+            borderStyle: 'solid',
+            borderRadius: '6px',
+        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
+};
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, }) {
+    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [query, setQuery] = (0, react_1.useState)(defaultQuery);
+    const [rows, setRows] = (0, react_1.useState)([]);
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const [fields, setFields] = (0, react_1.useState)([]);
+    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
+    const [sqlQueryLoading, setSqlQueryLoading] = (0, react_1.useState)(false);
+    const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            setSchemaLoading(true);
+            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+            if (isSubscribed) {
+                setSchema(resp.tables);
+                setSchemaLoading(false);
+            }
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, []);
+    const handleRunSqlPrompt = async () => {
+        setSqlResponseLoading(true);
+        const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `quillai`, {
+            initialQuestion: sqlPrompt,
+        });
+        setQuery(resp.message);
+        setSqlResponseLoading(false);
+    };
+    const handleClearQuery = async () => {
+        setQuery('');
+    };
+    const handleRunQuery = async () => {
+        try {
+            setSqlQueryLoading(true);
+            const hostedBody = {
+                metadata: client.customerId
+                    ? {
+                        query,
+                        task: 'query',
+                        orgId: client.customerId,
+                        clientId: client.publicKey,
+                    }
+                    : { query, task: 'query', clientId: client.publicKey },
+            };
+            const cloudBody = { query };
+            const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+            if (resp && resp.errorMessage) {
+                setSqlQueryLoading(false);
+                setErrorMessage('Failed to run SQL query: ' + resp.errorMessage);
+                setRows([]);
+                setColumns([]);
+                setFields([]);
+                return;
+            }
+            setSqlQueryLoading(false);
+            setErrorMessage('');
+            setRows(resp.rows && resp.rows.length ? resp.rows : []);
+            if (onChangeData) {
+                onChangeData(resp.rows && resp.rows.length ? resp.rows : []);
+            }
+            setColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            if (onChangeColumns) {
+                onChangeColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            }
+            setFields(resp.fields);
+            if (onChangeFields) {
+                onChangeFields(resp.fields);
+            }
+        }
+        catch (e) {
+            console.log('ERROR: ', e);
+            return;
+        }
+    };
+    const handleAddToDashboard = () => {
+        setIsOpen(true);
+    };
+    /* all your useState and useContext calls and your useEffect hooks */
+    const downloadCSV = () => {
+        // report.rows
+        if (!rows.length) {
+            return;
+        }
+        const json = rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
+        // Header row
+        csvRows.push(fields.join(','));
+        // Data rows
+        for (const row of json) {
+            const values = fields.map((field) => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
+        }
+        // Create CSV string and create a 'blob' with it
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        // Create a download link and click it
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${query}.csv`;
+        downloadLink.href = URL.createObjectURL(csvBlob);
+        downloadLink.style.display = 'none';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+    };
+    (0, react_1.useEffect)(() => {
+        if (onChangeQuery) {
+            onChangeQuery(query);
+        }
+    }, [query]);
+    /* rest of your methods */
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: 0,
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            width: '100%',
+                            display: 'flex',
+                            height: '100%',
+                            flexDirection: 'row',
+                        }, children: [(0, jsx_runtime_1.jsx)(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    gap: 12,
+                                    flexDirection: 'column',
+                                    width: 'calc(100% - 250px)',
+                                    height: '100%',
+                                    overflowX: 'hidden',
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            // TODO: change color
+                                            background: 'white',
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            height: 'calc(50% - 80px)',
+                                            padding: 0,
+                                            margin: 0,
+                                            border: 'none',
+                                            outline: 'none',
+                                        }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    fontFamily: theme?.fontFamily,
+                                                    color: theme?.primaryTextColor,
+                                                    fontSize: 15,
+                                                    fontWeight: '400',
+                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        padding: 30,
+                                                        // TODO: change color
+                                                        background: 'rgba(0,0,0,0.02)',
+                                                        display: 'inline-block',
+                                                        flex: 0,
+                                                        borderRadius: 6,
+                                                        color: theme?.primaryTextColor,
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: errorMessage }) })), errorMessage
+                                                ? null
+                                                : (TableComponent && ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, height: "calc(100%)" }))) || ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: rows ?? [], columns: columns, height: "calc(100%)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, 
+                                                    // loading={true}
+                                                    theme: theme }))] }), chartBuilderEnabled && rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-end',
+                                            width: '100%',
+                                            height: '70px',
+                                            gap: '8px',
+                                        }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: rows, columns: columns, fields: fields, query: query, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem })] }));
+}
+exports.default = QueryEditor;
+const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            width: '100%',
+            height: '100%',
+            // minWidth: 450,
+            // overflowY: "scroll",
+            // padding: "20px 30px 20px 20px",
+            // marginLeft: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+            borderTopLeftRadius: 6,
+            borderBottomLeftRadius: 6,
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            overflow: 'hidden',
+        }, children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    height: 'calc(100% - 70px)',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#F9F9F9',
+                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.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: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] })) : ((0, jsx_runtime_1.jsx)(react_2.default, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                    wordWrap: 'on',
+                    minimap: {
+                        enabled: false,
+                    },
+                    padding: { top: 16 },
+                }, onChange: (query) => setQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 10 }, children: [(ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && ((0, jsx_runtime_1.jsx)("div", { children: (SecondaryButtonComponent && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { secondary: true, onClick: handleClearQuery, label: "Clear query", theme: theme })) }))] }) })] }));
+};
+const styles = {
+    columnHeader: {
+        boxSizing: 'border-box',
+        flex: '150 0 auto',
+        minWidth: '50px',
+        width: '150px',
+        position: 'relative',
+        cursor: 'pointer',
+        background: 'rgb(249, 250, 251)',
+        borderRight: '1px solid rgb(229, 231, 235)',
+        whiteSpace: 'nowrap',
+        display: 'flex',
+        alignItems: 'center',
+        overflowX: 'visible',
+        margin: '0px',
+        textOverflow: 'ellipsis',
+        minHeight: '36px',
+        // 2.25rem * 16px = 36px
+    },
+    columnHeaderLabel: {
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+        WebkitTapHighlightColor: 'transparent',
+        color: 'rgb(55, 65, 81)',
+        textDecoration: 'none',
+        fontWeight: 500,
+        fontSize: '14px', // 0.875rem * 16px = 14px
+        lineHeight: '20px', // 1.25rem * 16px = 20px
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
+};
+const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                background: theme.backgroundColor,
+                // maxHeight: 700,
+                width: 250,
+                minWidth: 250,
+                // overflowY: 'scroll',
+                height: '100%',
+                // maxHeight: "100%",
+                paddingLeft: 20,
+                paddingRight: 30,
+                paddingTop: 40,
+                display: 'flex',
+                // alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.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: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            width: 250,
+            minWidth: 250,
+            overflowY: 'auto',
+            height: '100%',
+            // maxHeight: "100%",
+            paddingLeft: 20,
+            paddingRight: 30,
+        }, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+};
+function SchemaItem({ elem, theme, index }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
+    const schemaContainerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        // WebkitTouchCallout: "none",
+        // WebkitUserSelect: "none",
+        // KhtmlUserSelect: "none",
+        // MozUserSelect: "none",
+        // msUserSelect: "none",
+        // userSelect: "none",
+    };
+    const schemaRowStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+    };
+    const schemaRowHoverStyle = {
+        background: theme.selectUnderlayColor,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
+                            marginLeft: theme.padding,
+                            fontSize: 13,
+                            color: '#384151',
+                            fontWeight: '500',
+                            whiteSpace: 'nowrap',
+                            padding: 0,
+                            margin: 0,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            userSelect: 'none',
+                            fontFamily: theme?.fontFamily,
+                        }, title: elem.displayName, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            // paddingRight: 25,
+                            paddingTop: 12,
+                            paddingBottom: 12,
+                            paddingLeft: 0,
+                            cursor: 'pointer',
+                            userSelect: 'none'
+                        }, children: isOpen ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z", clipRule: "evenodd" }) })) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingBottom: theme.padding,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: theme.padding,
+                    paddingRight: theme.padding,
+                }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        paddingTop: theme.padding,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, 
+                            // className="text-gray-500"
+                            style: {
+                                fontSize: 12,
+                                //   color: theme.secondaryFontColor,
+                                whiteSpace: 'nowrap',
+                                color: theme.secondaryTextColor,
+                                // color: "#6C727F",
+                                padding: 0,
+                                margin: 0,
+                                textOverflow: 'ellipsis',
+                                overflow: 'hidden',
+                                width: 200,
+                                maxWidth: 200,
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { 
+                            // className="text-gray-500"
+                            title: elem.displayName, style: {
+                                fontSize: 12,
+                                // color: '#6C727F',
+                                color: theme.secondaryTextColor,
+                                padding: 0,
+                                margin: 0,
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
+}

package/dist/cjs/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,KAAK,sGAQR,iBAAiB,GAAG,cAAc,4CAqEpC,CAAC;AAEF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAyBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,qBAA4B,EAC5B,WAAW,EACX,0BAA0B,EAC1B,6BAA6B,EAC7B,YAAoB,EACpB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B,CAAC,EAAE,CAC3B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,6BAA6B,CAAC,EAAE,CAC9B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAomBA;AA2UD,eAAe,KAAK,CAAC"}