@quillsql/react 2.12.28 → 2.12.30

package/dist/cjs/Dashboard.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-unused-vars */
 const react_1 = require("react");
 const Chart_1 = __importDefault(require("./Chart"));
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
@@ -46,18 +45,13 @@ const UiComponents_1 = require("./components/UiComponents");
 const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
 const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
 const QuillSelectWithCombo_1 = require("./components/QuillSelectWithCombo");
+const ChartError_1 = require("./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
  *
@@ -89,24 +83,17 @@ const defaultFilterContainerStyles = {
  * ### API Reference
  * @see https://docs.quillsql.com/components/dashboard
  */
-function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithCombo_1.QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = UiComponents_1.QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, DashboardLoadingComponent = UiComponents_1.QuillLoadingDashboardComponent, onClickReport, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, }) {
-    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithCombo_1.QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, EmptyDashboardComponent = UiComponents_1.QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, DashboardLoadingComponent = UiComponents_1.QuillLoadingDashboardComponent, ErrorComponent = ChartError_1.QuillChartErrorWithAction, onClickReport, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, }) {
+    const { dashboard, dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
     const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
     const [presetFilters, setPresetFilters] = (0, react_1.useState)(null);
-    const { dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [isLoading, setIsLoading] = (0, react_1.useState)(isDataLoading);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
     const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const specificDashboardFilters = (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         setIsLoading(isDataLoading);
     }, [isDataLoading]);
@@ -121,7 +108,6 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
     }, [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) {
@@ -205,6 +191,12 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
                 dashboardName: name,
             });
         }
+        if ((0, crypto_1.hashCode)(JSON.stringify(appliedFilters)) !==
+            (0, crypto_1.hashCode)(JSON.stringify(filterArray))) {
+            setAppliedFilters(filterArray);
+        }
+        setIsLoading(false);
+        setInitialLoad(false);
     };
     const handleOnClickDashboardItem = (elem) => {
         if (onClickReport) {
@@ -213,7 +205,7 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
                 id: elem.id,
                 data: elem,
             });
-            onClickReport({ ...elem, _id: elem._id });
+            onClickReport({ ...elem, _id: elem.id });
         }
     };
     function removeQuotes(str) {
@@ -226,7 +218,7 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
     }
     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') {
@@ -256,32 +248,41 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
     };
     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') {
@@ -300,27 +301,36 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
                     preset = value.preset;
                     primaryRange = (0, dateRangePickerUtils_1.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: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.start,
+                        endDate: dateRangePickerUtils_1.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: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
-                                ?.start,
-                            endDate: dateRangePickerUtils_1.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
@@ -330,21 +340,31 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
                         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),
+                    ]);
+                }
             }
         }
     };
@@ -361,7 +381,7 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
         if (onChangeLoading) {
             onChangeLoading(initialLoad || isLoading);
         }
