@quillsql/react 2.10.31 → 2.10.32

package/dist/cjs/Dashboard.js

@@ -0,0 +1,498 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardFilter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Chart_1 = __importDefault(require("./Chart"));
+const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
+const Context_1 = require("./Context");
+const assets_1 = require("./assets");
+const useDashboard_1 = require("./hooks/useDashboard");
+const crypto_1 = require("./utils/crypto");
+const DashboardSectionContainer_1 = __importDefault(require("./components/Dashboard/DashboardSectionContainer"));
+const MetricComponent_1 = __importDefault(require("./components/Dashboard/MetricComponent"));
+const TableComponent_1 = __importDefault(require("./components/Dashboard/TableComponent"));
+const ChartComponent_1 = __importDefault(require("./components/Dashboard/ChartComponent"));
+const DashboardSection_1 = __importDefault(require("./components/Dashboard/DashboardSection"));
+const styles_1 = require("./utils/styles");
+const dashboard_1 = require("./utils/dashboard");
+const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
+const DataLoader_1 = __importDefault(require("./components/Dashboard/DataLoader"));
+const QuillSelect_1 = require("./components/QuillSelect");
+const ChartSkeleton_1 = __importDefault(require("./components/Chart/ChartSkeleton"));
+function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
+    const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
+    const { setDateFilter } = (0, Context_1.useDateFilter)();
+    const [filterValue, setFilterValue] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (filter.filterType === 'string') {
+            setFilterValue(filter.selectedValue);
+        }
+        if (filter.filterType == 'date_range') {
+            setDateFilter(filter.preset.label);
+            if (filter?.comparisonRange?.value) {
+                const newComparisonRange = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
+                    return option.value === filter.comparisonRange.value;
+                });
+                setComparisonRange(newComparisonRange);
+            }
+            else {
+                setComparisonRange(null);
+            }
+        }
+    }, [filter]);
+    if (filter.filterType === 'string') {
+        return ((0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
+                onChangeFilter(filter, e);
+            }, options: [
+                ...filter.options.map((elem) => {
+                    return {
+                        label: elem[filter.labelField],
+                        value: elem[filter.field],
+                    };
+                }),
+            ] }));
+    }
+    if (filter.filterType == 'date_range') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-end',
+            }, children: [(0, jsx_runtime_1.jsx)(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
+                        onChangeFilter(filter, {
+                            startDate: value.startDate,
+                            endDate: value.endDate,
+                        });
+                    }, onChangePreset: (value) => {
+                        onChangeFilter(filter, { preset: value });
+                    }, presetOptions: filter.options.map((option) => {
+                        return { label: option.label, value: option.label };
+                    }) }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 12,
+                                    color: theme?.secondaryTextColor,
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: 14,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    flex: 1,
+                                    minWidth: 80,
+                                    justifyContent: 'center',
+                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
+                                    onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
+                                        return option.value === e;
+                                    }));
+                                }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => {
+                                    return {
+                                        value: compareOption.value,
+                                        label: compareOption.text,
+                                    };
+                                }) })] }) }))] }));
+    }
+    return null;
+}
+exports.DashboardFilter = DashboardFilter;
+const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const handleOnChange = (0, react_1.useCallback)((event) => {
+        onChange(event.target.value);
+    }, [onChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    marginBottom: 6,
+                    fontWeight: theme.labelFontWeight || '600',
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    fontSize: 14,
+                }, children: label })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsxs)("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
+                        // defaultValue="Select"
+                        style: {
+                            width: '100%',
+                            WebkitAppearance: 'none',
+                            minWidth: 230,
+                            outline: 'none',
+                            textAlign: 'left',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            borderRadius: 6,
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                            height: 38,
+                            borderWidth: theme.borderWidth,
+                            borderColor: theme.borderColor,
+                            background: theme.backgroundColor,
+                            color: theme.primaryTextColor,
+                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                            fontFamily: theme.fontFamily,
+                            fontSize: 14,
+                            fontWeight: 500,
+                            boxSizing: 'border-box',
+                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select" }), options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index)))] }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                            height: '20px',
+                            width: '20px',
+                            flex: 'none',
+                            position: 'absolute',
+                            right: 8,
+                            top: 9,
+                            color: theme?.secondaryTextColor,
+                        }, "aria-hidden": "true" })] })] }));
+};
+const MemoizedDropdown = (0, react_1.memo)(QuillDropdownComponent);
+const areEqual = (prevProps, nextProps) => {
+    // This function returns true if passing nextProps to render would return
+    // the same result as passing prevProps to render, otherwise it returns false
+    return (prevProps.dateRange.startDate === nextProps.dateRange.startDate &&
+        prevProps.dateRange.endDate === nextProps.dateRange.endDate);
+};
+const MemoizedDateRangePicker = (0, react_1.memo)(QuillDateRangePicker_1.QuillDateRangePicker, areEqual);
+const QuillEmptyDashboardComponent = () => (0, jsx_runtime_1.jsx)("div", {});
+const defaultChartContainerStyles = {
+    display: 'flex',
+    width: '100%',
+    minHeight: 300,
+    height: 300,
+};
+/**
+ * Quill Dashboard.
+ */
+function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, SkeletonComponent = ChartSkeleton_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, DashboardSectionComponent = DashboardSection_1.default, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+    const { dateFilter } = (0, Context_1.useDateFilter)();
+    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
+    const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
+    const [presetFilters, setPresetFilters] = (0, react_1.useState)(null);
+    const { dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(isDataLoading);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const { setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
+    (0, react_1.useEffect)(() => {
+        setIsLoading(isDataLoading);
+    }, [isDataLoading]);
+    (0, react_1.useEffect)(() => {
+        if (!data)
+            return;
+        onDashboardDataChange(data);
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        reload();
+    }, [name, client]);
+    const onDashboardDataChange = (resp) => {
+        setDashboardSections(resp.sections);
+        setInitialLoad(false);
+        const bigFilterObj = {};
+        if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
+            let presetsOptions = dateRangePickerUtils_1.defaultOptionsV2;
+            if (resp.dateFilter.presetRanges) {
+                presetsOptions = resp.dateFilter.presetRanges.map((elem) => {
+                    if (!elem.isStatic) {
+                        return {
+                            label: elem.label,
+                            value: elem.value,
+                            startDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value].start,
+                            endDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value].end,
+                        };
+                    }
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: new Date(elem.startDate),
+                        endDate: new Date(elem.endDate),
+                    };
+                });
+            }
+            setPresetFilters(presetsOptions);
+            const key = resp.dateFilter?.primaryRange?.value || 'LAST_6_MONTHS';
+            const primaryPreset = presetsOptions.find((option) => {
+                return option.value === key;
+            });
+            const filter = {
+                startDate: primaryPreset.startDate,
+                endDate: primaryPreset.endDate,
+                filterType: 'date_range',
+                options: presetsOptions.map((elem) => {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                    };
+                }),
+                field: 'date_range',
+                label: 'Date',
+                preset: {
+                    label: primaryPreset.label,
+                },
+            };
+            if (resp.dateFilter.comparison) {
+                filter.comparison = true;
+                const compKey = resp.dateFilter.defaultComparisonRange ?? 'PREV_PERIOD';
+                const range = { start: filter.startDate, end: filter.endDate };
+                filter.comparisonRange = {
+                    startDate: dateRangePickerUtils_1.COMPARISON_RANGE[compKey](range)?.start,
+                    endDate: dateRangePickerUtils_1.COMPARISON_RANGE[compKey](range)?.end,
+                    value: compKey,
+                };
+            }
+            else {
+                filter.comparison = false;
+            }
+            if ((0, crypto_1.hashCode)(JSON.stringify(dashboardFilters?.date_range ?? '')) !==
+                (0, crypto_1.hashCode)(JSON.stringify(filter))) {
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: filter,
+                });
+            }
+            bigFilterObj[filter.field] = filter;
+            setDateFilter(presetsOptions.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.label ?? null);
+        }
+        if (resp.filters && resp.filters.length) {
+            Object.values(resp.filters)
+                .filter((filter) => filter.filterType !== 'date')
+                .forEach((filter) => {
+                bigFilterObj[filter.field] = processFilter(filter);
+            });
+        }
+        if ((0, crypto_1.hashCode)(JSON.stringify(dashboardFilters)) !==
+            (0, crypto_1.hashCode)(JSON.stringify(bigFilterObj))) {
+            dashboardFiltersDispatch({
+                type: 'ADD_DASHBOARD_FILTERS',
+                id: 'tons',
+                data: bigFilterObj,
+            });
+        }
+    };
+    const handleOnClickDashboardItem = (elem) => {
+        if (dashboard[elem._id]?._id && onClickDashboardItem) {
+            onClickDashboardItem(dashboard[elem._id]);
+        }
+        else if (onClickDashboardItem) {
+            dispatch({
+                type: 'UPDATE_DASHBOARD_ITEM',
+                id: elem._id,
+                data: { ...elem, filtersApplied: dashboardFilters },
+            });
+            onClickDashboardItem({
+                ...dashboard[elem._id],
+                _id: elem._id,
+                error_id: elem._id,
+                name: elem.name,
+                query: elem.queryString,
+            });
+        }
+    };
+    function removeQuotes(str) {
+        if (str.startsWith('"') && str.endsWith('"')) {
+            return str.slice(1, -1);
+        }
+        else {
+            return str;
+        }
+    }
+    const processFilter = (filter, value = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            return {
+                ...filterWithoutSelectedValue,
+                ...(selectedValue ? { selectedValue } : {}),
+            };
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            return {
+                startDate: value ? value[0] : filter.startDate,
+                endDate: value ? value[1] : filter.endDate,
+                filterType: 'date_range',
+                label: 'Date',
+                field: 'date_range',
+                options: filter.options,
+            };
+        }
+    };
+    const updateFilter = (filter, value = null, comparison = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            dashboardFiltersDispatch({
+                type: 'ADD_DASHBOARD_FILTER',
+                id: filter.field,
+                data: {
+                    ...filterWithoutSelectedValue,
+                    ...(selectedValue ? { selectedValue } : {}),
+                },
+            });
+            return;
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (comparison ||
+                (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+                let preset = '';
+                if (comparison) {
+                    preset = filter.preset.label;
+                }
+                const key = comparison?.value || filter.comparisonRange.value;
+                let primaryRange = {
+                    start: value ? value.startDate : filter.startDate,
+                    end: value ? value.endDate : filter.endDate,
+                };
+                if (value && value.preset) {
+                    preset = value.preset;
+                    primaryRange = (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetFilters);
+                }
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: {
+                        startDate: primaryRange.start,
+                        endDate: primaryRange.end,
+                        filterType: 'date_range',
+                        label: 'Date',
+                        field: 'date_range',
+                        preset: { label: preset },
+                        options: filter.options,
+                        comparison: true,
+                        comparisonRange: {
+                            startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
+                                ?.start,
+                            endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.end,
+                            value: key,
+                        },
+                    },
+                });
+            }
+            else {
+                const primaryRange = value.preset
+                    ? (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetFilters)
+                    : {
+                        start: value.startDate || filter.startDate,
+                        end: value.endDate || filter.endDate,
+                    };
+                const preset = value.preset ? value.preset : '';
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: {
+                        ...filter,
+                        preset: { label: preset },
+                        startDate: primaryRange.start,
+                        endDate: primaryRange.end,
+                        filterType: 'date_range',
+                        field: 'date_range',
+                        options: filter.options,
+                        label: 'Date',
+                    },
+                });
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (dashboardSections && dashboard) {
+            const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
+            const itemsLoaded = Object.keys(dashboard).length;
+            if (totalNumberOfItems === itemsLoaded && isLoading) {
+                setIsLoading(false);
+            }
+        }
+    }, [dashboard, dashboardSections, isLoading]);
+    (0, react_1.useEffect)(() => {
+        if (onChangeLoading) {
+            onChangeLoading(isLoading);
+        }
+    }, [isLoading, onChangeLoading]);
+    if (isLoading || initialLoad)
+        return null;
+    if (!dashboardSections || Object.keys(dashboardSections).length == 0)
+        return (0, jsx_runtime_1.jsx)(EmptyDashboardComponent, {});
+    const sortByOrdering = (a, b) => {
+        if (a.order === undefined && b.order === undefined)
+            return 0; // both items don't have the 'order' field
+        if (a.order === undefined)
+            return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+        if (b.order === undefined)
+            return -1; // only 'b' doesn't have the 'order' field, place 'b' last
+        return a.order - b.order; // both items have the 'order' field, sort numerically
+    };
+    const sortedFilters = Object.values(dashboardFilters)
+        .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
+        .filter((f) => !dateRangeFilterDisabled || f.filterType !== 'date_range');
+    const metrics = (section) => dashboardSections[section]
+        .filter(({ chartType }) => chartType === 'metric')
+        .sort(sortByOrdering);
+    const charts = (section) => dashboardSections[section]
+        .filter(({ chartType }) => !['metric', 'table'].includes(chartType))
+        .sort(sortByOrdering);
+    const tables = (section) => dashboardSections[section]
+        .filter(({ chartType }) => chartType === 'table')
+        .sort(sortByOrdering);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: '100%',
+                        marginBottom: 25,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 12,
+                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                            ? DateRangePickerComponent
+                            : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
+                .sort(function (a, b) {
+                return a.length - b.length;
+            })
+                .map((section, sectionIndex) => {
+                return ((0, jsx_runtime_1.jsxs)(DashboardSectionContainerComponent, { children: [section && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), (0, jsx_runtime_1.jsx)("h1", { style: {
+                                        fontSize: 22,
+                                        color: theme.primaryTextColor,
+                                        fontFamily: theme.fontFamily,
+                                        fontWeight: 'bold',
+                                        marginBottom: 16,
+                                        textAlign: 'left',
+                                        marginTop: 12,
+                                    }, children: section })] })), metrics(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { children: metrics(section).map((item, index) => {
+                                return ((0, jsx_runtime_1.jsx)(MetricComponent, { style: { minHeight: '180px' }, theme: theme, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                            display: 'flex',
+                                            width: '100%',
+                                            // height: '100%',
+                                        }, chartId: item._id, colors: theme.chartColors?.length
+                                            ? theme.chartColors
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index));
+                            }) })), charts(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(ChartComponent, { theme: theme, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                    ? () => handleOnClickDashboardItem(item)
+                                    : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
+                                        ? theme.chartColors
+                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index))) })), tables(section).length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                boxSizing: 'content-box',
+                                width: `100%`,
+                                gap: 20,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, name: item.name, TableComponent: TableComponent, SkeletonComponent: SkeletonComponent, handleOnClickDashboardItem: handleOnClickDashboardItem, onClickDashboardItem: onClickDashboardItem, theme: theme }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+            })] }));
+}
+exports.default = Dashboard;

package/dist/cjs/DateRangePicker/Calendar.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const colStartClasses: string[];
+export interface CalendarProps {
+    enableYearPagination: boolean;
+    anchorDate: Date;
+    setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
+    startDate: Date | null;
+    endDate: Date | null;
+    minDate: Date | null;
+    maxDate: Date | null;
+    onDateClick: (date: Date) => void;
+    locale: Locale;
+    theme: any;
+}
+export declare function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +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"}