willba-component-library 0.2.12 → 0.2.14

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 (17) hide show
  1. package/README.md +1 -1
  2. package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -1
  3. package/lib/core/components/calendar/CalendarTypes.d.ts +1 -0
  4. package/lib/index.d.ts +2 -1
  5. package/lib/index.esm.js +53 -7
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +53 -7
  8. package/lib/index.js.map +1 -1
  9. package/lib/index.umd.js +53 -7
  10. package/lib/index.umd.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/FilterCalendar/FilterCalendar.stories.tsx +1 -0
  13. package/src/components/FilterCalendar/FilterCalendar.tsx +4 -2
  14. package/src/components/FilterCalendar/FilterCalendarTypes.ts +1 -1
  15. package/src/core/components/calendar/Calendar.css +33 -2
  16. package/src/core/components/calendar/Calendar.tsx +64 -4
  17. package/src/core/components/calendar/CalendarTypes.ts +1 -0
package/README.md CHANGED
@@ -153,5 +153,5 @@ ReactDOM.render(<App />, document.querySelector('#app'))
153
153
  | palette | `{}` | The palette defines the primary and secondary colors of the filter bar. Override the colors using the following format: { primary: string, secondary: string }. For example: { primary: '#2a5a44', secondary: '#2a5a44' } |
154
154
  | calendarOffset | `{}` | Disable dates on the calendar starting from today either forward or backward using the following format: { rooms: number, events: number }. For example: { rooms: 7, events: -1 } |
155
155
  | fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed. |
156
- | mode | `"string"` | pecify the color theme for the filter bar tabs as either light or dark using the following format: "light" |
156
+ | mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: "light" |
157
157
  | tabs | `[{}]` | Manage the filter bar tabs using the following format: [{path: string, default: boolean, order: number, label: { en: string, fi: string }}]. For example: [{ path: '/rooms', default: true, order: 2, label: { en: "Name en", fi: "Name fi" }}] |
package/lib/components/FilterCalendar/FilterCalendar.d.ts CHANGED
@@ -2,4 +2,4 @@ import React from 'react';
2
2
  import '../../themes/Default.css';
3
3
  import { FilterCalendarTypes } from './FilterCalendarTypes';
4
4
  import './FilterCalendar.css';
5
- export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, }: FilterCalendarTypes): React.JSX.Element;
5
+ export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;
package/lib/core/components/calendar/CalendarTypes.d.ts CHANGED
@@ -12,4 +12,5 @@ export type CalendarTypes = {
12
12
  from: Date;
13
13
  to: Date;
14
14
  }[];
15
+ requestDates?: (val: Date) => void;
15
16
  };
package/lib/index.d.ts CHANGED
@@ -46,6 +46,7 @@ type CalendarTypes = {
46
46
  from: Date;
47
47
  to: Date;
48
48
  }[];
49
+ requestDates?: (val: Date) => void;
49
50
  };
50
51
 
51
52
  type FilterBarProps = {
@@ -90,6 +91,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
90
91
  setToggleCalendar: (val: boolean) => void;
91
92
  }
92
93
 
93
- declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, }: FilterCalendarTypes): React.JSX.Element;
94
+ declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;
94
95
 
95
96
  export { Button, FilterBar, FilterCalendar, FilterCalendarTypes, Tab };
package/lib/index.esm.js CHANGED
@@ -10764,12 +10764,12 @@ var reactResponsiveExports = reactResponsive.exports;
10764
10764
  var css_248z$9 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
10765
10765
  styleInject(css_248z$9);
10766
10766
 
