@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Schedule/Schedule.js

@@ -0,0 +1,185 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Schedule.tsx
+ * @input Calendar events, event loader functions, view objects, date/focusDate/timezone props
+ * @output Generic read-only schedule shell that renders arbitrary schedule views
+ * @position Lab component shell; concrete views live in separate view files
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Schedule/index.ts
+ * - /packages/lab/src/Schedule/Schedule.test.tsx
+ * - /apps/storybook/stories/Schedule.stories.tsx
+ */
+import { Suspense, useCallback, useMemo, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { mergeProps, plainDateFromInstant } from '@astryxdesign/core/utils';
+import { eventOverlapsRange, getBrowserTimezoneID, sortEvents } from "./dateMath.js";
+import { ScheduleContext } from "./context.js";
+import { defaultSchedulePlugins } from "./plugins/index.js";
+import { styles } from "./shared.js";
+import { createZonedDateTime } from "./zonedDateTime.js";
+import { themeProps } from '@astryxdesign/core/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const eventLoaderCache = new WeakMap();
+function readAsyncEvents(loader, start, end) {
+  let loaderCache = eventLoaderCache.get(loader);
+  if (loaderCache == null) {
+    loaderCache = new Map();
+    eventLoaderCache.set(loader, loaderCache);
+  }
+  const key = `${start}:${end}`;
+  let record = loaderCache.get(key);
+  if (record == null) {
+    record = {
+      status: 'pending',
+      promise: Promise.resolve().then(() => loader(start, end)).then(value => {
+        if (record != null) {
+          record.status = 'fulfilled';
+          record.value = value;
+        }
+      }, error => {
+        if (record != null) {
+          record.status = 'rejected';
+          record.error = error;
+        }
+      }),
+      value: [],
+      error: null
+    };
+    loaderCache.set(key, record);
+  }
+  if (record.status === 'pending') {
+    throw record.promise;
+  }
+  if (record.status === 'rejected') {
+    throw record.error;
+  }
+  return record.value;
+}
+function resolveEvents(eventSource, range, timezoneID) {
+  const events = typeof eventSource === 'function' ? readAsyncEvents(eventSource, range.start, range.end) : eventSource;
+  return sortEvents(events.filter(event => eventOverlapsRange(event, range, timezoneID)), timezoneID);
+}
+function getRange(view, date) {
+  const [start, end] = view.getDateRange(date);
+  return {
+    start: start.instant,
+    end: end.instant,
+    startDate: plainDateFromInstant(start.instant, start.timezoneID),
+    endDate: plainDateFromInstant(end.instant, end.timezoneID)
+  };
+}
+function ScheduleViewContent({
+  view,
+  eventSource,
+  categories,
+  date,
+  focusDate,
+  isLoading,
+  onPreviousDate,
+  previousDateLabel,
+  onToday,
+  onNextDate,
+  nextDateLabel,
+  plugins
+}) {
+  const Component = view.component;
+  const range = getRange(view, date);
+  const events = isLoading ? [] : resolveEvents(eventSource, range, date.timezoneID);
+  return /*#__PURE__*/_jsx(ScheduleContext.Provider, {
+    value: {
+      events,
+      categories,
+      date,
+      focusDate,
+      timezoneID: date.timezoneID,
+      range,
+      isLoading,
+      onPreviousDate,
+      previousDateLabel,
+      onToday,
+      onNextDate,
+      nextDateLabel,
+      view,
+      plugins
+    },
+    children: /*#__PURE__*/_jsx(Component, {
+      options: view.options
+    })
+  });
+}
+export function Schedule({
+  view,
+  events,
+  categories = [],
+  date,
+  focusDate: focusDateProp,
+  onChangeDate,
+  timezoneID: timezoneIDProp,
+  plugins = defaultSchedulePlugins,
+  xstyle,
+  className,
+  style,
+  ...rest
+}) {
+  const timezoneID = timezoneIDProp ?? getBrowserTimezoneID();
+  const [internalFocusDate] = useState(() => Date.now());
+  const focusDate = focusDateProp ?? internalFocusDate;
+  const zonedDateTime = useMemo(() => createZonedDateTime(date, timezoneID), [date, timezoneID]);
+  const focusZonedDateTime = useMemo(() => createZonedDateTime(focusDate, timezoneID), [focusDate, timezoneID]);
+  const updateDate = useCallback(nextDate => {
+    onChangeDate?.(nextDate);
+  }, [onChangeDate]);
+  const shiftToRange = useCallback(nextRange => {
+    const currentRange = view.getDateRange(zonedDateTime);
+    updateDate(zonedDateTime.instant + nextRange[0].instant - currentRange[0].instant);
+  }, [updateDate, view, zonedDateTime]);
+  const previousDateRange = useMemo(() => view.getPreviousDateRange(zonedDateTime), [view, zonedDateTime]);
+  const nextDateRange = useMemo(() => view.getNextDateRange(zonedDateTime), [view, zonedDateTime]);
+  const onPreviousDate = useCallback(() => {
+    shiftToRange(previousDateRange.range);
+  }, [previousDateRange, shiftToRange]);
+  const onToday = useCallback(() => {
+    updateDate(Date.now());
+  }, [updateDate]);
+  const onNextDate = useCallback(() => {
+    shiftToRange(nextDateRange.range);
+  }, [nextDateRange, shiftToRange]);
+  return /*#__PURE__*/_jsx("div", {
+    ...rest,
+    ...mergeProps(themeProps('schedule'), stylex.props(styles.root, xstyle), className, style),
+    children: /*#__PURE__*/_jsx(Suspense, {
+      fallback: /*#__PURE__*/_jsx(ScheduleViewContent, {
+        view: view,
+        eventSource: [],
+        categories: categories,
+        date: zonedDateTime,
+        focusDate: focusZonedDateTime,
+        isLoading: true,
+        onPreviousDate: onPreviousDate,
+        previousDateLabel: previousDateRange.label,
+        onToday: onToday,
+        onNextDate: onNextDate,
+        nextDateLabel: nextDateRange.label,
+        plugins: plugins
+      }),
+      children: /*#__PURE__*/_jsx(ScheduleViewContent, {
+        view: view,
+        eventSource: events,
+        categories: categories,
+        date: zonedDateTime,
+        focusDate: focusZonedDateTime,
+        isLoading: false,
+        onPreviousDate: onPreviousDate,
+        previousDateLabel: previousDateRange.label,
+        onToday: onToday,
+        onNextDate: onNextDate,
+        nextDateLabel: nextDateRange.label,
+        plugins: plugins
+      })
+    })
+  });
+}

package/dist/Schedule/TimeGridView.d.ts

@@ -0,0 +1,12 @@
+import { type PlainDate } from '@astryxdesign/core/utils';
+import type { CalendarEvent } from './types';
+export declare function TimeGridView({ days, events, focusDate, timezoneID, minHour, maxHour, hourHeight, }: {
+    days: PlainDate[];
+    events: ReadonlyArray<CalendarEvent>;
+    focusDate: PlainDate;
+    timezoneID: string;
+    minHour: number;
+    maxHour: number;
+    hourHeight: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TimeGridView.d.ts.map

package/dist/Schedule/TimeGridView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeGridView.d.ts","sourceRoot":"","sources":["../../src/Schedule/TimeGridView.tsx"],"names":[],"mappings":"AAYA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAuBlC,OAAO,KAAK,EAEV,aAAa,EAGd,MAAM,SAAS,CAAC;AAEjB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,GACX,EAAE;IACD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB,+BAmNA"}

package/dist/Schedule/TimeGridView.js

@@ -0,0 +1,364 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TimeGridView.tsx
+ * @input Schedule context, visible days, timezone, and hour bounds
+ * @output Shared weekly/day time-grid layout
+ * @position Internal view primitive shared by WeeklyView and DayView
+ */
+import * as stylex from '@stylexjs/stylex';
+import { plainDateAddDays, plainDateFromInstant, plainDateIsBefore, plainDateIsEqual, plainDateToInstant, plainDateToISO } from '@astryxdesign/core/utils';
+import { Heading, Text } from '@astryxdesign/core/Text';
+import { useScheduleContext } from "./context.js";
+import { eventOccursOnDate, isDayEvent } from "./dateMath.js";
+import { clamp, EventPill, eventPastSurfaceColorStyle, eventSurfaceColorStyle, eventSpansPastDay, formatEventAccessibilityLabel, formatDayNumber, formatEventTime, formatFullDate, formatHour, formatTimezoneAbbreviation, formatWeekday, getEventCategory, getMinutesSinceStartOfDay, isEventInPast, styles } from "./shared.js";
+import { useCurrentTime } from "./useCurrentTime.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function TimeGridView({
+  days,
+  events,
+  focusDate,
+  timezoneID,
+  minHour,
+  maxHour,
+  hourHeight
+}) {
+  const {
+    categories
+  } = useScheduleContext();
+  const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
+  const normalizedMaxHour = Math.max(normalizedMinHour + 1, Math.min(24, Math.floor(maxHour)));
+  const hours = Array.from({
+    length: normalizedMaxHour - normalizedMinHour
+  }, (_, index) => normalizedMinHour + index);
+  const allDayEvents = events.filter(isDayEvent);
+  const allDaySegments = getAllDayEventSegments(allDayEvents, days);
+  const allDayLevelCount = allDaySegments.reduce((levelCount, segment) => Math.max(levelCount, segment.level + 1), 0);
+  const instantEvents = events.filter(event => !isDayEvent(event));
+  const currentTime = useCurrentTime();
+  const currentDate = plainDateFromInstant(currentTime, timezoneID);
+  const timezoneLabel = formatTimezoneAbbreviation(days[0] ?? focusDate, timezoneID);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TimeGridAccessibilityGrid, {
+      allDayEvents: allDayEvents,
+      categories: categories,
+      days: days,
+      events: instantEvents,
+      focusDate: focusDate,
+      hours: hours,
+      timezoneID: timezoneID,
+      timezoneLabel: timezoneLabel
+    }), /*#__PURE__*/_jsxs("div", {
+      "aria-hidden": true,
+      ...stylex.props(styles.timeGrid),
+      children: [/*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.timeGridCorner)
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.timeGridHeader),
+        children: days.map((day, index) => /*#__PURE__*/_jsx("div", {
+          ...stylex.props(styles.timeGridHeaderCell, index === days.length - 1 && styles.timeGridHeaderCellLast),
+          children: /*#__PURE__*/_jsx(Heading, {
+            level: 4,
+            color: "secondary",
+            display: "block",
+            xstyle: styles.timeGridHeaderHeading,
+            children: /*#__PURE__*/_jsxs("span", {
+              ...stylex.props(styles.timeGridHeaderHeadingContent),
+              children: [formatWeekday(day, timezoneID, 'short'), /*#__PURE__*/_jsx("span", {
+                ...stylex.props(styles.timeGridDayNumber, plainDateIsEqual(day, focusDate) && styles.timeGridCurrentDayPill),
+                children: formatDayNumber(day, timezoneID)
+              })]
+            })
+          })
+        }, plainDateToISO(day)))
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.allDayLabel),
+        children: /*#__PURE__*/_jsx(Text, {
+          type: "supporting",
+          color: "secondary",
+          weight: "bold",
+          children: timezoneLabel
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.allDayRow),
+        children: /*#__PURE__*/_jsxs("div", {
+          ...stylex.props(styles.allDayRowSurface(days.length, allDayLevelCount)),
+          children: [/*#__PURE__*/_jsx("div", {
+            ...stylex.props(styles.allDayCellGrid(days.length)),
+            children: days.map((day, index) => /*#__PURE__*/_jsx("div", {
+              ...stylex.props(styles.allDayCell, index === days.length - 1 && styles.allDayCellLast)
+            }, plainDateToISO(day)))
+          }), /*#__PURE__*/_jsx("div", {
+            ...stylex.props(styles.allDayEventOverlay(days.length)),
+            children: allDaySegments.map(segment => /*#__PURE__*/_jsx("div", {
+              ...stylex.props(styles.allDayEventSpan(segment.columnStart, segment.columnEnd, segment.level)),
+              children: /*#__PURE__*/_jsx(EventPill, {
+                event: segment.event,
+                isPast: isEventInPast(segment.event, currentTime, timezoneID)
+              })
+            }, `${segment.event.id}:${segment.columnStart}`))
+          })]
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        ...stylex.props(styles.timeGridBody),
+        children: [/*#__PURE__*/_jsx("div", {
+          ...stylex.props(styles.timeLabels),
+          children: hours.slice(1).map((hour, index) => /*#__PURE__*/_jsx("div", {
+            ...stylex.props(styles.timeLabel, styles.timeLabelPosition(index + 1, hourHeight)),
+            children: formatHour(hour)
+          }, hour))
+        }), /*#__PURE__*/_jsx("div", {
+          ...stylex.props(styles.timeColumns),
+          children: days.map((day, index) => {
+            const currentTimeTop = getCurrentTimeTop({
+              currentTime,
+              day,
+              timezoneID,
+              minHour: normalizedMinHour,
+              maxHour: normalizedMaxHour
+            });
+            return /*#__PURE__*/_jsxs("div", {
+              ...stylex.props(styles.timeColumn, styles.timeColumnRows(hourHeight), index === days.length - 1 && styles.timeColumnLast),
+              children: [hours.map((hour, index) => /*#__PURE__*/_jsx("div", {
+                ...stylex.props(styles.hourSlot, index === hours.length - 1 && styles.hourSlotLast)
+              }, hour)), getTimedEventLayouts({
+                events: instantEvents.filter(event => eventOccursOnDate(event, day, timezoneID)),
+                day,
+                timezoneID,
+                minHour: normalizedMinHour,
+                maxHour: normalizedMaxHour
+              }).map(({
+                event,
+                height,
+                level,
+                top
+              }) => {
+                const timeLabel = formatEventTime(event, day, timezoneID);
+                const category = getEventCategory(event, categories);
+                return /*#__PURE__*/_jsxs("div", {
+                  ...stylex.props(styles.timedEvent, styles.timedEventPosition(clamp(top, 0, 100), clamp(height, 4, 100), level), isEventInPast(event, currentTime, timezoneID) ? eventPastSurfaceColorStyle(category.color) : eventSurfaceColorStyle(category.color)),
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    type: "supporting",
+                    color: "inherit",
+                    weight: "bold",
+                    xstyle: styles.eventTitle,
+                    children: event.title
+                  }), /*#__PURE__*/_jsx(Text, {
+                    type: "supporting",
+                    color: "inherit",
+                    xstyle: styles.eventTime,
+                    children: timeLabel
+                  })]
+                }, event.id);
+              }), plainDateIsEqual(day, currentDate) && currentTimeTop != null && /*#__PURE__*/_jsx("div", {
+                "aria-hidden": true,
+                ...stylex.props(styles.currentTimeLine(currentTimeTop))
+              })]
+            }, plainDateToISO(day));
+          })
+        })]
+      })]
+    })]
+  });
+}
+function TimeGridAccessibilityGrid({
+  allDayEvents,
+  categories,
+  days,
+  events,
+  focusDate,
+  hours,
+  timezoneID,
+  timezoneLabel
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    role: "grid",
+    "aria-label": "Schedule time grid",
+    "aria-readonly": true,
+    ...stylex.props(styles.visuallyHidden),
+    children: [/*#__PURE__*/_jsxs("div", {
+      role: "row",
+      children: [/*#__PURE__*/_jsx("div", {
+        role: "columnheader",
+        "aria-colindex": 1,
+        children: "Time"
+      }), days.map((day, index) => /*#__PURE__*/_jsx("div", {
+        role: "columnheader",
+        "aria-colindex": index + 2,
+        "aria-current": plainDateIsEqual(day, focusDate) ? 'date' : undefined,
+        children: formatFullDate(day, timezoneID)
+      }, plainDateToISO(day)))]
+    }), /*#__PURE__*/_jsxs("div", {
+      role: "row",
+      children: [/*#__PURE__*/_jsxs("div", {
+        role: "rowheader",
+        "aria-colindex": 1,
+        children: [timezoneLabel, " all day"]
+      }), days.map((day, index) => {
+        const cellEvents = allDayEvents.filter(event => eventOccursOnDate(event, day, timezoneID));
+        return /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          "aria-colindex": index + 2,
+          "aria-label": formatTimeGridAccessibilityCellLabel({
+            categories,
+            day,
+            events: cellEvents,
+            label: `${formatFullDate(day, timezoneID)} all day`,
+            timezoneID
+          })
+        }, plainDateToISO(day));
+      })]
+    }), hours.map(hour => /*#__PURE__*/_jsxs("div", {
+      role: "row",
+      children: [/*#__PURE__*/_jsx("div", {
+        role: "rowheader",
+        "aria-colindex": 1,
+        children: formatHour(hour)
+      }), days.map((day, index) => {
+        const cellEvents = events.filter(event => eventOverlapsHour(event, day, hour, timezoneID));
+        return /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          "aria-colindex": index + 2,
+          "aria-label": formatTimeGridAccessibilityCellLabel({
+            categories,
+            day,
+            events: cellEvents,
+            label: `${formatFullDate(day, timezoneID)} ${formatHour(hour)}`,
+            timezoneID
+          })
+        }, plainDateToISO(day));
+      })]
+    }, hour))]
+  });
+}
+function formatTimeGridAccessibilityCellLabel({
+  categories,
+  day,
+  events,
+  label,
+  timezoneID
+}) {
+  if (events.length === 0) {
+    return label;
+  }
+  const eventLabels = events.map(event => formatEventAccessibilityLabel(event, day, timezoneID, categories));
+  return `${label}. ${eventLabels.join('. ')}`;
+}
+function eventOverlapsHour(event, day, hour, timezoneID) {
+  if (!eventOccursOnDate(event, day, timezoneID)) {
+    return false;
+  }
+  const hourStart = plainDateToInstant(day, timezoneID, hour);
+  const hourEnd = hour === 23 ? plainDateToInstant(plainDateAddDays(day, 1), timezoneID) : plainDateToInstant(day, timezoneID, hour + 1);
+  return event.start < hourEnd && event.end > hourStart;
+}
+function getAllDayEventSegments(events, days) {
+  const levels = [];
+  return events.map(event => {
+    const startIndex = days.findIndex(day => !plainDateIsBefore(day, event.start));
+    const endIndexFromRight = [...days].reverse().findIndex(day => !plainDateIsBefore(event.end, day));
+    if (startIndex < 0 || endIndexFromRight < 0) {
+      return null;
+    }
+    const endIndex = days.length - 1 - endIndexFromRight;
+    return {
+      event,
+      startIndex,
+      endIndex
+    };
+  }).filter(segment => segment != null).sort((a, b) => {
+    if (a.startIndex !== b.startIndex) {
+      return a.startIndex - b.startIndex;
+    }
+    const aDuration = a.endIndex - a.startIndex;
+    const bDuration = b.endIndex - b.startIndex;
+    return bDuration - aDuration || a.event.title.localeCompare(b.event.title);
+  }).map(({
+    event,
+    startIndex,
+    endIndex
+  }) => {
+    const level = getAvailableAllDayLevel(levels, startIndex);
+    levels[level] = endIndex;
+    return {
+      event,
+      columnStart: startIndex,
+      columnEnd: endIndex,
+      level
+    };
+  });
+}
+function getAvailableAllDayLevel(levels, columnStart) {
+  const level = levels.findIndex(columnEnd => columnStart > columnEnd);
+  return level >= 0 ? level : levels.length;
+}
+function getTimedEventLayouts({
+  events,
+  day,
+  timezoneID,
+  minHour,
+  maxHour
+}) {
+  const totalMinutes = (maxHour - minHour) * 60;
+  const levelEndMinutes = [];
+  return events.map(event => {
+    const startDate = plainDateFromInstant(event.start, timezoneID);
+    const rawStart = plainDateIsBefore(startDate, day) ? 0 : getMinutesSinceStartOfDay(event.start, timezoneID);
+    const rawEnd = eventSpansPastDay(event, day, timezoneID) ? 24 * 60 : getMinutesSinceStartOfDay(event.end, timezoneID);
+    const minMinute = minHour * 60;
+    const maxMinute = maxHour * 60;
+    if (rawEnd <= minMinute || rawStart >= maxMinute) {
+      return null;
+    }
+    const visibleStart = Math.max(rawStart, minMinute);
+    const visibleEnd = Math.min(maxMinute, Math.max(visibleStart + 15, rawEnd));
+    return {
+      event,
+      visibleStart,
+      visibleEnd
+    };
+  }).filter(layout => layout != null && layout.visibleEnd > layout.visibleStart).sort((a, b) => {
+    if (a.visibleStart !== b.visibleStart) {
+      return a.visibleStart - b.visibleStart;
+    }
+    return a.visibleEnd - b.visibleEnd || a.event.title.localeCompare(b.event.title);
+  }).map(({
+    event,
+    visibleEnd,
+    visibleStart
+  }) => {
+    const level = getAvailableTimedEventLevel(levelEndMinutes, visibleStart);
+    levelEndMinutes[level] = visibleEnd;
+    return {
+      event,
+      level,
+      top: (visibleStart - minHour * 60) / totalMinutes * 100,
+      height: (visibleEnd - visibleStart) / totalMinutes * 100
+    };
+  });
+}
+function getAvailableTimedEventLevel(levelEndMinutes, visibleStart) {
+  const level = levelEndMinutes.findIndex(endMinute => visibleStart >= endMinute);
+  return level >= 0 ? level : levelEndMinutes.length;
+}
+function getCurrentTimeTop({
+  currentTime,
+  day,
+  timezoneID,
+  minHour,
+  maxHour
+}) {
+  const currentDate = plainDateFromInstant(currentTime, timezoneID);
+  if (!plainDateIsEqual(day, currentDate)) {
+    return null;
+  }
+  const currentMinute = getMinutesSinceStartOfDay(currentTime, timezoneID);
+  const minMinute = minHour * 60;
+  const maxMinute = maxHour * 60;
+  if (currentMinute < minMinute || currentMinute > maxMinute) {
+    return null;
+  }
+  return (currentMinute - minMinute) / (maxMinute - minMinute) * 100;
+}

