@quillsql/react 2.11.2 → 2.11.4

package/dist/cjs/ReportBuilder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Quill Report Builder
  *
@@ -7,35 +6,29 @@
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-export default function ReportBuilder({ path, initialTableName, onAddToDashboardComplete, destinationDashboard, dashboardItem, organizationName, Button, SecondaryButton, TextInput, Select, Table, Popover, Tabs, Checkbox, Sidebar, Container, HandleButton, SelectColumn, DraggableColumn, ButtonLoadingState, TableLoadingState, SidebarHeading, SidebarSubHeading, FilterPopover, }: {
-    path?: string | undefined;
-    initialTableName?: string | undefined;
-    onAddToDashboardComplete?: (() => undefined) | undefined;
-    destinationDashboard?: undefined;
-    dashboardItem?: undefined;
-    organizationName?: string | undefined;
-    Button?: (({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    SecondaryButton?: (({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    TextInput?: ((props: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Select?: (({ onChange, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Table?: (({ rows, columns, error, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Popover?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Tabs?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Checkbox?: (({ checked, onChange, style, ...props }: {
-        [x: string]: any;
-        checked: any;
-        onChange: any;
-        style?: {} | undefined;
-    }) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Sidebar?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Container?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    HandleButton?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    SelectColumn?: (({ label, selected, setSelected, children, }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    DraggableColumn?: (({ label, children, onDelete }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    ButtonLoadingState?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    TableLoadingState?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    SidebarHeading?: (({ label }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    SidebarSubHeading?: (({ label }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    FilterPopover?: (({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
+export default function ReportBuilder({ initialTableName, onAddToDashboardComplete, destinationDashboard, organizationName, Button, SecondaryButton, TextInput, Select, Table, Popover, Tabs, Checkbox, Sidebar, Container, HandleButton, SelectColumn, DraggableColumn, ButtonLoadingState, TableLoadingState, SidebarHeading, SidebarSubHeading, FilterPopover, admin, }: {
+    initialTableName: string;
+    onAddToDashboardComplete: () => void;
+    destinationDashboard?: string;
+    organizationName?: string;
+    Button?: any;
+    SecondaryButton?: any;
+    TextInput?: any;
+    Select?: any;
+    Table?: any;
+    Popover?: any;
+    Tabs?: any;
+    Checkbox?: any;
+    Sidebar?: any;
+    Container?: any;
+    HandleButton?: any;
+    SelectColumn?: any;
+    DraggableColumn?: any;
+    ButtonLoadingState?: any;
+    TableLoadingState?: any;
+    SidebarHeading?: any;
+    SidebarSubHeading?: any;
+    FilterPopover?: any;
+    admin?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReportBuilder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":";AAwGA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAS,EACT,gBAAiC,EACjC,wBAA0C,EAC1C,oBAAgC,EAChC,aAAyB,EACzB,gBAAqB,EACrB,MAAoB,EACpB,eAAsC,EACtC,SAA0B,EAC1B,MAAoB,EACpB,KAA+B,EAC/B,OAAsB,EACtB,IAAgB,EAChB,QAA2B,EAC3B,OAAsB,EACtB,SAA2B,EAC3B,YAAgC,EAChC,YAAgC,EAChC,eAAsC,EACtC,kBAA4C,EAC5C,iBAA0C,EAC1C,cAAoC,EACpC,iBAA0C,EAC1C,aAAkC,GACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA,2CAwhGA"}
+{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":"AAwGA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAqB,EACrB,wBAA0C,EAC1C,oBAAgC,EAChC,gBAAqB,EACrB,MAAoB,EACpB,eAAsC,EACtC,SAA0B,EAC1B,MAAoB,EACpB,KAA+B,EAC/B,OAAsB,EACtB,IAAgB,EAChB,QAA2B,EAC3B,OAAsB,EACtB,SAA2B,EAC3B,YAAgC,EAChC,YAAgC,EAChC,eAAsC,EACtC,kBAA4C,EAC5C,iBAA0C,EAC1C,cAAoC,EACpC,iBAA0C,EAC1C,aAAkC,EAClC,KAAa,GACd,EAAE;IACD,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAuhGA"}

package/dist/cjs/ReportBuilder.js

@@ -29,7 +29,7 @@ const AddColumnPopover_1 = __importDefault(require("./components/ReportBuilder/A
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, dashboardItem = undefined, organizationName = '', Button = ui_1.QuillButton, SecondaryButton = ui_1.QuillSecondaryButton, TextInput = ui_1.QuillTextInput, Select = ui_1.QuillSelect, Table = ui_1.QuillReportBuilderTable, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, }) {
+function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = ui_1.QuillButton, SecondaryButton = ui_1.QuillSecondaryButton, TextInput = ui_1.QuillTextInput, Select = ui_1.QuillSelect, Table = ui_1.QuillReportBuilderTable, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, admin = false, }) {
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -611,11 +611,11 @@ function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDa
     };
     // Function to handle the deletion of expressions
     const handleDelete = (key) => {
-        updateFormData([{ path: path + key, value: null }], { isDeletion: true });
+        updateFormData([{ path: key, value: null }], { isDeletion: true });
     };
     // Function to handle the insertion of expressions
     const handleInsertion = (value, op = 'OR', isCondition = undefined) => {
-        updateFormData([{ path, value }], {
+        updateFormData([{ path: '', value }], {
             isInsertion: true,
             topLevelBinOp: op,
             isCondition,
@@ -625,13 +625,13 @@ function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDa
     const handleInsertVariant = (key, name = null) => {
         // note: if name, treat that as the name of the value to insert
         const callback = isPending ? updateActiveItem : updateFormData;
-        callback([{ path: path + key, value: name }], { isAddVariant: true });
+        callback([{ path: key, value: name }], { isAddVariant: true });
     };
     // Function to handle the insertion of expr_list variants
     const handleDeleteVariant = (key, name = null) => {
         // note: if name, treat that as the name of the valeu to delete
         const callback = isPending ? updateActiveItem : updateFormData;
-        callback([{ path: path + key, value: name }], { isDeleteVariant: true });
+        callback([{ path: key, value: name }], { isDeleteVariant: true });
     };
     const getColumnValueForColumnComparison = (node) => node.left.value ??
         node.left.column ??
@@ -2126,6 +2126,6 @@ function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDa
                                             whiteSpace: 'nowrap',
                                         }, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, { type: "button", onClick: () => copyToClipboard(activeQuery), children: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, children: "Add to dashboard" })] })] }))] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true, title: "Add to dashboard", isEditMode: false, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, dashboardItem: dashboardItem, organizationName: organizationName })] }));
+                                        }, children: "Add to dashboard" })] })] }))] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: false, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName })] }));
 }
 exports.default = ReportBuilder;

package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CA4LL"}
+{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAiML"}

package/dist/cjs/components/ReportBuilder/AddColumnPopover.js

@@ -5,7 +5,9 @@ const react_1 = require("react");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
+const Context_1 = require("../../Context");
 function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [search, setSearch] = (0, react_1.useState)('');
     const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
         coordinateGetter: sortable_1.sortableKeyboardCoordinates,
@@ -52,8 +54,8 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                             overflowY: 'auto',
                             maxWidth: '300px',
                         }, children: [searchResults.map((value) => {
-                                return ((0, jsx_runtime_1.jsx)(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
-                            }), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)("div", { children: "No results found" }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                return ((0, jsx_runtime_1.jsx)(SortableItem, { theme: theme, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
+                            }), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     width: '100%',
                     flexDirection: 'row',
@@ -106,7 +108,7 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                         }, children: "Save" })] })] }));
 }
 exports.default = AddColumnPopover;
