willba-component-library 0.3.20 → 0.3.21

package/lib/index.umd.js

@@ -6833,7 +6833,7 @@
         };
     };
 
-    var useFilterUi = function (selectedFilter) {
+    var useFilterRefs = function (selectedFilter) {
         var buttonRefs = React.useRef({});
         var panelRef = React.useRef(null);
         var previouslyFocusedButtonRef = React.useRef(null);
@@ -6865,7 +6865,7 @@
             var panelRect = panel.getBoundingClientRect();
             var containerRect = container.getBoundingClientRect();
             var buttonRect = button.getBoundingClientRect();
-            var buttonLeft = buttonRect.left - containerRect.left;
+            var buttonLeft = buttonRect.left - containerRect.left - 30; // Offset by 30px to account for controls section spacing
             var left = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
             setLocalStyles({ left: left });
         }, [selectedFilter, isMobile]);
@@ -6891,8 +6891,8 @@
             onSubmit: onSubmit,
             setInnerLoading: setInnerLoading,
         });
-        var filterUi = useFilterUi(selectedFilter);
-        var contextValue = React.useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts, categories: categories, calendarRange: calendarRange, selectedPath: selectedPath, innerLoading: innerLoading, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, setCalendarRange: setCalendarRange, setSelectedFilter: setSelectedFilter, setAgeCategoryCounts: setAgeCategoryCounts, setCategories: setCategories, setSelectedPath: setSelectedPath }, filterActions), { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations }), filterUi)); }, [
+        var filterRefs = useFilterRefs(selectedFilter);
+        var contextValue = React.useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts, categories: categories, calendarRange: calendarRange, selectedPath: selectedPath, innerLoading: innerLoading, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, setCalendarRange: setCalendarRange, setSelectedFilter: setSelectedFilter, setAgeCategoryCounts: setAgeCategoryCounts, setCategories: setCategories, setSelectedPath: setSelectedPath }, filterActions), { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations }), filterRefs)); }, [
             selectedFilter,
             ageCategoryCounts,
             categories,
@@ -6911,9 +6911,9 @@
             tabs,
             outerLoading,
             locations,
-            filterUi.isMobile,
-            filterUi.tabsRef,
-            filterUi.filtersRef,
+            filterRefs.isMobile,
+            filterRefs.tabsRef,
+            filterRefs.filtersRef,
         ]);
         return (React.createElement(FilterBarContext.Provider, { value: contextValue }, children));
     };
@@ -12012,7 +12012,7 @@
                     React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
     });
 
-    var css_248z$c = ".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";
+    var css_248z$c = ".will-filter-section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 30px;\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-header {\n    padding: 16px 20px;\n  }\n\n  .will-filter-section-title {\n    font-size: 18px;\n  }\n}\n";
     styleInject(css_248z$c);
 
     var SectionHeader = function (_a) {
@@ -12022,7 +12022,7 @@
             action && React.createElement("div", { className: "will-filter-section-action" }, action)));
     };
 
