@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/components/DateRangePicker/SingleDatePicker.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { startOfMonth, endOfMonth, format, eachDayOfInterval, addMonths, subMonths, } from 'date-fns';
+import { createPortal } from 'react-dom';
+import useOnClickOutside, { getEffectiveZIndex, } from '../../hooks/useOnClickOutside';
+import { useAdmin } from '../../AdminProvider';
+export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreYear = true, }) {
+    const { state } = useAdmin();
+    const { theme } = state;
+    const [currentMonth, setCurrentMonth] = useState(selectedDate || new Date());
+    const [showModal, setShowModal] = useState(false);
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    const [z, setZ] = useState(10);
+    const modalRef = useRef(null);
+    const buttonRef = useRef(null);
+    // const scrollableParentRef = useRef<HTMLElement | Window>(document.body);
+    // Handle clicks outside the modal
+    useOnClickOutside(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    // Update position based on button
+    const updatePosition = () => {
+        if (buttonRef.current) {
+            requestAnimationFrame(() => {
+                const rect = buttonRef.current?.getBoundingClientRect();
+                if (rect) {
+                    setPopoverPosition({
+                        top: rect.bottom + window.scrollY,
+                        left: rect.left + window.scrollX,
+                    });
+                }
+            });
+        }
+    };
+    // Setup position tracking when modal opens
+    useEffect(() => {
+        let resizeObserver;
+        let mutationObserver;
+        const handlePositionUpdate = () => {
+            if (showModal) {
+                updatePosition();
+            }
+        };
+        if (showModal && buttonRef.current) {
+            updatePosition();
+            setZ(getEffectiveZIndex(buttonRef.current));
+            // Observe size changes of button
+            resizeObserver = new ResizeObserver(handlePositionUpdate);
+            resizeObserver.observe(buttonRef.current);
+            // Observe DOM mutations that might affect position
+            mutationObserver = new MutationObserver(handlePositionUpdate);
+            mutationObserver.observe(document.body, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            });
+            // Track scrolling of the entire document
+            window.addEventListener('scroll', handlePositionUpdate, true);
+            // Handle window resize
+            window.addEventListener('resize', handlePositionUpdate, {
+                passive: true,
+            });
+            return () => {
+                resizeObserver.disconnect();
+                mutationObserver.disconnect();
+                window.removeEventListener('scroll', handlePositionUpdate, true);
+                window.removeEventListener('resize', handlePositionUpdate);
+            };
+        }
+    }, [showModal]);
+    const handleDateSelect = (date) => {
+        // If ignoreYear is false and the user clicks on the already selected date, deselect it
+        if (!ignoreYear &&
+            selectedDate &&
+            date.toDateString() === selectedDate.toDateString()) {
+            onChangeDate(undefined);
+        }
+        else {
+            onChangeDate(date);
+        }
+        setShowModal(false);
+    };
+    const daysInMonth = eachDayOfInterval({
+        start: startOfMonth(currentMonth),
+        end: endOfMonth(currentMonth),
+    });
+    const incrementMonth = () => {
+        const nextMonth = addMonths(currentMonth, 1);
+        if (ignoreYear &&
+            nextMonth.getFullYear() === currentMonth.getFullYear() &&
+            nextMonth.getMonth() === 0) {
+            return;
+        }
+        setCurrentMonth(nextMonth);
+    };
+    const decrementMonth = () => {
+        const prevMonth = subMonths(currentMonth, 1);
+        if (ignoreYear &&
+            prevMonth.getFullYear() === currentMonth.getFullYear() &&
+            prevMonth.getMonth() === 11) {
+            return;
+        }
+        setCurrentMonth(prevMonth);
+    };
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: 200,
+            minWidth: 200,
+            borderRadius: '6px',
+            ...style,
+        }, children: [_jsxs("button", { ref: buttonRef, style: {
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    borderColor: theme?.borderColor,
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    backgroundColor: disabled
+                        ? theme?.hoverBackgroundColor
+                        : theme?.backgroundColor,
+                    padding: '8px 12px',
+                    fontSize: 14,
+                    margin: 0,
+                    boxSizing: 'border-box',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderRadius: 6,
+                    paddingTop: 11,
+                    paddingBottom: 11,
+                    height: 40,
+                    minHeight: 40,
+                    maxHeight: 40,
+                    gap: 10,
+                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
+                        ? selectedDate
+                            ? `Start on ${format(selectedDate, 'MMM dd')}`
+                            : 'Select Date'
+                        : selectedDate
+                            ? `back to ${format(selectedDate, 'MMM dd, yyyy')}`
+                            : 'Select Cutoff Date'] }), showModal &&
+                createPortal(_jsxs("div", { ref: modalRef, "data-portal-ignore": "true", style: {
+                        position: 'absolute',
+                        top: `${popoverPosition?.top ?? 0}px`,
+                        left: `${popoverPosition?.left ?? 0}px`,
+                        visibility: popoverPosition ? 'visible' : 'hidden',
+                        zIndex: z,
+                        borderWidth: theme.borderWidth,
+                        borderColor: theme.borderColor,
+                        borderStyle: 'solid',
+                        borderRadius: 6,
+                        backgroundColor: '#fff',
+                        padding: 12,
+                        boxShadow: '0px 2px 6px #e7e7e7',
+                        // Allow the popover to size to its content
+                        width: 'auto',
+                        minWidth: 280,
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                position: 'relative',
+                            }, children: [_jsxs("button", { onClick: decrementMonth, style: {
+                                        height: 32,
+                                        width: 32,
+                                        borderWidth: theme.borderWidth,
+                                        borderColor: theme.borderColor,
+                                        fontFamily: theme.fontFamily,
+                                        borderStyle: 'solid',
+                                        borderRadius: 6,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        visibility: ignoreYear && currentMonth.getMonth() === 0
+                                            ? 'hidden'
+                                            : 'visible',
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        fontSize: 14,
+                                        color: theme.primaryTextColor,
+                                        fontWeight: 600,
+                                        position: 'absolute',
+                                        left: '50%',
+                                        transform: 'translateX(-50%)',
+                                        userSelect: 'none',
+                                    }, children: format(currentMonth, ignoreYear ? 'MMMM' : 'MMMM yyyy') }), _jsxs("button", { onClick: incrementMonth, style: {
+                                        height: 32,
+                                        width: 32,
+                                        borderWidth: theme.borderWidth,
+                                        borderColor: theme.borderColor,
+                                        borderStyle: 'solid',
+                                        borderRadius: 6,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        visibility: ignoreYear && currentMonth.getMonth() === 11
+                                            ? 'hidden'
+                                            : 'visible',
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(7, 1fr)',
+                                marginTop: 8,
+                            }, children: daysInMonth.map((date) => (_jsx("button", { style: {
+                                    height: 36,
+                                    width: 36,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontFamily: theme.fontFamily,
+                                    fontSize: 14,
+                                    border: 'none',
+                                    color: selectedDate &&
+                                        date.toDateString() === selectedDate.toDateString()
+                                        ? 'white'
+                                        : theme.secondaryTextColor,
+                                    backgroundColor: selectedDate &&
+                                        date.toDateString() === selectedDate.toDateString()
+                                        ? theme.primaryTextColor
+                                        : theme.backgroundColor,
+                                    borderRadius: selectedDate &&
+                                        date.toDateString() === selectedDate.toDateString()
+                                        ? 6
+                                        : 0,
+                                }, onClick: () => handleDateSelect(date), children: format(date, 'd') }, date.toDateString()))) })] }), document.body)] }));
+}

