@quillsql/react 2.13.48 → 2.13.50

package/dist/cjs/components/Dashboard/DataLoader.js

@@ -40,9 +40,13 @@ function filterValuesEquivalent(filters1, filters2) {
         // Find the odd filters out and return false ONLY if they have a selected value or are a date filter
         const filters1Labels = filters1.map((f) => f.label);
         const filters2Labels = filters2.map((f) => f.label);
-        const oddFilters = filters1Labels.length > filters2Labels.length ? filters1Labels.filter((label) => !filters2Labels.includes(label)) : filters2Labels.filter((label) => !filters1Labels.includes(label));
+        const oddFilters = filters1Labels.length > filters2Labels.length
+            ? filters1Labels.filter((label) => !filters2Labels.includes(label))
+            : filters2Labels.filter((label) => !filters1Labels.includes(label));
         for (const filter of oddFilters) {
-            const filter1 = filters1Labels.length > filters2Labels.length ? filters1.find((f) => f.label === filter) : filters2.find((f) => f.label === filter);
+            const filter1 = filters1Labels.length > filters2Labels.length
+                ? filters1.find((f) => f.label === filter)
+                : filters2.find((f) => f.label === filter);
             if (filter1?.selectedValue || filter1?.startDate || filter1?.endDate) {
                 return false;
             }
@@ -164,13 +168,14 @@ function userFilterValuesEquivalent(filters1, filters2) {
 function customFieldsEquivalent(customFields1, customFields2) {
     return (0, fast_deep_equal_1.default)(customFields1, customFields2);
 }
-function DataLoader({ item, children, filters, userFilters, additionalProcessing: defaultAdditionalProcessing, dashboardName, propogateChanges, }) {
+function DataLoader({ item, children, filters, userFilters, additionalProcessing: defaultAdditionalProcessing, dashboardName, propagateChanges, }) {
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
-    const { dashboardReports: dashboard, addReport, updateReport } = (0, useDashboard_1.useDashboardReports)(dashboardName);
+    const { dashboardReports: dashboard, addReport, updateReport, } = (0, useDashboard_1.useDashboardReports)(dashboardName);
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const { tenants, flags } = (0, react_1.useContext)(Context_1.TenantContext);
     const { reports, reportsDispatch, fetchIndividualReport } = (0, react_1.useContext)(Context_1.ReportsContext);
     const { reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
+    const { getToken } = (0, react_1.useContext)(Context_1.FetchContext);
     const contextFilters = (0, react_1.useMemo)(() => {
         return dashboardName
             ? Object.values(dashboardFilters[dashboardName] ?? {}).map((f) => f.filter)
@@ -217,7 +222,7 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
         rowCountAbortController.current?.abort();
         rowCountAbortController.current = new AbortController();
         try {
-            const rowCount = await (0, report_1.fetchReportRowCount)(item.id, client, tenants, flags, true, filters.concat(userFilters ?? []), processing, schemaData.customFields, rowCountAbortController.current.signal);
+            const rowCount = await (0, report_1.fetchReportRowCount)(item.id, client, getToken, tenants, flags, true, filters.concat(userFilters ?? []), processing, schemaData.customFields, rowCountAbortController.current.signal);
             rowCountAbortController.current = null;
             if (rowCount) {
                 if (dashboardName) {
@@ -288,8 +293,7 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
                 const updatedProcessing = { ...additionalProcessing, ...processing };
                 const pivotQuery = (dashboardName ? dashboard : reports)[item.id]
                     ?.pivotQuery;
-                const comparisonPivotQuery = (dashboardName ? dashboard : reports)[item.id]
-                    ?.comparisonPivotQuery;
+                const comparisonPivotQuery = (dashboardName ? dashboard : reports)[item.id]?.comparisonPivotQuery;
                 const paginatedRows = await (0, tableProcessing_1.fetchResultsByReport)({
                     reportId: item.id,
                     client,
@@ -303,6 +307,7 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
                     pivotQuery,
                     comparisonPivotQuery,
                     getPivotRowCount: false,
+                    getToken,
                 });
                 updateTableRowsAbortController.current = null;
                 if (paginatedRows.error) {
@@ -374,6 +379,7 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
                     rowsOnly: true,
                     rowCountOnly: false,
                     abortSignal: rowsAbortController.current.signal,
+                    getToken,
                 });
                 addReport({
                     ...fetchedReport,
@@ -397,7 +403,7 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
                         additionalProcessing: processing,
                         reportAbortController: rowsAbortController.current,
                         customFields: schemaData.customFields,
-                        propogateChanges,
+                        propagateChanges,
                     });
                     rowsAbortController.current = null;
                     setError(undefined);
@@ -432,7 +438,8 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
                 userFilterValuesEquivalent(previousUserFilters.current ?? [], userFilters ?? []) &&
                 // tenantsEquivalent(previousTenants.current ?? [], tenants ?? []) &&
                 customFieldsEquivalent(previousCustomFields.current, schemaData.customFields) &&
-                ((dashboardName ? dashboard : reports)[item.id]?.rows !== undefined || rowsAbortController.current))) {
+                ((dashboardName ? dashboard : reports)[item.id]?.rows !== undefined ||
+                    rowsAbortController.current))) {
             if (!rowsAbortController.current && !schemaData.isSchemaLoading)
                 setLoading(false);
             return;
@@ -459,7 +466,10 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
         else if (tempReport?.error) {
             setError(tempReport.error);
         }
-    }, [(dashboardName ? dashboard : reports)[item.id]?.triggerReload, (dashboardName ? dashboard : reports)[item.id]?.error]);
+    }, [
+        (dashboardName ? dashboard : reports)[item.id]?.triggerReload,
+        (dashboardName ? dashboard : reports)[item.id]?.error,
+    ]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
             isLoading: loading,
             error,
@@ -472,10 +482,11 @@ function DataLoader({ item, children, filters, userFilters, additionalProcessing
 }
 // The same data-loader pattern as above, but with special logic for charts
 // At some point these may be able to get merged into one function.
-const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, userFilters, dashboardName, propogateChanges, }) => {
+const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, userFilters, dashboardName, propagateChanges, }) => {
     const { dashboardReports: dashboard, addReport } = (0, useDashboard_1.useDashboardReports)(dashboardName);
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const { reports, fetchIndividualReport } = (0, react_1.useContext)(Context_1.ReportsContext);
+    const { getToken } = (0, react_1.useContext)(Context_1.FetchContext);
     const { reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
     const { tenants, flags } = (0, react_1.useContext)(Context_1.TenantContext);
     const contextFilters = (0, react_1.useMemo)(() => {
@@ -534,6 +545,7 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
                     dateBucket,
                     customFields: schemaData.customFields,
                     abortSignal: fetchReportAbortController.current.signal,
+                    getToken,
                 });
                 addReport({
                     ...report,
@@ -559,7 +571,7 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
                         dateBucket,
                         reportAbortController: fetchReportAbortController.current,
                         customFields: schemaData.customFields,
-                        propogateChanges,
+                        propagateChanges,
                     });
                     setError(undefined);
                 }
@@ -593,7 +605,9 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
                 // tenantsEquivalent(tenants ?? [], previousTenants.current ?? []) &&
                 previousDateBucket.current === dateBucket &&
                 customFieldsEquivalent(previousCustomFields.current, schemaData.customFields) &&
-                ((dashboardName ? dashboard : reports)[item.id]?.rows?.length !== undefined || fetchReportAbortController.current))) {
+                ((dashboardName ? dashboard : reports)[item.id]?.rows?.length !==
+                    undefined ||
+                    fetchReportAbortController.current))) {
             if (!fetchReportAbortController.current && !schemaData.isSchemaLoading)
                 setLoading(false);
             return;
@@ -621,7 +635,10 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
         else if (tempReport?.error) {
             setError(tempReport.error);
         }
-    }, [(dashboardName ? dashboard : reports)[item.id]?.triggerReload, (dashboardName ? dashboard : reports)[item.id]?.error]);
+    }, [
+        (dashboardName ? dashboard : reports)[item.id]?.triggerReload,
+        (dashboardName ? dashboard : reports)[item.id]?.error,
+    ]);
     return children({
         isLoading: !chartReport || loading,
         data: chartReport,

package/dist/cjs/components/Dashboard/MetricComponent.js

@@ -69,18 +69,19 @@ function QuillMetricComponent({ report, onClick, error, isLoading, children, })
                         report.rows[0][report.xAxisField] === null ? ((0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flex: '1 0 auto',
-                            height: '100%',
+                            // height: '100%',
                             margin: 'auto',
                             justifyContent: 'center',
                             alignItems: 'center',
                             fontSize: 13,
+                            fontFamily: theme?.fontFamily,
                             color: theme?.secondaryTextColor,
                             maxWidth: '100%',
                             width: '100%',
                         }, children: "No results" })) : ((0, jsx_runtime_1.jsx)(MetricDisplay, { dateFilter: dateFilter, primaryMetricLabel: primaryMetricLabel, comparisonLabel: comparisonLabel, theme: theme, children: children }))] }) }) }, report?.name));
 }
 const MetricDisplay = ({ children, dateFilter, primaryMetricLabel, comparisonLabel, theme, }) => {
-    return (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             padding: 0,
             height: '100%',
             width: '100%',
@@ -133,5 +134,5 @@ const MetricDisplay = ({ children, dateFilter, primaryMetricLabel, comparisonLab
                                 marginLeft: 2,
                             }, children: comparisonLabel
                                 ? 'in ' + comparisonLabel.toLowerCase()
-                                : 'previous period' })] }))] }) });
+                                : 'previous period' })] }))] }) }));
 };

