willba-component-library 0.3.15 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/components/FilterPanels/Dates/Dates.css

@@ -1,3 +1,3 @@
 .will-dates-filter-container {
-  padding: 0 16px;
+  padding: 0 16px 16px 16px;
 }

package/src/components/FilterBar/components/FilterPanels/Guests/GuestCount/GuestCount.css

@@ -53,7 +53,6 @@
 @media (max-width: 960px) {
   .will-guests-filter-inner {
     width: 100%;
-    margin: 15px 0;
     justify-content: space-between;
   }
 }

package/src/components/FilterBar/components/FilterPanels/Guests/Guests.css

@@ -7,7 +7,13 @@
   flex-direction: column;
   min-width: 400px;
   gap: 20px;
-  padding: 16px;
+  padding: 0 16px 16px 16px;
+}
+
+@media (max-width: 960px) {
+  .will-guests-filter-container {
+    min-width: auto;
+  }
 }
 
 /**/

package/src/components/FilterBar/components/FilterPanels/Locations/Locations.css

@@ -4,10 +4,9 @@
 
 .will-locations-filter-container {
   display: flex;
-  gap: 10px;
   flex-direction: column;
   min-width: 400px;
-  padding: 16px 0;
+  padding-bottom: 16px;
 }
 
 @media (max-width: 960px) {

package/src/components/FilterBar/hooks/usePanelPosition.tsx

@@ -2,7 +2,7 @@ import {
   CSSProperties,
   MutableRefObject,
   RefObject,
-  useEffect,
+  useLayoutEffect,
   useState,
 } from 'react'
 
@@ -23,44 +23,31 @@ export const usePanelPosition = ({
 }: Props) => {
   const [localStyles, setLocalStyles] = useState<CSSProperties>({})
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
       setLocalStyles({})
       return
     }
 
-    let timeoutId: number | null = null
+    const panel = panelRef.current
+    const container = targetFilterBarRef.current
+    const button = buttonRefs.current[selectedFilter]
 
-    const calculate = () => {
-      const panel = panelRef.current
-      const container = targetFilterBarRef.current
-      const button = buttonRefs.current[selectedFilter]
+    if (!panel || !container || !button) return
 
-      if (!panel || !container || !button) return
+    const panelRect = panel.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()
+    const buttonRect = button.getBoundingClientRect()
 
-      const panelRect = panel.getBoundingClientRect()
-      if (panelRect.width === 0) {
-        timeoutId = window.setTimeout(calculate, 10)
-        return
-      }
+    const buttonLeft = buttonRect.left - containerRect.left
 
-      const containerRect = container.getBoundingClientRect()
-      const buttonRect = button.getBoundingClientRect()
-      const buttonLeft = buttonRect.left - containerRect.left
-      const left = Math.min(
-        buttonLeft,
-        Math.max(containerRect.width - panelRect.width, 0)
-      )
+    const left = Math.max(
+      0,
+      Math.min(buttonLeft, containerRect.width - panelRect.width)
+    )
 
-      setLocalStyles({ left })
-    }
-
-    calculate()
-
-    return () => {
-      if (timeoutId) clearTimeout(timeoutId)
-    }
-  }, [selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile])
+    setLocalStyles({ left })
+  }, [selectedFilter, isMobile])
 
   return { localStyles }
 }