@idkwebsites/components 0.1.21 → 0.1.22

package/dist/index.d.cts

@@ -443,14 +443,16 @@ 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. @deprecated Use `mobileHeader` instead. */
+    /** Optional mobile-only header content rendered above the widget topbar. */
+    mobileHeader?: ReactNode;
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
+    /** Custom icon for the mobile menu close button (default: lucide X) */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,7 +461,6 @@ 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;
@@ -467,14 +468,8 @@ 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, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ mobileHeader, navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.d.ts

@@ -443,14 +443,16 @@ 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. @deprecated Use `mobileHeader` instead. */
+    /** Optional mobile-only header content rendered above the widget topbar. */
+    mobileHeader?: ReactNode;
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
     navLinks?: {
         label: string;
         href: string;
     }[];
-    /** Custom icon for the mobile menu open button (default: lucide Menu) @deprecated Use `mobileHeader` instead. */
+    /** Custom icon for the mobile menu open button (default: lucide Menu) */
     menuIcon?: ReactNode;
-    /** Custom icon for the mobile menu close button (default: lucide X) @deprecated Use `mobileHeader` instead. */
+    /** Custom icon for the mobile menu close button (default: lucide X) */
     closeIcon?: ReactNode;
     /** Override the category → icon mapping (keyword → React component) */
     categoryIcons?: Record<string, typeof Scissors>;
@@ -459,7 +461,6 @@ 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;
@@ -467,14 +468,8 @@ 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, mobileHeader, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidgetPanel({ mobileHeader, navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;

package/dist/index.js

@@ -1742,13 +1742,13 @@ function DefaultLink({ href, className, onClick, children }) {
   return /* @__PURE__ */ jsx9("a", { href, className, onClick, children });
 }
 function BookingWidgetPanel({
+  mobileHeader,
   navLinks = [],
   menuIcon,
   closeIcon,
   categoryIcons,
   stepTitles,
-  linkComponent: LinkComp = DefaultLink,
-  mobileHeader
+  linkComponent: LinkComp = DefaultLink
 } = {}) {
   const widgetRef = useRef3(null);
   const formRef = useRef3(null);
@@ -1794,10 +1794,9 @@ 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 (hasCategories && bw.categoryFilter === "all") {
+    if (bw.categories.length >= 1 && bw.categoryFilter === "all") {
       bw.setCategoryFilter(bw.categories[0]);
     }
   }, [bw.categories.length]);
@@ -1813,7 +1812,7 @@ function BookingWidgetPanel({
     const scrollbars = [];
     const opts = {
       damping: 0.08,
-      continuousScrolling: true,
+      continuousScrolling: false,
       alwaysShowTracks: false,
       plugins: {
         overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
@@ -1837,20 +1836,6 @@ 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();
@@ -1858,9 +1843,10 @@ 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: true,
+      continuousScrolling: false,
       alwaysShowTracks: false,
       plugins: {
         overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
@@ -2021,12 +2007,11 @@ 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 }),
+    mobileHeader ? /* @__PURE__ */ jsx9("div", { className: "bw-mobile-header", children: mobileHeader }) : null,
     /* @__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)) }),
-      useLegacyNav && /* @__PURE__ */ jsx9(
+      navLinks.length > 0 && /* @__PURE__ */ jsx9(
         "button",
         {
           className: "bw-topbar-menu",
@@ -2036,7 +2021,7 @@ function BookingWidgetPanel({
         }
       )
     ] }),
-    useLegacyNav && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
+    navLinks.length > 0 && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
       motion.div,
       {
         className: "bw-nav-overlay",
@@ -2215,8 +2200,7 @@ function BookingWidgetPanel({
                         const wrap = el.querySelector(".bw-svc-scroll-wrap");
                         if (wrap) requestAnimationFrame(() => initSvcScrollbar(wrap));
                       } else {
-                        const wrap = el.querySelector(".bw-svc-scroll-wrap");
-                        if (svcScrollbarRef.current && wrap && svcScrollbarRef.current.containerEl === wrap) {
+                        if (svcScrollbarRef.current) {
                           svcScrollbarRef.current.scrollTo(0, 0, 0);
                           try {
                             svcScrollbarRef.current.destroy();