package/dist/cjs/components/Dashboard/util.d.ts

@@ -3,5 +3,5 @@ export declare function validateTemplatesAgainstFilters(filters: any[], template
     valid: boolean;
     error: string;
 };
-export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any): Promise<any>;
+export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any, getToken: () => Promise<string>): Promise<any>;
 //# sourceMappingURL=util.d.ts.map

package/dist/cjs/components/Dashboard/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAK1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAmDd"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAK1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAGD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,EAClB,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,GAC9B,OAAO,CAAC,GAAG,CAAC,CA8Cd"}

package/dist/cjs/components/Dashboard/util.js

@@ -39,23 +39,24 @@ function validateTemplatesAgainstFilters(filters, templates) {
         return { valid: false, error };
     }
 }
-async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
+// TODO: Outdated, revisit and retest
+async function addTemplatesToDashboard(name, newTemplates, client, dashboardData, getToken) {
     try {
         const { publicKey, tenants } = client;
         if (tenants) {
             // need to implement a way to specify report tenant id
             throw new Error('Adding from template not yet supported for tenants');
         }
-        const hostedBody = {
+        const { data: resp } = await (0, dataFetcher_1.quillFetch)({
+            client,
+            task: 'add-from-template',
             metadata: {
                 dashboardName: name,
-                task: 'add-from-template',
                 clientId: publicKey,
                 templateReportIds: newTemplates.map((template) => template._id),
             },
-        };
-        const resp = await (0, dataFetcher_1.getData)(client, ``, // no cloud fallback
-        'omit', hostedBody, null);
+            getToken,
+        });
         if (resp.success && resp.newItems && resp.newItems.length > 0) {
             const newData = {
                 newQueries: {

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAgP3B;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,4CAyDA,CAAC"}
+{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAiP3B;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,4CA8DA,CAAC"}

package/dist/cjs/components/QuillMultiSelect.js

@@ -80,7 +80,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -100,8 +99,8 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
@@ -119,7 +118,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     borderStyle: 'solid',
                     borderColor: theme?.borderColor,
                     borderRadius: 6,
-                    background: 'white',
+                    background: theme?.backgroundColor,
                     marginTop: 12,
                     zIndex: 100,
                     padding: 6,
@@ -165,10 +164,12 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                         debounce(updatedChangeEvent);
                     }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme?.backgroundColor};
+                  color: ${theme?.primaryTextColor};
                 }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme?.hoverBackgroundColor};
+                    color: ${theme?.hoverTextColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                 textOverflow: 'ellipsis',
@@ -177,6 +178,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                             }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -189,7 +191,7 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
           height: 40px;
          width: 180px;
          z-index: 2;
-         color: #384151;
+         color: ${theme?.primaryTextColor ?? '#384151'};
          border-radius: 4px;
          text-align: left;
          padding-right: 12px;
@@ -197,10 +199,14 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
          padding-bottom: 0px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
       }
       .quill-text-input:focus {
         outline: none;
-    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    background: theme?.backgroundColor,
+                } })] }));
 };
 exports.ListboxTextInput = ListboxTextInput;

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectSectionList.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectSectionList.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAC,CAAC,WAAW,EAAE,MAAM,GAAI,MAAM,EAAE,CAAA;KAAC,CAAC;IAC1C,OAAO,EAAE;QAAC,CAAC,WAAW,EAAE,MAAM,GAAI;YAChC,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAA;KAAC,CAAC;IACL,gBAAgB,CAAC,EAAE;QAAC,CAAC,WAAW,EAAE,MAAM,GAAI,MAAM,CAAA;KAAC,CAAC;IACpD,QAAQ,EAAE,CACR,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE;gBAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,KAC9D,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CA2aA;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":"QuillMultiSelectSectionList.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectSectionList.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC;IAC3C,OAAO,EAAE;QACP,CAAC,WAAW,EAAE,MAAM,GAAG;YACrB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE;YAAE,KAAK,EAAE;gBAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;aAAE,CAAA;SAAE,CAAC;KACxD,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAicA;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,4CA8DA,CAAC"}

