@quillsql/react 2.8.8 → 2.8.9

package/dist/DateRangePicker/Calendar.js

@@ -1,14 +1,11 @@
-"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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState } from '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 = [
+import { add, eachDayOfInterval, endOfMonth, format, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, } from 'date-fns';
+import { BaseColorContext } from '../contexts';
+import { ArrowLeftHeadIcon, ArrowRightHeadIcon, } from '../assets';
+import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
+export const colStartClasses = [
     '',
     'col-start-2',
     'col-start-3',
@@ -18,36 +15,36 @@ exports.colStartClasses = [
     'col-start-7',
 ];
 const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth, locale, theme, }) => {
-    const firstDayOfMonth = (0, date_fns_1.startOfMonth)(anchorDate);
+    const firstDayOfMonth = startOfMonth(anchorDate);
     const handlePaginationClick = (type) => {
         switch (type) {
             case 'nextMonth':
-                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: 1 }));
+                setStartOfCurrMonth(add(firstDayOfMonth, { months: 1 }));
                 break;
             case 'prevMonth':
-                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: -1 }));
+                setStartOfCurrMonth(add(firstDayOfMonth, { months: -1 }));
                 break;
             case 'nextYear':
-                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: 1 }));
+                setStartOfCurrMonth(add(firstDayOfMonth, { years: 1 }));
                 break;
             case 'prevYear':
-                setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: -1 }));
+                setStartOfCurrMonth(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: {
+    const displayedTitle = capitalize(format(firstDayOfMonth, 'MMMM yyyy', { locale }), locale);
+    return (_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: {
+        }, children: [_jsx("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: '0.25rem',
-                }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                }, children: _jsx("button", { style: {
                         borderStyle: 'solid',
                         borderBottomWidth: 1,
                         borderBottomColor: theme?.borderColor || '#E5E7EB',
@@ -65,21 +62,21 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
                         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: {
+                    }, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: _jsx(ArrowLeftHeadIcon, { style: {
                             height: '1.25rem',
                             width: '1.25rem',
                             color: theme?.primaryTextColor || '#364153',
-                        }, "aria-hidden": "true" }) }) }), (0, jsx_runtime_1.jsx)("h2", { style: {
+                        }, "aria-hidden": "true" }) }) }), _jsx("h2", { style: {
                     color: theme?.textColor || '#364153',
                     fontSize: '14px',
                     fontFamily: theme?.fontFamily,
                     fontWeight: '700',
-                }, children: displayedTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: displayedTitle }), _jsx("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     marginRight: '0.25rem',
                     marginLeft: '0.25rem',
-                }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                }, children: _jsx("button", { style: {
                         borderStyle: 'solid',
                         borderBottomWidth: 1,
                         borderBottomColor: theme?.borderColor || '#E5E7EB',
@@ -97,25 +94,25 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
                         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: {
+                    }, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: _jsx(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)
+    const [hoveredDate, setHoveredDate] = useState();
+    const color = useContext(BaseColorContext);
+    const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
+    const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
+    const weekdays = getWeekdays(locale).map(dayName => capitalize(dayName, locale));
+    const displayedDates = eachDayOfInterval({
+        start: isSunday(firstDayOfDisplayedMonth)
             ? firstDayOfDisplayedMonth
-            : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
-        end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
+            : previousSunday(firstDayOfDisplayedMonth),
+        end: isSaturday(lastDayOfDisplayedMonth)
             ? lastDayOfDisplayedMonth
-            : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
+            : nextSaturday(lastDayOfDisplayedMonth),
     });
     const isDateDisabled = (date, minDate, maxDate, firstDayDisplayedMonth, lastDayDisplayedMonth) => {
         const isDateInDisplayedMonth = date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
@@ -123,27 +120,27 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
             (maxDate !== null && date > maxDate) ||
             !isDateInDisplayedMonth);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs(_Fragment, { children: [_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: {
+                }, children: weekdays.map(dayName => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _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: {
+                        }, children: dayName }) }, dayName))) }), _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: {
+                    return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
                                 border: 'none',
                                 height: '1.5rem',
                                 display: 'flex',
@@ -151,22 +148,20 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 fontFamily: theme?.fontFamily,
-                                ...(0, dateRangePickerUtils_1.getDateStyles)(theme, date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled),
+                                ...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()));
+                            disabled: isCurrentDateDisabled, children: _jsx("time", { dateTime: format(date, 'yyyy-MM-dd', { locale }), children: 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: {
+export function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
+    return (_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 })] }));
+        }, children: [_jsx(CalendarHeader, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, setStartOfCurrMonth: setStartOfCurrMonth, locale: locale, theme: theme }), _jsx(CalendarBody, { anchorDate: anchorDate, selectedStartDate: startDate, selectedEndDate: endDate, onDateClick: onDateClick, minDate: minDate, maxDate: maxDate, locale: locale, theme: theme })] }));
 }
