willba-component-library 0.1.75 → 0.1.77

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import { Palette } from '../../themes/useTheme';
 import '../../themes/Default.css';
-import { AgeCategoryType, CalendarOffset, Filters } from './FilterBarTypes';
+import { AgeCategoryType, CalendarOffset, Filters, Tab } from './FilterBarTypes';
 import './FilterBar.css';
 export type FilterBarProps = {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl?: string;
     palette?: Palette;
-    currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
     calendarOffset?: CalendarOffset;
     mode?: string;
     defaultTab?: string;
+    tabs?: Tab[];
 };
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, mode, defaultTab, }: FilterBarProps): React.JSX.Element | null;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, calendarOffset, mode, tabs, }: FilterBarProps): React.JSX.Element | null;

package/lib/components/FilterBar/FilterBarTypes.d.ts

@@ -23,9 +23,6 @@ export declare enum FilterSections {
 export type Filters = {
     [key: string]: string;
 };
-export declare enum ViewApply {
-    ROOMS = "roomFilters"
-}
 export declare enum Pages {
     ROOMS = "/rooms",
     EVENTS = "/events"
@@ -33,3 +30,15 @@ export declare enum Pages {
 export type CalendarOffset = {
     [key: string]: number;
 };
+type Translations = {
+    en: string;
+    fi: string;
+    [key: string]: string;
+};
+export type Tab = {
+    path: string;
+    default?: boolean;
+    order: number;
+    label?: Translations;
+};
+export {};

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

@@ -1,19 +1,18 @@
 /// <reference types="react" />
 import { DateRange } from 'react-day-picker';
-import { AgeCategoryCount, AgeCategoryType, Filters, Pages } from '../FilterBarTypes';
+import { AgeCategoryCount, AgeCategoryType, Filters, Tab } from '../FilterBarTypes';
 type Props = {
     redirectUrl?: string;
-    currentViewApply?: string;
     ageCategories?: AgeCategoryType[];
     onSubmit?: ((val: Filters) => void) | null;
-    defaultTab?: string;
+    tabs?: Tab[];
 };
-export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategories, onSubmit, defaultTab, }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, }: Props) => {
     selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
-    selectedPath: Pages;
+    selectedPath: string;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
     setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<string | boolean>>;
     setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
@@ -22,6 +21,6 @@ export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategori
     handleSubmit: () => string | void;
     updateGuestsCount: (id: string, newCount: number) => void;
     handleResetFilters: () => void;
-    setSelectedPath: import("react").Dispatch<import("react").SetStateAction<Pages>>;
+    setSelectedPath: import("react").Dispatch<import("react").SetStateAction<string>>;
 };
 export {};

package/lib/index.d.ts

@@ -44,19 +44,30 @@ type Filters = {
 type CalendarOffset = {
     [key: string]: number;
 };
+type Translations = {
+    en: string;
+    fi: string;
+    [key: string]: string;
+};
+type Tab = {
+    path: string;
+    default?: boolean;
+    order: number;
+    label?: Translations;
+};
 
 type FilterBarProps = {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl?: string;
     palette?: Palette;
-    currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
     calendarOffset?: CalendarOffset;
     mode?: string;
     defaultTab?: string;
+    tabs?: Tab[];
 };
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, mode, defaultTab, }: FilterBarProps): React.JSX.Element | null;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, calendarOffset, mode, tabs, }: FilterBarProps): React.JSX.Element | null;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -3927,10 +3927,6 @@ var FilterSections;
     FilterSections["GUESTS"] = "guests";
     FilterSections["CATEGORIES"] = "categories";
 })(FilterSections || (FilterSections = {}));