package/dist/Schedule/WeeklyView.d.ts

@@ -0,0 +1,9 @@
+import type { ScheduleView } from './types';
+export interface ScheduleWeeklyViewOptions {
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    minHour?: number;
+    maxHour?: number;
+    hourHeight?: number;
+}
+export declare function createScheduleWeeklyView({ weekStartsOn, minHour, maxHour, hourHeight, }?: ScheduleWeeklyViewOptions): ScheduleView<ScheduleWeeklyViewOptions>;
+//# sourceMappingURL=WeeklyView.d.ts.map

package/dist/Schedule/WeeklyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeeklyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/WeeklyView.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAEV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAwCD,wBAAgB,wBAAwB,CAAC,EACvC,YAAgB,EAChB,OAAW,EACX,OAAY,EACZ,UAAgB,GACjB,GAAE,yBAA8B,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAmC1E"}

package/dist/Schedule/WeeklyView.js

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file WeeklyView.tsx
+ * @input Schedule context and weekly view options
+ * @output Week time-grid schedule view factory
+ * @position Concrete schedule view; exported as createScheduleWeeklyView
+ */
+import { plainDateAddDays, plainDateSetStartOfWeek } from '@astryxdesign/core/utils';
+import { enumerateDates, getScheduleRangeFromDates } from "./dateMath.js";
+import { useScheduleContext } from "./context.js";
+import { formatWeekTitle, ScheduleFrame, ScheduleRangeMonthTitle } from "./shared.js";
+import { TimeGridView } from "./TimeGridView.js";
+import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ScheduleWeeklyView({
+  options
+}) {
+  const {
+    events,
+    focusDate,
+    timezoneID,
+    range,
+    isLoading
+  } = useScheduleContext();
+  const {
+    minHour = 0,
+    maxHour = 24,
+    hourHeight = 100
+  } = options;
+  const days = enumerateDates(range.startDate, range.endDate);
+  const highlightedDate = focusDate.toPlainDate();
+  const titleLabel = formatWeekTitle(days[0], days[days.length - 1], timezoneID);
+  return /*#__PURE__*/_jsx(ScheduleFrame, {
+    title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
+      start: days[0],
+      end: days[days.length - 1],
+      timezoneID: timezoneID
+    }),
+    titleLabel: titleLabel,
+    isLoading: isLoading,
+    children: /*#__PURE__*/_jsx(TimeGridView, {
+      days: days,
+      events: events,
+      focusDate: highlightedDate,
+      timezoneID: timezoneID,
+      minHour: minHour,
+      maxHour: maxHour,
+      hourHeight: hourHeight
+    })
+  });
+}
+export function createScheduleWeeklyView({
+  weekStartsOn = 0,
+  minHour = 0,
+  maxHour = 24,
+  hourHeight = 100
+} = {}) {
+  return {
+    component: ScheduleWeeklyView,
+    options: {
+      weekStartsOn,
+      minHour,
+      maxHour,
+      hourHeight
+    },
+    getDateRange: date => {
+      const range = getWeekDateRange({
+        date: date.toPlainDate(),
+        timezoneID: date.timezoneID,
+        weekStartsOn
+      });
+      return scheduleRangeToZonedDateTimeRange(range, date.timezoneID);
+    },
+    getPreviousDateRange: date => {
+      const range = getWeekDateRange({
+        date: plainDateAddDays(date.toPlainDate(), -7),
+        timezoneID: date.timezoneID,
+        weekStartsOn
+      });
+      return {
+        label: 'Previous week',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID)
+      };
+    },
+    getNextDateRange: date => {
+      const range = getWeekDateRange({
+        date: plainDateAddDays(date.toPlainDate(), 7),
+        timezoneID: date.timezoneID,
+        weekStartsOn
+      });
+      return {
+        label: 'Next week',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID)
+      };
+    }
+  };
+}
+function getWeekDateRange({
+  date,
+  timezoneID,
+  weekStartsOn
+}) {
+  const startDate = plainDateSetStartOfWeek(date, weekStartsOn);
+  return getScheduleRangeFromDates({
+    startDate,
+    endDate: plainDateAddDays(startDate, 7),
+    timezoneID
+  });
+}