@quillsql/react 2.11.15 → 2.11.17

package/dist/esm/ChartBuilder.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
 import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
@@ -8,8 +9,8 @@ import { PivotCard } from './internals/ReportBuilder/PivotList';
 import Chart from './Chart';
 import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
 import { mergeComparisonRange } from './utils/merge';
-import { QuillSelectComponent } from './components/QuillSelect';
 import { removeDoubleQuotes, snakeCaseToTitleCase, } from './utils/textProcessing';
+import { QuillSelectComponent } from './components/QuillSelect';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -137,17 +138,76 @@ const formatOptions = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
+/**
+ * ### Quill Chart Builder with Modal
+ *
+ * Renders a ChartBuilder component with a modal.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ChartBuilder />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ChartBuilder
+ *   ButtonComponent={MyButton}
+ *   SecondaryButtonComponent={MySecondaryButton}
+ * />
+ * ```
+ *
+ * ### Chart Builder API
+ * @see https://docs.quillsql.com/components/chart-builder#with-modal
+ */
 export function ChartBuilderWithModal(props) {
-    const [theme] = useContext(ThemeContext);
-    const Modal = props.Modal ?? MemoizedModal;
-    return (_jsx(Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', style: props.horizontalView
-            ? {
-                width: 'calc(100vw - 80px)',
-                height: 'calc(100vh - 80px)',
-            }
-            : {}, theme: theme, children: _jsx(ChartBuilder, { ...props }) }));
+    const parentRef = useRef(null);
+    const [modalWidth, setModalWidth] = useState(200);
+    const [modalHeight, setModalHeight] = useState(200);
+    const { isOpen, setIsOpen, title, isHorizontalView } = props;
+    const Modal = props.ModalComponent ?? MemoizedModal;
+    useEffect(() => {
+        function handleResize() {
+            setModalWidth(window.innerWidth - 80);
+            setModalHeight(window.innerHeight - 80);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return (_jsx("div", { ref: parentRef, children: _jsx(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
+            // For isHorizontalView, use full viewport size minus 80px for padding,
+            // otherwise use the default layout method of the modal (contents).
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { ...props }) }) }));
 }
-export default function ChartBuilder({ TextInput = QuillTextInput, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Popover = MemoizedPopover, isOpen, isEditMode = false, horizontalView = false, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, }) {
+/**
+ * ### Quill Chart Builder
+ *
+ * A simple form that lets users turn a SQL query into a chart, metric, or table
+ * and then add that dashboard item into one of their dashboards.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ChartBuilder />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ChartBuilder
+ *   ButtonComponent={MyButton}
+ *   SecondaryButtonComponent={MySecondaryButton}
+ * />
+ * ```
+ *
+ * ### Chart Builder API
+ * @see https://docs.quillsql.com/components/chart-builder
+ */
+export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, }) {
     const dateRange = dr || [null, null, null];
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -367,6 +427,12 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
             }
             const result = await getReferencedTables(client, query, schema, true);
             setDateFieldOptions(result);
+            if (result[0] && result[0].columns[0]) {
+                setDefaultDateField({
+                    table: result[0].name,
+                    field: result[0].columns[0].name,
+                });
+            }
             const allReferencedFields = await getReferencedTables(client, query, schema, false);
             setAllTables(allReferencedFields.map((table) => table.name));
             setTableName(result[0]?.name);
