willba-component-library 0.3.19 → 0.3.21

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -11,7 +11,7 @@ import '../../themes/Default.css'
 import './FilterBar.css'
 
 export const FilterBar = ({
-  language = LANGUAGE_FALLBACK,
+  language,
   ageCategories,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
@@ -62,4 +62,3 @@ export const FilterBar = ({
 ////////////
 
 const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'
-const LANGUAGE_FALLBACK = 'en'

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,9 +62,15 @@ 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 && (
+      {locations?.data?.length && locations.data.length > 1 && (
         <>
           <SelectButton
             ref={(el) => (buttonRefs.current[FilterSections.LOCATIONS] = el)}

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

@@ -1,3 +1,9 @@
 .will-dates-filter-container {
-  padding: 0 16px 16px 16px;
+  padding: 0 30px 16px 30px;
+}
+
+@media (max-width: 960px) {
+  .will-dates-filter-container {
+    padding: 0 20px 16px 20px;
+  }
 }

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,9 +82,8 @@ export const FilterPanels = () => {
         return (
           <Locations
             autoFocus
-            ref={filtersRef}
+            ref={filterSectionRef}
             locations={locations?.data}
-            language={language}
             selectedLocations={selectedLocations}
             setSelectedLocations={setSelectedLocations}
             multiSelect={locations?.multiSelect}
@@ -102,11 +101,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/FilterPanels/Guests/Guests.css

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

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

@@ -10,7 +10,6 @@ import './Locations.css'
 
 type Props = {
   locations?: Location[]
-  language?: string
   selectedLocations: Location[]
   setSelectedLocations: (locations: Location[]) => void
   autoFocus?: boolean
@@ -22,7 +21,6 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
   (
     {
       locations,
-      language,
       selectedLocations,
       setSelectedLocations,
       autoFocus,
@@ -71,7 +69,7 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
         />
 
         <div className="will-locations-filter-container">
-          {!!(locations?.length && language) &&
+          {!!locations?.length &&
             locations.map((location, index) => {
               return (
                 <ImageCard

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

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
+  padding: 16px 30px;
 }
 
 .will-filter-section-title {
@@ -24,6 +24,10 @@
 }
 
 @media (max-width: 960px) {
+  .will-filter-section-header {
+    padding: 16px 20px;
+  }
+
   .will-filter-section-title {
     font-size: 18px;
   }

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { useTranslation } from 'react-i18next'
 
@@ -15,33 +15,36 @@ export const FilterTabs = () => {
     selectedPath,
     mode,
     tabs,
+    tabsRef,
     handleSelectedFilter,
     setSelectedPath,
     handleResetFilters,
-    //
-    targetFilterBarRef,
   } = useFilterBar()
 
+  const sortedTabs = useMemo(
+    () => [...(tabs ?? [])].sort((a, b) => a.order - b.order),
+    [tabs]
+  )
+
+  const handleTabClick = (path: string) => {
+    setSelectedPath(path)
+    handleResetFilters()
+    handleSelectedFilter(false)
+  }
+
+  if (sortedTabs.length <= 1) return null
+
   return (
-    tabs &&
-    tabs.length > 1 && (
-      <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
-        {tabs
-          .sort((a, b) => a.order - b.order)
-          .map((tab, idx) => (
-            <TabButton
-              key={`tab-${idx}`}
-              label={tab.label || t(`tabs.${tab.path.substring(1)}`)}
-              onClick={() => {
-                setSelectedPath(tab.path)
-                handleResetFilters()
-                handleSelectedFilter(false)
-              }}
-              active={selectedPath === tab.path}
-              mode={mode}
-            />
-          ))}
-      </div>
-    )
+    <div className="will-filter-bar-tabs" ref={tabsRef}>
+      {sortedTabs.map((tab) => (
+        <TabButton
+          key={tab.path}
+          label={tab.label || t(`tabs.${tab.path.slice(1)}`)}
+          onClick={() => handleTabClick(tab.path)}
+          active={selectedPath === tab.path}
+          mode={mode}
+        />
+      ))}
+    </div>
   )
 }

package/src/components/FilterBar/components/ImageCard/ImageCard.css

@@ -3,7 +3,7 @@
   gap: 20px;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 30px;
   cursor: pointer;
   user-select: none;
   min-height: 40px;
@@ -22,3 +22,9 @@
   height: 68px;
   object-fit: cover;
 }
+
+@media (max-width: 960px) {
+  .will-image-card {
+    padding: 8px 20px;
+  }
+}

package/src/components/FilterBar/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useScrollInToView } from './useScrollInToView'
 export { useFilterState } from './useFilterState'
 export { useFilterActions } from './useFilterActions'
-export { useFilterUi } from './useFilterUi'
+export { useFilterRefs } from './useFilterRefs'
 export { usePanelPosition } from './usePanelPosition'

package/src/components/FilterBar/hooks/{useFilterUi.tsx → useFilterRefs.tsx}

@@ -2,18 +2,20 @@ import { useRef } from 'react'
 
 import { useScrollInToView } from './useScrollInToView'
 
-export const useFilterUi = (selectedFilter: string | boolean) => {
+export const useFilterRefs = (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
@@ -39,7 +39,7 @@ export const usePanelPosition = ({
     const containerRect = container.getBoundingClientRect()
     const buttonRect = button.getBoundingClientRect()
 
-    const buttonLeft = buttonRect.left - containerRect.left
+    const buttonLeft = buttonRect.left - containerRect.left - 30 // Offset by 30px to account for controls section spacing
 
     const left = Math.max(
       0,

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

@@ -9,7 +9,7 @@ import React, {
 import { DateRange } from 'react-day-picker'
 
 import { AgeCategoryCount, Location, FilterBarTypes } from '../FilterBarTypes'
-import { useFilterActions, useFilterState, useFilterUi } from '../hooks'
+import { useFilterActions, useFilterState, useFilterRefs } from '../hooks'
 
 type FilterBarProviderProps = PropsWithChildren<FilterBarTypes>
 
@@ -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>(
@@ -95,7 +96,7 @@ export const FilterBarProvider = ({
     setInnerLoading,
   })
 
-  const filterUi = useFilterUi(selectedFilter)
+  const filterRefs = useFilterRefs(selectedFilter)
 
   const contextValue = useMemo(
     () => ({
@@ -128,7 +129,7 @@ export const FilterBarProvider = ({
       outerLoading,
       locations,
 
-      ...filterUi,
+      ...filterRefs,
     }),
     [
       selectedFilter,
@@ -149,8 +150,9 @@ export const FilterBarProvider = ({
       tabs,
       outerLoading,
       locations,
-      filterUi.isMobile,
-      filterUi.targetFilterBarRef,
+      filterRefs.isMobile,
+      filterRefs.tabsRef,
+      filterRefs.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 }
 }