@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/SQLEditor.js

@@ -0,0 +1,510 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import { useState, useContext, useEffect, useRef, } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+import { ClientContext, CustomFieldContext, SchemaContext, ThemeContext, } from './Context';
+import { getDataFromCloud } from './utils/dataFetcher';
+import { ChartBuilderWithModal, createInitialFormData } from './ChartBuilder';
+import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedModal, MemoizedPopover, MemoizedSecondaryButton, MemoizedSubHeader, MemoizedText, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableSQLEditorComponent, } from './components/UiComponents';
+import { QuillTextInput } from './components/UiComponents';
+import { updateFirstChildWidth } from './utils/width';
+import { QuillCard } from './components/QuillCard';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { fetchTableByQuery, } from './utils/tableProcessing';
+import { processColumnReference } from './utils/queryConstructor';
+import { generateSuggestionsByDatasource, generateSuggestionsBySchema, QUILL_LANGUAGE, } from './utils/monacoConfig';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { EMPTY_REPORT, formatRowsFromReport } from './utils/report';
+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, schema, databaseType, clientName) {
+    try {
+        monaco.editor.setTheme('onedark');
+        monaco.languages.register({ id: clientName });
+        monaco.languages.setMonarchTokensProvider(clientName, QUILL_LANGUAGE.monarchTokensProvider);
+        monaco.languages.setLanguageConfiguration(clientName, QUILL_LANGUAGE.languageConfiguration);
+        const provider = monaco.languages.registerCompletionItemProvider(clientName, {
+            provideCompletionItems: function (model, position) {
+                const word = model.getWordUntilPosition(position);
+                const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
+                const databaseSuggestions = generateSuggestionsByDatasource(monaco, range, databaseType);
+                const schemaSuggestions = generateSuggestionsBySchema(schema, monaco, range, databaseType);
+                return {
+                    suggestions: [...databaseSuggestions, ...schemaSuggestions],
+                };
+            },
+        });
+        return provider;
+    }
+    catch (e) {
+        return null;
+    }
+}
+/**
+ * ### Quill SQLEditor
+ *
+ * Allows your users to build and write custom SQL queries and then add those
+ * queries into their dashboard as a metric, chart, or table.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <SQLEditor />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components and default values.
+ * <SQLEditor
+ *   defaultQuery="SELECT SUM(amount) FROM TRANSACTIONS"
+ *   ButtonComponen={MyButton}
+ *   SecondaryButtonComponen={MySecondaryButton}
+ * />
+ * ```
+ *
+ * ### SQLEditor API
+ * @see https://docs.quillsql.com/components/sql-editor
+ */
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
+    const [sqlPrompt, setSqlPrompt] = useState('');
+    const [client] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const [query, setQuery] = useState(defaultQuery);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [customFields, setCustomFields] = useContext(CustomFieldContext);
+    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 formRef = useRef(null);
+    const [searchBarWidth, setSearchBarWidth] = useState(200);
+    const [formattedRows, setFormattedRows] = useState([]);
+    const [rowCount, setRowCount] = useState(undefined);
+    const [maxPage, setMaxPage] = useState(1);
+    const [tempReport, setTempReport] = useState({
+        ...EMPTY_REPORT,
+        ...report,
+    });
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: DEFAULT_PAGINATION,
+    });
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const getSchema = async () => {
+        const { schemaData, customFieldsByTable } = await getSchemaInfoWithCustomFields(client);
+        setSchema(schemaData);
+        setCustomFields(customFieldsByTable);
+        setSchemaLoading(false);
+    };
+    useEffect(() => {
+        if (client && !schemaLoading) {
+            setSchemaLoading(true);
+            getSchema();
+            setRows([]);
+            setColumns([]);
+            setDisplayTable(false);
+        }
+    }, [client.publicKey]);
+    const handleRunSqlPrompt = async () => {
+        setSqlResponseLoading(true);
+        const resp = await getDataFromCloud(client, `quillai`, {
+            initialQuestion: sqlPrompt,
+        });
+        setQuery(resp.message);
+        setSqlResponseLoading(false);
+    };
+    const handleClearQuery = async () => {
+        setQuery('');
+    };
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, maxPage)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            handleRunQuery(updatedProcessing);
+        }
+        if (page > maxPage) {
+            setMaxPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (tempReport && shouldSortInMemory(DEFAULT_PAGINATION, rowCount, false)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        handleRunQuery(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setMaxPage(0);
+    };
+    const handleRunQuery = async (processing, resetRows = false) => {
+        try {
+            if (!query) {
+                throw new Error('No query found');
+            }
+            setDisplayTable(true);
+            setSqlQueryLoading(true);
+            setErrorMessage('');
+            const tableInfo = await fetchTableByQuery(query, client, processing, customFields);
+            if (!!tableInfo.error) {
+                throw new Error(tableInfo.error);
+            }
+            else if (tableInfo.rows.length === 0) {
+                throw new Error('No data found');
+            }
+            if (tableInfo.rowCount) {
+                setRowCount(tableInfo.rowCount);
+            }
+            setSqlQueryLoading(false);
+            setCurrentProcessing(processing);
+            let tempRows = [...rows, ...tableInfo.rows];
+            if (resetRows) {
+                tempRows = tableInfo.rows;
+            }
+            setRows(tempRows);
+            setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            if (onChangeData) {
+                onChangeData(tempRows);
+            }
+            setColumns(tableInfo.columns);
+            if (onChangeColumns) {
+                onChangeColumns(tableInfo.columns);
+            }
+            if (onChangeFields) {
+                onChangeFields(tableInfo.columns);
+            }
+            const formData = report
+                ? report
+                : createInitialFormData(tableInfo.columns);
+            setTempReport({
+                ...tempReport,
+                ...formData,
+                itemQuery: tableInfo.itemQuery,
+                rowCount: tableInfo.rowCount ?? tableInfo.rows.length,
+                filtersApplied: tempReport.filtersApplied ?? [],
+                rows: tempRows,
+                columns: tableInfo.columns,
+            });
+        }
+        catch (e) {
+            setErrorMessage(e.message);
+            return;
+        }
+    };
+    const handleFixWithAI = async () => {
+        try {
+            setDisplayTable(false);
+            setSqlResponseLoading(true);
+            const resp = await getDataFromCloud(client, 'plsfix', {
+                initialQuestion: sqlPrompt,
+                brokenQuery: query,
+                errorMessage: errorMessage,
+            });
+            setErrorMessage('');
+            setQuery(resp.message);
+            setSqlResponseLoading(false);
+        }
+        catch (e) {
+            setErrorMessage('Failed to fix query');
+            setSqlResponseLoading(false);
+        }
+    };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (!name) {
+            return;
+        }
+        // FOR Big Query it actually makes more sense to not wrap the table reference in quotes
+        const newQuery = `SELECT * FROM ${processColumnReference(name, client.databaseType)};`.replaceAll('`', '');
+        if (!query || query.length === 0) {
+            setQuery(newQuery);
+        }
+        await navigator.clipboard.writeText(newQuery);
+    };
+    useEffect(() => {
+        if (onChangeQuery) {
+            onChangeQuery(query || '');
+        }
+    }, [query]);
+    return (_jsxs("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
+                (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_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, onClick: handleClickSchemaItem }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    // gap: 12,
+                                    flexDirection: 'column',
+                                    width: 'calc(100% - 290px)',
+                                    height: '100%',
+                                    overflowX: 'hidden',
+                                }, children: [_jsxs("form", { ref: formRef, onSubmit: (e) => {
+                                            e.preventDefault();
+                                            handleRunSqlPrompt();
+                                        }, style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            gap: 12,
+                                            paddingTop: 16,
+                                            paddingBottom: 16,
+                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" })] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query || '', schema: schema, databaseType: client.databaseType, clientName: client.publicKey, setQuery: setQuery, handleRunQuery: () => {
+                                                handleRunQuery(currentProcessing, true);
+                                            }, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, setEditorMounted: () => { }, 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',
+                                                    width: '100%',
+                                                }, children: _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        justifyContent: 'space-between',
+                                                        gap: 12,
+                                                        background: 'rgba(0,0,0,0.02)', // TODO: change color
+                                                        color: theme?.primaryTextColor,
+                                                        fontFamily: theme?.fontFamily,
+                                                        borderRadius: 6,
+                                                        padding: 20,
+                                                        width: '100%',
+                                                        alignItems: 'center',
+                                                    }, children: [errorMessage, errorMessage !== 'No data found' && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))] }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { isLoading: sqlQueryLoading, rows: formattedRows, columns: columns, rowCount: rowCount, onPageChange: onPageChange, onSortChange: onSortChange }))] }), isChartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-end',
+                                            width: '100%',
+                                            height: '70px',
+                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, disabled: !!errorMessage }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, report: tempReport ?? report, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, onClickChartElement: onClickChartElement, rowCount: rowCount, onPageChange: onPageChange, onSortChange: onSortChange, isLoading: sqlQueryLoading })] }));
+}
+const SQLEditorComponent = ({ query, schema, databaseType, clientName, setQuery, setEditorMounted, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent = QuillLoadingComponent, }) => {
+    const [editorKey, setEditorKey] = useState(0);
+    const [currentProvider, setCurrentProvider] = useState(null);
+    useEffect(() => {
+        if (currentProvider) {
+            currentProvider.dispose();
+        }
+        if (schema && schema.length !== 0) {
+            setEditorKey((prevKey) => prevKey + 1);
+        }
+    }, [schema, clientName]);
+    return (_jsxs("div", { style: {
+            // 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 ? (_jsx("div", { style: {
+                    height: 'calc(100% - 70px)',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#F9F9F9',
+                }, children: _jsx(LoadingComponent, {}) })) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: clientName, defaultValue: "", language: clientName, value: query, loading: _jsx("div", {}), options: {
+                    wordWrap: 'on',
+                    minimap: {
+                        enabled: false,
+                    },
+                    padding: { top: 16 },
+                }, onChange: (query) => setQuery(query || ''), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: (_editor, monaco) => {
+                    const disposable = setEditorTheme(_editor, monaco, schema, databaseType, clientName);
+                    setCurrentProvider(disposable);
+                    setEditorMounted();
+                } }, editorKey)), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    height: 70,
+                }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }), isNewQueryEnabled && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))] }) })] }));
+};
+export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick, }) => {
+    if (loading) {
+        return (_jsxs("div", { style: {
+                // 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: {
+            // 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, onClick: onClick }, elem.displayName + index))) }));
+};
+function SchemaItem({ elem, theme, index, onClick, }) {
+    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',
+    };
+    const schemaRowHoverStyle = {
+        background: theme.selectUnderlayColor,
+    };
+    const [displayCopy, setDisplayCopy] = useState(false);
+    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: {
+                    cursor: 'pointer',
+                    ...schemaRowStyle,
+                    ...(isOpen && schemaRowHoverStyle),
+                }, onClick: () => setIsOpen(!isOpen), onMouseEnter: () => {
+                    setDisplayCopy(true);
+                }, onMouseLeave: () => {
+                    setDisplayCopy(false);
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            overflow: 'hidden',
+                        }, onClick: (event) => {
+                            event.stopPropagation();
+                            const newEvent = {
+                                target: { textContent: elem.displayName },
+                            };
+                            onClick(newEvent);
+                        }, 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,
+                                    width: '100%',
+                                }, title: elem.displayName, children: elem.displayName }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: "currentColor", viewBox: "0 0 16 16", style: {
+                                    overflow: 'visible',
+                                    display: displayCopy ? 'flex' : 'none',
+                                    marginLeft: 5,
+                                    marginRight: 5,
+                                }, children: _jsx("path", { fillRule: "evenodd", d: "M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" }) })] }), _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            // paddingRight: 25,
+                            paddingTop: 12,
+                            paddingBottom: 12,
+                            paddingLeft: 0,
+                            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 + index))) })) : null] }));
+}