@quillsql/admin 1.6.3 → 1.7.0

package/dist/esm/components/InternalDashboard/InternalDashboard.js

@@ -4,10 +4,10 @@ import { getEventCoordinates } from '@dnd-kit/utilities';
 import { CSS } from '@dnd-kit/utilities';
 import { DndContext, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, TouchSensor, MeasuringStrategy, pointerWithin, rectIntersection, DragOverlay, useDroppable, closestCenter, } from '@dnd-kit/core';
 import { useCallback, useEffect, useMemo, useRef, useState, memo, } from 'react';
-import { Chart, useDashboard, useAllReports, } from '@quillsql/react';
+import { Chart, useDashboardInternal, useAllReports, } from '@quillsql/react';
 import equal from 'fast-deep-equal';
 import { useAdmin } from '../../AdminProvider';
-import { convertCustomFilter, DashboardFilterType, } from '../../utils/filter';
+import { convertCustomFilter, InternalDashboardFilterType as DashboardFilterType, } from '../../utils/filter';
 import EmptyDashboardComponent from '../EmptyDashboardComponent';
 import { DashboardLoadingComponent } from './DashboardLoadingComponent';
 import { QuillErrorMessageComponent } from '../UiComponents';
@@ -56,7 +56,7 @@ onChangeLoading, filters,
 // onClickChartElement,
 // dateBucket,
 containerStyle, parentLoading, onManageDashboard, }) => {
-    const { state, clientLoading: isClientLoading } = useAdmin();
+    const { state, clientLoading: isClientLoading, eventTracking } = useAdmin();
     const tenants = state.currentTenantIdentity;
     // const client = state.client;
     // const [userFilters, setUserFilters] = useState<{
@@ -70,7 +70,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     // useEffect(() => {
     //   onUserFiltersUpdated?.(Object.values(userFilters));
     // }, [userFilters]);
-    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, setSectionOrder, } = useDashboard(name, filters?.map((f) => convertCustomFilter(f)) ?? []);
+    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, setSectionOrder, } = useDashboardInternal(name, filters?.map((f) => convertCustomFilter(f)) ?? []);
     const { allReportsById } = useAllReports();
     const [previewSectionOrder, setPreviewSectionOrder] = useState({});
     const [isEditingNewSection, setIsEditingNewSection] = useState(false);
@@ -262,7 +262,11 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
     const [filterValues, setFilterValues] = useState({});
     const prevNameRef = useRef(name);
-    const prevTenantsRef = useRef(tenants);
+    // const prevTenantsRef = useRef<
+    //   | { tenantIds: (string | number)[]; tenantField: string }[]
+    //   | (string | number)[]
+    //   | undefined
+    // >(tenants);
     // const prevFlagsRef = useRef<string[] | undefined>(flags);
     // const prevClientRef = useRef<string>(client?.publicKey ?? '');
     // const addFilterPopoverButtonRef = useRef<HTMLDivElement>(null);
@@ -273,6 +277,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     }
     // const pendingReloadRef = useRef(false);
     const isInitialLoadOfDashboardRef = useRef(false);
+    const [initialLoad, setInitialLoad] = useState(true);
     // const referencedTables = useMemo(() => {
     //   const sections = data?.sections || {};
     //   // find intersection of all referenced tables
