willba-component-library 0.3.25 → 0.3.27

package/package.json

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

package/src/components/FilterBar/components/FilterControls/FilterControls.css

@@ -15,4 +15,8 @@
     border-radius: 25px;
     overflow: hidden;
   }
+
+  .will-filter-bar-controls.disabled {
+    opacity: 0.1;
+  }
 }

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

@@ -61,7 +61,7 @@ export const FilterControls = () => {
 
   return (
     <div
-      className={`will-filter-bar-controls ${mode || 'light'}`}
+      className={`will-filter-bar-controls ${mode || 'light'} ${selectedFilter ? 'disabled' : ''}`}
       ref={(el) => {
         filtersRef.current = el
 
@@ -70,7 +70,7 @@ export const FilterControls = () => {
         }
       }}
     >
-      {locations?.data?.length && locations.data.length > 1 && (
+      {!!locations?.data?.length && locations.data.length > 1 && (
         <>
           <SelectButton
             ref={(el) => (buttonRefs.current[FilterSections.LOCATIONS] = el)}

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

@@ -2,7 +2,6 @@
   background-color: var(--will-white);
   min-height: 100px;
   position: absolute;
-  top: 125px;
   z-index: 111;
   border-radius: 25px;
   box-shadow: var(--will-box-shadow);
@@ -17,7 +16,6 @@
   }
 
   .will-filter-bar-panels {
-    top: 60px;
     width: 100%;
     z-index: 999;
   }

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

@@ -40,12 +40,13 @@ export const FilterPanels = () => {
   // Handle close filter section
   const { filterSectionRef } = useCloseFilterSection({ handleSelectedFilter })
 
-  const { localStyles } = usePanelPosition({
+  const { left, top } = usePanelPosition({
     selectedFilter,
     panelRef,
     filtersRef,
     buttonRefs,
     isMobile,
+    tabs,
   })
 
   const renderContent = () => {
@@ -101,10 +102,7 @@ export const FilterPanels = () => {
       <div
         ref={panelRef}
         className={`will-filter-bar-panels ${mode || 'light'}`}
-        style={{
-          ...localStyles,
-          ...((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}),
-        }}
+        style={{ left, top }}
       >
         {renderContent()}
       </div>

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

@@ -1,10 +1,4 @@
-import {
-  CSSProperties,
-  MutableRefObject,
-  RefObject,
-  useLayoutEffect,
-  useState,
-} from 'react'
+import { MutableRefObject, RefObject, useLayoutEffect, useState } from 'react'
 
 type Props = {
   selectedFilter: string | boolean
@@ -12,6 +6,7 @@ type Props = {
   filtersRef: RefObject<HTMLDivElement | null>
   buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
   isMobile: boolean
+  tabs?: unknown[]
 }
 
 export const usePanelPosition = ({
@@ -20,12 +15,16 @@ export const usePanelPosition = ({
   filtersRef,
   buttonRefs,
   isMobile,
+  tabs,
 }: Props) => {
-  const [localStyles, setLocalStyles] = useState<CSSProperties>({})
+  const [left, setLeft] = useState<number | undefined>()
+
+  const hasMultipleTabs = tabs && tabs.length > 1
+  const top = isMobile ? (hasMultipleTabs ? 60 : 0) : hasMultipleTabs ? 125 : 66
 
   useLayoutEffect(() => {
     if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
-      setLocalStyles({})
+      setLeft(undefined)
       return
     }
 
@@ -39,15 +38,15 @@ export const usePanelPosition = ({
     const containerRect = container.getBoundingClientRect()
     const buttonRect = button.getBoundingClientRect()
 
-    const buttonLeft = buttonRect.left - containerRect.left - 10 // Offset by 10px to account for controls section spacing
+    const buttonLeft = buttonRect.left - containerRect.left - 10
 
-    const left = Math.max(
+    const newLeft = Math.max(
       0,
       Math.min(buttonLeft, containerRect.width - panelRect.width)
     )
 
-    setLocalStyles({ left })
+    setLeft(newLeft)
   }, [selectedFilter, isMobile])
 
-  return { localStyles }
+  return { top, left }
 }