@dxos/react-ui-calendar 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/dist/lib/browser/index.mjs

@@ -1,27 +1,17 @@
 // src/components/Calendar/Calendar.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
-import { addDays, differenceInWeeks, format, startOfWeek } from "date-fns";
+import { addDays, format, startOfDay, startOfWeek } from "date-fns";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { List } from "react-virtualized";
 import { Event } from "@dxos/async";
-import { Icon, IconButton, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
-
-// src/translations.ts
-var translationKey = "react-ui-calendar";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "today button": "Today"
-      }
-    }
-  }
-];
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { composable, composableProps } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 
 // src/components/Calendar/util.ts
+import { differenceInCalendarDays } from "date-fns";
 var getDate = (start2, weekNumber, dayOfWeek, weekStartsOn) => {
   const result = new Date(start2);
   const startDayOfWeek = start2.getDay();
@@ -29,6 +19,13 @@ var getDate = (start2, weekNumber, dayOfWeek, weekStartsOn) => {
   result.setDate(start2.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);
   return result;
 };
+var getRowIndex = (start2, date, weekStartsOn) => {
+  const startDayOfWeek = start2.getDay();
+  const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn;
+  const row0Start = new Date(start2);
+  row0Start.setDate(start2.getDate() - adjustedStartDay);
+  return Math.floor(differenceInCalendarDays(date, row0Start) / 7);
+};
 var isSameDay = (date1, date2) => {
   return !!date2 && date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
 };
@@ -38,238 +35,512 @@ var maxRows = 50 * 100;
 var start = /* @__PURE__ */ new Date("1970-01-01");
 var size = 48;
 var defaultWidth = 7 * size;
-var [CalendarContextProvider, useCalendarContext] = createContext("Calendar");
-var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    const event = useMemo(() => new Event(), []);
-    const [selected, setSelected] = useState();
-    const [index, setIndex] = useState();
-    useImperativeHandle(forwardedRef, () => ({
-      scrollTo: (date) => {
-        event.emit({
-          type: "scroll",
-          date
-        });
-      }
-    }), [
-      event
-    ]);
-    return /* @__PURE__ */ React.createElement(CalendarContextProvider, {
-      weekStartsOn,
-      event,
-      index,
-      setIndex,
-      selected,
-      setSelected
-    }, children);
-  } finally {
-    _effect.f();
+var EDGE_SCROLL_ZONE = 32;
+var EDGE_SCROLL_MAX_SPEED = 12;
+var makeRange = (a, b) => {
+  const dayA = startOfDay(a);
+  const dayB = startOfDay(b);
+  return dayA <= dayB ? {
+    from: dayA,
+    to: dayB
+  } : {
+    from: dayB,
+    to: dayA
+  };
+};
+var isInRange = (date, range) => {
+  if (!range) {
+    return false;
   }
-});
-var CalendarViewport = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("flex flex-col items-center overflow-hidden bg-inputSurface", classNames)
-    }, children);
-  } finally {
-    _effect.f();
+  const day = startOfDay(date).getTime();
+  return day >= range.from.getTime() && day <= range.to.getTime();
+};
+var cellDate = (el) => {
+  let current = el;
+  while (current && current !== document.body) {
+    const iso = current.getAttribute?.("data-date");
+    if (iso) {
+      return new Date(iso);
+    }
+    current = current.parentElement;
   }
+  return void 0;
 };
