@idkwebsites/components 0.1.14 → 0.1.15

package/dist/index.cjs

@@ -945,6 +945,35 @@ function BookingWidget({
     if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
     return new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
   }, [maxAdvanceMonths, todayDate]);
+  const monthOptionCount = (0, import_react7.useMemo)(() => {
+    if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return 12;
+    return maxAdvanceMonths;
+  }, [maxAdvanceMonths]);
+  const monthOptions = (0, import_react7.useMemo)(() => {
+    return Array.from({ length: monthOptionCount }, (_, index) => {
+      const date = new Date(todayDate.getFullYear(), todayDate.getMonth() + index, 1);
+      return {
+        value: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`,
+        label: new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(date),
+        date
+      };
+    });
+  }, [monthOptionCount, todayDate]);
+  const calendarDays = (0, import_react7.useMemo)(() => getMonthDays(calendarMonth), [getMonthDays, calendarMonth]);
+  const availabilityByDate = (0, import_react7.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    (availability.data?.dates || []).forEach((entry) => {
+      map.set(entry.date, entry);
+    });
+    return map;
+  }, [availability.data]);
+  const hasBlockedInCalendarView = (0, import_react7.useMemo)(() => {
+    return calendarDays.some((day) => {
+      const entry = availabilityByDate.get(day.date);
+      if (!entry) return false;
+      return !entry.slots.some((slot) => slot.available);
+    });
+  }, [calendarDays, availabilityByDate]);
   const handlePrevDates = () => {
     if (availabilityStartDate <= todayString) return;
     setAvailabilityStartDate((prev) => addDays(prev, -availabilityDays));
@@ -984,6 +1013,15 @@ function BookingWidget({
     setSelectedEndTime(null);
     setBookingError(null);
   };
+  const handleMonthSelect = (value) => {
+    const [year, month] = value.split("-").map(Number);
+    if (!year || !month) return;
+    setCalendarMonth(new Date(year, month - 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
   (0, import_react7.useEffect)(() => {
     if (step !== "time") return;
     if (!availability.data?.dates?.length) return;
@@ -1316,7 +1354,39 @@ function BookingWidget({
                   calendarVariant === "compact" ? "idk-calendar--compact" : ""
                 ].filter(Boolean).join(" "),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__header", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__header", children: calendarVariant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__header idk-calendar__header--compact", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-calendar__nav-btn",
+                        onClick: handlePrevMonth,
+                        disabled: calendarMonth <= getMonthStart(todayDate),
+                        "aria-label": "Previous month",
+                        children: "<"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "select",
+                      {
+                        className: "idk-calendar__month-select",
+                        value: `${calendarMonth.getFullYear()}-${String(calendarMonth.getMonth() + 1).padStart(2, "0")}`,
+                        onChange: (event) => handleMonthSelect(event.target.value),
+                        children: monthOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: option.value, children: option.label }, option.value))
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-calendar__nav-btn",
+                        onClick: handleNextMonth,
+                        disabled: Boolean(maxAdvanceMonthStart && calendarMonth >= maxAdvanceMonthStart),
+                        "aria-label": "Next month",
+                        children: ">"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
@@ -1324,7 +1394,7 @@ function BookingWidget({
                         className: "idk-button idk-button--ghost",
                         onClick: handlePrevMonth,
                         disabled: calendarMonth <= getMonthStart(todayDate),
-                        children: "Previous"
+                        children: "Prev"
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", {
@@ -1341,12 +1411,10 @@ function BookingWidget({
                         children: "Next"
                       }
                     )
-                  ] }),
+                  ] }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }, label)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__grid", children: getMonthDays(calendarMonth).map((day) => {
-                    const entry = availability.data?.dates?.find(
-                      (item) => item.date === day.date
-                    );
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__grid", children: calendarDays.map((day) => {
+                    const entry = availabilityByDate.get(day.date);
                     const hasAvailable = entry?.slots?.some((slot) => slot.available) ?? false;
                     const dateValue = parseDateOnly(day.date);
                     const isPast = dateValue ? dateValue < todayDate : false;
@@ -1377,12 +1445,16 @@ function BookingWidget({
                         },
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: day.date.split("-")[2] }),
-                          showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "Full" : "Fully booked" }) : null
+                          showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "\u2022" : "Fully booked" }) : null
                         ]
                       },
                       day.date
                     );
-                  }) })
+                  }) }),
+                  showFullyBookedLabel && calendarVariant === "compact" && hasBlockedInCalendarView ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__legend", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__legend-dot", children: "\u2022" }),
+                    " Fully booked"
+                  ] }) : null
                 ]
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [