@quillsql/react 2.13.7 → 2.13.9

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

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
-import { didFiltersChange } from '../../Chart';
-import { ClientContext, DashboardContext, SchemaDataContext, } from '../../Context';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaDataContext, } from '../../Context';
 import { convertInternalReportToReport, EMPTY_INTERNAL_REPORT, fetchReport, fetchReportRowCount, } from '../../utils/report';
 import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from '../../utils/paginationProcessing';
 import { fetchResultsByReport, } from '../../utils/tableProcessing';
+import { didFiltersChange } from '../../Chart';
+import { mergeComparisonRange } from '../../utils/merge';
+import equal from 'fast-deep-equal';
 const constructReportFromItem = (item) => {
     return {
         ...EMPTY_INTERNAL_REPORT,
@@ -49,24 +51,57 @@ function filterValuesEquivalent(filters1, filters2) {
             mappedFilters1[key].filterType !== mappedFilters2[key]?.filterType ||
             mappedFilters1[key].startDate !== mappedFilters2[key]?.startDate ||
             mappedFilters1[key].endDate !== mappedFilters2[key]?.endDate ||
-            mappedFilters1[key].comparisonRange !==
-                mappedFilters2[key]?.comparisonRange) {
+            !equal(mappedFilters1[key].comparisonRange, mappedFilters2[key]?.comparisonRange)) {
             return false;
         }
     }
     return true;
 }