@@ -286,8 +291,12 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     useEffect(() => {
         if (prevNameRef.current === name &&
             Object.values(data?.sections ?? {}).flat().length) {
+            setInitialLoad(false);
             return;
         }
+        else {
+            setInitialLoad(true);
+        }
         prevNameRef.current = name;
         if (isClientLoading || parentLoading || tenants === undefined) {
             // Reload the dashboard when the client is loaded
@@ -297,36 +306,34 @@ containerStyle, parentLoading, onManageDashboard, }) => {
         if (isInitialLoadOfDashboardRef.current)
             return;
         isInitialLoadOfDashboardRef.current = true;
-        reload(name, true, undefined, populatedDashboardFilters?.length
-            ? { filters: populatedDashboardFilters, refetchReports: true }
-            : undefined).then(() => {
+        reload(name, true).then(() => {
             isInitialLoadOfDashboardRef.current = false;
-            prevTenantsRef.current = tenants;
-            // prevFlagsRef.current = flags;
-        });
-    }, [name, isClientLoading, parentLoading, tenants]);
-    const tenantMounted = useRef(false);
-    useEffect(() => {
-        if (!tenantMounted.current) {
-            tenantMounted.current = true;
-            return;
-        }
-        const tenantsChanged = !equal(prevTenantsRef.current, tenants);
-        // || equal(prevFlagsRef.current, flags);
-        if (isClientLoading || tenants === undefined || !tenantsChanged) {
-            // Reload the dashboard when the client is loaded
-            // pendingReloadRef.current = true;
-            return;
-        }
-        if (isInitialLoadOfDashboardRef.current)
-            return;
-        isInitialLoadOfDashboardRef.current = true;
-        reload(name, tenantsChanged).then(() => {
-            prevTenantsRef.current = tenants;
+            setInitialLoad(false);
+            // prevTenantsRef.current = tenants;
             // prevFlagsRef.current = flags;
-            isInitialLoadOfDashboardRef.current = false;
         });
-    }, [tenants]);
+    }, [name, isClientLoading, parentLoading]);
+    // const tenantMounted = useRef(false);
+    // useEffect(() => {
+    //   if (!tenantMounted.current) {
+    //     tenantMounted.current = true;
+    //     return;
+    //   }
+    //   const tenantsChanged = !equal(prevTenantsRef.current, tenants);
+    //   // || equal(prevFlagsRef.current, flags);
+    //   if (isClientLoading || tenants === undefined || !tenantsChanged) {
+    //     // Reload the dashboard when the client is loaded
+    //     // pendingReloadRef.current = true;
+    //     return;
+    //   }
+    //   if (isInitialLoadOfDashboardRef.current) return;
+    //   isInitialLoadOfDashboardRef.current = true;
+    //   reload(name, tenantsChanged).then(() => {
+    //     prevTenantsRef.current = tenants;
+    //     // prevFlagsRef.current = flags;
+    //     isInitialLoadOfDashboardRef.current = false;
+    //   });
+    // }, [tenants]);
     // TODO: this block does not appear necessary, uncomment if otherwise
     // useEffect(() => {
     //   if (prevClientRef.current === client?.publicKey) {
@@ -438,6 +445,17 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     const updateFilter = (filter, value, comparison) => {
         if (!populatedDashboardFilters)
             return;
+        eventTracking?.addBreadcrumb?.({
+            message: 'Updated filter in InternalDashboard',
+            data: {
+                filter: filter.label,
+                value: JSON.stringify(value),
+                dashboardName: name,
+            },
+            category: 'log',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         let filterValue = {};
         if (filter.filterType === 'string') {
             if (filter.stringFilterType === 'multiselect') {
@@ -669,6 +687,18 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                 const newIndex = sortedSectionNames.indexOf(targetSection);
                 if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
                     const newSectionOrder = arrayMove(sortedSectionNames, oldIndex, newIndex);
+                    eventTracking?.addBreadcrumb?.({
+                        message: `Reordered Dashboard Section`,
+                        category: 'interaction',
+                        level: 'info',
+                        timestamp: Date.now(),
+                        data: {
+                            movedSection: activeId,
+                            oldIndex,
+                            newIndex,
+                            targetSection,
+                        },
+                    });
                     handleSectionReorder(newSectionOrder);
                 }
             }
@@ -740,6 +770,18 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                         }
                     }
                     newItems[sourceSection] = result;
+                    eventTracking?.addBreadcrumb?.({
+                        message: `Reordered Dashboard Report In Default Section`,
+                        category: 'interaction',
+                        level: 'info',
+                        timestamp: Date.now(),
+                        data: {
+                            movedReport: reportId,
+                            oldIndex: typeActiveIndex,
+                            newIndex: typeOverIndex,
+                            targetSection,
+                        },
+                    });
                     handleReorder(newItems);
                 }
             }
