willba-component-library 0.3.19 → 0.3.20

package/package.json

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

package/src/components/FilterBar/components/FilterControls/FilterControls.tsx

@@ -27,15 +27,13 @@ export const FilterControls = () => {
     locations,
     innerLoading,
     outerLoading,
-
     handleSubmit,
     handleSelectedFilter,
 
-    // Refs
     previouslyFocusedButtonRef,
     buttonRefs,
-    //
-    targetFilterBarRef,
+    tabsRef,
+    filtersRef,
   } = useFilterBar()
 
   // Store previously focused button and restore focus when closing
@@ -64,7 +62,13 @@ export const FilterControls = () => {
   return (
     <div
       className={`will-filter-bar-controls ${mode || 'light'}`}
-      ref={tabs?.length === 1 ? targetFilterBarRef : null}
+      ref={(el) => {
+        filtersRef.current = el
+
+        if (tabs?.length === 1) {
+          tabsRef.current = el
+        }
+      }}
     >
       {!!locations?.data?.length && (
         <>

package/src/components/FilterBar/components/FilterPanels/FilterPanels.tsx

@@ -29,7 +29,7 @@ export const FilterPanels = () => {
     isMobile,
     panelRef,
     buttonRefs,
-    targetFilterBarRef,
+    filtersRef,
     setSelectedLocations,
     setCalendarRange,
     handleSelectedFilter,
@@ -38,12 +38,12 @@ export const FilterPanels = () => {
   } = useFilterBar()
 
   // Handle close filter section
-  const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
+  const { filterSectionRef } = useCloseFilterSection({ handleSelectedFilter })
 
   const { localStyles } = usePanelPosition({
     selectedFilter,
     panelRef,
-    targetFilterBarRef,
+    filtersRef,
     buttonRefs,
     isMobile,
   })
@@ -54,7 +54,7 @@ export const FilterPanels = () => {
         return (
           <Dates
             autoFocus
-            ref={filtersRef}
+            ref={filterSectionRef}
             onClose={() => handleSelectedFilter(false)}
             calendarRange={calendarRange}
             setCalendarRange={setCalendarRange}
@@ -67,7 +67,7 @@ export const FilterPanels = () => {
         return (
           <Guests
             autoFocus
-            ref={filtersRef}
+            ref={filterSectionRef}
             ageCategories={ageCategories}
             ageCategoryCounts={ageCategoryCounts}
             updateGuestsCount={updateGuestsCount}
@@ -82,7 +82,7 @@ export const FilterPanels = () => {
         return (
           <Locations
             autoFocus
-            ref={filtersRef}
+            ref={filterSectionRef}
             locations={locations?.data}
             language={language}
             selectedLocations={selectedLocations}
@@ -102,11 +102,10 @@ export const FilterPanels = () => {
       <div
         ref={panelRef}
         className={`will-filter-bar-panels ${mode || 'light'}`}
-        style={
-          (!tabs || tabs.length < 2) && !isMobile
-            ? { top: 66 }
-            : { ...localStyles }
-        }
+        style={{
+          ...localStyles,
+          ...((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}),
+        }}
       >
         {renderContent()}
       </div>

package/src/components/FilterBar/components/FilterTabs/FilterTabs.tsx

@@ -19,13 +19,13 @@ export const FilterTabs = () => {
     setSelectedPath,
     handleResetFilters,
     //
-    targetFilterBarRef,
+    tabsRef,
   } = useFilterBar()
 
   return (
     tabs &&
     tabs.length > 1 && (
-      <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+      <div className="will-filter-bar-tabs" ref={tabsRef}>
         {tabs
           .sort((a, b) => a.order - b.order)
           .map((tab, idx) => (

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

@@ -6,14 +6,16 @@ export const useFilterUi = (selectedFilter: string | boolean) => {
   const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
   const panelRef = useRef<HTMLDivElement | null>(null)
   const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
+  const filtersRef = useRef<HTMLDivElement | null>(null)
 
-  const { isMobile, targetFilterBarRef } = useScrollInToView({ selectedFilter })
+  const { isMobile, tabsRef } = useScrollInToView({ selectedFilter })
 
   return {
     previouslyFocusedButtonRef,
     isMobile,
-    targetFilterBarRef,
+    tabsRef,
     panelRef,
     buttonRefs,
+    filtersRef,
   }
 }

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

@@ -9,7 +9,7 @@ import {
 type Props = {
   selectedFilter: string | boolean
   panelRef: RefObject<HTMLDivElement | null>
-  targetFilterBarRef: RefObject<HTMLDivElement | null>
+  filtersRef: RefObject<HTMLDivElement | null>
   buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
   isMobile: boolean
 }
@@ -17,7 +17,7 @@ type Props = {
 export const usePanelPosition = ({
   selectedFilter,
   panelRef,
-  targetFilterBarRef,
+  filtersRef,
   buttonRefs,
   isMobile,
 }: Props) => {
@@ -30,7 +30,7 @@ export const usePanelPosition = ({
     }
 
     const panel = panelRef.current
-    const container = targetFilterBarRef.current
+    const container = filtersRef.current
     const button = buttonRefs.current[selectedFilter]
 
     if (!panel || !container || !button) return

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

@@ -6,7 +6,7 @@ type Props = {
 
 export const useScrollInToView = ({ selectedFilter }: Props) => {
   const [isMobile, setIsMobile] = useState(true)
-  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
+  const tabsRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.innerWidth > 960) {
@@ -14,16 +14,16 @@ export const useScrollInToView = ({ selectedFilter }: Props) => {
       return
     }
 
-    if (targetFilterBarRef.current && selectedFilter) {
+    if (tabsRef.current && selectedFilter) {
       window.scrollTo({
         behavior: 'smooth',
         top:
-          targetFilterBarRef.current.getBoundingClientRect().top -
+          tabsRef.current.getBoundingClientRect().top -
           document.body.getBoundingClientRect().top -
           30,
       })
     }
   }, [selectedFilter])
 
-  return { isMobile, targetFilterBarRef }
+  return { isMobile, tabsRef }
 }

package/src/components/FilterBar/providers/FilterBarProvider.tsx

@@ -38,10 +38,11 @@ type FilterBarContextType = FilterBarTypes & {
   previouslyFocusedButtonRef: MutableRefObject<HTMLButtonElement | null>
   panelRef: MutableRefObject<HTMLDivElement | null>
   buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
+  filtersRef: MutableRefObject<HTMLDivElement | null>
 
   // Mobile
   isMobile: boolean
-  targetFilterBarRef: RefObject<HTMLDivElement>
+  tabsRef: MutableRefObject<HTMLDivElement | null>
 }
 
 const FilterBarContext = createContext<FilterBarContextType | undefined>(
@@ -150,7 +151,8 @@ export const FilterBarProvider = ({
       outerLoading,
       locations,
       filterUi.isMobile,
-      filterUi.targetFilterBarRef,
+      filterUi.tabsRef,
+      filterUi.filtersRef,
     ]
   )
 

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -62,14 +62,14 @@ export default function FilterCalendar({
   useAwaitRender()
 
   // Handle close filter section
-  const { filtersRef } = useCloseFilterSection({
+  const { filterSectionRef } = useCloseFilterSection({
     handleSelectedFilter: setToggleCalendar,
   })
 
   return (
     <div className={`will-root`} style={themePalette}>
       {toggleCalendar && (
-        <div className={`will-calendar-wrapper`} ref={filtersRef}>
+        <div className={`will-calendar-wrapper`} ref={filterSectionRef}>
           <div className={`will-calendar-header`}>
             <h2>{t('filterBar:calendar.title')}</h2>
             <CloseButton handleClose={() => setToggleCalendar(false)} />

package/src/core/hooks/useCloseFilterSection.tsx

@@ -6,13 +6,13 @@ type Props = {
 
 // TODO - Refactor and rename this hook
 export const useCloseFilterSection = ({ handleSelectedFilter }: Props) => {
-  const filtersRef = useRef<HTMLDivElement | null>(null)
+  const filterSectionRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
-        filtersRef.current &&
-        !filtersRef.current.contains(event.target as Node)
+        filterSectionRef.current &&
+        !filterSectionRef.current.contains(event.target as Node)
       ) {
         handleSelectedFilter(false)
       }
@@ -23,7 +23,7 @@ export const useCloseFilterSection = ({ handleSelectedFilter }: Props) => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [filtersRef])
+  }, [filterSectionRef])
 
-  return { filtersRef }
+  return { filterSectionRef }
 }