-exports.Calendar = Calendar;
-exports.default = Calendar;
-//# sourceMappingURL=Calendar.js.map
+export default Calendar;

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":";AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAuBvC,MAAM,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC;AAEjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACd,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC5E,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,eAAe,6FA0PpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"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/DateRangePicker/DateRangePicker.js

@@ -1,59 +1,31 @@
-"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");
+import { jsx as _jsx, jsxs as _jsxs } from "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)([
+import React, { useRef, useState } from 'react';
+import { startOfMonth, startOfToday } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import { BaseColorContext, HoveredValueContext, SelectedValueContext, } from '../contexts';
+import { useSelectOnKeyDown } from '../hooks';
+import { getEndDateByDropdownValue, getStartDateByDropdownValue, parseEndDate, parseStartDate, } from './dateRangePickerUtils';
+import Calendar from './Calendar';
+import DateRangePickerButton from './DateRangePickerButton';
+import { DropdownItem } from '../components/Dropdown';
+import Modal from '../components/Modal';
+const DateRangePicker = React.forwardRef((props, ref) => {
+    const { dateRange, preset, onChangeDateRange, onChangePreset, presetOptions, enableDropdown = true, options, minDate = null, maxDate = null, placeholder = 'Select', dropdownPlaceholder = 'Select', disabled = false, color = 'blue', enableYearPagination = false, locale = enUS, className, theme, ...other } = props;
+    const TODAY = startOfToday();
+    const calendarRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [selectedValue, setSelectedValue] = 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 [startOfCurrMonth, setStartOfCurrMonth] = useState(null);
+    const [showCalendar, setShowCalendar] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [startDateInCalendar, setStartDateInCalendar] = useState(null);
+    const [endDateInCalendar, setEndDateInCalendar] = useState(null);
     // const dropdownOptions = [
     //   {
     //     value: 'placeholder',
@@ -65,10 +37,10 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
         ? selectedValue[2] ?? null
         : null;
     const selectedStartDate = selectedValue
-        ? (0, dateRangePickerUtils_1.parseStartDate)(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
+        ? parseStartDate(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
         : null;
     const selectedEndDate = selectedValue
-        ? (0, dateRangePickerUtils_1.parseEndDate)(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
+        ? parseEndDate(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
         : null;
     const anchorDate = startOfCurrMonth ?? selectedEndDate ?? selectedStartDate ?? TODAY;
     const handleDateClick = (date) => {
@@ -131,21 +103,20 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
             setShowDropdown(false);
             return;
         }
-        const selectedStartDate = (0, dateRangePickerUtils_1.getStartDateByDropdownValue)(dropdownValue, presetOptions);
-        const selectedEndDate = (0, dateRangePickerUtils_1.getEndDateByDropdownValue)(dropdownValue, presetOptions);
+        const selectedStartDate = getStartDateByDropdownValue(dropdownValue, presetOptions);
+        const selectedEndDate = getEndDateByDropdownValue(dropdownValue, presetOptions);
         setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
         // onChangeDateRange([selectedStartDate, selectedEndDate]);
-        onChangePreset(presetOptions?.find(elem => elem.value === dropdownValue));
-        setStartOfCurrMonth((0, date_fns_1.startOfMonth)(selectedEndDate));
+        onChangePreset(presetOptions?.find((elem) => elem.value === dropdownValue));
+        setStartOfCurrMonth(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, 
+    const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
+    return (_jsx(BaseColorContext.Provider, { value: color, children: _jsxs("div", { ref: ref, style: { position: 'relative', width: '100%' }, ...other, children: [_jsx(DateRangePickerButton, { value: [selectedStartDate, selectedEndDate, selectedDropdownValue], options: presetOptions, placeholder: placeholder, disabled: disabled, calendarRef: calendarRef, showCalendar: showCalendar, setShowCalendar: setShowCalendar, onCalendarKeyDown: handleCalendarKeyDown, enableDropdown: enableDropdown, dropdownRef: dropdownRef, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownKeyDown: handleDropdownKeyDown, locale: locale, dropdownPlaceholder: dropdownPlaceholder, theme: theme }), _jsx(Modal, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: _jsx(Calendar, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, 
                         // 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: {
+                        startDate: startDateInCalendar, endDate: endDateInCalendar, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth, theme: theme }) }), _jsx(Modal, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: _jsx(SelectedValueContext.Provider, { value: {
                             selectedValue: selectedDropdownValue,
                             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))) }) }) })] }) }));
