@quillsql/react 2.12.29 → 2.12.31

package/dist/cjs/Dashboard.js

@@ -27,9 +27,8 @@ 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 Chart_1 = require("./Chart");
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const Context_1 = require("./Context");
 const useDashboard_1 = require("./hooks/useDashboard");
@@ -44,20 +43,23 @@ const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker")
 const DataLoader_1 = __importStar(require("./components/Dashboard/DataLoader"));
 const UiComponents_1 = require("./components/UiComponents");
 const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
+const Filter_1 = require("./models/Filter");
 const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
 const QuillSelectWithCombo_1 = require("./components/QuillSelectWithCombo");
+const schema_1 = require("./utils/schema");
+const ast_1 = require("./components/ReportBuilder/ast");
+const columnProcessing_1 = require("./utils/columnProcessing");
+const tableProcessing_1 = require("./utils/tableProcessing");
+const filterProcessing_1 = require("./utils/filterProcessing");
+const ChartError_1 = require("./components/Chart/ChartError");
+const ui_1 = require("./components/ReportBuilder/ui");
+const FilterModal_1 = __importDefault(require("./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
  *
@@ -89,8 +91,8 @@ 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, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithCombo_1.QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, UserFilterModalComponent = UiComponents_1.QuillUserFilterModalComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, FilterTagComponent = ui_1.QuillFilterPopover, PopoverComponent = UiComponents_1.MemoizedPopover, TextInputComponent = UiComponents_1.QuillTextInput, 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, hideAdminErrors = true, }) {
+    const [dashboard] = (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);
@@ -100,20 +102,158 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
     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 [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [filterSchemaIsLoaded, setFilterSchemaIsLoaded] = (0, react_1.useState)(false);
+    const [filterSchema, setFilterSchema] = (0, react_1.useState)({ columns: [] }); // Schema to be passed into FilterModal
+    const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
+    const [fieldValuesMap, setFieldValuesMap] = (0, react_1.useState)({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
+    const [referencedTables, setReferencedTables] = (0, react_1.useState)([]); // Intersection of tables referenced in the dashboard
+    const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = (0, react_1.useState)(false);
+    const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = (0, react_1.useState)(false);
+    const [filterListIsOpen, setFilterListIsOpen] = (0, react_1.useState)(false);
+    const [filterListAddFilterPopoverIsOpen, setFilterListAddFilterPopoverIsOpen,] = (0, react_1.useState)(false);
+    const [uniqueCounter, setUniqueCounter] = (0, react_1.useState)(0);
+    const [userFilters, setUserFilters] = (0, react_1.useState)([]);
+    const [adminFilters, setAdminFilters] = (0, react_1.useState)([]);
+    const customOperatorOptions = {
+        [Filter_1.FieldTypes.Numeric]: [
+            Filter_1.NumberOperator.EqualTo,
+            Filter_1.NumberOperator.NotEqualTo,
+            Filter_1.NumberOperator.GreaterThan,
+            Filter_1.NumberOperator.LessThan,
+            Filter_1.NumberOperator.GreaterThanOrEqualTo,
+            Filter_1.NumberOperator.LessThanOrEqualTo,
+            Filter_1.NullOperator.IsNotNull,
+            Filter_1.NullOperator.IsNull,
+        ],
+        [Filter_1.FieldTypes.String]: [
+            Filter_1.StringOperator.IsExactly,
+            Filter_1.StringOperator.IsNotExactly,
+            Filter_1.StringOperator.Contains,
+            Filter_1.StringOperator.Is,
+            Filter_1.StringOperator.IsNot,
+            Filter_1.NullOperator.IsNotNull,
+            Filter_1.NullOperator.IsNull,
+        ],
+        [Filter_1.FieldTypes.Boolean]: [
+            Filter_1.BoolOperator.EqualTo,
+            Filter_1.BoolOperator.NotEqualTo,
+            Filter_1.NullOperator.IsNotNull,
+            Filter_1.NullOperator.IsNull,
+        ],
+    };
+    const getSchema = async () => {
+        const { schemaData } = await (0, schema_1.getSchemaInfoWithCustomFields)(client);
+        setSchema(schemaData);
+        setSchemaLoading(false);
+    };
+    (0, react_1.useEffect)(() => {
+        if (client && !schemaLoading) {
+            setSchemaLoading(true);
+            getSchema();
+        }
+    }, [client.publicKey]);
     (0, react_1.useEffect)(() => {
         setIsLoading(isDataLoading);
     }, [isDataLoading]);
     (0, react_1.useEffect)(() => {
         if (!data)
             return;
-        onDashboardDataChange(data);
-    }, [data, filters]);
+        onDashboardDataChange(data, schema);
+    }, [data, filters, schema]);
     (0, react_1.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
+    (0, react_1.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]);
+    (0, react_1.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 (0, ast_1.isTextColumnType)(column.fieldType);
+        })
+            .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await (0, tableProcessing_1.getCountsByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, []);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await (0, tableProcessing_1.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) => (0, filterProcessing_1.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) {
@@ -184,7 +324,11 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
         // 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
@@ -206,12 +350,7 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
     };
     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) {
@@ -224,7 +363,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') {
@@ -254,17 +393,16 @@ 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 (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 {
@@ -375,6 +513,37 @@ function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithComb
             }
         }
     };
