@quillsql/react 2.11.16 → 2.11.18

package/dist/esm/Dashboard.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useCallback, memo, } from 'react';
+/* eslint-disable no-unused-vars */
+import { useContext, useEffect, useState, } from 'react';
 import Chart from './Chart';
-import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, COMPARISON_OPTIONS, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, useComparisonRange, useDateFilter, } from './Context';
-import { ArrowDownHeadIcon } from './assets';
+import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, } from './Context';
 import { useDashboard } from './hooks/useDashboard';
 import { hashCode } from './utils/crypto';
 import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
@@ -15,137 +15,9 @@ import { styleToProps } from './utils/styles';
 import { cleanDashboardItem } from './utils/dashboard';
 import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import DataLoader from './components/Dashboard/DataLoader';
+import { QuillEmptyDashboardComponent } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
 import { QuillSelectComponent } from './components/QuillSelect';
-import ChartSkeleton from './components/Chart/ChartSkeleton';
-export function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelectComponent, DateRangePickerComponent, theme, }) {
-    const { comparisonRange, setComparisonRange } = useComparisonRange();
-    const { setDateFilter } = useDateFilter();
-    const [filterValue, setFilterValue] = useState(null);
-    useEffect(() => {
-        if (filter.filterType === 'string') {
-            setFilterValue(filter.selectedValue);
-        }
-        if (filter.filterType == 'date_range') {
-            setDateFilter(filter.preset.label);
-            if (filter?.comparisonRange?.value) {
-                const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
-                    return option.value === filter.comparisonRange.value;
-                });
-                setComparisonRange(newComparisonRange);
-            }
-            else {
-                setComparisonRange(null);
-            }
-        }
-    }, [filter]);
-    if (filter.filterType === 'string') {
-        return (_jsx(SelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
-                onChangeFilter(filter, e);
-            }, options: [
-                ...filter.options.map((elem) => {
-                    return {
-                        label: elem[filter.labelField],
-                        value: elem[filter.field],
-                    };
-                }),
-            ] }));
-    }
-    if (filter.filterType == 'date_range') {
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'flex-end',
-            }, children: [_jsx(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
-                        onChangeFilter(filter, {
-                            startDate: value.startDate,
-                            endDate: value.endDate,
-                        });
-                    }, onChangePreset: (value) => {
-                        onChangeFilter(filter, { preset: value });
-                    }, presetOptions: filter.options.map((option) => {
-                        return { label: option.label, value: option.label };
-                    }) }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    paddingLeft: 16,
-                                    paddingRight: 12,
-                                    color: theme?.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                    fontSize: 14,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    flex: 1,
-                                    minWidth: 80,
-                                    justifyContent: 'center',
-                                }, children: "compared to" }), _jsx(SelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => {
-                                        return option.value === e;
-                                    }));
-                                }, options: COMPARISON_OPTIONS.map((compareOption) => {
-                                    return {
-                                        value: compareOption.value,
-                                        label: compareOption.text,
-                                    };
-                                }) })] }) }))] }));
-    }
-    return null;
-}
-const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
-    const [theme] = useContext(ThemeContext);
-    const handleOnChange = useCallback((event) => {
-        onChange(event.target.value);
-    }, [onChange]);
-    return (_jsxs("div", { children: [label && (_jsx("div", { style: {
-                    marginBottom: 6,
-                    fontWeight: theme.labelFontWeight || '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                }, children: label })), _jsxs("div", { style: { position: 'relative', height: 38 }, children: [_jsxs("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
-                        // defaultValue="Select"
-                        style: {
-                            width: '100%',
-                            WebkitAppearance: 'none',
-                            minWidth: 230,
-                            outline: 'none',
-                            textAlign: 'left',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            borderRadius: 6,
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            height: 38,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            background: theme.backgroundColor,
-                            color: theme.primaryTextColor,
-                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                            fontFamily: theme.fontFamily,
-                            fontSize: 14,
-                            fontWeight: 500,
-                            boxSizing: 'border-box',
-                        }, children: [_jsx("option", { value: "", children: "Select" }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, option.label + index)))] }), _jsx(ArrowDownHeadIcon, { style: {
-                            height: '20px',
-                            width: '20px',
-                            flex: 'none',
-                            position: 'absolute',
-                            right: 8,
-                            top: 9,
-                            color: theme?.secondaryTextColor,
-                        }, "aria-hidden": "true" })] })] }));
-};
-const MemoizedDropdown = memo(QuillDropdownComponent);
-const areEqual = (prevProps, nextProps) => {
-    // This function returns true if passing nextProps to render would return
-    // the same result as passing prevProps to render, otherwise it returns false
-    return (prevProps.dateRange.startDate === nextProps.dateRange.startDate &&
-        prevProps.dateRange.endDate === nextProps.dateRange.endDate);
-};
-const MemoizedDateRangePicker = memo(QuillDateRangePicker, areEqual);
-const QuillEmptyDashboardComponent = () => _jsx("div", {});
 const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
