willba-component-library 0.3.13 → 0.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/IconsSvg.d.ts +2 -1
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/FilterBar/FilterBar.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +2 -1
- package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts +2 -1
- package/lib/components/FilterBar/components/categories/Categories.d.ts +2 -1
- package/lib/components/FilterBar/components/common/FilterSectionHeader.d.ts +2 -2
- package/lib/components/FilterBar/components/dates/Dates.d.ts +2 -2
- package/lib/components/FilterBar/components/divider/Divider.d.ts +2 -1
- package/lib/components/FilterBar/components/guests/Guests.d.ts +2 -1
- package/lib/components/FilterBar/components/locations/Locations.d.ts +2 -1
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +2 -1
- package/lib/components/FilterCalendar/components/Footer.d.ts +2 -1
- package/lib/core/components/buttons/close-button/CloseButton.d.ts +2 -1
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -1
- package/lib/core/components/calendar/Calendar.d.ts +2 -1
- package/lib/index.d.ts +4 -5
- package/lib/index.esm.js +289 -213
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +376 -300
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +379 -302
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
4
3
|
|
|
5
4
|
/******************************************************************************
|
|
6
5
|
Copyright (c) Microsoft Corporation.
|
|
@@ -201,7 +200,7 @@ styleInject(css_248z$h);
|
|
|
201
200
|
var Button$1 = function (_a) {
|
|
202
201
|
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;
|
|
203
202
|
var _d = __read(useState(4), 2), theState = _d[0]; _d[1];
|
|
204
|
-
return (
|
|
203
|
+
return (React__default.createElement("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
|
|
205
204
|
};
|
|
206
205
|
|
|
207
206
|
function warn() {
|
|
@@ -470,7 +469,7 @@ var DefaultContext = {
|
|
|
470
469
|
style: undefined,
|
|
471
470
|
attr: undefined
|
|
472
471
|
};
|
|
473
|
-
var IconContext =
|
|
472
|
+
var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
|
|
474
473
|
|
|
475
474
|
var __assign$1 = undefined && undefined.__assign || function () {
|
|
476
475
|
__assign$1 = Object.assign || function (t) {
|
|
@@ -492,7 +491,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
|
|
|
492
491
|
};
|
|
493
492
|
function Tree2Element(tree) {
|
|
494
493
|
return tree && tree.map(function (node, i) {
|
|
495
|
-
return
|
|
494
|
+
return React__default.createElement(node.tag, __assign$1({
|
|
496
495
|
key: i
|
|
497
496
|
}, node.attr), Tree2Element(node.child));
|
|
498
497
|
});
|
|
@@ -500,7 +499,7 @@ function Tree2Element(tree) {
|
|
|
500
499
|
function GenIcon(data) {
|
|
501
500
|
// eslint-disable-next-line react/display-name
|
|
502
501
|
return function (props) {
|
|
503
|
-
return
|
|
502
|
+
return React__default.createElement(IconBase, __assign$1({
|
|
504
503
|
attr: __assign$1({}, data.attr)
|
|
505
504
|
}, props), Tree2Element(data.child));
|
|
506
505
|
};
|
|
@@ -515,7 +514,7 @@ function IconBase(props) {
|
|
|
515
514
|
var className;
|
|
516
515
|
if (conf.className) className = conf.className;
|
|
517
516
|
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
518
|
-
return
|
|
517
|
+
return React__default.createElement("svg", __assign$1({
|
|
519
518
|
stroke: "currentColor",
|
|
520
519
|
fill: "currentColor",
|
|
521
520
|
strokeWidth: "0"
|
|
@@ -527,9 +526,9 @@ function IconBase(props) {
|
|
|
527
526
|
height: computedSize,
|
|
528
527
|
width: computedSize,
|
|
529
528
|
xmlns: "http://www.w3.org/2000/svg"
|
|
530
|
-
}), title &&
|
|
529
|
+
}), title && React__default.createElement("title", null, title), props.children);
|
|
531
530
|
};
|
|
532
|
-
return IconContext !== undefined ?
|
|
531
|
+
return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
|
|
533
532
|
return elem(conf);
|
|
534
533
|
}) : elem(DefaultContext);
|
|
535
534
|
}
|
|
@@ -3004,7 +3003,9 @@ styleInject(css_248z$f);
|
|
|
3004
3003
|
|
|
3005
3004
|
var SubmitButton = function (_a) {
|
|
3006
3005
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3007
|
-
return (
|
|
3006
|
+
return (React__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
|
|
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'));
|
|
3008
3009
|
};
|
|
3009
3010
|
|
|
3010
3011
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -3017,7 +3018,8 @@ styleInject(css_248z$e);
|
|
|
3017
3018
|
|
|
3018
3019
|
var CloseButton = function (_a) {
|
|
3019
3020
|
var handleClose = _a.handleClose;
|
|
3020
|
-
return (
|
|
3021
|
+
return (React__default.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
3022
|
+
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
3021
3023
|
};
|
|
3022
3024
|
|
|
3023
3025
|
function _typeof(o) {
|
|
@@ -7320,7 +7322,7 @@ function DayPickerProvider(props) {
|
|
|
7320
7322
|
onSelect = initialProps.onSelect;
|
|
7321
7323
|
}
|
|
7322
7324
|
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 });
|
|
7323
|
-
return (
|
|
7325
|
+
return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
|
|
7324
7326
|
}
|
|
7325
7327
|
/**
|
|
7326
7328
|
* Hook to access the {@link DayPickerContextValue}.
|
|
@@ -7339,15 +7341,15 @@ function useDayPicker() {
|
|
|
7339
7341
|
/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
|
|
7340
7342
|
function CaptionLabel(props) {
|
|
7341
7343
|
var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
|
|
7342
|
-
return (
|
|
7344
|
+
return (React__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
|
|
7343
7345
|
}
|
|
7344
7346
|
|
|
7345
7347
|
/**
|
|
7346
7348
|
* Render the icon in the styled drop-down.
|
|
7347
7349
|
*/
|
|
7348
7350
|
function IconDropdown(props) {
|
|
7349
|
-
return (
|
|
7350
|
-
|
|
7351
|
+
return (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
|
|
7352
|
+
React__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" })));
|
|
7351
7353
|
}
|
|
7352
7354
|
|
|
7353
7355
|
/**
|
|
@@ -7359,12 +7361,12 @@ function Dropdown(props) {
|
|
|
7359
7361
|
var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
|
|
7360
7362
|
var dayPicker = useDayPicker();
|
|
7361
7363
|
var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
|
|
7362
|
-
return (
|
|
7363
|
-
|
|
7364
|
-
|
|
7365
|
-
|
|
7364
|
+
return (React__default.createElement("div", { className: className, style: style },
|
|
7365
|
+
React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
|
|
7366
|
+
React__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
|
|
7367
|
+
React__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
|
|
7366
7368
|
caption,
|
|
7367
|
-
|
|
7369
|
+
React__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
|
|
7368
7370
|
}
|
|
7369
7371
|
|
|
7370
7372
|
/** Render the dropdown to navigate between months. */
|
|
@@ -7373,9 +7375,9 @@ function MonthsDropdown(props) {
|
|
|
7373
7375
|
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;
|
|
7374
7376
|
// Dropdown should appear only when both from/toDate is set
|
|
7375
7377
|
if (!fromDate)
|
|
7376
|
-
return
|
|
7378
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7377
7379
|
if (!toDate)
|
|
7378
|
-
return
|
|
7380
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7379
7381
|
var dropdownMonths = [];
|
|
7380
7382
|
if (isSameYear(fromDate, toDate)) {
|
|
7381
7383
|
// only display the months included in the range
|
|
@@ -7397,7 +7399,7 @@ function MonthsDropdown(props) {
|
|
|
7397
7399
|
props.onChange(newMonth);
|
|
7398
7400
|
};
|
|
7399
7401
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7400
|
-
return (
|
|
7402
|
+
return (React__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.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
|
|
7401
7403
|
}
|
|
7402
7404
|
|
|
7403
7405
|
/**
|
|
@@ -7411,9 +7413,9 @@ function YearsDropdown(props) {
|
|
|
7411
7413
|
var years = [];
|
|
7412
7414
|
// Dropdown should appear only when both from/toDate is set
|
|
7413
7415
|
if (!fromDate)
|
|
7414
|
-
return
|
|
7416
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7415
7417
|
if (!toDate)
|
|
7416
|
-
return
|
|
7418
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7417
7419
|
var fromYear = fromDate.getFullYear();
|
|
7418
7420
|
var toYear = toDate.getFullYear();
|
|
7419
7421
|
for (var year = fromYear; year <= toYear; year++) {
|
|
@@ -7424,7 +7426,7 @@ function YearsDropdown(props) {
|
|
|
7424
7426
|
props.onChange(newMonth);
|
|
7425
7427
|
};
|
|
7426
7428
|
var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
|
|
7427
|
-
return (
|
|
7429
|
+
return (React__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.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
|
|
7428
7430
|
}
|
|
7429
7431
|
|
|
7430
7432
|
/**
|
|
@@ -7588,7 +7590,7 @@ function NavigationProvider(props) {
|
|
|
7588
7590
|
nextMonth: nextMonth,
|
|
7589
7591
|
isDateDisplayed: isDateDisplayed
|
|
7590
7592
|
};
|
|
7591
|
-
return (
|
|
7593
|
+
return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
|
|
7592
7594
|
}
|
|
7593
7595
|
/**
|
|
7594
7596
|
* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
|
|
@@ -7615,27 +7617,27 @@ function CaptionDropdowns(props) {
|
|
|
7615
7617
|
goToMonth(newMonth);
|
|
7616
7618
|
};
|
|
7617
7619
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7618
|
-
var captionLabel = (
|
|
7619
|
-
return (
|
|
7620
|
-
|
|
7621
|
-
|
|
7622
|
-
|
|
7620
|
+
var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7621
|
+
return (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
|
|
7622
|
+
React__default.createElement("div", { className: classNames.vhidden }, captionLabel),
|
|
7623
|
+
React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
|
|
7624
|
+
React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
|
|
7623
7625
|
}
|
|
7624
7626
|
|
|
7625
7627
|
/**
|
|
7626
7628
|
* Render the "previous month" button in the navigation.
|
|
7627
7629
|
*/
|
|
7628
7630
|
function IconLeft(props) {
|
|
7629
|
-
return (
|
|
7630
|
-
|
|
7631
|
+
return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7632
|
+
React__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" })));
|
|
7631
7633
|
}
|
|
7632
7634
|
|
|
7633
7635
|
/**
|
|
7634
7636
|
* Render the "next month" button in the navigation.
|
|
7635
7637
|
*/
|
|
7636
7638
|
function IconRight(props) {
|
|
7637
|
-
return (
|
|
7638
|
-
|
|
7639
|
+
return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
7640
|
+
React__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" })));
|
|
7639
7641
|
}
|
|
7640
7642
|
|
|
7641
7643
|
/** Render a button HTML element applying the reset class name. */
|
|
@@ -7650,7 +7652,7 @@ var Button = forwardRef(function (props, ref) {
|
|
|
7650
7652
|
if (props.style) {
|
|
7651
7653
|
Object.assign(style, props.style);
|
|
7652
7654
|
}
|
|
7653
|
-
return (
|
|
7655
|
+
return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
7654
7656
|
});
|
|
7655
7657
|
|
|
7656
7658
|
/** A component rendering the navigation buttons or the drop-downs. */
|
|
@@ -7658,7 +7660,7 @@ function Navigation(props) {
|
|
|
7658
7660
|
var _a, _b;
|
|
7659
7661
|
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;
|
|
7660
7662
|
if (!props.nextMonth && !props.previousMonth) {
|
|
7661
|
-
return
|
|
7663
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7662
7664
|
}
|
|
7663
7665
|
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
7664
7666
|
var previousClassName = [
|
|
@@ -7672,9 +7674,9 @@ function Navigation(props) {
|
|
|
7672
7674
|
].join(' ');
|
|
7673
7675
|
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
7674
7676
|
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
7675
|
-
return (
|
|
7676
|
-
!props.hidePrevious && (
|
|
7677
|
-
!props.hideNext && (
|
|
7677
|
+
return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
|
|
7678
|
+
!props.hidePrevious && (React__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.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
|
|
7679
|
+
!props.hideNext && (React__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.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
|
|
7678
7680
|
}
|
|
7679
7681
|
|
|
7680
7682
|
/**
|
|
@@ -7700,7 +7702,7 @@ function CaptionNavigation(props) {
|
|
|
7700
7702
|
return;
|
|
7701
7703
|
goToMonth(nextMonth);
|
|
7702
7704
|
};
|
|
7703
|
-
return (
|
|
7705
|
+
return (React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
|
|
7704
7706
|
}
|
|
7705
7707
|
|
|
7706
7708
|
/**
|
|
@@ -7713,22 +7715,22 @@ function Caption(props) {
|
|
|
7713
7715
|
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
7714
7716
|
var caption;
|
|
7715
7717
|
if (disableNavigation) {
|
|
7716
|
-
caption = (
|
|
7718
|
+
caption = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
7717
7719
|
}
|
|
7718
7720
|
else if (captionLayout === 'dropdown') {
|
|
7719
|
-
caption = (
|
|
7721
|
+
caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
|
|
7720
7722
|
}
|
|
7721
7723
|
else if (captionLayout === 'dropdown-buttons') {
|
|
7722
|
-
caption = (
|
|
7723
|
-
|
|
7724
|
-
|
|
7724
|
+
caption = (React__default.createElement(React__default.Fragment, null,
|
|
7725
|
+
React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
|
|
7726
|
+
React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7725
7727
|
}
|
|
7726
7728
|
else {
|
|
7727
|
-
caption = (
|
|
7728
|
-
|
|
7729
|
-
|
|
7729
|
+
caption = (React__default.createElement(React__default.Fragment, null,
|
|
7730
|
+
React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
|
|
7731
|
+
React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
|
|
7730
7732
|
}
|
|
7731
|
-
return (
|
|
7733
|
+
return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
|
|
7732
7734
|
}
|
|
7733
7735
|
|
|
7734
7736
|
/** Render the Footer component (empty as default).*/
|
|
@@ -7736,10 +7738,10 @@ function Caption(props) {
|
|
|
7736
7738
|
function Footer$1(props) {
|
|
7737
7739
|
var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
|
|
7738
7740
|
if (!footer)
|
|
7739
|
-
return
|
|
7740
|
-
return (
|
|
7741
|
-
|
|
7742
|
-
|
|
7741
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7742
|
+
return (React__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
|
|
7743
|
+
React__default.createElement("tr", null,
|
|
7744
|
+
React__default.createElement("td", { colSpan: 8 }, footer))));
|
|
7743
7745
|
}
|
|
7744
7746
|
|
|
7745
7747
|
/**
|
|
@@ -7768,9 +7770,9 @@ ISOWeek) {
|
|
|
7768
7770
|
function HeadRow() {
|
|
7769
7771
|
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;
|
|
7770
7772
|
var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
|
|
7771
|
-
return (
|
|
7772
|
-
showWeekNumber && (
|
|
7773
|
-
weekdays.map(function (weekday, i) { return (
|
|
7773
|
+
return (React__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
|
|
7774
|
+
showWeekNumber && (React__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
|
|
7775
|
+
weekdays.map(function (weekday, i) { return (React__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 }))); })));
|
|
7774
7776
|
}
|
|
7775
7777
|
|
|
7776
7778
|
/** Render the table head. */
|
|
@@ -7778,14 +7780,14 @@ function Head() {
|
|
|
7778
7780
|
var _a;
|
|
7779
7781
|
var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
|
|
7780
7782
|
var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
|
|
7781
|
-
return (
|
|
7782
|
-
|
|
7783
|
+
return (React__default.createElement("thead", { style: styles.head, className: classNames.head },
|
|
7784
|
+
React__default.createElement(HeadRowComponent, null)));
|
|
7783
7785
|
}
|
|
7784
7786
|
|
|
7785
7787
|
/** Render the content of the day cell. */
|
|
7786
7788
|
function DayContent(props) {
|
|
7787
7789
|
var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
|
|
7788
|
-
return
|
|
7790
|
+
return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
|
|
7789
7791
|
}
|
|
7790
7792
|
|
|
7791
7793
|
/**
|
|
@@ -7804,9 +7806,9 @@ function SelectMultipleProvider(props) {
|
|
|
7804
7806
|
disabled: []
|
|
7805
7807
|
}
|
|
7806
7808
|
};
|
|
7807
|
-
return (
|
|
7809
|
+
return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
|
|
7808
7810
|
}
|
|
7809
|
-
return (
|
|
7811
|
+
return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7810
7812
|
}
|
|
7811
7813
|
function SelectMultipleProviderInternal(_a) {
|
|
7812
7814
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7851,7 +7853,7 @@ function SelectMultipleProviderInternal(_a) {
|
|
|
7851
7853
|
onDayClick: onDayClick,
|
|
7852
7854
|
modifiers: modifiers
|
|
7853
7855
|
};
|
|
7854
|
-
return (
|
|
7856
|
+
return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
|
|
7855
7857
|
}
|
|
7856
7858
|
/**
|
|
7857
7859
|
* Hook to access the {@link SelectMultipleContextValue}.
|
|
@@ -7920,9 +7922,9 @@ function SelectRangeProvider(props) {
|
|
|
7920
7922
|
disabled: []
|
|
7921
7923
|
}
|
|
7922
7924
|
};
|
|
7923
|
-
return (
|
|
7925
|
+
return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
|
|
7924
7926
|
}
|
|
7925
|
-
return (
|
|
7927
|
+
return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
7926
7928
|
}
|
|
7927
7929
|
function SelectRangeProviderInternal(_a) {
|
|
7928
7930
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -7993,7 +7995,7 @@ function SelectRangeProviderInternal(_a) {
|
|
|
7993
7995
|
});
|
|
7994
7996
|
}
|
|
7995
7997
|
}
|
|
7996
|
-
return (
|
|
7998
|
+
return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
|
|
7997
7999
|
}
|
|
7998
8000
|
/**
|
|
7999
8001
|
* Hook to access the {@link SelectRangeContextValue}.
|
|
@@ -8093,7 +8095,7 @@ function ModifiersProvider(props) {
|
|
|
8093
8095
|
var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
|
|
8094
8096
|
var customModifiers = getCustomModifiers(dayPicker.modifiers);
|
|
8095
8097
|
var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
|
|
8096
|
-
return (
|
|
8098
|
+
return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
|
|
8097
8099
|
}
|
|
8098
8100
|
/**
|
|
8099
8101
|
* Return the modifiers used by DayPicker.
|
|
@@ -8391,7 +8393,7 @@ function FocusProvider(props) {
|
|
|
8391
8393
|
focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
|
|
8392
8394
|
focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
|
|
8393
8395
|
};
|
|
8394
|
-
return (
|
|
8396
|
+
return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
|
|
8395
8397
|
}
|
|
8396
8398
|
/**
|
|
8397
8399
|
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
@@ -8439,9 +8441,9 @@ function SelectSingleProvider(props) {
|
|
|
8439
8441
|
var emptyContextValue = {
|
|
8440
8442
|
selected: undefined
|
|
8441
8443
|
};
|
|
8442
|
-
return (
|
|
8444
|
+
return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
|
|
8443
8445
|
}
|
|
8444
|
-
return (
|
|
8446
|
+
return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
|
|
8445
8447
|
}
|
|
8446
8448
|
function SelectSingleProviderInternal(_a) {
|
|
8447
8449
|
var initialProps = _a.initialProps, children = _a.children;
|
|
@@ -8458,7 +8460,7 @@ function SelectSingleProviderInternal(_a) {
|
|
|
8458
8460
|
selected: initialProps.selected,
|
|
8459
8461
|
onDayClick: onDayClick
|
|
8460
8462
|
};
|
|
8461
|
-
return (
|
|
8463
|
+
return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
|
|
8462
8464
|
}
|
|
8463
8465
|
/**
|
|
8464
8466
|
* Hook to access the {@link SelectSingleContextValue}.
|
|
@@ -8728,7 +8730,7 @@ buttonRef) {
|
|
|
8728
8730
|
var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
|
|
8729
8731
|
activeModifiers.hidden);
|
|
8730
8732
|
var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
|
|
8731
|
-
var children = (
|
|
8733
|
+
var children = (React__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
|
|
8732
8734
|
var divProps = {
|
|
8733
8735
|
style: style,
|
|
8734
8736
|
className: className,
|
|
@@ -8759,12 +8761,12 @@ function Day(props) {
|
|
|
8759
8761
|
var buttonRef = useRef(null);
|
|
8760
8762
|
var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
|
|
8761
8763
|
if (dayRender.isHidden) {
|
|
8762
|
-
return
|
|
8764
|
+
return React__default.createElement("div", { role: "gridcell" });
|
|
8763
8765
|
}
|
|
8764
8766
|
if (!dayRender.isButton) {
|
|
8765
|
-
return
|
|
8767
|
+
return React__default.createElement("div", __assign({}, dayRender.divProps));
|
|
8766
8768
|
}
|
|
8767
|
-
return
|
|
8769
|
+
return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
|
|
8768
8770
|
}
|
|
8769
8771
|
|
|
8770
8772
|
/**
|
|
@@ -8776,13 +8778,13 @@ function WeekNumber(props) {
|
|
|
8776
8778
|
var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
|
|
8777
8779
|
var content = formatWeekNumber(Number(weekNumber), { locale: locale });
|
|
8778
8780
|
if (!onWeekNumberClick) {
|
|
8779
|
-
return (
|
|
8781
|
+
return (React__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
|
|
8780
8782
|
}
|
|
8781
8783
|
var label = labelWeekNumber(Number(weekNumber), { locale: locale });
|
|
8782
8784
|
var handleClick = function (e) {
|
|
8783
8785
|
onWeekNumberClick(weekNumber, dates, e);
|
|
8784
8786
|
};
|
|
8785
|
-
return (
|
|
8787
|
+
return (React__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
|
|
8786
8788
|
}
|
|
8787
8789
|
|
|
8788
8790
|
/** Render a row in the calendar, with the days and the week number. */
|
|
@@ -8793,13 +8795,13 @@ function Row(props) {
|
|
|
8793
8795
|
var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
|
|
8794
8796
|
var weekNumberCell;
|
|
8795
8797
|
if (showWeekNumber) {
|
|
8796
|
-
weekNumberCell = (
|
|
8797
|
-
|
|
8798
|
+
weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
|
|
8799
|
+
React__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
|
|
8798
8800
|
}
|
|
8799
|
-
return (
|
|
8801
|
+
return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
|
|
8800
8802
|
weekNumberCell,
|
|
8801
|
-
props.dates.map(function (date) { return (
|
|
8802
|
-
|
|
8803
|
+
props.dates.map(function (date) { return (React__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
|
|
8804
|
+
React__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
|
|
8803
8805
|
}
|
|
8804
8806
|
|
|
8805
8807
|
/** Return the weeks between two dates. */
|
|
@@ -8867,10 +8869,10 @@ function Table(props) {
|
|
|
8867
8869
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
8868
8870
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
8869
8871
|
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
|
|
8870
|
-
return (
|
|
8871
|
-
!hideHead &&
|
|
8872
|
-
|
|
8873
|
-
|
|
8872
|
+
return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
|
|
8873
|
+
!hideHead && React__default.createElement(HeadComponent, null),
|
|
8874
|
+
React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
|
|
8875
|
+
React__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
|
|
8874
8876
|
}
|
|
8875
8877
|
|
|
8876
8878
|
/*
|
|
@@ -8914,8 +8916,8 @@ function canUseDOM() {
|
|
|
8914
8916
|
* @param deps
|
|
8915
8917
|
*/
|
|
8916
8918
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8917
|
-
?
|
|
8918
|
-
:
|
|
8919
|
+
? React.useLayoutEffect
|
|
8920
|
+
: React.useEffect;
|
|
8919
8921
|
var serverHandoffComplete = false;
|
|
8920
8922
|
var id = 0;
|
|
8921
8923
|
function genId() {
|
|
@@ -8928,7 +8930,7 @@ function useId(providedId) {
|
|
|
8928
8930
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8929
8931
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8930
8932
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8931
|
-
var _b =
|
|
8933
|
+
var _b = React.useState(initialId), id = _b[0], setId = _b[1];
|
|
8932
8934
|
useIsomorphicLayoutEffect(function () {
|
|
8933
8935
|
if (id === null) {
|
|
8934
8936
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8939,7 +8941,7 @@ function useId(providedId) {
|
|
|
8939
8941
|
}
|
|
8940
8942
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8941
8943
|
}, []);
|
|
8942
|
-
|
|
8944
|
+
React.useEffect(function () {
|
|
8943
8945
|
if (serverHandoffComplete === false) {
|
|
8944
8946
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8945
8947
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -8982,9 +8984,9 @@ function Month(props) {
|
|
|
8982
8984
|
style = __assign(__assign({}, style), styles.caption_between);
|
|
8983
8985
|
}
|
|
8984
8986
|
var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
|
|
8985
|
-
return (
|
|
8986
|
-
|
|
8987
|
-
|
|
8987
|
+
return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
|
|
8988
|
+
React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
|
|
8989
|
+
React__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
|
|
8988
8990
|
}
|
|
8989
8991
|
|
|
8990
8992
|
/** Render the container with the months according to the number of months to display. */
|
|
@@ -9026,20 +9028,20 @@ function Root(_a) {
|
|
|
9026
9028
|
var _a;
|
|
9027
9029
|
return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
|
|
9028
9030
|
}, {});
|
|
9029
|
-
return (
|
|
9030
|
-
|
|
9031
|
+
return (React__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
|
|
9032
|
+
React__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
|
|
9031
9033
|
}
|
|
9032
9034
|
|
|
9033
9035
|
/** Provide the value for all the context providers. */
|
|
9034
9036
|
function RootProvider(props) {
|
|
9035
9037
|
var children = props.children, initialProps = __rest(props, ["children"]);
|
|
9036
|
-
return (
|
|
9037
|
-
|
|
9038
|
-
|
|
9039
|
-
|
|
9040
|
-
|
|
9041
|
-
|
|
9042
|
-
|
|
9038
|
+
return (React__default.createElement(DayPickerProvider, { initialProps: initialProps },
|
|
9039
|
+
React__default.createElement(NavigationProvider, null,
|
|
9040
|
+
React__default.createElement(SelectSingleProvider, { initialProps: initialProps },
|
|
9041
|
+
React__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
|
|
9042
|
+
React__default.createElement(SelectRangeProvider, { initialProps: initialProps },
|
|
9043
|
+
React__default.createElement(ModifiersProvider, null,
|
|
9044
|
+
React__default.createElement(FocusProvider, null, children))))))));
|
|
9043
9045
|
}
|
|
9044
9046
|
|
|
9045
9047
|
/**
|
|
@@ -9130,8 +9132,8 @@ function RootProvider(props) {
|
|
|
9130
9132
|
* ```
|
|
9131
9133
|
*/
|
|
9132
9134
|
function DayPicker(props) {
|
|
9133
|
-
return (
|
|
9134
|
-
|
|
9135
|
+
return (React__default.createElement(RootProvider, __assign({}, props),
|
|
9136
|
+
React__default.createElement(Root, { initialProps: props })));
|
|
9135
9137
|
}
|
|
9136
9138
|
|
|
9137
9139
|
var reactResponsive$1 = {exports: {}};
|
|
@@ -9145,7 +9147,7 @@ function requireReactResponsive () {
|
|
|
9145
9147
|
hasRequiredReactResponsive = 1;
|
|
9146
9148
|
(function (module, exports) {
|
|
9147
9149
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
9148
|
-
module.exports = factory(
|
|
9150
|
+
module.exports = factory(React__default);
|
|
9149
9151
|
})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
|
|
9150
9152
|
return /******/ (() => { // webpackBootstrap
|
|
9151
9153
|
/******/ var __webpack_modules__ = ({
|
|
@@ -10974,15 +10976,19 @@ var IconsSvg = function (_a) {
|
|
|
10974
10976
|
var fill = _a.fill, size = _a.size, icon = _a.icon;
|
|
10975
10977
|
switch (icon) {
|
|
10976
10978
|
case 'spinner':
|
|
10977
|
-
return (
|
|
10979
|
+
return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
|
|
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 })));
|
|
10978
10983
|
case 'warning':
|
|
10979
|
-
return (
|
|
10984
|
+
return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
|
|
10980
10985
|
verticalAlign: 'middle',
|
|
10981
10986
|
fill: fill,
|
|
10982
10987
|
overflow: 'hidden',
|
|
10983
10988
|
minWidth: '25px',
|
|
10984
10989
|
minHeight: '25px',
|
|
10985
|
-
}, viewBox: "0 0 1024 1024", version: "1.1"
|
|
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" })));
|
|
10986
10992
|
default:
|
|
10987
10993
|
return null;
|
|
10988
10994
|
}
|
|
@@ -11564,39 +11570,53 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11564
11570
|
: __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11565
11571
|
lastPossibleCheckout
|
|
11566
11572
|
], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
|
|
11567
|
-
return (
|
|
11568
|
-
|
|
11569
|
-
|
|
11570
|
-
|
|
11571
|
-
|
|
11572
|
-
|
|
11573
|
-
|
|
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
|
-
|
|
11573
|
+
return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11574
|
+
React__default.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
|
|
11575
|
+
React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
|
|
11576
|
+
selectedStartDate ||
|
|
11577
|
+
rangeContextStartDate ||
|
|
11578
|
+
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11579
|
+
? newDisableCalendarDates.disabledDates[0].from
|
|
11580
|
+
: today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
|
|
11581
|
+
requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
|
|
11582
|
+
setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
|
|
11583
|
+
}, classNames: {
|
|
11584
|
+
day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
|
|
11585
|
+
day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
|
|
11586
|
+
}, modifiersClassNames: {
|
|
11587
|
+
today: 'my-today',
|
|
11588
|
+
booked: 'booked',
|
|
11589
|
+
disabledAfterCheckIn: 'disabled-after-check-in',
|
|
11590
|
+
overlappingDate: 'overlapping-date',
|
|
11591
|
+
noActiveSelectionStart: 'no-active-selection-start',
|
|
11592
|
+
noActiveSelectionMid: 'no-active-selection-mid',
|
|
11593
|
+
noActiveSelectionEnd: 'no-active-selection-end',
|
|
11594
|
+
checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
|
|
11595
|
+
checkInOnly: 'check-in-only',
|
|
11596
|
+
checkOutOnly: 'check-out-only',
|
|
11597
|
+
}, modifiers:
|
|
11598
|
+
// This function handles conditions for applying the modifiersClassNames
|
|
11599
|
+
handleCalendarModifiers({
|
|
11600
|
+
calendarRange: calendarRange,
|
|
11601
|
+
disabledDates: disabled,
|
|
11602
|
+
overlappingDate: overlappingDate,
|
|
11603
|
+
rangeContext: rangeContext,
|
|
11604
|
+
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11605
|
+
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
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" })))));
|
|
11600
11620
|
});
|
|
11601
11621
|
|
|
11602
11622
|
var parseGuests = function (_a) {
|
|
@@ -11656,8 +11676,6 @@ var Pages;
|
|
|
11656
11676
|
|
|
11657
11677
|
var calculateDropdownPosition = function (_a) {
|
|
11658
11678
|
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
11679
|
if (isMobile) {
|
|
11662
11680
|
return {};
|
|
11663
11681
|
}
|
|
@@ -11667,7 +11685,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11667
11685
|
var containerLeft = 0;
|
|
11668
11686
|
switch (filterSection) {
|
|
11669
11687
|
case FilterSections.LOCATIONS:
|
|
11670
|
-
// Locations: Start from beginning, hug content
|
|
11671
11688
|
if (locationsButtonRef.current) {
|
|
11672
11689
|
var buttonRect = locationsButtonRef.current.getBoundingClientRect();
|
|
11673
11690
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
@@ -11679,15 +11696,12 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11679
11696
|
}
|
|
11680
11697
|
break;
|
|
11681
11698
|
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
11699
|
if (datesButtonRef.current) {
|
|
11685
11700
|
var buttonRect = datesButtonRef.current.getBoundingClientRect();
|
|
11686
11701
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11687
11702
|
var availableWidth = containerRect.width - relativeLeft;
|
|
11688
11703
|
var calendarMinWidth = 650;
|
|
11689
11704
|
if (availableWidth < calendarMinWidth) {
|
|
11690
|
-
// Not enough space, align to the right edge
|
|
11691
11705
|
return {
|
|
11692
11706
|
left: 'auto',
|
|
11693
11707
|
right: containerLeft,
|
|
@@ -11696,7 +11710,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11696
11710
|
};
|
|
11697
11711
|
}
|
|
11698
11712
|
else {
|
|
11699
|
-
// Enough space, start from dates button
|
|
11700
11713
|
return {
|
|
11701
11714
|
left: relativeLeft,
|
|
11702
11715
|
right: 'auto',
|
|
@@ -11706,14 +11719,12 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11706
11719
|
}
|
|
11707
11720
|
break;
|
|
11708
11721
|
case FilterSections.GUESTS:
|
|
11709
|
-
// Guests: Start from guests button, push left if not enough space
|
|
11710
11722
|
if (guestsButtonRef.current) {
|
|
11711
11723
|
var buttonRect = guestsButtonRef.current.getBoundingClientRect();
|
|
11712
11724
|
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11713
11725
|
var availableWidth = containerRect.width - relativeLeft;
|
|
11714
11726
|
var dropdownMinWidth = 350;
|
|
11715
11727
|
if (availableWidth < dropdownMinWidth) {
|
|
11716
|
-
// Not enough space, align to the right
|
|
11717
11728
|
return {
|
|
11718
11729
|
left: 'auto',
|
|
11719
11730
|
right: containerLeft,
|
|
@@ -11722,7 +11733,6 @@ var calculateDropdownPosition = function (_a) {
|
|
|
11722
11733
|
};
|
|
11723
11734
|
}
|
|
11724
11735
|
else {
|
|
11725
|
-
// Enough space, start from button
|
|
11726
11736
|
return {
|
|
11727
11737
|
left: relativeLeft,
|
|
11728
11738
|
right: 'auto',
|
|
@@ -11928,7 +11938,11 @@ styleInject(css_248z$b);
|
|
|
11928
11938
|
|
|
11929
11939
|
var SelectButton = forwardRef(function (_a, ref) {
|
|
11930
11940
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11931
|
-
return (
|
|
11941
|
+
return (React__default.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
|
|
11942
|
+
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
11943
|
+
React__default.createElement("div", null,
|
|
11944
|
+
React__default.createElement("p", { className: "select-button-label" }, label),
|
|
11945
|
+
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11932
11946
|
});
|
|
11933
11947
|
SelectButton.displayName = 'SelectButton';
|
|
11934
11948
|
|
|
@@ -11937,7 +11951,7 @@ styleInject(css_248z$a);
|
|
|
11937
11951
|
|
|
11938
11952
|
var TabButton = function (_a) {
|
|
11939
11953
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11940
|
-
return (
|
|
11954
|
+
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11941
11955
|
};
|
|
11942
11956
|
|
|
11943
11957
|
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";
|
|
@@ -11958,11 +11972,20 @@ var GuestCount = function (_a) {
|
|
|
11958
11972
|
var handleIncrement = function () {
|
|
11959
11973
|
updateGuestsCount("guests-".concat(id), count + 1);
|
|
11960
11974
|
};
|
|
11961
|
-
return (
|
|
11962
|
-
|
|
11963
|
-
|
|
11964
|
-
|
|
11965
|
-
|
|
11975
|
+
return (React__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
|
|
11976
|
+
React__default.createElement("p", { className: "will-guests-filter-label" }, label),
|
|
11977
|
+
React__default.createElement("div", { className: "will-guests-filter-counter" },
|
|
11978
|
+
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
|
|
11979
|
+
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
11980
|
+
paddingBottom: '4px',
|
|
11981
|
+
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
11982
|
+
} },
|
|
11983
|
+
React__default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11984
|
+
React__default.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
|
|
11985
|
+
React__default.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
11986
|
+
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
11987
|
+
React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11988
|
+
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11966
11989
|
};
|
|
11967
11990
|
|
|
11968
11991
|
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";
|
|
@@ -11970,7 +11993,9 @@ styleInject(css_248z$8);
|
|
|
11970
11993
|
|
|
11971
11994
|
var FilterSectionHeader = function (_a) {
|
|
11972
11995
|
var title = _a.title, action = _a.action;
|
|
11973
|
-
return (
|
|
11996
|
+
return (React__default.createElement("div", { className: "will-filter-section-header" },
|
|
11997
|
+
React__default.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
11998
|
+
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11974
11999
|
};
|
|
11975
12000
|
|
|
11976
12001
|
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";
|
|
@@ -11980,7 +12005,9 @@ var Guests = forwardRef(function (_a, ref) {
|
|
|
11980
12005
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
11981
12006
|
var t = useTranslation('filterBar').t;
|
|
11982
12007
|
var containerRef = useAutoFocus(autoFocus);
|
|
11983
|
-
return (
|
|
12008
|
+
return (React__default.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
12009
|
+
React__default.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12010
|
+
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 })); }))));
|
|
11984
12011
|
});
|
|
11985
12012
|
Guests.displayName = 'Guests';
|
|
11986
12013
|
|
|
@@ -11988,7 +12015,7 @@ var css_248z$6 = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n
|
|
|
11988
12015
|
styleInject(css_248z$6);
|
|
11989
12016
|
|
|
11990
12017
|
var Divider = function () {
|
|
11991
|
-
return
|
|
12018
|
+
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
11992
12019
|
};
|
|
11993
12020
|
|
|
11994
12021
|
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";
|
|
@@ -12008,7 +12035,11 @@ var Categories = function (_a) {
|
|
|
12008
12035
|
setSelectedCategory(selectedCategory);
|
|
12009
12036
|
setCategories(selectedCategory);
|
|
12010
12037
|
};
|
|
12011
|
-
return (
|
|
12038
|
+
return (React__default.createElement("div", { className: "will-filter-bar-categories" },
|
|
12039
|
+
React__default.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12040
|
+
React__default.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React__default.createElement("div", { key: idx },
|
|
12041
|
+
React__default.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12042
|
+
React__default.createElement("span", null, itm))); }))));
|
|
12012
12043
|
};
|
|
12013
12044
|
|
|
12014
12045
|
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";
|
|
@@ -12020,12 +12051,16 @@ styleInject(css_248z$3);
|
|
|
12020
12051
|
var ImageCard = forwardRef(function (_a, ref) {
|
|
12021
12052
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
12022
12053
|
var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
|
|
12023
|
-
return (
|
|
12054
|
+
return (React__default.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
|
|
12024
12055
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
12025
12056
|
e.preventDefault();
|
|
12026
12057
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
12027
12058
|
}
|
|
12028
|
-
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel
|
|
12059
|
+
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
|
|
12060
|
+
React__default.createElement("div", { className: "will-image-card-content" },
|
|
12061
|
+
React__default.createElement("h3", null, title),
|
|
12062
|
+
description && React__default.createElement("p", null, description)),
|
|
12063
|
+
React__default.createElement("div", { className: "will-image-card-image" }, imageUrl && React__default.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
|
|
12029
12064
|
});
|
|
12030
12065
|
ImageCard.displayName = 'ImageCard';
|
|
12031
12066
|
|
|
@@ -12057,10 +12092,12 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12057
12092
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
12058
12093
|
}
|
|
12059
12094
|
};
|
|
12060
|
-
return (
|
|
12061
|
-
|
|
12062
|
-
|
|
12063
|
-
|
|
12095
|
+
return (React__default.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12096
|
+
React__default.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12097
|
+
React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12098
|
+
locations.map(function (location, index) {
|
|
12099
|
+
return (React__default.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
|
|
12100
|
+
}))));
|
|
12064
12101
|
});
|
|
12065
12102
|
Locations.displayName = 'Locations';
|
|
12066
12103
|
|
|
@@ -12072,7 +12109,10 @@ styleInject(css_248z$1);
|
|
|
12072
12109
|
|
|
12073
12110
|
var Dates = forwardRef(function (_a, ref) {
|
|
12074
12111
|
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;
|
|
12075
|
-
return (
|
|
12112
|
+
return (React__default.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12113
|
+
React__default.createElement(FilterSectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12114
|
+
React__default.createElement("div", { className: "will-dates-filter-container" },
|
|
12115
|
+
React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12076
12116
|
});
|
|
12077
12117
|
Dates.displayName = 'Dates';
|
|
12078
12118
|
|
|
@@ -12141,31 +12181,50 @@ function FilterBar(_a) {
|
|
|
12141
12181
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12142
12182
|
locationsSelectedLabel: t('locations.selected'),
|
|
12143
12183
|
});
|
|
12144
|
-
return (
|
|
12145
|
-
|
|
12146
|
-
|
|
12147
|
-
|
|
12148
|
-
|
|
12149
|
-
|
|
12150
|
-
|
|
12151
|
-
|
|
12152
|
-
|
|
12153
|
-
|
|
12154
|
-
|
|
12155
|
-
|
|
12156
|
-
|
|
12157
|
-
|
|
12158
|
-
|
|
12159
|
-
|
|
12160
|
-
|
|
12161
|
-
|
|
12162
|
-
|
|
12163
|
-
|
|
12164
|
-
|
|
12165
|
-
|
|
12166
|
-
|
|
12167
|
-
|
|
12168
|
-
|
|
12184
|
+
return (React__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
12185
|
+
tabs && tabs.length > 1 && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
12186
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
12187
|
+
.map(function (tab, idx) { return (React__default.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12188
|
+
setSelectedPath(tab.path);
|
|
12189
|
+
handleResetFilters();
|
|
12190
|
+
handleSelectedFilter(false);
|
|
12191
|
+
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
12192
|
+
React__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
|
|
12193
|
+
headerRef.current = el;
|
|
12194
|
+
if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
|
|
12195
|
+
targetFilterBarRef.current = el;
|
|
12196
|
+
}
|
|
12197
|
+
} },
|
|
12198
|
+
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React__default.createElement(React__default.Fragment, null,
|
|
12199
|
+
React__default.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12200
|
+
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12201
|
+
handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
|
|
12202
|
+
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12203
|
+
React__default.createElement(Divider, null))),
|
|
12204
|
+
React__default.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12205
|
+
? parsedDates
|
|
12206
|
+
: selectedPath === Pages.ROOMS
|
|
12207
|
+
? t('calendar.roomsLabelPlaceholder')
|
|
12208
|
+
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12209
|
+
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12210
|
+
handleSelectedFilterWithPosition(FilterSections.CALENDAR);
|
|
12211
|
+
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12212
|
+
selectedPath !== Pages.EVENTS && (React__default.createElement(React__default.Fragment, null,
|
|
12213
|
+
React__default.createElement(Divider, null),
|
|
12214
|
+
React__default.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12215
|
+
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12216
|
+
handleSelectedFilterWithPosition(FilterSections.GUESTS);
|
|
12217
|
+
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12218
|
+
React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12219
|
+
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle) },
|
|
12220
|
+
selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-dates-filter" },
|
|
12221
|
+
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 }))),
|
|
12222
|
+
selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
|
|
12223
|
+
React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12224
|
+
selectedFilter === FilterSections.CATEGORIES && (React__default.createElement("div", { id: "will-categories-filter" },
|
|
12225
|
+
React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12226
|
+
selectedFilter === FilterSections.LOCATIONS && (React__default.createElement("div", { id: "will-locations-filter" },
|
|
12227
|
+
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); } })))))));
|
|
12169
12228
|
}
|
|
12170
12229
|
////////////
|
|
12171
12230
|
var AGE_CATEGORIES_FALLBACK = [
|
|
@@ -12306,26 +12365,36 @@ var Footer = function (_a) {
|
|
|
12306
12365
|
var nights = nightsCount({
|
|
12307
12366
|
calendarRange: calendarRange,
|
|
12308
12367
|
});
|
|
12309
|
-
return (
|
|
12310
|
-
|
|
12311
|
-
|
|
12312
|
-
|
|
12313
|
-
|
|
12314
|
-
|
|
12315
|
-
|
|
12316
|
-
|
|
12317
|
-
|
|
12318
|
-
|
|
12319
|
-
|
|
12320
|
-
|
|
12321
|
-
|
|
12322
|
-
|
|
12323
|
-
|
|
12368
|
+
return (React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12369
|
+
React__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12370
|
+
calendarHasError ? (React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12371
|
+
renderCalendarErrorMessage({
|
|
12372
|
+
palette: palette,
|
|
12373
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12374
|
+
}))) : (React__default.createElement("div", null,
|
|
12375
|
+
React__default.createElement("span", null, parseDate({
|
|
12376
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12377
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12378
|
+
language: language,
|
|
12379
|
+
}) || t('common:checkIn')),
|
|
12380
|
+
React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12381
|
+
React__default.createElement("span", null, parseDate({
|
|
12382
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12383
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12384
|
+
language: language,
|
|
12385
|
+
}) || t('common:checkOut')))),
|
|
12386
|
+
React__default.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
|
|
12387
|
+
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12388
|
+
: '')),
|
|
12389
|
+
React__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12390
|
+
React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
|
|
12324
12391
|
};
|
|
12325
12392
|
/////////
|
|
12326
12393
|
var renderCalendarErrorMessage = function (_a) {
|
|
12327
12394
|
var message = _a.message, palette = _a.palette;
|
|
12328
|
-
return (
|
|
12395
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
12396
|
+
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12397
|
+
React__default.createElement("span", null, message || '')));
|
|
12329
12398
|
};
|
|
12330
12399
|
|
|
12331
12400
|
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}";
|
|
@@ -12351,7 +12420,14 @@ function FilterCalendar(_a) {
|
|
|
12351
12420
|
var filtersRef = useCloseFilterSection({
|
|
12352
12421
|
handleSelectedFilter: setToggleCalendar,
|
|
12353
12422
|
}).filtersRef;
|
|
12354
|
-
return (
|
|
12423
|
+
return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
|
|
12424
|
+
React__default.createElement("div", { className: "will-calendar-header" },
|
|
12425
|
+
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12426
|
+
React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12427
|
+
React__default.createElement("div", { className: "will-calendar-main" },
|
|
12428
|
+
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 })),
|
|
12429
|
+
React__default.createElement("div", { className: "will-calendar-footer" },
|
|
12430
|
+
React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12355
12431
|
}
|
|
12356
12432
|
|
|
12357
12433
|
export { Button$1 as Button, FilterBar, FilterCalendar };
|