willba-component-library 0.3.19 → 0.3.21

package/README.md

@@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.19/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.21/lib/index.umd.js"></script>
 
 <script>
   const renderFilterBar = async () => {

package/lib/components/FilterBar/components/FilterPanels/Locations/Locations.d.ts

@@ -3,7 +3,6 @@ import { Location } from '../../../FilterBarTypes';
 import './Locations.css';
 type Props = {
     locations?: Location[];
-    language?: string;
     selectedLocations: Location[];
     setSelectedLocations: (locations: Location[]) => void;
     autoFocus?: boolean;

package/lib/components/FilterBar/components/FilterTabs/FilterTabs.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import './FilterTabs.css';
-export declare const FilterTabs: () => false | React.JSX.Element | undefined;
+export declare const FilterTabs: () => React.JSX.Element | null;

package/lib/components/FilterBar/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useScrollInToView } from './useScrollInToView';
 export { useFilterState } from './useFilterState';
 export { useFilterActions } from './useFilterActions';
-export { useFilterUi } from './useFilterUi';
+export { useFilterRefs } from './useFilterRefs';
 export { usePanelPosition } from './usePanelPosition';

package/lib/components/FilterBar/hooks/useFilterRefs.d.ts

@@ -0,0 +1,8 @@
+export declare const useFilterRefs: (selectedFilter: string | boolean) => {
+    previouslyFocusedButtonRef: import("react").MutableRefObject<HTMLButtonElement | null>;
+    isMobile: boolean;
+    tabsRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    panelRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    buttonRefs: import("react").MutableRefObject<Record<string, HTMLButtonElement | null>>;
+    filtersRef: import("react").MutableRefObject<HTMLDivElement | null>;
+};

package/lib/components/FilterBar/hooks/useFilterUi.d.ts

@@ -1,7 +1,8 @@
 export declare const useFilterUi: (selectedFilter: string | boolean) => {
     previouslyFocusedButtonRef: import("react").MutableRefObject<HTMLButtonElement | null>;
     isMobile: boolean;
-    targetFilterBarRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    tabsRef: import("react").MutableRefObject<HTMLDivElement | null>;
     panelRef: import("react").MutableRefObject<HTMLDivElement | null>;
     buttonRefs: import("react").MutableRefObject<Record<string, HTMLButtonElement | null>>;
+    filtersRef: import("react").MutableRefObject<HTMLDivElement | null>;
 };

package/lib/components/FilterBar/hooks/usePanelPosition.d.ts

@@ -2,11 +2,11 @@ import { CSSProperties, MutableRefObject, RefObject } from 'react';
 type Props = {
     selectedFilter: string | boolean;
     panelRef: RefObject<HTMLDivElement | null>;
-    targetFilterBarRef: RefObject<HTMLDivElement | null>;
+    filtersRef: RefObject<HTMLDivElement | null>;
     buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>;
     isMobile: boolean;
 };
-export declare const usePanelPosition: ({ selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile, }: Props) => {
+export declare const usePanelPosition: ({ selectedFilter, panelRef, filtersRef, buttonRefs, isMobile, }: Props) => {
     localStyles: CSSProperties;
 };
 export {};

package/lib/components/FilterBar/hooks/useScrollInToView.d.ts

@@ -3,6 +3,6 @@ type Props = {
 };
 export declare const useScrollInToView: ({ selectedFilter }: Props) => {
     isMobile: boolean;
-    targetFilterBarRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    tabsRef: import("react").MutableRefObject<HTMLDivElement | null>;
 };
 export {};

package/lib/components/FilterBar/providers/FilterBarProvider.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, RefObject, MutableRefObject } from 'react';
+import React, { PropsWithChildren, MutableRefObject } from 'react';
 import { DateRange } from 'react-day-picker';
 import { AgeCategoryCount, Location, FilterBarTypes } from '../FilterBarTypes';
 type FilterBarProviderProps = PropsWithChildren<FilterBarTypes>;
@@ -23,8 +23,9 @@ type FilterBarContextType = FilterBarTypes & {
     previouslyFocusedButtonRef: MutableRefObject<HTMLButtonElement | null>;
     panelRef: MutableRefObject<HTMLDivElement | null>;
     buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>;
+    filtersRef: MutableRefObject<HTMLDivElement | null>;
     isMobile: boolean;
-    targetFilterBarRef: RefObject<HTMLDivElement>;
+    tabsRef: MutableRefObject<HTMLDivElement | null>;
 };
 export declare const FilterBarProvider: ({ children, language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarProviderProps) => React.JSX.Element;
 export declare const useFilterBar: () => FilterBarContextType;

package/lib/core/hooks/useCloseFilterSection.d.ts

@@ -2,6 +2,6 @@ type Props = {
     handleSelectedFilter: (arg: boolean) => void;
 };
 export declare const useCloseFilterSection: ({ handleSelectedFilter }: Props) => {
-    filtersRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    filterSectionRef: import("react").MutableRefObject<HTMLDivElement | null>;
 };
 export {};

package/lib/index.esm.js

@@ -2879,11 +2879,11 @@ var useUpdateTranslations = function (_a) {
 // TODO - Refactor and rename this hook
 var useCloseFilterSection = function (_a) {
     var handleSelectedFilter = _a.handleSelectedFilter;
-    var filtersRef = useRef(null);
+    var filterSectionRef = useRef(null);
     useEffect(function () {
         var handleClickOutside = function (event) {
-            if (filtersRef.current &&
-                !filtersRef.current.contains(event.target)) {
+            if (filterSectionRef.current &&
+                !filterSectionRef.current.contains(event.target)) {
                 handleSelectedFilter(false);
             }
         };
@@ -2891,8 +2891,8 @@ var useCloseFilterSection = function (_a) {
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [filtersRef]);
-    return { filtersRef: filtersRef };
+    }, [filterSectionRef]);
+    return { filterSectionRef: filterSectionRef };
 };
 
 var useAutoFocus = function (autoFocus) {
@@ -2962,22 +2962,22 @@ var Pages;
 var useScrollInToView = function (_a) {
     var selectedFilter = _a.selectedFilter;
     var _b = __read(useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-    var targetFilterBarRef = useRef(null);
+    var tabsRef = useRef(null);
     useEffect(function () {
         if (typeof window !== 'undefined' && window.innerWidth > 960) {
             setIsMobile(false);
             return;
         }
-        if (targetFilterBarRef.current && selectedFilter) {
+        if (tabsRef.current && selectedFilter) {
             window.scrollTo({
                 behavior: 'smooth',
-                top: targetFilterBarRef.current.getBoundingClientRect().top -
+                top: tabsRef.current.getBoundingClientRect().top -
                     document.body.getBoundingClientRect().top -
                     30,
             });
         }
     }, [selectedFilter]);
-    return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
+    return { isMobile: isMobile, tabsRef: tabsRef };
 };
 
 var useFilterState = function (_a) {
@@ -6811,22 +6811,24 @@ var useFilterActions = function (_a) {
     };
 };
 
-var useFilterUi = function (selectedFilter) {
+var useFilterRefs = function (selectedFilter) {
     var buttonRefs = useRef({});
     var panelRef = useRef(null);
     var previouslyFocusedButtonRef = useRef(null);
-    var _a = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _a.isMobile, targetFilterBarRef = _a.targetFilterBarRef;
+    var filtersRef = useRef(null);
+    var _a = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _a.isMobile, tabsRef = _a.tabsRef;
     return {
         previouslyFocusedButtonRef: previouslyFocusedButtonRef,
         isMobile: isMobile,
-        targetFilterBarRef: targetFilterBarRef,
+        tabsRef: tabsRef,
         panelRef: panelRef,
         buttonRefs: buttonRefs,
+        filtersRef: filtersRef,
     };
 };
 
 var usePanelPosition = function (_a) {
-    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, targetFilterBarRef = _a.targetFilterBarRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
+    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
     var _b = __read(useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
     useLayoutEffect(function () {
         if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
@@ -6834,14 +6836,14 @@ var usePanelPosition = function (_a) {
             return;
         }
         var panel = panelRef.current;
-        var container = targetFilterBarRef.current;
+        var container = filtersRef.current;
         var button = buttonRefs.current[selectedFilter];
         if (!panel || !container || !button)
             return;
         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]);
@@ -6867,8 +6869,8 @@ var FilterBarProvider = function (_a) {
         onSubmit: onSubmit,
         setInnerLoading: setInnerLoading,
     });
-    var filterUi = useFilterUi(selectedFilter);
-    var contextValue = 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 = 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,
@@ -6887,8 +6889,9 @@ var FilterBarProvider = function (_a) {
         tabs,
         outerLoading,
         locations,
-        filterUi.isMobile,
-        filterUi.targetFilterBarRef,
+        filterRefs.isMobile,
+        filterRefs.tabsRef,
+        filterRefs.filtersRef,
     ]);
     return (React__default.createElement(FilterBarContext.Provider, { value: contextValue }, children));
 };
@@ -11987,7 +11990,7 @@ var Calendar = forwardRef(function (_a, ref) {
                 React__default.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) {
@@ -11997,7 +12000,7 @@ var SectionHeader = function (_a) {
         action && React__default.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 = forwardRef(function (_a, ref) {
@@ -12043,7 +12046,7 @@ var GuestCount = function (_a) {
                     React__default.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 = forwardRef(function (_a, ref) {
@@ -12056,7 +12059,7 @@ var Guests = forwardRef(function (_a, ref) {
 });
 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 = forwardRef(function (_a, ref) {
@@ -12079,7 +12082,7 @@ var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.wi
 styleInject(css_248z$7);
 
 var Locations = 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 = useRef(null);
     useEffect(function () {
@@ -12108,7 +12111,7 @@ var Locations = forwardRef(function (_a, ref) {
     };
     return (React__default.createElement("div", { id: "will-filter-bar-locations", ref: ref },
         React__default.createElement(SectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
-        React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
+        React__default.createElement("div", { className: "will-locations-filter-container" }, !!(locations === null || locations === void 0 ? void 0 : locations.length) &&
             locations.map(function (location, index) {
                 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); } }));
             }))));
@@ -12144,33 +12147,31 @@ var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-whit
 styleInject(css_248z$5);
 
 var FilterPanels = function () {
-    var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, tabs = _a.tabs, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, isMobile = _a.isMobile, panelRef = _a.panelRef, buttonRefs = _a.buttonRefs, targetFilterBarRef = _a.targetFilterBarRef, setSelectedLocations = _a.setSelectedLocations, setCalendarRange = _a.setCalendarRange, handleSelectedFilter = _a.handleSelectedFilter, updateGuestsCount = _a.updateGuestsCount, setCategories = _a.setCategories;
+    var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, tabs = _a.tabs, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, isMobile = _a.isMobile, panelRef = _a.panelRef, buttonRefs = _a.buttonRefs, filtersRef = _a.filtersRef, setSelectedLocations = _a.setSelectedLocations, setCalendarRange = _a.setCalendarRange, handleSelectedFilter = _a.handleSelectedFilter, updateGuestsCount = _a.updateGuestsCount, setCategories = _a.setCategories;
     // Handle close filter section
-    var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
+    var filterSectionRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filterSectionRef;
     var localStyles = usePanelPosition({
         selectedFilter: selectedFilter,
         panelRef: panelRef,
-        targetFilterBarRef: targetFilterBarRef,
+        filtersRef: filtersRef,
         buttonRefs: buttonRefs,
         isMobile: isMobile,
     }).localStyles;
     var renderContent = function () {
         switch (selectedFilter) {
             case FilterSections.CALENDAR:
-                return (React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
+                return (React__default.createElement(Dates, { autoFocus: true, ref: filterSectionRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
             case FilterSections.GUESTS:
-                return (React__default.createElement(Guests, { autoFocus: true, ref: filtersRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
+                return (React__default.createElement(Guests, { autoFocus: true, ref: filterSectionRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
             case FilterSections.CATEGORIES:
                 return (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }));
             case FilterSections.LOCATIONS:
-                return (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); } }));
+                return (React__default.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;
         }
     };
-    return (selectedFilter && (React__default.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile
-            ? { top: 66 }
-            : __assign$2({}, localStyles) }, renderContent())));
+    return (selectedFilter && (React__default.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: __assign$2(__assign$2({}, localStyles), ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})) }, renderContent())));
 };
 
 var css_248z$4 = ".will-filter-bar-controls {\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-controls {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n    overflow: hidden;\n  }\n}\n";
@@ -12179,11 +12180,7 @@ styleInject(css_248z$4);
 var FilterControls = function () {
     var _a;
     var t = useTranslation('filterBar').t;
-    var _b = useFilterBar(), calendarRange = _b.calendarRange, selectedFilter = _b.selectedFilter, selectedPath = _b.selectedPath, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, mode = _b.mode, tabs = _b.tabs, ageCategories = _b.ageCategories, locations = _b.locations, innerLoading = _b.innerLoading, outerLoading = _b.outerLoading, handleSubmit = _b.handleSubmit, handleSelectedFilter = _b.handleSelectedFilter, 
-    // Refs
-    previouslyFocusedButtonRef = _b.previouslyFocusedButtonRef, buttonRefs = _b.buttonRefs, 
-    //
-    targetFilterBarRef = _b.targetFilterBarRef;
+    var _b = useFilterBar(), calendarRange = _b.calendarRange, selectedFilter = _b.selectedFilter, selectedPath = _b.selectedPath, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, mode = _b.mode, tabs = _b.tabs, ageCategories = _b.ageCategories, locations = _b.locations, innerLoading = _b.innerLoading, outerLoading = _b.outerLoading, handleSubmit = _b.handleSubmit, handleSelectedFilter = _b.handleSelectedFilter, previouslyFocusedButtonRef = _b.previouslyFocusedButtonRef, buttonRefs = _b.buttonRefs, tabsRef = _b.tabsRef, filtersRef = _b.filtersRef;
     // Store previously focused button and restore focus when closing
     useEffect(function () {
         if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -12205,8 +12202,13 @@ var FilterControls = function () {
         locationsPlaceholder: t('locations.placeholder'),
         locationsSelectedLabel: t('locations.selected'),
     });
-    return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
-        !!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: function (el) {
+            filtersRef.current = el;
+            if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1) {
+                tabsRef.current = el;
+            }
+        } },
+        ((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React__default.createElement(React__default.Fragment, null,
             React__default.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);
@@ -12234,17 +12236,16 @@ styleInject(css_248z$3);
 
 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, 
-    //
-    targetFilterBarRef = _a.targetFilterBarRef;
-    return (tabs &&
-        tabs.length > 1 && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
-        .sort(function (a, b) { return a.order - b.order; })
-        .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 () {
-            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 = 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__default.createElement("div", { className: "will-filter-bar-tabs", ref: tabsRef }, sortedTabs.map(function (tab) { return (React__default.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";
@@ -12254,7 +12255,7 @@ var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-wi
 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 });
@@ -12268,7 +12269,6 @@ var FilterBar = function (_a) {
 };
 ////////////
 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;
@@ -12443,10 +12443,10 @@ function FilterCalendar(_a) {
     // Display component after fully loaded
     useAwaitRender();
     // Handle close filter section
-    var filtersRef = useCloseFilterSection({
+    var filterSectionRef = useCloseFilterSection({
         handleSelectedFilter: setToggleCalendar,
-    }).filtersRef;
-    return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
+    }).filterSectionRef;
+    return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filterSectionRef },
         React__default.createElement("div", { className: "will-calendar-header" },
             React__default.createElement("h2", null, t('filterBar:calendar.title')),
             React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),