-const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, HandleButton, }) => {
+const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: id });
     const style = {
         transform: utilities_1.CSS.Transform.toString(transform),

package/dist/cjs/components/ReportBuilder/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGA2DpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CA6CL;AAED,eAAO,MAAM,YAAY,sGA8BxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAsE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CAyCL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAuCtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAkDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}

package/dist/cjs/components/ReportBuilder/ui.js

@@ -94,7 +94,8 @@ exports.QuillTag = (0, react_1.forwardRef)(({ label, onClick, children, onClickD
             width: '100%',
             padding: '4px 8px',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
+            fontFamily: theme?.fontFamily,
             fontSize: 14,
         }, ref: forwardedRef, onClick: onClick, children: [label ?? children, !hideDelete && ((0, jsx_runtime_1.jsx)("div", { style: {
                     marginLeft: 'auto',
@@ -102,7 +103,12 @@ exports.QuillTag = (0, react_1.forwardRef)(({ label, onClick, children, onClickD
                     display: 'flex',
                     flexDirection: 'column',
                     justifyContent: 'center',
-                }, children: (0, jsx_runtime_1.jsx)("button", { onClick: onClickDelete, style: { margin: -4 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) }) }))] }));
+                }, children: (0, jsx_runtime_1.jsx)("button", { onClick: onClickDelete, style: {
+                        margin: -4,
+                        border: 'none',
+                        backgroundColor: theme?.backgroundColor || 'white',
+                        fontFamily: theme?.fontFamily,
+                    }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) }) }))] }));
 });
 // A heading element in the sidebar (eg. "Filters")
 const QuillSidebarHeading = ({ label }) => ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedHeader, { children: label }));