@@ -752,6 +794,18 @@ containerStyle, parentLoading, onManageDashboard, }) => {
             const overIndex = newItems[sourceSection].indexOf(overItem);
             if (activeIndex !== -1 && overIndex !== -1) {
                 newItems[sourceSection] = arrayMove(newItems[sourceSection], activeIndex, overIndex);
+                eventTracking?.addBreadcrumb?.({
+                    message: `Reordered Dashboard Report In Same Section`,
+                    category: 'interaction',
+                    level: 'info',
+                    timestamp: Date.now(),
+                    data: {
+                        movedReport: reportId,
+                        oldIndex: activeIndex,
+                        newIndex: overIndex,
+                        targetSection,
+                    },
+                });
                 handleReorder(newItems);
             }
         }
@@ -791,6 +845,18 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                     newItems[targetSection]?.push(report);
                 }
             }
+            eventTracking?.addBreadcrumb?.({
+                message: `Reordered Dashboard Report In Different Section`,
+                category: 'interaction',
+                level: 'info',
+                timestamp: Date.now(),
+                data: {
+                    movedReport: reportId,
+                    newIndex: newItems[targetSection]?.indexOf(report),
+                    targetSection,
+                    sourceSection,
+                },
+            });
             handleReorder(newItems);
         }
     }, [data?.sections, sortedSectionNames, handleReorder, handleSectionReorder]);
@@ -971,13 +1037,21 @@ containerStyle, parentLoading, onManageDashboard, }) => {
     }, [data?.sectionOrder, data?.sections, setSectionOrder]);
     const existingSectionNames = useMemo(() => Object.keys(data?.sections || {}), [data?.sections]);
     if (!isLoading &&
-        (Object.keys(data?.sections ?? {}).length === 0 ||
-            Object.values(data?.sections ?? {}).flat().length === 0)) {
+        data?.sections &&
+        (Object.keys(data.sections).length === 0 ||
+            Object.values(data.sections).flat().length === 0)) {
         return _jsx(EmptyDashboardComponent, {});
     }
