@quillsql/react 2.11.20 → 2.11.23

package/dist/esm/ReportBuilder.js

@@ -26,6 +26,7 @@ import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddL
 import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
+import { convertPostgresColumn } from './SQLEditor';
 /**
  * Quill Report Builder
  *
@@ -57,7 +58,7 @@ import { QuillCard } from './components/QuillCard';
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, TextComponent = MemoizedText, isAdminEnabled = false, isAIEnabled = true, containerStyle, }) {
+export default function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, TextComponent = MemoizedText, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, }) {
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [baseAst, setBaseAst] = useState(null);
@@ -70,11 +71,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [activeEditItem, setActiveEditItem] = useState(null);
     const [activePath, setActivePath] = useState(null);
     const [openPopover, setOpenPopover] = useState(null);
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(!!initialTableName);
     const [loadingSchema, setLoadingSchema] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [isPending, setIsPending] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
+    const [dataDisplayed, setDataDisplayed] = useState(false);
     const [rows, setRows] = useState([]);
     const [fields, setFields] = useState([]);
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
@@ -88,7 +90,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [initialLoad, setInitialLoad] = useState(true);
+    const [initialLoad, setInitialLoad] = useState(!!initialTableName);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
     const parentRef = useRef(null);
     const askAIContainerRef = useRef(null);
@@ -132,7 +134,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
      * Transforms an array of column names into an array of columnInfo objects
      * with label, field, format, and fieldType keys.
      */
-    const processColumnsForChartBuilder = (columns) => {
+    const processColumnsForPivotModal = (columns) => {
         return columns.map((col) => ({
             label: col,
             name: col,
@@ -144,6 +146,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 .find((c) => c.name === col)?.fieldType || 'text',
         }));
     };
+    /**
+     * Transforms an array of column names into an array of columnInfo objects
+     * with label, field, format, and fieldType keys.
+     */
+    const processColumnsForChartBuilder = (columns) => {
+        return columns.map((col) => ({
+            label: col,
+            name: col,
+            displayName: snakeCaseToTitleCase(col),
+            field: col,
+            format: convertPostgresColumn(fields.find((f) => f.name === col)).format ||
+                'string',
+            fieldType: schemaTables
+                .flatMap((t) => t.columns)
+                .find((c) => c.name === col)?.fieldType || 'text',
+        }));
+    };
     const clearAllState = () => {
         // We're trying to not block the main thread while resetting all the state.
         // This shouldn't be an issue since the dispatches shouldn't block, but
@@ -161,6 +180,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             setOpenPopover(null);
             setLoading(false);
             setIsPending(false);
+            setDataDisplayed(false);
             setRows([]);
             setFields([]);
             setTopLevelBinaryOperator('AND');
@@ -173,8 +193,10 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         }, 0);
     };
     useEffect(() => {
-        clearAllState();
-    }, [client]);
+        if (!initialLoad && client.publicKey) {
+            clearAllState();
+        }
+    }, [client.publicKey]);
     useEffect(() => {
         if (activePath !== null) {
             // update the modal with the new subtree
@@ -379,6 +401,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                     await loadTable(tables);
                 }
                 setLoadingSchema(false);
+                setInitialLoad(false);
             }
             catch (error) {
                 console.error(error);
@@ -386,7 +409,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         };
         if (schemaTables.length === 0) {
             fetchSchema();
-            setInitialLoad(false);
         }
     }, [schemaTables, initialTableName]);
     const updateFormData = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, topLevelBinOp = 'OR', isCondition = undefined, }) => {
@@ -826,7 +848,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                 }, options: getAllPossibleColumns().map((column) => ({
                                     label: snakeCaseToTitleCase(column.displayName),
                                     value: column.name,
-                                })) }), _jsx(SelectComponent, { value: dateFilterType, onChange: (event) => {
+                                })), width: 200 }), _jsx(SelectComponent, { value: dateFilterType, onChange: (event) => {
                                     if (event.target.value === dateFilterType)
                                         return null;
                                     let newSubtree = {};
@@ -864,7 +886,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { 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) && (_jsx(TextInputComponent, { id: "date_filter_interval_count", value: intervalCount?.toString() ?? '', width: 70, onChange: (e) => {
+                                ], width: 200 }), !['in the current', 'equals'].includes(dateFilterType) && (_jsx(TextInputComponent, { id: "date_filter_interval_count", value: intervalCount?.toString() ?? '', width: 70, onChange: (e) => {
                                     if (Number.isNaN(parseFloat(e.target.value || '0'))) {
                                         alert('Please input a number.');
                                         return;
@@ -910,7 +932,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: `week${isPlural}`, value: 'week' },
                                     { label: `day${isPlural}`, value: 'day' },
                                     { label: `hour${isPlural}`, value: 'hour' },
-                                ] }), dateFilterType === 'equals' && (_jsx(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
+                                ], width: 200 }), dateFilterType === 'equals' && (_jsx(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
                                     handleChangeText([
                                         {
                                             value: e.target.value,
@@ -947,7 +969,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), _jsx(SelectComponent, { value: 'IN_THE_LAST', onChange: (event) => {
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_LAST', onChange: (event) => {
                                     handleOperatorChange(event.target.value, node, keyPrefix, dateColumn);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
@@ -957,7 +979,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), _jsx(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
+                                ], width: 200 }), _jsx(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
                                             value: e.target.value,
@@ -974,7 +996,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         { label: `month${plural}`, value: '* 30 DAY' },
                                         { label: `week${plural}`, value: '* 7 DAY' },
                                         { label: `day${plural}`, value: 'DAY' },
-                                    ] }) })] }));
+                                    ], width: 200 }) })] }));
                 }
                 else if (isTheCurrentInterval(node, client.databaseType)) {
                     const { dateFilterType } = getDateFilterInfo(node);
@@ -1003,7 +1025,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), _jsx(SelectComponent, { value: 'IN_THE_CURRENT', onChange: (event) => {
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_CURRENT', onChange: (event) => {
                                     handleOperatorChange(event.target.value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
@@ -1013,7 +1035,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
                                     handleChange([
                                         {
                                             value: event.target.value,
@@ -1029,7 +1051,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: `quarter`, value: 'QUARTER' },
                                     { label: `month`, value: 'MONTH' },
                                     { label: `week`, value: 'WEEK' },
-                                ] })] }));
+                                ], width: 200 })] }));
                 }
                 else if (isThePreviousInterval(node, client.databaseType)) {
                     const options = getAllPossibleColumns().map((column) => ({
@@ -1057,7 +1079,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), _jsx(SelectComponent, { value: 'IN_THE_PREVIOUS', onChange: (event) => {
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_PREVIOUS', onChange: (event) => {
                                     handleOperatorChange(event.target.value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
@@ -1067,7 +1089,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
                                     const dayConversion = {
                                         YEAR: 365,
                                         QUARTER: 90,
@@ -1093,7 +1115,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: `quarter`, value: 'QUARTER' },
                                     { label: `month`, value: 'MONTH' },
                                     { label: `week`, value: 'WEEK' },
-                                ] })] }));
+                                ], width: 200 })] }));
                 }
                 else if (isEquals(node, client.databaseType)) {
                     const options = getAllPossibleColumns().map((column) => ({
@@ -1121,7 +1143,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), _jsx(SelectComponent, { value: 'EQUALS', onChange: (event) => {
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'EQUALS', onChange: (event) => {
                                     handleOperatorChange(event.target.value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
@@ -1131,7 +1153,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), _jsx(SelectComponent, { value: node.right.args.value[1].column, onChange: (event) => {
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.right.args.value[1].column, onChange: (event) => {
                                     handleChange([
                                         {
                                             value: event.target.value,
@@ -1147,7 +1169,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: `quarter`, value: 'QUARTER' },
                                     { label: `month`, value: 'MONTH' },
                                     { label: `week`, value: 'WEEK' },
-                                ] }), _jsx(TextInputComponent, { id: 'quoted_string', value: node.right.args.value[0].value, width: 120, onChange: (e) => handleChange([
+                                ], width: 200 }), _jsx(TextInputComponent, { id: 'quoted_string', value: node.right.args.value[0].value, width: 120, onChange: (e) => handleChange([
                                     {
                                         value: e.target.value,
                                         path: 'right.args.value||0.value',
@@ -1233,30 +1255,27 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                 newSubtree.left.args.value[0].column = event.target.value;
                                                 handleReplaceSubtree(keyPrefix, newSubtree);
                                             }
-                                        }, options: options }), operatorOptions.length > 0 && (_jsx(SelectComponent, { value: node.operator, onChange: (event) => {
+                                        }, options: options, width: 200 }), operatorOptions.length > 0 && (_jsx(SelectComponent, { value: node.operator, onChange: (event) => {
                                             handleOperatorChange(event.target.value, node, keyPrefix, leftChildValue);
-                                        }, options: operatorOptions })), node.right &&
+                                        }, options: operatorOptions, width: 200 })), node.right &&
                                         node.right.type !== 'expr_list' &&
                                         renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix), node.right && node.right.type === 'expr_list' && (_jsx("div", { style: {
                                     display: 'grid',
                                     gridTemplateColumns: 'repeat(2, 1fr)',
                                     gap: 12,
                                 }, children: uniqueValues[table] &&
-                                    Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => (_jsxs("label", { style: { display: 'flex', gap: 4 }, children: [_jsx(CheckboxComponent, { isChecked: uniqueValues[table][leftChildValue][key], onChange: (event) => {
-                                                    const newValues = deepCopy(uniqueValues);
-                                                    newValues[table][leftChildValue][key] =
-                                                        event.target.checked;
-                                                    setUniqueValues(newValues);
-                                                    if (event.target.checked) {
-                                                        handleInsertVariant(keyPrefix + 'right.' + 'value', key);
-                                                    }
-                                                    else {
-                                                        handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
-                                                    }
-                                                } }), _jsx("span", { style: {
-                                                    fontFamily: theme.fontFamily,
-                                                    margin: 'auto 0',
-                                                }, children: key })] }, key))) }, keyPrefix + 'right.'))] }));
+                                    Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => (_jsx(CheckboxComponent, { label: key, isChecked: uniqueValues[table][leftChildValue][key], onChange: (event) => {
+                                            const newValues = deepCopy(uniqueValues);
+                                            newValues[table][leftChildValue][key] =
+                                                event.target.checked;
+                                            setUniqueValues(newValues);
+                                            if (event.target.checked) {
+                                                handleInsertVariant(keyPrefix + 'right.' + 'value', key);
+                                            }
+                                            else {
+                                                handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
+                                            }
+                                        } }))) }, keyPrefix + 'right.'))] }));
                 }
                 else {
                     const columnName = node.left.column;
@@ -1307,7 +1326,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         : []),
                                     // { label: `minus`, value: "-" },
                                     // { label: `plus`, value: "+" },
-                                ] }), node.right && renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix));
+                                ], width: 200 }), node.right && renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix));
                 }
             case 'column_ref': {
                 const options = getAllPossibleColumns().map((column) => ({
@@ -1318,7 +1337,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         handleChange([
                             { value: event.target.value, path: keyPrefix + 'column' },
                         ]);
-                    }, options: options }));
+                    }, options: options, width: 200 }));
             }
             case 'expr_list': {
                 const len = node.value.length;
@@ -1631,6 +1650,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             }
             finally {
                 setLoading(false);
+                setDataDisplayed(true);
             }
         }
     };
@@ -1908,6 +1928,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         }
         finally {
             setLoading(false);
+            setDataDisplayed(true);
             setAiPrompt('');
         }
     };
@@ -2019,7 +2040,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 flexDirection: 'row',
                 height: '100%',
                 ...containerStyle,
-            }, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+            }, className: className, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
                                 if (loadingSchema)
                                     return;
                                 if (!openPopover) {
@@ -2142,7 +2163,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                         setOpenPopover(null);
                                                         clearCheckboxes();
                                                     }
-                                                } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                 setPivot(null);
                                 setPivotData(null);
                             }, 
@@ -2283,11 +2304,13 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), baseAst && (_jsx(SecondaryButtonComponent, { onClick: clearAllState, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), _jsxs("div", { style: {
+                            }, children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
+                                        ? 'Ask a follow-up question...'
+                                        : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(ButtonComponent, { label: 'Add to dashboard', onClick: () => { } })] })] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(ButtonComponent, { label: 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
     }
     return (_jsxs("div", { ref: parentRef, style: {
             display: 'flex',
@@ -2296,7 +2319,9 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             overflowY: 'auto',
             boxSizing: 'border-box',
             ...containerStyle,
-        }, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+        }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+                            if (loadingSchema)
+                                return;
                             if (!orderedColumnNames) {
                                 return;
                             }
@@ -2423,7 +2448,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                     setOpenPopover(null);
                                                     clearCheckboxes();
                                                 }
-                                            } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                            } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                             setPivot(null);
                             setPivotData(null);
                         }, selectPivot: (pivot) => {
@@ -2625,7 +2650,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                             flexDirection: 'row',
                             gap: 12,
                             padding: 1,
-                        }, children: [_jsx(TextInputComponent, { 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...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] })), baseAst && (_jsx(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: applyFormatting({
+                        }, children: [_jsx(TextInputComponent, { 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...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] })), baseAst && (_jsx(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: applyFormatting({
                             rows: pivotData?.rows || rows,
                             fields: pivotData?.fields || fields,
                         }, baseAst?.columns ?? []), columns: pivot
@@ -2641,7 +2666,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     fontSize: 14,
                                     padding: '12px',
                                     whiteSpace: 'nowrap',
-                                }, children: errorMessage })), _jsx("div", { style: { width: '100%' } }), baseAst && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
+                                }, children: errorMessage })), _jsx("div", { style: { width: '100%' } }), baseAst && dataDisplayed && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: isAdminEnabled, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent })] }));
 }