@@ -146,6 +152,7 @@ const QuillSelect = ({ onChange, ...props }) => {
 exports.QuillSelect = QuillSelect;
 function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
     const modalRef = (0, react_1.useRef)(null);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     (0, react_1.useEffect)(() => {
         const listener = (event) => {
             if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
@@ -158,10 +165,12 @@ function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
         };
     }, [modalRef, onClose]);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [trigger, isOpen && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        background: 'white',
+                        background: theme?.backgroundColor || 'white',
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
+                        border: theme
+                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#e7e7e7'}`
+                            : '1px solid #e7e7e7',
                         boxSizing: 'content-box',
                         zIndex: 999,
                         top: 12,
@@ -173,16 +182,20 @@ function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
 }
 exports.MemoizedPopover = MemoizedPopover;
 exports.QuillPopover = (0, react_1.forwardRef)(({ children, trigger, isOpen, onClose = () => { }, title = undefined }, ref) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)(MemoizedPopover, { isOpen: isOpen, onClose: onClose, trigger: trigger, parentRef: ref, ref: ref, children: [title && ((0, jsx_runtime_1.jsx)("h1", { style: {
                     fontWeight: '600',
                     fontSize: 18,
                     margin: 0,
                     textAlign: 'left',
                     paddingBottom: 12,
+                    color: theme?.primaryTextColor,
+                    fontFamily: theme?.fontFamily,
                 }, children: title })), children] }));
 });
 // The six-dot grab-handle icon.
 const QuillHandleButton = () => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             gap: 2,
@@ -226,6 +239,7 @@ const QuillHandleButton = () => {
 };
 exports.QuillHandleButton = QuillHandleButton;
 const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { title: label, style: {
             boxShadow: '0px 1px 4px #e2e8f005',
             paddingTop: 4,
@@ -235,7 +249,7 @@ const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
             borderRadius: 4,
             display: 'flex',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
         }, children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (0, jsx_runtime_1.jsxs)("label", { style: {
                     display: 'flex',
                     gap: 2,
@@ -248,6 +262,8 @@ const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
                             whiteSpace: 'nowrap',
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
                         }, children: label })] })] }));
 };
 exports.QuillSelectColumn = QuillSelectColumn;
@@ -260,7 +276,7 @@ const QuillDraggableColumn = ({ label, children, onDelete }) => {
             borderRadius: 6,
             display: 'flex',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
         }, children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (0, jsx_runtime_1.jsx)("div", { style: {
                     marginLeft: 2,
                     marginRight: 'auto',
@@ -268,7 +284,15 @@ const QuillDraggableColumn = ({ label, children, onDelete }) => {
                     display: 'block',
                     whiteSpace: 'nowrap',
                     textOverflow: 'ellipsis',
-                }, children: label }), (0, jsx_runtime_1.jsx)("button", { onClick: onDelete, style: { paddingRight: 8, margin: -4 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
+                    fontFamily: theme?.fontFamily,
+                }, children: label }), (0, jsx_runtime_1.jsx)("button", { onClick: onDelete, style: {
+                    paddingRight: 8,
+                    margin: -4,
+                    fontFamily: theme?.fontFamily,
+                    backgroundColor: theme?.backgroundColor || 'white',
+                    border: 'none',
+                    outline: 'none',
+                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
 };
 exports.QuillDraggableColumn = QuillDraggableColumn;
 // Three dots animated bouncing

package/dist/cjs/components/UiComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UiComponents.js

@@ -127,19 +127,24 @@ const MemoizedSelect = ({ value, onChange, options, disabled = false, style = {}
                 }, "aria-hidden": "true" })] }));
 };
 exports.MemoizedSelect = MemoizedSelect;
