@quillsql/react 2.11.14 → 2.11.16

package/dist/cjs/ReportBuilder.js

@@ -13,6 +13,7 @@ const date_fns_1 = require("date-fns");
 const Context_1 = require("./Context");
 const ast_1 = require("./components/ReportBuilder/ast");
 const ChartBuilder_1 = require("./ChartBuilder");
+const UiComponents_2 = require("./components/UiComponents");
 const ui_1 = require("./components/ReportBuilder/ui");
 const postgres_1 = require("./components/ReportBuilder/postgres");
 const convert_1 = require("./components/ReportBuilder/convert");
@@ -28,6 +29,7 @@ const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const QuillSelect_1 = require("./components/QuillSelect");
 const textProcessing_1 = require("./utils/textProcessing");
 const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
+const width_1 = require("./utils/width");
 /**
  * Quill Report Builder
  *
@@ -36,7 +38,7 @@ const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, TextInput = ui_1.QuillTextInput, Select = QuillSelect_1.QuillSelectComponent, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
+function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, DeleteButton = UiComponents_1.MemoizedDeleteButton, TextInput = UiComponents_2.QuillTextInput, Select = QuillSelect_1.QuillSelectComponent, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -49,6 +51,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
     const [activePath, setActivePath] = (0, react_1.useState)(null);
     const [openPopover, setOpenPopover] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(false);
+    const [loadingSchema, setLoadingSchema] = (0, react_1.useState)(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
     const [isPending, setIsPending] = (0, react_1.useState)(false);
     const [isCopying, setIsCopying] = (0, react_1.useState)(false);
@@ -68,6 +71,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const [currentTable, setCurrentTable] = (0, react_1.useState)(initialTableName || '');
     const parentRef = (0, react_1.useRef)(null);
+    const askAIContainerRef = (0, react_1.useRef)(null);
+    const askAILoadingContainerRef = (0, react_1.useRef)(null);
+    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(200);
+    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = (0, react_1.useState)(200);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
     const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
@@ -75,6 +82,19 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
     const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
     // eslint-disable-next-line no-unused-vars
     const [client, _setClient] = (0, react_1.useContext)(Context_1.ClientContext);
+    (0, react_1.useEffect)(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            (0, width_1.updateFirstChildWidth)(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+            (0, width_1.updateFirstChildWidth)(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [baseAst, loading]);
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -262,6 +282,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
     (0, react_1.useEffect)(() => {
         const fetchSchema = async () => {
             try {
+                setLoadingSchema(true);
                 const response = await fetch(`${client.queryEndpoint}`, {
                     method: 'POST',
                     headers: {
@@ -301,6 +322,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         ?.columns.map((c) => c.name);
                     await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
                 }
+                setLoadingSchema(false);
             }
             catch (error) {
                 console.error(error);
@@ -716,7 +738,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     // see onChange callback handleChange
                     // eslint-disable-next-line no-unused-vars
                     dateColumnPath, dateFilterType, intervalCount, intervalType, intervalPaths, } = (0, util_1.getDateFilterInfo)(node);
-                    const isPlural = intervalCount && intervalCount > 1 ? 's' : '';
+                    const isPlural = intervalCount !== 1 ? 's' : '';
                     // Pull off the string literal date for "equals" comparisons
                     const rawDateStringEquals = node.right?.value ??
                         node.right?.args?.value[1]?.column ??
@@ -783,11 +805,15 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'in the previous', value: 'in the previous' },
                                     { label: 'in the current', value: 'in the current' },
                                     { label: 'equals', value: 'equals' },
-                                ] }), !['in the current', 'equals'].includes(dateFilterType) && ((0, jsx_runtime_1.jsx)(TextInput, { value: intervalCount, type: "number", style: { width: '70px' }, onChange: (e) => {
-                                    const isPluralNow = e.target.value > 1 ? 's' : '';
+                                ] }), !['in the current', 'equals'].includes(dateFilterType) && ((0, jsx_runtime_1.jsx)(TextInput, { id: "date_filter_interval_count", value: intervalCount, width: 70, onChange: (e) => {
+                                    if (Number.isNaN(parseFloat(e.target.value || '0'))) {
+                                        alert('Please input a number.');
+                                        return;
+                                    }
+                                    const isPluralNow = parseFloat(e.target.value || '0') !== 1 ? 's' : '';
                                     intervalPaths.forEach((intervalPath) => handleChangeText([
                                         {
-                                            value: `${e.target.value} ${intervalType}${isPluralNow}`,
+                                            value: `${e.target.value || 0} ${intervalType}${isPluralNow}`,
                                             path: keyPrefix + intervalPath,
                                         },
                                     ]));
@@ -825,7 +851,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: `week${isPlural}`, value: 'week' },
                                     { label: `day${isPlural}`, value: 'day' },
                                     { label: `hour${isPlural}`, value: 'hour' },
-                                ] }), dateFilterType === 'equals' && ((0, jsx_runtime_1.jsx)(TextInput, { value: rawDateStringEquals, type: "text", style: { width: '120px' }, onChange: (e) => {
+                                ] }), dateFilterType === 'equals' && ((0, jsx_runtime_1.jsx)(TextInput, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
                                     handleChangeText([
                                         {
                                             value: e.target.value,
@@ -840,36 +866,38 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                         value: column.name,
                     }));
-                    const plural = node.right.args.value[1].expr.value > 1 ? 's' : '';
+                    const plural = node.right.args.value[1].expr.value !== 1 ? 's' : '';
                     return ((0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
-                                        const columnType = getColumnTypeByName(value);
-                                        if ((0, ast_1.isDateishColumnType)(columnType)) {
-                                            // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                            handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
-                                        }
-                                        else if ((0, ast_1.isNumericColumnType)(columnType)) {
-                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                            newSubtree.left.column = value;
-                                            handleReplaceSubtree(keyPrefix, newSubtree);
-                                        }
-                                        else {
-                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
-                                            newSubtree.left.args.value[0].column = value;
-                                            handleReplaceSubtree(keyPrefix, newSubtree);
-                                        }
-                                    }, options: options }) }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
+                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
+                                    const columnType = getColumnTypeByName(value);
+                                    if ((0, ast_1.isDateishColumnType)(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                    }
+                                    else if ((0, ast_1.isNumericColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
+                                        newSubtree.left.column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                        newSubtree.left.args.value[0].column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_LAST', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, dateColumn);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(TextInput, { defaultValue: node.right.args.value[1].expr.value, type: "number", style: { width: '120px', height: '42px' }, min: 0, onBlur: (e) => {
+                                ] }), (0, jsx_runtime_1.jsx)(TextInput, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
                                             value: e.target.value,
@@ -918,6 +946,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
                                 ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     handleChange([
@@ -957,12 +987,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         newSubtree.left.args.value[0].column = value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, opt: true, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
+                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
                                 ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     const dayConversion = {
@@ -1006,7 +1038,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     const tables = (0, ast_1.getTableNames)(baseAst);
                     const table = tables.length === 1 ? tables[0] : initialTableName;
                     const columnType = column?.fieldType;
-                    const operatorOptions = [
+                    let operatorOptions = [
                         ...((0, ast_1.isNumericColumnType)(columnType)
                             ? [
                                 { label: 'equal to', value: '=' },
@@ -1043,6 +1075,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             ]
                             : []),
                     ];
+                    if (client.databaseType === 'BigQuery' &&
+                        (0, ast_1.isDateishColumnType)(columnType)) {
+                        operatorOptions = operatorOptions.filter((option) => option.value !== 'equals');
+                    }
                     return ((0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             gap: 12,
@@ -1155,11 +1191,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 const len = node.value.length;
                 return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [node.value.map((elem, index) => {
                             if (elem.value) {
-                                return ((0, jsx_runtime_1.jsx)(TextInput, { type: elem.type === 'number' ? 'number' : 'text', defaultValue: elem.value, onBlur: (e) => handleChange([
+                                return ((0, jsx_runtime_1.jsx)(TextInput, { id: `expr_list_${index}`, width: 200, value: elem.value, onChange: (e) => handleChange([
                                         {
-                                            value: elem.type === 'number'
-                                                ? parseFloat(e.target.value)
-                                                : e.target.value,
+                                            value: e.target.value,
                                             path: keyPrefix + `value.${index}.`,
                                         },
                                     ]) }, `input_${index}`));
@@ -1169,23 +1203,19 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             }
             case 'double_quote_string':
             case 'single_quote_string':
-                return ((0, jsx_runtime_1.jsx)(TextInput, { type: "text", defaultValue: node.value.replaceAll('%', ''), style: { width: '120px' }, onBlur: (e) => handleChange([
+                return ((0, jsx_runtime_1.jsx)(TextInput, { id: 'quoted_string', value: node.value.replaceAll('%', ''), width: 120, onChange: (e) => handleChange([
                         {
-                            value: node.type === 'number'
-                                ? parseFloat(e.target.value)
-                                : e.target.value,
+                            value: e.target.value,
                             path: keyPrefix + 'value',
                         },
                     ]) }));
             case 'null':
                 return (0, jsx_runtime_1.jsx)("div", {});
             case 'number':
-                return ((0, jsx_runtime_1.jsx)(TextInput, { defaultValue: node.value, type: "number", style: { width: '120px' }, onBlur: (e) => {
+                return ((0, jsx_runtime_1.jsx)(TextInput, { id: "quill_number_input", value: node.value, width: 120, onChange: (e) => {
                         handleChange([
                             {
-                                value: node.type === 'number'
-                                    ? parseFloat(e.target.value)
-                                    : e.target.value,
+                                value: e.target.value,
                                 path: keyPrefix + 'value',
                             },
                         ]);
@@ -1212,6 +1242,22 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 return null;
         }
     };
+    const isValidPivot = (fields) => {
+        let validPivot = true;
+        if (pivot.rowField &&
+            !fields.find((field) => field.name === pivot.rowField)) {
+            validPivot = false;
+        }
+        if (pivot.valueField &&
+            !fields.find((field) => field.name === pivot.valueField)) {
+            validPivot = false;
+        }
+        if (pivot.columnField &&
+            !fields.find((field) => field.name === pivot.columnField)) {
+            validPivot = false;
+        }
+        return validPivot;
+    };
     const renderSentence = (formData, node, keyPrefix = '', 
     // @depreciated TODO: remove next update
     // eslint-disable-next-line no-unused-vars
@@ -1415,26 +1461,24 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         orgId: client.customerId,
                     }),
                 });
+                const tables = (0, ast_1.getTableNames)(baseAst);
+                const table = tables.length >= 1 ? tables[0] : initialTableName;
+                if (table !== currentTable) {
+                    await getDistinctValues(table);
+                    setCurrentTable(table);
+                }
                 const data2 = await res2.json();
                 if (data2.rows && data2.rows.length) {
                     const tables = (0, ast_1.getTableNames)(baseAst);
-                    const table = tables.length >= 1 ? tables[0] : initialTableName;
-                    if (table !== currentTable) {
-                        getDistinctValues(table);
-                        setCurrentTable(table);
-                    }
-                    const sortedFields = data2.fields.sort((a, b) => {
-                        const aIsId = a.name.toLowerCase() === 'id' ||
-                            a.name.toLowerCase().endsWith('_id');
-                        const bIsId = b.name.toLowerCase() === 'id' ||
-                            b.name.toLowerCase().endsWith('_id');
-                        if (aIsId && !bIsId)
-                            return 1;
-                        if (bIsId && !aIsId)
-                            return -1;
-                        return 0;
-                    });
                     if (pivot) {
+                        // check if any of the pivot fields aren't in the data2.fields array
+                        if (!isValidPivot(data2.fields)) {
+                            setPivot(null);
+                            setPivotData(null);
+                            setRows(data2.rows);
+                            setFields(data2.fields);
+                            return;
+                        }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
                         let uniqueFormatted = {};
                         const uniqueRecords = Array.from(new Set(data2.rows.map((row) => row[pivot.columnField]))).reduce((acc, curr) => {
@@ -1663,7 +1707,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 // newAst = convertDateComparison(newAst); // TODO
                 ast = newAst; // so we fetch data for newAst later.
                 if (table !== currentTable) {
-                    getDistinctValues(table);
+                    await getDistinctValues(table);
                     setCurrentTable(table);
                 }
                 setPivotRowField(groupByPivot?.rowField);
@@ -1852,6 +1896,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 height: '100%',
                 ...containerStyle,
             }, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                    if (loadingSchema)
+                                        return;
                                     if (!openPopover) {
                                         setOpenPopover('AddColumnPopover');
                                     }
@@ -1878,7 +1924,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 gap: 2.5,
                                 alignItems: 'flex-start',
                             }, children: [(0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddFilterPopover', title: 'Add filter', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                            if (!selectedColumns ||
+                                                selectedColumns.length === 0 ||
+                                                loading) {
                                                 return;
                                             }
                                             if (!openPopover) {
@@ -2015,7 +2063,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     if (!pivot) {
                                         fetchSqlQuery(baseAst);
                                     }
-                                } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: 8,
@@ -2049,7 +2097,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     if (!pivot) {
                                         fetchSqlQuery(newAst);
                                     }
-                                } }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                        return;
+                                    }
                                     if (!openPopover) {
                                         setOpenPopover('AddSortPopover');
                                     }
@@ -2082,7 +2133,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     setOpenPopover(null);
                                     setBaseAst((0, util_1.deepCopy)(newAst));
                                     fetchSqlQuery(newAst);
-                                } }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
                                     if (!openPopover) {
                                         setOpenPopover('AddLimitPopover');
                                     }
@@ -2091,14 +2142,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setActiveEditItem(null);
                                 setActivePath(null);
                                 setOpenPopover(null);
-                            }, children: (0, jsx_runtime_1.jsx)(TextInput, { value: 0, type: "number", style: { width: 120, minHeight: 32 }, onChange: (e) => { } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                            }, children: (0, jsx_runtime_1.jsx)(TextInput, { id: "loading_input_limit", value: 0, width: 120, onChange: () => { } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => { }, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { id: "ask_ai_loading_bar", placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => { }, label: "Ask AI" }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2141,7 +2192,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             gap: 2.5,
                             alignItems: 'flex-start',
                         }, children: [(0, jsx_runtime_1.jsx)(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                        if (!selectedColumns || selectedColumns.length === 0) {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
                                             return;
                                         }
                                         if (!openPopover) {
@@ -2288,7 +2341,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(baseAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                            } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
@@ -2330,7 +2383,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            } }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                if (!selectedColumns || selectedColumns.length === 0) {
+                                    return;
+                                }
                                 if (!openPopover) {
                                     setOpenPopover('AddSortPopover');
                                 }
@@ -2339,7 +2395,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             setActiveEditItem(null);
                             setActivePath(null);
                             setOpenPopover(null);
-                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, onSave: (column, direction) => {
+                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, SecondaryButton: SecondaryButton, onSave: (column, direction) => {
                                 if (column === '')
                                     return;
                                 if (pivot) {
@@ -2387,7 +2443,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            } }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                            }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                if (!selectedColumns || selectedColumns.length === 0) {
+                                    return;
+                                }
                                 if (!baseAst) {
                                     return;
                                 }
@@ -2399,7 +2458,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             setActiveEditItem(null);
                             setActivePath(null);
                             setOpenPopover(null);
-                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInput, onSave: (limit) => {
+                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, onSave: (limit) => {
                                 const newAst = { ...baseAst };
                                 newAst.limit = {
                                     seperator: '',
@@ -2413,7 +2472,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                            } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { ref: askAIContainerRef, onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
@@ -2421,14 +2480,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             gap: 12,
                             padding: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
+                        }, children: [(0, jsx_runtime_1.jsx)(TextInput, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
                                 rows: pivotData?.rows || rows,
                                 fields: pivotData?.fields || fields,
                             }, baseAst?.columns ?? []), columns: pivot
                                 ? pivotData?.columns || emptyPivotColumns()
                                 : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                     return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
-                                }), error: errorMessage, rowsPerPage: 20 })) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }), rowsPerPage: 20 })) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: '12px',
@@ -2439,6 +2498,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     whiteSpace: 'nowrap',
                                 }, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, 
+                // TODO: Modal={Modal}
+                // TODO: Popover={Popover}
+                DeleteButton: DeleteButton })] }));
 }
 exports.default = ReportBuilder;

package/dist/cjs/SQLEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalComponentProps, TableComponentProps } from './components/UiComponents';
+import { ModalComponentProps, TableComponentProps, TextInputComponentProps } from './components/UiComponents';
 export declare function convertPostgresColumn(column: any): {
     label: any;
     field: any;
@@ -38,12 +38,6 @@ interface SQLEditorProps {
     organizationName?: string;
     chartBuilderHorizontalView?: boolean;
 }
-interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    placeholder?: string;
-}
 export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, chartBuilderHorizontalView, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
     schema: any;

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;AAInC,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,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,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;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;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;AAuCD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,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,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA+WhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEnB,uBAAuB,EACxB,MAAM,2BAA2B,CAAC;AAKnC,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,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,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;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AA6CD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,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,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CAgYhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}

package/dist/cjs/SQLEditor.js

@@ -15,7 +15,8 @@ const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const dataFetcher_1 = require("./utils/dataFetcher");
 const ChartBuilder_1 = require("./ChartBuilder");
 const UiComponents_1 = require("./components/UiComponents");
-const ui_1 = require("./components/ReportBuilder/ui");
+const UiComponents_2 = require("./components/UiComponents");
+const width_1 = require("./utils/width");
 function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -131,7 +132,7 @@ const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_
         fontFamily: theme?.fontFamily,
         height: 38,
     }, onClick: onClick, children: label }));
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, TextInputComponent = ui_1.QuillTextInput, TableComponent = QuillTable_1.default, newQueryEnabled = false, LoadingComponent, ModalComponent, 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, chartBuilderHorizontalView = false, }) {
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, TextInputComponent = UiComponents_2.QuillTextInput, TableComponent = QuillTable_1.default, newQueryEnabled = false, LoadingComponent, ModalComponent, 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, chartBuilderHorizontalView = false, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
@@ -146,6 +147,20 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = U
     const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
     const [displayTable, setDisplayTable] = (0, react_1.useState)(false);
+    const formRef = (0, react_1.useRef)(null);
+    const [searchBarWidth, setSearchBarWidth] = (0, react_1.useState)(200);
+    (0, react_1.useEffect)(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            (0, width_1.updateFirstChildWidth)(formRef, setSearchBarWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     const getSchema = async (isSubscribed) => {
         setSchemaLoading(true);
         const { queryEndpoint, queryHeaders, publicKey } = client;
@@ -295,7 +310,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = U
                                     width: 'calc(100% - 290px)',
                                     height: '100%',
                                     overflowX: 'hidden',
-                                }, children: [(0, jsx_runtime_1.jsxs)("form", { onSubmit: (e) => {
+                                }, children: [(0, jsx_runtime_1.jsxs)("form", { ref: formRef, onSubmit: (e) => {
                                             e.preventDefault();
                                             handleRunSqlPrompt();
                                         }, style: {
@@ -304,7 +319,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = U
                                             gap: 12,
                                             paddingTop: 16,
                                             paddingBottom: 16,
-                                        }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (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, handleFixWithAI: handleFixWithAI, 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: {
+                                        }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (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, handleFixWithAI: handleFixWithAI, 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% - 108px)',