-    if (hidden || isLoading || isClientLoading || parentLoading) {
+    if (hidden ||
+        isLoading ||
+        isClientLoading ||
+        parentLoading ||
+        initialLoad ||
+        !data?.sections) {
+        // No sections means yet to fetch
         return _jsx(DashboardLoadingComponent, { containerStyle: containerStyle });
     }
+    // TODO: Never reached
     if (!data?.sections) {
         return (_jsx(QuillErrorMessageComponent, { containerStyle: { height: 100 }, errorMessage: "Error loading dashboard" }));
     }
@@ -1183,6 +1257,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
         
         .section-grid-container.empty::after {
           content: 'Drop reports here';
+          font-family: ${state.theme?.fontFamily};
           color: #9CA3AF;
           font-size: 16px;
           opacity: 0.8;
@@ -1330,6 +1405,12 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                             marginBottom: 6,
                             marginTop: -12,
                         }, children: [_jsx(SecondaryButtonPrimitive, { onClick: onManageDashboard, label: "Manage Dashboard" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                    eventTracking?.addBreadcrumb?.({
+                                        message: 'Clicked add section button in InternalDashboard',
+                                        category: 'interaction',
+                                        level: 'info',
+                                        timestamp: Date.now(),
+                                    });
                                     // Same as if the user clicked the Add section button at the bottom
                                     setIsEditingNewSection(true);
                                     // Scroll to the bottom of the page
@@ -1437,7 +1518,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                                             alignItems: 'top',
                                             borderRadius: '10px',
                                             border: '1px solid #E7E7E7',
-                                            background: 'white',
+                                            background: state.theme.backgroundColor,
                                             height: activeItem.chartType === 'metric'
                                                 ? '150px'
                                                 : activeItem.chartType === 'table'
@@ -1458,6 +1539,8 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                                                 marginBottom: 'auto',
                                             }, children: _jsx("h1", { style: {
                                                     fontSize: 18,
+                                                    fontFamily: state.theme?.fontFamily,
+                                                    color: state.theme?.primaryTextColor,
                                                     fontWeight: '500',
                                                     margin: 0,
                                                     textOverflow: 'ellipsis',
@@ -1477,6 +1560,7 @@ const DeleteButton = ({ onClick }) => {
 };
 const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, tables, data, previewSectionOrder, onClickReport, onSectionNameUpdate, onSectionDelete, activeId, overId, draggedIndex, isHighlighted, isDraggingAnySection, }) => {
     const { attributes, listeners, setNodeRef: setSortableNodeRef, isDragging, } = useSortable({ id, animateLayoutChanges: () => false });
+    const { state: { theme }, } = useAdmin();
     const [isEditing, setIsEditing] = useState(false);
     const [editedName, setEditedName] = useState(sectionName);
     const [inputWidth, setInputWidth] = useState('auto');
@@ -1648,6 +1732,8 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                         } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [_jsxs("div", { className: "section-header", style: { marginTop: sectionIndex > 0 ? 20 : 0 }, children: [sectionName ? (isEditing ? (_jsx("input", { ref: inputRef, className: "section-name-input", value: editedName, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleSave, style: {
                                             fontSize: 22,
                                             fontWeight: 'bold',
+                                            color: theme.primaryTextColor,
+                                            fontFamily: theme.fontFamily,
                                             width: inputWidth,
                                             minWidth: '20px',
                                             textAlign: 'left',
@@ -1656,6 +1742,8 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                                             margin: 0,
                                             padding: 0,
                                         } })) : (_jsx("h1", { className: isDefaultSection ? '' : 'section-name-display', onClick: isDefaultSection ? undefined : handleStartEditing, ref: h1Ref, style: {
+                                            color: theme?.primaryTextColor,
+                                            fontFamily: theme?.fontFamily,
                                             fontSize: 22,
                                             fontWeight: 'bold',
                                             textAlign: 'left',
@@ -1727,6 +1815,7 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                 } })] }));
 };
 const SortableItem = ({ id, section, chartType, value, onClickReport, }) => {
+    const { state: { theme }, } = useAdmin();
     const compoundId = `${section}::${id}`;
     const { attributes, listeners, setNodeRef, transform, isDragging } = useSortable({
         id: compoundId,
@@ -1779,6 +1868,8 @@ const SortableItem = ({ id, section, chartType, value, onClickReport, }) => {
                                     fontSize: 18,
                                     fontWeight: '500',
                                     flexGrow: 1,
+                                    color: theme?.primaryTextColor,
+                                    fontFamily: theme?.fontFamily,
                                 }, children: value }), _jsx("div", { className: "quill-report-edit-buttons", style: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -1840,6 +1931,7 @@ function HandleButton(props) {
                         } })] })] }));
 }
 const NewSectionButton = ({ onAddSection, existingSections, isEditing, setIsEditing, }) => {
+    const { state: { theme }, } = useAdmin();
     const [sectionName, setSectionName] = useState('');
     const [error, setError] = useState('');
     const inputRef = useRef(null);
@@ -1905,6 +1997,7 @@ const NewSectionButton = ({ onAddSection, existingSections, isEditing, setIsEdit
                         marginTop: '8px',
                         fontSize: '16px',
                         fontWeight: 300,
+                        fontFamily: theme?.fontFamily,
                         color: '#9CA0A7',
                     }, children: "New section" })] }));
     }

package/dist/esm/components/OrgSelect.d.ts