10767
- var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n \n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n\n";
10767
+ var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n/* .will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n} */\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n \n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltip */\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip {\n position: absolute;\n top: -42px;\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before {\n content: \"\";\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left:calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n\n";
10768
10768
  styleInject(css_248z$8);
10769
10769
 
10770
10770
  var Calendar = forwardRef(function (_a, ref) {
10771
10771
  var _b;
10772
- var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup;
10772
+ var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup, requestDates = _a.requestDates;
10773
10773
  var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
10774
10774
  useEffect(function () {
10775
10775
  if (!calendarRange)
@@ -10786,13 +10786,59 @@ var Calendar = forwardRef(function (_a, ref) {
10786
10786
  },
10787
10787
  ];
10788
10788
  var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
10789
+ var _c = __read(useState(''), 2), openTooltip = _c[0], setOpenTooltip = _c[1];
10790
+ var handleSelectedDates = function (range, e) {
10791
+ var isNextDayDisabled = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (item) {
10792
+ return isSameDay(item.from, addDays((range === null || range === void 0 ? void 0 : range.from) || 1, 1));
10793
+ });
10794
+ var rangeHasDisabledDay = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (date) {
10795
+ return isAfter(date.from, (range === null || range === void 0 ? void 0 : range.from) || 1) &&
10796
+ isBefore(date.from, (range === null || range === void 0 ? void 0 : range.to) || 1);
10797
+ });
10798
+ var handleTooltip = function (type) {
10799
+ var calendarButton = e.currentTarget;
10800
+ var calendarTooltip = document.querySelector('.will-calendar-tooltip');
10801
+ if (calendarButton && calendarTooltip) {
10802
+ if (type) {
10803
+ calendarButton.appendChild(calendarTooltip);
10804
+ calendarTooltip.style.display = 'block';
10805
+ calendarButton.style.overflow = 'visible';
10806
+ calendarButton.style.position = 'relative';
10807
+ }
10808
+ else {
10809
+ calendarTooltip.style.display = 'none';
10810
+ }
10811
+ }
10812
+ };
10813
+ if (isNextDayDisabled) {
10814
+ setOpenTooltip('next');
10815
+ handleTooltip('next');
10816
+ setCalendarRange(undefined);
10817
+ }
10818
+ else if (rangeHasDisabledDay) {
10819
+ setOpenTooltip('between');
10820
+ handleTooltip('range');
10821
+ setCalendarRange(undefined);
10822
+ }
10823
+ else {
10824
+ setCalendarRange(range);
10825
+ setOpenTooltip('');
10826
+ handleTooltip('');
10827
+ }
10828
+ };
10789
10829
  return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
10790
10830
  React__default__default.createElement("div", { className: "will-calendar-filter-container" },
10791
- React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
10831
+ React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range, days, activeModifiers, e) {
10832
+ return handleSelectedDates(range, e);
10833
+ }, modifiersClassNames: {
10792
10834
  today: 'my-today',
10793
10835
  }, modifiersStyles: {
10794
10836
  disabled: { opacity: '0.2' },
10795
- }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today }))));
10837
+ }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today, onMonthChange: function (val) { return (requestDates ? requestDates(val) : null); } }),
10838
+ React__default__default.createElement("div", { className: 'will-calendar-tooltip' },
10839
+ React__default__default.createElement("div", null, openTooltip === 'next'
10840
+ ? 'Checkout only'
10841
+ : 'Contains unavailable day')))));
10796
10842
  });
10797
10843
 
10798
10844
  var parseDates = function (_a) {
@@ -11200,7 +11246,7 @@ var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-
11200
11246
  styleInject(css_248z);
11201
11247
 
11202
11248
  function FilterCalendar(_a) {
11203
- var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, calendarOffsetGroup = _a.calendarOffsetGroup, toggleCalendar = _a.toggleCalendar, setToggleCalendar = _a.setToggleCalendar;
11249
+ var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, calendarOffsetGroup = _a.calendarOffsetGroup, toggleCalendar = _a.toggleCalendar, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
11204
11250
  var themePalette = useTheme({ palette: palette });
11205
11251
  // Translations
11206
11252
  useUpdateTranslations({ language: language });
@@ -11218,7 +11264,7 @@ function FilterCalendar(_a) {
11218
11264
  React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
11219
11265
  React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
11220
11266
  React__default__default.createElement("div", { className: "will-calendar-main" },
11221
- React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, calendarOffsetGroup: calendarOffsetGroup })),
11267
+ React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, calendarOffsetGroup: calendarOffsetGroup, requestDates: requestDates })),
11222
11268
  React__default__default.createElement("div", { className: "will-calendar-footer" },
11223
11269
  React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
11224
11270
  React__default__default.createElement("div", null,
@@ -11231,7 +11277,7 @@ function FilterCalendar(_a) {
11231
11277
  date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
11232
11278
  dateFormat: 'EEEEEE d.M.yyyy',
11233
11279
  }) || t('common:checkOut'))),
11234
- nights && (React__default__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
11280
+ !!nights && (React__default__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
11235
11281
  React__default__default.createElement("div", { className: "will-calendar-footer-actions" },
11236
11282
  React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: 'Clear dates' }),
11237
11283
  React__default__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:search") })))))));