@@ -570,7 +636,7 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                 dashboardDiscrepancyIssues.push(`The ${formData.dashboardName} dashboard is used for comparing date fields. This feature is not applicable to pie charts. We recommend switching to a column or bar chart instead.`);
             }
             if (dashboardHasDateFilter &&
-                (!defaultDateField ||
+                ((!defaultDateField.table && !defaultDateField.field) ||
                     (!formData.dateField.field && !formData.dateField.table))) {
                 dashboardDiscrepancyIssues.push(`The dashboard "${formData.dashboardName}" has a global date filter but this chart doesn't reference any tables with a date field. It is not recommended to add this chart because the global filter cannot be applied.`);
             }
@@ -654,7 +720,7 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
         }
     };
     if (!schema) {
-        return;
+        return null;
     }
     return (_jsxs("div", { style: { width: '100%', height: '100%', flexGrow: 1 }, children: [_jsxs("div", { id: "quill-chart-modal", style: {
                     width: '100%',
@@ -663,79 +729,79 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                     display: 'flex',
                     padding: modalPadding,
                     gap: '20px',
-                    flexDirection: horizontalView ? 'row' : 'column',
+                    flexDirection: isHorizontalView ? 'row' : 'column',
                     boxSizing: 'border-box',
                 }, children: [_jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '20px',
-                            ...(horizontalView && {
+                            ...(isHorizontalView && {
                                 flexGrow: 1,
                                 maxWidth: !isOpen ? '100%' : 'calc(100% - 665px - 20px)', // width of left sidebar plus gap
                             }),
-                        }, children: [(!horizontalView || formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
+                        }, children: [(!isHorizontalView || formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
                                         ? 100
-                                        : horizontalView
+                                        : isHorizontalView
                                             ? '100%'
                                             : 400,
-                                    ...(horizontalView && { flexGrow: 1 }),
+                                    ...(isHorizontalView && { flexGrow: 1 }),
                                 } })), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            horizontalView && formData.chartType !== 'table' ? (_jsx(Chart, { config: {
+                            isHorizontalView && formData.chartType !== 'table' ? (_jsx(Chart, { config: {
                                     ...formData,
                                     pivot: undefined,
                                     chartType: 'table',
                                     rows,
-                                    rowsPerPage: 20,
+                                    rowsPerPage: 10,
                                 }, containerStyle: {
                                     height: '100%',
                                     width: '100%',
                                     flexGrow: 1,
-                                } })) : (horizontalView && (_jsx(Chart, { config: {
+                                } })) : (isHorizontalView && (_jsx(Chart, { config: {
                                     ...formData,
                                     chartType: 'table',
                                     rows,
-                                    rowsPerPage: 20,
+                                    rowsPerPage: 10,
                                 }, containerStyle: {
                                     height: '100%',
                                     width: '100%',
                                     flexGrow: 1,
-                                } })))] }), (isOpen || !horizontalView) && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                } })))] }), (isOpen || !isHorizontalView) && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             height: '100%',
-                            ...(horizontalView && {
+                            ...(isHorizontalView && {
                                 minWidth: 665,
                                 maxWidth: 665,
                                 width: 665,
                                 gap: 20,
                             }),
-                        }, children: [_jsxs("div", { style: { overflow: 'auto' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Name" }), _jsx(TextInput, { id: "chart-builder-name", value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name", theme: theme })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { value: formData.dashboardName || '', onChange: async (e) => {
-                                                            await updateDashboardFilters(e);
-                                                            handleChange(e, 'dashboardName');
+                        }, children: [_jsxs("div", { style: { overflow: 'auto' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Name" }), _jsx(TextInputComponent, { id: "chart-builder-name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Dashboard" }), _jsx(SelectComponent, { value: formData.dashboardName || '', onChange: async (e) => {
+                                                            handleChange(e.target.value, 'dashboardName');
+                                                            await updateDashboardFilters(e.target.value);
                                                         }, options: dashboardOptions.map((elem) => ({
                                                             label: elem.label,
                                                             value: elem.label,
-                                                        })), theme: theme })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
+                                                        })) })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Chart type" }), _jsx(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
                                                         // filter out metric for all pivots
                                                         // filter out bar and pie for row and column pivot
-                                                        options: getChartTypeOptions(formData), theme: theme })] })] }), _jsx("br", {}), _jsxs("div", { style: {
+                                                        options: getChartTypeOptions(formData) })] })] }), _jsx("br", {}), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
                                             marginTop: 6,