-    }, [isLoading, onChangeLoading]);
+    }, [isLoading, initialLoad, onChangeLoading]);
     const sortByOrdering = (a, b) => {
         if (a.order === undefined && b.order === undefined)
             return 0;
@@ -388,12 +408,12 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
             return null;
         return (0, jsx_runtime_1.jsx)(EmptyDashboardComponent, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && specificDashboardFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && appliedFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(FilterContainerComponent, { children: specificDashboardFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
+                }, children: (0, jsx_runtime_1.jsx)(FilterContainerComponent, { children: appliedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.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;
             })
@@ -407,20 +427,22 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "metrics", children: metrics(section).map((item, index) => {
-                                return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, filters: specificDashboardFilters, children: ({ isLoading, error, data }) => ((0, jsx_runtime_1.jsx)(MetricComponent, { error: error, isLoading: isLoading, report: { ...data, name: item.name }, onClick: !isLoading && onClickReport
+                                return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, filters: appliedFilters, children: ({ isLoading, error, data }) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.ChartDataLoader, { id: item._id, hideDateRangeFilter: hideDateRangeFilter, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: specificDashboardFilters, children: ({ isLoading, data, error, dateBucket, }) => ((0, jsx_runtime_1.jsx)(ChartComponent, { report: { ...data, name: item.name }, error: error, onClick: !isLoading && onClickReport
-                                        ? () => handleOnClickDashboardItem({
-                                            ...item,
-                                            ...data,
-                                        })
-                                        : undefined, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { config: data, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
+                            }) })), charts(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.ChartDataLoader, { id: item._id, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: appliedFilters, children: ({ isLoading, data, error, dateBucket, }) => ((0, jsx_runtime_1.jsx)(ChartComponent, { report: { ...data, name: item.name }, error: error, onClick: () => {
+                                        if (!isLoading && onClickReport) {
+                                            handleOnClickDashboardItem({
+                                                ...item,
+                                                ...data,
+                                            });
+                                        }
+                                    }, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? ((0, jsx_runtime_1.jsx)(ErrorComponent, { label: error })) : ((0, jsx_runtime_1.jsx)(Chart_1.default, { 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 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, filters: specificDashboardFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => ((0, jsx_runtime_1.jsx)(TableComponent, { report: {
                                         ...data,
                                         name: item.name,
                                     }, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport

package/dist/cjs/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/cjs/DateRangePicker/Calendar.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = exports.colStartClasses = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-// import { twMerge } from 'tailwind-merge';
 const date_fns_1 = require("date-fns");
-const contexts_1 = require("../contexts");
 const assets_1 = require("../assets");
 const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
 exports.colStartClasses = [
@@ -105,10 +103,9 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
 };
 const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateClick, minDate, maxDate, locale, theme, }) => {
     const [hoveredDate, setHoveredDate] = (0, react_1.useState)();
-    const color = (0, react_1.useContext)(contexts_1.BaseColorContext);
     const firstDayOfDisplayedMonth = (0, date_fns_1.startOfMonth)(anchorDate);
     const lastDayOfDisplayedMonth = (0, date_fns_1.endOfMonth)(anchorDate);
-    const weekdays = (0, dateRangePickerUtils_1.getWeekdays)(locale).map(dayName => (0, dateRangePickerUtils_1.capitalize)(dayName, locale));
+    const weekdays = (0, dateRangePickerUtils_1.getWeekdays)(locale).map((dayName) => (0, dateRangePickerUtils_1.capitalize)(dayName, locale));
     const displayedDates = (0, date_fns_1.eachDayOfInterval)({
         start: (0, date_fns_1.isSunday)(firstDayOfDisplayedMonth)
             ? firstDayOfDisplayedMonth
@@ -130,7 +127,7 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
                     fontWeight: '500',
                     display: 'grid',
                     gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                }, children: weekdays.map(dayName => ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: weekdays.map((dayName) => ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -141,7 +138,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 ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("button", { style: {
                                 border: 'none',

package/dist/cjs/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/cjs/DateRangePicker/DateRangePicker.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/display-name */
 // @ts-nocheck
 const react_1 = __importStar(require("react"));
 const date_fns_1 = require("date-fns");
@@ -40,7 +39,7 @@ const DateRangePickerButton_1 = __importDefault(require("./DateRangePickerButton
 const Dropdown_1 = require("../components/Dropdown");
 const Modal_1 = __importDefault(require("../components/Modal"));
 const DateRangePicker = react_1.default.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 = locale_1.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 = locale_1.enUS, className, theme, ...other } = props;
     const TODAY = (0, date_fns_1.startOfToday)();
     const calendarRef = (0, react_1.useRef)(null);
     const dropdownRef = (0, react_1.useRef)(null);
@@ -140,7 +139,7 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
         setShowDropdown(false);
     };
     const [hoveredDropdownValue, handleDropdownKeyDown] = (0, hooks_1.useSelectOnKeyDown)(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
-    return ((0, jsx_runtime_1.jsx)(contexts_1.BaseColorContext.Provider, { value: color, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, style: { position: 'relative', width: '100%' }, ...other, children: [(0, jsx_runtime_1.jsx)(DateRangePickerButton_1.default, { 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 }), (0, jsx_runtime_1.jsx)(Modal_1.default, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
+    return ((0, jsx_runtime_1.jsx)(contexts_1.BaseColorContext.Provider, { value: color, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, style: { position: 'relative', width: '100%' }, className: className, ...other, children: [(0, jsx_runtime_1.jsx)(DateRangePickerButton_1.default, { 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 }), (0, jsx_runtime_1.jsx)(Modal_1.default, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
                         // setAnchorDate={setAnchorDate}
                         startDate: startDateInCalendar, endDate: endDateInCalendar, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth, theme: theme }) }), (0, jsx_runtime_1.jsx)(Modal_1.default, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectedValueContext.Provider, { value: {
                             selectedValue: selectedDropdownValue,

package/dist/cjs/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/cjs/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/cjs/DateRangePicker/DateRangePickerButton.js

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const assets_1 = require("../assets");
 const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
-const selectUtils_1 = require("../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 = (0, selectUtils_1.hasValue)(dropdownValue);
     const calendarText = hasDateSelection
         ? (0, dateRangePickerUtils_1.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 ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',

package/dist/cjs/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/cjs/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/cjs/DateRangePicker/QuillDateRangePicker.js

@@ -10,7 +10,7 @@ const QuillSelect_1 = require("../components/QuillSelect");
 /**
  * The fallback date range picked used in <Dashboard/>.
  */
-function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, }) {
+function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, selectWidth, hidePreset, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [anchorStartDate, setAnchorStartDate] = (0, react_1.useState)(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
     const [anchorEndDate, setAnchorEndDate] = (0, react_1.useState)(getAnchorEndDate(dateRange.startDate, dateRange.endDate));
@@ -56,18 +56,18 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
                             minHeight: 40,
                             maxHeight: 40,
                             gap: 10,
-                        }, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-date-range-picker-button { background: ${theme.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && (0, date_fns_1.format)(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy')] }), showModal && ((0, jsx_runtime_1.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 }))] }), (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { options: presetOptions.map((option) => ({
+                        }, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-date-range-picker-button { background: ${theme.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && (0, date_fns_1.format)(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy')] }), showModal && ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(QuillSelect_1.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 }))] }));
 }
 exports.QuillDateRangePicker = QuillDateRangePicker;
 function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, setLocalPreset, setShowModal, }) {
     const modalRef = (0, react_1.useRef)(null);
-    (0, hooks_1.useOnClickOutside)(modalRef, (e) => {
+    (0, hooks_1.useOnClickOutside)(modalRef, () => {
         setShowModal(false);
     });
     const firstMonthDisplayedDates = (0, date_fns_1.eachDayOfInterval)({

package/dist/cjs/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/cjs/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/cjs/DateRangePicker/dateRangePickerUtils.js

@@ -123,7 +123,7 @@ exports.COMPARISON_RANGE = {
         start: (0, date_fns_1.sub)(start, { days: 90 }),
         end: start,
     }),
-    NO_COMPARISON: (_) => null,
+    NO_COMPARISON: () => null,
 };
 exports.defaultOptionsV2 = [
     {
@@ -467,20 +467,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 && (0, date_fns_1.isEqual)(day, selectedStartDay)) {
-            styles.background = '';
-        }
-        if (selectedEndDay && (0, date_fns_1.isEqual)(day, selectedEndDay)) {
-            styles.background = '';
-        }
-    }
-    return styles;
-};
 const formatSelectedDates = (startDate, endDate, locale) => {
     const localeCode = locale?.code || 'en-US';
     if (!startDate && !endDate) {

package/dist/cjs/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