willba-component-library 0.3.19 → 0.3.20

package/lib/index.js

@@ -2899,11 +2899,11 @@ var useUpdateTranslations = function (_a) {
 // TODO - Refactor and rename this hook
 var useCloseFilterSection = function (_a) {
     var handleSelectedFilter = _a.handleSelectedFilter;
-    var filtersRef = React.useRef(null);
+    var filterSectionRef = React.useRef(null);
     React.useEffect(function () {
         var handleClickOutside = function (event) {
-            if (filtersRef.current &&
-                !filtersRef.current.contains(event.target)) {
+            if (filterSectionRef.current &&
+                !filterSectionRef.current.contains(event.target)) {
                 handleSelectedFilter(false);
             }
         };
@@ -2911,8 +2911,8 @@ var useCloseFilterSection = function (_a) {
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [filtersRef]);
-    return { filtersRef: filtersRef };
+    }, [filterSectionRef]);
+    return { filterSectionRef: filterSectionRef };
 };
 
 var useAutoFocus = function (autoFocus) {
@@ -2982,22 +2982,22 @@ var Pages;
 var useScrollInToView = function (_a) {
     var selectedFilter = _a.selectedFilter;
     var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-    var targetFilterBarRef = React.useRef(null);
+    var tabsRef = React.useRef(null);
     React.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) {
@@ -6835,18 +6835,20 @@ var useFilterUi = function (selectedFilter) {
     var buttonRefs = React.useRef({});
     var panelRef = React.useRef(null);
     var previouslyFocusedButtonRef = React.useRef(null);
-    var _a = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _a.isMobile, targetFilterBarRef = _a.targetFilterBarRef;
+    var filtersRef = React.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(React.useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
     React.useLayoutEffect(function () {
         if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
@@ -6854,7 +6856,7 @@ 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;
@@ -6908,7 +6910,8 @@ var FilterBarProvider = function (_a) {
         outerLoading,
         locations,
         filterUi.isMobile,
-        filterUi.targetFilterBarRef,
+        filterUi.tabsRef,
+        filterUi.filtersRef,
     ]);
     return (React.createElement(FilterBarContext.Provider, { value: contextValue }, children));
 };
@@ -12164,33 +12167,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.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
+                return (React.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.createElement(Guests, { autoFocus: true, ref: filtersRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
+                return (React.createElement(Guests, { autoFocus: true, ref: filterSectionRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
             case FilterSections.CATEGORIES:
                 return (React.createElement(Categories, { categories: categories, setCategories: setCategories }));
             case FilterSections.LOCATIONS:
-                return (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); } }));
+                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); } }));
             default:
                 return null;
         }
     };
-    return (selectedFilter && (React.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.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";
@@ -12199,11 +12200,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
     React.useEffect(function () {
         if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -12225,7 +12222,12 @@ var FilterControls = function () {
         locationsPlaceholder: t('locations.placeholder'),
         locationsSelectedLabel: t('locations.selected'),
     });
-    return (React.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
+    return (React.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) && (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;
@@ -12256,9 +12258,9 @@ 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;
+    tabsRef = _a.tabsRef;
     return (tabs &&
-        tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, 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);
@@ -12463,10 +12465,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.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
+    }).filterSectionRef;
+    return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filterSectionRef },
         React.createElement("div", { className: "will-calendar-header" },
             React.createElement("h2", null, t('filterBar:calendar.title')),
             React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),