@quillsql/react 2.10.31 → 2.10.33

package/dist/cjs/DateRangePicker/Calendar.js

@@ -0,0 +1,171 @@
+"use strict";
+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 = [
+    '',
+    'col-start-2',
+    'col-start-3',
+    'col-start-4',
+    'col-start-5',
+    'col-start-6',
+    'col-start-7',
+];
+const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth, locale, theme, }) => {
+    const firstDayOfMonth = (0, date_fns_1.startOfMonth)(anchorDate);
+    const handlePaginationClick = (type) => {
+        switch (type) {
+            case 'nextMonth':
+                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: 1 }));
+                break;
+            case 'prevMonth':
+                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: -1 }));
+                break;
+            case 'nextYear':
+                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: 1 }));
+                break;
+            case 'prevYear':
+                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: -1 }));
+                break;
+        }
+    };
+    const displayedTitle = (0, dateRangePickerUtils_1.capitalize)((0, date_fns_1.format)(firstDayOfMonth, 'MMMM yyyy', { locale }), locale);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '0.125rem',
+            paddingTop: '0.25rem',
+            paddingBottom: '0.25rem',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.25rem',
+                }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                        borderStyle: 'solid',
+                        borderBottomWidth: 1,
+                        borderBottomColor: theme?.borderColor || '#E5E7EB',
+                        background: theme?.backgroundColor || 'white',
+                        borderWidth: 1,
+                        fontFamily: theme?.fontFamily,
+                        borderColor: theme?.borderColor || '#E5E7EB',
+                        display: 'inline-flex',
+                        padding: '0.25rem',
+                        marginRight: '0.0625rem',
+                        fontSize: '14px',
+                        fontWeight: 500,
+                        borderRadius: '0.25rem',
+                        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                        outline: enableYearPagination ? 'none' : '2px solid transparent',
+                        outlineOffset: '2px',
+                        cursor: 'pointer',
+                    }, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowLeftHeadIcon, { style: {
+                            height: '1.25rem',
+                            width: '1.25rem',
+                            color: theme?.primaryTextColor || '#364153',
+                        }, "aria-hidden": "true" }) }) }), (0, jsx_runtime_1.jsx)("h2", { style: {
+                    color: theme?.textColor || '#364153',
+                    fontSize: '14px',
+                    fontFamily: theme?.fontFamily,
+                    fontWeight: '700',
+                }, children: displayedTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginRight: '0.25rem',
+                    marginLeft: '0.25rem',
+                }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                        borderStyle: 'solid',
+                        borderBottomWidth: 1,
+                        borderBottomColor: theme?.borderColor || '#E5E7EB',
+                        background: theme?.backgroundColor || 'white',
+                        borderWidth: 1,
+                        borderColor: theme?.borderColor || '#E5E7EB',
+                        fontFamily: theme?.fontFamily,
+                        display: 'inline-flex',
+                        padding: '0.25rem',
+                        marginRight: '0.0625rem',
+                        fontSize: '14px',
+                        fontWeight: 500,
+                        borderRadius: '0.25rem',
+                        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                        outline: enableYearPagination ? 'none' : '2px solid transparent',
+                        outlineOffset: '2px',
+                        cursor: 'pointer',
+                    }, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowRightHeadIcon, { style: {
+                            height: '1.25rem',
+                            width: '1.25rem',
+                            color: theme?.primaryTextColor || '#364153',
+                        }, "aria-hidden": "true" }) }) })] }));
+};
+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 displayedDates = (0, date_fns_1.eachDayOfInterval)({
+        start: (0, date_fns_1.isSunday)(firstDayOfDisplayedMonth)
+            ? firstDayOfDisplayedMonth
+            : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
+        end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
+            ? lastDayOfDisplayedMonth
+            : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
+    });
+    const isDateDisabled = (date, minDate, maxDate, firstDayDisplayedMonth, lastDayDisplayedMonth) => {
+        const isDateInDisplayedMonth = date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
+        return ((minDate !== null && date < minDate) ||
+            (maxDate !== null && date > maxDate) ||
+            !isDateInDisplayedMonth);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    color: theme?.primaryTextColor || '#364153',
+                    textAlign: 'center',
+                    fontSize: '0.75rem',
+                    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: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                            height: '2.25rem',
+                            fontFamily: theme?.fontFamily,
+                        }, children: dayName }) }, dayName))) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+                    paddingBottom: 8,
+                }, 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',
+                                height: '1.5rem',
+                                display: 'flex',
+                                width: '100%',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontFamily: theme?.fontFamily,
+                                ...(0, dateRangePickerUtils_1.getDateStyles)(theme, date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled),
+                            }, type: "button", onClick: () => {
+                                onDateClick(date);
+                            }, onPointerEnter: () => setHoveredDate?.(date), onPointerLeave: () => setHoveredDate?.(undefined), 
+                            // className={twMerge(fontSize.sm)}
+                            disabled: isCurrentDateDisabled, children: (0, jsx_runtime_1.jsx)("time", { dateTime: (0, date_fns_1.format)(date, 'yyyy-MM-dd', { locale }), children: (0, date_fns_1.format)(date, 'd', { locale }) }) }) }, date.toString()));
+                }) })] }));
+};
+function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            paddingLeft: '0.75rem',
+            paddingRight: '0.75rem',
+            paddingTop: '0.25rem',
+            paddingBottom: '0.25rem',
+        }, children: [(0, jsx_runtime_1.jsx)(CalendarHeader, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, setStartOfCurrMonth: setStartOfCurrMonth, locale: locale, theme: theme }), (0, jsx_runtime_1.jsx)(CalendarBody, { anchorDate: anchorDate, selectedStartDate: startDate, selectedEndDate: endDate, onDateClick: onDateClick, minDate: minDate, maxDate: maxDate, locale: locale, theme: theme })] }));
+}
+exports.Calendar = Calendar;
+exports.default = Calendar;

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