-export default function DataLoader({ item, children, filters, additionalProcessing: defaultAdditionalProcessing, }) {
+function userFilterValuesEquivalent(filters1, filters2) {
+    if (!filters1 && !filters2) {
+        return true;
+    }
+    if (filters1?.length !== filters2?.length) {
+        return false;
+    }
+    if (!filters1 || !filters2) {
+        return false;
+    }
+    // The two filters arrays aren't necessarily in the same order
+    // we can build two dictionaries of [{table, field}, filter] and compare them
+    const mappedFilters1 = filters1.reduce((acc, filter) => {
+        acc[`${filter.table}.${filter.field}`] = filter;
+        return acc;
+    }, {});
+    const mappedFilters2 = filters2.reduce((acc, filter) => {
+        acc[`${filter.table}.${filter.field}`] = filter;
+        return acc;
+    }, {});
+    for (const key in mappedFilters1) {
+        if (mappedFilters1[key]?.value !== mappedFilters2[key]?.value ||
+            mappedFilters1[key]?.operator !== mappedFilters2[key]?.operator ||
+            mappedFilters1[key]?.fieldType !== mappedFilters2[key]?.fieldType ||
+            mappedFilters1[key]?.filterType !== mappedFilters2[key]?.filterType) {
+            return false;
+        }
+    }
+    return true;
+}
+export default function DataLoader({ item, children, filters, userFilters, additionalProcessing: defaultAdditionalProcessing, }) {
     const [client] = useContext(ClientContext);
     const [dashboard, dispatch] = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [schemaData] = useContext(SchemaDataContext);
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(!dashboard[item.id]);
     const [error, setError] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
-    const [report, setReport] = useState(dashboard[item.id] ?? constructReportFromItem(item));
-    const [additionalProcessing, setAdditionProcessing] = useState(defaultAdditionalProcessing);
+    const [additionalProcessing, setAdditionalProcessing] = useState(defaultAdditionalProcessing);
+    const chartReport = useMemo(() => {
+        const report = dashboard[item.id] ?? constructReportFromItem(item);
+        return convertInternalReportToReport(mergeComparisonRange(report));
+    }, [dashboard[item.id]]);
     const previousFilters = useRef(null);
-    const [rowCount, setRowCount] = useState(dashboard[item.id]?.rowCount ?? 0);
+    const previousUserFilters = useRef(null);
     const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
     const rowsRequestId = useRef(0);
     const rowsAbortController = useRef(null);
@@ -84,7 +119,7 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         rowCountAbortController.current?.abort();
         rowCountAbortController.current = new AbortController();
         try {
-            const rowCount = await fetchReportRowCount(item.id, client, true, filters, processing, schemaData.customFields, rowCountAbortController.current.signal);
+            const rowCount = await fetchReportRowCount(item.id, client, true, filters.concat(userFilters ?? []), processing, schemaData.customFields, rowCountAbortController.current.signal);
             rowCountAbortController.current = null;
             if (rowCount) {
                 dispatch({
@@ -92,12 +127,10 @@ export default function DataLoader({ item, children, filters, additionalProcessi
                     id: item.id,
                     data: { rowCount },
                 });
-                setRowCount(rowCount);
             }
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching row count');
                 return;
             }
         }
@@ -116,7 +149,7 @@ export default function DataLoader({ item, children, filters, additionalProcessi
                 ...additionalProcessing,
                 page: newPagination,
             };
-            setAdditionProcessing(updatedProcessing);
+            setAdditionalProcessing(updatedProcessing);
             updateTableRows(updatedProcessing);
         }
         if (page > previousPage) {
@@ -124,7 +157,8 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         }
     };
     const onSortChange = (sort) => {
-        if (shouldSortInMemory(additionalProcessing.page ?? DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+        const report = dashboard[item.id];
+        if (shouldSortInMemory(additionalProcessing.page ?? DEFAULT_PAGINATION, report?.rowCount, !!report?.pivot)) {
             return;
         }
         const updatedProcessing = { page: additionalProcessing.page, sort };
@@ -144,17 +178,24 @@ export default function DataLoader({ item, children, filters, additionalProcessi
                 updateTableRowsAbortController.current?.abort();
                 updateTableRowsAbortController.current = new AbortController();
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await fetchResultsByReport(report.id, client, updatedProcessing, filters, schemaData.customFields, true, undefined, updateTableRowsAbortController.current.signal);
+                const paginatedRows = await fetchResultsByReport(item.id, client, updatedProcessing, filters.concat(userFilters ?? []), schemaData.customFields, true, undefined, updateTableRowsAbortController.current.signal);
                 updateTableRowsAbortController.current = null;
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
-                let tempRows = [...report.rows, ...paginatedRows.rows];
+                let tempRows = [
+                    ...(dashboard[item.id]?.rows ?? []),
+                    ...paginatedRows.rows,
+                ];
                 if (resetRows) {
                     tempRows = paginatedRows.rows;
                 }
-                setReport({ ...report, rows: tempRows });
-                setAdditionProcessing(updatedProcessing);
+                dispatch({
+                    type: 'UPDATE_DASHBOARD_ITEM',
+                    id: item.id,
+                    data: { rows: tempRows },
+                });
+                setAdditionalProcessing(updatedProcessing);
             }
             catch (e) {
                 console.log(e);
@@ -170,41 +211,34 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         if (!client || !filters) {
             return;
         }
-        if (dashboard[item.id] &&
-            !didFiltersChange(dashboard[item.id], filters) &&
-            !loading &&
-            // @ts-ignore
-            !dashboard[item.id].triggerReload) {
+        const fetchRowsRequestId = rowsRequestId.current + 1;
+        rowsRequestId.current = fetchRowsRequestId;
+        const tempReport = dashboard[item.id];
+        if (tempReport &&
+            !didFiltersChange(tempReport, filters) &&
+            userFilterValuesEquivalent(userFilters ?? [], previousUserFilters.current ?? []) &&
+            !tempReport.triggerReload) {
             setLoading(false);
-            const convertedReport = convertInternalReportToReport(
-            // @ts-ignore
-            dashboard[item.id]);
-            setReport(convertedReport);
             return;
         }
-        const fetchRowsRequestId = rowsRequestId.current + 1;
-        rowsRequestId.current = fetchRowsRequestId;
         setLoading(true);
-        // console.log('fetching', item.id, filters);
+        previousUserFilters.current = userFilters ?? null;
         rowsAbortController.current?.abort();
         rowsAbortController.current = new AbortController();
         try {
-            const { report: fetchedReport, error } = await fetchReport(item.id, client, true, filters, processing, undefined, schemaData.customFields, true, false, rowsAbortController.current.signal);
+            const { report: fetchedReport, error } = await fetchReport(item.id, client, true, filters.concat(userFilters ?? []), processing, undefined, schemaData.customFields, true, false, rowsAbortController.current.signal);
             rowsAbortController.current = null;
+            fetchRowCount(processing);
             dispatch({
                 type: 'ADD_DASHBOARD_ITEM',
                 id: item.id,
                 data: { ...fetchedReport, triggerReload: false, rowCount: 0 }, // rowCount 0 indicates it's still loading if row length is nonzero
             });
-            fetchRowCount(processing);
-            const convertedReport = convertInternalReportToReport(fetchedReport);
-            setReport(convertedReport);
-            setAdditionProcessing(processing);
+            setAdditionalProcessing(processing);
             setError(error);
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching rows');
                 return;
             }
             throw e;
@@ -219,14 +253,17 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         if (!filters) {
             return;
         }
-        if (previousFilters.current &&
-            filterValuesEquivalent(previousFilters.current, filters)) {
+        if ((previousFilters.current || dashboard[item.id]?.rows?.length) &&
+            filterValuesEquivalent(previousFilters.current ??
+                Object.values(dashboardFilters[item.dashboardName] ?? {}).map((f) => f.filter), filters) &&
+            userFilterValuesEquivalent(previousUserFilters.current ?? [], userFilters ?? [])) {
+            previousFilters.current = filters;
             return;
         }
         previousFilters.current = filters;
         setPreviousPage(0);
         fetchReportHelper(additionalProcessing);
-    }, [filters, item.id]);
+    }, [filters, userFilters, item.id]);
     useEffect(() => {
         if (dashboard[item.id]?.triggerReload) {
             fetchReportHelper(additionalProcessing);
@@ -237,24 +274,28 @@ export default function DataLoader({ item, children, filters, additionalProcessi
             error,
             onPageChange,
             onSortChange,
-            data: report,
-            rowCount: report.pivot ? report.rowCount : rowCount,
+            data: chartReport,
+            rowCount: chartReport.rowCount,
             rowCountIsLoading,
         }) }));
 }
 // 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.
-export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, }) => {
+export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, userFilters, }) => {
     const [dashboard, dispatch] = useContext(DashboardContext);
-    const [initialLoad, setInitialLoad] = useState(true);
-    const [loading, setLoading] = useState(false);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [loading, setLoading] = useState(!dashboard[item.id]);
     const [error, setError] = useState(undefined);
-    const [localDateBucket, setLocalDateBucket] = useState(undefined);
-    const [report, setReport] = useState(dashboard[item.id] ?? constructReportFromItem(item));
     const [client] = useContext(ClientContext);
     const [schemaData] = useContext(SchemaDataContext);
     const previousFilters = useRef(null);
+    const previousUserFilters = useRef(null);
+    const previousDateBucket = useRef(undefined);
     const fetchReportAbortController = useRef(null);
+    const chartReport = useMemo(() => {
+        const report = dashboard[item.id] ?? constructReportFromItem(item);
+        return convertInternalReportToReport(mergeComparisonRange(report));
+    }, [dashboard[item.id]]);
     const fetchReportHelper = async (useReportTask = true) => {
         if (!client || !filters) {
             return;
@@ -262,18 +303,17 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
         const tempReport = dashboard[item.id];
         if (tempReport &&
             !didFiltersChange(tempReport, filters) &&
-            !tempReport.triggerReload &&
-            dateBucket === localDateBucket) {
+            userFilterValuesEquivalent(userFilters ?? [], previousUserFilters.current ?? []) &&
+            !tempReport.triggerReload) {
             setLoading(false);
-            const convertedReport = convertInternalReportToReport(tempReport);
-            setReport(convertedReport);
             return;
         }
+        previousUserFilters.current = userFilters ?? null;
         setLoading(true);
         fetchReportAbortController.current?.abort();
         fetchReportAbortController.current = new AbortController();
         try {
-            const { report, error } = await fetchReport(item.id, client, useReportTask, filters, {
+            const { report, error } = await fetchReport(item.id, client, useReportTask, filters.concat(userFilters ?? []), {
                 ...additionalProcessing,
                 ...(item.pivot ? {} : { page: DEFAULT_PAGINATION }),
             }, dateBucket, schemaData.customFields, undefined, undefined, fetchReportAbortController.current.signal);
@@ -283,14 +323,10 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
                 id: item.id,
                 data: { ...report, triggerReload: false },
             });
-            const convertedReport = convertInternalReportToReport(report);
-            setReport(convertedReport);
-            setLocalDateBucket(dateBucket);
             setError(error);
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching rows for chart');
                 return;
             }
             throw e;
@@ -303,14 +339,18 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
         if (!filters) {
             return;
         }
-        if (previousFilters.current &&
-            filterValuesEquivalent(previousFilters.current, filters)) {
+        if ((previousFilters.current || dashboard[item.id]?.rows?.length) &&
+            filterValuesEquivalent(previousFilters.current ??
+                Object.values(dashboardFilters[item.dashboardName] ?? {}).map((f) => f.filter), filters) &&
+            userFilterValuesEquivalent(previousUserFilters.current ?? [], userFilters ?? []) &&
+            previousDateBucket.current === dateBucket) {
+            previousFilters.current = filters;
             return;
         }
         previousFilters.current = filters;
-        setInitialLoad(false);
+        previousDateBucket.current = dateBucket;
         fetchReportHelper();
-    }, [filters, item.id, dateBucket]);
+    }, [filters, userFilters, item.id, dateBucket]);
     useEffect(() => {
         const tempReport = dashboard[item.id];
         if (tempReport && tempReport.triggerReload) {
@@ -318,8 +358,8 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
         }
     }, [dashboard[item.id]]);
     return children({
-        isLoading: loading || initialLoad,
-        data: report,
+        isLoading: loading,
+        data: chartReport,
         error,
         dateBucket,
     });

package/dist/esm/components/Dashboard/MetricComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillMetricComponent({ report, onClick, error, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=MetricComponent.d.ts.map

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA2NhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0NhC"}

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

@@ -7,8 +7,8 @@ import { ThemeContext } from '../../Context';
 export default function QuillMetricComponent({ report, onClick, error, isLoading, }) {
     const [theme] = useContext(ThemeContext);
     const dateFilter = report?.filtersApplied?.find((filter) => filter.filterType == 'date_range');
-    const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
-    const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
+    const primaryMetricLabel = dateFilter?.preset?.label;
+    const comparisonKey = dateFilter?.comparisonRange?.value;
     const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
     return (_jsx("div", { onClick: () => onClick && onClick(report), style: {
             cursor: !onClick ? 'default' : 'pointer',

package/dist/esm/components/Dashboard/TableComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }: {
     report: QuillReport;

package/dist/esm/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAkGd"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAkGd"}

package/dist/esm/components/Dashboard/TemplateChartComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillTemplateChartComponent({ report, onClick, children, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=TemplateChartComponent.d.ts.map

package/dist/esm/components/Dashboard/TemplateChartComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateChartComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}
+{"version":3,"file":"TemplateChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateChartComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}

package/dist/esm/components/Dashboard/TemplateMetricComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillTemplateMetricComponent({ report, onClick, children, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=TemplateMetricComponent.d.ts.map

package/dist/esm/components/Dashboard/TemplateMetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateMetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateMetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}
+{"version":3,"file":"TemplateMetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateMetricComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}

package/dist/esm/components/Dashboard/TemplateTableComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 export default function QuillTemplateTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
     report: QuillReport;

package/dist/esm/components/Dashboard/TemplateTableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateTableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateTableComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CA4Bd"}
+{"version":3,"file":"TemplateTableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateTableComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CA4Bd"}

package/dist/esm/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,2CAsO3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CA0DpB,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,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"}

package/dist/esm/components/QuillMultiSelect.js

@@ -26,8 +26,12 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
+    const buttonRef = useRef(null);
     const debounceTimeoutId = useRef(null);
-    useOnClickOutside(modalRef, () => setShowModal(false), showModal);
+    useOnClickOutside(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
     useEffect(() => {
         if (!value) {
             setSelectedOptions([]);
@@ -64,7 +68,7 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
             borderRadius: '6px',
             width: width,
             minWidth: width,
-        }, ref: modalRef, children: [label && (_jsx("div", { style: {
+        }, children: [label && (_jsx("div", { style: {
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
                     fontFamily: theme?.fontFamily,
@@ -92,7 +96,7 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), ref: buttonRef, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
           .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
         ` }), _jsx("span", { style: {
                             textOverflow: 'ellipsis',
@@ -118,7 +122,7 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: !isLoading ? (sortedItems.map((option) => (_jsxs("button", { style: {
+                }, ref: modalRef, children: !isLoading ? (sortedItems.map((option) => (_jsxs("button", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         padding: 8,
@@ -137,26 +141,23 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
                         gap: 6,
                         overflow: 'hidden',
                     }, className: "quill-option", onClick: () => {
-                        // Manually create a synthetic ChangeEvent and pass it to callback
-                        const changeEvent = { target: { value: option.value } };
-                        let updateSelctedOptions = [...selectedOptions];
-                        if (selectedOptions.includes(changeEvent.target.value)) {
-                            updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
-                            setSelectedOptions(updateSelctedOptions);
+                        let updateSelectedOptions = [...selectedOptions];
+                        if (selectedOptions.includes(option.value)) {
+                            updateSelectedOptions = selectedOptions.filter((opt) => opt !== option.value);
+                            setSelectedOptions(updateSelectedOptions);
                         }
                         else {
-                            updateSelctedOptions = [
-                                ...updateSelctedOptions,
-                                changeEvent.target.value,
+                            updateSelectedOptions = [
+                                ...updateSelectedOptions,
+                                option.value,
                             ];
-                            setSelectedOptions(updateSelctedOptions);
+                            setSelectedOptions(updateSelectedOptions);
                         }
                         const updatedChangeEvent = {
-                            target: { value: updateSelctedOptions.join(',') },
+                            target: {
+                                value: updateSelectedOptions,
+                            },
                         };
-                        if (updateSelctedOptions.length === 0) {
-                            updatedChangeEvent.target.value = '';
-                        }
                         debounce(updatedChangeEvent);
                     }, children: [_jsx("style", { children: `
                 .quill-option {

package/dist/esm/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;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,yBAAyB,2CAiV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,yBAAyB,2CAge3B;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"}