@quillsql/react 2.10.29 → 2.10.31

package/dist/esm/SQLEditor.d.ts

@@ -1,54 +0,0 @@
-import React from 'react';
-import { TableComponentProps } from './components/UiComponents';
-export declare function convertPostgresColumn(column: any): {
-    label: any;
-    field: any;
-    format: string;
-    fieldType: string;
-};
-interface ButtonComponentProps {
-    onClick: () => void;
-    label: string;
-}
-interface SQLEditorProps {
-    containerStyle: React.CSSProperties;
-    ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-    SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-    TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
-    TableComponent?: (props: TableComponentProps) => JSX.Element;
-    LoadingComponent?: () => JSX.Element;
-    onChangeQuery?: (query: string) => void;
-    onChangeData?: (data: object[]) => void;
-    onChangeColumns?: (columns: object[]) => void;
-    onChangeFields?: (fields: object[]) => void;
-    defaultQuery?: string;
-    chartBuilderEnabled?: boolean;
-    showTableFormatOptions?: boolean;
-    showDateFieldOptions?: boolean;
-    showAccessControlOptions?: boolean;
-    destinationDashboard?: string;
-    newQueryEnabled?: boolean;
-    isEditMode?: boolean;
-    dashboardItem?: any;
-    chartBuilderTitle?: string;
-    chartBuilderButtonLabel?: string;
-    addToDashboardButtonLabel?: string;
-    onAddToDashboardComplete?: () => void;
-    organizationName?: string;
-}
-interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    placeholder?: string;
-}
-export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
-export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, }: {
-    schema: any;
-    theme: any;
-    loading: any;
-    LoadingComponent: any;
-    width: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=SQLEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;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;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,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,cAA2B,EAC3B,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,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAqUhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -1,494 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-import { useState, useContext, useEffect } from 'react';
-import MonacoEditor from '@monaco-editor/react';
-// import './nightOwlLight.css';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import QuillTable from './components/QuillTable';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
-import ChartBuilder from './ChartBuilder';
-export 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 1186: // interval
-        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 1186: // interval
-            fieldType = 'interval';
-            break;
-        case 1114: // timestamp
-            fieldType = 'timestamp';
-            break;
-        case 1043: // varchar
-        default:
-            fieldType = 'varchar';
-    }
-    return {
-        label: column.name,
-        field: column.name,
-        format,
-        fieldType,
-    };
-}
-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, }) => (_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 (_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 }));
-};
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, 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, organizationName = undefined, }) {
-    const [sqlPrompt, setSqlPrompt] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [client] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const [query, setQuery] = useState(defaultQuery);
-    const [rows, setRows] = useState([]);
-    const [columns, setColumns] = useState([]);
-    const [fields, setFields] = useState([]);
-    const [schema, setSchema] = useContext(SchemaContext);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
-    const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
-    const [schemaLoading, setSchemaLoading] = useState(false);
-    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [displayTable, setDisplayTable] = useState(false);
-    const getSchema = async (isSubscribed) => {
-        setSchemaLoading(true);
-        const { queryEndpoint, queryHeaders, publicKey } = client;
-        const response = await fetch(`${queryEndpoint}`, {
-            method: 'POST',
-            headers: {
-                ...queryHeaders,
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                metadata: {
-                    clientId: publicKey,
-                    publicKey: publicKey,
-                    task: 'schema',
-                },
-            }),
-        });
-        const data = await response.json();
-        if (isSubscribed) {
-            setSchema(data.data.tables);
-            setSchemaLoading(false);
-        }
-    };
-    useEffect(() => {
-        let isSubscribed = true;
-        if (isSubscribed && client) {
-            getSchema(isSubscribed);
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [client]);
-    const handleRunSqlPrompt = async () => {
-        setSqlResponseLoading(true);
-        const resp = await getDataFromCloud(client, `quillai`, {
-            initialQuestion: sqlPrompt,
-        });
-        setQuery(resp.message);
-        setSqlResponseLoading(false);
-    };
-    const handleClearQuery = async () => {
-        setQuery('');
-    };
-    const handleRunQuery = async () => {
-        try {
-            setDisplayTable(true);
-            setSqlQueryLoading(true);
-            setErrorMessage('');
-            const hostedBody = {
-                metadata: {
-                    query,
-                    task: 'query',
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    databaseType: client?.databaseType,
-                },
-            };
-            const cloudBody = { query };
-            const resp = await 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('');
-            if (resp.rows.length === 0) {
-                setErrorMessage('No data found');
-            }
-            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;
-        }
-    };
-    /* all your useState and useContext calls and your useEffect hooks */
-    useEffect(() => {
-        if (onChangeQuery) {
-            onChangeQuery(query);
-        }
-    }, [query]);
-    /* rest of your methods */
-    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: {
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    padding: 0,
-                }, children: _jsx("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
-                            width: '100%',
-                            display: 'flex',
-                            height: '100%',
-                            flexDirection: 'row',
-                            gap: 20,
-                        }, children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    // gap: 12,
-                                    flexDirection: 'column',
-                                    width: 'calc(100% - 290px)',
-                                    height: '100%',
-                                    overflowX: 'hidden',
-                                }, children: [_jsxs("div", { style: {
-                                            // TODO: change color
-                                            background: 'white',
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            height: 80,
-                                        }, children: [_jsx("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _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 }) }), _jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            height: 'calc(50% - 108px)',
-                                            padding: 0,
-                                            margin: 0,
-                                            border: 'none',
-                                            outline: 'none',
-                                        }, children: [errorMessage && (_jsx("div", { style: {
-                                                    fontFamily: theme?.fontFamily,
-                                                    color: theme?.primaryTextColor,
-                                                    fontSize: 15,
-                                                    fontWeight: '400',
-                                                }, children: _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 || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading, showDownloadCSVButton: true }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            justifyContent: 'flex-end',
-                                            width: '100%',
-                                            height: '70px',
-                                        }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) }), _jsx(ChartBuilder, { 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, organizationName: organizationName })] }));
-}
-const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
-    return (_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',
-            borderTopLeftRadius: 6,
-            borderBottomLeftRadius: 6,
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            overflow: 'hidden',
-        }, children: [loading ? (_jsxs("div", { style: {
-                    height: 'calc(100% - 70px)',
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: '#F9F9F9',
-                }, children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_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: 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: "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" }) })] }))] })) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
-                    wordWrap: 'on',
-                    minimap: {
-                        enabled: false,
-                    },
-                    padding: { top: 16 },
-                }, onChange: (query) => setQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), _jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    height: 70,
-                }, children: _jsxs("div", { style: { display: 'flex' }, children: [(ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && (_jsx("div", { children: (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || (_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',
-    },
-};
-export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, }) => {
-    if (loading) {
-        return (_jsxs("div", { style: {
-                background: theme.backgroundColor,
-                // maxHeight: 700,
-                width: width || 250,
-                minWidth: 250,
-                // overflowY: 'scroll',
-                height: '100%',
-                // maxHeight: "100%",
-                paddingLeft: 20,
-                paddingRight: 30,
-                paddingTop: 40,
-                display: 'flex',
-                // alignItems: 'center',
-                justifyContent: 'center',
-            }, children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_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: 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: "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" }) })] }))] }));
-    }
-    return (_jsx("div", { style: {
-            background: theme.backgroundColor,
-            // maxHeight: 700,
-            width: width || 250,
-            minWidth: 250,
-            overflowY: 'auto',
-            height: '100%',
-            // maxHeight: "100%",
-            paddingLeft: 20,
-            paddingRight: 30,
-        }, children: schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
-};
-function SchemaItem({ elem, theme, index }) {
-    const [isOpen, setIsOpen] = 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 (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [_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 }), _jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            // paddingRight: 25,
-                            paddingTop: 12,
-                            paddingBottom: 12,
-                            paddingLeft: 0,
-                            cursor: 'pointer',
-                            userSelect: 'none',
-                        }, children: isOpen ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: _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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: _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 ? (_jsx("div", { style: {
-                    paddingBottom: theme.padding,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    paddingLeft: theme.padding,
-                    paddingRight: theme.padding,
-                }, children: elem.columns.map((elem, index) => (_jsxs("div", { style: {
-                        paddingTop: theme.padding,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [_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 }), _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/esm/TableChart.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-interface YAxisField {
-    label: string;
-    field: string;
-    chartType?: string;
-}
-export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
-    data: object[];
-    yAxisFields: YAxisField[];
-    colors: string[];
-}
-export declare function hexToRgbaWith10PercentAlpha(hex: any): string;
-declare const TableChart: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLDivElement>>;
-export default TableChart;
-//# sourceMappingURL=TableChart.d.ts.map

package/dist/esm/TableChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAqEjD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAuED,QAAA,MAAM,UAAU,qFAoQf,CAAC;AAEF,eAAe,UAAU,CAAC"}