-const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
-        fontSize: 16,
-        fontWeight: 600,
-        color: '#384151',
-        userSelect: 'none',
-        margin: 0,
-        padding: 0,
-    }, children: children }));
+const MemoizedHeader = ({ children }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    return ((0, jsx_runtime_1.jsx)("h1", { style: {
+            fontSize: 16,
+            fontWeight: 600,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor || '#384151',
+            userSelect: 'none',
+            margin: 0,
+            padding: 0,
+        }, children: children }));
+};
 exports.MemoizedHeader = MemoizedHeader;
 const MemoizedLabel = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
         fontSize: 14,
         fontWeight: 600,
-        color: '#575E6A',
+        fontFamily: theme?.fontFamily,
+        color: theme?.secondaryTextColor || '#575E6A',
         userSelect: 'none',
         paddingBottom: 5,
     }, children: children }));

package/dist/esm/ReportBuilder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Quill Report Builder
  *
@@ -7,35 +6,29 @@
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-export default function ReportBuilder({ path, initialTableName, onAddToDashboardComplete, destinationDashboard, dashboardItem, organizationName, Button, SecondaryButton, TextInput, Select, Table, Popover, Tabs, Checkbox, Sidebar, Container, HandleButton, SelectColumn, DraggableColumn, ButtonLoadingState, TableLoadingState, SidebarHeading, SidebarSubHeading, FilterPopover, }: {
-    path?: string | undefined;
-    initialTableName?: string | undefined;
-    onAddToDashboardComplete?: (() => undefined) | undefined;
-    destinationDashboard?: undefined;
-    dashboardItem?: undefined;
-    organizationName?: string | undefined;
-    Button?: (({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    SecondaryButton?: (({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    TextInput?: ((props: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Select?: (({ onChange, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Table?: (({ rows, columns, error, ...props }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Popover?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Tabs?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Checkbox?: (({ checked, onChange, style, ...props }: {
-        [x: string]: any;
-        checked: any;
-        onChange: any;
-        style?: {} | undefined;
-    }) => import("react/jsx-runtime").JSX.Element) | undefined;
-    Sidebar?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    Container?: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>> | undefined;
-    HandleButton?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    SelectColumn?: (({ label, selected, setSelected, children, }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    DraggableColumn?: (({ label, children, onDelete }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    ButtonLoadingState?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    TableLoadingState?: (() => import("react/jsx-runtime").JSX.Element) | undefined;
-    SidebarHeading?: (({ label }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    SidebarSubHeading?: (({ label }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
-    FilterPopover?: (({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }: any) => import("react/jsx-runtime").JSX.Element) | undefined;
+export default function ReportBuilder({ initialTableName, onAddToDashboardComplete, destinationDashboard, organizationName, Button, SecondaryButton, TextInput, Select, Table, Popover, Tabs, Checkbox, Sidebar, Container, HandleButton, SelectColumn, DraggableColumn, ButtonLoadingState, TableLoadingState, SidebarHeading, SidebarSubHeading, FilterPopover, admin, }: {
+    initialTableName: string;
+    onAddToDashboardComplete: () => void;
+    destinationDashboard?: string;
+    organizationName?: string;
+    Button?: any;
+    SecondaryButton?: any;
+    TextInput?: any;
+    Select?: any;
+    Table?: any;
+    Popover?: any;
+    Tabs?: any;
+    Checkbox?: any;
+    Sidebar?: any;
+    Container?: any;
+    HandleButton?: any;
+    SelectColumn?: any;
+    DraggableColumn?: any;
+    ButtonLoadingState?: any;
+    TableLoadingState?: any;
+    SidebarHeading?: any;
+    SidebarSubHeading?: any;
+    FilterPopover?: any;
+    admin?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReportBuilder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":";AAwGA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAS,EACT,gBAAiC,EACjC,wBAA0C,EAC1C,oBAAgC,EAChC,aAAyB,EACzB,gBAAqB,EACrB,MAAoB,EACpB,eAAsC,EACtC,SAA0B,EAC1B,MAAoB,EACpB,KAA+B,EAC/B,OAAsB,EACtB,IAAgB,EAChB,QAA2B,EAC3B,OAAsB,EACtB,SAA2B,EAC3B,YAAgC,EAChC,YAAgC,EAChC,eAAsC,EACtC,kBAA4C,EAC5C,iBAA0C,EAC1C,cAAoC,EACpC,iBAA0C,EAC1C,aAAkC,GACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA,2CAwhGA"}
+{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":"AAwGA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,gBAAqB,EACrB,wBAA0C,EAC1C,oBAAgC,EAChC,gBAAqB,EACrB,MAAoB,EACpB,eAAsC,EACtC,SAA0B,EAC1B,MAAoB,EACpB,KAA+B,EAC/B,OAAsB,EACtB,IAAgB,EAChB,QAA2B,EAC3B,OAAsB,EACtB,SAA2B,EAC3B,YAAgC,EAChC,YAAgC,EAChC,eAAsC,EACtC,kBAA4C,EAC5C,iBAA0C,EAC1C,cAAoC,EACpC,iBAA0C,EAC1C,aAAkC,EAClC,KAAa,GACd,EAAE;IACD,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAuhGA"}

package/dist/esm/ReportBuilder.js

@@ -24,7 +24,7 @@ import AddColumnPopover from './components/ReportBuilder/AddColumnPopover';
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-export default function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, dashboardItem = undefined, organizationName = '', Button = QuillButton, SecondaryButton = QuillSecondaryButton, TextInput = QuillTextInput, Select = QuillSelect, Table = QuillReportBuilderTable, Popover = QuillPopover, Tabs = QuillTabs, Checkbox = MemoizedCheckbox, Sidebar = QuillSidebar, Container = CustomContainer, HandleButton = QuillHandleButton, SelectColumn = QuillSelectColumn, DraggableColumn = QuillDraggableColumn, ButtonLoadingState = QuillButtonLoadingState, TableLoadingState = QuillTableLoadingState, SidebarHeading = QuillSidebarHeading, SidebarSubHeading = QuillSidebarSubHeading, FilterPopover = QuillFilterPopover, }) {
+export default function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = QuillButton, SecondaryButton = QuillSecondaryButton, TextInput = QuillTextInput, Select = QuillSelect, Table = QuillReportBuilderTable, Popover = QuillPopover, Tabs = QuillTabs, Checkbox = MemoizedCheckbox, Sidebar = QuillSidebar, Container = CustomContainer, HandleButton = QuillHandleButton, SelectColumn = QuillSelectColumn, DraggableColumn = QuillDraggableColumn, ButtonLoadingState = QuillButtonLoadingState, TableLoadingState = QuillTableLoadingState, SidebarHeading = QuillSidebarHeading, SidebarSubHeading = QuillSidebarSubHeading, FilterPopover = QuillFilterPopover, admin = false, }) {
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [baseAst, setBaseAst] = useState(null);
@@ -606,11 +606,11 @@ export default function ReportBuilder({ path = '', initialTableName = 'transacti
     };
     // Function to handle the deletion of expressions
     const handleDelete = (key) => {
-        updateFormData([{ path: path + key, value: null }], { isDeletion: true });
+        updateFormData([{ path: key, value: null }], { isDeletion: true });
     };
     // Function to handle the insertion of expressions
     const handleInsertion = (value, op = 'OR', isCondition = undefined) => {
-        updateFormData([{ path, value }], {
+        updateFormData([{ path: '', value }], {
             isInsertion: true,
             topLevelBinOp: op,
             isCondition,
@@ -620,13 +620,13 @@ export default function ReportBuilder({ path = '', initialTableName = 'transacti
     const handleInsertVariant = (key, name = null) => {
         // note: if name, treat that as the name of the value to insert
         const callback = isPending ? updateActiveItem : updateFormData;
-        callback([{ path: path + key, value: name }], { isAddVariant: true });
+        callback([{ path: key, value: name }], { isAddVariant: true });
     };
     // Function to handle the insertion of expr_list variants
     const handleDeleteVariant = (key, name = null) => {
         // note: if name, treat that as the name of the valeu to delete
         const callback = isPending ? updateActiveItem : updateFormData;
-        callback([{ path: path + key, value: name }], { isDeleteVariant: true });
+        callback([{ path: key, value: name }], { isDeleteVariant: true });
     };
     const getColumnValueForColumnComparison = (node) => node.left.value ??
         node.left.column ??
@@ -2121,5 +2121,5 @@ export default function ReportBuilder({ path = '', initialTableName = 'transacti
                                             whiteSpace: 'nowrap',
                                         }, children: errorMessage })), _jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButton, { type: "button", onClick: () => copyToClipboard(activeQuery), children: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(Button, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, children: "Add to dashboard" })] })] }))] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilder, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true, title: "Add to dashboard", isEditMode: false, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, dashboardItem: dashboardItem, organizationName: organizationName })] }));
+                                        }, children: "Add to dashboard" })] })] }))] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilder, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: false, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName })] }));
 }