package/dist/esm/components/DateRangePicker/YearlessDateRangePicker.d.ts

@@ -0,0 +1,18 @@
+export interface DateRangePickerComponentProps {
+    label?: string;
+    dateRange: {
+        startDate?: Date;
+        endDate?: Date;
+    };
+    onChangeDateRange: ({ startDate, endDate, }: {
+        startDate?: Date;
+        endDate?: Date;
+    }) => void;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
+export declare function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, disabled, style, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=YearlessDateRangePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"YearlessDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/YearlessDateRangePicker.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,CAAC,EAAE,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,CAAC,EAAE,IAAI,CAAC;QACjB,OAAO,CAAC,EAAE,IAAI,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,6BAA6B,2CAmI/B"}

package/dist/esm/components/DateRangePicker/YearlessDateRangePicker.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { startOfMonth, endOfMonth, format, eachDayOfInterval, subMonths, differenceInDays, startOfDay, addMonths, isBefore, isAfter, } from 'date-fns';
+import { useAdmin } from '../../AdminProvider';
+import useOnClickOutside from '../../hooks/useOnClickOutside';
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
+export function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, disabled, style, }) {
+    const { state: { theme }, } = useAdmin();
+    const [anchorStartDate, setAnchorStartDate] = useState(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
+    const [anchorEndDate, setAnchorEndDate] = useState(getAnchorEndDate(dateRange.startDate, dateRange.endDate));
+    const [localStartDate, setLocalStartDate] = useState(dateRange.startDate);
+    const [localEndDate, setLocalEndDate] = useState(dateRange.endDate);
+    const [showModal, setShowModal] = useState(false);
+    const modalRef = useRef(null);
+    useOnClickOutside(modalRef, () => {
+        setShowModal(false);
+    }, showModal);
+    useEffect(() => {
+        setLocalEndDate(dateRange.endDate);
+        setLocalStartDate(dateRange.startDate);
+    }, [dateRange.startDate, dateRange.endDate]);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 12,
+            alignItems: 'flex-end',
+            flexWrap: 'wrap',
+            ...style,
+        }, children: _jsxs("div", { style: { position: 'relative', width: 200 }, ref: modalRef, children: [label && (_jsx("div", { style: {
+                        fontSize: 14,
+                        color: theme?.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        paddingBottom: 5,
+                        fontWeight: 600,
+                    }, children: label })), _jsxs("button", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        borderColor: theme?.borderColor,
+                        fontFamily: theme?.fontFamily,
+                        color: theme?.primaryTextColor,
+                        backgroundColor: disabled
+                            ? theme?.hoverBackgroundColor
+                            : theme?.backgroundColor,
+                        padding: '8px 12px',
+                        fontSize: 14,
+                        margin: 0,
+                        boxSizing: 'border-box',
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        borderRadius: 6,
+                        paddingTop: 11,
+                        paddingBottom: 11,
+                        height: 40,
+                        minHeight: 40,
+                        maxHeight: 40,
+                        gap: 10,
+                    }, disabled: disabled, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: (date) => {
+                        setLocalStartDate(date);
+                    }, setLocalEndDate: (date) => {
+                        setLocalEndDate(date);
+                    }, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setShowModal: setShowModal }))] }) }));
+}
+function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, }) {
+    const firstMonthDisplayedDates = eachDayOfInterval({
+        start: startOfMonth(anchorStartDate),
+        end: endOfMonth(anchorStartDate),
+    });
+    const secondMonthDisplayedDates = eachDayOfInterval({
+        start: startOfMonth(anchorEndDate),
+        end: endOfMonth(anchorEndDate),
+    });
+    const incrementAnchorDates = () => {
+        setAnchorStartDate(startOfMonth(addMonths(anchorStartDate, 1)));
+        setAnchorEndDate(endOfMonth(addMonths(anchorEndDate, 1)));
+    };
+    const decrementAnchorDates = () => {
+        setAnchorStartDate(startOfMonth(subMonths(anchorStartDate, 1)));
+        setAnchorEndDate(endOfMonth(subMonths(anchorEndDate, 1)));
+    };
+    const [firstClick, setFirstClick] = useState(true);
+    return (_jsx("div", { style: { position: 'absolute', zIndex: 100, marginTop: 10, right: 0 }, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                border: `1px solid ${theme.borderColor}`,
+                borderRadius: 6,
+                boxShadow: '0px 2px 6px #e7e7e7',
+                backgroundColor: theme.backgroundColor,
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: 12,
+                        // border: "1px solid #e7e7e7",
+                        // borderRadius: 6,
+                        // boxShadow: "0px 2px 6px #e7e7e7",
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                position: 'relative',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: 40,
+                                marginBottom: 10,
+                            }, children: [_jsxs("button", { onClick: decrementAnchorDates, style: {
+                                        position: 'absolute',
+                                        left: 0,
+                                        height: 32,
+                                        width: 32,
+                                        borderWidth: theme.borderWidth,
+                                        borderColor: theme.borderColor,
+                                        fontFamily: theme.fontFamily,
+                                        borderStyle: 'solid',
+                                        borderRadius: 6,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        visibility: anchorStartDate.getMonth() === 0 ? 'hidden' : 'visible',
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        fontSize: 14,
+                                        color: theme.primaryTextColor,
+                                        fontWeight: 600,
+                                    }, children: format(anchorStartDate, 'MMMM') })] }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(7, 1fr)',
+                                rowGap: 8,
+                            }, children: firstMonthDisplayedDates.map((date) => (_jsx(DayPicker, { theme: theme, date: date, localStartDate: localStartDate, localEndDate: localEndDate, setLocalStartDate: (date) => {
+                                    setLocalStartDate(date);
+                                    setFirstClick(false);
+                                }, setLocalEndDate: (date) => {
+                                    setLocalEndDate(date);
+                                    setFirstClick(false);
+                                }, updateDateFilter: updateDateFilter, firstClick: firstClick }, 'first-' + date.toISOString()))) })] }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: 12,
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                position: 'relative',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: 40,
+                                marginBottom: 10,
+                            }, children: [_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        fontSize: 14,
+                                        color: theme.primaryTextColor,
+                                        fontWeight: 600,
+                                    }, children: format(anchorEndDate, 'MMMM') }), _jsxs("button", { onClick: incrementAnchorDates, style: {
+                                        position: 'absolute',
+                                        right: 0,
+                                        height: 32,
+                                        width: 32,
+                                        borderWidth: theme.borderWidth,
+                                        borderColor: theme.borderColor,
+                                        borderStyle: 'solid',
+                                        borderRadius: 6,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        visibility: anchorStartDate.getMonth() === 10 ? 'hidden' : 'visible',
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(7, 1fr)',
+                                rowGap: 8,
+                            }, children: secondMonthDisplayedDates.map((date) => (_jsx(DayPicker, { theme: theme, date: date, localStartDate: localStartDate, localEndDate: localEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, updateDateFilter: updateDateFilter, firstClick: firstClick }, 'second-' + date.toISOString()))) })] })] }) }));
+}
+function DayPicker({ date, localStartDate, setLocalStartDate, localEndDate, setLocalEndDate, updateDateFilter, theme, firstClick, }) {
+    // USE ZERO FOR UNDEFINED DATES
+    const isStartDate = differenceInDays(startOfDay(date), startOfDay(localStartDate || 0)) === 0;
+    const isEndDate = differenceInDays(startOfDay(date), startOfDay(localEndDate || 0)) === 0;
+    const isBetweenStartAndEnd = isBefore(date, localEndDate || 0) && isAfter(date, localStartDate || 0);
+    const isBeginningOfWeek = date.getDate() % 7 === 1;
+    // last day of the week OR last day of the month
+    const isEndOfWeek = date.getDate() % 7 === 0 || date.getDate() === endOfMonth(date).getDate();
+    return (_jsx("button", { style: {
+            height: 36,
+            width: 36,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: theme.fontFamily,
+            fontSize: 14,
+            border: 'none',
+            color: isStartDate || isEndDate ? 'white' : theme.secondaryTextColor,
+            borderTopLeftRadius: isStartDate || isEndDate || isBeginningOfWeek ? 6 : 0,
+            borderBottomLeftRadius: isStartDate || isEndDate || isBeginningOfWeek ? 6 : 0,
+            borderTopRightRadius: isStartDate || isEndDate || isEndOfWeek ? 6 : 0,
+            borderBottomRightRadius: isStartDate || isEndDate || isEndOfWeek ? 6 : 0,
+            backgroundColor: isStartDate || isEndDate
+                ? theme.primaryTextColor
+                : isBetweenStartAndEnd
+                    ? theme.hoverBackgroundColor
+                    : theme.backgroundColor,
+        }, onClick: () => {
+            if (!localStartDate) {
+                setLocalStartDate(date);
+                updateDateFilter({
+                    startDate: date,
+                    endDate: localEndDate || date,
+                });
+            }
+            else if (localStartDate && !localEndDate) {
+                setLocalEndDate(date);
+                updateDateFilter({
+                    startDate: localStartDate,
+                    endDate: date,
+                });
+            }
+            else if (firstClick) {
+                setLocalStartDate(date);
+                setLocalEndDate(undefined);
+                updateDateFilter({
+                    startDate: date,
+                    endDate: undefined,
+                });
+            }
+            else if (localStartDate &&
+                localEndDate &&
+                isAfter(date, localStartDate)) {
+                setLocalEndDate(date);
+                updateDateFilter({
+                    startDate: localStartDate,
+                    endDate: date,
+                });
+            }
+            else if (localStartDate &&
+                localEndDate &&
+                isBefore(date, localStartDate)) {
+                setLocalStartDate(date);
+                updateDateFilter({
+                    startDate: date,
+                    endDate: localEndDate,
+                });
+            }
+            else if (localStartDate &&
+                localEndDate &&
+                differenceInDays(startOfDay(date), startOfDay(localStartDate)) === 0) {
+                setLocalStartDate(undefined);
+                setLocalEndDate(undefined);
+                updateDateFilter({
+                    startDate: undefined,
+                    endDate: undefined,
+                });
+            }
+        }, children: format(date, 'd') }));
+}
+function getAnchorStartDate(startDate, endDate) {
+    if (!startDate && !endDate) {
+        return startOfMonth(subMonths(new Date(), 1));
+    }
+    if (startDate && !endDate) {
+        return startOfMonth(startDate);
+    }
+    if (!startDate && endDate) {
+        return startOfMonth(subMonths(endDate, 1));
+    }
+    if (startDate && endDate) {
+        return startOfMonth(startDate);
+    }
+    return new Date();
+}
+function getAnchorEndDate(startDate, endDate) {
+    if (!startDate && !endDate) {
+        return endOfMonth(new Date());
+    }
+    if (startDate && !endDate) {
+        return endOfMonth(addMonths(startDate, 1));
+    }
+    if (!startDate && endDate) {
+        return endOfMonth(endDate);
+    }
+    if (startDate && endDate) {
+        return endOfMonth(addMonths(startDate, 1));
+    }
+    return new Date();
+}

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

