@quillsql/react 2.12.28 → 2.12.30

package/dist/esm/Dashboard.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
-import { useContext, useEffect, useState, useMemo, } from 'react';
+import { useContext, useEffect, useState, } from 'react';
 import Chart from './Chart';
 import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
 import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
@@ -18,18 +17,13 @@ import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadi
 import { DashboardFilter } from './components/Dashboard/DashboardFilter';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
 import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
+import { QuillChartErrorWithAction } from './components/Chart/ChartError';
 const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
     minHeight: 300,
     height: 300,
 };
-const defaultFilterContainerStyles = {
-    display: 'flex',
-    width: '100%',
-    marginBottom: 25,
-    height: 66,
-};
 /**
  * ### Quill Dashboard
  *
@@ -61,24 +55,17 @@ const defaultFilterContainerStyles = {
  * ### API Reference
  * @see https://docs.quillsql.com/components/dashboard
  */
-export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, onClickReport, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, }) {
-    const { dispatch } = useContext(DashboardContext);
+export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, }) {
+    const { dashboard, dispatch } = useContext(DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
     const [presetFilters, setPresetFilters] = useState(null);
-    const { dashboard } = useContext(DashboardContext);
     const [client] = useContext(ClientContext);
     const [isLoading, setIsLoading] = useState(isDataLoading);
     const [theme] = useContext(ThemeContext);
     const [initialLoad, setInitialLoad] = useState(true);
+    const [appliedFilters, setAppliedFilters] = useState([]);
     const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
-    const specificDashboardFilters = useMemo(() => {
-        return dashboardFilters
-            .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-            .filter((f) => f &&
-            (!hideDateRangeFilter || f.filterType !== 'date_range') &&
-            f.dashboardName === name);
-    }, [dashboardFilters, data, filters]);
     useEffect(() => {
         setIsLoading(isDataLoading);
     }, [isDataLoading]);
@@ -93,7 +80,6 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     }, [name, client]);
     const onDashboardDataChange = (resp) => {
         setDashboardSections(resp.sections);
-        setInitialLoad(false);
         const filterArray = [];
         // Add date_range filter to filterArray
         if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
@@ -177,6 +163,12 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                 dashboardName: name,
             });
         }
+        if (hashCode(JSON.stringify(appliedFilters)) !==
+            hashCode(JSON.stringify(filterArray))) {
+            setAppliedFilters(filterArray);
+        }
+        setIsLoading(false);
+        setInitialLoad(false);
     };
     const handleOnClickDashboardItem = (elem) => {
         if (onClickReport) {
@@ -185,7 +177,7 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                 id: elem.id,
                 data: elem,
             });