package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CA4LL"}
+{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAiML"}

package/dist/esm/components/ReportBuilder/AddColumnPopover.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { CSS as DND_CSS } from '@dnd-kit/utilities';
+import { ThemeContext } from '../../Context';
 export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
+    const [theme] = useContext(ThemeContext);
     const [search, setSearch] = useState('');
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
@@ -50,8 +52,8 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                             overflowY: 'auto',
                             maxWidth: '300px',
                         }, children: [searchResults.map((value) => {
-                                return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
-                            }), search.length > 0 && searchResults.length === 0 && (_jsx("div", { children: "No results found" }))] }) }) }), _jsxs("div", { style: {
+                                return (_jsx(SortableItem, { theme: theme, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
+                            }), search.length > 0 && searchResults.length === 0 && (_jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), _jsxs("div", { style: {
                     display: 'flex',
                     width: '100%',
                     flexDirection: 'row',
@@ -103,7 +105,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                             onSave();
                         }, children: "Save" })] })] }));
 }
-const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, HandleButton, }) => {
+const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
     const style = {
         transform: DND_CSS.Transform.toString(transform),

package/dist/esm/components/ReportBuilder/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGA2DpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CA6CL;AAED,eAAO,MAAM,YAAY,sGA8BxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAsE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CAyCL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAuCtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAkDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}

package/dist/esm/components/ReportBuilder/ui.js

@@ -84,7 +84,8 @@ export const QuillTag = forwardRef(({ label, onClick, children, onClickDelete, h
             width: '100%',
             padding: '4px 8px',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
+            fontFamily: theme?.fontFamily,
             fontSize: 14,
         }, ref: forwardedRef, onClick: onClick, children: [label ?? children, !hideDelete && (_jsx("div", { style: {
                     marginLeft: 'auto',
@@ -92,7 +93,12 @@ export const QuillTag = forwardRef(({ label, onClick, children, onClickDelete, h
                     display: 'flex',
                     flexDirection: 'column',
                     justifyContent: 'center',
-                }, children: _jsx("button", { onClick: onClickDelete, style: { margin: -4 }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) }) }))] }));
+                }, children: _jsx("button", { onClick: onClickDelete, style: {
+                        margin: -4,
+                        border: 'none',
+                        backgroundColor: theme?.backgroundColor || 'white',
+                        fontFamily: theme?.fontFamily,
+                    }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) }) }))] }));
 });
 // A heading element in the sidebar (eg. "Filters")
 export const QuillSidebarHeading = ({ label }) => (_jsx(MemoizedHeader, { children: label }));
