@quillsql/react 2.8.5 → 2.8.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/AddToDashboardModal.js +146 -180
  2. package/dist/BarList.js +36 -43
  3. package/dist/Chart.js +99 -131
  4. package/dist/ChartBuilder.js +80 -88
  5. package/dist/ChartEditor.js +14 -20
  6. package/dist/Context.js +52 -56
  7. package/dist/Dashboard.d.ts.map +1 -1
  8. package/dist/Dashboard.js +246 -305
  9. package/dist/DateRangePicker/Calendar.js +41 -45
  10. package/dist/DateRangePicker/DateRangePicker.js +32 -60
  11. package/dist/DateRangePicker/DateRangePickerButton.js +14 -16
  12. package/dist/DateRangePicker/dateRangePickerUtils.d.ts +6 -0
  13. package/dist/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  14. package/dist/DateRangePicker/dateRangePickerUtils.js +89 -89
  15. package/dist/DateRangePicker/index.js +1 -8
  16. package/dist/PieChart.js +35 -69
  17. package/dist/QuillProvider.js +4 -6
  18. package/dist/ReportBuilder.js +120 -128
  19. package/dist/SQLEditor.js +56 -64
  20. package/dist/Table.d.ts +2 -1
  21. package/dist/Table.d.ts.map +1 -1
  22. package/dist/Table.js +64 -68
  23. package/dist/TableChart.js +17 -44
  24. package/dist/assets/ArrowDownHeadIcon.js +3 -5
  25. package/dist/assets/ArrowDownIcon.js +3 -5
  26. package/dist/assets/ArrowDownRightIcon.js +3 -5
  27. package/dist/assets/ArrowLeftHeadIcon.js +3 -5
  28. package/dist/assets/ArrowRightHeadIcon.js +3 -5
  29. package/dist/assets/ArrowRightIcon.js +3 -5
  30. package/dist/assets/ArrowUpHeadIcon.js +3 -5
  31. package/dist/assets/ArrowUpIcon.js +3 -5
  32. package/dist/assets/ArrowUpRightIcon.js +3 -5
  33. package/dist/assets/CalendarIcon.js +3 -5
  34. package/dist/assets/CalendarNormalIcon.js +3 -5
  35. package/dist/assets/DoubleArrowLeftHeadIcon.js +3 -5
  36. package/dist/assets/DoubleArrowRightHeadIcon.js +3 -5
  37. package/dist/assets/ExclamationFilledIcon.js +3 -5
  38. package/dist/assets/FilterIcon.js +3 -5
  39. package/dist/assets/LoadingSpinner.js +3 -5
  40. package/dist/assets/RefreshIcon.js +3 -5
  41. package/dist/assets/SearchIcon.js +3 -5
  42. package/dist/assets/UpLeftArrowsIcon.js +3 -5
  43. package/dist/assets/XCircleIcon.js +3 -5
  44. package/dist/assets/XIcon.js +3 -5
  45. package/dist/assets/index.js +21 -48
  46. package/dist/components/BigModal/BigModal.js +13 -38
  47. package/dist/components/Dropdown/Dropdown.js +24 -52
  48. package/dist/components/Dropdown/DropdownItem.js +9 -34
  49. package/dist/components/Dropdown/index.js +2 -10
  50. package/dist/components/Modal/Modal.js +13 -38
  51. package/dist/components/Modal/index.js +1 -8
  52. package/dist/components/QuillCard.js +8 -12
  53. package/dist/components/SqlTextEditor.d.ts +7 -0
  54. package/dist/components/SqlTextEditor.d.ts.map +1 -0
  55. package/dist/components/SqlTextEditor.js +14 -0
  56. package/dist/components/UiComponents.js +37 -50
  57. package/dist/components/selectUtils.js +6 -16
  58. package/dist/contexts/BaseColorContext.js +3 -5
  59. package/dist/contexts/HoveredValueContext.js +3 -5
  60. package/dist/contexts/RootStylesContext.js +3 -5
  61. package/dist/contexts/SelectedValueContext.js +3 -5
  62. package/dist/contexts/index.js +4 -14
  63. package/dist/hooks/index.js +4 -14
  64. package/dist/hooks/useDashboard.d.ts +7 -0
  65. package/dist/hooks/useDashboard.d.ts.map +1 -0
  66. package/dist/hooks/useDashboard.js +48 -0
  67. package/dist/hooks/useInternalState.js +3 -5
  68. package/dist/hooks/useOnClickOutside.js +3 -5
  69. package/dist/hooks/useOnWindowResize.js +4 -6
  70. package/dist/hooks/useQuill.js +11 -15
  71. package/dist/hooks/useSelectOnKeyDown.js +4 -6
  72. package/dist/index.d.ts +2 -0
  73. package/dist/index.d.ts.map +1 -1
  74. package/dist/index.js +13 -28
  75. package/dist/internals/ReportBuilder/PivotList.js +14 -19
  76. package/dist/internals/ReportBuilder/PivotModal.js +84 -91
  77. package/dist/internals/ReportBuilder/PivotModal.spec.js +70 -72
  78. package/dist/lib/font.js +2 -5
  79. package/dist/lib/index.js +3 -19
  80. package/dist/lib/inputTypes.js +1 -2
  81. package/dist/lib/utils.js +8 -18
  82. package/dist/utils/aggregate.js +28 -34
  83. package/dist/utils/colorToHex.js +1 -4
  84. package/dist/utils/dataFetcher.js +2 -7
  85. package/dist/utils/downloadCSV.js +1 -5
  86. package/package.json +2 -1