-CalendarViewport.displayName = "CalendarContent";
-var CalendarToolbar = ({ classNames }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);
-    const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
-      index,
-      weekStartsOn
-    ]);
-    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-    const handleToday = useCallback(() => {
+var [CalendarContextProvider, useCalendarContext] = createContext("Calendar");
+var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, forwardedRef) => {
+  const event = useMemo(() => new Event(), []);
+  const [selected, setSelected] = useState();
+  const [index, setIndex] = useState();
+  const [range, setRange] = useState();
+  const [pendingRange, setPendingRange] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    scrollTo: (date) => {
       event.emit({
         type: "scroll",
-        date: today
+        date
       });
-    }, [
-      event,
-      start,
-      today
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
+    }
+  }), [
+    event
+  ]);
+  return /* @__PURE__ */ React.createElement(CalendarContextProvider, {
+    weekStartsOn,
+    event,
+    index,
+    setIndex,
+    selected,
+    setSelected,
+    range,
+    setRange,
+    pendingRange,
+    setPendingRange
+  }, children);
+});
+var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
+var CalendarToolbar = composable(({ classNames, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
+  const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
+    index,
+    weekStartsOn
+  ]);
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const handleToday = useCallback(() => {
+    event.emit({
+      type: "scroll",
+      date: today
+    });
+  }, [
+    event,
+    start,
+    today
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...composableProps(props, {
       role: "none",
-      className: mx("shink-0 is-full grid grid-cols-3 items-center bg-barSurface", classNames),
-      style: {
-        width: defaultWidth
-      }
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "flex justify-start"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
-      variant: "ghost",
-      size: 5,
-      icon: "ph--calendar--regular",
-      iconOnly: true,
-      classNames: "aspect-square",
-      label: t("today button"),
-      onClick: handleToday
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: "flex justify-center p-2 text-description"
-    }, format(selected ?? top, "MMMM")), /* @__PURE__ */ React.createElement("div", {
-      className: "flex justify-end p-2 text-description"
-    }, (selected ?? top).getFullYear()));
-  } finally {
-    _effect.f();
-  }
-};
-CalendarToolbar.displayName = "CalendarHeader";
-var CalendarGrid = ({ classNames, rows, onSelect }) => {
-  var _effect = _useSignals();
-  try {
-    const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);
-    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
-    const maxHeight = rows ? rows * size : void 0;
-    const listRef = useRef(null);
-    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-    const [initialized, setInitialized] = useState(false);
-    useEffect(() => {
-      const index = differenceInWeeks(today, start);
-      listRef.current?.scrollToRow(index);
-    }, [
-      initialized,
-      start,
-      today
-    ]);
-    useEffect(() => {
-      return event.on((event2) => {
-        switch (event2.type) {
-          case "scroll": {
-            const index = differenceInWeeks(event2.date, start);
-            listRef.current?.scrollToRow(index);
-            break;
-          }
+      classNames: [
+        "shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface",
+        classNames
+      ]
+    }),
+    ref: forwardedRef,
+    style: {
+      width: defaultWidth
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-start"
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--calendar--regular",
+    iconOnly: true,
+    classNames: "aspect-square",
+    label: t("today.button"),
+    onClick: handleToday
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-center p-2 text-description"
+  }, format(selected ?? top, "MMMM")), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-end p-2 text-description"
+  }, (selected ?? top).getFullYear()));
+});
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
+var CALENDAR_GRID_NAME = "CalendarGrid";
+var CalendarGrid = composable(({ classNames, rows, dates = [], onSelect, onSelectRange, ...props }, forwardedRef) => {
+  const { weekStartsOn, event, setIndex, selected, setSelected, range, setRange, pendingRange, setPendingRange } = useCalendarContext(CALENDAR_GRID_NAME);
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
+  const maxHeight = rows ? rows * size : void 0;
+  const listRef = useRef(null);
+  const gridRef = useRef(null);
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [
+    dates
+  ]);
+  const hasDate = useCallback((date) => dateSet.has(startOfDay(date).toISOString()), [
+    dateSet
+  ]);
+  const [initialized, setInitialized] = useState(false);
+  useEffect(() => {
+    const index = getRowIndex(start, today, weekStartsOn);
+    listRef.current?.scrollToRow(index);
+  }, [
+    initialized,
+    start,
+    today,
+    weekStartsOn
+  ]);
+  useEffect(() => {
+    return event.on((event2) => {
+      switch (event2.type) {
+        case "scroll": {
+          const index = getRowIndex(start, event2.date, weekStartsOn);
+          listRef.current?.scrollToRow(index);
+          break;
         }
-      });
-    }, [
-      event
-    ]);
-    const days = useMemo(() => {
-      const weekStart = startOfWeek(/* @__PURE__ */ new Date(), {
-        weekStartsOn
-      });
-      return Array.from({
-        length: 7
-      }, (_, i) => {
-        const day = addDays(weekStart, i);
-        return format(day, "EEE");
-      });
-    }, []);
-    const getNumAppointments = useCallback((_date) => {
-      return 0;
-    }, []);
-    const handleDaySelect = useCallback((date) => {
-      setSelected((current) => isSameDay(date, current) ? void 0 : date);
+      }
+    });
+  }, [
+    event
+  ]);
+  const days = useMemo(() => {
+    const weekStart = startOfWeek(/* @__PURE__ */ new Date(), {
+      weekStartsOn
+    });
+    return Array.from({
+      length: 7
+    }, (_, i) => {
+      const day = addDays(weekStart, i);
+      return format(day, "EEE");
+    });
+  }, []);
+  const anchorRef = useRef(void 0);
+  const focusRef = useRef(void 0);
+  const draggingRef = useRef(false);
+  const pointerXRef = useRef(0);
+  const pointerYRef = useRef(0);
+  const scrollTopRef = useRef(0);
+  const scrollRafRef = useRef(void 0);
+  const scrollIntoView = useCallback((date) => {
+    const targetRow = getRowIndex(start, date, weekStartsOn);
+    const visibleHeight = maxHeight ?? height;
+    if (!visibleHeight) {
+      return;
+    }
+    const firstVisibleRow = Math.floor(scrollTopRef.current / size);
+    const lastVisibleRow = firstVisibleRow + Math.floor(visibleHeight / size) - 1;
+    if (targetRow < firstVisibleRow) {
+      listRef.current?.scrollToRow(targetRow);
+    } else if (targetRow > lastVisibleRow) {
+      listRef.current?.scrollToPosition(Math.max(0, (targetRow + 1) * size - Math.floor(visibleHeight / size) * size));
+    }
+  }, [
+    height,
+    maxHeight,
+    weekStartsOn
+  ]);
+  const updateRangeFromAnchor = useCallback((focus, fireRange = false) => {
+    const anchor = anchorRef.current;
+    if (!anchor) {
+      return;
+    }
+    focusRef.current = focus;
+    if (isSameDay(anchor, focus)) {
+      setRange(void 0);
+      setSelected(anchor);
+    } else {
+      setSelected(void 0);
+      const committed = makeRange(anchor, focus);
+      setRange(committed);
+      if (fireRange) {
+        onSelectRange?.({
+          range: committed
+        });
+      }
+    }
+  }, [
+    onSelectRange,
+    setRange,
+    setSelected
+  ]);
+  const prevSelectedRef = useRef(void 0);
+  const handleDayPointerDown = useCallback((date, ev) => {
+    ev.preventDefault();
+    prevSelectedRef.current = selected;
+    anchorRef.current = date;
+    focusRef.current = date;
+    draggingRef.current = true;
+    setRange(void 0);
+    setPendingRange(void 0);
+    setSelected(date);
+    gridRef.current?.focus({
+      preventScroll: true
+    });
+  }, [
+    selected,
+    setPendingRange,
+    setRange,
+    setSelected
+  ]);
+  const handleDayPointerEnter = useCallback((date) => {
+    if (!draggingRef.current) {
+      return;
+    }
+    const anchor = anchorRef.current;
+    if (!anchor) {
+      return;
+    }
+    focusRef.current = date;
+    setSelected(void 0);
+    setPendingRange(makeRange(anchor, date));
+  }, [
+    setPendingRange,
+    setSelected
+  ]);
+  const handleDayPointerUp = useCallback((date) => {
+    const anchor = anchorRef.current;
+    const wasDragging = draggingRef.current;
+    draggingRef.current = false;
+    setPendingRange(void 0);
+    if (!wasDragging || !anchor) {
+      return;
+    }
+    focusRef.current = date;
+    if (isSameDay(anchor, date)) {
+      if (prevSelectedRef.current && isSameDay(prevSelectedRef.current, date)) {
+        setSelected(void 0);
+        anchorRef.current = void 0;
+        focusRef.current = void 0;
+        return;
+      }
+      setSelected(anchor);
       onSelect?.({
         date
       });
-    }, [
-      onSelect
-    ]);
-    const handleScroll = useCallback((info) => {
-      setIndex(Math.round(info.scrollTop / size));
-    }, []);
-    const rowRenderer = useCallback(({ key, index, style }) => {
-      const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modalSurface";
-      return /* @__PURE__ */ React.createElement("div", {
-        key,
-        role: "none",
-        style,
-        className: "is-full grid grid-cols-[1fr_max-content_1fr] snap-center"
-      }, /* @__PURE__ */ React.createElement("div", {
-        role: "none",
-        className: mx(getBgColor(getDate(start, index, 0, weekStartsOn)))
-      }), /* @__PURE__ */ React.createElement("div", {
-        role: "none",
-        className: "grid grid-cols-7",
-        style: {
-          gridTemplateColumns: `repeat(7, ${size}px)`
+      return;
+    }
+    const committed = makeRange(anchor, date);
+    setRange(committed);
+    onSelectRange?.({
+      range: committed
+    });
+  }, [
+    onSelect,
+    onSelectRange,
+    setPendingRange,
+    setRange,
+    setSelected
+  ]);
+  useEffect(() => {
+    const cancel = () => {
+      if (draggingRef.current) {
+        draggingRef.current = false;
+        setPendingRange(void 0);
+      }
+    };
+    window.addEventListener("pointerup", cancel);
+    window.addEventListener("pointercancel", cancel);
+    return () => {
+      window.removeEventListener("pointerup", cancel);
+      window.removeEventListener("pointercancel", cancel);
+    };
+  }, [
+    setPendingRange
+  ]);
+  const tickEdgeScroll = useCallback(() => {
+    scrollRafRef.current = void 0;
+    if (!draggingRef.current) {
+      return;
+    }
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    const y = pointerYRef.current;
+    let delta = 0;
+    if (y < rect.top + EDGE_SCROLL_ZONE) {
+      delta = -EDGE_SCROLL_MAX_SPEED * Math.min(1, Math.max(0, (rect.top + EDGE_SCROLL_ZONE - y) / EDGE_SCROLL_ZONE));
+    } else if (y > rect.bottom - EDGE_SCROLL_ZONE) {
+      delta = EDGE_SCROLL_MAX_SPEED * Math.min(1, Math.max(0, (y - (rect.bottom - EDGE_SCROLL_ZONE)) / EDGE_SCROLL_ZONE));
+    }
+    if (delta !== 0) {
+      const newScroll = Math.max(0, scrollTopRef.current + delta);
+      listRef.current?.scrollToPosition(newScroll);
+      const date = cellDate(document.elementFromPoint(pointerXRef.current, y));
+      const anchor = anchorRef.current;
+      if (date && anchor) {
+        focusRef.current = date;
+        if (isSameDay(anchor, date)) {
+          setPendingRange(void 0);
+          setSelected(anchor);
+        } else {
+          setSelected(void 0);
+          setPendingRange(makeRange(anchor, date));
         }
-      }, Array.from({
-        length: 7
-      }).map((_, i) => {
-        const date = getDate(start, index, i, weekStartsOn);
-        const num = getNumAppointments(date);
-        const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : void 0;
-        return /* @__PURE__ */ React.createElement("div", {
-          key: i,
-          role: "none",
-          className: mx("relative flex justify-center items-center cursor-pointer", getBgColor(date)),
-          onClick: () => handleDaySelect(date)
-        }, /* @__PURE__ */ React.createElement("span", {
-          className: "text-description"
-        }, date.getDate()), !border && date.getDate() === 1 && /* @__PURE__ */ React.createElement("span", {
-          className: "absolute top-0 text-xs text-description"
-        }, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
-          role: "none",
-          className: mx("absolute top-0 left-0 is-full bs-full border-2 rounded-full", border)
-        }), num > 0 && /* @__PURE__ */ React.createElement(Icon, {
-          classNames: "absolute bottom-0",
-          icon: num > 3 ? "ph--dots-three--regular" : "ph--dot--regular",
-          size: 5
-        }));
-      })), /* @__PURE__ */ React.createElement("div", {
-        className: mx(getBgColor(getDate(start, index, 6, weekStartsOn)))
-      }));
-    }, [
-      handleDaySelect,
-      getNumAppointments,
-      selected,
-      weekStartsOn
-    ]);
+      }
+      scrollRafRef.current = requestAnimationFrame(tickEdgeScroll);
+    }
+  }, [
+    containerRef,
+    setPendingRange,
+    setSelected
+  ]);
+  useEffect(() => {
+    const handleMove = (ev) => {
+      if (!draggingRef.current) {
+        return;
+      }
+      pointerXRef.current = ev.clientX;
+      pointerYRef.current = ev.clientY;
+      if (scrollRafRef.current === void 0) {
+        scrollRafRef.current = requestAnimationFrame(tickEdgeScroll);
+      }
+    };
+    window.addEventListener("pointermove", handleMove);
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+      if (scrollRafRef.current !== void 0) {
+        cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = void 0;
+      }
+    };
+  }, [
+    tickEdgeScroll
+  ]);
+  const handleKeyDown = useCallback((ev) => {
+    let dx = 0;
+    switch (ev.key) {
+      case "ArrowLeft":
+        dx = -1;
+        break;
+      case "ArrowRight":
+        dx = 1;
+        break;
+      case "ArrowUp":
+        dx = -7;
+        break;
+      case "ArrowDown":
+        dx = 7;
+        break;
+      default:
+        return;
+    }
+    ev.preventDefault();
+    if (ev.shiftKey) {
+      let anchor = anchorRef.current;
+      let focus = focusRef.current;
+      if (!anchor) {
+        if (selected) {
+          anchor = startOfDay(selected);
+          focus = anchor;
+        } else if (range) {
+          anchor = range.from;
+          focus = range.to;
+        } else {
+          anchor = startOfDay(today);
+          focus = anchor;
+        }
+        anchorRef.current = anchor;
+        focusRef.current = focus;
+      }
+      const newFocus = addDays(focus ?? anchor, dx);
+      updateRangeFromAnchor(newFocus, true);
+      scrollIntoView(newFocus);
+    } else {
+      const current = selected ?? focusRef.current ?? anchorRef.current ?? today;
+      const next = addDays(startOfDay(current), dx);
+      anchorRef.current = next;
+      focusRef.current = next;
+      setRange(void 0);
+      setPendingRange(void 0);
+      setSelected(next);
+      onSelect?.({
+        date: next
+      });
+      scrollIntoView(next);
+    }
+  }, [
+    onSelect,
+    range,
+    scrollIntoView,
+    selected,
+    setPendingRange,
+    setRange,
+    setSelected,
+    today,
+    updateRangeFromAnchor
+  ]);
+  const activeRange = pendingRange ?? range;
+  const handleScroll = useCallback((info) => {
+    scrollTopRef.current = info.scrollTop;
+    setIndex(Math.round(info.scrollTop / size));
+  }, []);
+  const rowRenderer = useCallback(({ key, index, style }) => {
+    const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modal-surface";
     return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("flex flex-col bs-full is-full justify-center overflow-hidden", classNames)
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex justify-center bg-groupSurface"
+      key,
+      style,
+      className: "grid"
     }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex is-full grid grid-cols-7",
+      className: "grid grid-cols-7 bg-input-surface",
       style: {
-        width: defaultWidth
+        gridTemplateColumns: `repeat(7, ${size}px)`
       }
-    }, days.map((date, i) => /* @__PURE__ */ React.createElement("div", {
-      key: i,
-      role: "none",
-      className: "flex justify-center p-2 text-sm font-thin"
-    }, date)))), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-col bs-full is-full justify-center overflow-hidden",
-      ref: containerRef
-    }, /* @__PURE__ */ React.createElement(List, {
-      ref: listRef,
-      role: "none",
-      // TODO(burdon): Snap isn't working.
-      className: "[&>div]:snap-y scrollbar-none outline-none",
-      width,
-      height: maxHeight ?? height,
-      rowCount: maxRows,
-      rowHeight: size,
-      rowRenderer,
-      scrollToAlignment: "start",
-      onScroll: handleScroll,
-      onRowsRendered: () => setInitialized(true)
+    }, Array.from({
+      length: 7
+    }).map((_, i) => {
+      const date = getDate(start, index, i, weekStartsOn);
+      const inRange = isInRange(date, activeRange);
+      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : hasDate(date) ? "border-neutral-700 border-dashed" : void 0;
+      return /* @__PURE__ */ React.createElement("div", {
+        key: i,
+        "data-date": startOfDay(date).toISOString(),
+        className: mx("relative flex justify-center items-center cursor-pointer select-none", getBgColor(date)),
+        onPointerDown: (ev) => handleDayPointerDown(date, ev),
+        onPointerEnter: () => handleDayPointerEnter(date),
+        onPointerUp: () => handleDayPointerUp(date)
+      }, inRange && /* @__PURE__ */ React.createElement("div", {
+        className: "absolute inset-0 bg-primary-500/20"
+      }), /* @__PURE__ */ React.createElement("span", {
+        className: "relative text-description"
+      }, date.getDate()), !border && date.getDate() === 1 && /* @__PURE__ */ React.createElement("span", {
+        className: "absolute top-0 text-xs text-description"
+      }, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
+        className: mx("absolute inset-1 border-2 rounded-full", border)
+      }));
     })));
