willba-component-library 0.4.5 → 0.4.7

package/lib/index.js

@@ -3157,23 +3157,6 @@ var Pages;
     Pages["SALES"] = "/sales";
 })(Pages || (Pages = {}));
 
-var MOBILE_BREAKPOINT = 960;
-var useIsMobile = function () {
-    var _a = __read(React.useState(function () {
-        return typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
-    }), 2), isMobile = _a[0], setIsMobile = _a[1];
-    React.useEffect(function () {
-        if (typeof window === 'undefined')
-            return;
-        var handleResize = function () {
-            setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
-        };
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return isMobile;
-};
-
 var useFilterState = function (_a) {
     var locations = _a.locations;
     var _b = __read(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
@@ -7010,50 +6993,42 @@ var useFilterRefs = function () {
     var panelRef = React.useRef(null);
     var previouslyFocusedButtonRef = React.useRef(null);
     var filtersRef = React.useRef(null);
-    var isMobile = useIsMobile();
     return {
         previouslyFocusedButtonRef: previouslyFocusedButtonRef,
-        isMobile: isMobile,
         panelRef: panelRef,
         buttonRefs: buttonRefs,
         filtersRef: filtersRef,
     };
 };
 
-var DESKTOP_PANEL_GAP = 10;
+// Writes panel-position candidates as CSS custom properties on the panel
+// element. CSS picks which one to use based on its own media query — see
+// FilterPanels.css. This keeps the breakpoint as a single source of truth
+// in CSS and avoids any JS-side mobile detection.
 var usePanelPosition = function (_a) {
-    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
-    var _b = __read(React.useState(), 2), left = _b[0], setLeft = _b[1];
-    var _c = __read(React.useState(), 2), top = _c[0], setTop = _c[1];
+    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs;
     React.useLayoutEffect(function () {
-        if (!selectedFilter || typeof selectedFilter !== 'string') {
-            setLeft(undefined);
-            setTop(undefined);
-            return;
-        }
+        var panel = panelRef.current;
         var filters = filtersRef.current;
-        if (!filters)
+        if (!panel || !filters)
             return;
-        if (isMobile) {
-            // Panel overlays the filter controls (which fade to opacity 0.1
-            // via the .disabled rule), so it starts at the top of the controls.
-            setTop(filters.offsetTop);
-            setLeft(undefined);
+        if (!selectedFilter || typeof selectedFilter !== 'string')
             return;
-        }
-        // Desktop: panel sits below the controls with a small breathing room.
-        setTop(filters.offsetTop + filters.offsetHeight + DESKTOP_PANEL_GAP);
-        var panel = panelRef.current;
+        var overlayTop = filters.offsetTop;
+        var belowTop = filters.offsetTop + filters.offsetHeight;
+        var left = 0;
         var button = buttonRefs.current[selectedFilter];
-        if (!panel || !button)
-            return;
-        var panelRect = panel.getBoundingClientRect();
-        var containerRect = filters.getBoundingClientRect();
-        var buttonRect = button.getBoundingClientRect();
-        var buttonLeft = buttonRect.left - containerRect.left - 10;
-        setLeft(Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width)));
-    }, [selectedFilter, isMobile]);
-    return { top: top, left: left };
+        if (button) {
+            var containerRect = filters.getBoundingClientRect();
+            var buttonRect = button.getBoundingClientRect();
+            var panelRect = panel.getBoundingClientRect();
+            var buttonLeft = buttonRect.left - containerRect.left - 10;
+            left = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
+        }
+        panel.style.setProperty('--panel-top-overlay', "".concat(overlayTop, "px"));
+        panel.style.setProperty('--panel-top-below', "".concat(belowTop, "px"));
+        panel.style.setProperty('--panel-left', "".concat(left, "px"));
+    }, [selectedFilter]);
 };
 
 var FilterBarContext = React.createContext(undefined);
@@ -7095,7 +7070,6 @@ var FilterBarProvider = function (_a) {
         tabs,
         outerLoading,
         locations,
-        filterRefs.isMobile,
         filterRefs.filtersRef,
     ]);
     return (React.createElement(FilterBarContext.Provider, { value: contextValue }, children));
@@ -12343,7 +12317,7 @@ var css_248z$6 = "#will-filter-bar-categories {\n  text-align: center;\n}\n\n.wi
 styleInject(css_248z$6);
 
 var Categories = function (_a) {
-    _a.categories; var setCategories = _a.setCategories;
+    var setCategories = _a.setCategories;
     var t = useTranslation('filterBar').t;
     var categoriesPlaceholder = [
         'Weekend',
@@ -12364,20 +12338,19 @@ var Categories = function (_a) {
 };
 Categories.displayName = 'Categories';
 
-var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-white);\n  min-height: 100px;\n  position: absolute;\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-panels {\n    width: 100%;\n    z-index: 999;\n  }\n}\n";
+var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-white);\n  min-height: 100px;\n  position: absolute;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n\n  top: calc(var(--panel-top-below, 0px) + 10px);\n  left: var(--panel-left, 0px);\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-panels {\n    top: var(--panel-top-overlay, 0px);\n    left: 0;\n    width: 100%;\n    z-index: 999;\n  }\n}\n";
 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; _a.tabs; var 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;
+    var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, 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 filterSectionRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filterSectionRef;
-    var _b = usePanelPosition({
+    usePanelPosition({
         selectedFilter: selectedFilter,
         panelRef: panelRef,
         filtersRef: filtersRef,
         buttonRefs: buttonRefs,
-        isMobile: isMobile,
-    }), left = _b.left, top = _b.top;
+    });
     var renderContent = function () {
         switch (selectedFilter) {
             case FilterSections.CALENDAR:
@@ -12392,7 +12365,7 @@ var FilterPanels = function () {
                 return null;
         }
     };
-    return (selectedFilter && (React.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: { left: left, top: top } }, renderContent())));
+    return (selectedFilter && (React.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light') }, 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  .will-filter-bar-controls.disabled {\n    opacity: 0.1;\n  }\n}\n";
@@ -12605,7 +12578,6 @@ var useFilterCalendar = function (_a) {
 var Footer = function (_a) {
     var calendarHasError = _a.calendarHasError, calendarRange = _a.calendarRange, handleClearDates = _a.handleClearDates, language = _a.language, palette = _a.palette;
     var t = useTranslation().t;
-    reactResponsiveExports.useMediaQuery({ maxWidth: 600 });
     var nights = nightsCount({
         calendarRange: calendarRange,
     });