@@ -0,0 +1,39 @@
+/// <reference types="date-fns" />
+import React from 'react';
+import { enUS } from 'date-fns/locale';
+export type Locale = typeof enUS;
+export type DateRangePickerValue = [
+    (Date | null)?,
+    (Date | null)?,
+    (string | null)?
+];
+export type DateRangePickerOption = {
+    value: string;
+    text: string;
+    startDate?: Date;
+    endDate?: Date;
+    dayInterval?: number;
+};
+export type DateRange = [Date | null, Date | null];
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue'> {
+    value?: DateRangePickerValue;
+    defaultValue?: DateRangePickerValue;
+    onChangeDateRange?: (value: DateRange) => void;
+    onChangePreset?: (presetId: string) => void;
+    preset?: string;
+    dateRange?: DateRange;
+    enableDropdown?: boolean;
+    presetOptions?: DateRangePickerOption[];
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    placeholder?: string;
+    dropdownPlaceholder?: string;
+    enableYearPagination?: boolean;
+    disabled?: boolean;
+    color?: string;
+    locale?: Locale;
+    theme: any;
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;
+//# sourceMappingURL=DateRangePicker.d.ts.map

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

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

package/dist/cjs/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+const locale_1 = require("date-fns/locale");
+const contexts_1 = require("../contexts");
+const hooks_1 = require("../hooks");
+const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
+const Calendar_1 = __importDefault(require("./Calendar"));
+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 TODAY = (0, date_fns_1.startOfToday)();
+    const calendarRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)([
+        dateRange[0],
+        dateRange[1],
+        preset || null,
+    ]);
+    const [startOfCurrMonth, setStartOfCurrMonth] = (0, react_1.useState)(null);
+    const [showCalendar, setShowCalendar] = (0, react_1.useState)(false);
+    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
+    const [startDateInCalendar, setStartDateInCalendar] = (0, react_1.useState)(null);
+    const [endDateInCalendar, setEndDateInCalendar] = (0, react_1.useState)(null);
+    // const dropdownOptions = [
+    //   {
+    //     value: 'placeholder',
+    //     text: dropdownPlaceholder,
+    //   },
+    //   ...(options ?? defaultOptions),
+    // ];
+    const selectedDropdownValue = selectedValue
+        ? selectedValue[2] ?? null
+        : null;
+    const selectedStartDate = selectedValue
+        ? (0, dateRangePickerUtils_1.parseStartDate)(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
+        : null;
+    const selectedEndDate = selectedValue
+        ? (0, dateRangePickerUtils_1.parseEndDate)(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
+        : null;
+    const anchorDate = startOfCurrMonth ?? selectedEndDate ?? selectedStartDate ?? TODAY;
+    const handleDateClick = (date) => {
+        if (!startDateInCalendar) {
+            setStartDateInCalendar(date);
+            return;
+        }
+        if (startDateInCalendar && !endDateInCalendar) {
+            setEndDateInCalendar(date);
+            onChangeDateRange([startDateInCalendar, date]);
+            // onChangePreset(null);
+            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') {
+            e.preventDefault();
+            setShowCalendar(false);
+        }
+    };
+    const handleDropdownOptionClick = (dropdownValue) => {
+        if (!dropdownValue) {
+            return;
+        }
+        if (dropdownValue == 'placeholder') {
+            setSelectedValue([null, null, null]);
+            // onChangeDateRange([null, null]);
+            onChangePreset(null);
+            setShowDropdown(false);
+            return;
+        }
+        if (dropdownValue == selectedDropdownValue) {
+            setShowDropdown(false);
+            return;
+        }
+        const selectedStartDate = (0, dateRangePickerUtils_1.getStartDateByDropdownValue)(dropdownValue, presetOptions);
+        const selectedEndDate = (0, dateRangePickerUtils_1.getEndDateByDropdownValue)(dropdownValue, presetOptions);
+        setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
+        // onChangeDateRange([selectedStartDate, selectedEndDate]);
+        onChangePreset(presetOptions?.find((elem) => elem.value === dropdownValue));
+        setStartOfCurrMonth((0, date_fns_1.startOfMonth)(selectedEndDate));
+        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, 
+                        // 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,
+                            handleValueChange: handleDropdownOptionClick,
+                        }, children: (0, jsx_runtime_1.jsx)(contexts_1.HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: presetOptions.map(({ value, text }, index) => ((0, jsx_runtime_1.jsx)(Dropdown_1.DropdownItem, { value: value, text: text, theme: theme, lastItem: presetOptions.length - 1 === index }, value))) }) }) })] }) }));
+});
+exports.default = DateRangePicker;

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

