@idkwebsites/components 0.1.18 → 0.1.20

package/dist/index.d.cts

@@ -443,14 +443,14 @@ interface BookingWidgetProps$1 {
 declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps$1): react_jsx_runtime.JSX.Element;
 
 interface BookingWidgetProps {
-    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. @deprecated Use `mobileHeader` instead. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) */
+    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,6 +459,7 @@ interface BookingWidgetProps {
     /**
      * Link component for mobile nav. Defaults to a plain `<a>` tag.
      * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     * @deprecated Use `mobileHeader` instead.
      */
     linkComponent?: ComponentType<{
         href: string;
@@ -466,8 +467,14 @@ interface BookingWidgetProps {
         onClick?: () => void;
         children: ReactNode;
     }>;
+    /**
+     * Site's mobile header/navbar component. Rendered inside the widget on mobile,
+     * replacing the built-in hamburger menu. Pass your SiteHeader component here
+     * so the booking widget uses the same navigation design as the rest of the site.
+     */
+    mobileHeader?: ReactNode;
 }
-declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.d.ts

@@ -443,14 +443,14 @@ interface BookingWidgetProps$1 {
 declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps$1): react_jsx_runtime.JSX.Element;
 
 interface BookingWidgetProps {
-    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. @deprecated Use `mobileHeader` instead. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) */
+    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,6 +459,7 @@ interface BookingWidgetProps {
     /**
      * Link component for mobile nav. Defaults to a plain `<a>` tag.
      * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     * @deprecated Use `mobileHeader` instead.
      */
     linkComponent?: ComponentType<{
         href: string;
@@ -466,8 +467,14 @@ interface BookingWidgetProps {
         onClick?: () => void;
         children: ReactNode;
     }>;
+    /**
+     * Site's mobile header/navbar component. Rendered inside the widget on mobile,
+     * replacing the built-in hamburger menu. Pass your SiteHeader component here
+     * so the booking widget uses the same navigation design as the rest of the site.
+     */
+    mobileHeader?: ReactNode;
 }
-declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.js

@@ -1747,7 +1747,8 @@ function BookingWidgetPanel({
   closeIcon,
   categoryIcons,
   stepTitles,
-  linkComponent: LinkComp = DefaultLink
+  linkComponent: LinkComp = DefaultLink,
+  mobileHeader
 } = {}) {
   const widgetRef = useRef3(null);
   const formRef = useRef3(null);
@@ -1793,9 +1794,10 @@ function BookingWidgetPanel({
       }
     }
   }, [bw.isAvailabilityLoading, bw.selectedService?.id, bw.availabilityByDate, bw.selectedDate]);
+  const hasCategories = bw.categories.length >= 1;
   const hasMultipleCategories = bw.categories.length > 1;
   useEffect2(() => {
-    if (hasMultipleCategories && bw.categoryFilter === "all") {
+    if (hasCategories && bw.categoryFilter === "all") {
       bw.setCategoryFilter(bw.categories[0]);
     }
   }, [bw.categories.length]);
@@ -1811,7 +1813,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 }
@@ -1835,6 +1837,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();
@@ -1842,10 +1858,9 @@ function BookingWidgetPanel({
       }
       svcScrollbarRef.current = null;
     }
-    if (!el || typeof window !== "undefined" && window.matchMedia("(max-width: 1024px)").matches) return;
     svcScrollbarRef.current = Scrollbar.init(el, {
       damping: 0.08,
-      continuousScrolling: false,
+      continuousScrolling: true,
       alwaysShowTracks: false,
       plugins: {
         overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
@@ -2006,10 +2021,12 @@ function BookingWidgetPanel({
       svc.id
     );
   };
+  const useLegacyNav = !mobileHeader && navLinks.length > 0;
   return /* @__PURE__ */ jsxs5("div", { className: "bw", ref: widgetRef, children: [
+    mobileHeader && /* @__PURE__ */ jsx9("div", { className: "bw-mobile-header", children: mobileHeader }),
     /* @__PURE__ */ jsxs5("div", { className: "bw-topbar", children: [
       /* @__PURE__ */ jsx9("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx9("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
-      navLinks.length > 0 && /* @__PURE__ */ jsx9(
+      useLegacyNav && /* @__PURE__ */ jsx9(
         "button",
         {
           className: "bw-topbar-menu",
@@ -2019,7 +2036,7 @@ function BookingWidgetPanel({
         }
       )
     ] }),
-    navLinks.length > 0 && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
+    useLegacyNav && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
       motion.div,
       {
         className: "bw-nav-overlay",