@@ -1,14 +1,11 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Calendar = exports.colStartClasses = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useContext, useState } from 'react';
6
3
  // import { twMerge } from 'tailwind-merge';
7
- const date_fns_1 = require("date-fns");
8
- const contexts_1 = require("../contexts");
9
- const assets_1 = require("../assets");
10
- const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
11
- exports.colStartClasses = [
4
+ import { add, eachDayOfInterval, endOfMonth, format, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, } from 'date-fns';
5
+ import { BaseColorContext } from '../contexts';
6
+ import { ArrowLeftHeadIcon, ArrowRightHeadIcon, } from '../assets';
7
+ import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
8
+ export const colStartClasses = [
12
9
  '',
13
10
  'col-start-2',
14
11
  'col-start-3',
@@ -18,36 +15,36 @@ exports.colStartClasses = [
18
15
  'col-start-7',
19
16
  ];
20
17
  const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth, locale, theme, }) => {
21
- const firstDayOfMonth = (0, date_fns_1.startOfMonth)(anchorDate);
18
+ const firstDayOfMonth = startOfMonth(anchorDate);
22
19
  const handlePaginationClick = (type) => {
23
20
  switch (type) {
24
21
  case 'nextMonth':
25
- setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: 1 }));
22
+ setStartOfCurrMonth(add(firstDayOfMonth, { months: 1 }));
26
23
  break;
27
24
  case 'prevMonth':
28
- setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { months: -1 }));
25
+ setStartOfCurrMonth(add(firstDayOfMonth, { months: -1 }));
29
26
  break;
30
27
  case 'nextYear':
31
- setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: 1 }));
28
+ setStartOfCurrMonth(add(firstDayOfMonth, { years: 1 }));
32
29
  break;
33
30
  case 'prevYear':
34
- setStartOfCurrMonth((0, date_fns_1.add)(firstDayOfMonth, { years: -1 }));
31
+ setStartOfCurrMonth(add(firstDayOfMonth, { years: -1 }));
35
32
  break;
36
33
  }
37
34
  };