-            onClickReport({ ...elem, _id: elem._id });
+            onClickReport({ ...elem, _id: elem.id });
         }
     };
     function removeQuotes(str) {
@@ -198,7 +190,7 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     }
     const processFilter = (filter, value = null) => {
         //for dateObjects only, since values are arrays for dateObjects
-        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        const { ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
         let selectedValue;
         let selectedElem;
         if (filter.filterType === 'string') {
@@ -228,32 +220,41 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     };
     const updateFilter = (filter, value = null, comparison = null) => {
         //for dateObjects only, since values are arrays for dateObjects
-        const { selectedValue: _, operator, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        const { ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
         if (filter.filterType === 'string') {
             let selectedValue = {};
             if (value) {
                 if (filter.stringFilterType === 'multiselect') {
-                    const parsedValue = JSON.parse(value);
-                    if (parsedValue.length === 0) {
+                    if (value.length === 0) {
                         selectedValue = { values: [] };
                     }
                     else {
-                        selectedValue = { values: parsedValue, operator: 'IN' };
+                        selectedValue = { values: value, operator: 'IN' };
                     }
                 }
                 else {
                     selectedValue = { selectedValue: value };
                 }
             }
+            const newFilter = {
+                ...filterWithoutSelectedValue,
+                ...selectedValue,
+                dashboardName: name,
+            };
             dashboardFiltersDispatch({
                 type: 'UPDATE_DASHBOARD_FILTER',
                 id: filter.field,
-                data: {
-                    ...filterWithoutSelectedValue,
-                    ...selectedValue,
-                    dashboardName: name,
-                },
+                data: newFilter,
             });
+            const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
+                filter.dashboardName === newFilter.dashboardName);
+            if (index !== -1) {
+                setAppliedFilters([
+                    ...appliedFilters.slice(0, index),
+                    newFilter,
+                    ...appliedFilters.slice(index + 1),
+                ]);
+            }
             return;
         }
         if (filter.filterType === 'date' || filter.filterType === 'date_range') {
@@ -272,27 +273,36 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                     preset = value.preset;
                     primaryRange = getRangeFromPresetOptions(value.preset, presetFilters);
                 }
+                const newFilter = {
+                    startDate: primaryRange.start,
+                    endDate: primaryRange.end,
+                    filterType: 'date_range',
+                    label: 'Date',
+                    field: 'date_range',
+                    preset: { label: preset },
+                    options: filter.options,
+                    comparison: true,
+                    comparisonRange: {
+                        startDate: COMPARISON_RANGE[key](primaryRange)?.start,
+                        endDate: COMPARISON_RANGE[key](primaryRange)?.end,
+                        value: key,
+                    },
+                    dashboardName: name,
+                };
                 dashboardFiltersDispatch({
                     type: 'UPDATE_DASHBOARD_FILTER',
                     id: 'date_range',
-                    data: {
-                        startDate: primaryRange.start,
-                        endDate: primaryRange.end,
-                        filterType: 'date_range',
-                        label: 'Date',
-                        field: 'date_range',
-                        preset: { label: preset },
-                        options: filter.options,
-                        comparison: true,
-                        comparisonRange: {
-                            startDate: COMPARISON_RANGE[key](primaryRange)
-                                ?.start,
-                            endDate: COMPARISON_RANGE[key](primaryRange)?.end,
-                            value: key,
-                        },
-                        dashboardName: name,
-                    },
+                    data: newFilter,
                 });
+                const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
+                    filter.dashboardName === newFilter.dashboardName);
+                if (index !== -1) {
+                    setAppliedFilters([
+                        ...appliedFilters.slice(0, index),
+                        newFilter,
+                        ...appliedFilters.slice(index + 1),
+                    ]);
+                }
             }
             else {
                 const primaryRange = value && value.preset
@@ -302,21 +312,31 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                         end: value?.endDate || filter.endDate,
                     };
                 const preset = value?.preset ? value.preset : '';
+                const newFilter = {
+                    ...filter,
+                    preset: { label: preset },
+                    startDate: primaryRange.start,
+                    endDate: primaryRange.end,
+                    filterType: 'date_range',
+                    field: 'date_range',
+                    options: filter.options,
+                    label: 'Date',
+                    dashboardName: name,
+                };
                 dashboardFiltersDispatch({
                     type: 'UPDATE_DASHBOARD_FILTER',
                     id: 'date_range',
-                    data: {
-                        ...filter,
-                        preset: { label: preset },
-                        startDate: primaryRange.start,
-                        endDate: primaryRange.end,
-                        filterType: 'date_range',
-                        field: 'date_range',
-                        options: filter.options,
-                        label: 'Date',
-                        dashboardName: name,
-                    },
+                    data: newFilter,
                 });
+                const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
+                    filter.dashboardName === newFilter.dashboardName);
+                if (index !== -1) {
+                    setAppliedFilters([
+                        ...appliedFilters.slice(0, index),
+                        newFilter,
+                        ...appliedFilters.slice(index + 1),
+                    ]);
+                }
             }
         }
     };
@@ -333,7 +353,7 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
         if (onChangeLoading) {
             onChangeLoading(initialLoad || isLoading);
         }
-    }, [isLoading, onChangeLoading]);
+    }, [isLoading, initialLoad, onChangeLoading]);
     const sortByOrdering = (a, b) => {
         if (a.order === undefined && b.order === undefined)
             return 0;
@@ -360,12 +380,12 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
             return null;
         return _jsx(EmptyDashboardComponent, {});
     }
