@quillsql/react 2.12.29 → 2.12.31

package/dist/esm/Dashboard.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
 import { useContext, useEffect, useState, } from 'react';
-import Chart from './Chart';
+import { ChartDisplay } from './Chart';
 import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, SchemaContext, } from './Context';
 import { useDashboard } from './hooks/useDashboard';
 import { hashCode } from './utils/crypto';
 import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
@@ -14,22 +13,25 @@ import DashboardSection from './components/Dashboard/DashboardSection';
 import { styleToProps } from './utils/styles';
 import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
-import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadingDashboardComponent, } from './components/UiComponents';
+import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadingDashboardComponent, QuillUserFilterModalComponent, MemoizedButton, MemoizedSecondaryButton, QuillTextInput, MemoizedPopover, QuillErrorMessageComponent, } from './components/UiComponents';
 import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { BoolOperator, FieldTypes, NullOperator, NumberOperator, StringOperator, } from './models/Filter';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
 import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
+import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { isTextColumnType } from './components/ReportBuilder/ast';
+import { convertColumnInfoToColumnInternal } from './utils/columnProcessing';
+import { getCountsByColumns, getUniqueValuesByColumns, } from './utils/tableProcessing';
+import { filterSentence, getType } from './utils/filterProcessing';
+import { QuillChartErrorWithAction } from './components/Chart/ChartError';
+import { FilterPopoverWrapper, QuillFilterPopover, } from './components/ReportBuilder/ui';
+import FilterModal from './components/ReportBuilder/FilterModal';
 const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
     minHeight: 300,
     height: 300,
 };
