willba-component-library 0.3.15 → 0.3.16

package/lib/index.umd.js

@@ -6850,35 +6850,23 @@
     var usePanelPosition = function (_a) {
         var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, targetFilterBarRef = _a.targetFilterBarRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
         var _b = __read(React.useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
-        React.useEffect(function () {
+        React.useLayoutEffect(function () {
             if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
                 setLocalStyles({});
                 return;
             }
-            var timeoutId = null;
-            var calculate = function () {
-                var panel = panelRef.current;
-                var container = targetFilterBarRef.current;
-                var button = buttonRefs.current[selectedFilter];
-                if (!panel || !container || !button)
-                    return;
-                var panelRect = panel.getBoundingClientRect();
-                if (panelRect.width === 0) {
-                    timeoutId = window.setTimeout(calculate, 10);
-                    return;
-                }
-                var containerRect = container.getBoundingClientRect();
-                var buttonRect = button.getBoundingClientRect();
-                var buttonLeft = buttonRect.left - containerRect.left;
-                var left = Math.min(buttonLeft, Math.max(containerRect.width - panelRect.width, 0));
-                setLocalStyles({ left: left });
-            };
-            calculate();
-            return function () {
-                if (timeoutId)
-                    clearTimeout(timeoutId);
-            };
-        }, [selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile]);
+            var panel = panelRef.current;
+            var container = targetFilterBarRef.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 left = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
+            setLocalStyles({ left: left });
+        }, [selectedFilter, isMobile]);
         return { localStyles: localStyles };
     };
 
@@ -12030,7 +12018,7 @@
             action && React.createElement("div", { className: "will-filter-section-action" }, action)));
     };
 
-    var css_248z$b = ".will-dates-filter-container {\n  padding: 0 16px;\n}\n";
+    var css_248z$b = ".will-dates-filter-container {\n  padding: 0 16px 16px 16px;\n}\n";
     styleInject(css_248z$b);
 
     var Dates = React.forwardRef(function (_a, ref) {
@@ -12076,7 +12064,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: 16px;\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 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";
     styleInject(css_248z$9);
 
     var Guests = React.forwardRef(function (_a, ref) {
@@ -12108,7 +12096,7 @@
     });
     ImageCard.displayName = 'ImageCard';
 
-    var css_248z$7 = "#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";
+    var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
     styleInject(css_248z$7);
 
     var Locations = React.forwardRef(function (_a, ref) {