-    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [!hideFilters && specificDashboardFilters.length > 0 && (_jsx("div", { style: {
+    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [!hideFilters && appliedFilters.length > 0 && (_jsx("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
                     alignItems: 'center',
-                }, children: _jsx(FilterContainerComponent, { children: specificDashboardFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
+                }, children: _jsx(FilterContainerComponent, { children: appliedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
@@ -379,20 +399,22 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "metrics", children: metrics(section).map((item, index) => {
-                                return (_jsx(DataLoader, { id: item._id, filters: specificDashboardFilters, children: ({ isLoading, error, data }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: { ...data, name: item.name }, onClick: !isLoading && onClickReport
+                                return (_jsx(DataLoader, { id: item._id, filters: appliedFilters, children: ({ isLoading, error, data }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: { ...data, name: item.name }, onClick: !isLoading && onClickReport
                                             ? () => handleOnClickDashboardItem({
                                                 ...item,
                                                 ...data,
                                             })
                                             : undefined }, item.name + '' + index)) }, `${item.name}${index}`));
-                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => (_jsx(ChartDataLoader, { id: item._id, hideDateRangeFilter: hideDateRangeFilter, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: specificDashboardFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: { ...data, name: item.name }, error: error, onClick: !isLoading && onClickReport
-                                        ? () => handleOnClickDashboardItem({
-                                            ...item,
-                                            ...data,
-                                        })
-                                        : undefined, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: _jsx(Chart, { config: data, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
+                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => (_jsx(ChartDataLoader, { id: item._id, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: appliedFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: { ...data, name: item.name }, error: error, onClick: () => {
+                                        if (!isLoading && onClickReport) {
+                                            handleOnClickDashboardItem({
+                                                ...item,
+                                                ...data,
+                                            });
+                                        }
+                                    }, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? (_jsx(ErrorComponent, { label: error })) : (_jsx(Chart, { config: data, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
                                             ? theme.chartColors
-                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement, dateBucket: dateBucket }) }, item.name + '' + index)) }, `${item.name}${index}`))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, filters: specificDashboardFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => (_jsx(TableComponent, { report: {
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement, dateBucket: dateBucket })) }, item.name + '' + index)) }, `${item.name}${index}`))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => (_jsx(TableComponent, { report: {
                                         ...data,
                                         name: item.name,
                                     }, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAyB9E,eAAO,MAAM,eAAe,UAQ3B,CAAC;AAmWF,MAAM,WAAW,aAAa;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,IAAI,CAAC;IACjB,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,oBAAoB,EACpB,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,MAAM,EACN,KAAK,GACN,EAAE,aAAa,2CA6Bf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAiBlE,eAAO,MAAM,eAAe,UAQ3B,CAAC;AAkWF,MAAM,WAAW,aAAa;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,IAAI,CAAC;IACjB,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,oBAAoB,EACpB,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,MAAM,EACN,KAAK,GACN,EAAE,aAAa,2CA6Bf;AAED,eAAe,QAAQ,CAAC"}

package/dist/esm/DateRangePicker/Calendar.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-// import { twMerge } from 'tailwind-merge';
+import { useState } from 'react';
 import { add, eachDayOfInterval, endOfMonth, format, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, } from 'date-fns';
-import { BaseColorContext } from '../contexts';
-import { ArrowLeftHeadIcon, ArrowRightHeadIcon, } from '../assets';
+import { ArrowLeftHeadIcon, ArrowRightHeadIcon } from '../assets';
 import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
 export const colStartClasses = [
     '',
@@ -102,10 +100,9 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
 };
 const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateClick, minDate, maxDate, locale, theme, }) => {
     const [hoveredDate, setHoveredDate] = useState();
-    const color = useContext(BaseColorContext);
     const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
     const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
-    const weekdays = getWeekdays(locale).map(dayName => capitalize(dayName, locale));
+    const weekdays = getWeekdays(locale).map((dayName) => capitalize(dayName, locale));
     const displayedDates = eachDayOfInterval({
         start: isSunday(firstDayOfDisplayedMonth)
             ? firstDayOfDisplayedMonth
@@ -127,7 +124,7 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
                     fontWeight: '500',
                     display: 'grid',
                     gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                }, children: weekdays.map(dayName => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
+                }, children: weekdays.map((dayName) => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -138,7 +135,7 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
                     display: 'grid',
                     gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
                     paddingBottom: 8,
-                }, children: displayedDates.map(date => {
+                }, children: displayedDates.map((date) => {
                     const isCurrentDateDisabled = isDateDisabled(date, minDate, maxDate, firstDayOfDisplayedMonth, lastDayOfDisplayedMonth);
                     return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
                                 border: 'none',

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":";AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAuBvC,MAAM,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC;AAEjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC5E,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,eAAe,6FA4PpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":";AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAsBvC,MAAM,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC;AAEjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC5E,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,eAAe,6FA4PpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/DateRangePicker/DateRangePicker.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/display-name */
 // @ts-nocheck
 import React, { useRef, useState } from 'react';
 import { startOfMonth, startOfToday } from 'date-fns';
@@ -12,7 +11,7 @@ import DateRangePickerButton from './DateRangePickerButton';
 import { DropdownItem } from '../components/Dropdown';
 import Modal from '../components/Modal';
 const DateRangePicker = React.forwardRef((props, ref) => {
-    const { dateRange, preset, onChangeDateRange, onChangePreset, presetOptions, enableDropdown = true, options, minDate = null, maxDate = null, placeholder = 'Select', dropdownPlaceholder = 'Select', disabled = false, color = 'blue', enableYearPagination = false, locale = enUS, className, theme, ...other } = props;
+    const { dateRange, preset, onChangeDateRange, onChangePreset, presetOptions, enableDropdown = true, minDate = null, maxDate = null, placeholder = 'Select', dropdownPlaceholder = 'Select', disabled = false, color = 'blue', enableYearPagination = false, locale = enUS, className, theme, ...other } = props;
     const TODAY = startOfToday();
     const calendarRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -112,7 +111,7 @@ const DateRangePicker = React.forwardRef((props, ref) => {
         setShowDropdown(false);
     };
     const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
-    return (_jsx(BaseColorContext.Provider, { value: color, children: _jsxs("div", { ref: ref, style: { position: 'relative', width: '100%' }, ...other, children: [_jsx(DateRangePickerButton, { value: [selectedStartDate, selectedEndDate, selectedDropdownValue], options: presetOptions, placeholder: placeholder, disabled: disabled, calendarRef: calendarRef, showCalendar: showCalendar, setShowCalendar: setShowCalendar, onCalendarKeyDown: handleCalendarKeyDown, enableDropdown: enableDropdown, dropdownRef: dropdownRef, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownKeyDown: handleDropdownKeyDown, locale: locale, dropdownPlaceholder: dropdownPlaceholder, theme: theme }), _jsx(Modal, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: _jsx(Calendar, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
+    return (_jsx(BaseColorContext.Provider, { value: color, children: _jsxs("div", { ref: ref, style: { position: 'relative', width: '100%' }, className: className, ...other, children: [_jsx(DateRangePickerButton, { value: [selectedStartDate, selectedEndDate, selectedDropdownValue], options: presetOptions, placeholder: placeholder, disabled: disabled, calendarRef: calendarRef, showCalendar: showCalendar, setShowCalendar: setShowCalendar, onCalendarKeyDown: handleCalendarKeyDown, enableDropdown: enableDropdown, dropdownRef: dropdownRef, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownKeyDown: handleDropdownKeyDown, locale: locale, dropdownPlaceholder: dropdownPlaceholder, theme: theme }), _jsx(Modal, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: _jsx(Calendar, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
                         // setAnchorDate={setAnchorDate}
                         startDate: startDateInCalendar, endDate: endDateInCalendar, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth, theme: theme }) }), _jsx(Modal, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: _jsx(SelectedValueContext.Provider, { value: {
                             selectedValue: selectedDropdownValue,

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

@@ -8,7 +8,6 @@ interface DateRangePickerButtonProps {
     calendarRef: Ref<HTMLButtonElement>;
     showCalendar: boolean;
     setShowCalendar: Dispatch<SetStateAction<boolean>>;
-    onCalendarKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
     enableDropdown: boolean;
     dropdownRef: Ref<HTMLButtonElement>;
     showDropdown: boolean;
@@ -18,6 +17,6 @@ interface DateRangePickerButtonProps {
     dropdownPlaceholder?: string;
     theme: any;
 }
-declare const DateRangePickerButton: ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder, theme, }: DateRangePickerButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateRangePickerButton: ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder, theme, }: DateRangePickerButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default DateRangePickerButton;
 //# sourceMappingURL=DateRangePickerButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerButton.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/DateRangePickerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAIhF,UAAU,0BAA0B;IAClC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,qBAAqB,iOAiBxB,0BAA0B,4CAuM5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"DateRangePickerButton.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/DateRangePickerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGhF,UAAU,0BAA0B;IAClC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,qBAAqB,8MAgBxB,0BAA0B,4CAsM5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/esm/DateRangePicker/DateRangePickerButton.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
 import { formatSelectedDates } from './dateRangePickerUtils';
-import { hasValue } from '../components/selectUtils';
-const DateRangePickerButton = ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder = 'Select', theme, }) => {
+const DateRangePickerButton = ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder = 'Select', theme, }) => {
     const [startDate, endDate, dropdownValue] = value;
     const hasDateSelection = (startDate || endDate) !== null && (startDate || endDate) !== undefined;
-    const hasDropdownSelection = hasValue(dropdownValue);
     const calendarText = hasDateSelection
         ? formatSelectedDates(startDate, endDate, locale)
         : placeholder;
     const dropdownText = dropdownValue
-        ? String(options.find(option => option.value === dropdownValue)?.text)
+        ? String(options.find((option) => option.value === dropdownValue)?.text)
         : dropdownPlaceholder;
     return (_jsxs("div", { style: {
             display: 'flex',

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

@@ -16,9 +16,10 @@ export interface DateRangePickerComponentProps {
         endDate: Date;
     }) => void;
     onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
+    hidePreset?: boolean;
 }
 /**
  * The fallback date range picked used in <Dashboard/>.
  */
-export declare function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, hidePreset, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillDateRangePicker.d.ts.map

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

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

package/dist/esm/DateRangePicker/QuillDateRangePicker.js

@@ -7,7 +7,7 @@ import { QuillSelectComponent } from '../components/QuillSelect';
 /**
  * The fallback date range picked used in <Dashboard/>.
  */
-export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, }) {
+export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, hidePreset, }) {
     const [theme] = useContext(ThemeContext);
     const [anchorStartDate, setAnchorStartDate] = useState(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
     const [anchorEndDate, setAnchorEndDate] = useState(getAnchorEndDate(dateRange.startDate, dateRange.endDate));
@@ -53,17 +53,17 @@ export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptio
                             minHeight: 40,
                             maxHeight: 40,
                             gap: 10,
-                        }, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme.hoverBackgroundColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd, yyyy')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setLocalPreset: setLocalPreset, setShowModal: setShowModal }))] }), _jsx(QuillSelectComponent, { options: presetOptions.map((option) => ({
+                        }, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme.hoverBackgroundColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd, yyyy')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setLocalPreset: setLocalPreset, setShowModal: setShowModal }))] }), !hidePreset && (_jsx(QuillSelectComponent, { options: presetOptions.map((option) => ({
                     label: option.label,
                     value: option.label,
                 })), value: localPreset.label || '', onChange: (e) => {
                     onChangePreset(e);
                     setLocalPreset({ label: e.target.value });
-                }, width: selectWidth ?? 200 })] }));
+                }, width: selectWidth ?? 200 }))] }));
 }
 function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, setLocalPreset, setShowModal, }) {
     const modalRef = useRef(null);
-    useOnClickOutside(modalRef, (e) => {
+    useOnClickOutside(modalRef, () => {
         setShowModal(false);
     });
     const firstMonthDisplayedDates = eachDayOfInterval({

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

@@ -54,7 +54,7 @@ export declare const COMPARISON_RANGE: {
         start: Date;
         end: Date;
     };
-    readonly NO_COMPARISON: (_: any) => null;
+    readonly NO_COMPARISON: () => null;
 };
 export type ComparisonRangeKey = keyof typeof COMPARISON_RANGE;
 export declare const defaultOptionsV2: any[];

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

@@ -1 +1 @@
-{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,GAAG,EAAE,SAAS,CAAA;KAAE,CAAC;CAatE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,EAqBA,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;2CACG,cAAc;;;;sCAInB,cAAc;;;;uCAIb,cAAc;;;;uCAId,cAAc;;;;gCAIrB,GAAG;CACd,CAAC;AACX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,GAAG,EAiDjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAOhD,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,MAAM,iBACC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC;IAAC,OAAO,EAAE,IAAI,CAAA;CAAE,EAAE;;;;;;CAQnE,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}
+{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,GAAG,EAAE,SAAS,CAAA;KAAE,CAAC;CAatE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,EAqBA,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;2CACG,cAAc;;;;sCAInB,cAAc;;;;uCAIb,cAAc;;;;uCAId,cAAc;;;;;CAKhC,CAAC;AACX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,GAAG,EAiDjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAOhD,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,MAAM,iBACC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC;IAAC,OAAO,EAAE,IAAI,CAAA;CAAE,EAAE;;;;;;CAQnE,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAmGF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}

package/dist/esm/DateRangePicker/dateRangePickerUtils.js

@@ -114,7 +114,7 @@ export const COMPARISON_RANGE = {
         start: sub(start, { days: 90 }),
         end: start,
     }),
-    NO_COMPARISON: (_) => null,
+    NO_COMPARISON: () => null,
 };
 export const defaultOptionsV2 = [
     {
@@ -454,20 +454,6 @@ const getDayTextClassNames = (theme, day, selectedStartDay, selectedEndDay, hove
     }
     return styles;
 };
-const getDayHoverBgColorClassName = (day, selectedStartDay, selectedEndDay, isDayDisabled = false) => {
-    const styles = {
-        background: 'transparent',
-    };
-    if (!isDayDisabled) {
-        if (selectedStartDay && isEqual(day, selectedStartDay)) {
-            styles.background = '';
-        }
-        if (selectedEndDay && isEqual(day, selectedEndDay)) {
-            styles.background = '';
-        }
-    }
-    return styles;
-};
 export const formatSelectedDates = (startDate, endDate, locale) => {
     const localeCode = locale?.code || 'en-US';
     if (!startDate && !endDate) {

package/dist/esm/ReportBuilder.d.ts

@@ -70,6 +70,21 @@ export interface ReportBuilderProps {
         onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
         width: number;
     }) => JSX.Element;
+    /** A multi-select component. */
+    MultiSelectComponent?: (props: {
+        label?: string;
+        width: number;
+        value: string[];
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (event: React.ChangeEvent<HTMLSelectElement> | {
+            target: {
+                value: string[];
+            };
+        }) => void;
+    }) => JSX.Element;
     /** A table component. */
     TableComponent?: (props: {
         rows: {
@@ -80,6 +95,12 @@ export interface ReportBuilderProps {
             label: string;
         }[];
         isLoading?: boolean;
+        rowCount?: number;
+        onPageChange?: (page: number) => void;
+        onSortChange?: (sort: {
+            field: string;
+            direction: string;
+        }) => void;
     }) => JSX.Element;
     /** A popover component. */
     PopoverComponent?: (props: {
@@ -293,5 +314,5 @@ export declare const QUILL_SERVER: string;
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName, onSubmitEditReport, onSubmitCreateReport, destinationDashboard, organizationName, ButtonComponent, SecondaryButtonComponent, DeleteButtonComponent, ModalComponent, TextInputComponent, SelectComponent, TableComponent, PopoverComponent, TabsComponent, CheckboxComponent, SidebarComponent, ContainerComponent, SelectColumnComponent, DraggableColumnComponent, SidebarHeadingComponent, FilterPopoverComponent, SortPopoverComponent, LimitPopoverComponent, CardComponent, LabelComponent, HeaderComponent, SubHeaderComponent, TextComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, LoadingComponent, ColumnSearchEmptyState, ChartBuilderFormContainer, ChartBuilderModalComponent, isAdminEnabled, isAIEnabled, showChartBuilderTableFormatOptions, containerStyle, className, pivotRecommendationsEnabled, reportId, hideCopySQL, isChartBuilderHorizontalView, onClickChartElement, }: ReportBuilderProps): import("react/jsx-runtime").JSX.Element;
+export default function ReportBuilder({ initialTableName, onSubmitEditReport, onSubmitCreateReport, destinationDashboard, organizationName, ButtonComponent, SecondaryButtonComponent, DeleteButtonComponent, ModalComponent, TextInputComponent, SelectComponent, MultiSelectComponent, TableComponent, PopoverComponent, TabsComponent, CheckboxComponent, SidebarComponent, ContainerComponent, SelectColumnComponent, DraggableColumnComponent, SidebarHeadingComponent, FilterPopoverComponent, SortPopoverComponent, LimitPopoverComponent, CardComponent, LabelComponent, HeaderComponent, SubHeaderComponent, TextComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, LoadingComponent, ColumnSearchEmptyState, ChartBuilderFormContainer, ChartBuilderModalComponent, isAdminEnabled, isAIEnabled, showChartBuilderTableFormatOptions, containerStyle, className, pivotRecommendationsEnabled, reportId, hideCopySQL, isChartBuilderHorizontalView, onClickChartElement, }: ReportBuilderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReportBuilder.d.ts.map