willba-component-library 0.3.13 → 0.3.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.
- package/lib/assets/IconsSvg.d.ts +2 -1
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/FilterBar/FilterBar.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +2 -1
- package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts +2 -1
- package/lib/components/FilterBar/components/categories/Categories.d.ts +2 -1
- package/lib/components/FilterBar/components/common/FilterSectionHeader.d.ts +2 -2
- package/lib/components/FilterBar/components/dates/Dates.d.ts +2 -2
- package/lib/components/FilterBar/components/divider/Divider.d.ts +2 -1
- package/lib/components/FilterBar/components/guests/Guests.d.ts +2 -1
- package/lib/components/FilterBar/components/locations/Locations.d.ts +2 -1
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +2 -1
- package/lib/components/FilterCalendar/components/Footer.d.ts +2 -1
- package/lib/core/components/buttons/close-button/CloseButton.d.ts +2 -1
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -1
- package/lib/core/components/calendar/Calendar.d.ts +2 -1
- package/lib/index.d.ts +4 -5
- package/lib/index.esm.js +289 -213
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +376 -300
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +379 -302
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +1 -1
package/lib/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var React__default = require('react');
|
|
3
|
+
var React = require('react');
|
|
5
4
|
|
|
6
5
|
function _interopNamespaceDefault(e) {
|
|
7
6
|
var n = Object.create(null);
|
|
@@ -20,7 +19,7 @@ function _interopNamespaceDefault(e) {
|
|
|
20
19
|
return Object.freeze(n);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
|
-
var
|
|
22
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
24
23
|
|
|
25
24
|
/******************************************************************************
|
|
26
25
|
Copyright (c) Microsoft Corporation.
|
|
@@ -220,8 +219,8 @@ styleInject(css_248z$h);
|
|
|
220
219
|
*/
|
|
221
220
|
var Button$1 = function (_a) {
|
|
222
221
|
var _b = _a.type, type = _b === void 0 ? 'primary' : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? 'medium' : _c, onClick = _a.onClick, label = _a.label;
|
|
223
|
-
var _d = __read(
|
|
224
|
-
return (
|
|
222
|
+
var _d = __read(React.useState(4), 2), theState = _d[0]; _d[1];
|
|
223
|
+
return (React.createElement("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
|
|
225
224
|
};
|
|
226
225
|
|
|
227
226
|
function warn() {
|
|
@@ -362,7 +361,7 @@ const initReactI18next = {
|
|
|
362
361
|
}
|
|
363
362
|
};
|
|
364
363
|
|
|
365
|
-
const I18nContext =
|
|
364
|
+
const I18nContext = React.createContext();
|
|
366
365
|
class ReportNamespaces {
|
|
367
366
|
constructor() {
|
|
368
367
|
this.usedNamespaces = {};
|
|
@@ -378,8 +377,8 @@ class ReportNamespaces {
|
|
|
378
377
|
}
|
|
379
378
|
|
|
380
379
|
const usePrevious = (value, ignore) => {
|
|
381
|
-
const ref =
|
|
382
|
-
|
|
380
|
+
const ref = React.useRef();
|
|
381
|
+
React.useEffect(() => {
|
|
383
382
|
ref.current = ignore ? ref.current : value;
|
|
384
383
|
}, [value, ignore]);
|
|
385
384
|
return ref.current;
|
|
@@ -392,7 +391,7 @@ function useTranslation(ns) {
|
|
|
392
391
|
const {
|
|
393
392
|
i18n: i18nFromContext,
|
|
394
393
|
defaultNS: defaultNSFromContext
|
|
395
|
-
} =
|
|
394
|
+
} = React.useContext(I18nContext) || {};
|
|
396
395
|
const i18n = i18nFromProps || i18nFromContext || getI18n();
|
|
397
396
|
if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
|
|
398
397
|
if (!i18n) {
|
|
@@ -425,12 +424,12 @@ function useTranslation(ns) {
|
|
|
425
424
|
function getT() {
|
|
426
425
|
return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
|
|
427
426
|
}
|
|
428
|
-
const [t, setT] =
|
|
427
|
+
const [t, setT] = React.useState(getT);
|
|
429
428
|
let joinedNS = namespaces.join();
|
|
430
429
|
if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
|
|
431
430
|
const previousJoinedNS = usePrevious(joinedNS);
|
|
432
|
-
const isMounted =
|
|
433
|
-
|
|
431
|
+
const isMounted = React.useRef(true);
|
|
432
|
+
React.useEffect(() => {
|
|
434
433
|
const {
|
|
435
434
|
bindI18n,
|
|
436
435
|
bindI18nStore
|
|
@@ -461,8 +460,8 @@ function useTranslation(ns) {
|
|
|
461
460
|
if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
|
|
462
461
|
};
|
|
463
462
|
}, [i18n, joinedNS]);
|
|
464
|
-
const isInitial =
|
|
465
|
-
|
|
463
|
+
const isInitial = React.useRef(true);
|
|
464
|
+
React.useEffect(() => {
|
|
466
465
|
if (isMounted.current && !isInitial.current) {
|
|
467
466
|
setT(getT);
|
|
468
467
|
}
|
|
@@ -490,7 +489,7 @@ var DefaultContext = {
|
|
|
490
489
|
style: undefined,
|
|
491
490
|
attr: undefined
|
|
492
491
|
};
|
|
493
|
-
var IconContext =
|
|
492
|
+
var IconContext = React.createContext && React.createContext(DefaultContext);
|
|
494
493
|
|
|
495
494
|
var __assign$1 = undefined && undefined.__assign || function () {
|
|
496
495
|
__assign$1 = Object.assign || function (t) {
|
|
@@ -512,7 +511,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
|
|
|
512
511
|
};
|
|
513
512
|
function Tree2Element(tree) {
|
|
514
513
|
return tree && tree.map(function (node, i) {
|
|
515
|
-
return
|
|
514
|
+
return React.createElement(node.tag, __assign$1({
|
|
516
515
|
key: i
|
|
517
516
|
}, node.attr), Tree2Element(node.child));
|
|
518
517
|
});
|
|
@@ -520,7 +519,7 @@ function Tree2Element(tree) {
|
|
|
520
519
|
function GenIcon(data) {
|
|
521
520
|
// eslint-disable-next-line react/display-name
|
|
522
521
|
return function (props) {
|
|
523
|
-
return
|
|
522
|
+
return React.createElement(IconBase, __assign$1({
|
|
524
523
|
attr: __assign$1({}, data.attr)
|
|
525
524
|
}, props), Tree2Element(data.child));
|
|
526
525
|
};
|
|
@@ -535,7 +534,7 @@ function IconBase(props) {
|
|
|
535
534
|
var className;
|
|
536
535
|
if (conf.className) className = conf.className;
|
|
537
536
|
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
538
|
-
return
|
|
537
|
+
return React.createElement("svg", __assign$1({
|
|
539
538
|
stroke: "currentColor",
|
|
540
539
|
fill: "currentColor",
|
|
541
540
|
strokeWidth: "0"
|
|
@@ -547,9 +546,9 @@ function IconBase(props) {
|
|
|
547
546
|
height: computedSize,
|
|
548
547
|
width: computedSize,
|
|
549
548
|
xmlns: "http://www.w3.org/2000/svg"
|
|
550
|
-
}), title &&
|
|
549
|
+
}), title && React.createElement("title", null, title), props.children);
|
|
551
550
|
};
|
|
552
|
-
return IconContext !== undefined ?
|
|
551
|
+
return IconContext !== undefined ? React.createElement(IconContext.Consumer, null, function (conf) {
|
|
553
552
|
return elem(conf);
|
|
554
553
|
}) : elem(DefaultContext);
|
|
555
554
|
}
|
|
@@ -575,8 +574,8 @@ var css_248z$g = "@import url('https://fonts.googleapis.com/css2?family=Montserr
|
|
|
575
574
|
styleInject(css_248z$g);
|
|
576
575
|
|
|
577
576
|
var useAwaitRender = function () {
|
|
578
|
-
var _a = __read(
|
|
579
|
-
|
|
577
|
+
var _a = __read(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
578
|
+
React.useEffect(function () {
|
|
580
579
|
setInitialRenderComplete(true);
|
|
581
580
|
}, []);
|
|
582
581
|
if (!initialRenderComplete)
|
|
@@ -2971,8 +2970,8 @@ instance.use(initReactI18next).init({
|
|
|
2971
2970
|
|
|
2972
2971
|
var useUpdateTranslations = function (_a) {
|
|
2973
2972
|
var language = _a.language;
|
|
2974
|
-
var _b = __read(
|
|
2975
|
-
|
|
2973
|
+
var _b = __read(React.useState(0), 2); _b[0]; var setRerenderKey = _b[1];
|
|
2974
|
+
React.useEffect(function () {
|
|
2976
2975
|
instance.changeLanguage(language);
|
|
2977
2976
|
setRerenderKey(function (prevKey) { return prevKey + 1; });
|
|
2978
2977
|
}, [language]);
|
|
@@ -2981,8 +2980,8 @@ var useUpdateTranslations = function (_a) {
|
|
|
2981
2980
|
// TODO - Refactor and rename this hook
|
|
2982
2981
|
var useCloseFilterSection = function (_a) {
|
|
2983
2982
|
var handleSelectedFilter = _a.handleSelectedFilter;
|
|
2984
|
-
var filtersRef =
|
|
2985
|
-
|
|
2983
|
+
var filtersRef = React.useRef(null);
|
|
2984
|
+
React.useEffect(function () {
|
|
2986
2985
|
var handleClickOutside = function (event) {
|
|
2987
2986
|
if (filtersRef.current &&
|
|
2988
2987
|
!filtersRef.current.contains(event.target)) {
|
|
@@ -2998,8 +2997,8 @@ var useCloseFilterSection = function (_a) {
|
|
|
2998
2997
|
};
|
|
2999
2998
|
|
|
3000
2999
|
var useAutoFocus = function (autoFocus) {
|
|
3001
|
-
var ref =
|
|
3002
|
-
|
|
3000
|
+
var ref = React.useRef(null);
|
|
3001
|
+
React.useEffect(function () {
|
|
3003
3002
|
if (!autoFocus || !ref.current)
|
|
3004
3003
|
return;
|
|
3005
3004
|
var attemptFocus = function (attempts) {
|
|
@@ -3024,7 +3023,9 @@ styleInject(css_248z$f);
|
|
|
3024
3023
|
|
|
3025
3024
|
var SubmitButton = function (_a) {
|
|
3026
3025
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3027
|
-
return (
|
|
3026
|
+
return (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
|
|
3027
|
+
isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
|
|
3028
|
+
label || 'Label'));
|
|
3028
3029
|
};
|
|
3029
3030
|
|
|
3030
3031
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -3037,7 +3038,8 @@ styleInject(css_248z$e);
|
|
|
3037
3038
|
|
|
3038
3039
|
var CloseButton = function (_a) {
|
|
3039
3040
|
var handleClose = _a.handleClose;
|
|
3040
|
-
return (
|
|
3041
|
+
return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
3042
|
+
React.createElement(IoIosCloseCircleOutline, null)));
|
|
3041
3043
|
};
|
|
3042
3044
|
|
|
3043
3045
|
function _typeof(o) {
|
|
@@ -7318,7 +7320,7 @@ function parseFromToProps(props) {
|
|
|
7318
7320
|
*
|
|
7319
7321
|
* Access to this context from the {@link useDayPicker} hook.
|
|
7320
7322
|
*/
|
|
7321
|
-
var DayPickerContext =
|
|
7323
|
+
var DayPickerContext = React.createContext(undefined);
|
|
7322
7324
|
/**
|
|
7323
7325
|
* The provider for the {@link DayPickerContext}, assigning the defaults from the
|
|
7324
7326
|
* initial DayPicker props.
|
|
@@ -7340,7 +7342,7 @@ function DayPickerProvider(props) {
|
|
|
7340
7342
|
onSelect = initialProps.onSelect;
|
|
7341
7343
|
}
|
|
7342
7344
|
var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
|
|
7343
|
-
return (
|
|
7345
|
+
return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
|
|
7344
7346
|
}
|
|
7345
7347
|
/**
|
|
7346
7348
|
* Hook to access the {@link DayPickerContextValue}.
|
|
@@ -7349,7 +7351,7 @@ function DayPickerProvider(props) {
|
|
|
7349
7351
|
* internal or custom components.
|
|
7350
7352
|
*/
|
|
7351
7353
|
function useDayPicker() {
|
|
7352
|
-
var context =
|
|
7354
|
+
var context = React.useContext(DayPickerContext);
|
|
7353
7355
|
if (!context) {
|
|
7354
7356
|
throw new Error("useDayPicker must be used within a DayPickerProvider.");
|
|
7355
7357
|
}
|
|
@@ -7359,15 +7361,15 @@ function useDayPicker() {
|
|
|
7359
7361
|
/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
|
|
7360
7362
|
function CaptionLabel(props) {
|
|
7361
7363
|
var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
|
|
7362
|
-
return (
|
|
7364
|
+
return (React.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
|
|
7363
7365
|
}
|
|
7364
7366
|
|
|
7365
7367
|
/**
|
|
7366
7368
|
* Render the icon in the styled drop-down.
|
|
7367
7369
|
*/
|
|
7368
7370
|
function IconDropdown(props) {
|
|
7369
|
-
return (
|
|
7370
|
-
|
|
7371
|
+
return (React.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
|
|
7372
|
+
React.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
|
|
7371
7373
|
}
|
|
7372
7374
|
|
|
7373
7375
|
/**
|
|
@@ -7379,12 +7381,12 @@ function Dropdown(props) {
|
|
|
7379
7381
|
var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
|
|
7380
7382
|
var dayPicker = useDayPicker();
|
|
7381
7383
|
var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
|
|
7382
|
-
return (
|
|
7383
|
-
|
|
7384
|
-
|
|
7385
|
-
|
|
7384
|
+
return (React.createElement("div", { className: className, style: style },
|
|
7385
|
+
React.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
|
|
7386
|
+
React.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
|
|
7387
|
+
React.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
|
|
7386
7388
|
caption,
|
|
7387
|
-
|
|
7389
|
+
React.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
|
|
7388
7390
|
}
|
|
7389
7391
|
|
|
7390
7392
|
/** Render the dropdown to navigate between months. */
|
|
@@ -7393,9 +7395,9 @@ function MonthsDropdown(props) {
|
|
|
7393
7395
|
var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, formatMonthCaption = _b.formatters.formatMonthCaption, classNames = _b.classNames, components = _b.components, labelMonthDropdown = _b.labels.labelMonthDropdown;
|
|
7394
7396
|
// Dropdown should appear only when both from/toDate is set
|
|
7395
7397
|
if (!fromDate)
|
|
7396
|
-
return
|
|
7398
|
+
return React.createElement(React.Fragment, null);
|
|
7397
7399
|
if (!toDate)
|
|
7398
|
-
return
|
|
7400
|
+
return React.createElement(React.Fragment, null);
|
|
7399
7401
|
var dropdownMonths = [];
|
|
7400
7402
|
if (isSameYear(fromDate, toDate)) {
|
|
7401
7403
|
// only display the months included in the range
|
|
@@ -7417,7 +7419,7 @@ function MonthsDropdown(props) {
|
|
|
7417
7419
|
props.onChange(newMonth);
|
|
7418
7420
|
};
|
|
7419
7421
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7420
|
-
return (
|
|
7422
|
+
return (React.createElement(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
|
|
7421
7423
|
}
|
|
7422
7424
|
|
|
7423
7425
|
/**
|
|
@@ -7431,9 +7433,9 @@ function YearsDropdown(props) {
|
|
|
7431
7433
|
var years = [];
|
|
7432
7434
|
// Dropdown should appear only when both from/toDate is set
|
|
7433
7435
|
if (!fromDate)
|
|
7434
|
-
return
|
|
7436
|
+
return React.createElement(React.Fragment, null);
|
|
7435
7437
|
if (!toDate)
|
|
7436
|
-
return
|
|
7438
|
+
return React.createElement(React.Fragment, null);
|
|
7437
7439
|
var fromYear = fromDate.getFullYear();
|
|
7438
7440
|
var toYear = toDate.getFullYear();
|
|
7439
7441
|
for (var year = fromYear; year <= toYear; year++) {
|
|
@@ -7444,7 +7446,7 @@ function YearsDropdown(props) {
|
|
|
7444
7446
|
props.onChange(newMonth);
|
|
7445
7447
|
};
|
|
7446
7448
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7447
|
-
return (
|
|
7449
|
+
return (React.createElement(DropdownComponent, { name: "years", "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
|
|
7448
7450
|
}
|
|
7449
7451
|
|
|
7450
7452
|
/**
|
|
@@ -7457,7 +7459,7 @@ function YearsDropdown(props) {
|
|
|
7457
7459
|
* argument, which will be always returned as `value`.
|
|
7458
7460
|
*/
|
|
7459
7461
|
function useControlledValue(defaultValue, controlledValue) {
|
|
7460
|
-
var _a =
|
|
7462
|
+
var _a = React.useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
|
|
7461
7463
|
var value = controlledValue === undefined ? uncontrolledValue : controlledValue;
|
|
7462
7464
|
return [value, setValue];
|
|
7463
7465
|
}
|
|
@@ -7575,7 +7577,7 @@ function getPreviousMonth(startingMonth, options) {
|
|
|
7575
7577
|
* The Navigation context shares details and methods to navigate the months in DayPicker.
|
|
7576
7578
|
* Access this context from the {@link useNavigation} hook.
|
|
7577
7579
|
*/
|
|
7578
|
-
var NavigationContext =
|
|
7580
|
+
var NavigationContext = React.createContext(undefined);
|
|
7579
7581
|
/** Provides the values for the {@link NavigationContext}. */
|
|
7580
7582
|
function NavigationProvider(props) {
|
|
7581
7583
|
var dayPicker = useDayPicker();
|
|
@@ -7608,7 +7610,7 @@ function NavigationProvider(props) {
|
|
|
7608
7610
|
nextMonth: nextMonth,
|
|
7609
7611
|
isDateDisplayed: isDateDisplayed
|
|
7610
7612
|
};
|
|
7611
|
-
return (
|
|
7613
|
+
return (React.createElement(NavigationContext.Provider, { value: value }, props.children));
|
|
7612
7614
|
}
|
|
7613
7615
|
/**
|
|
7614
7616
|
* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
|
|
@@ -7617,7 +7619,7 @@ function NavigationProvider(props) {
|
|
|
7617
7619
|
* This hook is meant to be used inside internal or custom components.
|
|
7618
7620
|
*/
|
|
7619
7621
|
function useNavigation() {
|
|
7620
|
-
var context =
|
|
7622
|
+
var context = React.useContext(NavigationContext);
|
|
7621
7623
|
if (!context) {
|
|
7622
7624
|
throw new Error('useNavigation must be used within a NavigationProvider');
|
|
7623
7625
|
}
|
|
@@ -7635,31 +7637,31 @@ function CaptionDropdowns(props) {
|
|
|
7635
7637
|
goToMonth(newMonth);
|
|
7636
7638
|
};
|
|
7637
7639
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7638
|
-
var captionLabel = (
|
|
7639
|
-
return (
|
|
7640
|
-
|
|
7641
|
-
|
|
7642
|
-
|
|
7640
|
+
var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7641
|
+
return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
|
|
7642
|
+
React.createElement("div", { className: classNames.vhidden }, captionLabel),
|
|
7643
|
+
React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
|
|
7644
|
+
React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
|
|
7643
7645
|
}
|
|
7644
7646
|
|
|
7645
7647
|
/**
|
|
7646
7648
|
* Render the "previous month" button in the navigation.
|
|
7647
7649
|
*/
|
|
7648
7650
|
function IconLeft(props) {
|
|
7649
|
-
return (
|
|
7650
|
-
|
|
7651
|
+
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7652
|
+
React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
|
|
7651
7653
|
}
|
|
7652
7654
|
|
|
7653
7655
|
/**
|
|
7654
7656
|
* Render the "next month" button in the navigation.
|
|
7655
7657
|
*/
|
|
7656
7658
|
function IconRight(props) {
|
|
7657
|
-
return (
|
|
7658
|
-
|
|
7659
|
+
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7660
|
+
React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
|
|
7659
7661
|
}
|
|
7660
7662
|
|
|
7661
7663
|
/** Render a button HTML element applying the reset class name. */
|
|
7662
|
-
var Button =
|
|
7664
|
+
var Button = React.forwardRef(function (props, ref) {
|
|
7663
7665
|
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
|
|
7664
7666
|
var classNamesArr = [classNames.button_reset, classNames.button];
|
|
7665
7667
|
if (props.className) {
|
|
@@ -7670,7 +7672,7 @@ var Button = React__default.forwardRef(function (props, ref) {
|
|
|
7670
7672
|
if (props.style) {
|
|
7671
7673
|
Object.assign(style, props.style);
|
|
7672
7674
|
}
|
|
7673
|
-
return (
|
|
7675
|
+
return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
7674
7676
|
});
|
|
7675
7677
|
|
|
7676
7678
|
/** A component rendering the navigation buttons or the drop-downs. */
|
|
@@ -7678,7 +7680,7 @@ function Navigation(props) {
|
|
|
7678
7680
|
var _a, _b;
|
|
7679
7681
|
var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
|
|
7680
7682
|
if (!props.nextMonth && !props.previousMonth) {
|
|
7681
|
-
return
|
|
7683
|
+
return React.createElement(React.Fragment, null);
|
|
7682
7684
|
}
|
|
7683
7685
|
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
7684
7686
|
var previousClassName = [
|
|
@@ -7692,9 +7694,9 @@ function Navigation(props) {
|
|
|
7692
7694
|
].join(' ');
|
|
7693
7695
|
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
7694
7696
|
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
7695
|
-
return (
|
|
7696
|
-
!props.hidePrevious && (
|
|
7697
|
-
!props.hideNext && (
|
|
7697
|
+
return (React.createElement("div", { className: classNames.nav, style: styles.nav },
|
|
7698
|
+
!props.hidePrevious && (React.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
|
|
7699
|
+
!props.hideNext && (React.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
|
|
7698
7700
|
}
|
|
7699
7701
|
|
|
7700
7702
|
/**
|
|
@@ -7720,7 +7722,7 @@ function CaptionNavigation(props) {
|
|
|
7720
7722
|
return;
|
|
7721
7723
|
goToMonth(nextMonth);
|
|
7722
7724
|
};
|
|
7723
|
-
return (
|
|
7725
|
+
return (React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
|
|
7724
7726
|
}
|
|
7725
7727
|
|
|
7726
7728
|
/**
|
|
@@ -7733,22 +7735,22 @@ function Caption(props) {
|
|
|
7733
7735
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7734
7736
|
var caption;
|
|
7735
7737
|
if (disableNavigation) {
|
|
7736
|
-
caption = (
|
|
7738
|
+
caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7737
7739
|
}
|
|
7738
7740
|
else if (captionLayout === 'dropdown') {
|
|
7739
|
-
caption = (
|
|
7741
|
+
caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
|
|
7740
7742
|
}
|
|
7741
7743
|
else if (captionLayout === 'dropdown-buttons') {
|
|
7742
|
-
caption = (
|
|
7743
|
-
|
|
7744
|
-
|
|
7744
|
+
caption = (React.createElement(React.Fragment, null,
|
|
7745
|
+
React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
|
|
7746
|
+
React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7745
7747
|
}
|
|
7746
7748
|
else {
|
|
7747
|
-
caption = (
|
|
7748
|
-
|
|
7749
|
-
|
|
7749
|
+
caption = (React.createElement(React.Fragment, null,
|
|
7750
|
+
React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
|
|
7751
|
+
React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7750
7752
|
}
|
|
7751
|
-
return (
|
|
7753
|
+
return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
|
|
7752
7754
|
}
|
|
7753
7755
|
|
|
7754
7756
|
/** Render the Footer component (empty as default).*/
|
|
@@ -7756,10 +7758,10 @@ function Caption(props) {
|
|
|
7756
7758
|
function Footer$1(props) {
|
|
7757
7759
|
var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
|
|
7758
7760
|
if (!footer)
|
|
7759
|
-
return
|
|
7760
|
-
return (
|
|
7761
|
-
|
|
7762
|
-
|
|
7761
|
+
return React.createElement(React.Fragment, null);
|
|
7762
|
+
return (React.createElement("tfoot", { className: tfoot, style: styles.tfoot },
|
|
7763
|
+
React.createElement("tr", null,
|
|
7764
|
+
React.createElement("td", { colSpan: 8 }, footer))));
|
|
7763
7765
|
}
|
|
7764
7766
|
|
|
7765
7767
|
/**
|
|
@@ -7788,9 +7790,9 @@ ISOWeek) {
|
|
|
7788
7790
|
function HeadRow() {
|
|
7789
7791
|
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
|
|
7790
7792
|
var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
|
|
7791
|
-
return (
|
|
7792
|
-
showWeekNumber && (
|
|
7793
|
-
weekdays.map(function (weekday, i) { return (
|
|
7793
|
+
return (React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
|
|
7794
|
+
showWeekNumber && (React.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
|
|
7795
|
+
weekdays.map(function (weekday, i) { return (React.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
|
|
7794
7796
|
}
|
|
7795
7797
|
|
|
7796
7798
|
/** Render the table head. */
|
|
@@ -7798,14 +7800,14 @@ function Head() {
|
|
|
7798
7800
|
var _a;
|
|
7799
7801
|
var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
|
|
7800
7802
|
var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
|
|
7801
|
-
return (
|
|
7802
|
-
|
|
7803
|
+
return (React.createElement("thead", { style: styles.head, className: classNames.head },
|
|
7804
|
+
React.createElement(HeadRowComponent, null)));
|
|
7803
7805
|
}
|
|
7804
7806
|
|
|
7805
7807
|
/** Render the content of the day cell. */
|
|
7806
7808
|
function DayContent(props) {
|
|
7807
7809
|
var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
|
|
7808
|
-
return
|
|
7810
|
+
return React.createElement(React.Fragment, null, formatDay(props.date, { locale: locale }));
|
|
7809
7811
|
}
|
|
7810
7812
|
|
|
7811
7813
|
/**
|
|
@@ -7814,7 +7816,7 @@ function DayContent(props) {
|
|
|
7814
7816
|
*
|
|
7815
7817
|
* Access this context from the {@link useSelectMultiple} hook.
|
|
7816
7818
|
*/
|
|
7817
|
-
var SelectMultipleContext =
|
|
7819
|
+
var SelectMultipleContext = React.createContext(undefined);
|
|
7818
7820
|
/** Provides the values for the {@link SelectMultipleContext}. */
|
|
7819
7821
|
function SelectMultipleProvider(props) {
|
|
7820
7822
|
if (!isDayPickerMultiple(props.initialProps)) {
|
|
@@ -7824,9 +7826,9 @@ function SelectMultipleProvider(props) {
|
|
|
7824
7826
|
disabled: []
|
|
7825
7827
|
}
|
|
7826
7828
|
};
|
|
7827
|
-
return (
|
|
7829
|
+
return (React.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
|
|
7828
7830
|
}
|
|
7829
|
-
return (
|
|
7831
|
+
return (React.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7830
7832
|
}
|
|
7831
7833
|
function SelectMultipleProviderInternal(_a) {
|
|
7832
7834
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7871,7 +7873,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7871
7873
|
onDayClick: onDayClick,
|
|
7872
7874
|
modifiers: modifiers
|
|
7873
7875
|
};
|
|
7874
|
-
return (
|
|
7876
|
+
return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
|
|
7875
7877
|
}
|
|
7876
7878
|
/**
|
|
7877
7879
|
* Hook to access the {@link SelectMultipleContextValue}.
|
|
@@ -7879,7 +7881,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7879
7881
|
* This hook is meant to be used inside internal or custom components.
|
|
7880
7882
|
*/
|
|
7881
7883
|
function useSelectMultiple() {
|
|
7882
|
-
var context =
|
|
7884
|
+
var context = React.useContext(SelectMultipleContext);
|
|
7883
7885
|
if (!context) {
|
|
7884
7886
|
throw new Error('useSelectMultiple must be used within a SelectMultipleProvider');
|
|
7885
7887
|
}
|
|
@@ -7927,7 +7929,7 @@ function addToRange(day, range) {
|
|
|
7927
7929
|
*
|
|
7928
7930
|
* Access this context from the {@link useSelectRange} hook.
|
|
7929
7931
|
*/
|
|
7930
|
-
var SelectRangeContext =
|
|
7932
|
+
var SelectRangeContext = React.createContext(undefined);
|
|
7931
7933
|
/** Provides the values for the {@link SelectRangeProvider}. */
|
|
7932
7934
|
function SelectRangeProvider(props) {
|
|
7933
7935
|
if (!isDayPickerRange(props.initialProps)) {
|
|
@@ -7940,9 +7942,9 @@ function SelectRangeProvider(props) {
|
|
|
7940
7942
|
disabled: []
|
|
7941
7943
|
}
|
|
7942
7944
|
};
|
|
7943
|
-
return (
|
|
7945
|
+
return (React.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
|
|
7944
7946
|
}
|
|
7945
|
-
return (
|
|
7947
|
+
return (React.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7946
7948
|
}
|
|
7947
7949
|
function SelectRangeProviderInternal(_a) {
|
|
7948
7950
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8013,7 +8015,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
8013
8015
|
});
|
|
8014
8016
|
}
|
|
8015
8017
|
}
|
|
8016
|
-
return (
|
|
8018
|
+
return (React.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
|
|
8017
8019
|
}
|
|
8018
8020
|
/**
|
|
8019
8021
|
* Hook to access the {@link SelectRangeContextValue}.
|
|
@@ -8021,7 +8023,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
8021
8023
|
* This hook is meant to be used inside internal or custom components.
|
|
8022
8024
|
*/
|
|
8023
8025
|
function useSelectRange() {
|
|
8024
|
-
var context =
|
|
8026
|
+
var context = React.useContext(SelectRangeContext);
|
|
8025
8027
|
if (!context) {
|
|
8026
8028
|
throw new Error('useSelectRange must be used within a SelectRangeProvider');
|
|
8027
8029
|
}
|
|
@@ -8104,7 +8106,7 @@ function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
|
|
|
8104
8106
|
}
|
|
8105
8107
|
|
|
8106
8108
|
/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
|
|
8107
|
-
var ModifiersContext =
|
|
8109
|
+
var ModifiersContext = React.createContext(undefined);
|
|
8108
8110
|
/** Provide the value for the {@link ModifiersContext}. */
|
|
8109
8111
|
function ModifiersProvider(props) {
|
|
8110
8112
|
var dayPicker = useDayPicker();
|
|
@@ -8113,7 +8115,7 @@ function ModifiersProvider(props) {
|
|
|
8113
8115
|
var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
|
|
8114
8116
|
var customModifiers = getCustomModifiers(dayPicker.modifiers);
|
|
8115
8117
|
var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
|
|
8116
|
-
return (
|
|
8118
|
+
return (React.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
|
|
8117
8119
|
}
|
|
8118
8120
|
/**
|
|
8119
8121
|
* Return the modifiers used by DayPicker.
|
|
@@ -8123,7 +8125,7 @@ function ModifiersProvider(props) {
|
|
|
8123
8125
|
*
|
|
8124
8126
|
*/
|
|
8125
8127
|
function useModifiers() {
|
|
8126
|
-
var context =
|
|
8128
|
+
var context = React.useContext(ModifiersContext);
|
|
8127
8129
|
if (!context) {
|
|
8128
8130
|
throw new Error('useModifiers must be used within a ModifiersProvider');
|
|
8129
8131
|
}
|
|
@@ -8361,13 +8363,13 @@ function getNextFocus(focusedDay, options) {
|
|
|
8361
8363
|
*
|
|
8362
8364
|
* Access this context from the {@link useFocusContext} hook.
|
|
8363
8365
|
*/
|
|
8364
|
-
var FocusContext =
|
|
8366
|
+
var FocusContext = React.createContext(undefined);
|
|
8365
8367
|
/** The provider for the {@link FocusContext}. */
|
|
8366
8368
|
function FocusProvider(props) {
|
|
8367
8369
|
var navigation = useNavigation();
|
|
8368
8370
|
var modifiers = useModifiers();
|
|
8369
|
-
var _a =
|
|
8370
|
-
var _b =
|
|
8371
|
+
var _a = React.useState(), focusedDay = _a[0], setFocusedDay = _a[1];
|
|
8372
|
+
var _b = React.useState(), lastFocused = _b[0], setLastFocused = _b[1];
|
|
8371
8373
|
var initialFocusTarget = getInitialFocusTarget(navigation.displayMonths, modifiers);
|
|
8372
8374
|
// TODO: cleanup and test obscure code below
|
|
8373
8375
|
var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
|
|
@@ -8411,7 +8413,7 @@ function FocusProvider(props) {
|
|
|
8411
8413
|
focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
|
|
8412
8414
|
focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
|
|
8413
8415
|
};
|
|
8414
|
-
return (
|
|
8416
|
+
return (React.createElement(FocusContext.Provider, { value: value }, props.children));
|
|
8415
8417
|
}
|
|
8416
8418
|
/**
|
|
8417
8419
|
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
@@ -8420,7 +8422,7 @@ function FocusProvider(props) {
|
|
|
8420
8422
|
* This hook is meant to be used inside internal or custom components.
|
|
8421
8423
|
*/
|
|
8422
8424
|
function useFocusContext() {
|
|
8423
|
-
var context =
|
|
8425
|
+
var context = React.useContext(FocusContext);
|
|
8424
8426
|
if (!context) {
|
|
8425
8427
|
throw new Error('useFocusContext must be used within a FocusProvider');
|
|
8426
8428
|
}
|
|
@@ -8452,16 +8454,16 @@ displayMonth) {
|
|
|
8452
8454
|
*
|
|
8453
8455
|
* Access this context from the {@link useSelectSingle} hook.
|
|
8454
8456
|
*/
|
|
8455
|
-
var SelectSingleContext =
|
|
8457
|
+
var SelectSingleContext = React.createContext(undefined);
|
|
8456
8458
|
/** Provides the values for the {@link SelectSingleProvider}. */
|
|
8457
8459
|
function SelectSingleProvider(props) {
|
|
8458
8460
|
if (!isDayPickerSingle(props.initialProps)) {
|
|
8459
8461
|
var emptyContextValue = {
|
|
8460
8462
|
selected: undefined
|
|
8461
8463
|
};
|
|
8462
|
-
return (
|
|
8464
|
+
return (React.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
|
|
8463
8465
|
}
|
|
8464
|
-
return (
|
|
8466
|
+
return (React.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
8465
8467
|
}
|
|
8466
8468
|
function SelectSingleProviderInternal(_a) {
|
|
8467
8469
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8478,7 +8480,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8478
8480
|
selected: initialProps.selected,
|
|
8479
8481
|
onDayClick: onDayClick
|
|
8480
8482
|
};
|
|
8481
|
-
return (
|
|
8483
|
+
return (React.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
|
|
8482
8484
|
}
|
|
8483
8485
|
/**
|
|
8484
8486
|
* Hook to access the {@link SelectSingleContextValue}.
|
|
@@ -8486,7 +8488,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8486
8488
|
* This hook is meant to be used inside internal or custom components.
|
|
8487
8489
|
*/
|
|
8488
8490
|
function useSelectSingle() {
|
|
8489
|
-
var context =
|
|
8491
|
+
var context = React.useContext(SelectSingleContext);
|
|
8490
8492
|
if (!context) {
|
|
8491
8493
|
throw new Error('useSelectSingle must be used within a SelectSingleProvider');
|
|
8492
8494
|
}
|
|
@@ -8725,7 +8727,7 @@ buttonRef) {
|
|
|
8725
8727
|
var selectedDays = useSelectedDays();
|
|
8726
8728
|
var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== 'default');
|
|
8727
8729
|
// Focus the button if the day is focused according to the focus context
|
|
8728
|
-
|
|
8730
|
+
React.useEffect(function () {
|
|
8729
8731
|
var _a;
|
|
8730
8732
|
if (activeModifiers.outside)
|
|
8731
8733
|
return;
|
|
@@ -8748,7 +8750,7 @@ buttonRef) {
|
|
|
8748
8750
|
var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
|
|
8749
8751
|
activeModifiers.hidden);
|
|
8750
8752
|
var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
|
|
8751
|
-
var children = (
|
|
8753
|
+
var children = (React.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
|
|
8752
8754
|
var divProps = {
|
|
8753
8755
|
style: style,
|
|
8754
8756
|
className: className,
|
|
@@ -8776,15 +8778,15 @@ buttonRef) {
|
|
|
8776
8778
|
* modifiers.
|
|
8777
8779
|
*/
|
|
8778
8780
|
function Day(props) {
|
|
8779
|
-
var buttonRef =
|
|
8781
|
+
var buttonRef = React.useRef(null);
|
|
8780
8782
|
var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
|
|
8781
8783
|
if (dayRender.isHidden) {
|
|
8782
|
-
return
|
|
8784
|
+
return React.createElement("div", { role: "gridcell" });
|
|
8783
8785
|
}
|
|
8784
8786
|
if (!dayRender.isButton) {
|
|
8785
|
-
return
|
|
8787
|
+
return React.createElement("div", __assign({}, dayRender.divProps));
|
|
8786
8788
|
}
|
|
8787
|
-
return
|
|
8789
|
+
return React.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
|
|
8788
8790
|
}
|
|
8789
8791
|
|
|
8790
8792
|
/**
|
|
@@ -8796,13 +8798,13 @@ function WeekNumber(props) {
|
|
|
8796
8798
|
var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
|
|
8797
8799
|
var content = formatWeekNumber(Number(weekNumber), { locale: locale });
|
|
8798
8800
|
if (!onWeekNumberClick) {
|
|
8799
|
-
return (
|
|
8801
|
+
return (React.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
|
|
8800
8802
|
}
|
|
8801
8803
|
var label = labelWeekNumber(Number(weekNumber), { locale: locale });
|
|
8802
8804
|
var handleClick = function (e) {
|
|
8803
8805
|
onWeekNumberClick(weekNumber, dates, e);
|
|
8804
8806
|
};
|
|
8805
|
-
return (
|
|
8807
|
+
return (React.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
|
|
8806
8808
|
}
|
|
8807
8809
|
|
|
8808
8810
|
/** Render a row in the calendar, with the days and the week number. */
|
|
@@ -8813,13 +8815,13 @@ function Row(props) {
|
|
|
8813
8815
|
var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
|
|
8814
8816
|
var weekNumberCell;
|
|
8815
8817
|
if (showWeekNumber) {
|
|
8816
|
-
weekNumberCell = (
|
|
8817
|
-
|
|
8818
|
+
weekNumberCell = (React.createElement("td", { className: classNames.cell, style: styles.cell },
|
|
8819
|
+
React.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
|
|
8818
8820
|
}
|
|
8819
|
-
return (
|
|
8821
|
+
return (React.createElement("tr", { className: classNames.row, style: styles.row },
|
|
8820
8822
|
weekNumberCell,
|
|
8821
|
-
props.dates.map(function (date) { return (
|
|
8822
|
-
|
|
8823
|
+
props.dates.map(function (date) { return (React.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
|
|
8824
|
+
React.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
|
|
8823
8825
|
}
|
|
8824
8826
|
|
|
8825
8827
|
/** Return the weeks between two dates. */
|
|
@@ -8887,10 +8889,10 @@ function Table(props) {
|
|
|
8887
8889
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
8888
8890
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
8889
8891
|
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
|
|
8890
|
-
return (
|
|
8891
|
-
!hideHead &&
|
|
8892
|
-
|
|
8893
|
-
|
|
8892
|
+
return (React.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
|
|
8893
|
+
!hideHead && React.createElement(HeadComponent, null),
|
|
8894
|
+
React.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
|
|
8895
|
+
React.createElement(FooterComponent, { displayMonth: props.displayMonth })));
|
|
8894
8896
|
}
|
|
8895
8897
|
|
|
8896
8898
|
/*
|
|
@@ -8934,8 +8936,8 @@ function canUseDOM() {
|
|
|
8934
8936
|
* @param deps
|
|
8935
8937
|
*/
|
|
8936
8938
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8937
|
-
?
|
|
8938
|
-
:
|
|
8939
|
+
? React__namespace.useLayoutEffect
|
|
8940
|
+
: React__namespace.useEffect;
|
|
8939
8941
|
var serverHandoffComplete = false;
|
|
8940
8942
|
var id = 0;
|
|
8941
8943
|
function genId() {
|
|
@@ -8948,7 +8950,7 @@ function useId(providedId) {
|
|
|
8948
8950
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8949
8951
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8950
8952
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8951
|
-
var _b =
|
|
8953
|
+
var _b = React__namespace.useState(initialId), id = _b[0], setId = _b[1];
|
|
8952
8954
|
useIsomorphicLayoutEffect(function () {
|
|
8953
8955
|
if (id === null) {
|
|
8954
8956
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8959,7 +8961,7 @@ function useId(providedId) {
|
|
|
8959
8961
|
}
|
|
8960
8962
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8961
8963
|
}, []);
|
|
8962
|
-
|
|
8964
|
+
React__namespace.useEffect(function () {
|
|
8963
8965
|
if (serverHandoffComplete === false) {
|
|
8964
8966
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8965
8967
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -9002,9 +9004,9 @@ function Month(props) {
|
|
|
9002
9004
|
style = __assign(__assign({}, style), styles.caption_between);
|
|
9003
9005
|
}
|
|
9004
9006
|
var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
|
|
9005
|
-
return (
|
|
9006
|
-
|
|
9007
|
-
|
|
9007
|
+
return (React.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
|
|
9008
|
+
React.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
|
|
9009
|
+
React.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
|
|
9008
9010
|
}
|
|
9009
9011
|
|
|
9010
9012
|
/** Render the container with the months according to the number of months to display. */
|
|
@@ -9013,9 +9015,9 @@ function Root(_a) {
|
|
|
9013
9015
|
var dayPicker = useDayPicker();
|
|
9014
9016
|
var focusContext = useFocusContext();
|
|
9015
9017
|
var navigation = useNavigation();
|
|
9016
|
-
var _b =
|
|
9018
|
+
var _b = React.useState(false), hasInitialFocus = _b[0], setHasInitialFocus = _b[1];
|
|
9017
9019
|
// Focus the focus target when initialFocus is passed in
|
|
9018
|
-
|
|
9020
|
+
React.useEffect(function () {
|
|
9019
9021
|
if (!dayPicker.initialFocus)
|
|
9020
9022
|
return;
|
|
9021
9023
|
if (!focusContext.focusTarget)
|
|
@@ -9046,20 +9048,20 @@ function Root(_a) {
|
|
|
9046
9048
|
var _a;
|
|
9047
9049
|
return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
|
|
9048
9050
|
}, {});
|
|
9049
|
-
return (
|
|
9050
|
-
|
|
9051
|
+
return (React.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
|
|
9052
|
+
React.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
|
|
9051
9053
|
}
|
|
9052
9054
|
|
|
9053
9055
|
/** Provide the value for all the context providers. */
|
|
9054
9056
|
function RootProvider(props) {
|
|
9055
9057
|
var children = props.children, initialProps = __rest(props, ["children"]);
|
|
9056
|
-
return (
|
|
9057
|
-
|
|
9058
|
-
|
|
9059
|
-
|
|
9060
|
-
|
|
9061
|
-
|
|
9062
|
-
|
|
9058
|
+
return (React.createElement(DayPickerProvider, { initialProps: initialProps },
|
|
9059
|
+
React.createElement(NavigationProvider, null,
|
|
9060
|
+
React.createElement(SelectSingleProvider, { initialProps: initialProps },
|
|
9061
|
+
React.createElement(SelectMultipleProvider, { initialProps: initialProps },
|
|
9062
|
+
React.createElement(SelectRangeProvider, { initialProps: initialProps },
|
|
9063
|
+
React.createElement(ModifiersProvider, null,
|
|
9064
|
+
React.createElement(FocusProvider, null, children))))))));
|
|
9063
9065
|
}
|
|
9064
9066
|
|
|
9065
9067
|
/**
|
|
@@ -9150,8 +9152,8 @@ function RootProvider(props) {
|
|
|
9150
9152
|
* ```
|
|
9151
9153
|
*/
|
|
9152
9154
|
function DayPicker(props) {
|
|
9153
|
-
return (
|
|
9154
|
-
|
|
9155
|
+
return (React.createElement(RootProvider, __assign({}, props),
|
|
9156
|
+
React.createElement(Root, { initialProps: props })));
|
|
9155
9157
|
}
|
|
9156
9158
|
|
|
9157
9159
|
var reactResponsive$1 = {exports: {}};
|
|
@@ -9165,7 +9167,7 @@ function requireReactResponsive () {
|
|
|
9165
9167
|
hasRequiredReactResponsive = 1;
|
|
9166
9168
|
(function (module, exports) {
|
|
9167
9169
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
9168
|
-
module.exports = factory(
|
|
9170
|
+
module.exports = factory(React);
|
|
9169
9171
|
})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
|
|
9170
9172
|
return /******/ (() => { // webpackBootstrap
|
|
9171
9173
|
/******/ var __webpack_modules__ = ({
|
|
@@ -10994,15 +10996,19 @@ var IconsSvg = function (_a) {
|
|
|
10994
10996
|
var fill = _a.fill, size = _a.size, icon = _a.icon;
|
|
10995
10997
|
switch (icon) {
|
|
10996
10998
|
case 'spinner':
|
|
10997
|
-
return (
|
|
10999
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
|
|
11000
|
+
React.createElement("style", null, "\n .spinner_z9k8 {\n transform-origin: center;\n animation: spinner_StKS .75s infinite linear;\n }\n @keyframes spinner_StKS {\n 100% {\n transform: rotate(360deg);\n }\n }\n "),
|
|
11001
|
+
React.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
|
|
11002
|
+
React.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
|
|
10998
11003
|
case 'warning':
|
|
10999
|
-
return (
|
|
11004
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
|
|
11000
11005
|
verticalAlign: 'middle',
|
|
11001
11006
|
fill: fill,
|
|
11002
11007
|
overflow: 'hidden',
|
|
11003
11008
|
minWidth: '25px',
|
|
11004
11009
|
minHeight: '25px',
|
|
11005
|
-
}, viewBox: "0 0 1024 1024", version: "1.1"
|
|
11010
|
+
}, viewBox: "0 0 1024 1024", version: "1.1" },
|
|
11011
|
+
React.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
|
|
11006
11012
|
default:
|
|
11007
11013
|
return null;
|
|
11008
11014
|
}
|
|
@@ -11328,7 +11334,7 @@ var checkForContinuousSelection = function (_a) {
|
|
|
11328
11334
|
calendarRangeTo &&
|
|
11329
11335
|
areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
|
|
11330
11336
|
});
|
|
11331
|
-
|
|
11337
|
+
React.useEffect(function () {
|
|
11332
11338
|
if ((rangeContext &&
|
|
11333
11339
|
calendarRangeFrom &&
|
|
11334
11340
|
!startIsEqualOrBeforeRangeContextEnd) ||
|
|
@@ -11343,7 +11349,7 @@ var checkForContinuousSelection = function (_a) {
|
|
|
11343
11349
|
|
|
11344
11350
|
var useCalendarTooltips = function (_a) {
|
|
11345
11351
|
var showFeedback = _a.showFeedback;
|
|
11346
|
-
return
|
|
11352
|
+
return React.useEffect(function () {
|
|
11347
11353
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11348
11354
|
return;
|
|
11349
11355
|
// Children
|
|
@@ -11420,7 +11426,7 @@ var useCalendarTooltips = function (_a) {
|
|
|
11420
11426
|
|
|
11421
11427
|
var useCalendarLoadingSpinner = function (_a) {
|
|
11422
11428
|
var loadingData = _a.loadingData;
|
|
11423
|
-
return
|
|
11429
|
+
return React.useEffect(function () {
|
|
11424
11430
|
if (typeof document === 'undefined')
|
|
11425
11431
|
return;
|
|
11426
11432
|
var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
|
|
@@ -11437,9 +11443,9 @@ var useCalendarLoadingSpinner = function (_a) {
|
|
|
11437
11443
|
|
|
11438
11444
|
var useUpdateDisabledDates = function (_a) {
|
|
11439
11445
|
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
|
|
11440
|
-
var _b = __read(
|
|
11441
|
-
var _c = __read(
|
|
11442
|
-
var newDisableCalendarDates =
|
|
11446
|
+
var _b = __read(React.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
|
|
11447
|
+
var _c = __read(React.useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
|
|
11448
|
+
var newDisableCalendarDates = React.useMemo(function () {
|
|
11443
11449
|
var _a;
|
|
11444
11450
|
if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
|
|
11445
11451
|
var dateFormat_1 = 'dd-MM-yyyy';
|
|
@@ -11496,7 +11502,7 @@ styleInject(css_248z$d);
|
|
|
11496
11502
|
var css_248z$c = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px;\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.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: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n border-collapse: separate;\n border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n color: var(--will-transparent-black);\n opacity: 1;\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 .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/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\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.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only\n > 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.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only::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.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-in-only {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid var(--will-light-grey);\n box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n border-right: none;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n border-right: none;\n border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n border-left: none;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-day_selected.rdp-day_range_middle.checkout-option {\n background-color: var(--will-primary-lightest);\n color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n user-select: none;\n pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n .will-root .will-calendar-filter-container .will-calendar-tooltip,\n .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n top: -70px;\n white-space: wrap;\n max-width: 120px;\n }\n}\n";
|
|
11497
11503
|
styleInject(css_248z$c);
|
|
11498
11504
|
|
|
11499
|
-
var Calendar =
|
|
11505
|
+
var Calendar = React.forwardRef(function (_a, ref) {
|
|
11500
11506
|
var _b;
|
|
11501
11507
|
var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError, autoFocus = _a.autoFocus;
|
|
11502
11508
|
// Translations
|
|
@@ -11584,39 +11590,53 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
|
11584
11590
|
: __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11585
11591
|
lastPossibleCheckout
|
|
11586
11592
|
], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
|
|
11587
|
-
return (
|
|
11588
|
-
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
11592
|
-
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11596
|
-
|
|
11597
|
-
|
|
11598
|
-
|
|
11599
|
-
|
|
11600
|
-
|
|
11601
|
-
|
|
11602
|
-
|
|
11603
|
-
|
|
11604
|
-
|
|
11605
|
-
|
|
11606
|
-
|
|
11607
|
-
|
|
11608
|
-
|
|
11609
|
-
|
|
11610
|
-
|
|
11611
|
-
|
|
11612
|
-
|
|
11613
|
-
|
|
11614
|
-
|
|
11615
|
-
|
|
11616
|
-
|
|
11617
|
-
|
|
11618
|
-
|
|
11619
|
-
|
|
11593
|
+
return (React.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11594
|
+
React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
|
|
11595
|
+
React.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
|
|
11596
|
+
selectedStartDate ||
|
|
11597
|
+
rangeContextStartDate ||
|
|
11598
|
+
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11599
|
+
? newDisableCalendarDates.disabledDates[0].from
|
|
11600
|
+
: today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
|
|
11601
|
+
requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
|
|
11602
|
+
setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
|
|
11603
|
+
}, classNames: {
|
|
11604
|
+
day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
|
|
11605
|
+
day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
|
|
11606
|
+
}, modifiersClassNames: {
|
|
11607
|
+
today: 'my-today',
|
|
11608
|
+
booked: 'booked',
|
|
11609
|
+
disabledAfterCheckIn: 'disabled-after-check-in',
|
|
11610
|
+
overlappingDate: 'overlapping-date',
|
|
11611
|
+
noActiveSelectionStart: 'no-active-selection-start',
|
|
11612
|
+
noActiveSelectionMid: 'no-active-selection-mid',
|
|
11613
|
+
noActiveSelectionEnd: 'no-active-selection-end',
|
|
11614
|
+
checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
|
|
11615
|
+
checkInOnly: 'check-in-only',
|
|
11616
|
+
checkOutOnly: 'check-out-only',
|
|
11617
|
+
}, modifiers:
|
|
11618
|
+
// This function handles conditions for applying the modifiersClassNames
|
|
11619
|
+
handleCalendarModifiers({
|
|
11620
|
+
calendarRange: calendarRange,
|
|
11621
|
+
disabledDates: disabled,
|
|
11622
|
+
overlappingDate: overlappingDate,
|
|
11623
|
+
rangeContext: rangeContext,
|
|
11624
|
+
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11625
|
+
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11626
|
+
currentSelectionLastCheckoutDate: currentSelectionAvailability,
|
|
11627
|
+
}) }),
|
|
11628
|
+
React.createElement("div", { className: 'will-calendar-tooltip' },
|
|
11629
|
+
React.createElement("div", null, t('noCheckIn'))),
|
|
11630
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
|
|
11631
|
+
React.createElement("div", null, t('noCheckOut'))),
|
|
11632
|
+
React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
|
|
11633
|
+
React.createElement("div", null, t('checkOutOnly'))),
|
|
11634
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
|
|
11635
|
+
React.createElement("div", null, t('checkInOnly'))),
|
|
11636
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
|
|
11637
|
+
React.createElement("div", null, t('checkOutOnly'))),
|
|
11638
|
+
React.createElement("div", { className: 'will-calendar-spinner' },
|
|
11639
|
+
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
11620
11640
|
});
|
|
11621
11641
|
|
|
11622
11642
|
var parseGuests = function (_a) {
|
|
@@ -11676,8 +11696,6 @@ var Pages;
|
|
|
11676
11696
|
|
|
11677
11697
|
var calculateDropdownPosition = function (_a) {
|
|
11678
11698
|
var filterSection = _a.filterSection, headerRef = _a.headerRef, locationsButtonRef = _a.locationsButtonRef, datesButtonRef = _a.datesButtonRef, guestsButtonRef = _a.guestsButtonRef, isMobile = _a.isMobile;
|
|
11679
|
-
// On mobile, don't apply any positioning - let CSS handle it naturally
|
|
11680
|
-
// Dropdowns will start from leftmost point with position: relative
|
|
11681
11699
|
if (isMobile) {
|
|
11682
11700
|
return {};
|
|
11683
11701
|
}
|
|
@@ -11687,7 +11705,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11687
11705
|
var containerLeft = 0;
|
|
11688
11706
|
switch (filterSection) {
|
|
11689
11707
|
case FilterSections.LOCATIONS:
|
|
11690
|
-
// Locations: Start from beginning, hug content
|
|
11691
11708
|
if (locationsButtonRef.current) {
|
|
11692
11709
|
var buttonRect = locationsButtonRef.current.getBoundingClientRect();
|
|
11693
11710
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
@@ -11699,15 +11716,12 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11699
11716
|
}
|
|
11700
11717
|
break;
|
|
11701
11718
|
case FilterSections.CALENDAR:
|
|
11702
|
-
// Calendar: Two months side-by-side, needs ~650-700px
|
|
11703
|
-
// Start from dates button, but push left if not enough space
|
|
11704
11719
|
if (datesButtonRef.current) {
|
|
11705
11720
|
var buttonRect = datesButtonRef.current.getBoundingClientRect();
|
|
11706
11721
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11707
11722
|
var availableWidth = containerRect.width - relativeLeft;
|
|
11708
11723
|
var calendarMinWidth = 650;
|
|
11709
11724
|
if (availableWidth < calendarMinWidth) {
|
|
11710
|
-
// Not enough space, align to the right edge
|
|
11711
11725
|
return {
|
|
11712
11726
|
left: 'auto',
|
|
11713
11727
|
right: containerLeft,
|
|
@@ -11716,7 +11730,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11716
11730
|
};
|
|
11717
11731
|
}
|
|
11718
11732
|
else {
|
|
11719
|
-
// Enough space, start from dates button
|
|
11720
11733
|
return {
|
|
11721
11734
|
left: relativeLeft,
|
|
11722
11735
|
right: 'auto',
|
|
@@ -11726,14 +11739,12 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11726
11739
|
}
|
|
11727
11740
|
break;
|
|
11728
11741
|
case FilterSections.GUESTS:
|
|
11729
|
-
// Guests: Start from guests button, push left if not enough space
|
|
11730
11742
|
if (guestsButtonRef.current) {
|
|
11731
11743
|
var buttonRect = guestsButtonRef.current.getBoundingClientRect();
|
|
11732
11744
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11733
11745
|
var availableWidth = containerRect.width - relativeLeft;
|
|
11734
11746
|
var dropdownMinWidth = 350;
|
|
11735
11747
|
if (availableWidth < dropdownMinWidth) {
|
|
11736
|
-
// Not enough space, align to the right
|
|
11737
11748
|
return {
|
|
11738
11749
|
left: 'auto',
|
|
11739
11750
|
right: containerLeft,
|
|
@@ -11742,7 +11753,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11742
11753
|
};
|
|
11743
11754
|
}
|
|
11744
11755
|
else {
|
|
11745
|
-
// Enough space, start from button
|
|
11746
11756
|
return {
|
|
11747
11757
|
left: relativeLeft,
|
|
11748
11758
|
right: 'auto',
|
|
@@ -11759,14 +11769,14 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11759
11769
|
|
|
11760
11770
|
var useFilterBar = function (_a) {
|
|
11761
11771
|
var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
|
|
11762
|
-
var _b = __read(
|
|
11763
|
-
var _c = __read(
|
|
11764
|
-
var _d = __read(
|
|
11765
|
-
var _e = __read(
|
|
11766
|
-
var _f = __read(
|
|
11767
|
-
var _g = __read(
|
|
11768
|
-
var _h = __read(
|
|
11769
|
-
|
|
11772
|
+
var _b = __read(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
11773
|
+
var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
11774
|
+
var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
11775
|
+
var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
|
|
11776
|
+
var _f = __read(React.useState(0), 2), categories = _f[0], setCategories = _f[1];
|
|
11777
|
+
var _g = __read(React.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
|
|
11778
|
+
var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
|
|
11779
|
+
React.useEffect(function () {
|
|
11770
11780
|
var _a;
|
|
11771
11781
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
11772
11782
|
var startDateParam = urlSearchParams.get('startDate');
|
|
@@ -11791,7 +11801,7 @@ var useFilterBar = function (_a) {
|
|
|
11791
11801
|
setSelectedLocations(matchedLocations);
|
|
11792
11802
|
}
|
|
11793
11803
|
}, []);
|
|
11794
|
-
|
|
11804
|
+
React.useEffect(function () {
|
|
11795
11805
|
if (typeof window === 'undefined')
|
|
11796
11806
|
return;
|
|
11797
11807
|
var defaultTab = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? tabs[0] : tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.default; });
|
|
@@ -11924,9 +11934,9 @@ var handleAgeCategoryRules = function (_a) {
|
|
|
11924
11934
|
|
|
11925
11935
|
var useScrollInToView = function (_a) {
|
|
11926
11936
|
var selectedFilter = _a.selectedFilter;
|
|
11927
|
-
var _b = __read(
|
|
11928
|
-
var targetFilterBarRef =
|
|
11929
|
-
|
|
11937
|
+
var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
|
|
11938
|
+
var targetFilterBarRef = React.useRef(null);
|
|
11939
|
+
React.useEffect(function () {
|
|
11930
11940
|
if (typeof window !== 'undefined' && window.innerWidth > 960) {
|
|
11931
11941
|
setIsMobile(false);
|
|
11932
11942
|
return;
|
|
@@ -11946,9 +11956,13 @@ var useScrollInToView = function (_a) {
|
|
|
11946
11956
|
var css_248z$b = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button.disabled {\n cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n color: var(--will-black);\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n color: var(--will-black);\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none;\n }\n}\n";
|
|
11947
11957
|
styleInject(css_248z$b);
|
|
11948
11958
|
|
|
11949
|
-
var SelectButton =
|
|
11959
|
+
var SelectButton = React.forwardRef(function (_a, ref) {
|
|
11950
11960
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11951
|
-
return (
|
|
11961
|
+
return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
|
|
11962
|
+
React.createElement("span", { className: "select-button-wrapper" },
|
|
11963
|
+
React.createElement("div", null,
|
|
11964
|
+
React.createElement("p", { className: "select-button-label" }, label),
|
|
11965
|
+
React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11952
11966
|
});
|
|
11953
11967
|
SelectButton.displayName = 'SelectButton';
|
|
11954
11968
|
|
|
@@ -11957,7 +11971,7 @@ styleInject(css_248z$a);
|
|
|
11957
11971
|
|
|
11958
11972
|
var TabButton = function (_a) {
|
|
11959
11973
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11960
|
-
return (
|
|
11974
|
+
return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11961
11975
|
};
|
|
11962
11976
|
|
|
11963
11977
|
var css_248z$9 = ".will-guests-filter-label,\n.will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n border-radius: 50%;\n background-color: transparent;\n border: 1px solid var(--will-grey);\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n color: var(--will-black);\n\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}\n";
|
|
@@ -11965,7 +11979,7 @@ styleInject(css_248z$9);
|
|
|
11965
11979
|
|
|
11966
11980
|
var GuestCount = function (_a) {
|
|
11967
11981
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
11968
|
-
|
|
11982
|
+
React.useEffect(function () {
|
|
11969
11983
|
if (minVal && minVal > count) {
|
|
11970
11984
|
updateGuestsCount("guests-".concat(id), minVal);
|
|
11971
11985
|
}
|
|
@@ -11978,11 +11992,20 @@ var GuestCount = function (_a) {
|
|
|
11978
11992
|
var handleIncrement = function () {
|
|
11979
11993
|
updateGuestsCount("guests-".concat(id), count + 1);
|
|
11980
11994
|
};
|
|
11981
|
-
return (
|
|
11982
|
-
|
|
11983
|
-
|
|
11984
|
-
|
|
11985
|
-
|
|
11995
|
+
return (React.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
|
|
11996
|
+
React.createElement("p", { className: "will-guests-filter-label" }, label),
|
|
11997
|
+
React.createElement("div", { className: "will-guests-filter-counter" },
|
|
11998
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
|
|
11999
|
+
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
12000
|
+
paddingBottom: '4px',
|
|
12001
|
+
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
12002
|
+
} },
|
|
12003
|
+
React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
12004
|
+
React.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
|
|
12005
|
+
React.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
12006
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
12007
|
+
React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
12008
|
+
React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11986
12009
|
};
|
|
11987
12010
|
|
|
11988
12011
|
var css_248z$8 = ".will-filter-section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n}\n\n.will-filter-section-title {\n font-size: 22px;\n margin: 0;\n}\n\n.will-filter-section-action {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.will-filter-section-action .will-filter-bar-close-button {\n position: relative;\n top: auto;\n right: auto;\n margin: 0;\n}\n\n@media (max-width: 960px) {\n .will-filter-section-title {\n font-size: 18px;\n }\n}\n";
|
|
@@ -11990,17 +12013,21 @@ styleInject(css_248z$8);
|
|
|
11990
12013
|
|
|
11991
12014
|
var FilterSectionHeader = function (_a) {
|
|
11992
12015
|
var title = _a.title, action = _a.action;
|
|
11993
|
-
return (
|
|
12016
|
+
return (React.createElement("div", { className: "will-filter-section-header" },
|
|
12017
|
+
React.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
12018
|
+
action && React.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11994
12019
|
};
|
|
11995
12020
|
|
|
11996
12021
|
var css_248z$7 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n gap: 20px;\n padding: 16px;\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
11997
12022
|
styleInject(css_248z$7);
|
|
11998
12023
|
|
|
11999
|
-
var Guests =
|
|
12024
|
+
var Guests = React.forwardRef(function (_a, ref) {
|
|
12000
12025
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
12001
12026
|
var t = useTranslation('filterBar').t;
|
|
12002
12027
|
var containerRef = useAutoFocus(autoFocus);
|
|
12003
|
-
return (
|
|
12028
|
+
return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
12029
|
+
React.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12030
|
+
React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
|
|
12004
12031
|
});
|
|
12005
12032
|
Guests.displayName = 'Guests';
|
|
12006
12033
|
|
|
@@ -12008,7 +12035,7 @@ var css_248z$6 = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n
|
|
|
12008
12035
|
styleInject(css_248z$6);
|
|
12009
12036
|
|
|
12010
12037
|
var Divider = function () {
|
|
12011
|
-
return
|
|
12038
|
+
return React.createElement("div", { className: "will-filter-bar-divider" });
|
|
12012
12039
|
};
|
|
12013
12040
|
|
|
12014
12041
|
var css_248z$5 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
@@ -12023,12 +12050,16 @@ var Categories = function (_a) {
|
|
|
12023
12050
|
'Summer camp',
|
|
12024
12051
|
'Winter camp',
|
|
12025
12052
|
];
|
|
12026
|
-
var _b = __read(
|
|
12053
|
+
var _b = __read(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
|
|
12027
12054
|
var handleCategoryChange = function (selectedCategory) {
|
|
12028
12055
|
setSelectedCategory(selectedCategory);
|
|
12029
12056
|
setCategories(selectedCategory);
|
|
12030
12057
|
};
|
|
12031
|
-
return (
|
|
12058
|
+
return (React.createElement("div", { className: "will-filter-bar-categories" },
|
|
12059
|
+
React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12060
|
+
React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
|
|
12061
|
+
React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12062
|
+
React.createElement("span", null, itm))); }))));
|
|
12032
12063
|
};
|
|
12033
12064
|
|
|
12034
12065
|
var css_248z$4 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-container {\n display: flex;\n gap: 10px;\n flex-direction: column;\n min-width: 400px;\n padding: 16px 0;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
@@ -12037,23 +12068,27 @@ styleInject(css_248z$4);
|
|
|
12037
12068
|
var css_248z$3 = ".will-image-card {\n display: flex;\n gap: 20px;\n justify-content: space-between;\n align-items: center;\n padding: 8px 16px;\n cursor: pointer;\n user-select: none;\n min-height: 40px;\n}\n\n.will-image-card.is-selected {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card:hover {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card-image img {\n width: 120px;\n height: 68px;\n object-fit: cover;\n}\n";
|
|
12038
12069
|
styleInject(css_248z$3);
|
|
12039
12070
|
|
|
12040
|
-
var ImageCard =
|
|
12071
|
+
var ImageCard = React.forwardRef(function (_a, ref) {
|
|
12041
12072
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
12042
12073
|
var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
|
|
12043
|
-
return (
|
|
12074
|
+
return (React.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
|
|
12044
12075
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
12045
12076
|
e.preventDefault();
|
|
12046
12077
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
12047
12078
|
}
|
|
12048
|
-
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel
|
|
12079
|
+
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
|
|
12080
|
+
React.createElement("div", { className: "will-image-card-content" },
|
|
12081
|
+
React.createElement("h3", null, title),
|
|
12082
|
+
description && React.createElement("p", null, description)),
|
|
12083
|
+
React.createElement("div", { className: "will-image-card-image" }, imageUrl && React.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
|
|
12049
12084
|
});
|
|
12050
12085
|
ImageCard.displayName = 'ImageCard';
|
|
12051
12086
|
|
|
12052
|
-
var Locations =
|
|
12087
|
+
var Locations = React.forwardRef(function (_a, ref) {
|
|
12053
12088
|
var locations = _a.locations, language = _a.language, selectedLocations = _a.selectedLocations, setSelectedLocations = _a.setSelectedLocations, autoFocus = _a.autoFocus, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, onClose = _a.onClose;
|
|
12054
12089
|
var t = useTranslation('filterBar').t;
|
|
12055
|
-
var firstCardRef =
|
|
12056
|
-
|
|
12090
|
+
var firstCardRef = React.useRef(null);
|
|
12091
|
+
React.useEffect(function () {
|
|
12057
12092
|
if (autoFocus && firstCardRef.current) {
|
|
12058
12093
|
firstCardRef.current.focus();
|
|
12059
12094
|
}
|
|
@@ -12077,10 +12112,12 @@ var Locations = React__default.forwardRef(function (_a, ref) {
|
|
|
12077
12112
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
12078
12113
|
}
|
|
12079
12114
|
};
|
|
12080
|
-
return (
|
|
12081
|
-
|
|
12082
|
-
|
|
12083
|
-
|
|
12115
|
+
return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12116
|
+
React.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12117
|
+
React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12118
|
+
locations.map(function (location, index) {
|
|
12119
|
+
return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
|
|
12120
|
+
}))));
|
|
12084
12121
|
});
|
|
12085
12122
|
Locations.displayName = 'Locations';
|
|
12086
12123
|
|
|
@@ -12090,9 +12127,12 @@ styleInject(css_248z$2);
|
|
|
12090
12127
|
var css_248z$1 = ".will-dates-filter-container {\n padding: 0 16px;\n}\n";
|
|
12091
12128
|
styleInject(css_248z$1);
|
|
12092
12129
|
|
|
12093
|
-
var Dates =
|
|
12130
|
+
var Dates = React.forwardRef(function (_a, ref) {
|
|
12094
12131
|
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
|
|
12095
|
-
return (
|
|
12132
|
+
return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12133
|
+
React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12134
|
+
React.createElement("div", { className: "will-dates-filter-container" },
|
|
12135
|
+
React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12096
12136
|
});
|
|
12097
12137
|
Dates.displayName = 'Dates';
|
|
12098
12138
|
|
|
@@ -12104,13 +12144,13 @@ function FilterBar(_a) {
|
|
|
12104
12144
|
useUpdateTranslations({ language: language });
|
|
12105
12145
|
var t = useTranslation('filterBar').t;
|
|
12106
12146
|
// Refs for SelectButtons
|
|
12107
|
-
var locationsButtonRef =
|
|
12108
|
-
var datesButtonRef =
|
|
12109
|
-
var guestsButtonRef =
|
|
12110
|
-
var previouslyFocusedButtonRef =
|
|
12111
|
-
var headerRef =
|
|
12147
|
+
var locationsButtonRef = React.useRef(null);
|
|
12148
|
+
var datesButtonRef = React.useRef(null);
|
|
12149
|
+
var guestsButtonRef = React.useRef(null);
|
|
12150
|
+
var previouslyFocusedButtonRef = React.useRef(null);
|
|
12151
|
+
var headerRef = React.useRef(null);
|
|
12112
12152
|
// Dropdown positioning
|
|
12113
|
-
var _f = __read(
|
|
12153
|
+
var _f = __read(React.useState({}), 2), dropdownStyle = _f[0], setDropdownStyle = _f[1];
|
|
12114
12154
|
// Filters
|
|
12115
12155
|
var _g = useFilterBar({
|
|
12116
12156
|
redirectUrl: redirectUrl,
|
|
@@ -12139,7 +12179,7 @@ function FilterBar(_a) {
|
|
|
12139
12179
|
handleSelectedFilter(filter);
|
|
12140
12180
|
};
|
|
12141
12181
|
// Store previously focused button and restore focus when closing
|
|
12142
|
-
|
|
12182
|
+
React.useEffect(function () {
|
|
12143
12183
|
if (!selectedFilter && previouslyFocusedButtonRef.current) {
|
|
12144
12184
|
previouslyFocusedButtonRef.current.focus();
|
|
12145
12185
|
previouslyFocusedButtonRef.current = null;
|
|
@@ -12161,31 +12201,50 @@ function FilterBar(_a) {
|
|
|
12161
12201
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12162
12202
|
locationsSelectedLabel: t('locations.selected'),
|
|
12163
12203
|
});
|
|
12164
|
-
return (
|
|
12165
|
-
|
|
12166
|
-
|
|
12167
|
-
|
|
12168
|
-
|
|
12169
|
-
|
|
12170
|
-
|
|
12171
|
-
|
|
12172
|
-
|
|
12173
|
-
|
|
12174
|
-
|
|
12175
|
-
|
|
12176
|
-
|
|
12177
|
-
|
|
12178
|
-
|
|
12179
|
-
|
|
12180
|
-
|
|
12181
|
-
|
|
12182
|
-
|
|
12183
|
-
|
|
12184
|
-
|
|
12185
|
-
|
|
12186
|
-
|
|
12187
|
-
|
|
12188
|
-
|
|
12204
|
+
return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
12205
|
+
tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
12206
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
12207
|
+
.map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12208
|
+
setSelectedPath(tab.path);
|
|
12209
|
+
handleResetFilters();
|
|
12210
|
+
handleSelectedFilter(false);
|
|
12211
|
+
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
12212
|
+
React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
|
|
12213
|
+
headerRef.current = el;
|
|
12214
|
+
if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
|
|
12215
|
+
targetFilterBarRef.current = el;
|
|
12216
|
+
}
|
|
12217
|
+
} },
|
|
12218
|
+
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
|
|
12219
|
+
React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12220
|
+
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12221
|
+
handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
|
|
12222
|
+
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12223
|
+
React.createElement(Divider, null))),
|
|
12224
|
+
React.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12225
|
+
? parsedDates
|
|
12226
|
+
: selectedPath === Pages.ROOMS
|
|
12227
|
+
? t('calendar.roomsLabelPlaceholder')
|
|
12228
|
+
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12229
|
+
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12230
|
+
handleSelectedFilterWithPosition(FilterSections.CALENDAR);
|
|
12231
|
+
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12232
|
+
selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
|
|
12233
|
+
React.createElement(Divider, null),
|
|
12234
|
+
React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12235
|
+
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12236
|
+
handleSelectedFilterWithPosition(FilterSections.GUESTS);
|
|
12237
|
+
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12238
|
+
React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12239
|
+
selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle) },
|
|
12240
|
+
selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
|
|
12241
|
+
React.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12242
|
+
selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
|
|
12243
|
+
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12244
|
+
selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
|
|
12245
|
+
React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12246
|
+
selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
|
|
12247
|
+
React.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } })))))));
|
|
12189
12248
|
}
|
|
12190
12249
|
////////////
|
|
12191
12250
|
var AGE_CATEGORIES_FALLBACK = [
|
|
@@ -12208,18 +12267,18 @@ var LANGUAGE_FALLBACK = 'en';
|
|
|
12208
12267
|
var useFilterCalendar = function (_a) {
|
|
12209
12268
|
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
|
|
12210
12269
|
// State
|
|
12211
|
-
var _b = __read(
|
|
12212
|
-
var _c = __read(
|
|
12213
|
-
var _d = __read(
|
|
12214
|
-
var _e = __read(
|
|
12215
|
-
var _f = __read(
|
|
12216
|
-
var _g = __read(
|
|
12217
|
-
var _h = __read(
|
|
12218
|
-
var _j = __read(
|
|
12219
|
-
var _k = __read(
|
|
12270
|
+
var _b = __read(React.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
12271
|
+
var _c = __read(React.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
|
|
12272
|
+
var _d = __read(React.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
|
|
12273
|
+
var _e = __read(React.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
|
|
12274
|
+
var _f = __read(React.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
|
|
12275
|
+
var _g = __read(React.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
|
|
12276
|
+
var _h = __read(React.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
|
|
12277
|
+
var _j = __read(React.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
|
|
12278
|
+
var _k = __read(React.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
|
|
12220
12279
|
// Lifecycle
|
|
12221
12280
|
// Handle update component with new data
|
|
12222
|
-
|
|
12281
|
+
React.useEffect(function () {
|
|
12223
12282
|
var _a;
|
|
12224
12283
|
if (outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.availableDates) {
|
|
12225
12284
|
setDisableCalendarDates({
|
|
@@ -12237,7 +12296,7 @@ var useFilterCalendar = function (_a) {
|
|
|
12237
12296
|
}
|
|
12238
12297
|
}, [outerDisableCalendarDates]);
|
|
12239
12298
|
// Handle Range Context initial selections
|
|
12240
|
-
|
|
12299
|
+
React.useEffect(function () {
|
|
12241
12300
|
if (typeof window === 'undefined')
|
|
12242
12301
|
return;
|
|
12243
12302
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
@@ -12267,7 +12326,7 @@ var useFilterCalendar = function (_a) {
|
|
|
12267
12326
|
}
|
|
12268
12327
|
}, [toggleCalendar]);
|
|
12269
12328
|
// Handle submit dates
|
|
12270
|
-
|
|
12329
|
+
React.useEffect(function () {
|
|
12271
12330
|
var formatString = 'dd.MM.yyyy';
|
|
12272
12331
|
var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
|
|
12273
12332
|
? format(initialCalendarRange.to, formatString)
|
|
@@ -12326,26 +12385,36 @@ var Footer = function (_a) {
|
|
|
12326
12385
|
var nights = nightsCount({
|
|
12327
12386
|
calendarRange: calendarRange,
|
|
12328
12387
|
});
|
|
12329
|
-
return (
|
|
12330
|
-
|
|
12331
|
-
|
|
12332
|
-
|
|
12333
|
-
|
|
12334
|
-
|
|
12335
|
-
|
|
12336
|
-
|
|
12337
|
-
|
|
12338
|
-
|
|
12339
|
-
|
|
12340
|
-
|
|
12341
|
-
|
|
12342
|
-
|
|
12343
|
-
|
|
12388
|
+
return (React.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12389
|
+
React.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12390
|
+
calendarHasError ? (React.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12391
|
+
renderCalendarErrorMessage({
|
|
12392
|
+
palette: palette,
|
|
12393
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12394
|
+
}))) : (React.createElement("div", null,
|
|
12395
|
+
React.createElement("span", null, parseDate({
|
|
12396
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12397
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12398
|
+
language: language,
|
|
12399
|
+
}) || t('common:checkIn')),
|
|
12400
|
+
React.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12401
|
+
React.createElement("span", null, parseDate({
|
|
12402
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12403
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12404
|
+
language: language,
|
|
12405
|
+
}) || t('common:checkOut')))),
|
|
12406
|
+
React.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
|
|
12407
|
+
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12408
|
+
: '')),
|
|
12409
|
+
React.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12410
|
+
React.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
|
|
12344
12411
|
};
|
|
12345
12412
|
/////////
|
|
12346
12413
|
var renderCalendarErrorMessage = function (_a) {
|
|
12347
12414
|
var message = _a.message, palette = _a.palette;
|
|
12348
|
-
return (
|
|
12415
|
+
return (React.createElement(React.Fragment, null,
|
|
12416
|
+
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12417
|
+
React.createElement("span", null, message || '')));
|
|
12349
12418
|
};
|
|
12350
12419
|
|
|
12351
12420
|
var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n display: flex;\n max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n display: inline-block;\n margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n margin: 0 -6%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n margin-top: 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error {\n max-width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n text-align: center;\n margin-left: 5px;\n }\n }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
|
|
@@ -12371,7 +12440,14 @@ function FilterCalendar(_a) {
|
|
|
12371
12440
|
var filtersRef = useCloseFilterSection({
|
|
12372
12441
|
handleSelectedFilter: setToggleCalendar,
|
|
12373
12442
|
}).filtersRef;
|
|
12374
|
-
return (
|
|
12443
|
+
return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
|
|
12444
|
+
React.createElement("div", { className: "will-calendar-header" },
|
|
12445
|
+
React.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12446
|
+
React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12447
|
+
React.createElement("div", { className: "will-calendar-main" },
|
|
12448
|
+
React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
|
|
12449
|
+
React.createElement("div", { className: "will-calendar-footer" },
|
|
12450
|
+
React.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12375
12451
|
}
|
|
12376
12452
|
|
|
12377
12453
|
exports.Button = Button$1;
|