@@ -0,0 +1,23 @@
+import React, { Dispatch, Ref, SetStateAction } from 'react';
+import { DateRangePickerOption, DateRangePickerValue } from './DateRangePicker';
+interface DateRangePickerButtonProps {
+    value: DateRangePickerValue;
+    options: DateRangePickerOption[];
+    placeholder: string;
+    disabled: boolean;
+    calendarRef: Ref<HTMLButtonElement>;
+    showCalendar: boolean;
+    setShowCalendar: Dispatch<SetStateAction<boolean>>;
+    onCalendarKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    enableDropdown: boolean;
+    dropdownRef: Ref<HTMLButtonElement>;
+    showDropdown: boolean;
+    setShowDropdown: Dispatch<SetStateAction<boolean>>;
+    onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    locale?: Locale;
+    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;
+export default DateRangePickerButton;
+//# sourceMappingURL=DateRangePickerButton.d.ts.map

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

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

package/dist/cjs/DateRangePicker/DateRangePickerButton.js

@@ -0,0 +1,138 @@
+"use strict";
+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 [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)
+        : dropdownPlaceholder;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderRadius: '0.375rem',
+            background: theme?.backgroundColor,
+            fontFamily: theme?.fontFamily,
+            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        }, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
+                    fontFamily: theme?.fontFamily,
+                    borderColor: theme?.borderColor || '#E5E7EB',
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    minHeight: 38,
+                    borderRight: 'none',
+                    borderTopLeftRadius: theme?.borderRadius || 6,
+                    borderBottomLeftRadius: theme?.borderRadius || 6,
+                    color: theme?.primaryTextColor,
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    // width: '100%',
+                    width: 275,
+                    maxWidth: 275,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    background: theme?.backgroundColor,
+                    fontWeight: theme?.fontWeightMedium || '500',
+                    fontSize: theme?.fontSizeSmall || '14px',
+                    paddingLeft: 10,
+                    // borderRight: enableDropdown
+                    //   ? border.none.right
+                    //   : twMerge(borderRadius.md.right, border.sm.right),
+                }, ref: calendarRef, onClick: () => setShowCalendar(!showCalendar), 
+                // onKeyDown={onCalendarKeyDown}
+                // className={twMerge(
+                //   'qq-flex qq-items-center qq-w-full qq-truncate focus:qq-outline-none focus:qq-ring-2',
+                //   getSelectButtonColors(hasDateSelection, disabled),
+                //   enableDropdown
+                //     ? border.none.right
+                //     : twMerge(borderRadius.md.right, border.sm.right),
+                //   getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+                //     .focusRingColor,
+                //   spacing.twoXl.paddingX,
+                //   spacing.sm.paddingY,
+                //   borderRadius.md.left,
+                //   border.sm.all
+                // )}
+                disabled: disabled, children: [(0, jsx_runtime_1.jsx)(assets_1.CalendarIcon, { style: {
+                            flex: 'none',
+                            color: theme?.secondaryTextColor,
+                            height: '1.25rem',
+                            width: '1.25rem',
+                            // marginLeft: '0.125rem',
+                            marginRight: '0.75rem',
+                        }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
+                            margin: 0,
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontWeight: theme?.fontWeightMedium || '500',
+                            fontSize: theme?.fontSizeSmall || '14px',
+                        }, children: calendarText })] }), enableDropdown ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
+                    // fontFamily: theme?.fontFamily,
+                    borderColor: theme?.borderColor || '#E5E7EB',
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    cursor: 'pointer',
+                    marginLeft: -1,
+                    borderTopRightRadius: theme?.borderRadius || 6,
+                    borderBottomRightRadius: theme?.borderRadius || 6,
+                    width: 150,
+                    // width: '12rem',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    display: 'inline-flex',
+                    minHeight: 38,
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    background: theme?.backgroundColor,
+                    fontSize: theme?.fontSizeSmall || 12,
+                    // fontWeight: theme?.fontWeightMedium || '800',
+                }, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), 
+                // className={twMerge(
+                //   'qq-inline-flex qq-justify-between qq-w-48 qq-truncate focus:qq-outline-none focus:qq-ring-2',
+                //   getSelectButtonColors(hasDropdownSelection, disabled),
+                //   getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+                //     .focusRingColor,
+                // spacing.twoXl.paddingX,
+                // spacing.sm.paddingY
+                // spacing.px.negativeMarginLeft,
+                // borderRadius.md.right,
+                // border.sm.all
+                // )}
+                onKeyDown: onDropdownKeyDown, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("p", { style: {
+                            margin: 0,
+                            fontFamily: theme?.fontFamily,
+                            // fontFamily: 'Avenir',
+                            color: theme?.primaryTextColor || '#364153',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontWeight: theme?.fontWeightMedium || '500',
+                            fontSize: theme?.fontSizeSmall || '14px',
+                            // background: 'red',
+                        }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                            height: '20px',
+                            width: '20px',
+                            flex: 'none',
+                            color: theme?.secondaryTextColor,
+                            marginRight: '-4px',
+                        }, "aria-hidden": "true" })] })) : null] }));
+};
+exports.default = DateRangePickerButton;

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

@@ -0,0 +1,3 @@
+import { DateRangePickerComponentProps } from '../Dashboard';
+export declare function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuillDateRangePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,6BAA6B,EAAE,MAAM,cAAc,CAAC;AAK7D,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA+H/B"}