+                        }, children: _jsx(HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: presetOptions.map(({ value, text }, index) => (_jsx(DropdownItem, { value: value, text: text, theme: theme, lastItem: presetOptions.length - 1 === index }, value))) }) }) })] }) }));
 });
-exports.default = DateRangePicker;
-//# sourceMappingURL=DateRangePicker.js.map
+export default DateRangePicker;

package/dist/DateRangePicker/DateRangePickerButton.js

@@ -1,20 +1,18 @@
-"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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
+import { formatSelectedDates } from './dateRangePickerUtils';
+import { hasValue } from '../components/selectUtils';
 const DateRangePickerButton = ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder = 'Select', theme, }) => {
     const [startDate, endDate, dropdownValue] = value;
     const hasDateSelection = (startDate || endDate) !== null && (startDate || endDate) !== undefined;
-    const hasDropdownSelection = (0, selectUtils_1.hasValue)(dropdownValue);
+    const hasDropdownSelection = hasValue(dropdownValue);
     const calendarText = hasDateSelection
-        ? (0, dateRangePickerUtils_1.formatSelectedDates)(startDate, endDate, locale)
+        ? 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: {
+    return (_jsxs("div", { style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -22,7 +20,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
             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: {
+        }, children: [_jsxs("button", { type: "button", style: {
                     fontFamily: theme?.fontFamily,
                     borderColor: theme?.borderColor || '#E5E7EB',
                     borderStyle: 'solid',
@@ -63,14 +61,14 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
                 //   borderRadius.md.left,
                 //   border.sm.all
                 // )}
-                disabled: disabled, children: [(0, jsx_runtime_1.jsx)(assets_1.CalendarIcon, { style: {
+                disabled: disabled, children: [_jsx(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: {
+                        }, "aria-hidden": "true" }), _jsx("p", { style: {
                             margin: 0,
                             fontFamily: theme?.fontFamily,
                             color: theme?.primaryTextColor,
@@ -79,7 +77,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
                             whiteSpace: 'nowrap',
                             fontWeight: theme?.fontWeightMedium || '500',
                             fontSize: theme?.fontSizeSmall || '14px',
-                        }, children: calendarText })] }), enableDropdown ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
+                        }, children: calendarText })] }), enableDropdown ? (_jsxs("button", { type: "button", style: {
                     // fontFamily: theme?.fontFamily,
                     borderColor: theme?.borderColor || '#E5E7EB',
                     borderStyle: 'solid',
@@ -116,7 +114,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
                 // borderRadius.md.right,
                 // border.sm.all
                 // )}
-                onKeyDown: onDropdownKeyDown, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("p", { style: {
+                onKeyDown: onDropdownKeyDown, disabled: disabled, children: [_jsx("p", { style: {
                             margin: 0,
                             fontFamily: theme?.fontFamily,
                             // fontFamily: 'Avenir',
@@ -127,7 +125,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
                             fontWeight: theme?.fontWeightMedium || '500',
                             fontSize: theme?.fontSizeSmall || '14px',
                             // background: 'red',
-                        }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                        }, children: dropdownText }), _jsx(ArrowDownHeadIcon, { style: {
                             height: '20px',
                             width: '20px',
                             flex: 'none',
@@ -135,5 +133,4 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
                             marginRight: '-4px',
                         }, "aria-hidden": "true" })] })) : null] }));
 };
-exports.default = DateRangePickerButton;
-//# sourceMappingURL=DateRangePickerButton.js.map
+export default DateRangePickerButton;