package/dist/cjs/components/QuillMultiSelectSectionList.js

@@ -75,19 +75,23 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
         const isUuid = sample.value?.match(uuidRegex);
         const isNumber = !isNaN(parseInt(sample.value));
         const filteredOptions = Object.keys(options).reduce((acc, key) => {
-            acc[key] = options[key]?.filter((option) => {
-                if (!option) {
-                    return false;
-                }
-                return searchQuery === '' || option.label
-                    .toLowerCase()
-                    .replace(/\s+/g, '')
-                    .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
-                    || (isNumber || isUuid ? option.value
-                        .toLowerCase()
-                        .replace(/\s+/g, '')
-                        .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) : false);
-            }) ?? [];
+            acc[key] =
+                options[key]?.filter((option) => {
+                    if (!option) {
+                        return false;
+                    }
+                    return (searchQuery === '' ||
+                        option.label
+                            .toLowerCase()
+                            .replace(/\s+/g, '')
+                            .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) ||
+                        (isNumber || isUuid
+                            ? option.value
+                                .toLowerCase()
+                                .replace(/\s+/g, '')
+                                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
+                            : false));
+                }) ?? [];
             return acc;
         }, {});
         const sliceSize = Math.ceil(20 / Object.keys(filteredOptions).length);
@@ -96,7 +100,9 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                 filteredOptions[key] = filteredOptions[key].slice(0, sliceSize);
             }
         });