@@ -0,0 +1,91 @@
+import { QuillCustomInterval } from '@quillsql/react';
+export declare const getWeekdays: (locale: Locale) => string[];
+export declare const capitalize: (s: string, locale: Locale) => string;
+export type DateRangePickerOption = {
+    value: string;
+    text: string;
+    startDate?: Date;
+    endDate?: Date;
+    dayInterval?: number;
+};
+export declare const getStartDateByDropdownValue: (dropdownValue: string | null | undefined, dropdownOptions?: DateRangePickerOption[]) => Date | null;
+export declare const getEndDateByDropdownValue: (dropdownValue: string | null | undefined, dropdownOptions?: DateRangePickerOption[]) => Date;
+export declare const parseStartDate: (startDate: Date | null | undefined, minDate: Date | null | undefined, selectedDropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date | null;
+export declare const parseEndDate: (endDate: Date | null | undefined, maxDate: Date | null | undefined, selectedDropdownValue: string | null | undefined, dropdownOptions: DateRangePickerOption[]) => Date | null;
+/**
+ * A simple date range that spans from start to end.
+ */
+type QuillDateRange = {
+    startDate: Date;
+    endDate: Date;
+};
+export declare const primaryRangeCustomIntervals: QuillCustomInterval[];
+export declare const convertPresetOptionsToSelectableList: (customIntervals: QuillCustomInterval[], defaultIntervals: {
+    label: string;
+    loopStart?: Date;
+    loopEnd?: Date;
+}[]) => {
+    label: string;
+    value: string;
+    startDate?: Date;
+    endDate?: Date;
+}[];
+/**
+ * A simple map between the primary range key and the QuillDateRange for that
+ * key ending on today.
+ */
+export declare const PRIMARY_RANGE: {
+    [key: string]: {
+        startDate?: Date;
+        endDate?: Date;
+    };
+};
+export declare const COMPARISON_OPTIONS: {
+    value: string;
+    text: string;
+}[];
+/**
+ * A helpful map between comparison range keys and a function that takes the
+ * start date of the primary range (which is also the end date for our
+ * comparison range) and returns a QuillDateRange based on that key and date.
+ */
+export declare const COMPARISON_RANGE: {
+    readonly PREV_PERIOD: ({ startDate, endDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
+    };
+    readonly PREV_7_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
+    };
+    readonly PREV_30_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
+    };
+    readonly PREV_90_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
+    };
+    readonly NO_COMPARISON: () => null;
+};
+export type ComparisonRangeKey = keyof typeof COMPARISON_RANGE;
+export declare const defaultOptionsV2: any[];
+export declare const reportBuilderOptions: DateRangePickerOption[];
+export declare const getRangeFromPresetOptions: (preset: string, presetOptions: {
+    label: string;
+    value: string;
+    startDate: Date;
+    endDate: Date;
+}[]) => {
+    startDate: Date;
+    endDate: Date;
+} | {
+    startDate: null;
+    endDate: null;
+};
+export declare const getDateStyles: (theme: any, date: Date, finalStartDate: Date | null, finalEndDate: Date | null, hoveredDate: Date | undefined, isDateDisabled: boolean) => any;
+export declare const displaySelected: (selectedStartDay: Date | null, selectedEndDay: Date | null) => string | undefined;
+export declare const formatSelectedDates: (startDate: Date | null, endDate: Date | null, locale?: Locale) => string;
+export declare function hexToRgbaWith10PercentAlpha(hex: any): string;
+export {};
+//# sourceMappingURL=dateRangePickerUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/dateRangePickerUtils.ts"],"names":[],"mappings":"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"}