38
- const displayedTitle = (0, dateRangePickerUtils_1.capitalize)((0, date_fns_1.format)(firstDayOfMonth, 'MMMM yyyy', { locale }), locale);
39
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
35
+ const displayedTitle = capitalize(format(firstDayOfMonth, 'MMMM yyyy', { locale }), locale);
36
+ return (_jsxs("div", { style: {
40
37
  display: 'flex',
41
38
  justifyContent: 'space-between',
42
39
  alignItems: 'center',
43
40
  padding: '0.125rem',
44
41
  paddingTop: '0.25rem',
45
42
  paddingBottom: '0.25rem',
46
- }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
43
+ }, children: [_jsx("div", { style: {
47
44
  display: 'flex',
48
45
  alignItems: 'center',
49
46
  gap: '0.25rem',
50
- }, children: (0, jsx_runtime_1.jsx)("button", { style: {
47
+ }, children: _jsx("button", { style: {
51
48
  borderStyle: 'solid',
52
49
  borderBottomWidth: 1,
53
50
  borderBottomColor: theme?.borderColor || '#E5E7EB',
@@ -65,21 +62,21 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
65
62
  outline: enableYearPagination ? 'none' : '2px solid transparent',
66
63
  outlineOffset: '2px',
67
64
  cursor: 'pointer',
68
- }, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowLeftHeadIcon, { style: {
65
+ }, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: _jsx(ArrowLeftHeadIcon, { style: {
69
66
  height: '1.25rem',
70
67
  width: '1.25rem',
71
68
  color: theme?.primaryTextColor || '#364153',
72
- }, "aria-hidden": "true" }) }) }), (0, jsx_runtime_1.jsx)("h2", { style: {
69
+ }, "aria-hidden": "true" }) }) }), _jsx("h2", { style: {
73
70
  color: theme?.textColor || '#364153',
74
71
  fontSize: '14px',
75
72
  fontFamily: theme?.fontFamily,
76
73
  fontWeight: '700',
77
- }, children: displayedTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
74
+ }, children: displayedTitle }), _jsx("div", { style: {
78
75
  display: 'flex',
79
76
  alignItems: 'center',
80
77
  marginRight: '0.25rem',
81
78
  marginLeft: '0.25rem',
82
- }, children: (0, jsx_runtime_1.jsx)("button", { style: {
79
+ }, children: _jsx("button", { style: {
83
80
  borderStyle: 'solid',
84
81
  borderBottomWidth: 1,
85
82
  borderBottomColor: theme?.borderColor || '#E5E7EB',
@@ -97,25 +94,25 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
97
94
  outline: enableYearPagination ? 'none' : '2px solid transparent',
98
95
  outlineOffset: '2px',
99
96
  cursor: 'pointer',
100
- }, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowRightHeadIcon, { style: {
97
+ }, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: _jsx(ArrowRightHeadIcon, { style: {
101
98
  height: '1.25rem',
102
99
  width: '1.25rem',
103
100
  color: theme?.primaryTextColor || '#364153',
104
101
  }, "aria-hidden": "true" }) }) })] }));
105
102
  };
106
103
  const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateClick, minDate, maxDate, locale, theme, }) => {
107
- const [hoveredDate, setHoveredDate] = (0, react_1.useState)();
108
- const color = (0, react_1.useContext)(contexts_1.BaseColorContext);
109
- const firstDayOfDisplayedMonth = (0, date_fns_1.startOfMonth)(anchorDate);
110
- const lastDayOfDisplayedMonth = (0, date_fns_1.endOfMonth)(anchorDate);
111
- const weekdays = (0, dateRangePickerUtils_1.getWeekdays)(locale).map(dayName => (0, dateRangePickerUtils_1.capitalize)(dayName, locale));
112
- const displayedDates = (0, date_fns_1.eachDayOfInterval)({
113
- start: (0, date_fns_1.isSunday)(firstDayOfDisplayedMonth)
104
+ const [hoveredDate, setHoveredDate] = useState();
105
+ const color = useContext(BaseColorContext);
106
+ const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
107
+ const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
108
+ const weekdays = getWeekdays(locale).map(dayName => capitalize(dayName, locale));
109
+ const displayedDates = eachDayOfInterval({
110
+ start: isSunday(firstDayOfDisplayedMonth)
114
111
  ? firstDayOfDisplayedMonth
115
- : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
116
- end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
112
+ : previousSunday(firstDayOfDisplayedMonth),
113
+ end: isSaturday(lastDayOfDisplayedMonth)
117
114
  ? lastDayOfDisplayedMonth
118
- : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
115
+ : nextSaturday(lastDayOfDisplayedMonth),
119
116
  });
120
117
  const isDateDisabled = (date, minDate, maxDate, firstDayDisplayedMonth, lastDayDisplayedMonth) => {
121
118
  const isDateInDisplayedMonth = date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
@@ -123,27 +120,27 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
123
120
  (maxDate !== null && date > maxDate) ||
124
121
  !isDateInDisplayedMonth);
125
122
  };
126
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
123
+ return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
127
124
  color: theme?.primaryTextColor || '#364153',
128
125
  textAlign: 'center',
129
126
  fontSize: '0.75rem',
130
127
  fontWeight: '500',
131
128
  display: 'grid',
132
129
  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
133
- }, 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: {
130
+ }, children: weekdays.map(dayName => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
134
131
  display: 'flex',
135
132
  alignItems: 'center',
136
133
  justifyContent: 'center',
137
134
  width: '100%',
138
135
  height: '2.25rem',
139
136
  fontFamily: theme?.fontFamily,
140
- }, children: dayName }) }, dayName))) }), (0, jsx_runtime_1.jsx)("div", { style: {
137
+ }, children: dayName }) }, dayName))) }), _jsx("div", { style: {
141
138
  display: 'grid',
142
139
  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
143
140
  paddingBottom: 8,
144
141
  }, children: displayedDates.map(date => {
145
142
  const isCurrentDateDisabled = isDateDisabled(date, minDate, maxDate, firstDayOfDisplayedMonth, lastDayOfDisplayedMonth);
146
- return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("button", { style: {
143
+ return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
147
144
  border: 'none',
148
145
  height: '1.5rem',
149
146
  display: 'flex',
@@ -151,21 +148,20 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
151
148
  alignItems: 'center',
152
149
  justifyContent: 'center',
153
150
  fontFamily: theme?.fontFamily,
154
- ...(0, dateRangePickerUtils_1.getDateStyles)(theme, date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled),
151
+ ...getDateStyles(theme, date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled),
155
152
  }, type: "button", onClick: () => {
156
153
  onDateClick(date);
157
154
  }, onPointerEnter: () => setHoveredDate?.(date), onPointerLeave: () => setHoveredDate?.(undefined),
158
155
  // className={twMerge(fontSize.sm)}
159
- 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()));
156
+ disabled: isCurrentDateDisabled, children: _jsx("time", { dateTime: format(date, 'yyyy-MM-dd', { locale }), children: format(date, 'd', { locale }) }) }) }, date.toString()));
160
157
  }) })] }));