-        return Object.fromEntries(Object.entries(filteredOptions).filter(([, value]) => !!value?.length).sort(([key]) => key === owner ? -1 : 1));
+        return Object.fromEntries(Object.entries(filteredOptions)
+            .filter(([, value]) => !!value?.length)
+            .sort(([key]) => (key === owner ? -1 : 1)));
     }, [options, searchQuery]);
     const filteredLength = react_1.default.useMemo(() => {
         return Object.values(filteredItems).reduce((a, b) => a + b.length, 0);
@@ -128,7 +134,7 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
             borderRadius: '6px',
             width: width,
             minWidth: width,
-            ...style
+            ...style,
         }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
@@ -137,7 +143,6 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -157,8 +162,8 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.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;
             background: ${theme?.hoverBackgroundColor};
@@ -180,7 +185,7 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     borderStyle: 'solid',
                     borderColor: theme?.borderColor,
                     borderRadius: 6,
-                    background: 'white',
+                    background: theme?.backgroundColor,
                     marginTop: 12,
                     zIndex: 100,
                     padding: 6,
@@ -194,8 +199,7 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     height: 9,
                                     width: 230,
                                     borderTop: '1px solid #e7e7e7',
-                                } })] })), !isLoading &&
-                        (!filteredItems || filteredLength === 0) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                } })] })), !isLoading && (!filteredItems || filteredLength === 0) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             padding: 8,
@@ -215,17 +219,17 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                             overflow: 'hidden',
                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme?.backgroundColor};
                 }
                 .quill-option:hover {
-                  background: #F4F4F5;
+                  background: ${theme?.hoverBackgroundColor};
                 }
               ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                }, children: emptyLabel ?? 'No options available' })] })), !isLoading ? Object.keys(filteredItems).map((key) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("button", { style: {
+                                }, children: emptyLabel ?? 'No options available' })] })), !isLoading ? (Object.keys(filteredItems).map((key) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("button", { style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     padding: 8,
@@ -245,7 +249,8 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     overflow: 'hidden',
                                 }, className: "quill-option", onClick: () => {
                                     const updatedValue = options[key]?.length === value[key]?.length
-                                        ? [] : options[key]?.map((option) => option.value) ?? [];
+                                        ? []
+                                        : (options[key]?.map((option) => option.value) ?? []);
                                     const updatedChangeEvent = {
                                         target: {
                                             value: {
@@ -258,17 +263,19 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     debounce(updatedChangeEvent);
                                 }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                   .quill-option {
-                    background: white;
+                    background: ${theme?.backgroundColor};
+                    color: ${theme?.primaryTextColor};
                   }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme?.hoverBackgroundColor};
+                    color: ${theme?.hoverTextColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: options[key]?.length === value[key]?.length, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
                                             fontWeight: 600,
-                                        }, children: sectionHeaderMap?.[key] ?? key })] }, "sh-" + key), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: sectionHeaderMap?.[key] ?? key })] }, 'sh-' + key), (0, jsx_runtime_1.jsx)("div", { style: {
                                     height: 1,
                                     borderTop: '1px solid #e7e7e7',
                                     marginTop: 2,
@@ -308,18 +315,25 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     debounce(updatedChangeEvent);
                                 }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                     .quill-option {
-                      background: white;
+                      background: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-option:hover {
-                      background: #F4F4F5;
+                      background: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }
-                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value[key]?.includes(option.value) ?? false, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
+                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value[key]?.includes(option.value) ?? false, style: {
+                                            width: '14px',
+                                            height: '14px',
+                                            margin: 'auto 0',
+                                        }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
-                                        }, children: option.label })] }, "v-" + key + "-" + option.value)))] }, 'sp-' + key))) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) }))] }))] }));
+                                        }, children: option.label })] }, 'v-' + key + '-' + option.value)))] }, 'sp-' + key)))) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) }))] }))] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -339,10 +353,14 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
          padding-bottom: 0px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
       }
       .quill-text-input:focus {
         outline: none;
-    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    background: theme?.backgroundColor,
+                } })] }));
 };
 exports.ListboxTextInput = ListboxTextInput;

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAc,EAEZ,aAAa,EAMd,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,EAAE,yBAAyB,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,2CAyjBlF;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":"AAGA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAc,EAEZ,aAAa,EAMd,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,EAAE,yBAAyB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,2CAwmBA;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,4CA8DA,CAAC"}