@@ -153,10 +25,37 @@ const defaultChartContainerStyles = {
     height: 300,
 };
 /**
- * Quill Dashboard.
+ * ### Quill Dashboard
+ *
+ * Dynamically displays a filterable grid of charts, metrics, and tables with
+ * live data from your database. Once implemented, Quill lets you perform
+ * zero-downtime, zero-code updates to your dashboard views on an org-level as
+ * well as company-wide.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <Dashboard />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <Dashboard
+ *   name="saved_reports"
+ *   SelectComponent={MySelect}
+ *   onClickDashboardItem={(item) => navigate(`/detail/${item.id}`)}
+ *   MetricComponent={MyMetric}
+ *   ChartComponent={MyChart}
+ *   TableComponent={MyTable}
+ *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
+ * />
+ * ```
+ *
+ * ### API Reference
+ * @see https://docs.quillsql.com/components/dashboard
  */
-export default function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, SkeletonComponent = ChartSkeleton, DashboardSectionContainerComponent = DashboardSectionContainer, DashboardSectionComponent = DashboardSection, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, singlePointStyle = 'dot', }) {
-    const { dateFilter } = useDateFilter();
+export default function Dashboard({ name, SelectComponent = QuillSelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, onClickDashboardItem, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, }) {
     const { dispatch } = useContext(DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
@@ -265,8 +164,11 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
         }
     };
     const handleOnClickDashboardItem = (elem) => {
+        const cleanedItem = cleanDashboardItem(dashboard[elem._id] ?? elem, dashboardFilters);
         if (dashboard[elem._id]?._id && onClickDashboardItem) {
-            onClickDashboardItem(dashboard[elem._id]);
+            // The _id add-on is a patch for backwards compatability
+            // TODO: remove all _id references from the codebase (admin and react)
+            onClickDashboardItem({ ...cleanedItem, _id: elem._id });
         }
         else if (onClickDashboardItem) {
             dispatch({
@@ -274,13 +176,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                 id: elem._id,
                 data: { ...elem, filtersApplied: dashboardFilters },
             });
-            onClickDashboardItem({
-                ...dashboard[elem._id],
-                _id: elem._id,
-                error_id: elem._id,
-                name: elem.name,
-                query: elem.queryString,
-            });
+            onClickDashboardItem({ ...cleanedItem, _id: elem._id });
         }
     };
     function removeQuotes(str) {
@@ -417,16 +313,16 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
         return _jsx(EmptyDashboardComponent, {});
     const sortByOrdering = (a, b) => {
         if (a.order === undefined && b.order === undefined)
-            return 0; // both items don't have the 'order' field
+            return 0;
         if (a.order === undefined)
-            return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+            return 1;
         if (b.order === undefined)
-            return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-        return a.order - b.order; // both items have the 'order' field, sort numerically
+            return -1;
+        return a.order - b.order;
     };
     const sortedFilters = Object.values(dashboardFilters)
         .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-        .filter((f) => !dateRangeFilterDisabled || f.filterType !== 'date_range');
+        .filter((f) => !hideDateRangeFilter || f.filterType !== 'date_range');
     const metrics = (section) => dashboardSections[section]
         .filter(({ chartType }) => chartType === 'metric')
         .sort(sortByOrdering);
@@ -436,7 +332,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
     const tables = (section) => dashboardSections[section]
         .filter(({ chartType }) => chartType === 'table')
         .sort(sortByOrdering);
-    return (_jsxs("div", { ...styleToProps(containerStyle), children: [!hideFilters && sortedFilters.length > 0 && (_jsx("div", { style: {
+    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [!hideFilters && sortedFilters.length > 0 && (_jsx("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
@@ -448,9 +344,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
-                            ? DateRangePickerComponent
-                            : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
+                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
@@ -464,15 +358,15 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "metrics", children: metrics(section).map((item, index) => {
-                                return (_jsx(DataLoader, { id: item._id, children: ({ isLoading, error }) => (_jsx(MetricComponent, { theme: theme, error: error, isLoading: isLoading, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                return (_jsx(DataLoader, { id: item._id, children: ({ isLoading, error }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClick: onClickDashboardItem
                                             ? () => handleOnClickDashboardItem(item)
-                                            : void null }, item.name + '' + index)) }, `${item.name}${index}`));
-                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => (_jsx(ChartComponent, { theme: theme, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                            : undefined }, item.name + '' + index)) }, `${item.name}${index}`));
+                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => (_jsx(ChartComponent, { dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClick: onClickDashboardItem
                                     ? () => handleOnClickDashboardItem(item)
-                                    : void null, children: _jsx(Chart, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
+                                    : undefined, children: _jsx(Chart, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
                                         ? theme.chartColors
-                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, children: ({ isLoading, error }) => (_jsx(TableComponent, { theme: theme, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), isLoading: isLoading, error: error, onClickDashboardItem: onClickDashboardItem
+                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, children: ({ isLoading, error }) => (_jsx(TableComponent, { dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), isLoading: isLoading, error: error, onClick: onClickDashboardItem
                                         ? () => handleOnClickDashboardItem(item)
-                                        : void null })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                                        : undefined })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }

package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts

@@ -1,3 +1,23 @@
-import { DateRangePickerComponentProps } from '../Dashboard';
+import { ChangeEvent } from 'react';
+export interface DateRangePickerComponentProps {
+    preset: string;
+    label?: string;
+    dateRange: {
+        startDate: Date;
+        endDate: Date;
+    };
+    presetOptions: {
+        label: string;
+        value: string;
+    }[];
+    onChangeDateRange: ({ startDate, endDate, }: {
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
+}
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
 export declare function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillDateRangePicker.d.ts.map

package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,6BAA6B,EAAE,MAAM,cAAc,CAAC;AAK7D,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA+H/B"}
+{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAqBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC;IAC9C,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA8H/B"}

package/dist/esm/DateRangePicker/QuillDateRangePicker.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState, } from 'react';
 import { startOfMonth, endOfMonth, format, eachDayOfInterval, subMonths, startOfWeek, endOfWeek, differenceInDays, startOfDay, addMonths, isBefore, isAfter, } from 'date-fns';
 import { ThemeContext } from '../Context';
 import { useOnClickOutside } from '../hooks';
 import { QuillSelectComponent } from '../components/QuillSelect';
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
 export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, }) {
     const [theme] = useContext(ThemeContext);
     const [anchorStartDate, setAnchorStartDate] = useState(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
@@ -54,8 +57,8 @@ export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptio
                     value: option.label,
                 })), value: localPreset.label || '', onChange: (e) => {
                     onChangePreset(e);
-                    setLocalPreset({ label: e });
-                }, theme: theme })] }));
+                    setLocalPreset({ label: e.target.value });
+                } })] }));
 }
 function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, setLocalPreset, setShowModal, }) {
     const modalRef = useRef(null);

package/dist/esm/DateRangePicker/dateRangePickerUtils.js

@@ -1,5 +1,5 @@
 import { addDays, differenceInDays, endOfToday, format, isEqual, isToday, max, min, startOfDay, startOfMonth, startOfToday, startOfWeek, startOfYear, sub, } from 'date-fns';
-import { hexToRgbaWith10PercentAlpha } from '../BarList';
+import { hexToRgbaWith10PercentAlpha } from '../components/Chart/BarList';
 export const getWeekdays = (locale) => {
     const firstDayOfWeek = startOfWeek(new Date());
     return Array.from(Array(7)).map((e, i) => format(addDays(firstDayOfWeek, i), 'EEEEEE', { locale }));

package/dist/esm/QuillProvider.d.ts

@@ -17,7 +17,51 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
     queryHeaders: object;
     withCredentials?: boolean;
 }
-type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
+export type IQuillProviderProps = WithOrganizationId | WithQueryEndpoint;
+/**
+ * Props for the QuillProvider component.
+ */
+export type QuillProviderProps = {
+    /**
+     * Your Quill public key.
+     */
+    publicKey: string;
+    /**
+     * The url of the query endpoint if using self-hosted.
+     */
+    queryEndpoint: string | never;
+    /**
+     * Request headers passed to queryEndpoint, if self-hosted.
+     */
+    queryHeaders: object | never;
+    /**
+     * The organization id of this request, if any.
+     */
+    organizationId?: string;
+    /**
+     * The environment where this request is executed (eg. 'production')
+     */
+    environment?: string;
+    /**
+     * The theme object used to customize all quill components.
+     */
+    theme?: QuillTheme;
+    /**
+     * Whether to pass credentials to the custom query endpoint, if any.
+     */
+    withCredentials?: boolean;
+    /**
+     * The children of this provider (typically, this is the rest of your app).
+     */
+    children?: React.ReactNode;
+};
+/**
+ * ## Quill Theme
+ * Customizable styles used throughout Quill.
+ *
+ * ### QuillTheme API
+ * @see https://docs.quillsql.com/components/quill-provider#quilltheme
+ */
 export interface QuillTheme {
     fontFamily: string;
     backgroundColor: string;
@@ -29,9 +73,9 @@ export interface QuillTheme {
     chartTickColor: string;
     chartColors: string[];
     borderColor: string;
+    borderWidth: number;
     primaryButtonColor?: string;
     secondaryButtonColor?: string;
-    borderWidth: number;
     buttonFontWeight?: number;
     labelFontWeight?: number;
     fontSize?: number;
@@ -55,6 +99,65 @@ export declare const defaultQuillTheme: {
     loadingStateBackgroundColor: string;
     hoverBackgroundColor: string;
 };
+/**
+ * ### Quill Provider
+ *
+ * The quill provider allows all the quill components in your app to share
+ * information which lets your dashboards render fast and update dynamically.
+ *
+ * Similar to React’s `Context.Provider`, `QuillProvider` wraps your React app
+ * and places Quill Client on the context, enabling you to access it from
+ * anywhere in your component tree. We suggest putting the QuillProvider
+ * somewhere high in your app, above any component that might need to access
+ * your quill data.
+ *
+ * ### Quickstart
+ * There are two ways to set up the QuillProvider; with an organization id using
+ * our fully-managed cloud platform, or with a query endpoint pointing to your
+ * own server running our self-hosted server SDK.
+ *
+ * @example
+ * ```js
+ * // Usage with organization id
+ * <QuillProvider
+ *   organizationId={'acme_org'}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with query endpoint
+ * <QuillProvider
+ *   queryEndpoint="https://example.com/quill"
+ *   queryHeaders={AUTH_HEADERS}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * ### Custom Themes
+ * You can also pass in a custom theme into the QuillProvider to automatically
+ * style all default quill components at the same time. The combination of
+ * passing custom themes as well as passing your existing components gets you
+ * pixel-perfect dashboards in a fraction of the time.
+ *
+ * Our guide on custom themes is coming soon.
+ *
+ * ### Endpoint Authorization
+ * When self-hosting the server SDK, you might need extra authentication measures
+ * to ensure a secure system. In addition to passing a `queryHeaders` object along
+ * with any requests to your custom endpoint, you also can pass a `withCredentials`
+ * boolean.
+ *
+ * Our guide on endpoint authorization is coming soon.
+ *
+ * ### Dashboard API
+ * @see https://docs.quillsql.com/components/quill-provider
+ */
 declare const QuillProvider: ({ organizationId, publicKey, queryEndpoint, queryHeaders, environment, children, theme, withCredentials, }: QuillProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default QuillProvider;
 //# sourceMappingURL=QuillProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAEjE,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAGD,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/QuillProvider.js

@@ -25,6 +25,65 @@ export const defaultQuillTheme = {
     loadingStateBackgroundColor: '#F9F9FA',
     hoverBackgroundColor: '#F4F4F5',
 };
+/**
+ * ### Quill Provider
+ *
+ * The quill provider allows all the quill components in your app to share
+ * information which lets your dashboards render fast and update dynamically.
+ *
+ * Similar to React’s `Context.Provider`, `QuillProvider` wraps your React app
+ * and places Quill Client on the context, enabling you to access it from
+ * anywhere in your component tree. We suggest putting the QuillProvider
+ * somewhere high in your app, above any component that might need to access
+ * your quill data.
+ *
+ * ### Quickstart
+ * There are two ways to set up the QuillProvider; with an organization id using
+ * our fully-managed cloud platform, or with a query endpoint pointing to your
+ * own server running our self-hosted server SDK.
+ *
+ * @example
+ * ```js
+ * // Usage with organization id
+ * <QuillProvider
+ *   organizationId={'acme_org'}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with query endpoint
+ * <QuillProvider
+ *   queryEndpoint="https://example.com/quill"
+ *   queryHeaders={AUTH_HEADERS}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * ### Custom Themes
+ * You can also pass in a custom theme into the QuillProvider to automatically
+ * style all default quill components at the same time. The combination of
+ * passing custom themes as well as passing your existing components gets you
+ * pixel-perfect dashboards in a fraction of the time.
+ *
+ * Our guide on custom themes is coming soon.
+ *
+ * ### Endpoint Authorization
+ * When self-hosting the server SDK, you might need extra authentication measures
+ * to ensure a secure system. In addition to passing a `queryHeaders` object along
+ * with any requests to your custom endpoint, you also can pass a `withCredentials`
+ * boolean.
+ *
+ * Our guide on endpoint authorization is coming soon.
+ *
+ * ### Dashboard API
+ * @see https://docs.quillsql.com/components/quill-provider
+ */
 const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = defaultQuillTheme, withCredentials = false, }) => {
     return (_jsxs(ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: [children, _jsx("style", { children: `/* For WebKit-based browsers (Chrome, Safari, Opera) */
         ::-webkit-scrollbar {