willba-component-library 0.4.3 → 0.4.5

package/lib/index.js

@@ -3157,25 +3157,21 @@ var Pages;
     Pages["SALES"] = "/sales";
 })(Pages || (Pages = {}));
 
-var useScrollInToView = function (_a) {
-    var selectedFilter = _a.selectedFilter;
-    var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-    var tabsRef = React.useRef(null);
+var MOBILE_BREAKPOINT = 960;
+var useIsMobile = function () {
+    var _a = __read(React.useState(function () {
+        return typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
+    }), 2), isMobile = _a[0], setIsMobile = _a[1];
     React.useEffect(function () {
-        if (typeof window !== 'undefined' && window.innerWidth > 960) {
-            setIsMobile(false);
+        if (typeof window === 'undefined')
             return;
-        }
-        if (tabsRef.current && selectedFilter) {
-            window.scrollTo({
-                behavior: 'smooth',
-                top: tabsRef.current.getBoundingClientRect().top -
-                    document.body.getBoundingClientRect().top -
-                    30,
-            });
-        }
-    }, [selectedFilter]);
-    return { isMobile: isMobile, tabsRef: tabsRef };
+        var handleResize = function () {
+            setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return isMobile;
 };
 
 var useFilterState = function (_a) {
@@ -7009,43 +7005,53 @@ var useFilterActions = function (_a) {
     };
 };
 
-var useFilterRefs = function (selectedFilter) {
+var useFilterRefs = function () {
     var buttonRefs = React.useRef({});
     var panelRef = React.useRef(null);
     var previouslyFocusedButtonRef = React.useRef(null);
     var filtersRef = React.useRef(null);
-    var _a = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _a.isMobile, tabsRef = _a.tabsRef;
+    var isMobile = useIsMobile();
     return {
         previouslyFocusedButtonRef: previouslyFocusedButtonRef,
         isMobile: isMobile,
-        tabsRef: tabsRef,
         panelRef: panelRef,
         buttonRefs: buttonRefs,
         filtersRef: filtersRef,
     };
 };
 
+var DESKTOP_PANEL_GAP = 10;
 var usePanelPosition = function (_a) {
-    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile, tabs = _a.tabs;
+    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
     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;
+    var _c = __read(React.useState(), 2), top = _c[0], setTop = _c[1];
     React.useLayoutEffect(function () {
-        if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
+        if (!selectedFilter || typeof selectedFilter !== 'string') {
             setLeft(undefined);
+            setTop(undefined);
             return;
         }
+        var filters = filtersRef.current;
+        if (!filters)
+            return;
+        if (isMobile) {
+            // Panel overlays the filter controls (which fade to opacity 0.1
+            // via the .disabled rule), so it starts at the top of the controls.
+            setTop(filters.offsetTop);
+            setLeft(undefined);
+            return;
+        }
+        // Desktop: panel sits below the controls with a small breathing room.
+        setTop(filters.offsetTop + filters.offsetHeight + DESKTOP_PANEL_GAP);
         var panel = panelRef.current;
-        var container = filtersRef.current;
         var button = buttonRefs.current[selectedFilter];
-        if (!panel || !container || !button)
+        if (!panel || !button)
             return;
         var panelRect = panel.getBoundingClientRect();
-        var containerRect = container.getBoundingClientRect();
+        var containerRect = filters.getBoundingClientRect();
         var buttonRect = button.getBoundingClientRect();
         var buttonLeft = buttonRect.left - containerRect.left - 10;
-        var newLeft = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
-        setLeft(newLeft);
+        setLeft(Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width)));
     }, [selectedFilter, isMobile]);
     return { top: top, left: left };
 };
@@ -7069,7 +7075,7 @@ var FilterBarProvider = function (_a) {
         onSubmit: onSubmit,
         setInnerLoading: setInnerLoading,
     });
-    var filterRefs = useFilterRefs(selectedFilter);
+    var filterRefs = useFilterRefs();
     var contextValue = React.useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts, categories: categories, calendarRange: calendarRange, selectedPath: selectedPath, innerLoading: innerLoading, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, setCalendarRange: setCalendarRange, setSelectedFilter: setSelectedFilter, setAgeCategoryCounts: setAgeCategoryCounts, setCategories: setCategories, setSelectedPath: setSelectedPath }, filterActions), { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations }), filterRefs)); }, [
         selectedFilter,
         ageCategoryCounts,
@@ -7090,7 +7096,6 @@ var FilterBarProvider = function (_a) {
         outerLoading,
         locations,
         filterRefs.isMobile,
-        filterRefs.tabsRef,
         filterRefs.filtersRef,
     ]);
     return (React.createElement(FilterBarContext.Provider, { value: contextValue }, children));
