@marco.colia/react-fast-scheduler 2.1.0 → 2.1.1

package/dist/index.js

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { format } from 'date-fns';
-import * as React2 from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { format, startOfMonth, startOfWeek, endOfWeek, endOfMonth, addDays, addMonths, isSameDay, isToday, isSameMonth } from 'date-fns';
+import * as React5 from 'react';
 
 // src/components/defaultRenderAppointment/index.tsx
 function defaultRenderAppointment({
@@ -33,6 +33,206 @@ function defaultRenderAppointment({
   ] });
 }
 
+// src/lib/cn.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+var variantClasses = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  outline: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted"
+};
+var sizeClasses = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 px-3 text-xs",
+  icon: "h-8 w-8"
+};
+var Button = React5.forwardRef(function Button2({ className, variant = "default", size = "default", type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Calendar({
+  selected,
+  onSelect
+}) {
+  const [month, setMonth] = React5.useState(selected ?? /* @__PURE__ */ new Date());
+  React5.useEffect(() => {
+    if (selected) {
+      setMonth(selected);
+    }
+  }, [selected]);
+  const monthStart = startOfMonth(month);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const calendarEnd = endOfWeek(endOfMonth(month), { weekStartsOn: 1 });
+  const days = [];
+  for (let day = calendarStart; day <= calendarEnd; day = addDays(day, 1)) {
+    days.push(day);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 rounded-md bg-popover", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous month", onClick: () => setMonth(addMonths(month, -1)), children: "<" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: format(month, "MMMM yyyy") }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next month", onClick: () => setMonth(addMonths(month, 1)), children: ">" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((label) => /* @__PURE__ */ jsx("div", { className: "py-1", children: label }, label)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day) => {
+      const isSelected = selected ? isSameDay(day, selected) : false;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: isSelected ? "default" : "ghost",
+          size: "icon",
+          className: cn(
+            "text-xs",
+            !isSameMonth(day, month) && "text-muted-foreground opacity-60",
+            isToday(day) && !isSelected && "border border-border"
+          ),
+          onClick: () => onSelect?.(day),
+          children: format(day, "d")
+        },
+        day.toISOString()
+      );
+    }) })
+  ] });
+}
+var PopoverContext = React5.createContext(null);
+function usePopoverContext() {
+  const context = React5.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover.");
+  }
+  return context;
+}
+function Popover({
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(false);
+  const triggerRef = React5.useRef(null);
+  const contentRef = React5.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React5.useCallback(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(open) : value;
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(nextValue);
+      }
+      onOpenChange?.(nextValue);
+    },
+    [controlledOpen, onOpenChange, open]
+  );
+  React5.useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || contentRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, contentRef }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-flex", children }) });
+}
+function PopoverTrigger({
+  children,
+  asChild = false
+}) {
+  const { open, setOpen, triggerRef } = usePopoverContext();
+  if (asChild && React5.isValidElement(children)) {
+    const child = children;
+    return React5.cloneElement(child, {
+      ref: triggerRef,
+      "aria-expanded": open,
+      onClick: (event) => {
+        child.props.onClick?.(event);
+        setOpen((current) => !current);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      "aria-expanded": open,
+      onClick: () => setOpen((current) => !current),
+      children
+    }
+  );
+}
+function PopoverContent({
+  children,
+  className,
+  align = "start"
+}) {
+  const { open, contentRef } = usePopoverContext();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: cn(
+        "absolute top-full z-50 mt-2 min-w-72 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md outline-none",
+        align === "start" && "left-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        align === "end" && "right-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "min-w-40 justify-start text-left font-normal", children: format(selectedDate, "PPP") }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-2", align: "center", children: /* @__PURE__ */ jsx(Calendar, { selected: selectedDate, onSelect: onSelectedDateChange }) })
+  ] });
+}
+function defaultRenderResourceHeader({ resource }) {
+  return /* @__PURE__ */ jsx("strong", { children: resource.label });
+}
+function defaultRenderToolbar({
+  goToPreviousDay,
+  goToNextDay,
+  defaultDatePicker,
+  prevButtonLabel = "Prev",
+  nextButtonLabel = "Next"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rfs-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-card p-1 shadow-xs", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToPreviousDay, children: prevButtonLabel }),
+    defaultDatePicker,
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToNextDay, children: nextButtonLabel })
+  ] }) });
+}
+
 // src/components/constants.ts
 var STEP_MIN = 15;
 var MIN_EVENT_MIN = 15;
@@ -41,8 +241,6 @@ var GUTTER_W = 72;
 var TOP_PAD = 12;
 var BOTTOM_PAD = 24;
 var RESOURCE_MIN_W = 420;
