willba-component-library 0.3.9 → 0.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/components/FilterBar/FilterBar.d.ts +1 -2
- package/lib/components/FilterBar/FilterBarTypes.d.ts +3 -13
- package/lib/components/FilterBar/components/dates/Dates.d.ts +1 -0
- package/lib/components/FilterBar/utils/index.d.ts +1 -1
- package/lib/components/FilterBar/utils/parseLocations.d.ts +1 -2
- package/lib/index.d.ts +8 -16
- package/lib/index.esm.js +176 -103
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +424 -351
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +424 -351
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +14 -49
- package/src/components/FilterBar/FilterBar.tsx +44 -13
- package/src/components/FilterBar/FilterBarTypes.ts +3 -14
- package/src/components/FilterBar/components/cards/image-card/ImageCard.css +0 -1
- package/src/components/FilterBar/components/common/FilterSectionHeader.css +1 -0
- package/src/components/FilterBar/components/dates/Dates.css +3 -0
- package/src/components/FilterBar/components/dates/Dates.tsx +2 -0
- package/src/components/FilterBar/components/guests/Guests.css +1 -1
- package/src/components/FilterBar/components/locations/Locations.css +1 -1
- package/src/components/FilterBar/components/locations/Locations.tsx +15 -35
- 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/FilterBar/utils/getLocalizedContent.tsx +0 -21
package/lib/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
3
3
|
|
|
4
4
|
/******************************************************************************
|
|
@@ -191,8 +191,8 @@ function styleInject(css, ref) {
|
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
var css_248z$
|
|
195
|
-
styleInject(css_248z$
|
|
194
|
+
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}";
|
|
195
|
+
styleInject(css_248z$h);
|
|
196
196
|
|
|
197
197
|
/**
|
|
198
198
|
* Primary UI component for user interaction
|
|
@@ -550,8 +550,8 @@ function useTheme(_a) {
|
|
|
550
550
|
return themePalette;
|
|
551
551
|
}
|
|
552
552
|
|
|
553
|
-
var css_248z$
|
|
554
|
-
styleInject(css_248z$
|
|
553
|
+
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";
|
|
554
|
+
styleInject(css_248z$g);
|
|
555
555
|
|
|
556
556
|
var useAwaitRender = function () {
|
|
557
557
|
var _a = __read(useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
@@ -2998,8 +2998,8 @@ var useAutoFocus = function (autoFocus) {
|
|
|
2998
2998
|
return ref;
|
|
2999
2999
|
};
|
|
3000
3000
|
|
|
3001
|
-
var css_248z$
|
|
3002
|
-
styleInject(css_248z$
|
|
3001
|
+
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";
|
|
3002
|
+
styleInject(css_248z$f);
|
|
3003
3003
|
|
|
3004
3004
|
var SubmitButton = function (_a) {
|
|
3005
3005
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -3013,8 +3013,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
3013
3013
|
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
3014
|
}
|
|
3015
3015
|
|
|
3016
|
-
var css_248z$
|
|
3017
|
-
styleInject(css_248z$
|
|
3016
|
+
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";
|
|
3017
|
+
styleInject(css_248z$e);
|
|
3018
3018
|
|
|
3019
3019
|
var CloseButton = function (_a) {
|
|
3020
3020
|
var handleClose = _a.handleClose;
|
|
@@ -8916,8 +8916,8 @@ function canUseDOM() {
|
|
|
8916
8916
|
* @param deps
|
|
8917
8917
|
*/
|
|
8918
8918
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8919
|
-
? React.useLayoutEffect
|
|
8920
|
-
: React.useEffect;
|
|
8919
|
+
? React$1.useLayoutEffect
|
|
8920
|
+
: React$1.useEffect;
|
|
8921
8921
|
var serverHandoffComplete = false;
|
|
8922
8922
|
var id = 0;
|
|
8923
8923
|
function genId() {
|
|
@@ -8930,7 +8930,7 @@ function useId(providedId) {
|
|
|
8930
8930
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8931
8931
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8932
8932
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8933
|
-
var _b = React.useState(initialId), id = _b[0], setId = _b[1];
|
|
8933
|
+
var _b = React$1.useState(initialId), id = _b[0], setId = _b[1];
|
|
8934
8934
|
useIsomorphicLayoutEffect(function () {
|
|
8935
8935
|
if (id === null) {
|
|
8936
8936
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8941,7 +8941,7 @@ function useId(providedId) {
|
|
|
8941
8941
|
}
|
|
8942
8942
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8943
8943
|
}, []);
|
|
8944
|
-
React.useEffect(function () {
|
|
8944
|
+
React$1.useEffect(function () {
|
|
8945
8945
|
if (serverHandoffComplete === false) {
|
|
8946
8946
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8947
8947
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -11476,11 +11476,11 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11476
11476
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11477
11477
|
};
|
|
11478
11478
|
|
|
11479
|
-
var css_248z$
|
|
11480
|
-
styleInject(css_248z$
|
|
11479
|
+
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}";
|
|
11480
|
+
styleInject(css_248z$d);
|
|
11481
11481
|
|
|
11482
|
-
var css_248z$
|
|
11483
|
-
styleInject(css_248z$
|
|
11482
|
+
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";
|
|
11483
|
+
styleInject(css_248z$c);
|
|
11484
11484
|
|
|
11485
11485
|
var Calendar = forwardRef(function (_a, ref) {
|
|
11486
11486
|
var _b;
|
|
@@ -11645,28 +11645,13 @@ var parseGuests = function (_a) {
|
|
|
11645
11645
|
};
|
|
11646
11646
|
};
|
|
11647
11647
|
|
|
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
11648
|
var parseLocations = function (_a) {
|
|
11661
|
-
var selectedLocations = _a.selectedLocations,
|
|
11649
|
+
var selectedLocations = _a.selectedLocations, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
|
|
11662
11650
|
if (!selectedLocations.length) {
|
|
11663
11651
|
return locationsPlaceholder;
|
|
11664
11652
|
}
|
|
11665
11653
|
if (selectedLocations.length === 1) {
|
|
11666
|
-
var translation =
|
|
11667
|
-
contents: selectedLocations[0].label,
|
|
11668
|
-
locale: language,
|
|
11669
|
-
});
|
|
11654
|
+
var translation = selectedLocations[0].label;
|
|
11670
11655
|
if (!translation) {
|
|
11671
11656
|
return locationsPlaceholder;
|
|
11672
11657
|
}
|
|
@@ -11689,6 +11674,89 @@ var Pages;
|
|
|
11689
11674
|
Pages["SALES"] = "/sales";
|
|
11690
11675
|
})(Pages || (Pages = {}));
|
|
11691
11676
|
|
|
11677
|
+
var calculateDropdownPosition = function (_a) {
|
|
11678
|
+
var filterSection = _a.filterSection, headerRef = _a.headerRef, locationsButtonRef = _a.locationsButtonRef, datesButtonRef = _a.datesButtonRef, guestsButtonRef = _a.guestsButtonRef, isMobile = _a.isMobile;
|
|
11679
|
+
// On mobile, don't apply any positioning - let CSS handle it naturally
|
|
11680
|
+
// Dropdowns will start from leftmost point with position: relative
|
|
11681
|
+
if (isMobile) {
|
|
11682
|
+
return {};
|
|
11683
|
+
}
|
|
11684
|
+
if (!headerRef.current)
|
|
11685
|
+
return {};
|
|
11686
|
+
var containerRect = headerRef.current.getBoundingClientRect();
|
|
11687
|
+
var containerLeft = 0;
|
|
11688
|
+
switch (filterSection) {
|
|
11689
|
+
case FilterSections.LOCATIONS:
|
|
11690
|
+
// Locations: Start from beginning, hug content
|
|
11691
|
+
if (locationsButtonRef.current) {
|
|
11692
|
+
var buttonRect = locationsButtonRef.current.getBoundingClientRect();
|
|
11693
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11694
|
+
return {
|
|
11695
|
+
left: relativeLeft,
|
|
11696
|
+
right: 'auto',
|
|
11697
|
+
width: 'auto',
|
|
11698
|
+
};
|
|
11699
|
+
}
|
|
11700
|
+
break;
|
|
11701
|
+
case FilterSections.CALENDAR:
|
|
11702
|
+
// Calendar: Two months side-by-side, needs ~650-700px
|
|
11703
|
+
// Start from dates button, but push left if not enough space
|
|
11704
|
+
if (datesButtonRef.current) {
|
|
11705
|
+
var buttonRect = datesButtonRef.current.getBoundingClientRect();
|
|
11706
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11707
|
+
var availableWidth = containerRect.width - relativeLeft;
|
|
11708
|
+
var calendarMinWidth = 650;
|
|
11709
|
+
if (availableWidth < calendarMinWidth) {
|
|
11710
|
+
// Not enough space, align to the right edge
|
|
11711
|
+
return {
|
|
11712
|
+
left: 'auto',
|
|
11713
|
+
right: containerLeft,
|
|
11714
|
+
width: 'auto',
|
|
11715
|
+
maxWidth: "".concat(containerRect.width, "px"),
|
|
11716
|
+
};
|
|
11717
|
+
}
|
|
11718
|
+
else {
|
|
11719
|
+
// Enough space, start from dates button
|
|
11720
|
+
return {
|
|
11721
|
+
left: relativeLeft,
|
|
11722
|
+
right: 'auto',
|
|
11723
|
+
width: 'auto',
|
|
11724
|
+
};
|
|
11725
|
+
}
|
|
11726
|
+
}
|
|
11727
|
+
break;
|
|
11728
|
+
case FilterSections.GUESTS:
|
|
11729
|
+
// Guests: Start from guests button, push left if not enough space
|
|
11730
|
+
if (guestsButtonRef.current) {
|
|
11731
|
+
var buttonRect = guestsButtonRef.current.getBoundingClientRect();
|
|
11732
|
+
var relativeLeft = buttonRect.left - containerRect.left;
|
|
11733
|
+
var availableWidth = containerRect.width - relativeLeft;
|
|
11734
|
+
var dropdownMinWidth = 350;
|
|
11735
|
+
if (availableWidth < dropdownMinWidth) {
|
|
11736
|
+
// Not enough space, align to the right
|
|
11737
|
+
return {
|
|
11738
|
+
left: 'auto',
|
|
11739
|
+
right: containerLeft,
|
|
11740
|
+
width: 'auto',
|
|
11741
|
+
maxWidth: "".concat(containerRect.width, "px"),
|
|
11742
|
+
};
|
|
11743
|
+
}
|
|
11744
|
+
else {
|
|
11745
|
+
// Enough space, start from button
|
|
11746
|
+
return {
|
|
11747
|
+
left: relativeLeft,
|
|
11748
|
+
right: 'auto',
|
|
11749
|
+
width: 'auto',
|
|
11750
|
+
};
|
|
11751
|
+
}
|
|
11752
|
+
}
|
|
11753
|
+
break;
|
|
11754
|
+
default:
|
|
11755
|
+
return {};
|
|
11756
|
+
}
|
|
11757
|
+
return {};
|
|
11758
|
+
};
|
|
11759
|
+
|
|
11692
11760
|
var useFilterBar = function (_a) {
|
|
11693
11761
|
var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
|
|
11694
11762
|
var _b = __read(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
@@ -11875,8 +11943,8 @@ var useScrollInToView = function (_a) {
|
|
|
11875
11943
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11876
11944
|
};
|
|
11877
11945
|
|
|
11878
|
-
var css_248z$
|
|
11879
|
-
styleInject(css_248z$
|
|
11946
|
+
var css_248z$b = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button.disabled {\n cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n color: var(--will-black);\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n color: var(--will-black);\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none;\n }\n}\n";
|
|
11947
|
+
styleInject(css_248z$b);
|
|
11880
11948
|
|
|
11881
11949
|
var SelectButton = forwardRef(function (_a, ref) {
|
|
11882
11950
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
@@ -11888,16 +11956,16 @@ var SelectButton = forwardRef(function (_a, ref) {
|
|
|
11888
11956
|
});
|
|
11889
11957
|
SelectButton.displayName = 'SelectButton';
|
|
11890
11958
|
|
|
11891
|
-
var css_248z$
|
|
11892
|
-
styleInject(css_248z$
|
|
11959
|
+
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";
|
|
11960
|
+
styleInject(css_248z$a);
|
|
11893
11961
|
|
|
11894
11962
|
var TabButton = function (_a) {
|
|
11895
11963
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11896
11964
|
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11897
11965
|
};
|
|
11898
11966
|
|
|
11899
|
-
var css_248z$
|
|
11900
|
-
styleInject(css_248z$
|
|
11967
|
+
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";
|
|
11968
|
+
styleInject(css_248z$9);
|
|
11901
11969
|
|
|
11902
11970
|
var GuestCount = function (_a) {
|
|
11903
11971
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -11930,8 +11998,8 @@ var GuestCount = function (_a) {
|
|
|
11930
11998
|
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11931
11999
|
};
|
|
11932
12000
|
|
|
11933
|
-
var css_248z$
|
|
11934
|
-
styleInject(css_248z$
|
|
12001
|
+
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";
|
|
12002
|
+
styleInject(css_248z$8);
|
|
11935
12003
|
|
|
11936
12004
|
var FilterSectionHeader = function (_a) {
|
|
11937
12005
|
var title = _a.title, action = _a.action;
|
|
@@ -11940,8 +12008,8 @@ var FilterSectionHeader = function (_a) {
|
|
|
11940
12008
|
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11941
12009
|
};
|
|
11942
12010
|
|
|
11943
|
-
var css_248z$
|
|
11944
|
-
styleInject(css_248z$
|
|
12011
|
+
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";
|
|
12012
|
+
styleInject(css_248z$7);
|
|
11945
12013
|
|
|
11946
12014
|
var Guests = forwardRef(function (_a, ref) {
|
|
11947
12015
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
@@ -11953,15 +12021,15 @@ var Guests = forwardRef(function (_a, ref) {
|
|
|
11953
12021
|
});
|
|
11954
12022
|
Guests.displayName = 'Guests';
|
|
11955
12023
|
|
|
11956
|
-
var css_248z$
|
|
11957
|
-
styleInject(css_248z$
|
|
12024
|
+
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}";
|
|
12025
|
+
styleInject(css_248z$6);
|
|
11958
12026
|
|
|
11959
12027
|
var Divider = function () {
|
|
11960
12028
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
11961
12029
|
};
|
|
11962
12030
|
|
|
11963
|
-
var css_248z$
|
|
11964
|
-
styleInject(css_248z$
|
|
12031
|
+
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";
|
|
12032
|
+
styleInject(css_248z$5);
|
|
11965
12033
|
|
|
11966
12034
|
var Categories = function (_a) {
|
|
11967
12035
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -11984,11 +12052,11 @@ var Categories = function (_a) {
|
|
|
11984
12052
|
React__default.createElement("span", null, itm))); }))));
|
|
11985
12053
|
};
|
|
11986
12054
|
|
|
11987
|
-
var css_248z$
|
|
11988
|
-
styleInject(css_248z$
|
|
12055
|
+
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";
|
|
12056
|
+
styleInject(css_248z$4);
|
|
11989
12057
|
|
|
11990
|
-
var css_248z$
|
|
11991
|
-
styleInject(css_248z$
|
|
12058
|
+
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";
|
|
12059
|
+
styleInject(css_248z$3);
|
|
11992
12060
|
|
|
11993
12061
|
var ImageCard = forwardRef(function (_a, ref) {
|
|
11994
12062
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
@@ -12037,31 +12105,16 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12037
12105
|
return (React__default.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12038
12106
|
React__default.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12039
12107
|
React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12040
|
-
locations
|
|
12041
|
-
.
|
|
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); } }));
|
|
12108
|
+
locations.map(function (location, index) {
|
|
12109
|
+
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); } }));
|
|
12060
12110
|
}))));
|
|
12061
12111
|
});
|
|
12062
12112
|
Locations.displayName = 'Locations';
|
|
12063
12113
|
|
|
12064
|
-
var css_248z$
|
|
12114
|
+
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";
|
|
12115
|
+
styleInject(css_248z$2);
|
|
12116
|
+
|
|
12117
|
+
var css_248z$1 = ".will-dates-filter-container {\n padding: 0 16px;\n}\n";
|
|
12065
12118
|
styleInject(css_248z$1);
|
|
12066
12119
|
|
|
12067
12120
|
var Dates = forwardRef(function (_a, ref) {
|
|
@@ -12085,18 +12138,36 @@ function FilterBar(_a) {
|
|
|
12085
12138
|
var datesButtonRef = useRef(null);
|
|
12086
12139
|
var guestsButtonRef = useRef(null);
|
|
12087
12140
|
var previouslyFocusedButtonRef = useRef(null);
|
|
12141
|
+
var headerRef = useRef(null);
|
|
12142
|
+
// Dropdown positioning
|
|
12143
|
+
var _f = __read(useState({}), 2), dropdownStyle = _f[0], setDropdownStyle = _f[1];
|
|
12088
12144
|
// Filters
|
|
12089
|
-
var
|
|
12145
|
+
var _g = useFilterBar({
|
|
12090
12146
|
redirectUrl: redirectUrl,
|
|
12091
12147
|
ageCategories: ageCategories,
|
|
12092
12148
|
onSubmit: onSubmit,
|
|
12093
12149
|
tabs: tabs,
|
|
12094
12150
|
locations: locations,
|
|
12095
|
-
}), selectedFilter =
|
|
12151
|
+
}), 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
12152
|
// Scroll in to view
|
|
12097
|
-
var
|
|
12153
|
+
var _h = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _h.isMobile, targetFilterBarRef = _h.targetFilterBarRef;
|
|
12098
12154
|
// Handle close filter section
|
|
12099
12155
|
var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
|
|
12156
|
+
// Enhanced handleSelectedFilter with positioning
|
|
12157
|
+
var handleSelectedFilterWithPosition = function (filter) {
|
|
12158
|
+
if (filter) {
|
|
12159
|
+
var position = calculateDropdownPosition({
|
|
12160
|
+
filterSection: filter,
|
|
12161
|
+
headerRef: headerRef,
|
|
12162
|
+
locationsButtonRef: locationsButtonRef,
|
|
12163
|
+
datesButtonRef: datesButtonRef,
|
|
12164
|
+
guestsButtonRef: guestsButtonRef,
|
|
12165
|
+
isMobile: isMobile,
|
|
12166
|
+
});
|
|
12167
|
+
setDropdownStyle(position);
|
|
12168
|
+
}
|
|
12169
|
+
handleSelectedFilter(filter);
|
|
12170
|
+
};
|
|
12100
12171
|
// Store previously focused button and restore focus when closing
|
|
12101
12172
|
useEffect(function () {
|
|
12102
12173
|
if (!selectedFilter && previouslyFocusedButtonRef.current) {
|
|
@@ -12117,51 +12188,53 @@ function FilterBar(_a) {
|
|
|
12117
12188
|
});
|
|
12118
12189
|
var parsedLocations = parseLocations({
|
|
12119
12190
|
selectedLocations: selectedLocations,
|
|
12120
|
-
language: language,
|
|
12121
12191
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12122
12192
|
locationsSelectedLabel: t('locations.selected'),
|
|
12123
12193
|
});
|
|
12124
|
-
return (
|
|
12125
|
-
tabs && tabs.length > 1 && (
|
|
12194
|
+
return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
12195
|
+
tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
12126
12196
|
.sort(function (a, b) { return a.order - b.order; })
|
|
12127
|
-
.map(function (tab, idx) { return (
|
|
12128
|
-
? tab.label[language]
|
|
12129
|
-
: t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12197
|
+
.map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12130
12198
|
setSelectedPath(tab.path);
|
|
12131
12199
|
handleResetFilters();
|
|
12132
12200
|
handleSelectedFilter(false);
|
|
12133
12201
|
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
12134
|
-
|
|
12135
|
-
|
|
12136
|
-
|
|
12202
|
+
React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
|
|
12203
|
+
headerRef.current = el;
|
|
12204
|
+
if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
|
|
12205
|
+
targetFilterBarRef.current = el;
|
|
12206
|
+
}
|
|
12207
|
+
} },
|
|
12208
|
+
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
|
|
12209
|
+
React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12137
12210
|
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12138
|
-
|
|
12211
|
+
handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
|
|
12139
12212
|
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12140
|
-
|
|
12141
|
-
|
|
12213
|
+
React.createElement(Divider, null))),
|
|
12214
|
+
React.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12142
12215
|
? parsedDates
|
|
12143
12216
|
: selectedPath === Pages.ROOMS
|
|
12144
12217
|
? t('calendar.roomsLabelPlaceholder')
|
|
12145
12218
|
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12146
12219
|
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12147
|
-
|
|
12220
|
+
handleSelectedFilterWithPosition(FilterSections.CALENDAR);
|
|
12148
12221
|
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12149
|
-
selectedPath !== Pages.EVENTS && (
|
|
12150
|
-
|
|
12151
|
-
|
|
12222
|
+
selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
|
|
12223
|
+
React.createElement(Divider, null),
|
|
12224
|
+
React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12152
12225
|
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12153
|
-
|
|
12226
|
+
handleSelectedFilterWithPosition(FilterSections.GUESTS);
|
|
12154
12227
|
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12155
|
-
|
|
12156
|
-
selectedFilter && (
|
|
12157
|
-
selectedFilter === FilterSections.CALENDAR && (
|
|
12158
|
-
|
|
12159
|
-
selectedFilter === FilterSections.GUESTS && (
|
|
12160
|
-
|
|
12161
|
-
selectedFilter === FilterSections.CATEGORIES && (
|
|
12162
|
-
|
|
12163
|
-
selectedFilter === FilterSections.LOCATIONS && (
|
|
12164
|
-
|
|
12228
|
+
React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12229
|
+
selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle) },
|
|
12230
|
+
selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
|
|
12231
|
+
React.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12232
|
+
selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
|
|
12233
|
+
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12234
|
+
selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
|
|
12235
|
+
React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12236
|
+
selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
|
|
12237
|
+
React.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } })))))));
|
|
12165
12238
|
}
|
|
12166
12239
|
////////////
|
|
12167
12240
|
var AGE_CATEGORIES_FALLBACK = [
|