willba-component-library 0.3.25 → 0.3.26

package/README.md

@@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.25/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.26/lib/index.umd.js"></script>
 
 <script>
   const renderFilterBar = async () => {

package/lib/components/FilterBar/hooks/usePanelPosition.d.ts

@@ -1,12 +1,14 @@
-import { CSSProperties, MutableRefObject, RefObject } from 'react';
+import { MutableRefObject, RefObject } from 'react';
 type Props = {
     selectedFilter: string | boolean;
     panelRef: RefObject<HTMLDivElement | null>;
     filtersRef: RefObject<HTMLDivElement | null>;
     buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>;
     isMobile: boolean;
+    tabs?: unknown[];
 };
-export declare const usePanelPosition: ({ selectedFilter, panelRef, filtersRef, buttonRefs, isMobile, }: Props) => {
-    localStyles: CSSProperties;
+export declare const usePanelPosition: ({ selectedFilter, panelRef, filtersRef, buttonRefs, isMobile, tabs, }: Props) => {
+    top: number;
+    left: number | undefined;
 };
 export {};

package/lib/index.esm.js

@@ -6828,11 +6828,13 @@ var useFilterRefs = function (selectedFilter) {
 };
 
 var usePanelPosition = function (_a) {
-    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
-    var _b = __read(useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
+    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile, tabs = _a.tabs;
+    var _b = __read(useState(), 2), left = _b[0], setLeft = _b[1];
+    var hasMultipleTabs = tabs && tabs.length > 1;
+    var top = isMobile ? (hasMultipleTabs ? 60 : 0) : hasMultipleTabs ? 125 : 66;
     useLayoutEffect(function () {
         if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
-            setLocalStyles({});
+            setLeft(undefined);
             return;
         }
         var panel = panelRef.current;
@@ -6843,11 +6845,11 @@ var usePanelPosition = function (_a) {
         var panelRect = panel.getBoundingClientRect();
         var containerRect = container.getBoundingClientRect();
         var buttonRect = button.getBoundingClientRect();
-        var buttonLeft = buttonRect.left - containerRect.left - 10; // Offset by 10px to account for controls section spacing
-        var left = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
-        setLocalStyles({ left: left });
+        var buttonLeft = buttonRect.left - containerRect.left - 10;
+        var newLeft = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
+        setLeft(newLeft);
     }, [selectedFilter, isMobile]);
-    return { localStyles: localStyles };
+    return { top: top, left: left };
 };
 
 var FilterBarContext = createContext(undefined);
@@ -12143,20 +12145,21 @@ var Categories = function (_a) {
 };
 Categories.displayName = 'Categories';
 
-var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-white);\n  min-height: 100px;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;\n    z-index: 3;\n  }\n\n  .will-filter-bar-panels {\n    top: 60px;\n    width: 100%;\n    z-index: 999;\n  }\n}\n";
+var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-white);\n  min-height: 100px;\n  position: absolute;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;\n    z-index: 3;\n  }\n\n  .will-filter-bar-panels {\n    width: 100%;\n    z-index: 999;\n  }\n}\n";
 styleInject(css_248z$5);
 
 var FilterPanels = function () {
     var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, tabs = _a.tabs, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, isMobile = _a.isMobile, panelRef = _a.panelRef, buttonRefs = _a.buttonRefs, filtersRef = _a.filtersRef, setSelectedLocations = _a.setSelectedLocations, setCalendarRange = _a.setCalendarRange, handleSelectedFilter = _a.handleSelectedFilter, updateGuestsCount = _a.updateGuestsCount, setCategories = _a.setCategories;
     // Handle close filter section
     var filterSectionRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filterSectionRef;
-    var localStyles = usePanelPosition({
+    var _b = usePanelPosition({
         selectedFilter: selectedFilter,
         panelRef: panelRef,
         filtersRef: filtersRef,
         buttonRefs: buttonRefs,
         isMobile: isMobile,
-    }).localStyles;
+        tabs: tabs,
+    }), left = _b.left, top = _b.top;
     var renderContent = function () {
         switch (selectedFilter) {
             case FilterSections.CALENDAR:
@@ -12171,10 +12174,10 @@ var FilterPanels = function () {
                 return null;
         }
     };
-    return (selectedFilter && (React__default.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: __assign$2(__assign$2({}, localStyles), ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})) }, renderContent())));
+    return (selectedFilter && (React__default.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: { left: left, top: top } }, renderContent())));
 };
 
-var css_248z$4 = ".will-filter-bar-controls {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-controls {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n    overflow: hidden;\n  }\n}\n";
+var css_248z$4 = ".will-filter-bar-controls {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-controls {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n    overflow: hidden;\n  }\n\n  .will-filter-bar-controls.disabled {\n    opacity: 0.1;\n  }\n}\n";
 styleInject(css_248z$4);
 
 var FilterControls = function () {
@@ -12202,7 +12205,7 @@ var FilterControls = function () {
         locationsPlaceholder: t('locations.placeholder'),
         locationsSelectedLabel: t('locations.selected'),
     });
-    return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: function (el) {
+    return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) {
             filtersRef.current = el;
             if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1) {
                 tabsRef.current = el;