@@ -11,12 +11,6 @@ interface PopoverComponentProps {
     setIsOpen: (isOpen: boolean) => void;
 }
 export declare function Popover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, id, }: {
-    value: string;
-    onChange: (e: string) => void;
-    placeholder: string;
-    id: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export default function OrgSelect({ isLoading }: {
     isLoading: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AASpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CA4HvB;AAED,eAAO,MAAM,gBAAgB,0CAK1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CAyDA,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAsJtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CAwEA"}
+{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CAsIvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAmOtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CA8EA"}

package/dist/esm/components/OrgSelect.js

@@ -7,9 +7,11 @@ import { QuillSelectComponentWithCombo } from './QuillSelectWithCombo';
 import { QuillMultiSelectComponentWithCombo } from './QuillMultiSelectWithCombo';
 import { useDashboardManager } from '../hooks/useDashboardManager';
 import GlobeIcon from '../icons/GlobeIcon';
+import { useAdmin } from '../AdminProvider';
 export function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = useRef(null);
     const [maxHeight, setMaxHeight] = useState('40vh');
+    const { state: { theme }, } = useAdmin();
     useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
@@ -43,7 +45,7 @@ export function Popover({ onClose, parentRef, children, style = {}, onClick, lab
     };
     return (_jsxs(_Fragment, { children: [showTrigger && (_jsxs("button", { 
                 //   onMouseEnter={() => setIsOpen(true)}
-                onClick: (e) => {
+                className: "quill-select-button", onClick: (e) => {
                     setIsOpen(!isOpen);
                     if (onClick) {
                         onClick(e);
@@ -59,31 +61,36 @@ export function Popover({ onClose, parentRef, children, style = {}, onClick, lab
                     textOverflow: 'ellipsis',
                     borderRadius: 6,
                     WebkitAppearance: 'none',
-                    borderTop: '1px solid #e7e7e7',
-                    borderLeft: '1px solid #e7e7e7',
-                    borderRight: '1px solid #e7e7e7',
-                    borderBottom: '1px solid #e7e7e7',
+                    borderTop: `1px solid ${theme.borderColor}`,
+                    borderLeft: `1px solid ${theme.borderColor}`,
+                    borderRight: `1px solid ${theme.borderColor}`,
+                    borderBottom: `1px solid ${theme.borderColor}`,
                     paddingLeft: 12,
                     paddingRight: 12,
                     height: 40,
-                    background: 'white',
-                    color: '#384151',
+                    fontFamily: theme.fontFamily,
                     fontWeight: 500,
                     fontSize: 14,
                     position: 'relative',
-                }, children: [label, _jsx(ArrowDownHeadIcon, { style: {
+                }, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
+              .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
+              .quill-select-button:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+              }
+          ` }), label, _jsx(ArrowDownHeadIcon, { style: {
                             height: '20px',
                             width: '20px',
                             flex: 'none',
                             position: 'absolute',
                             right: 8,
                             top: 8,
-                            color: '#6C727F',
+                            color: theme.primaryTextColor,
                         }, "aria-hidden": "true" })] })), _jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative', display: isOpen ? 'block' : 'none' }, children: _jsx("div", { style: {
-                        background: 'white',
+                        background: theme.backgroundColor,
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
+                        border: `1px solid ${theme.borderColor}`,
                         boxSizing: 'content-box',
                         zIndex: 1,
                         top: showTrigger ? 8 : 0,
@@ -97,35 +104,10 @@ export function Popover({ onClose, parentRef, children, style = {}, onClick, lab
                         ...style,
                     }, children: children }) })] }));
 }
-export const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 2,
-        }, children: [_jsx("style", { children: `
-      .quill-text-input {
-          background-color: white;
-          height: 40px;
-         width: 180px;
-         z-index: 2;
-         color: #384151;
-         border-radius: 4px;
-         text-align: left;
-         padding-right: 12px;
-         padding-top: 0px;
-         padding-bottom: 0px;
-         box-sizing: content-box;
-         margin-left: 6px;
-      }
-      .quill-text-input:focus {
-        outline: none;
-    }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
-};
 export default function OrgSelect({ isLoading }) {
     const { dashboardTenants, dashboardOwnerTenant, selectedTenantType, selectedTenantValues, setSelectedTenantValues, selectedDashboardTenantIds, setSelectedTenantType, setSelectedDashboardTenantIds, dashboardTenantIdsLoading, } = useTenants();
     const { selectedDashboard } = useDashboardManager();
+    const { eventTracking } = useAdmin();
     const debounceIdTimeoutId = useRef(null);
     const debounceValueTimeoutId = useRef(null);
     const debouncedSetSelectedDashboardTenantIds = (value) => {
@@ -133,6 +115,15 @@ export default function OrgSelect({ isLoading }) {
             clearTimeout(debounceIdTimeoutId.current);
         }
         debounceIdTimeoutId.current = setTimeout(() => {
+            eventTracking?.addBreadcrumb?.({
+                message: 'Set tenant ids in OrgSelect',
+                data: {
+                    tenantIds: value,
+                },
+                category: 'interaction',
+                level: 'info',
+                timestamp: Date.now(),
+            });
             setSelectedDashboardTenantIds(value);
         }, 500);
     };
@@ -141,7 +132,16 @@ export default function OrgSelect({ isLoading }) {
             clearTimeout(debounceValueTimeoutId.current);
         }
         debounceValueTimeoutId.current = setTimeout(() => {
-            setSelectedTenantValues(value);
+            eventTracking?.addBreadcrumb?.({
+                message: 'Set tenant values in OrgSelect',
+                data: {
+                    tenantValues: value,
+                },
+                category: 'interaction',
+                level: 'info',
+                timestamp: Date.now(),
+            });
+            setSelectedTenantValues(Array.isArray(value) ? value : [value]);
         }, 500);
     };
     const dashboardTenantOptions = useMemo(() => {
@@ -167,13 +167,43 @@ export default function OrgSelect({ isLoading }) {
                 value: id.id,
             })) ?? []);
     }, [selectedTenantType]);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 16 }, children: [dashboardTenantOptions?.length > 1 && (_jsx(QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), _jsx(QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 16,
+            fontWeight: 500,
+        }, children: [dashboardTenantOptions?.length > 1 && (_jsx(QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), ownerIsSelected ? (_jsx(QuillSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
+                    ? 'Tags'
+                    : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length
+                    ? null
+                    : selectedTenantValues
+                        ? selectedTenantValues[0]
+                        : null, options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), 
+                // emptyLabel={
+                //   selectedTenantType?.scope === 'database'
+                //     ? 'No tags provided'
+                //     : undefined
+                // }
+                disabled: isLoading, hideEmptyOption: true, 
+                // allSelectedLabel={
+                //   selectedTenantType?.scope === 'database' ? undefined : (
+                //     <div style={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+                //       <GlobeIcon
+                //         style={{
+                //           marginTop: 1.75,
+                //         }}
+                //       />
+                //       <div>All {(selectedTenantType?.name ?? 'Tenant') + 's'}</div>
+                //     </div>
+                //   )
+                // }
+                isLoading: isLoading, displayValue: true })) : (_jsx(QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
                     ? 'Tags'
                     : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length ? [] : (selectedTenantValues ?? []), options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), emptyLabel: selectedTenantType?.scope === 'database'
                     ? 'No tags provided'
                     : undefined, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [_jsx(GlobeIcon, { style: {
                                 marginTop: 1.75,
-                            } }), _jsxs("div", { children: ["All ", (selectedTenantType?.name ?? 'Tenant') + 's'] })] })), isLoading: isLoading }, (selectedTenantType?.tenantField ?? 'Tenant') + 'options'), selectedTenantType &&
+                            } }), _jsxs("div", { children: ["All ", (selectedTenantType?.name ?? 'Tenant') + 's'] })] })), isLoading: isLoading, enableSingleSelectOption: true, displayValue: true, enableSubmitButton: true, submitButtonText: 'Submit' }, (selectedTenantType?.tenantField ?? 'Tenant') + 'options')), selectedTenantType &&
                 !ownerIsSelected &&
                 dashboardOwnerTenant?.scope !== 'database' &&
                 !!selectedTenantValues?.length && (_jsx(QuillMultiSelectComponentWithCombo, { label: dashboardOwnerTenant?.name ?? 'Viewing as', width: 230, value: isLoading ? [] : (selectedDashboardTenantIds ?? []), options: dashboardOwnerTenant?.tenantIds?.map((id) => ({
@@ -181,9 +211,10 @@ export default function OrgSelect({ isLoading }) {
                     value: id.id,
                 })) ?? [], onChange: (e) => debouncedSetSelectedDashboardTenantIds(e.target.value), isLoading: dashboardTenantIdsLoading || isLoading, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [_jsx(GlobeIcon, { style: {
                                 marginTop: 1.75,
-                            } }), _jsx("div", { children: "All Tenants" })] })) }))] }));
+                            } }), _jsx("div", { children: "All Tenants" })] })), enableSingleSelectOption: true, displayValue: true, enableSubmitButton: true, submitButtonText: 'Submit' }))] }));
 }
 export function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }) {
+    const { state: { theme }, } = useAdmin();
     return (_jsx("div", { className: 'quill-list-select' + (isSelected ? ' quill-list-selected' : ''), style: {
             paddingBottom: 6,
             cursor: isSelected && !allowUnselect ? 'default' : 'pointer',
@@ -192,7 +223,6 @@ export function ListboxRow({ item, isSelected, setSelected, hoverActions, allowU
                 ? () => setSelected(item)
                 : undefined, className: "quill-list-select-title", style: {
                 height: 42,
-                color: '#384151',
                 width: 216,
                 borderRadius: 6,
                 textAlign: 'left',
@@ -209,13 +239,16 @@ export function ListboxRow({ item, isSelected, setSelected, hoverActions, allowU
                 overflow: 'hidden',
             }, children: [_jsx("style", { children: `
     .quill-list-select > div {
-      background-color: white;
+      background-color: ${theme?.backgroundColor};
+      color: ${theme?.primaryTextColor};
     }
     .quill-list-selected > div {
-      background-color: rgba(56, 65, 81, 0.04);
+      background-color: ${theme?.hoverBackgroundColor};
+      color: ${theme?.hoverTextColor};
     }
     .quill-list-select:hover > div {
-      background-color: rgba(56, 65, 81, 0.04);
+      background-color: ${theme?.hoverBackgroundColor};
+      color: ${theme?.hoverTextColor};
     }
     .quill-list-select-hover-actions {
       display: none;
@@ -229,5 +262,6 @@ export function ListboxRow({ item, isSelected, setSelected, hoverActions, allowU
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         display: 'block',
+                        fontFamily: theme.fontFamily,
                     }, children: item }), _jsx("div", { className: isSelected ? '' : 'quill-list-select-hover-actions', children: hoverActions && hoverActions(item) })] }) }));
 }

package/dist/esm/components/QuillMultiSelectWithCombo.d.ts

@@ -17,14 +17,20 @@ export interface MultiSelectComponentProps {
     allSelectedLabel?: JSX.Element;
     noneSelectedLabel?: JSX.Element;
     mimicReactSelect?: boolean;
+    enableSingleSelectOption?: boolean;
+    displayValue?: boolean;
+    enableSubmitButton?: boolean;
+    submitButtonText?: string;
 }
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
+export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, enableSingleSelectOption, displayValue, enableSubmitButton, submitButtonText, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare const ListboxTextInput: ({ value, onChange, placeholder, id, width, }: {
     value: string;
     onChange: (e: string) => void;
     placeholder: string;
+    width?: number;
+    id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,yBAAyB,2CAumB3B;AAED,eAAO,MAAM,gBAAgB,sCAI1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CAwDA,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,yBAAyB,2CAs1B3B;AAED,eAAO,MAAM,gBAAgB,GAAI,8CAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,4CAkEA,CAAC"}