-                                        }, children: [_jsx(Header, { children: "Pivot" }), _jsxs("div", { style: { fontFamily: theme?.fontFamily }, children: [_jsx("div", { style: {
+                                        }, children: [_jsx(HeaderComponent, { label: "Pivot" }), _jsxs("div", { style: { fontFamily: theme?.fontFamily }, children: [_jsx("div", { style: {
                                                             maxWidth: 200,
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: _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: selectedTable, SelectComponent: Select, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, PopoverComponent: Popover, LabelComponent: Label, TextComponent: Text, HeaderComponent: Header, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && (_jsx("div", { style: {
+                                                        }, children: _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: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && (_jsx("div", { style: {
                                                             // width: 592,
                                                             paddingRight: 42,
                                                             maxWidth: 750,
-                                                        }, children: _jsx("div", { style: { width: !horizontalView ? divWidth : 'auto' }, children: _jsx(PivotCard, { pivotTable: {
+                                                        }, children: _jsx("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: _jsx(PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -747,29 +813,29 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                                     setPivotValueField(formData.pivot?.valueField);
                                                                     setPivotAggregation(formData.pivot?.aggregationType);
                                                                     setPivotPopUpTitle('Edit Pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 6,
                                                     marginTop: 6,
-                                                }, children: _jsx(Header, { children: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.xAxisLabel }), _jsxs("div", { style: {
+                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             gap: 12,
-                                                        }, children: [_jsx(Select, { value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), options: formData.pivot
+                                                        }, children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
                                                                     ? getPivotMetricOptions(formData.pivot)
                                                                     : fieldOptions.map((elem) => ({
                                                                         label: elem.field,
                                                                         value: elem.field,
-                                                                    })), theme: theme }), _jsx(TextInput, { id: "chart-builder-x-axis-label", value: formData.pivot
+                                                                    })) }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
                                                                     ? formData.pivot.rowField
-                                                                    : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel'), theme: theme }), _jsx(Select, { value: formData.pivot &&
+                                                                    : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType)
                                                                     ? 'pivot_date'
-                                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formData.pivot &&
+                                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, theme: theme })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.yAxisLabel }), _jsx("div", { style: {
+                                                                    : formatOptions })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsx("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'column',
                                                             gap: 10,
@@ -777,9 +843,9 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                                 display: 'flex',
                                                                 flexDirection: 'row',
                                                                 gap: 12,
-                                                            }, children: [_jsx(Select, { value: formData.pivot
+                                                            }, children: [_jsx(SelectComponent, { value: formData.pivot
                                                                         ? formData.pivot.valueField
-                                                                        : yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), theme: theme, options: formData.pivot
+                                                                        : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                         ? [
                                                                             {
                                                                                 label: `Pivot Column (${formData.pivot.valueField})`,
@@ -793,21 +859,21 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                                             .map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })) }), _jsx(TextInput, { id: "chart-builder-y-axis-label", value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index), theme: theme }), _jsx(Select, { theme: theme, value: formData.pivot
-                                                                        ? !!NUMBER_OPTIONS.find((option) => {
+                                                                        })) }), _jsx(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), _jsx(SelectComponent, { value: formData.pivot
+                                                                        ? NUMBER_OPTIONS.find((option) => {
                                                                             return (option.value === yAxisField.format);
                                                                         })
                                                                             ? // @ts-ignore
                                                                                 NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
                                                                             : 'whole_number'
-                                                                        : yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: formData.pivot
+                                                                        : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                         ? NUMBER_OPTIONS
-                                                                        : formatOptions }), formData.pivot === null && (_jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                                        : formatOptions }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 6,
                                                     marginTop: 6,
-                                                }, children: [_jsx(Header, { children: "Table" }), _jsx(Label, { children: "Columns" })] }), _jsx("div", { style: {
+                                                }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(LabelComponent, { label: "Columns" })] }), _jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 10,
@@ -820,10 +886,10 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                                 display: 'flex',
                                                                 flexDirection: 'row',
                                                                 gap: 12,
-                                                            }, children: [_jsx(Select, { theme: theme, value: column.label, onChange: (e) => handleChange(e, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
+                                                            }, children: [_jsx(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
                                                                         label: elem.label,
                                                                         value: elem.label,
-                                                                    })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: 
+                                                                    })) }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: 
                                                                     // The first index use rowField for the rest of them use value fields
                                                                     formData.pivot &&
                                                                         column.field === formData.pivot.rowField
@@ -832,7 +898,7 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                                             ? 'pivot_date'
                                                                             : 'string'
                                                                         : formData.pivot?.valueFieldType ||
-                                                                            'whole_number', onChange: (e) => handleChange(e, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                                            'whole_number', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
                                                                         ? isDateField(formData.pivot.rowFieldType)
                                                                             ? [{ label: 'date', value: 'pivot_date' }]
                                                                             : [{ label: 'string', value: 'string' }]
@@ -841,22 +907,22 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             gap: 12,
-                                                        }, children: [_jsx(Select, { theme: theme, value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: fields.map((elem) => ({
+                                                        }, children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: fields.map((elem) => ({
                                                                     label: elem.field,
                                                                     value: elem.field,
-                                                                })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: formatOptions }), _jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
+                                                                })) }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
                                             marginTop: 6,
-                                        }, children: [_jsx(Header, { children: "Date field" }), _jsxs("div", { style: {
+                                        }, children: [_jsx(HeaderComponent, { label: "Date field" }), _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
                                                     gap: 12,
-                                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { theme: theme, value: formData.dateField?.table, onChange: (e) => handleChange(e, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Table" }), _jsx(SelectComponent, { value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
                                                                     label: elem.name,
                                                                     value: elem.name,
-                                                                })) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { theme: theme, value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
+                                                                })) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Field" }), _jsx(SelectComponent, { value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
                                                                     ?.find((elem) => elem.name === formData.dateField?.table)
                                                                     ?.columns?.map((elem) => ({
                                                                     label: elem.name,
@@ -866,13 +932,13 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
                                             flexDirection: 'column',
                                             gap: 12,
                                             marginTop: 6,
-                                        }, children: [_jsx(Header, { children: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName })] }))] }), _jsxs("div", { style: {
+                                        }, children: [_jsx(HeaderComponent, { label: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName })] }))] }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     justifyContent: 'flex-end',
                                     marginTop: 'auto',
                                     gap: 10,
-                                }, children: [!horizontalView && dashboardItem && (_jsx(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), _jsx(Button, { onClick: () => editChart(), label: buttonLabel
+                                }, children: [!isHorizontalView && dashboardItem && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), _jsx(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
                                             ? buttonLabel
                                             : dashboardItem
                                                 ? 'Save changes'
@@ -941,21 +1007,16 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
 ` }), organizationName] }))] }));
 }
 export function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }) {
-    return (_jsx(MemoizedModal, { isOpen: isOpen, onClose: () => {
-            setIsOpen(false);
-        }, setIsOpen: setIsOpen, theme: theme, title: 'Chart not compatible with selected dashboard', children: _jsxs("div", { style: {
+    return (_jsx(MemoizedModal, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', children: _jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 width: '600px',
                 padding: '20px',
                 boxSizing: 'border-box',
-            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("br", {}), _jsxs("div", { style: {
+            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("br", {}), _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',
                         justifyContent: 'flex-end',
-                    }, children: [_jsx(MemoizedButton, { label: "Got It", onClick: () => setIsOpen(false) }), _jsx(MemoizedSecondaryButton, { label: "Override", onClick: () => {
-                                override();
-                                setIsOpen(false);
-                            } })] })] }) }));
+                    }, children: _jsx(MemoizedButton, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
 }

package/dist/esm/ChartEditor.d.ts

@@ -1,29 +1,125 @@
-/// <reference types="react" />
-import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, PopoverComponentProps } from './components/UiComponents';
-interface ChartEditorProps {
+import React, { ReactNode } from 'react';
+/**
+ * Props for the Quill ChartEditor component.
+ */
+export interface ChartEditorProps {
+    /** Whether the modal is open. */
     isOpen: boolean;
+    /** A callback that sets the isOpen state. */
+    setIsOpen: (isOpen: boolean) => void;
+    /** The id of the chart that is being edited. */
     chartId: string;
-    admin?: boolean;
+    /** Whether the editor has administrative priveleges. */
+    isAdmin?: boolean;
+    /** Whether the editor is editing an existing query. */
     isEditMode?: boolean;
+    /** The title of the chart builder form. */
     chartBuilderTitle?: string;
+    /** The button label for the chart builder. */
     chartBuilderButtonLabel?: string;
+    /**
+     * A callback that is fired when the add to dashboard flow has been completed.
+     */
     onAddToDashboardComplete?: () => void;
+    /** A callback that is fired when the item is deleted. */
     onDelete?: () => void;
-    setIsOpen: (isOpen: boolean) => void;
-    Select?: (props: SelectComponentProps) => JSX.Element;
-    TextInput?: (props: TextInputComponentProps) => JSX.Element;
-    Button?: (props: ButtonComponentProps) => JSX.Element;
-    SecondaryButton?: (props: ButtonComponentProps) => JSX.Element;
-    Header?: (props: HeaderProps) => JSX.Element;
-    Label?: (props: LabelProps) => JSX.Element;
-    Text?: (props: TextProps) => JSX.Element;
-    DeleteButton?: (props: DeleteButtonProps) => JSX.Element;
-    Modal?: (props: ModalComponentProps) => JSX.Element;
-    Popover?: (props: PopoverComponentProps) => JSX.Element;
+    /** A select component. */
+    SelectComponent?: (props: {
+        value: string;
+        label?: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    }) => JSX.Element;
+    /** An input component to get text from your users. */
+    TextInputComponent?: (props: {
+        id: string;
+        width: number;
+        value: string;
+        placeholder?: string;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    }) => JSX.Element;
+    /** A button component. */
+    ButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+    }) => JSX.Element;
+    /** A secondary button. */
+    SecondaryButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+    }) => JSX.Element;
+    /**
+     * A small delete button used to click out of things. Usually an "X" icon.
+     */
+    DeleteButtonComponent?: (props: {
+        onClick: () => void;
+    }) => JSX.Element;
+    /** A header component. */
+    HeaderComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A label component. */
+    LabelComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A text component. */
+    TextComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /**
+     * A modal component.
+     */
+    ModalComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        title?: string | undefined;
+        children: ReactNode;
+        width?: number | undefined;
+        height?: number | undefined;
+    }) => JSX.Element;
+    /** A popover component. */
+    PopoverComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        triggerLabel?: string;
+        popoverTitle?: string;
+        popoverChildren: ReactNode;
+    }) => JSX.Element;
+    /** The default dashboard to add the item to. */
     destinationDashboard?: string;
+    /** The name of the current organization. */
     organizationName?: string;
-    horizontalView?: boolean;
+    /** Whether the ChartBuilder is in horizontal view mode. */
+    isHorizontalView?: boolean;
 }
-export default function ChartEditor({ isOpen, chartId, isEditMode, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, horizontalView, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * ### Quill Chart Editor
+ *
+ * Presents the Quill Chart Builder form as a modal.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ChartEditor isOpen={true} chartId="1234" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ChartEditor
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   chartId="1234"
+ *   Button={MyButton}
+ *   Modal={MyModal}
+ * />
+ * ```
+ *
+ * ### Chart Editor API
+ * @see https://docs.quillsql.com/components/chart-editor
+ */
+export default function ChartEditor({ isOpen, chartId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, PopoverComponent, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChartEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAKnC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,wBAAwB,EACxB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CA6LlB"}
+{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":"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"}