@@ -133,6 +139,7 @@ export const QuillSelect = ({ onChange, ...props }) => {
 };
 export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
     const modalRef = useRef(null);
+    const [theme] = useContext(ThemeContext);
     useEffect(() => {
         const listener = (event) => {
             if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
@@ -145,10 +152,12 @@ export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen
         };
     }, [modalRef, onClose]);
     return (_jsxs("div", { children: [trigger, isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
-                        background: 'white',
+                        background: theme?.backgroundColor || 'white',
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
+                        border: theme
+                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#e7e7e7'}`
+                            : '1px solid #e7e7e7',
                         boxSizing: 'content-box',
                         zIndex: 999,
                         top: 12,
@@ -159,16 +168,20 @@ export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen
                     }, children: children }) }))] }));
 }
 export const QuillPopover = forwardRef(({ children, trigger, isOpen, onClose = () => { }, title = undefined }, ref) => {
+    const [theme] = useContext(ThemeContext);
     return (_jsxs(MemoizedPopover, { isOpen: isOpen, onClose: onClose, trigger: trigger, parentRef: ref, ref: ref, children: [title && (_jsx("h1", { style: {
                     fontWeight: '600',
                     fontSize: 18,
                     margin: 0,
                     textAlign: 'left',
                     paddingBottom: 12,
+                    color: theme?.primaryTextColor,
+                    fontFamily: theme?.fontFamily,
                 }, children: title })), children] }));
 });
 // The six-dot grab-handle icon.
 export const QuillHandleButton = () => {
+    const [theme] = useContext(ThemeContext);
     return (_jsxs("div", { style: {
             display: 'flex',
             gap: 2,
@@ -211,6 +224,7 @@ export const QuillHandleButton = () => {
                         } })] })] }));
 };
 export const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