@@ -12363,7 +12368,7 @@ var css_248z$5 = ".will-filter-bar-panels {\n  background-color: var(--will-whit
 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;
+    var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode; _a.tabs; var 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 _b = usePanelPosition({
@@ -12372,7 +12377,6 @@ var FilterPanels = function () {
         filtersRef: filtersRef,
         buttonRefs: buttonRefs,
         isMobile: isMobile,
-        tabs: tabs,
     }), left = _b.left, top = _b.top;
     var renderContent = function () {
         switch (selectedFilter) {
@@ -12397,7 +12401,7 @@ styleInject(css_248z$4);
 var FilterControls = function () {
     var _a;
     var t = useTranslation('filterBar').t;
-    var _b = useFilterBar(), calendarRange = _b.calendarRange, selectedFilter = _b.selectedFilter, selectedPath = _b.selectedPath, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, mode = _b.mode, tabs = _b.tabs, ageCategories = _b.ageCategories, locations = _b.locations, innerLoading = _b.innerLoading, outerLoading = _b.outerLoading, handleSubmit = _b.handleSubmit, handleSelectedFilter = _b.handleSelectedFilter, previouslyFocusedButtonRef = _b.previouslyFocusedButtonRef, buttonRefs = _b.buttonRefs, tabsRef = _b.tabsRef, filtersRef = _b.filtersRef;
+    var _b = useFilterBar(), calendarRange = _b.calendarRange, selectedFilter = _b.selectedFilter, selectedPath = _b.selectedPath, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, mode = _b.mode, ageCategories = _b.ageCategories, locations = _b.locations, innerLoading = _b.innerLoading, outerLoading = _b.outerLoading, handleSubmit = _b.handleSubmit, handleSelectedFilter = _b.handleSelectedFilter, previouslyFocusedButtonRef = _b.previouslyFocusedButtonRef, buttonRefs = _b.buttonRefs, filtersRef = _b.filtersRef;
     // Store previously focused button and restore focus when closing
     React.useEffect(function () {
         if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -12421,9 +12425,6 @@ var FilterControls = function () {
     });
     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,
             React.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
@@ -12453,7 +12454,7 @@ styleInject(css_248z$3);
 
 var FilterTabs = function () {
     var t = useTranslation('filterBar').t;
-    var _a = useFilterBar(), selectedPath = _a.selectedPath, mode = _a.mode, tabs = _a.tabs, tabsRef = _a.tabsRef, handleSelectedFilter = _a.handleSelectedFilter, setSelectedPath = _a.setSelectedPath, handleResetFilters = _a.handleResetFilters;
+    var _a = useFilterBar(), selectedPath = _a.selectedPath, mode = _a.mode, tabs = _a.tabs, handleSelectedFilter = _a.handleSelectedFilter, setSelectedPath = _a.setSelectedPath, handleResetFilters = _a.handleResetFilters;
     var sortedTabs = React.useMemo(function () { return __spreadArray$1([], __read((tabs !== null && tabs !== void 0 ? tabs : [])), false).sort(function (a, b) { return a.order - b.order; }); }, [tabs]);
     var handleTabClick = function (path) {
         setSelectedPath(path);
@@ -12462,7 +12463,7 @@ var FilterTabs = function () {
     };
     if (sortedTabs.length <= 1)
         return null;
-    return (React.createElement("div", { className: "will-filter-bar-tabs", ref: tabsRef }, sortedTabs.map(function (tab) { return (React.createElement(TabButton, { key: tab.path, label: tab.label || t("tabs.".concat(tab.path.slice(1))), onClick: function () { return handleTabClick(tab.path); }, active: selectedPath === tab.path, mode: mode })); })));
+    return (React.createElement("div", { className: "will-filter-bar-tabs" }, sortedTabs.map(function (tab) { return (React.createElement(TabButton, { key: tab.path, label: tab.label || t("tabs.".concat(tab.path.slice(1))), onClick: function () { return handleTabClick(tab.path); }, active: selectedPath === tab.path, mode: mode })); })));
 };
 
 var css_248z$2 = "@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-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\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}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";