@idkwebsites/components 0.1.18 → 0.1.20

package/dist/index.cjs

@@ -1782,7 +1782,8 @@ function BookingWidgetPanel({
   closeIcon,
   categoryIcons,
   stepTitles,
-  linkComponent: LinkComp = DefaultLink
+  linkComponent: LinkComp = DefaultLink,
+  mobileHeader
 } = {}) {
   const widgetRef = (0, import_react9.useRef)(null);
   const formRef = (0, import_react9.useRef)(null);
@@ -1828,9 +1829,10 @@ function BookingWidgetPanel({
       }
     }
   }, [bw.isAvailabilityLoading, bw.selectedService?.id, bw.availabilityByDate, bw.selectedDate]);
+  const hasCategories = bw.categories.length >= 1;
   const hasMultipleCategories = bw.categories.length > 1;
   (0, import_react9.useEffect)(() => {
-    if (hasMultipleCategories && bw.categoryFilter === "all") {
+    if (hasCategories && bw.categoryFilter === "all") {
       bw.setCategoryFilter(bw.categories[0]);
     }
   }, [bw.categories.length]);
@@ -1846,7 +1848,7 @@ function BookingWidgetPanel({
     const scrollbars = [];
     const opts = {
       damping: 0.08,
-      continuousScrolling: false,
+      continuousScrolling: true,
       alwaysShowTracks: false,
       plugins: {
         overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
@@ -1870,6 +1872,20 @@ function BookingWidgetPanel({
     };
   }, [isReady, mobileStep]);
   const initSvcScrollbar = (el) => {
+    if (!el || typeof window !== "undefined" && window.matchMedia("(max-width: 1024px)").matches) {
+      if (svcScrollbarRef.current) {
+        try {
+          svcScrollbarRef.current.destroy();
+        } catch {
+        }
+        svcScrollbarRef.current = null;
+      }
+      return;
+    }
+    if (svcScrollbarRef.current && svcScrollbarRef.current.containerEl === el) {
+      svcScrollbarRef.current.update();
+      return;
+    }
     if (svcScrollbarRef.current) {
       try {
         svcScrollbarRef.current.destroy();
@@ -1877,10 +1893,9 @@ function BookingWidgetPanel({
       }
       svcScrollbarRef.current = null;
     }
-    if (!el || typeof window !== "undefined" && window.matchMedia("(max-width: 1024px)").matches) return;
     svcScrollbarRef.current = import_smooth_scrollbar.default.init(el, {
       damping: 0.08,
-      continuousScrolling: false,
+      continuousScrolling: true,
       alwaysShowTracks: false,
       plugins: {
         overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
@@ -2041,10 +2056,12 @@ function BookingWidgetPanel({
       svc.id
     );
   };
+  const useLegacyNav = !mobileHeader && navLinks.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw", ref: widgetRef, children: [
+    mobileHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-mobile-header", children: mobileHeader }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-topbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
-      navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      useLegacyNav && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           className: "bw-topbar-menu",
@@ -2054,7 +2071,7 @@ function BookingWidgetPanel({
         }
       )
     ] }),
-    navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { children: navOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    useLegacyNav && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { children: navOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_framer_motion.motion.div,
       {
         className: "bw-nav-overlay",