willba-component-library 0.3.25 → 0.3.27

package/lib/index.umd.js

@@ -6850,11 +6850,13 @@
     };
 
     var usePanelPosition = function (_a) {
-        var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
-        var _b = __read(React.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(React.useState(), 2), left = _b[0], setLeft = _b[1];
+        var hasMultipleTabs = tabs && tabs.length > 1;
+        var top = isMobile ? (hasMultipleTabs ? 60 : 0) : hasMultipleTabs ? 125 : 66;
         React.useLayoutEffect(function () {
             if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
-                setLocalStyles({});
+                setLeft(undefined);
                 return;
             }
             var panel = panelRef.current;
@@ -6865,11 +6867,11 @@
             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 = React.createContext(undefined);
@@ -12165,20 +12167,21 @@
     };
     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:
@@ -12193,10 +12196,10 @@
                     return null;
             }
         };
-        return (selectedFilter && (React.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.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 () {
@@ -12224,13 +12227,13 @@
             locationsPlaceholder: t('locations.placeholder'),
             locationsSelectedLabel: t('locations.selected'),
         });
-        return (React.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: function (el) {
+        return (React.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;
                 }
             } },
-            ((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
+            !!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
                 React.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
                         previouslyFocusedButtonRef.current = e.currentTarget;
                         handleSelectedFilter(FilterSections.LOCATIONS);