willba-component-library 0.3.6 → 0.3.7
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/README.md +21 -5
- package/lib/components/FilterBar/components/dates/Dates.d.ts +2 -1
- package/lib/index.esm.js +10 -10
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +289 -289
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +289 -289
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/components/FilterBar/components/dates/Dates.tsx +2 -0
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React
|
|
3
|
+
var React = require('react');
|
|
4
4
|
|
|
5
5
|
function _interopNamespaceDefault(e) {
|
|
6
6
|
var n = Object.create(null);
|
|
@@ -19,7 +19,7 @@ function _interopNamespaceDefault(e) {
|
|
|
19
19
|
return Object.freeze(n);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React
|
|
22
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
23
23
|
|
|
24
24
|
/******************************************************************************
|
|
25
25
|
Copyright (c) Microsoft Corporation.
|
|
@@ -219,8 +219,8 @@ styleInject(css_248z$g);
|
|
|
219
219
|
*/
|
|
220
220
|
var Button$1 = function (_a) {
|
|
221
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;
|
|
222
|
-
var _d = __read(React
|
|
223
|
-
return (React
|
|
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)));
|
|
224
224
|
};
|
|
225
225
|
|
|
226
226
|
function warn() {
|
|
@@ -361,7 +361,7 @@ const initReactI18next = {
|
|
|
361
361
|
}
|
|
362
362
|
};
|
|
363
363
|
|
|
364
|
-
const I18nContext = React
|
|
364
|
+
const I18nContext = React.createContext();
|
|
365
365
|
class ReportNamespaces {
|
|
366
366
|
constructor() {
|
|
367
367
|
this.usedNamespaces = {};
|
|
@@ -377,8 +377,8 @@ class ReportNamespaces {
|
|
|
377
377
|
}
|
|
378
378
|
|
|
379
379
|
const usePrevious = (value, ignore) => {
|
|
380
|
-
const ref = React
|
|
381
|
-
React
|
|
380
|
+
const ref = React.useRef();
|
|
381
|
+
React.useEffect(() => {
|
|
382
382
|
ref.current = ignore ? ref.current : value;
|
|
383
383
|
}, [value, ignore]);
|
|
384
384
|
return ref.current;
|
|
@@ -391,7 +391,7 @@ function useTranslation(ns) {
|
|
|
391
391
|
const {
|
|
392
392
|
i18n: i18nFromContext,
|
|
393
393
|
defaultNS: defaultNSFromContext
|
|
394
|
-
} = React
|
|
394
|
+
} = React.useContext(I18nContext) || {};
|
|
395
395
|
const i18n = i18nFromProps || i18nFromContext || getI18n();
|
|
396
396
|
if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
|
|
397
397
|
if (!i18n) {
|
|
@@ -424,12 +424,12 @@ function useTranslation(ns) {
|
|
|
424
424
|
function getT() {
|
|
425
425
|
return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
|
|
426
426
|
}
|
|
427
|
-
const [t, setT] = React
|
|
427
|
+
const [t, setT] = React.useState(getT);
|
|
428
428
|
let joinedNS = namespaces.join();
|
|
429
429
|
if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
|
|
430
430
|
const previousJoinedNS = usePrevious(joinedNS);
|
|
431
|
-
const isMounted = React
|
|
432
|
-
React
|
|
431
|
+
const isMounted = React.useRef(true);
|
|
432
|
+
React.useEffect(() => {
|
|
433
433
|
const {
|
|
434
434
|
bindI18n,
|
|
435
435
|
bindI18nStore
|
|
@@ -460,8 +460,8 @@ function useTranslation(ns) {
|
|
|
460
460
|
if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
|
|
461
461
|
};
|
|
462
462
|
}, [i18n, joinedNS]);
|
|
463
|
-
const isInitial = React
|
|
464
|
-
React
|
|
463
|
+
const isInitial = React.useRef(true);
|
|
464
|
+
React.useEffect(() => {
|
|
465
465
|
if (isMounted.current && !isInitial.current) {
|
|
466
466
|
setT(getT);
|
|
467
467
|
}
|
|
@@ -489,7 +489,7 @@ var DefaultContext = {
|
|
|
489
489
|
style: undefined,
|
|
490
490
|
attr: undefined
|
|
491
491
|
};
|
|
492
|
-
var IconContext = React
|
|
492
|
+
var IconContext = React.createContext && React.createContext(DefaultContext);
|
|
493
493
|
|
|
494
494
|
var __assign$1 = undefined && undefined.__assign || function () {
|
|
495
495
|
__assign$1 = Object.assign || function (t) {
|
|
@@ -511,7 +511,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
|
|
|
511
511
|
};
|
|
512
512
|
function Tree2Element(tree) {
|
|
513
513
|
return tree && tree.map(function (node, i) {
|
|
514
|
-
return React
|
|
514
|
+
return React.createElement(node.tag, __assign$1({
|
|
515
515
|
key: i
|
|
516
516
|
}, node.attr), Tree2Element(node.child));
|
|
517
517
|
});
|
|
@@ -519,7 +519,7 @@ function Tree2Element(tree) {
|
|
|
519
519
|
function GenIcon(data) {
|
|
520
520
|
// eslint-disable-next-line react/display-name
|
|
521
521
|
return function (props) {
|
|
522
|
-
return React
|
|
522
|
+
return React.createElement(IconBase, __assign$1({
|
|
523
523
|
attr: __assign$1({}, data.attr)
|
|
524
524
|
}, props), Tree2Element(data.child));
|
|
525
525
|
};
|
|
@@ -534,7 +534,7 @@ function IconBase(props) {
|
|
|
534
534
|
var className;
|
|
535
535
|
if (conf.className) className = conf.className;
|
|
536
536
|
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
537
|
-
return React
|
|
537
|
+
return React.createElement("svg", __assign$1({
|
|
538
538
|
stroke: "currentColor",
|
|
539
539
|
fill: "currentColor",
|
|
540
540
|
strokeWidth: "0"
|
|
@@ -546,9 +546,9 @@ function IconBase(props) {
|
|
|
546
546
|
height: computedSize,
|
|
547
547
|
width: computedSize,
|
|
548
548
|
xmlns: "http://www.w3.org/2000/svg"
|
|
549
|
-
}), title && React
|
|
549
|
+
}), title && React.createElement("title", null, title), props.children);
|
|
550
550
|
};
|
|
551
|
-
return IconContext !== undefined ? React
|
|
551
|
+
return IconContext !== undefined ? React.createElement(IconContext.Consumer, null, function (conf) {
|
|
552
552
|
return elem(conf);
|
|
553
553
|
}) : elem(DefaultContext);
|
|
554
554
|
}
|
|
@@ -574,8 +574,8 @@ var css_248z$f = "@import url('https://fonts.googleapis.com/css2?family=Montserr
|
|
|
574
574
|
styleInject(css_248z$f);
|
|
575
575
|
|
|
576
576
|
var useAwaitRender = function () {
|
|
577
|
-
var _a = __read(React
|
|
578
|
-
React
|
|
577
|
+
var _a = __read(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
578
|
+
React.useEffect(function () {
|
|
579
579
|
setInitialRenderComplete(true);
|
|
580
580
|
}, []);
|
|
581
581
|
if (!initialRenderComplete)
|
|
@@ -2970,8 +2970,8 @@ instance.use(initReactI18next).init({
|
|
|
2970
2970
|
|
|
2971
2971
|
var useUpdateTranslations = function (_a) {
|
|
2972
2972
|
var language = _a.language;
|
|
2973
|
-
var _b = __read(React
|
|
2974
|
-
React
|
|
2973
|
+
var _b = __read(React.useState(0), 2); _b[0]; var setRerenderKey = _b[1];
|
|
2974
|
+
React.useEffect(function () {
|
|
2975
2975
|
instance.changeLanguage(language);
|
|
2976
2976
|
setRerenderKey(function (prevKey) { return prevKey + 1; });
|
|
2977
2977
|
}, [language]);
|
|
@@ -2980,8 +2980,8 @@ var useUpdateTranslations = function (_a) {
|
|
|
2980
2980
|
// TODO - Refactor and rename this hook
|
|
2981
2981
|
var useCloseFilterSection = function (_a) {
|
|
2982
2982
|
var handleSelectedFilter = _a.handleSelectedFilter;
|
|
2983
|
-
var filtersRef = React
|
|
2984
|
-
React
|
|
2983
|
+
var filtersRef = React.useRef(null);
|
|
2984
|
+
React.useEffect(function () {
|
|
2985
2985
|
var handleClickOutside = function (event) {
|
|
2986
2986
|
if (filtersRef.current &&
|
|
2987
2987
|
!filtersRef.current.contains(event.target)) {
|
|
@@ -2997,8 +2997,8 @@ var useCloseFilterSection = function (_a) {
|
|
|
2997
2997
|
};
|
|
2998
2998
|
|
|
2999
2999
|
var useAutoFocus = function (autoFocus) {
|
|
3000
|
-
var ref = React
|
|
3001
|
-
React
|
|
3000
|
+
var ref = React.useRef(null);
|
|
3001
|
+
React.useEffect(function () {
|
|
3002
3002
|
if (!autoFocus || !ref.current)
|
|
3003
3003
|
return;
|
|
3004
3004
|
var attemptFocus = function (attempts) {
|
|
@@ -3023,8 +3023,8 @@ styleInject(css_248z$e);
|
|
|
3023
3023
|
|
|
3024
3024
|
var SubmitButton = function (_a) {
|
|
3025
3025
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3026
|
-
return (React
|
|
3027
|
-
isLoading ? (React
|
|
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
3028
|
label || 'Label'));
|
|
3029
3029
|
};
|
|
3030
3030
|
|
|
@@ -3038,8 +3038,8 @@ styleInject(css_248z$d);
|
|
|
3038
3038
|
|
|
3039
3039
|
var CloseButton = function (_a) {
|
|
3040
3040
|
var handleClose = _a.handleClose;
|
|
3041
|
-
return (React
|
|
3042
|
-
React
|
|
3041
|
+
return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
3042
|
+
React.createElement(IoIosCloseCircleOutline, null)));
|
|
3043
3043
|
};
|
|
3044
3044
|
|
|
3045
3045
|
function _typeof(o) {
|
|
@@ -7320,7 +7320,7 @@ function parseFromToProps(props) {
|
|
|
7320
7320
|
*
|
|
7321
7321
|
* Access to this context from the {@link useDayPicker} hook.
|
|
7322
7322
|
*/
|
|
7323
|
-
var DayPickerContext = React
|
|
7323
|
+
var DayPickerContext = React.createContext(undefined);
|
|
7324
7324
|
/**
|
|
7325
7325
|
* The provider for the {@link DayPickerContext}, assigning the defaults from the
|
|
7326
7326
|
* initial DayPicker props.
|
|
@@ -7342,7 +7342,7 @@ function DayPickerProvider(props) {
|
|
|
7342
7342
|
onSelect = initialProps.onSelect;
|
|
7343
7343
|
}
|
|
7344
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 });
|
|
7345
|
-
return (React
|
|
7345
|
+
return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
|
|
7346
7346
|
}
|
|
7347
7347
|
/**
|
|
7348
7348
|
* Hook to access the {@link DayPickerContextValue}.
|
|
@@ -7351,7 +7351,7 @@ function DayPickerProvider(props) {
|
|
|
7351
7351
|
* internal or custom components.
|
|
7352
7352
|
*/
|
|
7353
7353
|
function useDayPicker() {
|
|
7354
|
-
var context = React
|
|
7354
|
+
var context = React.useContext(DayPickerContext);
|
|
7355
7355
|
if (!context) {
|
|
7356
7356
|
throw new Error("useDayPicker must be used within a DayPickerProvider.");
|
|
7357
7357
|
}
|
|
@@ -7361,15 +7361,15 @@ function useDayPicker() {
|
|
|
7361
7361
|
/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
|
|
7362
7362
|
function CaptionLabel(props) {
|
|
7363
7363
|
var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
|
|
7364
|
-
return (React
|
|
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 })));
|
|
7365
7365
|
}
|
|
7366
7366
|
|
|
7367
7367
|
/**
|
|
7368
7368
|
* Render the icon in the styled drop-down.
|
|
7369
7369
|
*/
|
|
7370
7370
|
function IconDropdown(props) {
|
|
7371
|
-
return (React
|
|
7372
|
-
React
|
|
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" })));
|
|
7373
7373
|
}
|
|
7374
7374
|
|
|
7375
7375
|
/**
|
|
@@ -7381,12 +7381,12 @@ function Dropdown(props) {
|
|
|
7381
7381
|
var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
|
|
7382
7382
|
var dayPicker = useDayPicker();
|
|
7383
7383
|
var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
|
|
7384
|
-
return (React
|
|
7385
|
-
React
|
|
7386
|
-
React
|
|
7387
|
-
React
|
|
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" },
|
|
7388
7388
|
caption,
|
|
7389
|
-
React
|
|
7389
|
+
React.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
|
|
7390
7390
|
}
|
|
7391
7391
|
|
|
7392
7392
|
/** Render the dropdown to navigate between months. */
|
|
@@ -7395,9 +7395,9 @@ function MonthsDropdown(props) {
|
|
|
7395
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;
|
|
7396
7396
|
// Dropdown should appear only when both from/toDate is set
|
|
7397
7397
|
if (!fromDate)
|
|
7398
|
-
return React
|
|
7398
|
+
return React.createElement(React.Fragment, null);
|
|
7399
7399
|
if (!toDate)
|
|
7400
|
-
return React
|
|
7400
|
+
return React.createElement(React.Fragment, null);
|
|
7401
7401
|
var dropdownMonths = [];
|
|
7402
7402
|
if (isSameYear(fromDate, toDate)) {
|
|
7403
7403
|
// only display the months included in the range
|
|
@@ -7419,7 +7419,7 @@ function MonthsDropdown(props) {
|
|
|
7419
7419
|
props.onChange(newMonth);
|
|
7420
7420
|
};
|
|
7421
7421
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7422
|
-
return (React
|
|
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 }))); })));
|
|
7423
7423
|
}
|
|
7424
7424
|
|
|
7425
7425
|
/**
|
|
@@ -7433,9 +7433,9 @@ function YearsDropdown(props) {
|
|
|
7433
7433
|
var years = [];
|
|
7434
7434
|
// Dropdown should appear only when both from/toDate is set
|
|
7435
7435
|
if (!fromDate)
|
|
7436
|
-
return React
|
|
7436
|
+
return React.createElement(React.Fragment, null);
|
|
7437
7437
|
if (!toDate)
|
|
7438
|
-
return React
|
|
7438
|
+
return React.createElement(React.Fragment, null);
|
|
7439
7439
|
var fromYear = fromDate.getFullYear();
|
|
7440
7440
|
var toYear = toDate.getFullYear();
|
|
7441
7441
|
for (var year = fromYear; year <= toYear; year++) {
|
|
@@ -7446,7 +7446,7 @@ function YearsDropdown(props) {
|
|
|
7446
7446
|
props.onChange(newMonth);
|
|
7447
7447
|
};
|
|
7448
7448
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7449
|
-
return (React
|
|
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 }))); })));
|
|
7450
7450
|
}
|
|
7451
7451
|
|
|
7452
7452
|
/**
|
|
@@ -7459,7 +7459,7 @@ function YearsDropdown(props) {
|
|
|
7459
7459
|
* argument, which will be always returned as `value`.
|
|
7460
7460
|
*/
|
|
7461
7461
|
function useControlledValue(defaultValue, controlledValue) {
|
|
7462
|
-
var _a = React
|
|
7462
|
+
var _a = React.useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
|
|
7463
7463
|
var value = controlledValue === undefined ? uncontrolledValue : controlledValue;
|
|
7464
7464
|
return [value, setValue];
|
|
7465
7465
|
}
|
|
@@ -7577,7 +7577,7 @@ function getPreviousMonth(startingMonth, options) {
|
|
|
7577
7577
|
* The Navigation context shares details and methods to navigate the months in DayPicker.
|
|
7578
7578
|
* Access this context from the {@link useNavigation} hook.
|
|
7579
7579
|
*/
|
|
7580
|
-
var NavigationContext = React
|
|
7580
|
+
var NavigationContext = React.createContext(undefined);
|
|
7581
7581
|
/** Provides the values for the {@link NavigationContext}. */
|
|
7582
7582
|
function NavigationProvider(props) {
|
|
7583
7583
|
var dayPicker = useDayPicker();
|
|
@@ -7610,7 +7610,7 @@ function NavigationProvider(props) {
|
|
|
7610
7610
|
nextMonth: nextMonth,
|
|
7611
7611
|
isDateDisplayed: isDateDisplayed
|
|
7612
7612
|
};
|
|
7613
|
-
return (React
|
|
7613
|
+
return (React.createElement(NavigationContext.Provider, { value: value }, props.children));
|
|
7614
7614
|
}
|
|
7615
7615
|
/**
|
|
7616
7616
|
* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
|
|
@@ -7619,7 +7619,7 @@ function NavigationProvider(props) {
|
|
|
7619
7619
|
* This hook is meant to be used inside internal or custom components.
|
|
7620
7620
|
*/
|
|
7621
7621
|
function useNavigation() {
|
|
7622
|
-
var context = React
|
|
7622
|
+
var context = React.useContext(NavigationContext);
|
|
7623
7623
|
if (!context) {
|
|
7624
7624
|
throw new Error('useNavigation must be used within a NavigationProvider');
|
|
7625
7625
|
}
|
|
@@ -7637,31 +7637,31 @@ function CaptionDropdowns(props) {
|
|
|
7637
7637
|
goToMonth(newMonth);
|
|
7638
7638
|
};
|
|
7639
7639
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7640
|
-
var captionLabel = (React
|
|
7641
|
-
return (React
|
|
7642
|
-
React
|
|
7643
|
-
React
|
|
7644
|
-
React
|
|
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 })));
|
|
7645
7645
|
}
|
|
7646
7646
|
|
|
7647
7647
|
/**
|
|
7648
7648
|
* Render the "previous month" button in the navigation.
|
|
7649
7649
|
*/
|
|
7650
7650
|
function IconLeft(props) {
|
|
7651
|
-
return (React
|
|
7652
|
-
React
|
|
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" })));
|
|
7653
7653
|
}
|
|
7654
7654
|
|
|
7655
7655
|
/**
|
|
7656
7656
|
* Render the "next month" button in the navigation.
|
|
7657
7657
|
*/
|
|
7658
7658
|
function IconRight(props) {
|
|
7659
|
-
return (React
|
|
7660
|
-
React
|
|
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" })));
|
|
7661
7661
|
}
|
|
7662
7662
|
|
|
7663
7663
|
/** Render a button HTML element applying the reset class name. */
|
|
7664
|
-
var Button = React
|
|
7664
|
+
var Button = React.forwardRef(function (props, ref) {
|
|
7665
7665
|
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
|
|
7666
7666
|
var classNamesArr = [classNames.button_reset, classNames.button];
|
|
7667
7667
|
if (props.className) {
|
|
@@ -7672,7 +7672,7 @@ var Button = React$1.forwardRef(function (props, ref) {
|
|
|
7672
7672
|
if (props.style) {
|
|
7673
7673
|
Object.assign(style, props.style);
|
|
7674
7674
|
}
|
|
7675
|
-
return (React
|
|
7675
|
+
return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
7676
7676
|
});
|
|
7677
7677
|
|
|
7678
7678
|
/** A component rendering the navigation buttons or the drop-downs. */
|
|
@@ -7680,7 +7680,7 @@ function Navigation(props) {
|
|
|
7680
7680
|
var _a, _b;
|
|
7681
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;
|
|
7682
7682
|
if (!props.nextMonth && !props.previousMonth) {
|
|
7683
|
-
return React
|
|
7683
|
+
return React.createElement(React.Fragment, null);
|
|
7684
7684
|
}
|
|
7685
7685
|
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
7686
7686
|
var previousClassName = [
|
|
@@ -7694,9 +7694,9 @@ function Navigation(props) {
|
|
|
7694
7694
|
].join(' ');
|
|
7695
7695
|
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
7696
7696
|
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
7697
|
-
return (React
|
|
7698
|
-
!props.hidePrevious && (React
|
|
7699
|
-
!props.hideNext && (React
|
|
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 }))))));
|
|
7700
7700
|
}
|
|
7701
7701
|
|
|
7702
7702
|
/**
|
|
@@ -7722,7 +7722,7 @@ function CaptionNavigation(props) {
|
|
|
7722
7722
|
return;
|
|
7723
7723
|
goToMonth(nextMonth);
|
|
7724
7724
|
};
|
|
7725
|
-
return (React
|
|
7725
|
+
return (React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
|
|
7726
7726
|
}
|
|
7727
7727
|
|
|
7728
7728
|
/**
|
|
@@ -7735,22 +7735,22 @@ function Caption(props) {
|
|
|
7735
7735
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7736
7736
|
var caption;
|
|
7737
7737
|
if (disableNavigation) {
|
|
7738
|
-
caption = (React
|
|
7738
|
+
caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7739
7739
|
}
|
|
7740
7740
|
else if (captionLayout === 'dropdown') {
|
|
7741
|
-
caption = (React
|
|
7741
|
+
caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
|
|
7742
7742
|
}
|
|
7743
7743
|
else if (captionLayout === 'dropdown-buttons') {
|
|
7744
|
-
caption = (React
|
|
7745
|
-
React
|
|
7746
|
-
React
|
|
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 })));
|
|
7747
7747
|
}
|
|
7748
7748
|
else {
|
|
7749
|
-
caption = (React
|
|
7750
|
-
React
|
|
7751
|
-
React
|
|
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 })));
|
|
7752
7752
|
}
|
|
7753
|
-
return (React
|
|
7753
|
+
return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
|
|
7754
7754
|
}
|
|
7755
7755
|
|
|
7756
7756
|
/** Render the Footer component (empty as default).*/
|
|
@@ -7758,10 +7758,10 @@ function Caption(props) {
|
|
|
7758
7758
|
function Footer$1(props) {
|
|
7759
7759
|
var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
|
|
7760
7760
|
if (!footer)
|
|
7761
|
-
return React
|
|
7762
|
-
return (React
|
|
7763
|
-
React
|
|
7764
|
-
React
|
|
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))));
|
|
7765
7765
|
}
|
|
7766
7766
|
|
|
7767
7767
|
/**
|
|
@@ -7790,9 +7790,9 @@ ISOWeek) {
|
|
|
7790
7790
|
function HeadRow() {
|
|
7791
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;
|
|
7792
7792
|
var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
|
|
7793
|
-
return (React
|
|
7794
|
-
showWeekNumber && (React
|
|
7795
|
-
weekdays.map(function (weekday, i) { return (React
|
|
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 }))); })));
|
|
7796
7796
|
}
|
|
7797
7797
|
|
|
7798
7798
|
/** Render the table head. */
|
|
@@ -7800,14 +7800,14 @@ function Head() {
|
|
|
7800
7800
|
var _a;
|
|
7801
7801
|
var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
|
|
7802
7802
|
var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
|
|
7803
|
-
return (React
|
|
7804
|
-
React
|
|
7803
|
+
return (React.createElement("thead", { style: styles.head, className: classNames.head },
|
|
7804
|
+
React.createElement(HeadRowComponent, null)));
|
|
7805
7805
|
}
|
|
7806
7806
|
|
|
7807
7807
|
/** Render the content of the day cell. */
|
|
7808
7808
|
function DayContent(props) {
|
|
7809
7809
|
var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
|
|
7810
|
-
return React
|
|
7810
|
+
return React.createElement(React.Fragment, null, formatDay(props.date, { locale: locale }));
|
|
7811
7811
|
}
|
|
7812
7812
|
|
|
7813
7813
|
/**
|
|
@@ -7816,7 +7816,7 @@ function DayContent(props) {
|
|
|
7816
7816
|
*
|
|
7817
7817
|
* Access this context from the {@link useSelectMultiple} hook.
|
|
7818
7818
|
*/
|
|
7819
|
-
var SelectMultipleContext = React
|
|
7819
|
+
var SelectMultipleContext = React.createContext(undefined);
|
|
7820
7820
|
/** Provides the values for the {@link SelectMultipleContext}. */
|
|
7821
7821
|
function SelectMultipleProvider(props) {
|
|
7822
7822
|
if (!isDayPickerMultiple(props.initialProps)) {
|
|
@@ -7826,9 +7826,9 @@ function SelectMultipleProvider(props) {
|
|
|
7826
7826
|
disabled: []
|
|
7827
7827
|
}
|
|
7828
7828
|
};
|
|
7829
|
-
return (React
|
|
7829
|
+
return (React.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
|
|
7830
7830
|
}
|
|
7831
|
-
return (React
|
|
7831
|
+
return (React.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7832
7832
|
}
|
|
7833
7833
|
function SelectMultipleProviderInternal(_a) {
|
|
7834
7834
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7873,7 +7873,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7873
7873
|
onDayClick: onDayClick,
|
|
7874
7874
|
modifiers: modifiers
|
|
7875
7875
|
};
|
|
7876
|
-
return (React
|
|
7876
|
+
return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
|
|
7877
7877
|
}
|
|
7878
7878
|
/**
|
|
7879
7879
|
* Hook to access the {@link SelectMultipleContextValue}.
|
|
@@ -7881,7 +7881,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7881
7881
|
* This hook is meant to be used inside internal or custom components.
|
|
7882
7882
|
*/
|
|
7883
7883
|
function useSelectMultiple() {
|
|
7884
|
-
var context = React
|
|
7884
|
+
var context = React.useContext(SelectMultipleContext);
|
|
7885
7885
|
if (!context) {
|
|
7886
7886
|
throw new Error('useSelectMultiple must be used within a SelectMultipleProvider');
|
|
7887
7887
|
}
|
|
@@ -7929,7 +7929,7 @@ function addToRange(day, range) {
|
|
|
7929
7929
|
*
|
|
7930
7930
|
* Access this context from the {@link useSelectRange} hook.
|
|
7931
7931
|
*/
|
|
7932
|
-
var SelectRangeContext = React
|
|
7932
|
+
var SelectRangeContext = React.createContext(undefined);
|
|
7933
7933
|
/** Provides the values for the {@link SelectRangeProvider}. */
|
|
7934
7934
|
function SelectRangeProvider(props) {
|
|
7935
7935
|
if (!isDayPickerRange(props.initialProps)) {
|
|
@@ -7942,9 +7942,9 @@ function SelectRangeProvider(props) {
|
|
|
7942
7942
|
disabled: []
|
|
7943
7943
|
}
|
|
7944
7944
|
};
|
|
7945
|
-
return (React
|
|
7945
|
+
return (React.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
|
|
7946
7946
|
}
|
|
7947
|
-
return (React
|
|
7947
|
+
return (React.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7948
7948
|
}
|
|
7949
7949
|
function SelectRangeProviderInternal(_a) {
|
|
7950
7950
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8015,7 +8015,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
8015
8015
|
});
|
|
8016
8016
|
}
|
|
8017
8017
|
}
|
|
8018
|
-
return (React
|
|
8018
|
+
return (React.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
|
|
8019
8019
|
}
|
|
8020
8020
|
/**
|
|
8021
8021
|
* Hook to access the {@link SelectRangeContextValue}.
|
|
@@ -8023,7 +8023,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
8023
8023
|
* This hook is meant to be used inside internal or custom components.
|
|
8024
8024
|
*/
|
|
8025
8025
|
function useSelectRange() {
|
|
8026
|
-
var context = React
|
|
8026
|
+
var context = React.useContext(SelectRangeContext);
|
|
8027
8027
|
if (!context) {
|
|
8028
8028
|
throw new Error('useSelectRange must be used within a SelectRangeProvider');
|
|
8029
8029
|
}
|
|
@@ -8106,7 +8106,7 @@ function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
|
|
|
8106
8106
|
}
|
|
8107
8107
|
|
|
8108
8108
|
/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
|
|
8109
|
-
var ModifiersContext = React
|
|
8109
|
+
var ModifiersContext = React.createContext(undefined);
|
|
8110
8110
|
/** Provide the value for the {@link ModifiersContext}. */
|
|
8111
8111
|
function ModifiersProvider(props) {
|
|
8112
8112
|
var dayPicker = useDayPicker();
|
|
@@ -8115,7 +8115,7 @@ function ModifiersProvider(props) {
|
|
|
8115
8115
|
var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
|
|
8116
8116
|
var customModifiers = getCustomModifiers(dayPicker.modifiers);
|
|
8117
8117
|
var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
|
|
8118
|
-
return (React
|
|
8118
|
+
return (React.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
|
|
8119
8119
|
}
|
|
8120
8120
|
/**
|
|
8121
8121
|
* Return the modifiers used by DayPicker.
|
|
@@ -8125,7 +8125,7 @@ function ModifiersProvider(props) {
|
|
|
8125
8125
|
*
|
|
8126
8126
|
*/
|
|
8127
8127
|
function useModifiers() {
|
|
8128
|
-
var context = React
|
|
8128
|
+
var context = React.useContext(ModifiersContext);
|
|
8129
8129
|
if (!context) {
|
|
8130
8130
|
throw new Error('useModifiers must be used within a ModifiersProvider');
|
|
8131
8131
|
}
|
|
@@ -8363,13 +8363,13 @@ function getNextFocus(focusedDay, options) {
|
|
|
8363
8363
|
*
|
|
8364
8364
|
* Access this context from the {@link useFocusContext} hook.
|
|
8365
8365
|
*/
|
|
8366
|
-
var FocusContext = React
|
|
8366
|
+
var FocusContext = React.createContext(undefined);
|
|
8367
8367
|
/** The provider for the {@link FocusContext}. */
|
|
8368
8368
|
function FocusProvider(props) {
|
|
8369
8369
|
var navigation = useNavigation();
|
|
8370
8370
|
var modifiers = useModifiers();
|
|
8371
|
-
var _a = React
|
|
8372
|
-
var _b = React
|
|
8371
|
+
var _a = React.useState(), focusedDay = _a[0], setFocusedDay = _a[1];
|
|
8372
|
+
var _b = React.useState(), lastFocused = _b[0], setLastFocused = _b[1];
|
|
8373
8373
|
var initialFocusTarget = getInitialFocusTarget(navigation.displayMonths, modifiers);
|
|
8374
8374
|
// TODO: cleanup and test obscure code below
|
|
8375
8375
|
var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
|
|
@@ -8413,7 +8413,7 @@ function FocusProvider(props) {
|
|
|
8413
8413
|
focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
|
|
8414
8414
|
focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
|
|
8415
8415
|
};
|
|
8416
|
-
return (React
|
|
8416
|
+
return (React.createElement(FocusContext.Provider, { value: value }, props.children));
|
|
8417
8417
|
}
|
|
8418
8418
|
/**
|
|
8419
8419
|
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
@@ -8422,7 +8422,7 @@ function FocusProvider(props) {
|
|
|
8422
8422
|
* This hook is meant to be used inside internal or custom components.
|
|
8423
8423
|
*/
|
|
8424
8424
|
function useFocusContext() {
|
|
8425
|
-
var context = React
|
|
8425
|
+
var context = React.useContext(FocusContext);
|
|
8426
8426
|
if (!context) {
|
|
8427
8427
|
throw new Error('useFocusContext must be used within a FocusProvider');
|
|
8428
8428
|
}
|
|
@@ -8454,16 +8454,16 @@ displayMonth) {
|
|
|
8454
8454
|
*
|
|
8455
8455
|
* Access this context from the {@link useSelectSingle} hook.
|
|
8456
8456
|
*/
|
|
8457
|
-
var SelectSingleContext = React
|
|
8457
|
+
var SelectSingleContext = React.createContext(undefined);
|
|
8458
8458
|
/** Provides the values for the {@link SelectSingleProvider}. */
|
|
8459
8459
|
function SelectSingleProvider(props) {
|
|
8460
8460
|
if (!isDayPickerSingle(props.initialProps)) {
|
|
8461
8461
|
var emptyContextValue = {
|
|
8462
8462
|
selected: undefined
|
|
8463
8463
|
};
|
|
8464
|
-
return (React
|
|
8464
|
+
return (React.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
|
|
8465
8465
|
}
|
|
8466
|
-
return (React
|
|
8466
|
+
return (React.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
8467
8467
|
}
|
|
8468
8468
|
function SelectSingleProviderInternal(_a) {
|
|
8469
8469
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8480,7 +8480,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8480
8480
|
selected: initialProps.selected,
|
|
8481
8481
|
onDayClick: onDayClick
|
|
8482
8482
|
};
|
|
8483
|
-
return (React
|
|
8483
|
+
return (React.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
|
|
8484
8484
|
}
|
|
8485
8485
|
/**
|
|
8486
8486
|
* Hook to access the {@link SelectSingleContextValue}.
|
|
@@ -8488,7 +8488,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8488
8488
|
* This hook is meant to be used inside internal or custom components.
|
|
8489
8489
|
*/
|
|
8490
8490
|
function useSelectSingle() {
|
|
8491
|
-
var context = React
|
|
8491
|
+
var context = React.useContext(SelectSingleContext);
|
|
8492
8492
|
if (!context) {
|
|
8493
8493
|
throw new Error('useSelectSingle must be used within a SelectSingleProvider');
|
|
8494
8494
|
}
|
|
@@ -8727,7 +8727,7 @@ buttonRef) {
|
|
|
8727
8727
|
var selectedDays = useSelectedDays();
|
|
8728
8728
|
var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== 'default');
|
|
8729
8729
|
// Focus the button if the day is focused according to the focus context
|
|
8730
|
-
React
|
|
8730
|
+
React.useEffect(function () {
|
|
8731
8731
|
var _a;
|
|
8732
8732
|
if (activeModifiers.outside)
|
|
8733
8733
|
return;
|
|
@@ -8750,7 +8750,7 @@ buttonRef) {
|
|
|
8750
8750
|
var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
|
|
8751
8751
|
activeModifiers.hidden);
|
|
8752
8752
|
var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
|
|
8753
|
-
var children = (React
|
|
8753
|
+
var children = (React.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
|
|
8754
8754
|
var divProps = {
|
|
8755
8755
|
style: style,
|
|
8756
8756
|
className: className,
|
|
@@ -8778,15 +8778,15 @@ buttonRef) {
|
|
|
8778
8778
|
* modifiers.
|
|
8779
8779
|
*/
|
|
8780
8780
|
function Day(props) {
|
|
8781
|
-
var buttonRef = React
|
|
8781
|
+
var buttonRef = React.useRef(null);
|
|
8782
8782
|
var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
|
|
8783
8783
|
if (dayRender.isHidden) {
|
|
8784
|
-
return React
|
|
8784
|
+
return React.createElement("div", { role: "gridcell" });
|
|
8785
8785
|
}
|
|
8786
8786
|
if (!dayRender.isButton) {
|
|
8787
|
-
return React
|
|
8787
|
+
return React.createElement("div", __assign({}, dayRender.divProps));
|
|
8788
8788
|
}
|
|
8789
|
-
return React
|
|
8789
|
+
return React.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
|
|
8790
8790
|
}
|
|
8791
8791
|
|
|
8792
8792
|
/**
|
|
@@ -8798,13 +8798,13 @@ function WeekNumber(props) {
|
|
|
8798
8798
|
var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
|
|
8799
8799
|
var content = formatWeekNumber(Number(weekNumber), { locale: locale });
|
|
8800
8800
|
if (!onWeekNumberClick) {
|
|
8801
|
-
return (React
|
|
8801
|
+
return (React.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
|
|
8802
8802
|
}
|
|
8803
8803
|
var label = labelWeekNumber(Number(weekNumber), { locale: locale });
|
|
8804
8804
|
var handleClick = function (e) {
|
|
8805
8805
|
onWeekNumberClick(weekNumber, dates, e);
|
|
8806
8806
|
};
|
|
8807
|
-
return (React
|
|
8807
|
+
return (React.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
|
|
8808
8808
|
}
|
|
8809
8809
|
|
|
8810
8810
|
/** Render a row in the calendar, with the days and the week number. */
|
|
@@ -8815,13 +8815,13 @@ function Row(props) {
|
|
|
8815
8815
|
var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
|
|
8816
8816
|
var weekNumberCell;
|
|
8817
8817
|
if (showWeekNumber) {
|
|
8818
|
-
weekNumberCell = (React
|
|
8819
|
-
React
|
|
8818
|
+
weekNumberCell = (React.createElement("td", { className: classNames.cell, style: styles.cell },
|
|
8819
|
+
React.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
|
|
8820
8820
|
}
|
|
8821
|
-
return (React
|
|
8821
|
+
return (React.createElement("tr", { className: classNames.row, style: styles.row },
|
|
8822
8822
|
weekNumberCell,
|
|
8823
|
-
props.dates.map(function (date) { return (React
|
|
8824
|
-
React
|
|
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 }))); })));
|
|
8825
8825
|
}
|
|
8826
8826
|
|
|
8827
8827
|
/** Return the weeks between two dates. */
|
|
@@ -8889,10 +8889,10 @@ function Table(props) {
|
|
|
8889
8889
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
8890
8890
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
8891
8891
|
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
|
|
8892
|
-
return (React
|
|
8893
|
-
!hideHead && React
|
|
8894
|
-
React
|
|
8895
|
-
React
|
|
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 })));
|
|
8896
8896
|
}
|
|
8897
8897
|
|
|
8898
8898
|
/*
|
|
@@ -9004,9 +9004,9 @@ function Month(props) {
|
|
|
9004
9004
|
style = __assign(__assign({}, style), styles.caption_between);
|
|
9005
9005
|
}
|
|
9006
9006
|
var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
|
|
9007
|
-
return (React
|
|
9008
|
-
React
|
|
9009
|
-
React
|
|
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 })));
|
|
9010
9010
|
}
|
|
9011
9011
|
|
|
9012
9012
|
/** Render the container with the months according to the number of months to display. */
|
|
@@ -9015,9 +9015,9 @@ function Root(_a) {
|
|
|
9015
9015
|
var dayPicker = useDayPicker();
|
|
9016
9016
|
var focusContext = useFocusContext();
|
|
9017
9017
|
var navigation = useNavigation();
|
|
9018
|
-
var _b = React
|
|
9018
|
+
var _b = React.useState(false), hasInitialFocus = _b[0], setHasInitialFocus = _b[1];
|
|
9019
9019
|
// Focus the focus target when initialFocus is passed in
|
|
9020
|
-
React
|
|
9020
|
+
React.useEffect(function () {
|
|
9021
9021
|
if (!dayPicker.initialFocus)
|
|
9022
9022
|
return;
|
|
9023
9023
|
if (!focusContext.focusTarget)
|
|
@@ -9048,20 +9048,20 @@ function Root(_a) {
|
|
|
9048
9048
|
var _a;
|
|
9049
9049
|
return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
|
|
9050
9050
|
}, {});
|
|
9051
|
-
return (React
|
|
9052
|
-
React
|
|
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 })); }))));
|
|
9053
9053
|
}
|
|
9054
9054
|
|
|
9055
9055
|
/** Provide the value for all the context providers. */
|
|
9056
9056
|
function RootProvider(props) {
|
|
9057
9057
|
var children = props.children, initialProps = __rest(props, ["children"]);
|
|
9058
|
-
return (React
|
|
9059
|
-
React
|
|
9060
|
-
React
|
|
9061
|
-
React
|
|
9062
|
-
React
|
|
9063
|
-
React
|
|
9064
|
-
React
|
|
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))))))));
|
|
9065
9065
|
}
|
|
9066
9066
|
|
|
9067
9067
|
/**
|
|
@@ -9152,8 +9152,8 @@ function RootProvider(props) {
|
|
|
9152
9152
|
* ```
|
|
9153
9153
|
*/
|
|
9154
9154
|
function DayPicker(props) {
|
|
9155
|
-
return (React
|
|
9156
|
-
React
|
|
9155
|
+
return (React.createElement(RootProvider, __assign({}, props),
|
|
9156
|
+
React.createElement(Root, { initialProps: props })));
|
|
9157
9157
|
}
|
|
9158
9158
|
|
|
9159
9159
|
var reactResponsive$1 = {exports: {}};
|
|
@@ -9167,7 +9167,7 @@ function requireReactResponsive () {
|
|
|
9167
9167
|
hasRequiredReactResponsive = 1;
|
|
9168
9168
|
(function (module, exports) {
|
|
9169
9169
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
9170
|
-
module.exports = factory(React
|
|
9170
|
+
module.exports = factory(React);
|
|
9171
9171
|
})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
|
|
9172
9172
|
return /******/ (() => { // webpackBootstrap
|
|
9173
9173
|
/******/ var __webpack_modules__ = ({
|
|
@@ -10996,19 +10996,19 @@ var IconsSvg = function (_a) {
|
|
|
10996
10996
|
var fill = _a.fill, size = _a.size, icon = _a.icon;
|
|
10997
10997
|
switch (icon) {
|
|
10998
10998
|
case 'spinner':
|
|
10999
|
-
return (React
|
|
11000
|
-
React
|
|
11001
|
-
React
|
|
11002
|
-
React
|
|
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 })));
|
|
11003
11003
|
case 'warning':
|
|
11004
|
-
return (React
|
|
11004
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
|
|
11005
11005
|
verticalAlign: 'middle',
|
|
11006
11006
|
fill: fill,
|
|
11007
11007
|
overflow: 'hidden',
|
|
11008
11008
|
minWidth: '25px',
|
|
11009
11009
|
minHeight: '25px',
|
|
11010
11010
|
}, viewBox: "0 0 1024 1024", version: "1.1" },
|
|
11011
|
-
React
|
|
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" })));
|
|
11012
11012
|
default:
|
|
11013
11013
|
return null;
|
|
11014
11014
|
}
|
|
@@ -11334,7 +11334,7 @@ var checkForContinuousSelection = function (_a) {
|
|
|
11334
11334
|
calendarRangeTo &&
|
|
11335
11335
|
areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
|
|
11336
11336
|
});
|
|
11337
|
-
React
|
|
11337
|
+
React.useEffect(function () {
|
|
11338
11338
|
if ((rangeContext &&
|
|
11339
11339
|
calendarRangeFrom &&
|
|
11340
11340
|
!startIsEqualOrBeforeRangeContextEnd) ||
|
|
@@ -11349,7 +11349,7 @@ var checkForContinuousSelection = function (_a) {
|
|
|
11349
11349
|
|
|
11350
11350
|
var useCalendarTooltips = function (_a) {
|
|
11351
11351
|
var showFeedback = _a.showFeedback;
|
|
11352
|
-
return React
|
|
11352
|
+
return React.useEffect(function () {
|
|
11353
11353
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11354
11354
|
return;
|
|
11355
11355
|
// Children
|
|
@@ -11426,7 +11426,7 @@ var useCalendarTooltips = function (_a) {
|
|
|
11426
11426
|
|
|
11427
11427
|
var useCalendarLoadingSpinner = function (_a) {
|
|
11428
11428
|
var loadingData = _a.loadingData;
|
|
11429
|
-
return React
|
|
11429
|
+
return React.useEffect(function () {
|
|
11430
11430
|
if (typeof document === 'undefined')
|
|
11431
11431
|
return;
|
|
11432
11432
|
var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
|
|
@@ -11443,9 +11443,9 @@ var useCalendarLoadingSpinner = function (_a) {
|
|
|
11443
11443
|
|
|
11444
11444
|
var useUpdateDisabledDates = function (_a) {
|
|
11445
11445
|
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
|
|
11446
|
-
var _b = __read(React
|
|
11447
|
-
var _c = __read(React
|
|
11448
|
-
var newDisableCalendarDates = React
|
|
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 () {
|
|
11449
11449
|
var _a;
|
|
11450
11450
|
if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
|
|
11451
11451
|
var dateFormat_1 = 'dd-MM-yyyy';
|
|
@@ -11502,7 +11502,7 @@ styleInject(css_248z$c);
|
|
|
11502
11502
|
var css_248z$b = ".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";
|
|
11503
11503
|
styleInject(css_248z$b);
|
|
11504
11504
|
|
|
11505
|
-
var Calendar = React
|
|
11505
|
+
var Calendar = React.forwardRef(function (_a, ref) {
|
|
11506
11506
|
var _b;
|
|
11507
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;
|
|
11508
11508
|
// Translations
|
|
@@ -11590,9 +11590,9 @@ var Calendar = React$1.forwardRef(function (_a, ref) {
|
|
|
11590
11590
|
: __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11591
11591
|
lastPossibleCheckout
|
|
11592
11592
|
], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
|
|
11593
|
-
return (React
|
|
11594
|
-
React
|
|
11595
|
-
React
|
|
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
11596
|
selectedStartDate ||
|
|
11597
11597
|
rangeContextStartDate ||
|
|
11598
11598
|
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
@@ -11625,18 +11625,18 @@ var Calendar = React$1.forwardRef(function (_a, ref) {
|
|
|
11625
11625
|
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11626
11626
|
currentSelectionLastCheckoutDate: currentSelectionAvailability,
|
|
11627
11627
|
}) }),
|
|
11628
|
-
React
|
|
11629
|
-
React
|
|
11630
|
-
React
|
|
11631
|
-
React
|
|
11632
|
-
React
|
|
11633
|
-
React
|
|
11634
|
-
React
|
|
11635
|
-
React
|
|
11636
|
-
React
|
|
11637
|
-
React
|
|
11638
|
-
React
|
|
11639
|
-
React
|
|
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" })))));
|
|
11640
11640
|
});
|
|
11641
11641
|
|
|
11642
11642
|
var parseGuests = function (_a) {
|
|
@@ -11711,14 +11711,14 @@ var Pages;
|
|
|
11711
11711
|
|
|
11712
11712
|
var useFilterBar = function (_a) {
|
|
11713
11713
|
var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
|
|
11714
|
-
var _b = __read(React
|
|
11715
|
-
var _c = __read(React
|
|
11716
|
-
var _d = __read(React
|
|
11717
|
-
var _e = __read(React
|
|
11718
|
-
var _f = __read(React
|
|
11719
|
-
var _g = __read(React
|
|
11720
|
-
var _h = __read(React
|
|
11721
|
-
React
|
|
11714
|
+
var _b = __read(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
11715
|
+
var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
11716
|
+
var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
11717
|
+
var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
|
|
11718
|
+
var _f = __read(React.useState(0), 2), categories = _f[0], setCategories = _f[1];
|
|
11719
|
+
var _g = __read(React.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
|
|
11720
|
+
var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
|
|
11721
|
+
React.useEffect(function () {
|
|
11722
11722
|
var _a;
|
|
11723
11723
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
11724
11724
|
var startDateParam = urlSearchParams.get('startDate');
|
|
@@ -11743,7 +11743,7 @@ var useFilterBar = function (_a) {
|
|
|
11743
11743
|
setSelectedLocations(matchedLocations);
|
|
11744
11744
|
}
|
|
11745
11745
|
}, []);
|
|
11746
|
-
React
|
|
11746
|
+
React.useEffect(function () {
|
|
11747
11747
|
if (typeof window === 'undefined')
|
|
11748
11748
|
return;
|
|
11749
11749
|
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; });
|
|
@@ -11876,9 +11876,9 @@ var handleAgeCategoryRules = function (_a) {
|
|
|
11876
11876
|
|
|
11877
11877
|
var useScrollInToView = function (_a) {
|
|
11878
11878
|
var selectedFilter = _a.selectedFilter;
|
|
11879
|
-
var _b = __read(React
|
|
11880
|
-
var targetFilterBarRef = React
|
|
11881
|
-
React
|
|
11879
|
+
var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
|
|
11880
|
+
var targetFilterBarRef = React.useRef(null);
|
|
11881
|
+
React.useEffect(function () {
|
|
11882
11882
|
if (typeof window !== 'undefined' && window.innerWidth > 960) {
|
|
11883
11883
|
setIsMobile(false);
|
|
11884
11884
|
return;
|
|
@@ -11898,13 +11898,13 @@ var useScrollInToView = function (_a) {
|
|
|
11898
11898
|
var css_248z$a = ".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";
|
|
11899
11899
|
styleInject(css_248z$a);
|
|
11900
11900
|
|
|
11901
|
-
var SelectButton = React
|
|
11901
|
+
var SelectButton = React.forwardRef(function (_a, ref) {
|
|
11902
11902
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11903
|
-
return (React
|
|
11904
|
-
React
|
|
11905
|
-
React
|
|
11906
|
-
React
|
|
11907
|
-
React
|
|
11903
|
+
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 },
|
|
11904
|
+
React.createElement("span", { className: "select-button-wrapper" },
|
|
11905
|
+
React.createElement("div", null,
|
|
11906
|
+
React.createElement("p", { className: "select-button-label" }, label),
|
|
11907
|
+
React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11908
11908
|
});
|
|
11909
11909
|
SelectButton.displayName = 'SelectButton';
|
|
11910
11910
|
|
|
@@ -11913,7 +11913,7 @@ styleInject(css_248z$9);
|
|
|
11913
11913
|
|
|
11914
11914
|
var TabButton = function (_a) {
|
|
11915
11915
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11916
|
-
return (React
|
|
11916
|
+
return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11917
11917
|
};
|
|
11918
11918
|
|
|
11919
11919
|
var css_248z$8 = ".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";
|
|
@@ -11921,7 +11921,7 @@ styleInject(css_248z$8);
|
|
|
11921
11921
|
|
|
11922
11922
|
var GuestCount = function (_a) {
|
|
11923
11923
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
11924
|
-
React
|
|
11924
|
+
React.useEffect(function () {
|
|
11925
11925
|
if (minVal && minVal > count) {
|
|
11926
11926
|
updateGuestsCount("guests-".concat(id), minVal);
|
|
11927
11927
|
}
|
|
@@ -11934,20 +11934,20 @@ var GuestCount = function (_a) {
|
|
|
11934
11934
|
var handleIncrement = function () {
|
|
11935
11935
|
updateGuestsCount("guests-".concat(id), count + 1);
|
|
11936
11936
|
};
|
|
11937
|
-
return (React
|
|
11938
|
-
React
|
|
11939
|
-
React
|
|
11940
|
-
React
|
|
11937
|
+
return (React.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
|
|
11938
|
+
React.createElement("p", { className: "will-guests-filter-label" }, label),
|
|
11939
|
+
React.createElement("div", { className: "will-guests-filter-counter" },
|
|
11940
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
|
|
11941
11941
|
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
11942
11942
|
paddingBottom: '4px',
|
|
11943
11943
|
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
11944
11944
|
} },
|
|
11945
|
-
React
|
|
11946
|
-
React
|
|
11947
|
-
React
|
|
11948
|
-
React
|
|
11949
|
-
React
|
|
11950
|
-
React
|
|
11945
|
+
React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11946
|
+
React.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
|
|
11947
|
+
React.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
11948
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
11949
|
+
React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11950
|
+
React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11951
11951
|
};
|
|
11952
11952
|
|
|
11953
11953
|
var css_248z$7 = ".will-filter-section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\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";
|
|
@@ -11955,21 +11955,21 @@ styleInject(css_248z$7);
|
|
|
11955
11955
|
|
|
11956
11956
|
var FilterSectionHeader = function (_a) {
|
|
11957
11957
|
var title = _a.title, action = _a.action;
|
|
11958
|
-
return (React
|
|
11959
|
-
React
|
|
11960
|
-
action && React
|
|
11958
|
+
return (React.createElement("div", { className: "will-filter-section-header" },
|
|
11959
|
+
React.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
11960
|
+
action && React.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11961
11961
|
};
|
|
11962
11962
|
|
|
11963
11963
|
var css_248z$6 = ".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 margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
11964
11964
|
styleInject(css_248z$6);
|
|
11965
11965
|
|
|
11966
|
-
var Guests = React
|
|
11966
|
+
var Guests = React.forwardRef(function (_a, ref) {
|
|
11967
11967
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
11968
11968
|
var t = useTranslation('filterBar').t;
|
|
11969
11969
|
var containerRef = useAutoFocus(autoFocus);
|
|
11970
|
-
return (React
|
|
11971
|
-
React
|
|
11972
|
-
React
|
|
11970
|
+
return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
11971
|
+
React.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
11972
|
+
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 })); }))));
|
|
11973
11973
|
});
|
|
11974
11974
|
Guests.displayName = 'Guests';
|
|
11975
11975
|
|
|
@@ -11977,7 +11977,7 @@ var css_248z$5 = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n
|
|
|
11977
11977
|
styleInject(css_248z$5);
|
|
11978
11978
|
|
|
11979
11979
|
var Divider = function () {
|
|
11980
|
-
return React
|
|
11980
|
+
return React.createElement("div", { className: "will-filter-bar-divider" });
|
|
11981
11981
|
};
|
|
11982
11982
|
|
|
11983
11983
|
var css_248z$4 = ".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";
|
|
@@ -11992,16 +11992,16 @@ var Categories = function (_a) {
|
|
|
11992
11992
|
'Summer camp',
|
|
11993
11993
|
'Winter camp',
|
|
11994
11994
|
];
|
|
11995
|
-
var _b = __read(React
|
|
11995
|
+
var _b = __read(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
|
|
11996
11996
|
var handleCategoryChange = function (selectedCategory) {
|
|
11997
11997
|
setSelectedCategory(selectedCategory);
|
|
11998
11998
|
setCategories(selectedCategory);
|
|
11999
11999
|
};
|
|
12000
|
-
return (React
|
|
12001
|
-
React
|
|
12002
|
-
React
|
|
12003
|
-
React
|
|
12004
|
-
React
|
|
12000
|
+
return (React.createElement("div", { className: "will-filter-bar-categories" },
|
|
12001
|
+
React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12002
|
+
React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
|
|
12003
|
+
React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12004
|
+
React.createElement("span", null, itm))); }))));
|
|
12005
12005
|
};
|
|
12006
12006
|
|
|
12007
12007
|
var css_248z$3 = ".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 margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
@@ -12010,27 +12010,27 @@ styleInject(css_248z$3);
|
|
|
12010
12010
|
var css_248z$2 = ".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 border-radius: 8px;\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";
|
|
12011
12011
|
styleInject(css_248z$2);
|
|
12012
12012
|
|
|
12013
|
-
var ImageCard = React
|
|
12013
|
+
var ImageCard = React.forwardRef(function (_a, ref) {
|
|
12014
12014
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
12015
12015
|
var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
|
|
12016
|
-
return (React
|
|
12016
|
+
return (React.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
|
|
12017
12017
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
12018
12018
|
e.preventDefault();
|
|
12019
12019
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
12020
12020
|
}
|
|
12021
12021
|
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
|
|
12022
|
-
React
|
|
12023
|
-
React
|
|
12024
|
-
description && React
|
|
12025
|
-
React
|
|
12022
|
+
React.createElement("div", { className: "will-image-card-content" },
|
|
12023
|
+
React.createElement("h3", null, title),
|
|
12024
|
+
description && React.createElement("p", null, description)),
|
|
12025
|
+
React.createElement("div", { className: "will-image-card-image" }, imageUrl && React.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
|
|
12026
12026
|
});
|
|
12027
12027
|
ImageCard.displayName = 'ImageCard';
|
|
12028
12028
|
|
|
12029
|
-
var Locations = React
|
|
12029
|
+
var Locations = React.forwardRef(function (_a, ref) {
|
|
12030
12030
|
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;
|
|
12031
12031
|
var t = useTranslation('filterBar').t;
|
|
12032
|
-
var firstCardRef = React
|
|
12033
|
-
React
|
|
12032
|
+
var firstCardRef = React.useRef(null);
|
|
12033
|
+
React.useEffect(function () {
|
|
12034
12034
|
if (autoFocus && firstCardRef.current) {
|
|
12035
12035
|
firstCardRef.current.focus();
|
|
12036
12036
|
}
|
|
@@ -12054,9 +12054,9 @@ var Locations = React$1.forwardRef(function (_a, ref) {
|
|
|
12054
12054
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
12055
12055
|
}
|
|
12056
12056
|
};
|
|
12057
|
-
return (React
|
|
12058
|
-
React
|
|
12059
|
-
React
|
|
12057
|
+
return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12058
|
+
React.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12059
|
+
React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12060
12060
|
locations
|
|
12061
12061
|
.filter(function (location) {
|
|
12062
12062
|
var label = getLocalizedContent({
|
|
@@ -12076,7 +12076,7 @@ var Locations = React$1.forwardRef(function (_a, ref) {
|
|
|
12076
12076
|
locale: language,
|
|
12077
12077
|
})
|
|
12078
12078
|
: null;
|
|
12079
|
-
return (React
|
|
12079
|
+
return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: label, description: description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
|
|
12080
12080
|
}))));
|
|
12081
12081
|
});
|
|
12082
12082
|
Locations.displayName = 'Locations';
|
|
@@ -12084,7 +12084,7 @@ Locations.displayName = 'Locations';
|
|
|
12084
12084
|
var css_248z$1 = ".will-root {\n z-index: 999;\n width: fit-content;\n min-width: 796px;\n max-height: 100vh;\n position: relative;\n}\n\n.will-root.is-full-width {\n width: 100%;\n min-width: auto;\n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 222;\n background: transparent;\n padding: 10px;\n gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n position: relative;\n z-index: 222;\n border-radius: 40px;\n background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n border-radius: 25px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n padding: 20px;\n position: absolute;\n top: 125px;\n z-index: 111;\n border-radius: 25px;\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-root {\n width: 100%;\n min-width: auto;\n max-height: 100vh;\n z-index: 3;\n }\n\n .will-filter-bar-container {\n margin-top: 10px;\n top: 0;\n padding: 45px 20px;\n position: relative;\n }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n box-shadow: var(--will-box-shadow-light);\n}\n\n.will-guest-count {\n display: inline-block;\n min-width: 10px;\n}\n";
|
|
12085
12085
|
styleInject(css_248z$1);
|
|
12086
12086
|
|
|
12087
|
-
var Dates = React
|
|
12087
|
+
var Dates = React.forwardRef(function (_a, ref) {
|
|
12088
12088
|
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;
|
|
12089
12089
|
return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12090
12090
|
React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
@@ -12101,10 +12101,10 @@ function FilterBar(_a) {
|
|
|
12101
12101
|
useUpdateTranslations({ language: language });
|
|
12102
12102
|
var t = useTranslation('filterBar').t;
|
|
12103
12103
|
// Refs for SelectButtons
|
|
12104
|
-
var locationsButtonRef = React
|
|
12105
|
-
var datesButtonRef = React
|
|
12106
|
-
var guestsButtonRef = React
|
|
12107
|
-
var previouslyFocusedButtonRef = React
|
|
12104
|
+
var locationsButtonRef = React.useRef(null);
|
|
12105
|
+
var datesButtonRef = React.useRef(null);
|
|
12106
|
+
var guestsButtonRef = React.useRef(null);
|
|
12107
|
+
var previouslyFocusedButtonRef = React.useRef(null);
|
|
12108
12108
|
// Filters
|
|
12109
12109
|
var _f = useFilterBar({
|
|
12110
12110
|
redirectUrl: redirectUrl,
|
|
@@ -12118,7 +12118,7 @@ function FilterBar(_a) {
|
|
|
12118
12118
|
// Handle close filter section
|
|
12119
12119
|
var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
|
|
12120
12120
|
// Store previously focused button and restore focus when closing
|
|
12121
|
-
React
|
|
12121
|
+
React.useEffect(function () {
|
|
12122
12122
|
if (!selectedFilter && previouslyFocusedButtonRef.current) {
|
|
12123
12123
|
previouslyFocusedButtonRef.current.focus();
|
|
12124
12124
|
previouslyFocusedButtonRef.current = null;
|
|
@@ -12141,24 +12141,24 @@ function FilterBar(_a) {
|
|
|
12141
12141
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12142
12142
|
locationsSelectedLabel: t('locations.selected'),
|
|
12143
12143
|
});
|
|
12144
|
-
return (React
|
|
12145
|
-
tabs && tabs.length > 1 && (React
|
|
12144
|
+
return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
12145
|
+
tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
12146
12146
|
.sort(function (a, b) { return a.order - b.order; })
|
|
12147
|
-
.map(function (tab, idx) { return (React
|
|
12147
|
+
.map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
|
|
12148
12148
|
? tab.label[language]
|
|
12149
12149
|
: t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12150
12150
|
setSelectedPath(tab.path);
|
|
12151
12151
|
handleResetFilters();
|
|
12152
12152
|
handleSelectedFilter(false);
|
|
12153
12153
|
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
12154
|
-
React
|
|
12155
|
-
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React
|
|
12156
|
-
React
|
|
12154
|
+
React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
|
|
12155
|
+
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
|
|
12156
|
+
React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12157
12157
|
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12158
12158
|
handleSelectedFilter(FilterSections.LOCATIONS);
|
|
12159
12159
|
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12160
|
-
React
|
|
12161
|
-
React
|
|
12160
|
+
React.createElement(Divider, null))),
|
|
12161
|
+
React.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12162
12162
|
? parsedDates
|
|
12163
12163
|
: selectedPath === Pages.ROOMS
|
|
12164
12164
|
? t('calendar.roomsLabelPlaceholder')
|
|
@@ -12166,22 +12166,22 @@ function FilterBar(_a) {
|
|
|
12166
12166
|
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12167
12167
|
handleSelectedFilter(FilterSections.CALENDAR);
|
|
12168
12168
|
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12169
|
-
selectedPath !== Pages.EVENTS && (React
|
|
12170
|
-
React
|
|
12171
|
-
React
|
|
12169
|
+
selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
|
|
12170
|
+
React.createElement(Divider, null),
|
|
12171
|
+
React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12172
12172
|
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12173
12173
|
handleSelectedFilter(FilterSections.GUESTS);
|
|
12174
12174
|
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12175
|
-
React
|
|
12176
|
-
selectedFilter && (React
|
|
12177
|
-
selectedFilter === FilterSections.CALENDAR && (React
|
|
12178
|
-
React
|
|
12179
|
-
selectedFilter === FilterSections.GUESTS && (React
|
|
12180
|
-
React
|
|
12181
|
-
selectedFilter === FilterSections.CATEGORIES && (React
|
|
12182
|
-
React
|
|
12183
|
-
selectedFilter === FilterSections.LOCATIONS && (React
|
|
12184
|
-
React
|
|
12175
|
+
React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12176
|
+
selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12177
|
+
selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
|
|
12178
|
+
React.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12179
|
+
selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
|
|
12180
|
+
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12181
|
+
selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
|
|
12182
|
+
React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12183
|
+
selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
|
|
12184
|
+
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); } })))))));
|
|
12185
12185
|
}
|
|
12186
12186
|
////////////
|
|
12187
12187
|
var AGE_CATEGORIES_FALLBACK = [
|
|
@@ -12204,18 +12204,18 @@ var LANGUAGE_FALLBACK = 'en';
|
|
|
12204
12204
|
var useFilterCalendar = function (_a) {
|
|
12205
12205
|
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
|
|
12206
12206
|
// State
|
|
12207
|
-
var _b = __read(React
|
|
12208
|
-
var _c = __read(React
|
|
12209
|
-
var _d = __read(React
|
|
12210
|
-
var _e = __read(React
|
|
12211
|
-
var _f = __read(React
|
|
12212
|
-
var _g = __read(React
|
|
12213
|
-
var _h = __read(React
|
|
12214
|
-
var _j = __read(React
|
|
12215
|
-
var _k = __read(React
|
|
12207
|
+
var _b = __read(React.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
12208
|
+
var _c = __read(React.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
|
|
12209
|
+
var _d = __read(React.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
|
|
12210
|
+
var _e = __read(React.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
|
|
12211
|
+
var _f = __read(React.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
|
|
12212
|
+
var _g = __read(React.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
|
|
12213
|
+
var _h = __read(React.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
|
|
12214
|
+
var _j = __read(React.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
|
|
12215
|
+
var _k = __read(React.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
|
|
12216
12216
|
// Lifecycle
|
|
12217
12217
|
// Handle update component with new data
|
|
12218
|
-
React
|
|
12218
|
+
React.useEffect(function () {
|
|
12219
12219
|
var _a;
|
|
12220
12220
|
if (outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.availableDates) {
|
|
12221
12221
|
setDisableCalendarDates({
|
|
@@ -12233,7 +12233,7 @@ var useFilterCalendar = function (_a) {
|
|
|
12233
12233
|
}
|
|
12234
12234
|
}, [outerDisableCalendarDates]);
|
|
12235
12235
|
// Handle Range Context initial selections
|
|
12236
|
-
React
|
|
12236
|
+
React.useEffect(function () {
|
|
12237
12237
|
if (typeof window === 'undefined')
|
|
12238
12238
|
return;
|
|
12239
12239
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
@@ -12263,7 +12263,7 @@ var useFilterCalendar = function (_a) {
|
|
|
12263
12263
|
}
|
|
12264
12264
|
}, [toggleCalendar]);
|
|
12265
12265
|
// Handle submit dates
|
|
12266
|
-
React
|
|
12266
|
+
React.useEffect(function () {
|
|
12267
12267
|
var formatString = 'dd.MM.yyyy';
|
|
12268
12268
|
var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
|
|
12269
12269
|
? format(initialCalendarRange.to, formatString)
|
|
@@ -12322,36 +12322,36 @@ var Footer = function (_a) {
|
|
|
12322
12322
|
var nights = nightsCount({
|
|
12323
12323
|
calendarRange: calendarRange,
|
|
12324
12324
|
});
|
|
12325
|
-
return (React
|
|
12326
|
-
React
|
|
12327
|
-
calendarHasError ? (React
|
|
12325
|
+
return (React.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12326
|
+
React.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12327
|
+
calendarHasError ? (React.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12328
12328
|
renderCalendarErrorMessage({
|
|
12329
12329
|
palette: palette,
|
|
12330
12330
|
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12331
|
-
}))) : (React
|
|
12332
|
-
React
|
|
12331
|
+
}))) : (React.createElement("div", null,
|
|
12332
|
+
React.createElement("span", null, parseDate({
|
|
12333
12333
|
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12334
12334
|
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12335
12335
|
language: language,
|
|
12336
12336
|
}) || t('common:checkIn')),
|
|
12337
|
-
React
|
|
12338
|
-
React
|
|
12337
|
+
React.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12338
|
+
React.createElement("span", null, parseDate({
|
|
12339
12339
|
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12340
12340
|
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12341
12341
|
language: language,
|
|
12342
12342
|
}) || t('common:checkOut')))),
|
|
12343
|
-
React
|
|
12343
|
+
React.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
|
|
12344
12344
|
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12345
12345
|
: '')),
|
|
12346
|
-
React
|
|
12347
|
-
React
|
|
12346
|
+
React.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12347
|
+
React.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
|
|
12348
12348
|
};
|
|
12349
12349
|
/////////
|
|
12350
12350
|
var renderCalendarErrorMessage = function (_a) {
|
|
12351
12351
|
var message = _a.message, palette = _a.palette;
|
|
12352
|
-
return (React
|
|
12353
|
-
React
|
|
12354
|
-
React
|
|
12352
|
+
return (React.createElement(React.Fragment, null,
|
|
12353
|
+
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12354
|
+
React.createElement("span", null, message || '')));
|
|
12355
12355
|
};
|
|
12356
12356
|
|
|
12357
12357
|
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}";
|
|
@@ -12377,14 +12377,14 @@ function FilterCalendar(_a) {
|
|
|
12377
12377
|
var filtersRef = useCloseFilterSection({
|
|
12378
12378
|
handleSelectedFilter: setToggleCalendar,
|
|
12379
12379
|
}).filtersRef;
|
|
12380
|
-
return (React
|
|
12381
|
-
React
|
|
12382
|
-
React
|
|
12383
|
-
React
|
|
12384
|
-
React
|
|
12385
|
-
React
|
|
12386
|
-
React
|
|
12387
|
-
React
|
|
12380
|
+
return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
|
|
12381
|
+
React.createElement("div", { className: "will-calendar-header" },
|
|
12382
|
+
React.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12383
|
+
React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12384
|
+
React.createElement("div", { className: "will-calendar-main" },
|
|
12385
|
+
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 })),
|
|
12386
|
+
React.createElement("div", { className: "will-calendar-footer" },
|
|
12387
|
+
React.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12388
12388
|
}
|
|
12389
12389
|
|
|
12390
12390
|
exports.Button = Button$1;
|