+    // 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]);
+    };
     (0, react_1.useEffect)(() => {
         if (dashboardSections && dashboard) {
             const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
@@ -415,12 +584,72 @@ 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 && 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: 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)
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, ...(0, styles_1.styleToProps)(containerStyle), children: [filterSchemaIsLoaded &&
+                !hideAdminErrors &&
+                !hideFilters &&
+                filterSchema &&
+                filterSchema.columns.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 10 }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.QuillErrorMessageComponent, { errorMessage: "Warning: No custom filter options because there are no common views among the charts in the dashboard" }) })), !hideFilters && ((0, jsx_runtime_1.jsxs)(FilterContainerComponent, { children: [adminFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                    if (fieldValuesIsLoaded) {
+                                        setAddFilterPopoverIsOpen(true);
+                                        setFilterListIsOpen(false);
+                                    }
+                                }, label: `Add Filter` }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: (0, jsx_runtime_1.jsx)(FilterModal_1.default, { 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 && ((0, jsx_runtime_1.jsx)(UserFilterModalComponent, { triggerLabel: `Filters${userFilters.length > 0 ? ` (${userFilters.length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'start',
+                            }, children: [userFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(ui_1.FilterPopoverWrapper, { schema: filterSchema, filter: {
+                                        name: filter.name,
+                                        type: filter.type,
+                                        field: filter.field,
+                                        operator: filter.operator,
+                                        value: filter.value,
+                                    }, filterLabel: filter ? (0, filterProcessing_1.filterSentence)(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal_1.default, 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}`))), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                if (fieldValuesIsLoaded) {
+                                                    setFilterListAddFilterPopoverIsOpen(true);
+                                                }
+                                            }, label: `Add Filter` }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: (0, jsx_runtime_1.jsx)(FilterModal_1.default, { 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;
             })
@@ -434,30 +663,27 @@ 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: appliedFilters, 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, { item: item, filters: appliedFilters, children: ({ isLoading, error, data }) => ((0, jsx_runtime_1.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 && ((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: appliedFilters, 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
+                                            : () => { } }, item.name + '' + index)) }, `${item._id}${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, { item: item, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: appliedFilters, children: ({ isLoading, data, error, dateBucket, }) => ((0, jsx_runtime_1.jsx)(ChartComponent, { report: data, 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.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 && ((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
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement })) }, item.name + '' + index)) }, `${item._id}${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, { item: item, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => ((0, jsx_runtime_1.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));
             })] }));
 }
 exports.default = Dashboard;

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,6FA6NpB,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);
@@ -83,32 +82,6 @@ const DateRangePicker = react_1.default.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') {
@@ -140,7 +113,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"}