-var ViewApply;
-(function (ViewApply) {
-    ViewApply["ROOMS"] = "roomFilters";
-})(ViewApply || (ViewApply = {}));
 var Pages;
 (function (Pages) {
     Pages["ROOMS"] = "/rooms";
@@ -3938,7 +3934,7 @@ var Pages;
 })(Pages || (Pages = {}));
 
 var useFilterBar = function (_a) {
-    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, defaultTab = _a.defaultTab;
+    var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs;
     var _b = __read(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
     var _c = __read(useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
     var _d = __read(useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
@@ -3973,10 +3969,11 @@ var useFilterBar = function (_a) {
         // Handle default selected tab
         if (typeof window === 'undefined')
             return;
-        var currentPath = defaultTab === Pages.EVENTS ||
+        var defaultTab = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? tabs[0] : tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.default; });
+        var currentPath = (defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.path) === Pages.EVENTS ||
             window.location.pathname.includes(Pages.EVENTS)
             ? Pages.EVENTS
-            : defaultTab === Pages.ROOMS ||
+            : (defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.path) === Pages.ROOMS ||
                 window.location.pathname.includes(Pages.ROOMS)
                 ? Pages.ROOMS
                 : Pages.EVENTS;
@@ -4004,7 +4001,7 @@ var useFilterBar = function (_a) {
                 ageCategories: ageCategories,
             }),
         };
-        if (currentViewApply) {
+        if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1) {
             var currentSearchParams = new URLSearchParams(window.location.search);
             var updatedParams = new URLSearchParams();
             try {
@@ -11043,7 +11040,7 @@ var reactResponsiveExports = reactResponsive.exports;
 var css_248z$4 = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
 styleInject(css_248z$4);
 
-var css_248z$3 = ".will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n  text-align: left;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n  left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n\n";
+var css_248z$3 = ".will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n  text-align: left;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n\n";
 styleInject(css_248z$3);
 
 var Calendar = forwardRef(function (_a, ref) {
@@ -11109,7 +11106,7 @@ var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-widt
 styleInject(css_248z);
 
 function FilterBar(_a) {
-    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset, mode = _a.mode, defaultTab = _a.defaultTab;
+    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset, mode = _a.mode, tabs = _a.tabs;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11117,17 +11114,10 @@ function FilterBar(_a) {
     // Filters
     var _d = useFilterBar({
         redirectUrl: redirectUrl,
-        currentViewApply: currentViewApply,
         ageCategories: ageCategories,
         onSubmit: onSubmit,
-        defaultTab: defaultTab,
+        tabs: tabs,
     }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath, handleResetFilters = _d.handleResetFilters;
-    // Default selected tab when tabs are hidden
-    useEffect(function () {
-        if (currentViewApply === ViewApply.ROOMS) {
-            setSelectedPath(Pages.ROOMS);
-        }
-    }, []);
     // Scroll in to view
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
     // Handle close filter section
@@ -11150,14 +11140,14 @@ function FilterBar(_a) {
         guestsLabel: t('guests.guestsLabel'),
     });
     return (React__default__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
-        !currentViewApply && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
-            React__default__default.createElement(TabButton, { label: t('tabs.events'), onClick: function () {
-                    setSelectedPath(Pages.EVENTS), handleResetFilters();
-                }, active: selectedPath === Pages.EVENTS, mode: mode }),
-            React__default__default.createElement(TabButton, { label: t('tabs.rooms'), onClick: function () {
-                    setSelectedPath(Pages.ROOMS), handleResetFilters();
-                }, active: selectedPath === Pages.ROOMS, mode: mode }))),
-        React__default__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref: currentViewApply ? targetFilterBarRef : null },
+        tabs && tabs.length > 1 && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
+            .sort(function (a, b) { return a.order - b.order; })
+            .map(function (tab, idx) { return (React__default__default.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
+                ? tab.label[language]
+                : t("tabs.".concat(tab.path.substring(1))), onClick: function () {
+                setSelectedPath(tab.path), handleResetFilters();
+            }, active: selectedPath === tab.path, mode: mode })); }))),
+        React__default__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
             React__default__default.createElement(SelectButton, { label: t('calendar.label'), description: parsedDates
                     ? parsedDates
                     : selectedPath === Pages.ROOMS
@@ -11167,7 +11157,7 @@ function FilterBar(_a) {
                 React__default__default.createElement(Divider, null),
                 React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
             React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
-        selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style: currentViewApply && !isMobile ? { top: 66 } : {} },
+        selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style: tabs && tabs.length === 1 && !isMobile ? { top: 66 } : {} },
             React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
             selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, calendarOffset: calendarOffset, selectedPath: selectedPath, locale: language })),
             selectedFilter === FilterSections.GUESTS && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),