willba-component-library 0.3.10 → 0.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/IconsSvg.d.ts +1 -2
- package/lib/components/Button/Button.d.ts +6 -6
- package/lib/components/FilterBar/FilterBar.d.ts +1 -2
- package/lib/components/FilterBar/FilterBarTypes.d.ts +3 -13
- package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts +1 -2
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +1 -2
- package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts +1 -2
- package/lib/components/FilterBar/components/categories/Categories.d.ts +1 -2
- package/lib/components/FilterBar/components/common/FilterSectionHeader.d.ts +2 -2
- package/lib/components/FilterBar/components/dates/Dates.d.ts +5 -4
- package/lib/components/FilterBar/components/divider/Divider.d.ts +1 -2
- package/lib/components/FilterBar/components/guests/Guests.d.ts +1 -2
- package/lib/components/FilterBar/components/locations/Locations.d.ts +1 -2
- package/lib/components/FilterBar/utils/index.d.ts +1 -1
- package/lib/components/FilterBar/utils/parseLocations.d.ts +1 -2
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -2
- package/lib/components/FilterCalendar/components/Footer.d.ts +1 -2
- package/lib/core/components/buttons/close-button/CloseButton.d.ts +1 -2
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -2
- package/lib/core/components/calendar/Calendar.d.ts +1 -2
- package/lib/index.d.ts +11 -19
- package/lib/index.esm.js +346 -359
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +431 -444
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +433 -447
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +1 -1
- package/src/assets/IconsSvg.tsx +0 -2
- package/src/components/Button/Button.stories.tsx +15 -16
- package/src/components/Button/Button.tsx +15 -15
- package/src/components/FilterBar/FilterBar.css +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +14 -50
- package/src/components/FilterBar/FilterBar.tsx +44 -13
- package/src/components/FilterBar/FilterBarTypes.ts +3 -14
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +13 -2
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx +0 -2
- package/src/components/FilterBar/components/cards/image-card/ImageCard.css +0 -1
- package/src/components/FilterBar/components/cards/image-card/ImageCard.tsx +1 -1
- package/src/components/FilterBar/components/categories/Categories.tsx +2 -1
- package/src/components/FilterBar/components/common/FilterSectionHeader.css +1 -0
- package/src/components/FilterBar/components/common/FilterSectionHeader.tsx +2 -1
- package/src/components/FilterBar/components/dates/Dates.css +3 -0
- package/src/components/FilterBar/components/dates/Dates.tsx +5 -4
- package/src/components/FilterBar/components/divider/Divider.tsx +0 -2
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +1 -1
- package/src/components/FilterBar/components/guests/Guests.css +1 -1
- package/src/components/FilterBar/components/guests/Guests.tsx +11 -2
- package/src/components/FilterBar/components/locations/Locations.css +1 -1
- package/src/components/FilterBar/components/locations/Locations.tsx +16 -36
- package/src/components/FilterBar/utils/calculateDropdownPosition.tsx +106 -0
- package/src/components/FilterBar/utils/index.tsx +1 -1
- package/src/components/FilterBar/utils/parseLocations.tsx +3 -7
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +1 -1
- package/src/components/FilterCalendar/FilterCalendar.tsx +0 -1
- package/src/components/FilterCalendar/components/Footer.tsx +0 -1
- package/src/core/components/buttons/close-button/CloseButton.tsx +0 -1
- package/src/core/components/buttons/submit-button/SubmitButton.tsx +1 -1
- package/src/core/components/calendar/Calendar.tsx +7 -4
- package/stories/Button.tsx +14 -11
- package/stories/Header.tsx +27 -14
- package/stories/Page.tsx +39 -21
- package/src/components/FilterBar/utils/getLocalizedContent.tsx +0 -21
package/lib/index.esm.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import * as React__default from 'react';
|
|
3
|
+
import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
3
4
|
|
|
4
5
|
/******************************************************************************
|
|
5
6
|
Copyright (c) Microsoft Corporation.
|
|
@@ -191,16 +192,16 @@ function styleInject(css, ref) {
|
|
|
191
192
|
}
|
|
192
193
|
}
|
|
193
194
|
|
|
194
|
-
var css_248z$
|
|
195
|
-
styleInject(css_248z$
|
|
195
|
+
var css_248z$h = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
|
|
196
|
+
styleInject(css_248z$h);
|
|
196
197
|
|
|
197
198
|
/**
|
|
198
199
|
* Primary UI component for user interaction
|
|
199
200
|
*/
|
|
200
201
|
var Button$1 = function (_a) {
|
|
201
|
-
var _b = _a.type, type = _b === void 0 ?
|
|
202
|
+
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;
|
|
202
203
|
var _d = __read(useState(4), 2), theState = _d[0]; _d[1];
|
|
203
|
-
return (
|
|
204
|
+
return (jsx("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick, children: "".concat(label, " ").concat(theState) }));
|
|
204
205
|
};
|
|
205
206
|
|
|
206
207
|
function warn() {
|
|
@@ -469,7 +470,7 @@ var DefaultContext = {
|
|
|
469
470
|
style: undefined,
|
|
470
471
|
attr: undefined
|
|
471
472
|
};
|
|
472
|
-
var IconContext =
|
|
473
|
+
var IconContext = React__default__default.createContext && React__default__default.createContext(DefaultContext);
|
|
473
474
|
|
|
474
475
|
var __assign$1 = undefined && undefined.__assign || function () {
|
|
475
476
|
__assign$1 = Object.assign || function (t) {
|
|
@@ -491,7 +492,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
|
|
|
491
492
|
};
|
|
492
493
|
function Tree2Element(tree) {
|
|
493
494
|
return tree && tree.map(function (node, i) {
|
|
494
|
-
return
|
|
495
|
+
return React__default__default.createElement(node.tag, __assign$1({
|
|
495
496
|
key: i
|
|
496
497
|
}, node.attr), Tree2Element(node.child));
|
|
497
498
|
});
|
|
@@ -499,7 +500,7 @@ function Tree2Element(tree) {
|
|
|
499
500
|
function GenIcon(data) {
|
|
500
501
|
// eslint-disable-next-line react/display-name
|
|
501
502
|
return function (props) {
|
|
502
|
-
return
|
|
503
|
+
return React__default__default.createElement(IconBase, __assign$1({
|
|
503
504
|
attr: __assign$1({}, data.attr)
|
|
504
505
|
}, props), Tree2Element(data.child));
|
|
505
506
|
};
|
|
@@ -514,7 +515,7 @@ function IconBase(props) {
|
|
|
514
515
|
var className;
|
|
515
516
|
if (conf.className) className = conf.className;
|
|
516
517
|
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
517
|
-
return
|
|
518
|
+
return React__default__default.createElement("svg", __assign$1({
|
|
518
519
|
stroke: "currentColor",
|
|
519
520
|
fill: "currentColor",
|
|
520
521
|
strokeWidth: "0"
|
|
@@ -526,9 +527,9 @@ function IconBase(props) {
|
|
|
526
527
|
height: computedSize,
|
|
527
528
|
width: computedSize,
|
|
528
529
|
xmlns: "http://www.w3.org/2000/svg"
|
|
529
|
-
}), title &&
|
|
530
|
+
}), title && React__default__default.createElement("title", null, title), props.children);
|
|
530
531
|
};
|
|
531
|
-
return IconContext !== undefined ?
|
|
532
|
+
return IconContext !== undefined ? React__default__default.createElement(IconContext.Consumer, null, function (conf) {
|
|
532
533
|
return elem(conf);
|
|
533
534
|
}) : elem(DefaultContext);
|
|
534
535
|
}
|
|
@@ -550,8 +551,8 @@ function useTheme(_a) {
|
|
|
550
551
|
return themePalette;
|
|
551
552
|
}
|
|
552
553
|
|
|
553
|
-
var css_248z$
|
|
554
|
-
styleInject(css_248z$
|
|
554
|
+
var css_248z$g = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-light-grey: #C8C8C8;\n --will-white: #fff;\n --will-white-transparent: #ffffffcf;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-error: #d32f2f;\n\n /* Transparent */\n --will-transparent-black: rgba(0, 0, 0, 0.5);\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n /* Color mix */\n --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n /* Shadows */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
|
|
555
|
+
styleInject(css_248z$g);
|
|
555
556
|
|
|
556
557
|
var useAwaitRender = function () {
|
|
557
558
|
var _a = __read(useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
@@ -2998,14 +2999,12 @@ var useAutoFocus = function (autoFocus) {
|
|
|
2998
2999
|
return ref;
|
|
2999
3000
|
};
|
|
3000
3001
|
|
|
3001
|
-
var css_248z$
|
|
3002
|
-
styleInject(css_248z$
|
|
3002
|
+
var css_248z$f = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n background-color: var(--will-primary);\n color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n background-color: transparent;\n color: var(--will-black);\n text-decoration: underline;\n font-weight: 500;\n font-size: 15px;\n padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n \n }\n}\n\n/* --- */\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n";
|
|
3003
|
+
styleInject(css_248z$f);
|
|
3003
3004
|
|
|
3004
3005
|
var SubmitButton = function (_a) {
|
|
3005
3006
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3006
|
-
return (
|
|
3007
|
-
isLoading ? (React__default.createElement("span", null, React__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default.createElement("span", null, startIcon)),
|
|
3008
|
-
label || 'Label'));
|
|
3007
|
+
return (jsxs("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading, children: [isLoading ? (jsx("span", { children: jsx(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }) })) : (startIcon && jsx("span", { children: startIcon })), label || 'Label'] }));
|
|
3009
3008
|
};
|
|
3010
3009
|
|
|
3011
3010
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -3013,13 +3012,12 @@ function IoIosCloseCircleOutline (props) {
|
|
|
3013
3012
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
|
|
3014
3013
|
}
|
|
3015
3014
|
|
|
3016
|
-
var css_248z$
|
|
3017
|
-
styleInject(css_248z$
|
|
3015
|
+
var css_248z$e = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n /* background-color: var(--will-grey); */\n color: var(--will-grey);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 23px;\n /* display: none; */\n\n position: absolute;\n top: 10px;\n right: 10px;\n\n min-height: 35px;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n top: 10px;\n right: 10px;\n\n border-radius: 25px;\n margin-left:0;\n \n display: flex;\n justify-content: center;\n }\n}\n";
|
|
3016
|
+
styleInject(css_248z$e);
|
|
3018
3017
|
|
|
3019
3018
|
var CloseButton = function (_a) {
|
|
3020
3019
|
var handleClose = _a.handleClose;
|
|
3021
|
-
return (
|
|
3022
|
-
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
3020
|
+
return (jsx("button", { className: "will-filter-bar-close-button", onClick: handleClose, children: jsx(IoIosCloseCircleOutline, {}) }));
|
|
3023
3021
|
};
|
|
3024
3022
|
|
|
3025
3023
|
function _typeof(o) {
|
|
@@ -7322,7 +7320,7 @@ function DayPickerProvider(props) {
|
|
|
7322
7320
|
onSelect = initialProps.onSelect;
|
|
7323
7321
|
}
|
|
7324
7322
|
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 });
|
|
7325
|
-
return (
|
|
7323
|
+
return (React__default__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
|
|
7326
7324
|
}
|
|
7327
7325
|
/**
|
|
7328
7326
|
* Hook to access the {@link DayPickerContextValue}.
|
|
@@ -7341,15 +7339,15 @@ function useDayPicker() {
|
|
|
7341
7339
|
/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
|
|
7342
7340
|
function CaptionLabel(props) {
|
|
7343
7341
|
var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
|
|
7344
|
-
return (
|
|
7342
|
+
return (React__default__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
|
|
7345
7343
|
}
|
|
7346
7344
|
|
|
7347
7345
|
/**
|
|
7348
7346
|
* Render the icon in the styled drop-down.
|
|
7349
7347
|
*/
|
|
7350
7348
|
function IconDropdown(props) {
|
|
7351
|
-
return (
|
|
7352
|
-
|
|
7349
|
+
return (React__default__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
|
|
7350
|
+
React__default__default.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" })));
|
|
7353
7351
|
}
|
|
7354
7352
|
|
|
7355
7353
|
/**
|
|
@@ -7361,12 +7359,12 @@ function Dropdown(props) {
|
|
|
7361
7359
|
var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
|
|
7362
7360
|
var dayPicker = useDayPicker();
|
|
7363
7361
|
var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
|
|
7364
|
-
return (
|
|
7365
|
-
|
|
7366
|
-
|
|
7367
|
-
|
|
7362
|
+
return (React__default__default.createElement("div", { className: className, style: style },
|
|
7363
|
+
React__default__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
|
|
7364
|
+
React__default__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
|
|
7365
|
+
React__default__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
|
|
7368
7366
|
caption,
|
|
7369
|
-
|
|
7367
|
+
React__default__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
|
|
7370
7368
|
}
|
|
7371
7369
|
|
|
7372
7370
|
/** Render the dropdown to navigate between months. */
|
|
@@ -7375,9 +7373,9 @@ function MonthsDropdown(props) {
|
|
|
7375
7373
|
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;
|
|
7376
7374
|
// Dropdown should appear only when both from/toDate is set
|
|
7377
7375
|
if (!fromDate)
|
|
7378
|
-
return
|
|
7376
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7379
7377
|
if (!toDate)
|
|
7380
|
-
return
|
|
7378
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7381
7379
|
var dropdownMonths = [];
|
|
7382
7380
|
if (isSameYear(fromDate, toDate)) {
|
|
7383
7381
|
// only display the months included in the range
|
|
@@ -7399,7 +7397,7 @@ function MonthsDropdown(props) {
|
|
|
7399
7397
|
props.onChange(newMonth);
|
|
7400
7398
|
};
|
|
7401
7399
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7402
|
-
return (
|
|
7400
|
+
return (React__default__default.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__default__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
|
|
7403
7401
|
}
|
|
7404
7402
|
|
|
7405
7403
|
/**
|
|
@@ -7413,9 +7411,9 @@ function YearsDropdown(props) {
|
|
|
7413
7411
|
var years = [];
|
|
7414
7412
|
// Dropdown should appear only when both from/toDate is set
|
|
7415
7413
|
if (!fromDate)
|
|
7416
|
-
return
|
|
7414
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7417
7415
|
if (!toDate)
|
|
7418
|
-
return
|
|
7416
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7419
7417
|
var fromYear = fromDate.getFullYear();
|
|
7420
7418
|
var toYear = toDate.getFullYear();
|
|
7421
7419
|
for (var year = fromYear; year <= toYear; year++) {
|
|
@@ -7426,7 +7424,7 @@ function YearsDropdown(props) {
|
|
|
7426
7424
|
props.onChange(newMonth);
|
|
7427
7425
|
};
|
|
7428
7426
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7429
|
-
return (
|
|
7427
|
+
return (React__default__default.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__default__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
|
|
7430
7428
|
}
|
|
7431
7429
|
|
|
7432
7430
|
/**
|
|
@@ -7590,7 +7588,7 @@ function NavigationProvider(props) {
|
|
|
7590
7588
|
nextMonth: nextMonth,
|
|
7591
7589
|
isDateDisplayed: isDateDisplayed
|
|
7592
7590
|
};
|
|
7593
|
-
return (
|
|
7591
|
+
return (React__default__default.createElement(NavigationContext.Provider, { value: value }, props.children));
|
|
7594
7592
|
}
|
|
7595
7593
|
/**
|
|
7596
7594
|
* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
|
|
@@ -7617,27 +7615,27 @@ function CaptionDropdowns(props) {
|
|
|
7617
7615
|
goToMonth(newMonth);
|
|
7618
7616
|
};
|
|
7619
7617
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7620
|
-
var captionLabel = (
|
|
7621
|
-
return (
|
|
7622
|
-
|
|
7623
|
-
|
|
7624
|
-
|
|
7618
|
+
var captionLabel = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7619
|
+
return (React__default__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
|
|
7620
|
+
React__default__default.createElement("div", { className: classNames.vhidden }, captionLabel),
|
|
7621
|
+
React__default__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
|
|
7622
|
+
React__default__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
|
|
7625
7623
|
}
|
|
7626
7624
|
|
|
7627
7625
|
/**
|
|
7628
7626
|
* Render the "previous month" button in the navigation.
|
|
7629
7627
|
*/
|
|
7630
7628
|
function IconLeft(props) {
|
|
7631
|
-
return (
|
|
7632
|
-
|
|
7629
|
+
return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7630
|
+
React__default__default.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" })));
|
|
7633
7631
|
}
|
|
7634
7632
|
|
|
7635
7633
|
/**
|
|
7636
7634
|
* Render the "next month" button in the navigation.
|
|
7637
7635
|
*/
|
|
7638
7636
|
function IconRight(props) {
|
|
7639
|
-
return (
|
|
7640
|
-
|
|
7637
|
+
return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7638
|
+
React__default__default.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" })));
|
|
7641
7639
|
}
|
|
7642
7640
|
|
|
7643
7641
|
/** Render a button HTML element applying the reset class name. */
|
|
@@ -7652,7 +7650,7 @@ var Button = forwardRef(function (props, ref) {
|
|
|
7652
7650
|
if (props.style) {
|
|
7653
7651
|
Object.assign(style, props.style);
|
|
7654
7652
|
}
|
|
7655
|
-
return (
|
|
7653
|
+
return (React__default__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
7656
7654
|
});
|
|
7657
7655
|
|
|
7658
7656
|
/** A component rendering the navigation buttons or the drop-downs. */
|
|
@@ -7660,7 +7658,7 @@ function Navigation(props) {
|
|
|
7660
7658
|
var _a, _b;
|
|
7661
7659
|
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;
|
|
7662
7660
|
if (!props.nextMonth && !props.previousMonth) {
|
|
7663
|
-
return
|
|
7661
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7664
7662
|
}
|
|
7665
7663
|
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
7666
7664
|
var previousClassName = [
|
|
@@ -7674,9 +7672,9 @@ function Navigation(props) {
|
|
|
7674
7672
|
].join(' ');
|
|
7675
7673
|
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
7676
7674
|
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
7677
|
-
return (
|
|
7678
|
-
!props.hidePrevious && (
|
|
7679
|
-
!props.hideNext && (
|
|
7675
|
+
return (React__default__default.createElement("div", { className: classNames.nav, style: styles.nav },
|
|
7676
|
+
!props.hidePrevious && (React__default__default.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
|
|
7677
|
+
!props.hideNext && (React__default__default.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
|
|
7680
7678
|
}
|
|
7681
7679
|
|
|
7682
7680
|
/**
|
|
@@ -7702,7 +7700,7 @@ function CaptionNavigation(props) {
|
|
|
7702
7700
|
return;
|
|
7703
7701
|
goToMonth(nextMonth);
|
|
7704
7702
|
};
|
|
7705
|
-
return (
|
|
7703
|
+
return (React__default__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
|
|
7706
7704
|
}
|
|
7707
7705
|
|
|
7708
7706
|
/**
|
|
@@ -7715,22 +7713,22 @@ function Caption(props) {
|
|
|
7715
7713
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7716
7714
|
var caption;
|
|
7717
7715
|
if (disableNavigation) {
|
|
7718
|
-
caption = (
|
|
7716
|
+
caption = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7719
7717
|
}
|
|
7720
7718
|
else if (captionLayout === 'dropdown') {
|
|
7721
|
-
caption = (
|
|
7719
|
+
caption = (React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
|
|
7722
7720
|
}
|
|
7723
7721
|
else if (captionLayout === 'dropdown-buttons') {
|
|
7724
|
-
caption = (
|
|
7725
|
-
|
|
7726
|
-
|
|
7722
|
+
caption = (React__default__default.createElement(React__default__default.Fragment, null,
|
|
7723
|
+
React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
|
|
7724
|
+
React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7727
7725
|
}
|
|
7728
7726
|
else {
|
|
7729
|
-
caption = (
|
|
7730
|
-
|
|
7731
|
-
|
|
7727
|
+
caption = (React__default__default.createElement(React__default__default.Fragment, null,
|
|
7728
|
+
React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
|
|
7729
|
+
React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7732
7730
|
}
|
|
7733
|
-
return (
|
|
7731
|
+
return (React__default__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
|
|
7734
7732
|
}
|
|
7735
7733
|
|
|
7736
7734
|
/** Render the Footer component (empty as default).*/
|
|
@@ -7738,10 +7736,10 @@ function Caption(props) {
|
|
|
7738
7736
|
function Footer$1(props) {
|
|
7739
7737
|
var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
|
|
7740
7738
|
if (!footer)
|
|
7741
|
-
return
|
|
7742
|
-
return (
|
|
7743
|
-
|
|
7744
|
-
|
|
7739
|
+
return React__default__default.createElement(React__default__default.Fragment, null);
|
|
7740
|
+
return (React__default__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
|
|
7741
|
+
React__default__default.createElement("tr", null,
|
|
7742
|
+
React__default__default.createElement("td", { colSpan: 8 }, footer))));
|
|
7745
7743
|
}
|
|
7746
7744
|
|
|
7747
7745
|
/**
|
|
@@ -7770,9 +7768,9 @@ ISOWeek) {
|
|
|
7770
7768
|
function HeadRow() {
|
|
7771
7769
|
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;
|
|
7772
7770
|
var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
|
|
7773
|
-
return (
|
|
7774
|
-
showWeekNumber && (
|
|
7775
|
-
weekdays.map(function (weekday, i) { return (
|
|
7771
|
+
return (React__default__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
|
|
7772
|
+
showWeekNumber && (React__default__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
|
|
7773
|
+
weekdays.map(function (weekday, i) { return (React__default__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
|
|
7776
7774
|
}
|
|
7777
7775
|
|
|
7778
7776
|
/** Render the table head. */
|
|
@@ -7780,14 +7778,14 @@ function Head() {
|
|
|
7780
7778
|
var _a;
|
|
7781
7779
|
var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
|
|
7782
7780
|
var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
|
|
7783
|
-
return (
|
|
7784
|
-
|
|
7781
|
+
return (React__default__default.createElement("thead", { style: styles.head, className: classNames.head },
|
|
7782
|
+
React__default__default.createElement(HeadRowComponent, null)));
|
|
7785
7783
|
}
|
|
7786
7784
|
|
|
7787
7785
|
/** Render the content of the day cell. */
|
|
7788
7786
|
function DayContent(props) {
|
|
7789
7787
|
var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
|
|
7790
|
-
return
|
|
7788
|
+
return React__default__default.createElement(React__default__default.Fragment, null, formatDay(props.date, { locale: locale }));
|
|
7791
7789
|
}
|
|
7792
7790
|
|
|
7793
7791
|
/**
|
|
@@ -7806,9 +7804,9 @@ function SelectMultipleProvider(props) {
|
|
|
7806
7804
|
disabled: []
|
|
7807
7805
|
}
|
|
7808
7806
|
};
|
|
7809
|
-
return (
|
|
7807
|
+
return (React__default__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
|
|
7810
7808
|
}
|
|
7811
|
-
return (
|
|
7809
|
+
return (React__default__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7812
7810
|
}
|
|
7813
7811
|
function SelectMultipleProviderInternal(_a) {
|
|
7814
7812
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7853,7 +7851,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7853
7851
|
onDayClick: onDayClick,
|
|
7854
7852
|
modifiers: modifiers
|
|
7855
7853
|
};
|
|
7856
|
-
return (
|
|
7854
|
+
return (React__default__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
|
|
7857
7855
|
}
|
|
7858
7856
|
/**
|
|
7859
7857
|
* Hook to access the {@link SelectMultipleContextValue}.
|
|
@@ -7922,9 +7920,9 @@ function SelectRangeProvider(props) {
|
|
|
7922
7920
|
disabled: []
|
|
7923
7921
|
}
|
|
7924
7922
|
};
|
|
7925
|
-
return (
|
|
7923
|
+
return (React__default__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
|
|
7926
7924
|
}
|
|
7927
|
-
return (
|
|
7925
|
+
return (React__default__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7928
7926
|
}
|
|
7929
7927
|
function SelectRangeProviderInternal(_a) {
|
|
7930
7928
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7995,7 +7993,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
7995
7993
|
});
|
|
7996
7994
|
}
|
|
7997
7995
|
}
|
|
7998
|
-
return (
|
|
7996
|
+
return (React__default__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
|
|
7999
7997
|
}
|
|
8000
7998
|
/**
|
|
8001
7999
|
* Hook to access the {@link SelectRangeContextValue}.
|
|
@@ -8095,7 +8093,7 @@ function ModifiersProvider(props) {
|
|
|
8095
8093
|
var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
|
|
8096
8094
|
var customModifiers = getCustomModifiers(dayPicker.modifiers);
|
|
8097
8095
|
var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
|
|
8098
|
-
return (
|
|
8096
|
+
return (React__default__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
|
|
8099
8097
|
}
|
|
8100
8098
|
/**
|
|
8101
8099
|
* Return the modifiers used by DayPicker.
|
|
@@ -8393,7 +8391,7 @@ function FocusProvider(props) {
|
|
|
8393
8391
|
focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
|
|
8394
8392
|
focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
|
|
8395
8393
|
};
|
|
8396
|
-
return (
|
|
8394
|
+
return (React__default__default.createElement(FocusContext.Provider, { value: value }, props.children));
|
|
8397
8395
|
}
|
|
8398
8396
|
/**
|
|
8399
8397
|
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
@@ -8441,9 +8439,9 @@ function SelectSingleProvider(props) {
|
|
|
8441
8439
|
var emptyContextValue = {
|
|
8442
8440
|
selected: undefined
|
|
8443
8441
|
};
|
|
8444
|
-
return (
|
|
8442
|
+
return (React__default__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
|
|
8445
8443
|
}
|
|
8446
|
-
return (
|
|
8444
|
+
return (React__default__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
8447
8445
|
}
|
|
8448
8446
|
function SelectSingleProviderInternal(_a) {
|
|
8449
8447
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8460,7 +8458,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8460
8458
|
selected: initialProps.selected,
|
|
8461
8459
|
onDayClick: onDayClick
|
|
8462
8460
|
};
|
|
8463
|
-
return (
|
|
8461
|
+
return (React__default__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
|
|
8464
8462
|
}
|
|
8465
8463
|
/**
|
|
8466
8464
|
* Hook to access the {@link SelectSingleContextValue}.
|
|
@@ -8730,7 +8728,7 @@ buttonRef) {
|
|
|
8730
8728
|
var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
|
|
8731
8729
|
activeModifiers.hidden);
|
|
8732
8730
|
var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
|
|
8733
|
-
var children = (
|
|
8731
|
+
var children = (React__default__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
|
|
8734
8732
|
var divProps = {
|
|
8735
8733
|
style: style,
|
|
8736
8734
|
className: className,
|
|
@@ -8761,12 +8759,12 @@ function Day(props) {
|
|
|
8761
8759
|
var buttonRef = useRef(null);
|
|
8762
8760
|
var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
|
|
8763
8761
|
if (dayRender.isHidden) {
|
|
8764
|
-
return
|
|
8762
|
+
return React__default__default.createElement("div", { role: "gridcell" });
|
|
8765
8763
|
}
|
|
8766
8764
|
if (!dayRender.isButton) {
|
|
8767
|
-
return
|
|
8765
|
+
return React__default__default.createElement("div", __assign({}, dayRender.divProps));
|
|
8768
8766
|
}
|
|
8769
|
-
return
|
|
8767
|
+
return React__default__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
|
|
8770
8768
|
}
|
|
8771
8769
|
|
|
8772
8770
|
/**
|
|
@@ -8778,13 +8776,13 @@ function WeekNumber(props) {
|
|
|
8778
8776
|
var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
|
|
8779
8777
|
var content = formatWeekNumber(Number(weekNumber), { locale: locale });
|
|
8780
8778
|
if (!onWeekNumberClick) {
|
|
8781
|
-
return (
|
|
8779
|
+
return (React__default__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
|
|
8782
8780
|
}
|
|
8783
8781
|
var label = labelWeekNumber(Number(weekNumber), { locale: locale });
|
|
8784
8782
|
var handleClick = function (e) {
|
|
8785
8783
|
onWeekNumberClick(weekNumber, dates, e);
|
|
8786
8784
|
};
|
|
8787
|
-
return (
|
|
8785
|
+
return (React__default__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
|
|
8788
8786
|
}
|
|
8789
8787
|
|
|
8790
8788
|
/** Render a row in the calendar, with the days and the week number. */
|
|
@@ -8795,13 +8793,13 @@ function Row(props) {
|
|
|
8795
8793
|
var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
|
|
8796
8794
|
var weekNumberCell;
|
|
8797
8795
|
if (showWeekNumber) {
|
|
8798
|
-
weekNumberCell = (
|
|
8799
|
-
|
|
8796
|
+
weekNumberCell = (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell },
|
|
8797
|
+
React__default__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
|
|
8800
8798
|
}
|
|
8801
|
-
return (
|
|
8799
|
+
return (React__default__default.createElement("tr", { className: classNames.row, style: styles.row },
|
|
8802
8800
|
weekNumberCell,
|
|
8803
|
-
props.dates.map(function (date) { return (
|
|
8804
|
-
|
|
8801
|
+
props.dates.map(function (date) { return (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
|
|
8802
|
+
React__default__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
|
|
8805
8803
|
}
|
|
8806
8804
|
|
|
8807
8805
|
/** Return the weeks between two dates. */
|
|
@@ -8869,10 +8867,10 @@ function Table(props) {
|
|
|
8869
8867
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
8870
8868
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
8871
8869
|
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
|
|
8872
|
-
return (
|
|
8873
|
-
!hideHead &&
|
|
8874
|
-
|
|
8875
|
-
|
|
8870
|
+
return (React__default__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
|
|
8871
|
+
!hideHead && React__default__default.createElement(HeadComponent, null),
|
|
8872
|
+
React__default__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
|
|
8873
|
+
React__default__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
|
|
8876
8874
|
}
|
|
8877
8875
|
|
|
8878
8876
|
/*
|
|
@@ -8916,8 +8914,8 @@ function canUseDOM() {
|
|
|
8916
8914
|
* @param deps
|
|
8917
8915
|
*/
|
|
8918
8916
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8919
|
-
?
|
|
8920
|
-
:
|
|
8917
|
+
? React__default.useLayoutEffect
|
|
8918
|
+
: React__default.useEffect;
|
|
8921
8919
|
var serverHandoffComplete = false;
|
|
8922
8920
|
var id = 0;
|
|
8923
8921
|
function genId() {
|
|
@@ -8930,7 +8928,7 @@ function useId(providedId) {
|
|
|
8930
8928
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8931
8929
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8932
8930
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8933
|
-
var _b =
|
|
8931
|
+
var _b = React__default.useState(initialId), id = _b[0], setId = _b[1];
|
|
8934
8932
|
useIsomorphicLayoutEffect(function () {
|
|
8935
8933
|
if (id === null) {
|
|
8936
8934
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8941,7 +8939,7 @@ function useId(providedId) {
|
|
|
8941
8939
|
}
|
|
8942
8940
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8943
8941
|
}, []);
|
|
8944
|
-
|
|
8942
|
+
React__default.useEffect(function () {
|
|
8945
8943
|
if (serverHandoffComplete === false) {
|
|
8946
8944
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8947
8945
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -8984,9 +8982,9 @@ function Month(props) {
|
|
|
8984
8982
|
style = __assign(__assign({}, style), styles.caption_between);
|
|
8985
8983
|
}
|
|
8986
8984
|
var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
|
|
8987
|
-
return (
|
|
8988
|
-
|
|
8989
|
-
|
|
8985
|
+
return (React__default__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
|
|
8986
|
+
React__default__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
|
|
8987
|
+
React__default__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
|
|
8990
8988
|
}
|
|
8991
8989
|
|
|
8992
8990
|
/** Render the container with the months according to the number of months to display. */
|
|
@@ -9028,20 +9026,20 @@ function Root(_a) {
|
|
|
9028
9026
|
var _a;
|
|
9029
9027
|
return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
|
|
9030
9028
|
}, {});
|
|
9031
|
-
return (
|
|
9032
|
-
|
|
9029
|
+
return (React__default__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
|
|
9030
|
+
React__default__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
|
|
9033
9031
|
}
|
|
9034
9032
|
|
|
9035
9033
|
/** Provide the value for all the context providers. */
|
|
9036
9034
|
function RootProvider(props) {
|
|
9037
9035
|
var children = props.children, initialProps = __rest(props, ["children"]);
|
|
9038
|
-
return (
|
|
9039
|
-
|
|
9040
|
-
|
|
9041
|
-
|
|
9042
|
-
|
|
9043
|
-
|
|
9044
|
-
|
|
9036
|
+
return (React__default__default.createElement(DayPickerProvider, { initialProps: initialProps },
|
|
9037
|
+
React__default__default.createElement(NavigationProvider, null,
|
|
9038
|
+
React__default__default.createElement(SelectSingleProvider, { initialProps: initialProps },
|
|
9039
|
+
React__default__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
|
|
9040
|
+
React__default__default.createElement(SelectRangeProvider, { initialProps: initialProps },
|
|
9041
|
+
React__default__default.createElement(ModifiersProvider, null,
|
|
9042
|
+
React__default__default.createElement(FocusProvider, null, children))))))));
|
|
9045
9043
|
}
|
|
9046
9044
|
|
|
9047
9045
|
/**
|
|
@@ -9132,8 +9130,8 @@ function RootProvider(props) {
|
|
|
9132
9130
|
* ```
|
|
9133
9131
|
*/
|
|
9134
9132
|
function DayPicker(props) {
|
|
9135
|
-
return (
|
|
9136
|
-
|
|
9133
|
+
return (React__default__default.createElement(RootProvider, __assign({}, props),
|
|
9134
|
+
React__default__default.createElement(Root, { initialProps: props })));
|
|
9137
9135
|
}
|
|
9138
9136
|
|
|
9139
9137
|
var reactResponsive$1 = {exports: {}};
|
|
@@ -9147,7 +9145,7 @@ function requireReactResponsive () {
|
|
|
9147
9145
|
hasRequiredReactResponsive = 1;
|
|
9148
9146
|
(function (module, exports) {
|
|
9149
9147
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
9150
|
-
module.exports = factory(
|
|
9148
|
+
module.exports = factory(React__default__default);
|
|
9151
9149
|
})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
|
|
9152
9150
|
return /******/ (() => { // webpackBootstrap
|
|
9153
9151
|
/******/ var __webpack_modules__ = ({
|
|
@@ -10976,19 +10974,15 @@ var IconsSvg = function (_a) {
|
|
|
10976
10974
|
var fill = _a.fill, size = _a.size, icon = _a.icon;
|
|
10977
10975
|
switch (icon) {
|
|
10978
10976
|
case 'spinner':
|
|
10979
|
-
return (
|
|
10980
|
-
React__default.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 "),
|
|
10981
|
-
React__default.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 }),
|
|
10982
|
-
React__default.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 })));
|
|
10977
|
+
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24", children: [jsx("style", { children: "\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 " }), jsx("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 }), jsx("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 })] }));
|
|
10983
10978
|
case 'warning':
|
|
10984
|
-
return (
|
|
10979
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
|
|
10985
10980
|
verticalAlign: 'middle',
|
|
10986
10981
|
fill: fill,
|
|
10987
10982
|
overflow: 'hidden',
|
|
10988
10983
|
minWidth: '25px',
|
|
10989
10984
|
minHeight: '25px',
|
|
10990
|
-
}, viewBox: "0 0 1024 1024", version: "1.1" }
|
|
10991
|
-
React__default.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" })));
|
|
10985
|
+
}, viewBox: "0 0 1024 1024", version: "1.1", children: jsx("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" }) }));
|
|
10992
10986
|
default:
|
|
10993
10987
|
return null;
|
|
10994
10988
|
}
|
|
@@ -11476,11 +11470,11 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11476
11470
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11477
11471
|
};
|
|
11478
11472
|
|
|
11479
|
-
var css_248z$
|
|
11480
|
-
styleInject(css_248z$
|
|
11473
|
+
var css_248z$d = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
11474
|
+
styleInject(css_248z$d);
|
|
11481
11475
|
|
|
11482
|
-
var css_248z$
|
|
11483
|
-
styleInject(css_248z$
|
|
11476
|
+
var css_248z$c = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n border-collapse: separate;\n border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n color: var(--will-transparent-black);\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only\n > div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only::before {\n content: '';\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left: calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-in-only {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid var(--will-light-grey);\n box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n border-right: none;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n border-right: none;\n border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n border-left: none;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-day_selected.rdp-day_range_middle.checkout-option {\n background-color: var(--will-primary-lightest);\n color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n user-select: none;\n pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n .will-root .will-calendar-filter-container .will-calendar-tooltip,\n .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n top: -70px;\n white-space: wrap;\n max-width: 120px;\n }\n}\n";
|
|
11477
|
+
styleInject(css_248z$c);
|
|
11484
11478
|
|
|
11485
11479
|
var Calendar = forwardRef(function (_a, ref) {
|
|
11486
11480
|
var _b;
|
|
@@ -11570,53 +11564,39 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11570
11564
|
: __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11571
11565
|
lastPossibleCheckout
|
|
11572
11566
|
], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
|
|
11573
|
-
return (
|
|
11574
|
-
|
|
11575
|
-
|
|
11576
|
-
|
|
11577
|
-
|
|
11578
|
-
|
|
11579
|
-
?
|
|
11580
|
-
|
|
11581
|
-
|
|
11582
|
-
|
|
11583
|
-
|
|
11584
|
-
|
|
11585
|
-
|
|
11586
|
-
|
|
11587
|
-
|
|
11588
|
-
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
11592
|
-
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11596
|
-
|
|
11597
|
-
|
|
11598
|
-
|
|
11599
|
-
|
|
11600
|
-
|
|
11601
|
-
|
|
11602
|
-
|
|
11603
|
-
|
|
11604
|
-
|
|
11605
|
-
|
|
11606
|
-
currentSelectionLastCheckoutDate: currentSelectionAvailability,
|
|
11607
|
-
}) }),
|
|
11608
|
-
React__default.createElement("div", { className: 'will-calendar-tooltip' },
|
|
11609
|
-
React__default.createElement("div", null, t('noCheckIn'))),
|
|
11610
|
-
React__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
|
|
11611
|
-
React__default.createElement("div", null, t('noCheckOut'))),
|
|
11612
|
-
React__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
|
|
11613
|
-
React__default.createElement("div", null, t('checkOutOnly'))),
|
|
11614
|
-
React__default.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
|
|
11615
|
-
React__default.createElement("div", null, t('checkInOnly'))),
|
|
11616
|
-
React__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
|
|
11617
|
-
React__default.createElement("div", null, t('checkOutOnly'))),
|
|
11618
|
-
React__default.createElement("div", { className: 'will-calendar-spinner' },
|
|
11619
|
-
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
11567
|
+
return (jsx("div", { className: "will-filter-bar-calendar", ref: ref, children: jsxs("div", { className: "will-calendar-filter-container", ref: calendarContainerRef, children: [jsx(DayPicker, { 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) ||
|
|
11568
|
+
selectedStartDate ||
|
|
11569
|
+
rangeContextStartDate ||
|
|
11570
|
+
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11571
|
+
? newDisableCalendarDates.disabledDates[0].from
|
|
11572
|
+
: today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
|
|
11573
|
+
requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
|
|
11574
|
+
setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
|
|
11575
|
+
}, classNames: {
|
|
11576
|
+
day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
|
|
11577
|
+
day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
|
|
11578
|
+
}, modifiersClassNames: {
|
|
11579
|
+
today: 'my-today',
|
|
11580
|
+
booked: 'booked',
|
|
11581
|
+
disabledAfterCheckIn: 'disabled-after-check-in',
|
|
11582
|
+
overlappingDate: 'overlapping-date',
|
|
11583
|
+
noActiveSelectionStart: 'no-active-selection-start',
|
|
11584
|
+
noActiveSelectionMid: 'no-active-selection-mid',
|
|
11585
|
+
noActiveSelectionEnd: 'no-active-selection-end',
|
|
11586
|
+
checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
|
|
11587
|
+
checkInOnly: 'check-in-only',
|
|
11588
|
+
checkOutOnly: 'check-out-only',
|
|
11589
|
+
}, modifiers:
|
|
11590
|
+
// This function handles conditions for applying the modifiersClassNames
|
|
11591
|
+
handleCalendarModifiers({
|
|
11592
|
+
calendarRange: calendarRange,
|
|
11593
|
+
disabledDates: disabled,
|
|
11594
|
+
overlappingDate: overlappingDate,
|
|
11595
|
+
rangeContext: rangeContext,
|
|
11596
|
+
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11597
|
+
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11598
|
+
currentSelectionLastCheckoutDate: currentSelectionAvailability,
|
|
11599
|
+
}) }, updateCalendarDefaultMonth), jsx("div", { className: 'will-calendar-tooltip', children: jsx("div", { children: t('noCheckIn') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out', children: jsx("div", { children: t('noCheckOut') }) }), jsx("div", { className: 'will-calendar-tooltip-overlapping-date', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-in-only', children: jsx("div", { children: t('checkInOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out-only', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-spinner', children: jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" }) })] }) }));
|
|
11620
11600
|
});
|
|
11621
11601
|
|
|
11622
11602
|
var parseGuests = function (_a) {
|
|
@@ -11645,28 +11625,13 @@ var parseGuests = function (_a) {
|
|
|
11645
11625
|
};
|
|
11646
11626
|
};
|
|
11647
11627
|
|
|
11648
|
-
var getLocalizedContent = function (_a) {
|
|
11649
|
-
var _b;
|
|
11650
|
-
var contents = _a.contents, locale = _a.locale, _c = _a.fallbackLocale, fallbackLocale = _c === void 0 ? 'en' : _c;
|
|
11651
|
-
var preferred = contents.find(function (content) { return content.locale === locale; });
|
|
11652
|
-
if (preferred)
|
|
11653
|
-
return preferred.content;
|
|
11654
|
-
var fallback = contents.find(function (content) { return content.locale === fallbackLocale; });
|
|
11655
|
-
if (fallback)
|
|
11656
|
-
return fallback.content;
|
|
11657
|
-
return (_b = contents[0]) === null || _b === void 0 ? void 0 : _b.content;
|
|
11658
|
-
};
|
|
11659
|
-
|
|
11660
11628
|
var parseLocations = function (_a) {
|
|
11661
|
-
var selectedLocations = _a.selectedLocations,
|
|
11629
|
+
var selectedLocations = _a.selectedLocations, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
|
|
11662
11630
|
if (!selectedLocations.length) {
|
|
11663
11631
|
return locationsPlaceholder;
|
|
11664
11632
|
}
|
|
11665
11633
|
if (selectedLocations.length === 1) {
|
|
11666
|
-
var translation =
|
|
11667
|
-
contents: selectedLocations[0].label,
|
|
11668
|
-
locale: language,
|
|
11669
|
-
});
|
|
11634
|
+
var translation = selectedLocations[0].label;
|
|
11670
11635
|
if (!translation) {
|
|
11671
11636
|
return locationsPlaceholder;
|
|
11672
11637
|
}
|
|
@@ -11689,6 +11654,89 @@ var Pages;
|
|
|
11689
11654
|
Pages["SALES"] = "/sales";
|
|
11690
11655
|
})(Pages || (Pages = {}));
|
|
11691
11656
|
|
|
11657
|
+
var calculateDropdownPosition = function (_a) {
|
|
11658
|
+
var filterSection = _a.filterSection, headerRef = _a.headerRef, locationsButtonRef = _a.locationsButtonRef, datesButtonRef = _a.datesButtonRef, guestsButtonRef = _a.guestsButtonRef, isMobile = _a.isMobile;
|
|
11659
|
+
// On mobile, don't apply any positioning - let CSS handle it naturally
|
|
11660
|
+
// Dropdowns will start from leftmost point with position: relative
|
|
11661
|
+
if (isMobile) {
|
|
11662
|
+
return {};
|
|
11663
|
+
}
|
|
11664
|
+
if (!headerRef.current)
|
|
11665
|
+
return {};
|
|
11666
|
+
var containerRect = headerRef.current.getBoundingClientRect();
|
|
11667
|
+
var containerLeft = 0;
|
|
11668
|
+
switch (filterSection) {
|
|
11669
|
+
case FilterSections.LOCATIONS:
|
|
11670
|
+
// Locations: Start from beginning, hug content
|
|
11671
|
+
if (locationsButtonRef.current) {
|
|
11672
|
+
var buttonRect = locationsButtonRef.current.getBoundingClientRect();
|
|
11673
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11674
|
+
return {
|
|
11675
|
+
left: relativeLeft,
|
|
11676
|
+
right: 'auto',
|
|
11677
|
+
width: 'auto',
|
|
11678
|
+
};
|
|
11679
|
+
}
|
|
11680
|
+
break;
|
|
11681
|
+
case FilterSections.CALENDAR:
|
|
11682
|
+
// Calendar: Two months side-by-side, needs ~650-700px
|
|
11683
|
+
// Start from dates button, but push left if not enough space
|
|
11684
|
+
if (datesButtonRef.current) {
|
|
11685
|
+
var buttonRect = datesButtonRef.current.getBoundingClientRect();
|
|
11686
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11687
|
+
var availableWidth = containerRect.width - relativeLeft;
|
|
11688
|
+
var calendarMinWidth = 650;
|
|
11689
|
+
if (availableWidth < calendarMinWidth) {
|
|
11690
|
+
// Not enough space, align to the right edge
|
|
11691
|
+
return {
|
|
11692
|
+
left: 'auto',
|
|
11693
|
+
right: containerLeft,
|
|
11694
|
+
width: 'auto',
|
|
11695
|
+
maxWidth: "".concat(containerRect.width, "px"),
|
|
11696
|
+
};
|
|
11697
|
+
}
|
|
11698
|
+
else {
|
|
11699
|
+
// Enough space, start from dates button
|
|
11700
|
+
return {
|
|
11701
|
+
left: relativeLeft,
|
|
11702
|
+
right: 'auto',
|
|
11703
|
+
width: 'auto',
|
|
11704
|
+
};
|
|
11705
|
+
}
|
|
11706
|
+
}
|
|
11707
|
+
break;
|
|
11708
|
+
case FilterSections.GUESTS:
|
|
11709
|
+
// Guests: Start from guests button, push left if not enough space
|
|
11710
|
+
if (guestsButtonRef.current) {
|
|
11711
|
+
var buttonRect = guestsButtonRef.current.getBoundingClientRect();
|
|
11712
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11713
|
+
var availableWidth = containerRect.width - relativeLeft;
|
|
11714
|
+
var dropdownMinWidth = 350;
|
|
11715
|
+
if (availableWidth < dropdownMinWidth) {
|
|
11716
|
+
// Not enough space, align to the right
|
|
11717
|
+
return {
|
|
11718
|
+
left: 'auto',
|
|
11719
|
+
right: containerLeft,
|
|
11720
|
+
width: 'auto',
|
|
11721
|
+
maxWidth: "".concat(containerRect.width, "px"),
|
|
11722
|
+
};
|
|
11723
|
+
}
|
|
11724
|
+
else {
|
|
11725
|
+
// Enough space, start from button
|
|
11726
|
+
return {
|
|
11727
|
+
left: relativeLeft,
|
|
11728
|
+
right: 'auto',
|
|
11729
|
+
width: 'auto',
|
|
11730
|
+
};
|
|
11731
|
+
}
|
|
11732
|
+
}
|
|
11733
|
+
break;
|
|
11734
|
+
default:
|
|
11735
|
+
return {};
|
|
11736
|
+
}
|
|
11737
|
+
return {};
|
|
11738
|
+
};
|
|
11739
|
+
|
|
11692
11740
|
var useFilterBar = function (_a) {
|
|
11693
11741
|
var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
|
|
11694
11742
|
var _b = __read(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
@@ -11875,29 +11923,25 @@ var useScrollInToView = function (_a) {
|
|
|
11875
11923
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11876
11924
|
};
|
|
11877
11925
|
|
|
11878
|
-
var css_248z$
|
|
11879
|
-
styleInject(css_248z$
|
|
11926
|
+
var css_248z$b = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button.disabled {\n cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n color: var(--will-black);\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n color: var(--will-black);\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none;\n }\n}\n";
|
|
11927
|
+
styleInject(css_248z$b);
|
|
11880
11928
|
|
|
11881
11929
|
var SelectButton = forwardRef(function (_a, ref) {
|
|
11882
11930
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11883
|
-
return (
|
|
11884
|
-
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
11885
|
-
React__default.createElement("div", null,
|
|
11886
|
-
React__default.createElement("p", { className: "select-button-label" }, label),
|
|
11887
|
-
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11931
|
+
return (jsx("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, children: jsx("span", { className: "select-button-wrapper", children: jsxs("div", { children: [jsx("p", { className: "select-button-label", children: label }), jsx("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })] }) }) }));
|
|
11888
11932
|
});
|
|
11889
11933
|
SelectButton.displayName = 'SelectButton';
|
|
11890
11934
|
|
|
11891
|
-
var css_248z$
|
|
11892
|
-
styleInject(css_248z$
|
|
11935
|
+
var css_248z$a = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n }\n\n .will-filter-bar-tab-button.light {\n color: var(--will-white)\n }\n\n .will-filter-bar-tab-button.dark {\n color: var(--will-black)\n }\n\n .will-filter-bar-tab-button.light.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.dark.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-lavender);\n }\n\n \n\n";
|
|
11936
|
+
styleInject(css_248z$a);
|
|
11893
11937
|
|
|
11894
11938
|
var TabButton = function (_a) {
|
|
11895
11939
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11896
|
-
return (
|
|
11940
|
+
return (jsx("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick, children: label }));
|
|
11897
11941
|
};
|
|
11898
11942
|
|
|
11899
|
-
var css_248z$
|
|
11900
|
-
styleInject(css_248z$
|
|
11943
|
+
var css_248z$9 = ".will-guests-filter-label,\n.will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n border-radius: 50%;\n background-color: transparent;\n border: 1px solid var(--will-grey);\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n color: var(--will-black);\n\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}\n";
|
|
11944
|
+
styleInject(css_248z$9);
|
|
11901
11945
|
|
|
11902
11946
|
var GuestCount = function (_a) {
|
|
11903
11947
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -11914,54 +11958,41 @@ var GuestCount = function (_a) {
|
|
|
11914
11958
|
var handleIncrement = function () {
|
|
11915
11959
|
updateGuestsCount("guests-".concat(id), count + 1);
|
|
11916
11960
|
};
|
|
11917
|
-
return (
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
|
|
11921
|
-
|
|
11922
|
-
|
|
11923
|
-
|
|
11924
|
-
|
|
11925
|
-
|
|
11926
|
-
React__default.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
|
|
11927
|
-
React__default.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
11928
|
-
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
11929
|
-
React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11930
|
-
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11931
|
-
};
|
|
11932
|
-
|
|
11933
|
-
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";
|
|
11934
|
-
styleInject(css_248z$7);
|
|
11961
|
+
return (jsxs("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) }, children: [jsx("p", { className: "will-guests-filter-label", children: label }), jsxs("div", { className: "will-guests-filter-counter", children: [jsx("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
|
|
11962
|
+
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
11963
|
+
paddingBottom: '4px',
|
|
11964
|
+
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
11965
|
+
}, children: jsx("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), jsx("span", { className: "will-guests-filter-count", children: count }), jsx("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement, children: jsx("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }));
|
|
11966
|
+
};
|
|
11967
|
+
|
|
11968
|
+
var css_248z$8 = ".will-filter-section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n}\n\n.will-filter-section-title {\n font-size: 22px;\n margin: 0;\n}\n\n.will-filter-section-action {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.will-filter-section-action .will-filter-bar-close-button {\n position: relative;\n top: auto;\n right: auto;\n margin: 0;\n}\n\n@media (max-width: 960px) {\n .will-filter-section-title {\n font-size: 18px;\n }\n}\n";
|
|
11969
|
+
styleInject(css_248z$8);
|
|
11935
11970
|
|
|
11936
11971
|
var FilterSectionHeader = function (_a) {
|
|
11937
11972
|
var title = _a.title, action = _a.action;
|
|
11938
|
-
return (
|
|
11939
|
-
React__default.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
11940
|
-
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11973
|
+
return (jsxs("div", { className: "will-filter-section-header", children: [jsx("h3", { className: "will-filter-section-title", children: title }), action && jsx("div", { className: "will-filter-section-action", children: action })] }));
|
|
11941
11974
|
};
|
|
11942
11975
|
|
|
11943
|
-
var css_248z$
|
|
11944
|
-
styleInject(css_248z$
|
|
11976
|
+
var css_248z$7 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n gap: 20px;\n padding: 16px;\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
11977
|
+
styleInject(css_248z$7);
|
|
11945
11978
|
|
|
11946
11979
|
var Guests = forwardRef(function (_a, ref) {
|
|
11947
11980
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
11948
11981
|
var t = useTranslation('filterBar').t;
|
|
11949
11982
|
var containerRef = useAutoFocus(autoFocus);
|
|
11950
|
-
return (
|
|
11951
|
-
React__default.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
11952
|
-
React__default.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.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 })); }))));
|
|
11983
|
+
return (jsxs("div", { className: "will-filter-bar-guests", ref: ref, children: [jsx(FilterSectionHeader, { title: t('guests.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-guests-filter-container", ref: containerRef, children: ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (jsx(GuestCount, { id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 }, category.id)); }) })] }));
|
|
11953
11984
|
});
|
|
11954
11985
|
Guests.displayName = 'Guests';
|
|
11955
11986
|
|
|
11956
|
-
var css_248z$
|
|
11957
|
-
styleInject(css_248z$
|
|
11987
|
+
var css_248z$6 = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n background-color: var(--will-charcoal-blue);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: auto;\n margin: 0 10px;\n height: 1px;\n background-color: var(--will-charcoal-blue);\n }\n}";
|
|
11988
|
+
styleInject(css_248z$6);
|
|
11958
11989
|
|
|
11959
11990
|
var Divider = function () {
|
|
11960
|
-
return
|
|
11991
|
+
return jsx("div", { className: "will-filter-bar-divider" });
|
|
11961
11992
|
};
|
|
11962
11993
|
|
|
11963
|
-
var css_248z$
|
|
11964
|
-
styleInject(css_248z$
|
|
11994
|
+
var css_248z$5 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
11995
|
+
styleInject(css_248z$5);
|
|
11965
11996
|
|
|
11966
11997
|
var Categories = function (_a) {
|
|
11967
11998
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -11977,32 +12008,24 @@ var Categories = function (_a) {
|
|
|
11977
12008
|
setSelectedCategory(selectedCategory);
|
|
11978
12009
|
setCategories(selectedCategory);
|
|
11979
12010
|
};
|
|
11980
|
-
return (
|
|
11981
|
-
React__default.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
11982
|
-
React__default.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React__default.createElement("div", { key: idx },
|
|
11983
|
-
React__default.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
11984
|
-
React__default.createElement("span", null, itm))); }))));
|
|
12011
|
+
return (jsxs("div", { className: "will-filter-bar-categories", children: [jsx("h3", { className: "will-categories-filter-title", children: t('categories.label') }), jsx("div", { className: "will-categories-filter-inner", children: categoriesPlaceholder.map(function (itm, idx) { return (jsxs("div", { children: [jsx("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }), jsx("span", { children: itm })] }, idx)); }) })] }));
|
|
11985
12012
|
};
|
|
11986
12013
|
|
|
11987
|
-
var css_248z$
|
|
11988
|
-
styleInject(css_248z$
|
|
12014
|
+
var css_248z$4 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-container {\n display: flex;\n gap: 10px;\n flex-direction: column;\n min-width: 400px;\n padding: 16px 0;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
12015
|
+
styleInject(css_248z$4);
|
|
11989
12016
|
|
|
11990
|
-
var css_248z$
|
|
11991
|
-
styleInject(css_248z$
|
|
12017
|
+
var css_248z$3 = ".will-image-card {\n display: flex;\n gap: 20px;\n justify-content: space-between;\n align-items: center;\n padding: 8px 16px;\n cursor: pointer;\n user-select: none;\n min-height: 40px;\n}\n\n.will-image-card.is-selected {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card:hover {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card-image img {\n width: 120px;\n height: 68px;\n object-fit: cover;\n}\n";
|
|
12018
|
+
styleInject(css_248z$3);
|
|
11992
12019
|
|
|
11993
12020
|
var ImageCard = forwardRef(function (_a, ref) {
|
|
11994
12021
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
11995
12022
|
var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
|
|
11996
|
-
return (
|
|
12023
|
+
return (jsxs("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
|
|
11997
12024
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
11998
12025
|
e.preventDefault();
|
|
11999
12026
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
12000
12027
|
}
|
|
12001
|
-
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
|
|
12002
|
-
React__default.createElement("div", { className: "will-image-card-content" },
|
|
12003
|
-
React__default.createElement("h3", null, title),
|
|
12004
|
-
description && React__default.createElement("p", null, description)),
|
|
12005
|
-
React__default.createElement("div", { className: "will-image-card-image" }, imageUrl && React__default.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
|
|
12028
|
+
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel, children: [jsxs("div", { className: "will-image-card-content", children: [jsx("h3", { children: title }), description && jsx("p", { children: description })] }), jsx("div", { className: "will-image-card-image", children: imageUrl && jsx("img", { src: imageUrl, alt: title || 'Location image' }) })] }));
|
|
12006
12029
|
});
|
|
12007
12030
|
ImageCard.displayName = 'ImageCard';
|
|
12008
12031
|
|
|
@@ -12034,42 +12057,22 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12034
12057
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
12035
12058
|
}
|
|
12036
12059
|
};
|
|
12037
|
-
return (
|
|
12038
|
-
|
|
12039
|
-
|
|
12040
|
-
|
|
12041
|
-
.filter(function (location) {
|
|
12042
|
-
var label = getLocalizedContent({
|
|
12043
|
-
contents: location.label,
|
|
12044
|
-
locale: language,
|
|
12045
|
-
});
|
|
12046
|
-
return !!label;
|
|
12047
|
-
})
|
|
12048
|
-
.map(function (location, index) {
|
|
12049
|
-
var label = getLocalizedContent({
|
|
12050
|
-
contents: location.label,
|
|
12051
|
-
locale: language,
|
|
12052
|
-
});
|
|
12053
|
-
var description = location.description
|
|
12054
|
-
? getLocalizedContent({
|
|
12055
|
-
contents: location.description,
|
|
12056
|
-
locale: language,
|
|
12057
|
-
})
|
|
12058
|
-
: null;
|
|
12059
|
-
return (React__default.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); } }));
|
|
12060
|
-
}))));
|
|
12060
|
+
return (jsxs("div", { className: "will-filter-bar-locations", ref: ref, children: [jsx(FilterSectionHeader, { title: t('locations.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-locations-filter-container", children: !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12061
|
+
locations.map(function (location, index) {
|
|
12062
|
+
return (jsx(ImageCard, { ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }, location.id));
|
|
12063
|
+
}) })] }));
|
|
12061
12064
|
});
|
|
12062
12065
|
Locations.displayName = 'Locations';
|
|
12063
12066
|
|
|
12064
|
-
var css_248z$
|
|
12067
|
+
var css_248z$2 = ".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 overflow: hidden;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\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";
|
|
12068
|
+
styleInject(css_248z$2);
|
|
12069
|
+
|
|
12070
|
+
var css_248z$1 = ".will-dates-filter-container {\n padding: 0 16px;\n}\n";
|
|
12065
12071
|
styleInject(css_248z$1);
|
|
12066
12072
|
|
|
12067
12073
|
var Dates = forwardRef(function (_a, ref) {
|
|
12068
12074
|
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;
|
|
12069
|
-
return (
|
|
12070
|
-
React__default.createElement(FilterSectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12071
|
-
React__default.createElement("div", { className: "will-dates-filter-container" },
|
|
12072
|
-
React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12075
|
+
return (jsxs("div", { className: "will-filter-bar-dates", ref: ref, children: [jsx(FilterSectionHeader, { title: '', action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-dates-filter-container", children: jsx(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }) })] }));
|
|
12073
12076
|
});
|
|
12074
12077
|
Dates.displayName = 'Dates';
|
|
12075
12078
|
|
|
@@ -12085,18 +12088,36 @@ function FilterBar(_a) {
|
|
|
12085
12088
|
var datesButtonRef = useRef(null);
|
|
12086
12089
|
var guestsButtonRef = useRef(null);
|
|
12087
12090
|
var previouslyFocusedButtonRef = useRef(null);
|
|
12091
|
+
var headerRef = useRef(null);
|
|
12092
|
+
// Dropdown positioning
|
|
12093
|
+
var _f = __read(useState({}), 2), dropdownStyle = _f[0], setDropdownStyle = _f[1];
|
|
12088
12094
|
// Filters
|
|
12089
|
-
var
|
|
12095
|
+
var _g = useFilterBar({
|
|
12090
12096
|
redirectUrl: redirectUrl,
|
|
12091
12097
|
ageCategories: ageCategories,
|
|
12092
12098
|
onSubmit: onSubmit,
|
|
12093
12099
|
tabs: tabs,
|
|
12094
12100
|
locations: locations,
|
|
12095
|
-
}), selectedFilter =
|
|
12101
|
+
}), selectedFilter = _g.selectedFilter, ageCategoryCounts = _g.ageCategoryCounts, categories = _g.categories, calendarRange = _g.calendarRange, selectedPath = _g.selectedPath, innerLoading = _g.innerLoading, selectedLocations = _g.selectedLocations, setSelectedLocations = _g.setSelectedLocations, setCalendarRange = _g.setCalendarRange, setCategories = _g.setCategories, handleSelectedFilter = _g.handleSelectedFilter, handleSubmit = _g.handleSubmit, updateGuestsCount = _g.updateGuestsCount, setSelectedPath = _g.setSelectedPath, handleResetFilters = _g.handleResetFilters;
|
|
12096
12102
|
// Scroll in to view
|
|
12097
|
-
var
|
|
12103
|
+
var _h = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _h.isMobile, targetFilterBarRef = _h.targetFilterBarRef;
|
|
12098
12104
|
// Handle close filter section
|
|
12099
12105
|
var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
|
|
12106
|
+
// Enhanced handleSelectedFilter with positioning
|
|
12107
|
+
var handleSelectedFilterWithPosition = function (filter) {
|
|
12108
|
+
if (filter) {
|
|
12109
|
+
var position = calculateDropdownPosition({
|
|
12110
|
+
filterSection: filter,
|
|
12111
|
+
headerRef: headerRef,
|
|
12112
|
+
locationsButtonRef: locationsButtonRef,
|
|
12113
|
+
datesButtonRef: datesButtonRef,
|
|
12114
|
+
guestsButtonRef: guestsButtonRef,
|
|
12115
|
+
isMobile: isMobile,
|
|
12116
|
+
});
|
|
12117
|
+
setDropdownStyle(position);
|
|
12118
|
+
}
|
|
12119
|
+
handleSelectedFilter(filter);
|
|
12120
|
+
};
|
|
12100
12121
|
// Store previously focused button and restore focus when closing
|
|
12101
12122
|
useEffect(function () {
|
|
12102
12123
|
if (!selectedFilter && previouslyFocusedButtonRef.current) {
|
|
@@ -12117,51 +12138,34 @@ function FilterBar(_a) {
|
|
|
12117
12138
|
});
|
|
12118
12139
|
var parsedLocations = parseLocations({
|
|
12119
12140
|
selectedLocations: selectedLocations,
|
|
12120
|
-
language: language,
|
|
12121
12141
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12122
12142
|
locationsSelectedLabel: t('locations.selected'),
|
|
12123
12143
|
});
|
|
12124
|
-
return (
|
|
12125
|
-
|
|
12126
|
-
|
|
12127
|
-
|
|
12128
|
-
|
|
12129
|
-
|
|
12130
|
-
|
|
12131
|
-
|
|
12132
|
-
|
|
12133
|
-
|
|
12134
|
-
|
|
12135
|
-
|
|
12136
|
-
|
|
12137
|
-
|
|
12138
|
-
|
|
12139
|
-
|
|
12140
|
-
|
|
12141
|
-
|
|
12142
|
-
|
|
12143
|
-
|
|
12144
|
-
|
|
12145
|
-
: t('
|
|
12146
|
-
|
|
12147
|
-
|
|
12148
|
-
|
|
12149
|
-
selectedPath !== Pages.EVENTS && (React__default.createElement(React__default.Fragment, null,
|
|
12150
|
-
React__default.createElement(Divider, null),
|
|
12151
|
-
React__default.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12152
|
-
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12153
|
-
handleSelectedFilter(FilterSections.GUESTS);
|
|
12154
|
-
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12155
|
-
React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12156
|
-
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12157
|
-
selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-dates-filter" },
|
|
12158
|
-
React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12159
|
-
selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
|
|
12160
|
-
React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12161
|
-
selectedFilter === FilterSections.CATEGORIES && (React__default.createElement("div", { id: "will-categories-filter" },
|
|
12162
|
-
React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12163
|
-
selectedFilter === FilterSections.LOCATIONS && (React__default.createElement("div", { id: "will-locations-filter" },
|
|
12164
|
-
React__default.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); } })))))));
|
|
12144
|
+
return (jsxs("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette, children: [tabs && tabs.length > 1 && (jsx("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef, children: tabs
|
|
12145
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
12146
|
+
.map(function (tab, idx) { return (jsx(TabButton, { label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12147
|
+
setSelectedPath(tab.path);
|
|
12148
|
+
handleResetFilters();
|
|
12149
|
+
handleSelectedFilter(false);
|
|
12150
|
+
}, active: selectedPath === tab.path, mode: mode }, "tab-".concat(idx))); }) })), jsxs("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
|
|
12151
|
+
headerRef.current = el;
|
|
12152
|
+
if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
|
|
12153
|
+
targetFilterBarRef.current = el;
|
|
12154
|
+
}
|
|
12155
|
+
}, children: [!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (jsxs(Fragment, { children: [jsx(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12156
|
+
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12157
|
+
handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
|
|
12158
|
+
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }), jsx(Divider, {})] })), jsx(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12159
|
+
? parsedDates
|
|
12160
|
+
: selectedPath === Pages.ROOMS
|
|
12161
|
+
? t('calendar.roomsLabelPlaceholder')
|
|
12162
|
+
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12163
|
+
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12164
|
+
handleSelectedFilterWithPosition(FilterSections.CALENDAR);
|
|
12165
|
+
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }), selectedPath !== Pages.EVENTS && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12166
|
+
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12167
|
+
handleSelectedFilterWithPosition(FilterSections.GUESTS);
|
|
12168
|
+
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" })] })), jsx(SubmitButton, { onClick: handleSubmit, startIcon: jsx(FaSearch, {}), label: t('common:search'), isLoading: innerLoading || outerLoading })] }), selectedFilter && (jsxs("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle), children: [selectedFilter === FilterSections.CALENDAR && (jsx("div", { id: "will-dates-filter", children: jsx(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }) })), selectedFilter === FilterSections.GUESTS && (jsx("div", { id: "will-guests-filter", children: jsx(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }) })), selectedFilter === FilterSections.CATEGORIES && (jsx("div", { id: "will-categories-filter", children: jsx(Categories, { categories: categories, setCategories: setCategories }) })), selectedFilter === FilterSections.LOCATIONS && (jsx("div", { id: "will-locations-filter", children: jsx(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); } }) }))] }))] }));
|
|
12165
12169
|
}
|
|
12166
12170
|
////////////
|
|
12167
12171
|
var AGE_CATEGORIES_FALLBACK = [
|
|
@@ -12302,36 +12306,26 @@ var Footer = function (_a) {
|
|
|
12302
12306
|
var nights = nightsCount({
|
|
12303
12307
|
calendarRange: calendarRange,
|
|
12304
12308
|
});
|
|
12305
|
-
return (
|
|
12306
|
-
|
|
12307
|
-
|
|
12308
|
-
|
|
12309
|
-
|
|
12310
|
-
|
|
12311
|
-
|
|
12312
|
-
|
|
12313
|
-
|
|
12314
|
-
|
|
12315
|
-
|
|
12316
|
-
|
|
12317
|
-
|
|
12318
|
-
|
|
12319
|
-
|
|
12320
|
-
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12321
|
-
language: language,
|
|
12322
|
-
}) || t('common:checkOut')))),
|
|
12323
|
-
React__default.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
|
|
12324
|
-
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12325
|
-
: '')),
|
|
12326
|
-
React__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12327
|
-
React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
|
|
12309
|
+
return (jsxs("div", { className: "will-calendar-footer-actions-wrapper", children: [jsxs("div", { className: "will-calendar-footer-dates", children: [calendarHasError ? (jsx("div", { className: "will-calendar-footer-error", children: calendarHasError &&
|
|
12310
|
+
renderCalendarErrorMessage({
|
|
12311
|
+
palette: palette,
|
|
12312
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12313
|
+
}) })) : (jsxs("div", { children: [jsx("span", { children: parseDate({
|
|
12314
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12315
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12316
|
+
language: language,
|
|
12317
|
+
}) || t('common:checkIn') }), jsx("span", { className: "will-calendar-footer-dates-separator", children: "-" }), jsx("span", { children: parseDate({
|
|
12318
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12319
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12320
|
+
language: language,
|
|
12321
|
+
}) || t('common:checkOut') })] })), jsx("span", { className: "will-calendar-footer-booked", children: !calendarHasError && nights
|
|
12322
|
+
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12323
|
+
: '' })] }), jsx("div", { className: "will-calendar-footer-actions", children: jsx(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }) })] }));
|
|
12328
12324
|
};
|
|
12329
12325
|
/////////
|
|
12330
12326
|
var renderCalendarErrorMessage = function (_a) {
|
|
12331
12327
|
var message = _a.message, palette = _a.palette;
|
|
12332
|
-
return (
|
|
12333
|
-
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12334
|
-
React__default.createElement("span", null, message || '')));
|
|
12328
|
+
return (jsxs(Fragment, { children: [jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }), jsx("span", { children: message || '' })] }));
|
|
12335
12329
|
};
|
|
12336
12330
|
|
|
12337
12331
|
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}";
|
|
@@ -12357,14 +12351,7 @@ function FilterCalendar(_a) {
|
|
|
12357
12351
|
var filtersRef = useCloseFilterSection({
|
|
12358
12352
|
handleSelectedFilter: setToggleCalendar,
|
|
12359
12353
|
}).filtersRef;
|
|
12360
|
-
return (
|
|
12361
|
-
React__default.createElement("div", { className: "will-calendar-header" },
|
|
12362
|
-
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12363
|
-
React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12364
|
-
React__default.createElement("div", { className: "will-calendar-main" },
|
|
12365
|
-
React__default.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 })),
|
|
12366
|
-
React__default.createElement("div", { className: "will-calendar-footer" },
|
|
12367
|
-
React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12354
|
+
return (jsx("div", { className: "will-root", style: themePalette, children: toggleCalendar && (jsxs("div", { className: "will-calendar-wrapper", ref: filtersRef, children: [jsxs("div", { className: "will-calendar-header", children: [jsx("h2", { children: t('filterBar:calendar.title') }), jsx(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })] }), jsx("div", { className: "will-calendar-main", children: jsx(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 }) }), jsx("div", { className: "will-calendar-footer", children: jsx(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }) })] })) }));
|
|
12368
12355
|
}
|
|
12369
12356
|
|
|
12370
12357
|
export { Button$1 as Button, FilterBar, FilterCalendar };
|