-
-// src/utils/scheduler-core.utils.ts
 function isNameLike(resource) {
   if (!resource || typeof resource !== "object") {
     return false;
@@ -50,22 +248,6 @@ function isNameLike(resource) {
   const maybe = resource;
   return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
 }
-function toInputDateValue(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-function fromInputDateValue(value) {
-  const [yearRaw, monthRaw, dayRaw] = value.split("-");
-  const year = Number(yearRaw);
-  const month = Number(monthRaw);
-  const day = Number(dayRaw);
-  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
-    return null;
-  }
-  return new Date(year, month - 1, day);
-}
 var DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP = {
   slate: "bg-slate-100 dark:bg-slate-900/40",
   gray: "bg-gray-100 dark:bg-gray-900/40",
@@ -176,26 +358,6 @@ function layoutOverlaps(blocks) {
   }
   return output;
 }
-function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "date",
-      value: toInputDateValue(selectedDate),
-      onChange: (event) => {
-        const nextDate = fromInputDateValue(event.target.value);
-        if (nextDate) {
-          onSelectedDateChange(nextDate);
-        }
-      },
-      className: "h-7 rounded-md border border-border bg-card px-2 text-xs text-foreground",
-      "aria-label": "Select date"
-    }
-  );
-}
-function defaultRenderResourceHeader({ resource }) {
-  return /* @__PURE__ */ jsx("strong", { children: resource.label });
-}
 
 // src/utils/scheduler-data.utils.ts
 function buildResourceMap({
@@ -299,13 +461,13 @@ function useSchedulerBaseData({
   resources,
   selectedDate
 }) {
-  const dayStartAbs = React2.useMemo(() => parseHHMM(dayStart), [dayStart]);
-  const dayEndAbs = React2.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
-  const dayMinutes = React2.useMemo(() => Math.max(0, dayEndAbs - dayStartAbs), [dayEndAbs, dayStartAbs]);
-  const gridHeight = React2.useMemo(() => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD, [dayMinutes]);
-  const gridMinWidth = React2.useMemo(() => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W, [resources.length]);
-  const selectedISO = React2.useMemo(() => dayISO(selectedDate), [selectedDate]);
-  const renderAppts = React2.useMemo(() => {
+  const dayStartAbs = React5.useMemo(() => parseHHMM(dayStart), [dayStart]);
+  const dayEndAbs = React5.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
+  const dayMinutes = React5.useMemo(() => Math.max(0, dayEndAbs - dayStartAbs), [dayEndAbs, dayStartAbs]);
+  const gridHeight = React5.useMemo(() => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD, [dayMinutes]);
+  const gridMinWidth = React5.useMemo(() => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W, [resources.length]);
+  const selectedISO = React5.useMemo(() => dayISO(selectedDate), [selectedDate]);
+  const renderAppts = React5.useMemo(() => {
     return normalizeAppointments({
       adapter,
       appointments,
@@ -314,7 +476,7 @@ function useSchedulerBaseData({
       selectedISO
     });
   }, [adapter, appointments, dayMinutes, dayStartAbs, selectedISO]);
-  const appointmentMap = React2.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
+  const appointmentMap = React5.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
   return {
     appointmentMap,
     dayEndAbs,
@@ -335,10 +497,10 @@ function useSchedulerInteractions({
   resources,
   selectedDate
 }) {
-  const [drag, setDrag] = React2.useState({ kind: "none" });
-  const colRefs = React2.useRef({});
-  const suppressClickRef = React2.useRef(false);
-  const pointerToMin = React2.useCallback(
+  const [drag, setDrag] = React5.useState({ kind: "none" });
+  const colRefs = React5.useRef({});
+  const suppressClickRef = React5.useRef(false);
+  const pointerToMin = React5.useCallback(
     (resourceId, clientY) => {
       const col = colRefs.current[String(resourceId)];
       if (!col) {
@@ -349,7 +511,7 @@ function useSchedulerInteractions({
     },
     [dayMinutes]
   );
-  const pointerToResourceId = React2.useCallback(
+  const pointerToResourceId = React5.useCallback(
     (clientX, fallbackResourceId) => {
       for (const resource of resources) {
         const col = colRefs.current[String(resource.id)];
@@ -365,14 +527,14 @@ function useSchedulerInteractions({
     },
     [resources]
   );
-  const hasOverlap = React2.useCallback(
+  const hasOverlap = React5.useCallback(
     (appointmentId, resourceId, startMin, endMin) => {
       const events = renderAppts.filter((appointment) => appointment.resourceId === resourceId && appointment.id !== appointmentId);
       return events.some((appointment) => overlaps(appointment, { startMin, endMin }));
     },
     [renderAppts]
   );
-  const persistDrag = React2.useCallback(
+  const persistDrag = React5.useCallback(
     async (state) => {
       const target = appointmentMap.get(state.appointmentId);
       if (!target) {
@@ -410,7 +572,7 @@ function useSchedulerInteractions({
     },
     [appointmentMap, dayStartAbs, hasOverlap, onAppointmentChange, onPersistMoveResize, selectedDate]
   );
-  const onApptPointerDown = React2.useCallback(
+  const onApptPointerDown = React5.useCallback(
     (event, appointment) => {
       if (event.button !== 0) {
         return;
@@ -431,7 +593,7 @@ function useSchedulerInteractions({
     },
     [pointerToMin]
   );
-  const onResizePointerDown = React2.useCallback((event, appointment) => {
+  const onResizePointerDown = React5.useCallback((event, appointment) => {
     if (event.button !== 0) {
       return;
     }
@@ -446,7 +608,7 @@ function useSchedulerInteractions({
       endMin: appointment.endMin
     });
   }, []);
-  const onGlobalPointerMove = React2.useCallback(
+  const onGlobalPointerMove = React5.useCallback(
     (event) => {
       if (drag.kind === "none") {
         return;
@@ -480,7 +642,7 @@ function useSchedulerInteractions({
     },
     [dayMinutes, drag, pointerToMin, pointerToResourceId]
   );
-  const onGlobalPointerUp = React2.useCallback(() => {
+  const onGlobalPointerUp = React5.useCallback(() => {
     if (drag.kind === "none") {
       return;
     }
@@ -512,13 +674,13 @@ function useSchedulerPresentationData({
   resources,
   selectedDate
 }) {
-  const effectiveAppts = React2.useMemo(() => {
+  const effectiveAppts = React5.useMemo(() => {
     return applyDragToAppointments(renderAppts, drag, selectedDate, dayStartAbs);
   }, [dayStartAbs, drag, renderAppts, selectedDate]);
-  const laidOutByResource = React2.useMemo(() => {
+  const laidOutByResource = React5.useMemo(() => {
     return buildLaidOutByResource(resources, effectiveAppts);
   }, [effectiveAppts, resources]);
-  const appointmentBgByResource = React2.useMemo(() => {
+  const appointmentBgByResource = React5.useMemo(() => {
     if (!getResourceAppointmentBackground) {
       return /* @__PURE__ */ new Map();
     }
@@ -529,7 +691,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [getResourceAppointmentBackground, resources]);
-  const appointmentColorTokenClassByResource = React2.useMemo(() => {
+  const appointmentColorTokenClassByResource = React5.useMemo(() => {
     if (!getResourceAppointmentColorToken) {
       return /* @__PURE__ */ new Map();
     }
@@ -547,7 +709,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
-  const appointmentAppearanceByResource = React2.useMemo(() => {
+  const appointmentAppearanceByResource = React5.useMemo(() => {
     return buildAppointmentAppearanceByResource(
       resources,
       resourceAppointmentClassMap,
@@ -584,6 +746,7 @@ function Scheduler({
   getResourceAppointmentColorToken,
   appointmentColorTokenClassMap,
   getResourceAppointmentBackground,
+  renderToolbar,
   renderDatePicker,
   prevButtonLabel = "Prev",
   nextButtonLabel = "Next",
@@ -640,6 +803,22 @@ function Scheduler({
     selectedDate
   });
   const defaultResourceHeaderRenderer = (resource) => defaultRenderResourceHeader({ resource });
+  const goToPreviousDay = () => onSelectedDateChange(shiftDays(selectedDate, -1));
+  const goToNextDay = () => onSelectedDateChange(shiftDays(selectedDate, 1));
+  const defaultDatePicker = (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange });
+  const toolbar = renderToolbar ? renderToolbar({
+    selectedDate,
+    onSelectedDateChange,
+    goToPreviousDay,
+    goToNextDay,
+    defaultDatePicker
+  }) : defaultRenderToolbar({
+    goToPreviousDay,
+    goToNextDay,
+    defaultDatePicker,
+    prevButtonLabel,
+    nextButtonLabel
+  });
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -648,27 +827,7 @@ function Scheduler({
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "rfs-toolbar", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)),
-              children: prevButtonLabel
-            }
-          ),
-          (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)),
-              children: nextButtonLabel
-            }
-          )
-        ] }),
+        toolbar,
         /* @__PURE__ */ jsx("div", { className: "rfs-shell border-border bg-card", children: /* @__PURE__ */ jsxs("div", { style: { minWidth: gridMinWidth }, children: [
           /* @__PURE__ */ jsxs("div", { className: "rfs-header border-border bg-card", children: [
             /* @__PURE__ */ jsx("div", { className: "rfs-gutter border-border", style: { width: GUTTER_W } }),