willba-component-library 0.1.70 → 0.1.73

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

@@ -4,7 +4,6 @@ import '../../themes/Default.css';
 import { AgeCategoryType, CalendarOffset, Filters } from './FilterBarTypes';
 import './FilterBar.css';
 export type FilterBarProps = {
-    vendor?: string;
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl?: string;
@@ -12,6 +11,8 @@ export type FilterBarProps = {
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
-    calendarOffset: CalendarOffset;
+    calendarOffset?: CalendarOffset;
+    mode?: string;
+    defaultTab?: string;
 };
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, }: FilterBarProps): React.JSX.Element | null;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, mode, defaultTab, }: FilterBarProps): React.JSX.Element | null;

package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts

@@ -4,6 +4,7 @@ type Props = {
     onClick?: () => void;
     label: string;
     active?: boolean;
+    mode?: string;
 };
-export declare const TabButton: ({ onClick, label, active }: Props) => React.JSX.Element;
+export declare const TabButton: ({ onClick, label, active, mode }: Props) => React.JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import './Calendar.css';
 type Props = {
     calendarRange: DateRange | undefined;
     setCalendarRange: (range: DateRange | undefined) => void;
-    calendarOffset: CalendarOffset;
+    calendarOffset?: CalendarOffset;
     selectedPath: string;
     locale?: string;
 };

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

@@ -6,8 +6,9 @@ type Props = {
     currentViewApply?: string;
     ageCategories?: AgeCategoryType[];
     onSubmit?: ((val: Filters) => void) | null;
+    defaultTab?: string;
 };
-export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategories, onSubmit, }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategories, onSubmit, defaultTab, }: Props) => {
     selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;

package/lib/index.d.ts

@@ -46,7 +46,6 @@ type CalendarOffset = {
 };
 
 type FilterBarProps = {
-    vendor?: string;
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl?: string;
@@ -54,8 +53,10 @@ type FilterBarProps = {
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
-    calendarOffset: CalendarOffset;
+    calendarOffset?: CalendarOffset;
+    mode?: string;
+    defaultTab?: string;
 };
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, }: FilterBarProps): React.JSX.Element | null;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, mode, defaultTab, }: FilterBarProps): React.JSX.Element | null;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -448,7 +448,7 @@ function useTheme(_a) {
     return themePalette;
 }
 
-var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
+var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
 styleInject(css_248z$b);
 
 function _typeof(o) {
@@ -3938,7 +3938,7 @@ var Pages;
 })(Pages || (Pages = {}));
 
 var useFilterBar = function (_a) {
-    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit;
+    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, defaultTab = _a.defaultTab;
     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,9 +3973,12 @@ var useFilterBar = function (_a) {
         // Handle default selected tab
         if (typeof window === 'undefined')
             return;
-        var currentPath = window.location.pathname.includes(Pages.EVENTS)
+        console.log(defaultTab);
+        var currentPath = defaultTab === Pages.EVENTS ||
+            window.location.pathname.includes(Pages.EVENTS)
             ? Pages.EVENTS
-            : window.location.pathname.includes(Pages.ROOMS)
+            : defaultTab === Pages.ROOMS ||
+                window.location.pathname.includes(Pages.ROOMS)
                 ? Pages.ROOMS
                 : Pages.EVENTS;
         setSelectedPath(currentPath);
@@ -6634,12 +6637,12 @@ var SubmitButton = function (_a) {
         t('submit.label')));
 };
 
-var css_248z$7 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n    color: var(--will-white)\n  }\n\n \n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.active {\n    background-color: var(--will-transparent-white);\n   \n  }";
+var css_248z$7 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-black);\n  }\n\n \n\n";
 styleInject(css_248z$7);
 
 var TabButton = function (_a) {
-    var onClick = _a.onClick, label = _a.label, active = _a.active;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
+    var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'dark', " ").concat(active && 'active', " "), onClick: onClick }, label));
 };
 
 var css_248z$6 = ".will-guests-filter-label, .will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 30px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  border: none;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}";
@@ -11045,22 +11048,20 @@ var css_248z$3 = ".will-calendar-filter-header {\n  padding: 15px 0;\n  border-b
 styleInject(css_248z$3);
 
 var Calendar = forwardRef(function (_a, ref) {
-    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange; _a.calendarOffset; _a.selectedPath; var locale = _a.locale;
+    var _b;
+    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, locale = _a.locale;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     useEffect(function () {
         if (!calendarRange)
             setCalendarRange(undefined);
     }, []);
     var today = startOfDay(new Date());
-    // const daysToOffsetCalendar =
-    //   calendarOffset && typeof calendarOffset === 'object'
-    //     ? Object.entries(calendarOffset).find(
-    //         (page) => selectedPath.substring(1) === page[0]
-    //       )
-    //     : null
+    var daysToOffsetCalendar = calendarOffset
+        ? (_b = Object.entries(calendarOffset)) === null || _b === void 0 ? void 0 : _b.find(function (page) { return selectedPath.substring(1) === page[0]; })
+        : null;
     var disabledDays = [
         {
-            from: addDays(today, -2),
+            from: addDays(today, !!(daysToOffsetCalendar === null || daysToOffsetCalendar === void 0 ? void 0 : daysToOffsetCalendar.length) ? daysToOffsetCalendar[1] : -2),
             to: addDays(today, -100),
         },
     ];
@@ -11105,11 +11106,11 @@ var Categories = function (_a) {
             React__default__default.createElement("span", null, itm))); }))));
 };
 
-var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\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  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\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-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n";
+var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\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\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\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-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark)\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light)\n}\n\n";
 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;
+    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 themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11120,6 +11121,7 @@ function FilterBar(_a) {
         currentViewApply: currentViewApply,
         ageCategories: ageCategories,
         onSubmit: onSubmit,
+        defaultTab: defaultTab,
     }), 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 () {
@@ -11152,11 +11154,11 @@ function FilterBar(_a) {
         !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 }),
+                }, 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 }))),
-        React__default__default.createElement("div", { className: "will-filter-bar-header", ref: currentViewApply ? targetFilterBarRef : null },
+                }, active: selectedPath === Pages.ROOMS, mode: mode }))),
+        React__default__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref: currentViewApply ? targetFilterBarRef : null },
             React__default__default.createElement(SelectButton, { label: t('calendar.label'), description: parsedDates
                     ? parsedDates
                     : selectedPath === Pages.ROOMS
@@ -11166,7 +11168,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", style: currentViewApply && !isMobile ? { top: 66 } : {} },
+        selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style: currentViewApply && !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 })),