-    var css_248z$b = ".will-dates-filter-container {\n  padding: 0 16px 16px 16px;\n}\n";
+    var css_248z$b = ".will-dates-filter-container {\n  padding: 0 30px 16px 30px;\n}\n\n@media (max-width: 960px) {\n  .will-dates-filter-container {\n    padding: 0 20px 16px 20px;\n  }\n}\n";
     styleInject(css_248z$b);
 
     var Dates = React.forwardRef(function (_a, ref) {
@@ -12068,7 +12068,7 @@
                         React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
     };
 
-    var css_248z$9 = "#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: 0 16px 16px 16px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    min-width: auto;\n  }\n}\n\n/**/\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
+    var css_248z$9 = "#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: 0 30px 16px 30px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    min-width: auto;\n    padding: 0 20px 16px 20px;\n  }\n}\n\n/**/\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
     styleInject(css_248z$9);
 
     var Guests = React.forwardRef(function (_a, ref) {
@@ -12081,7 +12081,7 @@
     });
     Guests.displayName = 'Guests';
 
-    var css_248z$8 = ".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";
+    var css_248z$8 = ".will-image-card {\n  display: flex;\n  gap: 20px;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 30px;\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\n@media (max-width: 960px) {\n  .will-image-card {\n    padding: 8px 20px;\n  }\n}\n";
     styleInject(css_248z$8);
 
     var ImageCard = React.forwardRef(function (_a, ref) {
@@ -12104,7 +12104,7 @@
     styleInject(css_248z$7);
 
     var Locations = React.forwardRef(function (_a, ref) {
-        var locations = _a.locations, language = _a.language, selectedLocations = _a.selectedLocations, setSelectedLocations = _a.setSelectedLocations, autoFocus = _a.autoFocus, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, onClose = _a.onClose;
+        var locations = _a.locations, selectedLocations = _a.selectedLocations, setSelectedLocations = _a.setSelectedLocations, autoFocus = _a.autoFocus, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, onClose = _a.onClose;
         var t = useTranslation('filterBar').t;
         var firstCardRef = React.useRef(null);
         React.useEffect(function () {
@@ -12133,7 +12133,7 @@
         };
         return (React.createElement("div", { id: "will-filter-bar-locations", ref: ref },
             React.createElement(SectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-            React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
+            React.createElement("div", { className: "will-locations-filter-container" }, !!(locations === null || locations === void 0 ? void 0 : locations.length) &&
                 locations.map(function (location, index) {
                     return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
                 }))));
@@ -12188,7 +12188,7 @@
                 case FilterSections.CATEGORIES:
                     return (React.createElement(Categories, { categories: categories, setCategories: setCategories }));
                 case FilterSections.LOCATIONS:
-                    return (React.createElement(Locations, { autoFocus: true, ref: filterSectionRef, 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); } }));
+                    return (React.createElement(Locations, { autoFocus: true, ref: filterSectionRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }));
                 default:
                     return null;
             }
@@ -12230,7 +12230,7 @@
                     tabsRef.current = el;
                 }
             } },
-            !!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement(React.Fragment, null,
+            ((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
                 React.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
                         previouslyFocusedButtonRef.current = e.currentTarget;
                         handleSelectedFilter(FilterSections.LOCATIONS);
@@ -12258,17 +12258,16 @@
 
     var FilterTabs = function () {
         var t = useTranslation('filterBar').t;
-        var _a = useFilterBar(), selectedPath = _a.selectedPath, mode = _a.mode, tabs = _a.tabs, handleSelectedFilter = _a.handleSelectedFilter, setSelectedPath = _a.setSelectedPath, handleResetFilters = _a.handleResetFilters, 
-        //
-        tabsRef = _a.tabsRef;
-        return (tabs &&
-            tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: tabsRef }, tabs
-            .sort(function (a, b) { return a.order - b.order; })
-            .map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
-                setSelectedPath(tab.path);
-                handleResetFilters();
-                handleSelectedFilter(false);
-            }, active: selectedPath === tab.path, mode: mode })); }))));
+        var _a = useFilterBar(), selectedPath = _a.selectedPath, mode = _a.mode, tabs = _a.tabs, tabsRef = _a.tabsRef, handleSelectedFilter = _a.handleSelectedFilter, setSelectedPath = _a.setSelectedPath, handleResetFilters = _a.handleResetFilters;
+        var sortedTabs = React.useMemo(function () { return __spreadArray$1([], __read((tabs !== null && tabs !== void 0 ? tabs : [])), false).sort(function (a, b) { return a.order - b.order; }); }, [tabs]);
+        var handleTabClick = function (path) {
+            setSelectedPath(path);
+            handleResetFilters();
+            handleSelectedFilter(false);
+        };
+        if (sortedTabs.length <= 1)
+            return null;
+        return (React.createElement("div", { className: "will-filter-bar-tabs", ref: tabsRef }, sortedTabs.map(function (tab) { return (React.createElement(TabButton, { key: tab.path, label: tab.label || t("tabs.".concat(tab.path.slice(1))), onClick: function () { return handleTabClick(tab.path); }, active: selectedPath === tab.path, mode: mode })); })));
     };
 
     var css_248z$2 = "@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";
@@ -12278,7 +12277,7 @@
     styleInject(css_248z$1);
 
     var FilterBar = function (_a) {
-        var _b = _a.language, language = _b === void 0 ? LANGUAGE_FALLBACK : _b, ageCategories = _a.ageCategories, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
+        var language = _a.language, ageCategories = _a.ageCategories, _b = _a.redirectUrl, redirectUrl = _b === void 0 ? REDIRECT_URL_FALLBACK : _b, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
         var themePalette = useTheme({ palette: palette });
         // Translations
         useUpdateTranslations({ language: language });
@@ -12292,7 +12291,6 @@
     };
     ////////////
     var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
-    var LANGUAGE_FALLBACK = 'en';
 
     var useFilterCalendar = function (_a) {
         var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;