willba-component-library 0.3.15 → 0.3.17

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.15/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.17/lib/index.umd.js"></script>
 
 <script>
   const renderFilterBar = async () => {

package/lib/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, forwardRef, useMemo } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect, useMemo } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -6828,35 +6828,23 @@ var useFilterUi = function (selectedFilter) {
 var usePanelPosition = function (_a) {
     var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, targetFilterBarRef = _a.targetFilterBarRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
     var _b = __read(useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
-    useEffect(function () {
+    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 };
 };
 
@@ -12008,7 +11996,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;\n}\n";
+var css_248z$b = ".will-dates-filter-container {\n  padding: 0 16px 16px 16px;\n}\n";
 styleInject(css_248z$b);
 
 var Dates = forwardRef(function (_a, ref) {
@@ -12020,7 +12008,7 @@ var Dates = forwardRef(function (_a, ref) {
 });
 Dates.displayName = 'Dates';
 
-var css_248z$a = ".will-guests-filter-label,\n.will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}\n";
+var css_248z$a = ".will-guests-filter-label,\n.will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-inner {\n    width: 100%;\n    justify-content: space-between;\n  }\n}\n";
 styleInject(css_248z$a);
 
 var GuestCount = function (_a) {
@@ -12054,7 +12042,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: 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 = forwardRef(function (_a, ref) {
@@ -12086,7 +12074,7 @@ var ImageCard = forwardRef(function (_a, ref) {
 });
 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 = forwardRef(function (_a, ref) {