-const defaultFilterContainerStyles = {
-    display: 'flex',
-    width: '100%',
-    marginBottom: 25,
-    height: 66,
-};
 /**
  * ### Quill Dashboard
  *
@@ -61,8 +63,8 @@ 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, dashboard } = useContext(DashboardContext);
+export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, UserFilterModalComponent = QuillUserFilterModalComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, FilterTagComponent = QuillFilterPopover, PopoverComponent = MemoizedPopover, TextInputComponent = QuillTextInput, 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, hideAdminErrors = true, }) {
+    const [dashboard] = useContext(DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
     const [presetFilters, setPresetFilters] = useState(null);
@@ -72,20 +74,158 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     const [initialLoad, setInitialLoad] = useState(true);
     const [appliedFilters, setAppliedFilters] = useState([]);
     const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [filterSchemaIsLoaded, setFilterSchemaIsLoaded] = useState(false);
+    const [filterSchema, setFilterSchema] = useState({ columns: [] }); // Schema to be passed into FilterModal
+    const [schemaLoading, setSchemaLoading] = useState(false);
+    const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
+    const [referencedTables, setReferencedTables] = useState([]); // Intersection of tables referenced in the dashboard
+    const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState(false);
+    const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState(false);
+    const [filterListIsOpen, setFilterListIsOpen] = useState(false);
+    const [filterListAddFilterPopoverIsOpen, setFilterListAddFilterPopoverIsOpen,] = useState(false);
+    const [uniqueCounter, setUniqueCounter] = useState(0);
+    const [userFilters, setUserFilters] = useState([]);
+    const [adminFilters, setAdminFilters] = useState([]);
+    const customOperatorOptions = {
+        [FieldTypes.Numeric]: [
+            NumberOperator.EqualTo,
+            NumberOperator.NotEqualTo,
+            NumberOperator.GreaterThan,
+            NumberOperator.LessThan,
+            NumberOperator.GreaterThanOrEqualTo,
+            NumberOperator.LessThanOrEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.String]: [
+            StringOperator.IsExactly,
+            StringOperator.IsNotExactly,
+            StringOperator.Contains,
+            StringOperator.Is,
+            StringOperator.IsNot,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.Boolean]: [
+            BoolOperator.EqualTo,
+            BoolOperator.NotEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+    };
+    const getSchema = async () => {
+        const { schemaData } = await getSchemaInfoWithCustomFields(client);
+        setSchema(schemaData);
+        setSchemaLoading(false);
+    };
+    useEffect(() => {
+        if (client && !schemaLoading) {
+            setSchemaLoading(true);
+            getSchema();
+        }
+    }, [client.publicKey]);
     useEffect(() => {
         setIsLoading(isDataLoading);
     }, [isDataLoading]);
     useEffect(() => {
         if (!data)
             return;
-        onDashboardDataChange(data);
-    }, [data, filters]);
+        onDashboardDataChange(data, schema);
+    }, [data, filters, schema]);
     useEffect(() => {
         setIsLoading(true);
         reload(name);
     }, [name, client]);
-    const onDashboardDataChange = (resp) => {
+    // Go through all columns in the referenced tables and get the unique values to use in fieldValuesMap
+    useEffect(() => {
+        const fetchData = async () => {
+            setFieldValuesIsLoaded(false);
+            const newFieldValues = {};
+            await Promise.all(referencedTables.map(async (table) => {
+                const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
+                if (tableInfo) {
+                    const uniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                    if (uniqueValues) {
+                        newFieldValues[table] = {};
+                        Object.keys(uniqueValues).forEach((field) => {
+                            newFieldValues[table][field] = Object.keys(uniqueValues[field] ?? []);
+                        });
+                    }
+                }
+            }));
+            setFieldValuesMap(newFieldValues);
+            setFieldValuesIsLoaded(true);
+        };
+        fetchData();
+    }, [referencedTables]);
+    useEffect(() => {
+        setUserFilters([...appliedFilters.filter((filter) => filter.isUserFilter)]);
+        setAdminFilters([
+            ...appliedFilters.filter((filter) => !filter.isUserFilter),
+        ]);
+    }, [appliedFilters]);
+    const getUniqueStringValues = async (columns, tableName) => {
+        const convertedStringColumns = columns
+            .filter((column) => {
+            return isTextColumnType(column.fieldType);
+        })
+            .map((column) => convertColumnInfoToColumnInternal(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await getCountsByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, []);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, `Select ${smallStringNames.join(', ')} from ${tableName}`, [], client, []);
+        return newUniqueValues;
+    };
+    // Get the relevant information from the dashboard and schema to pass to FilterModal
+    const updateFilterSchema = (sections, schema) => {
+        if (!sections || !schema || schema.length === 0) {
+            return;
+        }
+        setFilterSchemaIsLoaded(false);
+        // find intersection of all referenced tables
+        const tables = Object.keys(sections)
+            .map((section) => {
+            return sections[section].map((chart) => {
+                return chart.referencedTables;
+            });
+        })
+            .reduce((accumulator, currentArray) => {
+            return accumulator.concat(currentArray);
+        }, []);
+        if (tables && tables.length > 0) {
+            let intersection = new Set(tables[0]);
+            for (let i = 1; i < tables.length; ++i) {
+                const currentSet = new Set(tables[i]);
+                intersection = new Set(Array.from(intersection).filter((value) => currentSet.has(value)));
+            }
+            const tablesList = Array.from(intersection);
+            setReferencedTables(tablesList);
+            // get all columns from the intersected tables
+            const columns = tablesList
+                .map((table) => {
+                return (schema
+                    .find((t) => {
+                    return t.displayName === table || t.name === table;
+                })
+                    ?.columns.filter((col) => getType(col.fieldType) !== 'date')
+                    ?.map((col) => {
+                    return { ...col, table: table };
+                }) ?? []);
+            })
+                .reduce((accumulator, currentArray) => {
+                return accumulator.concat(currentArray);
+            }, []);
+            setFilterSchema({ columns });
+        }
+        else {
+            setFilterSchema({ columns: [] });
+        }
+        setFilterSchemaIsLoaded(true);
+    };
+    const onDashboardDataChange = (resp, schema) => {
         setDashboardSections(resp.sections);
+        updateFilterSchema(resp.sections, schema);
         const filterArray = [];
         // Add date_range filter to filterArray
         if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
@@ -156,7 +296,11 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
         // Add custom filter to filterArray
         if (filters) {
             filters.forEach((filter) => {
-                filterArray.push({ ...filter, dashboardName: name });
+                filterArray.push({
+                    ...filter,
+                    dashboardName: name,
+                    isUserFilter: true,
+                });
             });
         }
         // remove all that are already present in dashboardSpecificFilters
@@ -178,12 +322,7 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     };
     const handleOnClickDashboardItem = (elem) => {
         if (onClickReport) {
-            dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: elem.id,
-                data: elem,
-            });
-            onClickReport({ ...elem, _id: elem._id });
+            onClickReport({ ...elem, _id: elem.id });
         }
     };
     function removeQuotes(str) {
@@ -196,7 +335,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') {
@@ -226,17 +365,16 @@ 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 (value || 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 {
@@ -347,6 +485,37 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
             }
         }
     };
+    // generate the correct filter structure
+    const getUserFilter = (filter, id, existingFilter) => {
+        let userFilter = {};
+        if (existingFilter) {
+            userFilter = { ...existingFilter };
+        }
+        else {
+            userFilter = { _id: `userFilter_${id}` };
+        }
+        userFilter = {
+            ...userFilter,
+            table: filter.table ?? '',
+            field: filter.field,
+            name: filter.name,
+            type: filter.type,
+            value: filter.value,
+            operator: filter.operator,
+            dashboardName: name,
+            isUserFilter: true,
+        };
+        return userFilter;
+    };
+    // new update filter function for user added filters
+    const updateUserFilter = (filter, id) => {
+        const newFilter = getUserFilter(filter, id);
+        dashboardFiltersDispatch({
+            type: 'ADD_DASHBOARD_FILTER',
+            data: newFilter,
+        });
+        setAppliedFilters([...appliedFilters, newFilter]);
+    };
     useEffect(() => {
         if (dashboardSections && dashboard) {
             const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
@@ -387,12 +556,72 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
             return null;
         return _jsx(EmptyDashboardComponent, {});
     }
-    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: appliedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
+    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [filterSchemaIsLoaded &&
+                !hideAdminErrors &&
+                !hideFilters &&
+                filterSchema &&
+                filterSchema.columns.length === 0 && (_jsx("div", { style: { marginBottom: 10 }, children: _jsx(QuillErrorMessageComponent, { errorMessage: "Warning: No custom filter options because there are no common views among the charts in the dashboard" }) })), !hideFilters && (_jsxs(FilterContainerComponent, { children: [adminFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                    if (fieldValuesIsLoaded) {
+                                        setAddFilterPopoverIsOpen(true);
+                                        setFilterListIsOpen(false);
+                                    }
+                                }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                        setAddFilterPopoverIsOpen(false);
+                                        updateUserFilter(filter, appliedFilters.length);
+                                    }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] }), userFilters.length > 0 && (_jsx(UserFilterModalComponent, { triggerLabel: `Filters${userFilters.length > 0 ? ` (${userFilters.length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'start',
+                            }, children: [userFilters.map((filter, index) => (_jsx(FilterPopoverWrapper, { schema: filterSchema, filter: {
+                                        name: filter.name,
+                                        type: filter.type,
+                                        field: filter.field,
+                                        operator: filter.operator,
+                                        value: filter.value,
+                                    }, filterLabel: filter ? filterSentence(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (newFilter) => {
+                                        const updatedFilter = getUserFilter(newFilter, filter._id, filter);
+                                        const updateIndex = appliedFilters.findIndex((val) => {
+                                            return val._id === filter._id;
+                                        });
+                                        dashboardFiltersDispatch({
+                                            type: 'UPDATE_DASHBOARD_FILTER',
+                                            id: updatedFilter._id,
+                                            data: updateFilter,
+                                        });
+                                        setAppliedFilters([
+                                            ...appliedFilters.slice(0, updateIndex),
+                                            updatedFilter,
+                                            ...appliedFilters.slice(updateIndex + 1),
+                                        ]);
+                                    }, handleFilterDelete: () => {
+                                        const deleteIndex = appliedFilters.findIndex((val) => {
+                                            return val._id === filter._id;
+                                        });
+                                        dashboardFiltersDispatch({
+                                            type: 'DELETE_DASHBOARD_FILTER',
+                                            id: appliedFilters[deleteIndex]._id,
+                                        });
+                                        setAppliedFilters([
+                                            ...appliedFilters.slice(0, deleteIndex),
+                                            ...appliedFilters.slice(deleteIndex + 1),
+                                        ]);
+                                    }, containerStyle: { width: 300, marginBottom: 10 } }, `userFilter_${index}`))), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (fieldValuesIsLoaded) {
+                                                    setFilterListAddFilterPopoverIsOpen(true);
+                                                }
+                                            }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                    setFilterListAddFilterPopoverIsOpen(false);
+                                                    setFilterListIsOpen(false);
+                                                    const id = uniqueCounter;
+                                                    setUniqueCounter(uniqueCounter + 1);
+                                                    updateUserFilter(filter, id);
+                                                }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
@@ -406,29 +635,26 @@ 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: appliedFilters, children: ({ isLoading, error, data }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: { ...data, name: item.name }, onClick: !isLoading && onClickReport
+                                return (_jsx(DataLoader, { item: item, filters: appliedFilters, children: ({ isLoading, error, data }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, 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: appliedFilters, 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
+                                            : () => { } }, item.name + '' + index)) }, `${item._id}${index}`));
+                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: appliedFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: () => {
+                                        if (!isLoading && onClickReport) {
+                                            handleOnClickDashboardItem({
+                                                ...item,
+                                                ...data,
+                                            });
+                                        }
+                                    }, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? (_jsx(ErrorComponent, { label: error })) : (_jsx(ChartDisplay, { reportId: data.id, config: data, loading: isLoading, 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: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => (_jsx(TableComponent, { report: {
-                                        ...data,
-                                        name: item.name,
-                                    }, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement })) }, item.name + '' + index)) }, `${item._id}${index}`))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { item: item, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
                                         ? () => handleOnClickDashboardItem({
                                             ...item,
                                             ...data,
                                         })
-                                        : undefined, rowCount: data?.pivotRows
-                                        ? data?.pivotRows.length
-                                        : data?.rowCount, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                                        : undefined, rowCount: data?.rowCount ? data?.rowCount : data?.rows.length, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${item._id}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }

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,6FA6NpB,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);
@@ -55,32 +54,6 @@ const DateRangePicker = React.forwardRef((props, ref) => {
             setSelectedValue([startDateInCalendar, date, null]);
             return;
         }
-        // if (!selectedStartDate) {
-        //   console.log('1');
-        //   onChangeDateRange([date, selectedEndDate]);
-        //   onChangePreset(null);
-        //   setSelectedValue([date, selectedEndDate, null]);
-        // } else if (selectedStartDate && !selectedEndDate) {
-        //   console.log('2');
-        //   if (date < selectedStartDate) {
-        //     console.log('3');
-        //     onChangeDateRange?.([date, selectedEndDate]);
-        //     onChangePreset(null);
-        //     setSelectedValue([date, selectedEndDate, null]);
-        //     // Selection complete
-        //   } else {
-        //     console.log('4');
-        //     onChangeDateRange([selectedStartDate, date]);
-        //     onChangePreset(null);
-        //     setSelectedValue([selectedStartDate, date, null]);
-        //     setShowCalendar(false);
-        //   }
-        // } else if (selectedStartDate && selectedEndDate) {
-        //   console.log('5: ', { selectedStartDate, selectedEndDate });
-        //   onChangeDateRange([date, null]);
-        //   onChangePreset(null);
-        //   setSelectedValue([date, null, null]);
-        // }
     };
     const handleCalendarKeyDown = (e) => {
         if (e.key === 'Escape') {
@@ -112,7 +85,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"}