willba-component-library 0.3.24 → 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.24/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;
@@ -12251,7 +12254,7 @@ var FilterTabs = function () {
 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";
 styleInject(css_248z$2);
 
-var css_248z$1 = ".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/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
+var css_248z$1 = ".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}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
 styleInject(css_248z$1);
 
 var FilterBar = function (_a) {