-  } finally {
-    _effect.f();
-  }
-};
-CalendarGrid.displayName = "CalendarGrid";
+  }, [
+    activeRange,
+    handleDayPointerDown,
+    handleDayPointerEnter,
+    handleDayPointerUp,
+    hasDate,
+    selected,
+    weekStartsOn
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...composableProps(props, {
+      role: "none",
+      classNames: [
+        "flex flex-col h-full w-full justify-center overflow-hidden outline-hidden",
+        classNames
+      ]
+    }),
+    ref: (node) => {
+      gridRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    tabIndex: 0,
+    onKeyDown: handleKeyDown
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "grid w-full grid-cols-7",
+    style: {
+      width: defaultWidth
+    }
+  }, days.map((date, i) => /* @__PURE__ */ React.createElement("div", {
+    key: i,
+    className: "flex justify-center p-2 text-sm font-thin"
+  }, date))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col h-full w-full justify-center overflow-hidden",
+    ref: containerRef
+  }, /* @__PURE__ */ React.createElement(List, {
+    ref: listRef,
+    role: "none",
+    className: "scrollbar-none outline-hidden",
+    width,
+    height: maxHeight ?? height,
+    rowCount: maxRows,
+    rowHeight: size,
+    rowRenderer,
+    scrollToAlignment: "start",
+    onScroll: handleScroll,
+    onRowsRendered: () => setInitialized(true)
+  })));
+});
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
 var Calendar = {
   Root: CalendarRoot,
-  Viewport: CalendarViewport,
   Toolbar: CalendarToolbar,
   Grid: CalendarGrid
 };