161
158
  };
162
- function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
163
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
159
+ export function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
160
+ return (_jsxs("div", { style: {
164
161
  paddingLeft: '0.75rem',
165
162
  paddingRight: '0.75rem',
166
163
  paddingTop: '0.25rem',
167
164
  paddingBottom: '0.25rem',
168
- }, 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 })] }));
165
+ }, 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 })] }));
169
166
  }
170
- exports.Calendar = Calendar;
171
- exports.default = Calendar;
167
+ export default Calendar;
@@ -1,59 +1,31 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- const jsx_runtime_1 = require("react/jsx-runtime");
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
2
  /* eslint-disable react/display-name */
31
3
  // @ts-nocheck
32
- const react_1 = __importStar(require("react"));
33
- const date_fns_1 = require("date-fns");
34
- const locale_1 = require("date-fns/locale");
35
- const contexts_1 = require("../contexts");
36
- const hooks_1 = require("../hooks");
37
- const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
38
- const Calendar_1 = __importDefault(require("./Calendar"));
39
- const DateRangePickerButton_1 = __importDefault(require("./DateRangePickerButton"));
40
- const Dropdown_1 = require("../components/Dropdown");
41
- const Modal_1 = __importDefault(require("../components/Modal"));
42
- const DateRangePicker = react_1.default.forwardRef((props, ref) => {
43
- 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;
44
- const TODAY = (0, date_fns_1.startOfToday)();
45
- const calendarRef = (0, react_1.useRef)(null);
46
- const dropdownRef = (0, react_1.useRef)(null);
47
- const [selectedValue, setSelectedValue] = (0, react_1.useState)([
4
+ import React, { useRef, useState } from 'react';
5
+ import { startOfMonth, startOfToday } from 'date-fns';
6
+ import { enUS } from 'date-fns/locale';
7
+ import { BaseColorContext, HoveredValueContext, SelectedValueContext, } from '../contexts';
8
+ import { useSelectOnKeyDown } from '../hooks';
9
+ import { getEndDateByDropdownValue, getStartDateByDropdownValue, parseEndDate, parseStartDate, } from './dateRangePickerUtils';
10
+ import Calendar from './Calendar';
11
+ import DateRangePickerButton from './DateRangePickerButton';
12
+ import { DropdownItem } from '../components/Dropdown';
13
+ import Modal from '../components/Modal';
14
+ const DateRangePicker = React.forwardRef((props, ref) => {
15
+ 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;
16
+ const TODAY = startOfToday();
17
+ const calendarRef = useRef(null);
18
+ const dropdownRef = useRef(null);
19
+ const [selectedValue, setSelectedValue] = useState([
48
20
  dateRange[0],
49
21
  dateRange[1],
50
22
  preset || null,
51
23
  ]);
52
- const [startOfCurrMonth, setStartOfCurrMonth] = (0, react_1.useState)(null);
53
- const [showCalendar, setShowCalendar] = (0, react_1.useState)(false);
54
- const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
55
- const [startDateInCalendar, setStartDateInCalendar] = (0, react_1.useState)(null);
56
- const [endDateInCalendar, setEndDateInCalendar] = (0, react_1.useState)(null);
24
+ const [startOfCurrMonth, setStartOfCurrMonth] = useState(null);
25
+ const [showCalendar, setShowCalendar] = useState(false);
26
+ const [showDropdown, setShowDropdown] = useState(false);
27
+ const [startDateInCalendar, setStartDateInCalendar] = useState(null);
28
+ const [endDateInCalendar, setEndDateInCalendar] = useState(null);
57
29
  // const dropdownOptions = [
58
30
  // {
59
31
  // value: 'placeholder',
@@ -65,10 +37,10 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
65
37
  ? selectedValue[2] ?? null
66
38
  : null;
67
39
  const selectedStartDate = selectedValue
68
- ? (0, dateRangePickerUtils_1.parseStartDate)(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
40
+ ? parseStartDate(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
69
41
  : null;
70
42
  const selectedEndDate = selectedValue
71
- ? (0, dateRangePickerUtils_1.parseEndDate)(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
43
+ ? parseEndDate(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
72
44
  : null;
73
45
  const anchorDate = startOfCurrMonth ?? selectedEndDate ?? selectedStartDate ?? TODAY;
74
46
  const handleDateClick = (date) => {
@@ -131,20 +103,20 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
131
103
  setShowDropdown(false);
132
104
  return;
133
105
  }
134
- const selectedStartDate = (0, dateRangePickerUtils_1.getStartDateByDropdownValue)(dropdownValue, presetOptions);
135
- const selectedEndDate = (0, dateRangePickerUtils_1.getEndDateByDropdownValue)(dropdownValue, presetOptions);
106
+ const selectedStartDate = getStartDateByDropdownValue(dropdownValue, presetOptions);
107
+ const selectedEndDate = getEndDateByDropdownValue(dropdownValue, presetOptions);
136
108
  setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
137
109
  // onChangeDateRange([selectedStartDate, selectedEndDate]);
138
110
  onChangePreset(presetOptions?.find(elem => elem.value === dropdownValue));
139
- setStartOfCurrMonth((0, date_fns_1.startOfMonth)(selectedEndDate));
111
+ setStartOfCurrMonth(startOfMonth(selectedEndDate));
140
112
  setShowDropdown(false);
141
113
  };
142
- const [hoveredDropdownValue, handleDropdownKeyDown] = (0, hooks_1.useSelectOnKeyDown)(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
143
- 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,
114
+ const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
115
+ 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,
144
116
  // setAnchorDate={setAnchorDate}
145
- 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: {
117
+ 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: {
146
118
  selectedValue: selectedDropdownValue,
147
119
  handleValueChange: handleDropdownOptionClick,
148
- }, 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))) }) }) })] }) }));
120
+ }, 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))) }) }) })] }) }));
149
121
  });
