willba-component-library 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.css

@@ -75,13 +75,9 @@
     position: relative;
   }
 
-  .isMobileAbsolute {
-    position: absolute;
+  .will-root.isMobileAbsolute {
+    position: relative;
     z-index: 99999;
   }
-
-
-
- 
 }
 

package/src/components/FilterBar/FilterBar.tsx

@@ -22,7 +22,7 @@ export interface FilterBarProps {
   language?: string
   ageCategories?: AgeCategoryType[]
   redirectUrl: string
-  palette: Palette
+  palette?: Palette
 }
 
 export default function FilterBar({
@@ -56,12 +56,16 @@ export default function FilterBar({
   } = useFilterBar({ redirectUrl })
 
   // Scroll in to view
-  const targetElementRef = useRef<HTMLDivElement | null>(null)
+
+  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
   useEffect(() => {
-    if (targetElementRef.current) {
-      targetElementRef.current.scrollIntoView({
+    if (targetFilterBarRef.current && selectedFilter) {
+      window.scrollTo({
         behavior: 'smooth',
-        block: 'start',
+        top:
+          targetFilterBarRef.current.getBoundingClientRect().top -
+          document.body.getBoundingClientRect().top -
+          30,
       })
     }
   }, [selectedFilter])
@@ -80,7 +84,7 @@ export default function FilterBar({
         className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
         style={themePalette}
       >
-        <div className="will-filter-bar-header" ref={targetElementRef}>
+        <div className="will-filter-bar-header" ref={targetFilterBarRef}>
           <SelectButton
             style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.startDate')}