+    const [theme] = useContext(ThemeContext);
     return (_jsxs("div", { title: label, style: {
             boxShadow: '0px 1px 4px #e2e8f005',
             paddingTop: 4,
@@ -220,7 +234,7 @@ export const QuillSelectColumn = ({ label, selected, setSelected, children, }) =
             borderRadius: 4,
             display: 'flex',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
         }, children: [_jsx("div", { children: children }), _jsxs("label", { style: {
                     display: 'flex',
                     gap: 2,
@@ -233,6 +247,8 @@ export const QuillSelectColumn = ({ label, selected, setSelected, children, }) =
                             whiteSpace: 'nowrap',
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
                         }, children: label })] })] }));
 };
 // A draggable card with a grab-handle and a column name
@@ -244,7 +260,7 @@ export const QuillDraggableColumn = ({ label, children, onDelete }) => {
             borderRadius: 6,
             display: 'flex',
             alignItems: 'center',
-            backgroundColor: 'white',
+            backgroundColor: theme?.backgroundColor || 'white',
         }, children: [_jsx("div", { children: children }), _jsx("div", { style: {
                     marginLeft: 2,
                     marginRight: 'auto',
@@ -252,7 +268,15 @@ export const QuillDraggableColumn = ({ label, children, onDelete }) => {
                     display: 'block',
                     whiteSpace: 'nowrap',
                     textOverflow: 'ellipsis',
-                }, children: label }), _jsx("button", { onClick: onDelete, style: { paddingRight: 8, margin: -4 }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
+                    fontFamily: theme?.fontFamily,
+                }, children: label }), _jsx("button", { onClick: onDelete, style: {
+                    paddingRight: 8,
+                    margin: -4,
+                    fontFamily: theme?.fontFamily,
+                    backgroundColor: theme?.backgroundColor || 'white',
+                    border: 'none',
+                    outline: 'none',
+                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
 };
 // Three dots animated bouncing
 export const QuillButtonLoadingState = () => {

package/dist/esm/components/UiComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/UiComponents.js

@@ -119,18 +119,23 @@ export const MemoizedSelect = ({ value, onChange, options, disabled = false, sty
                     color: '#6C727F',
                 }, "aria-hidden": "true" })] }));
 };
-export const MemoizedHeader = ({ children }) => (_jsx("h1", { style: {
-        fontSize: 16,
-        fontWeight: 600,
-        color: '#384151',
-        userSelect: 'none',
-        margin: 0,
-        padding: 0,
-    }, children: children }));
+export const MemoizedHeader = ({ children }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("h1", { style: {
+            fontSize: 16,
+            fontWeight: 600,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor || '#384151',
+            userSelect: 'none',
+            margin: 0,
+            padding: 0,
+        }, children: children }));
+};
 export const MemoizedLabel = ({ children }) => (_jsx("h1", { style: {
         fontSize: 14,
         fontWeight: 600,
-        color: '#575E6A',
+        fontFamily: theme?.fontFamily,
+        color: theme?.secondaryTextColor || '#575E6A',
         userSelect: 'none',
         paddingBottom: 5,
     }, children: children }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",