150
- exports.default = DateRangePicker;
122
+ export default DateRangePicker;
@@ -1,20 +1,18 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const assets_1 = require("../assets");
5
- const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
6
- const selectUtils_1 = require("../components/selectUtils");
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
3
+ import { formatSelectedDates } from './dateRangePickerUtils';
4
+ import { hasValue } from '../components/selectUtils';
7
5
  const DateRangePickerButton = ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder = 'Select', theme, }) => {
8
6
  const [startDate, endDate, dropdownValue] = value;
9
7
  const hasDateSelection = (startDate || endDate) !== null && (startDate || endDate) !== undefined;
10
- const hasDropdownSelection = (0, selectUtils_1.hasValue)(dropdownValue);
8
+ const hasDropdownSelection = hasValue(dropdownValue);
11
9
  const calendarText = hasDateSelection
12
- ? (0, dateRangePickerUtils_1.formatSelectedDates)(startDate, endDate, locale)
10
+ ? formatSelectedDates(startDate, endDate, locale)
13
11
  : placeholder;
14
12
  const dropdownText = dropdownValue
15
13
  ? String(options.find(option => option.value === dropdownValue)?.text)
16
14
  : dropdownPlaceholder;
17
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
15
+ return (_jsxs("div", { style: {
18
16
  display: 'flex',
19
17
  alignItems: 'center',
20
18
  justifyContent: 'space-between',
@@ -22,7 +20,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
22
20
  background: theme?.backgroundColor,
23
21
  fontFamily: theme?.fontFamily,
24
22
  boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
25
- }, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
23
+ }, children: [_jsxs("button", { type: "button", style: {
26
24
  fontFamily: theme?.fontFamily,
27
25
  borderColor: theme?.borderColor || '#E5E7EB',
28
26
  borderStyle: 'solid',
@@ -63,14 +61,14 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
63
61
  // borderRadius.md.left,
64
62
  // border.sm.all
65
63
  // )}
66
- disabled: disabled, children: [(0, jsx_runtime_1.jsx)(assets_1.CalendarIcon, { style: {
64
+ disabled: disabled, children: [_jsx(CalendarIcon, { style: {
67
65
  flex: 'none',
68
66
  color: theme?.secondaryTextColor,
69
67
  height: '1.25rem',
70
68
  width: '1.25rem',
71
69
  // marginLeft: '0.125rem',
72
70
  marginRight: '0.75rem',
73
- }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
71
+ }, "aria-hidden": "true" }), _jsx("p", { style: {
74
72
  margin: 0,
75
73
  fontFamily: theme?.fontFamily,
76
74
  color: theme?.primaryTextColor,
@@ -79,7 +77,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
79
77
  whiteSpace: 'nowrap',
80
78
  fontWeight: theme?.fontWeightMedium || '500',
81
79
  fontSize: theme?.fontSizeSmall || '14px',
82
- }, children: calendarText })] }), enableDropdown ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
80
+ }, children: calendarText })] }), enableDropdown ? (_jsxs("button", { type: "button", style: {
83
81
  // fontFamily: theme?.fontFamily,
84
82
  borderColor: theme?.borderColor || '#E5E7EB',
85
83
  borderStyle: 'solid',
@@ -116,7 +114,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
116
114
  // borderRadius.md.right,
117
115
  // border.sm.all
118
116
  // )}
119
- onKeyDown: onDropdownKeyDown, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("p", { style: {
117
+ onKeyDown: onDropdownKeyDown, disabled: disabled, children: [_jsx("p", { style: {
120
118
  margin: 0,
121
119
  fontFamily: theme?.fontFamily,
122
120
  // fontFamily: 'Avenir',
@@ -127,7 +125,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
127
125
  fontWeight: theme?.fontWeightMedium || '500',
128
126
  fontSize: theme?.fontSizeSmall || '14px',
129
127
  // background: 'red',
130
- }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
128
+ }, children: dropdownText }), _jsx(ArrowDownHeadIcon, { style: {
131
129
  height: '20px',
132
130
  width: '20px',
133
131
  flex: 'none',
@@ -135,4 +133,4 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
135
133
  marginRight: '-4px',
136
134
  }, "aria-hidden": "true" })] })) : null] }));
137
135
  };
138
- exports.default = DateRangePickerButton;
136
+ export default DateRangePickerButton;
@@ -19,6 +19,12 @@ type QuillDateRange = {
19
19
  export declare const PRIMARY_RANGE: {
20
20
  [key: string]: QuillDateRange | null;
21
21
  };
22
+ /**
23
+ * Maps between the keys of primary range and the short code.
24
+ */
25
+ export declare const PRIMARY_CODES: {
26
+ [key: keyof typeof PRIMARY_RANGE]: string;
27
+ };
22
28
  /**
23
29
  * A helpful map between comparison range keys and a function that takes the
24
30
  * start date of the primary range (which is also the end date for our
@@ -1 +1 @@
1
- {"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;CASjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,cAAc,GAAG,IAAI,CAAC;CAmBjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAGhD,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}
1
+ {"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;CASjE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,cAAc,GAAG,IAAI,CAAC;CAmBjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAGhD,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}