package/dist/esm/SQLEditor.d.ts

@@ -146,6 +146,12 @@ export interface SQLEditorProps {
      * The name of the current organization.
      */
     organizationName?: string;
+    /**
+     * Styles the top-level container of the SQLEditor.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
     /**
      * Styles the top-level container of the SQLEditor.
      */
@@ -176,7 +182,7 @@ export interface SQLEditorProps {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, CardComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, isChartBuilderHorizontalView, containerStyle, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, CardComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, isChartBuilderHorizontalView, containerStyle, className, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
     schema: any;
     theme: any;

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AAgCD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE;QACjC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC3B,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KAChE,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,EAAE,CAAC;QAC/B,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,QAAQ,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,MAAM,EAAE,OAAO,CAAC;QAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;QACrC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,SAAS,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtC;;;;;;OAMG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IAEvC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAEpC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAAoC,EACpC,iBAAyB,EACzB,gBAAgB,EAChB,cAA8B,EAC9B,aAAyB,EACzB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,qBAA6B,EAC7B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,4BAAmC,EACnC,cAAoC,GACrC,EAAE,cAAc,2CAsWhB;AA0ID,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SQLEditor.js

@@ -131,7 +131,7 @@ function setEditorTheme(editor, monaco) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, }) {
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -290,7 +290,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
             onChangeQuery(query);
         }
     }, [query]);
-    return (_jsxs("div", { style: containerStyle, children: [(!isChartBuilderHorizontalView ||
+    return (_jsxs("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
                     height: '100%',
                     display: 'flex',
@@ -350,11 +350,10 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, Modal: ModalComponent, Button: ButtonComponent })] }));
+                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent })] }));
 }
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {
-            background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
             height: '100%',
@@ -392,7 +391,6 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI,
 export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick = () => { }, }) => {
     if (loading) {
         return (_jsxs("div", { style: {
-                background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: width || 250,
                 minWidth: 250,
@@ -408,7 +406,6 @@ export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent,
             }, 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,

package/dist/esm/Table.d.ts

@@ -90,6 +90,12 @@ export interface TableProps {
      * A loading component to show when the table is loading.
      */
     LoadingComponent?: () => JSX.Element;
+    /**
+     * Styles the top-level container of the Table.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
     /**
      * Styles the top-level container of the Table.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAuBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAiC/B,CAAC;AA8FF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAmC/B,CAAC;AAiGF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -43,11 +43,11 @@ const Table = (props) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client, _] = useContext(ClientContext);
     if ('rows' in data && 'columns' in data) {
-        return (_jsx(QuillTable, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
+        return (_jsx(QuillTable, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return (_jsx(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+    return (_jsx(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
 };
-const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
+const ChartUpdater = ({ chartId, containerStyle, className, dashboard, dispatch, client, dashboardFilters, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
     const { rows, loading } = useMemoizedRows(chartId);
     const { downloadCSV } = useExport(chartId);
     useEffect(() => {
@@ -100,6 +100,6 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
         // @ts-ignore
         columns: dashboard[chartId]?.columns || [], 
         // @ts-ignore
-        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
 };
 export default Table;

package/dist/esm/components/Chart/BarChart.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { type ColorMapType } from '../../Chart';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors?: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;
+    className?: string;
     xAxisField: string;
     xAxisLabel: string;
     xAxisFormat: string;

package/dist/esm/components/Chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAgLA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAuLA"}