foldkit 0.60.0 → 0.62.0

package/dist/ui/calendar/index.js

@@ -0,0 +1,516 @@
+import { Array, Effect, Match as M, Option, Schema as S, pipe } from 'effect';
+import * as Calendar from '../../calendar';
+import * as Command from '../../command';
+import { OptionExt } from '../../effectExtensions';
+import { createLazy, html } from '../../html';
+import { m } from '../../message';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+// MODEL
+/** Schema for the calendar component's state. Tracks the visible month/year,
+ * the keyboard-focused and user-selected dates, and the configuration that
+ * governs navigation (locale, min/max, disabled days). */
+export const Model = S.Struct({
+    id: S.String,
+    today: Calendar.CalendarDate,
+    viewYear: S.Int,
+    viewMonth: S.Int.pipe(S.between(1, 12)),
+    maybeFocusedDate: S.OptionFromSelf(Calendar.CalendarDate),
+    maybeSelectedDate: S.OptionFromSelf(Calendar.CalendarDate),
+    isGridFocused: S.Boolean,
+    locale: Calendar.LocaleConfig,
+    maybeMinDate: S.OptionFromSelf(Calendar.CalendarDate),
+    maybeMaxDate: S.OptionFromSelf(Calendar.CalendarDate),
+    disabledDaysOfWeek: S.Array(Calendar.DayOfWeek),
+    disabledDates: S.Array(Calendar.CalendarDate),
+});
+// MESSAGE
+/** Sent when the user clicks a day cell in the grid. */
+export const ClickedDay = m('ClickedDay', { date: Calendar.CalendarDate });
+/** Sent when the user presses a key on the grid container. The update maps
+ * the key to a navigation or selection action. */
+export const PressedKeyOnGrid = m('PressedKeyOnGrid', {
+    key: S.String,
+    isShift: S.Boolean,
+});
+/** Sent when the user clicks the previous-month navigation button. */
+export const ClickedPreviousMonthButton = m('ClickedPreviousMonthButton');
+/** Sent when the user clicks the next-month navigation button. */
+export const ClickedNextMonthButton = m('ClickedNextMonthButton');
+/** Sent when the user picks a month from the month dropdown. */
+export const SelectedMonthFromDropdown = m('SelectedMonthFromDropdown', {
+    month: S.Int,
+});
+/** Sent when the user picks a year from the year dropdown. */
+export const SelectedYearFromDropdown = m('SelectedYearFromDropdown', {
+    year: S.Int,
+});
+/** Sent when the grid container receives DOM focus. */
+export const FocusedGrid = m('FocusedGrid');
+/** Sent when the grid container loses DOM focus. */
+export const BlurredGrid = m('BlurredGrid');
+/** Sent when a long-lived session's "today" reference should be refreshed. */
+export const RefreshedToday = m('RefreshedToday', {
+    today: Calendar.CalendarDate,
+});
+/** Sent when a FocusGrid command completes. */
+export const CompletedFocusGrid = m('CompletedFocusGrid');
+/** Union of all messages the calendar component can produce. */
+export const Message = S.Union(ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid);
+// OUT MESSAGE
+/** Emitted when the visible month changes due to navigation. Consumers of an
+ * inline calendar may use this to load month-scoped data (holidays, events).
+ *
+ * Date selection does NOT use OutMessage — consumers subscribe via the
+ * `onSelectedDate` callback in `ViewConfig`, matching the Listbox/Popover
+ * controlled-component pattern. Use `Calendar.selectDate(model, date)` to
+ * write back when handling the callback. */
+export const ChangedViewMonth = m('ChangedViewMonth', {
+    year: S.Int,
+    month: S.Int,
+});
+/** The calendar's OutMessage. Only one variant — `ChangedViewMonth` — which
+ * fires when navigation shifts the visible month. Date selection goes through
+ * the `onSelectedDate` ViewConfig callback, not OutMessage. */
+export const OutMessage = ChangedViewMonth;
+/** Creates an initial calendar model. The view month defaults to the month
+ * of the initial selected date, or today if no date is pre-selected. */
+export const init = (config) => {
+    const maybeInitialSelectedDate = Option.fromNullable(config.initialSelectedDate);
+    const initialFocus = Option.getOrElse(maybeInitialSelectedDate, () => config.today);
+    return {
+        id: config.id,
+        today: config.today,
+        viewYear: initialFocus.year,
+        viewMonth: initialFocus.month,
+        maybeFocusedDate: Option.some(initialFocus),
+        maybeSelectedDate: maybeInitialSelectedDate,
+        isGridFocused: false,
+        locale: config.locale ?? Calendar.defaultEnglishLocale,
+        maybeMinDate: Option.fromNullable(config.minDate),
+        maybeMaxDate: Option.fromNullable(config.maxDate),
+        disabledDaysOfWeek: config.disabledDaysOfWeek ?? [],
+        disabledDates: config.disabledDates ?? [],
+    };
+};
+const withUpdateReturn = M.withReturnType();
+const gridId = (modelId) => `${modelId}-grid`;
+const gridSelector = (modelId) => `#${gridId(modelId)}`;
+/** Focuses the calendar grid container. */
+export const FocusGrid = Command.define('FocusGrid', CompletedFocusGrid);
+/** Builds a command that focuses the calendar grid container. Parent
+ * components like DatePicker dispatch this after opening to hand focus to
+ * the grid's keyboard layer. */
+export const focusGrid = (modelId) => FocusGrid(Task.focus(gridSelector(modelId)).pipe(Effect.ignore, Effect.as(CompletedFocusGrid())));
+/** Programmatically selects a date on the calendar, committing it as the
+ * chosen value and moving the cursor onto it. Use this in controlled-mode
+ * handlers (when the view's `onSelectedDate` callback is provided) to write
+ * the selection back to the calendar's internal state.
+ *
+ * Equivalent to dispatching `ClickedDay({ date })` through `update`. */
+export const selectDate = (model, date) => update(model, ClickedDay({ date }));
+const DAY_SKIP_CAP = 31;
+const MONTH_SKIP_CAP = 12;
+const isDateDisabled = (model, date) => {
+    const belowMin = Option.exists(model.maybeMinDate, min => Calendar.isBefore(date, min));
+    if (belowMin) {
+        return true;
+    }
+    const aboveMax = Option.exists(model.maybeMaxDate, max => Calendar.isAfter(date, max));
+    if (aboveMax) {
+        return true;
+    }
+    if (model.disabledDaysOfWeek.includes(Calendar.dayOfWeek(date))) {
+        return true;
+    }
+    if (model.disabledDates.some(Calendar.isEqual(date))) {
+        return true;
+    }
+    return false;
+};
+/** Walks from `start` in `direction`, returning the first non-disabled date
+ * within `cap` steps. Falls back to `start` if every candidate is disabled. */
+const skipDisabled = (model, start, direction, cap) => pipe(cap, Array.makeBy(step => Calendar.addDays(start, step * direction)), Array.findFirst(date => !isDateDisabled(model, date)), Option.getOrElse(() => start));
+const clampToRange = (model, candidate) => {
+    const afterMin = Option.match(model.maybeMinDate, {
+        onNone: () => candidate,
+        onSome: min => Calendar.max(candidate, min),
+    });
+    return Option.match(model.maybeMaxDate, {
+        onNone: () => afterMin,
+        onSome: max => Calendar.min(afterMin, max),
+    });
+};
+/** Resolves a navigation key press to the next focused date candidate,
+ * along with the direction and search cap for disabled-date skipping. */
+const resolveNavigationKey = (key, isShift, focused, firstDayOfWeek) => M.value(key).pipe(M.withReturnType(), M.when('ArrowLeft', () => [
+    Calendar.addDays(focused, -1),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('ArrowRight', () => [Calendar.addDays(focused, 1), 1, DAY_SKIP_CAP]), M.when('ArrowUp', () => [Calendar.addDays(focused, -7), -1, DAY_SKIP_CAP]), M.when('ArrowDown', () => [Calendar.addDays(focused, 7), 1, DAY_SKIP_CAP]), M.when('Home', () => [
+    Calendar.startOfWeek(focused, firstDayOfWeek),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('End', () => [
+    Calendar.endOfWeek(focused, firstDayOfWeek),
+    1,
+    DAY_SKIP_CAP,
+]), M.when('PageUp', () => [
+    isShift
+        ? Calendar.addYears(focused, -1)
+        : Calendar.addMonths(focused, -1),
+    -1,
+    MONTH_SKIP_CAP,
+]), M.when('PageDown', () => [
+    isShift ? Calendar.addYears(focused, 1) : Calendar.addMonths(focused, 1),
+    1,
+    MONTH_SKIP_CAP,
+]), M.option);
+const isCommitKey = (key) => key === 'Enter' || key === ' ';
+const currentOrFallbackFocus = (model) => Option.getOrElse(model.maybeFocusedDate, () => Calendar.make(model.viewYear, model.viewMonth, 1));
+/** Applies a date selection to the model: commits the selection, moves the
+ * cursor onto the date, and syncs the view month if the selection crosses a
+ * month boundary. Emits `ChangedViewMonth` only when the commit crosses a
+ * month boundary. */
+const commitSelection = (model, date) => {
+    const crossedMonth = date.year !== model.viewYear || date.month !== model.viewMonth;
+    const nextModel = evo(model, {
+        maybeSelectedDate: () => Option.some(date),
+        maybeFocusedDate: () => Option.some(date),
+        viewYear: () => date.year,
+        viewMonth: () => date.month,
+    });
+    const maybeOutMessage = OptionExt.when(crossedMonth, ChangedViewMonth({ year: date.year, month: date.month }));
+    return [nextModel, maybeOutMessage];
+};
+/** Applies a focus move to the model, clamping to the allowed range and
+ * skipping disabled dates. Emits `ChangedViewMonth` if the move crossed a
+ * month boundary. */
+const applyFocusMove = (model, candidate, direction, cap) => {
+    const clamped = clampToRange(model, candidate);
+    const nextFocus = skipDisabled(model, clamped, direction, cap);
+    const crossedMonth = nextFocus.year !== model.viewYear || nextFocus.month !== model.viewMonth;
+    const nextModel = evo(model, {
+        maybeFocusedDate: () => Option.some(nextFocus),
+        viewYear: () => nextFocus.year,
+        viewMonth: () => nextFocus.month,
+    });
+    const maybeOutMessage = OptionExt.when(crossedMonth, ChangedViewMonth({ year: nextFocus.year, month: nextFocus.month }));
+    return [nextModel, maybeOutMessage];
+};
+/** Computes the focused-date cursor for a view-month change. Preserves the
+ * current day-of-month (clamping to the new month's length when needed),
+ * then runs the candidate through min/max clamping and disabled-date skipping
+ * so the cursor always lands on a real, navigable cell. */
+const moveFocusForViewChange = (model, year, month, direction) => {
+    const currentDay = Option.match(model.maybeFocusedDate, {
+        onNone: () => 1,
+        onSome: focused => focused.day,
+    });
+    const dayInNewMonth = Math.min(currentDay, Calendar.daysInMonth(year, month));
+    const candidate = Calendar.make(year, month, dayInNewMonth);
+    const clamped = clampToRange(model, candidate);
+    return skipDisabled(model, clamped, direction, DAY_SKIP_CAP);
+};
+const applyViewMonthChange = (model, year, month, direction) => {
+    if (year === model.viewYear && month === model.viewMonth) {
+        return [model, [], Option.none()];
+    }
+    const nextFocus = moveFocusForViewChange(model, year, month, direction);
+    const nextModel = evo(model, {
+        viewYear: () => year,
+        viewMonth: () => month,
+        maybeFocusedDate: () => Option.some(nextFocus),
+    });
+    return [nextModel, [], Option.some(ChangedViewMonth({ year, month }))];
+};
+/** Direction the user moved when jumping to a new view month via dropdown.
+ * Used by `skipDisabled` so a forward jump skips forward through disabled
+ * dates and a backward jump skips backward. */
+const dropdownDirection = (model, year, month) => {
+    const next = Calendar.make(year, month, 1);
+    const current = Calendar.make(model.viewYear, model.viewMonth, 1);
+    return Calendar.isAfter(next, current) ? 1 : -1;
+};
+/** Processes a calendar message and returns the next model, commands, and
+ * optional OutMessage. */
+export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    ClickedDay: ({ date }) => {
+        if (isDateDisabled(model, date)) {
+            return [model, [], Option.none()];
+        }
+        const [nextModel, maybeOutMessage] = commitSelection(model, date);
+        return [nextModel, [], maybeOutMessage];
+    },
+    PressedKeyOnGrid: ({ key, isShift }) => {
+        const focused = currentOrFallbackFocus(model);
+        if (isCommitKey(key)) {
+            if (isDateDisabled(model, focused)) {
+                return [model, [], Option.none()];
+            }
+            const [nextModel, maybeOutMessage] = commitSelection(model, focused);
+            return [nextModel, [], maybeOutMessage];
+        }
+        return Option.match(resolveNavigationKey(key, isShift, focused, model.locale.firstDayOfWeek), {
+            onNone: () => [model, [], Option.none()],
+            onSome: ([candidate, direction, cap]) => {
+                const [nextModel, maybeOutMessage] = applyFocusMove(model, candidate, direction, cap);
+                return [nextModel, [], maybeOutMessage];
+            },
+        });
+    },
+    ClickedPreviousMonthButton: () => {
+        const next = Calendar.subtractMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
+        return applyViewMonthChange(model, next.year, next.month, -1);
+    },
+    ClickedNextMonthButton: () => {
+        const next = Calendar.addMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
+        return applyViewMonthChange(model, next.year, next.month, 1);
+    },
+    SelectedMonthFromDropdown: ({ month }) => applyViewMonthChange(model, model.viewYear, month, dropdownDirection(model, model.viewYear, month)),
+    SelectedYearFromDropdown: ({ year }) => applyViewMonthChange(model, year, model.viewMonth, dropdownDirection(model, year, model.viewMonth)),
+    FocusedGrid: () => [
+        evo(model, { isGridFocused: () => true }),
+        [],
+        Option.none(),
+    ],
+    BlurredGrid: () => [
+        evo(model, { isGridFocused: () => false }),
+        [],
+        Option.none(),
+    ],
+    RefreshedToday: ({ today }) => [
+        evo(model, { today: () => today }),
+        [],
+        Option.none(),
+    ],
+    CompletedFocusGrid: () => [model, [], Option.none()],
+}));
+// VIEW
+const headingId = (modelId) => `${modelId}-heading`;
+const cellId = (modelId, date) => `${modelId}-cell-${date.year}-${date.month}-${date.day}`;
+const DAY_NAMES_SUNDAY_FIRST = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+];
+const DAY_OF_WEEK_INDEX = {
+    Sunday: 0,
+    Monday: 1,
+    Tuesday: 2,
+    Wednesday: 3,
+    Thursday: 4,
+    Friday: 5,
+    Saturday: 6,
+};
+/** Rotates the Sunday-first day-name array so that `firstDayOfWeek` becomes
+ * the first entry. Used to build column headers in locale-appropriate order. */
+const rotateDayNames = (names, firstDayOfWeek) => {
+    const [front, back] = Array.splitAt(names, DAY_OF_WEEK_INDEX[firstDayOfWeek]);
+    return [...back, ...front];
+};
+const WEEKS_IN_GRID = 6;
+const DAYS_IN_WEEK = 7;
+/** Builds the 6×7 grid of dates that a calendar view renders for a given
+ * month. The grid always has 6 rows to keep height stable across months.
+ * Returns the 2D grid alongside the starting date (top-left cell) so
+ * callers can derive per-week positions without recomputing. */
+const buildGrid = (viewYear, viewMonth, firstDayOfWeek) => {
+    const firstOfMonth = Calendar.make(viewYear, viewMonth, 1);
+    const gridStart = Calendar.startOfWeek(firstOfMonth, firstDayOfWeek);
+    const weeks = Array.makeBy(WEEKS_IN_GRID, weekIndex => Array.makeBy(DAYS_IN_WEEK, dayIndex => Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK + dayIndex)));
+    return { gridStart, weeks };
+};
+const YEAR_RANGE_LOOKAHEAD = 10;
+const YEAR_RANGE_LOOKBEHIND = 100;
+/** Computes the inclusive year range the year dropdown should expose,
+ * derived from min/max constraints if set, else a sensible default window
+ * around today. */
+const resolveYearRange = (model) => {
+    const defaultStart = model.today.year - YEAR_RANGE_LOOKBEHIND;
+    const defaultEnd = model.today.year + YEAR_RANGE_LOOKAHEAD;
+    const start = Option.match(model.maybeMinDate, {
+        onNone: () => defaultStart,
+        onSome: min => min.year,
+    });
+    const end = Option.match(model.maybeMaxDate, {
+        onNone: () => defaultEnd,
+        onSome: max => max.year,
+    });
+    return [start, end];
+};
+const NAV_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+    'Enter',
+    ' ',
+]);
+/** Renders an accessible calendar grid. Builds ARIA attribute groups (grid,
+ * row, gridcell, column header) plus the derived month grid, then delegates
+ * layout to the consumer's `toView` callback. */
+export const view = (config) => {
+    const { AriaActiveDescendant, AriaColcount, AriaColindex, AriaDisabled, AriaLabel, AriaRowcount, AriaRowindex, AriaSelected, DataAttribute, Id, OnBlur, OnChange, OnClick, OnFocus, OnKeyDownPreventDefault, Role, Tabindex, Type, } = html();
+    const { model, toParentMessage, toView, onSelectedDate } = config;
+    const { id, viewYear, viewMonth, maybeFocusedDate, maybeSelectedDate, today, locale, isGridFocused, } = model;
+    /** Returns the parent message to dispatch when the user commits a date. In
+     * controlled mode (when `onSelectedDate` is provided), dispatches the
+     * callback directly. In uncontrolled mode, routes through the internal
+     * `ClickedDay` message so the calendar's own update manages selection. */
+    const dispatchSelectedDate = (date) => onSelectedDate !== undefined
+        ? onSelectedDate(date)
+        : toParentMessage(ClickedDay({ date }));
+    const previousMonthLabel = config.previousMonthLabel ?? 'Previous month';
+    const nextMonthLabel = config.nextMonthLabel ?? 'Next month';
+    const monthSelectLabel = config.monthSelectLabel ?? 'Select month';
+    const yearSelectLabel = config.yearSelectLabel ?? 'Select year';
+    const headingText = `${locale.monthNames[viewMonth - 1]} ${viewYear}`;
+    const monthOptions = locale.monthNames.map((label, index) => ({
+        value: index + 1,
+        label,
+    }));
+    const [yearRangeStart, yearRangeEnd] = resolveYearRange(model);
+    const yearOptions = Array.makeBy(Math.max(0, yearRangeEnd - yearRangeStart + 1), index => yearRangeStart + index);
+    const rotatedDayNames = rotateDayNames(DAY_NAMES_SUNDAY_FIRST, locale.firstDayOfWeek);
+    const rotatedShortDayNames = rotateDayNames(locale.shortDayNames, locale.firstDayOfWeek);
+    const { gridStart, weeks: weeksDates } = buildGrid(viewYear, viewMonth, locale.firstDayOfWeek);
+    const rootAttributes = [Id(id)];
+    const previousMonthButtonAttributes = [
+        Type('button'),
+        AriaLabel(previousMonthLabel),
+        OnClick(toParentMessage(ClickedPreviousMonthButton())),
+    ];
+    const nextMonthButtonAttributes = [
+        Type('button'),
+        AriaLabel(nextMonthLabel),
+        OnClick(toParentMessage(ClickedNextMonthButton())),
+    ];
+    const monthSelectAttributes = [
+        AriaLabel(monthSelectLabel),
+        OnChange(value => toParentMessage(SelectedMonthFromDropdown({ month: Number(value) }))),
+    ];
+    const yearSelectAttributes = [
+        AriaLabel(yearSelectLabel),
+        OnChange(value => toParentMessage(SelectedYearFromDropdown({ year: Number(value) }))),
+    ];
+    const handleKeyDown = (key, modifiers) => {
+        if (!NAV_KEYS.has(key)) {
+            return Option.none();
+        }
+        if (isCommitKey(key) && onSelectedDate !== undefined) {
+            return pipe(maybeFocusedDate, Option.filter(date => !isDateDisabled(model, date)), Option.map(onSelectedDate));
+        }
+        return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+    };
+    const activeDescendantAttributes = pipe(maybeFocusedDate, Option.map(date => AriaActiveDescendant(cellId(id, date))), Option.toArray);
+    const gridAttributes = [
+        Id(gridId(id)),
+        Role('grid'),
+        AriaLabel(`Calendar, ${headingText}`),
+        AriaRowcount(WEEKS_IN_GRID + 1),
+        AriaColcount(DAYS_IN_WEEK),
+        Tabindex(0),
+        OnFocus(toParentMessage(FocusedGrid())),
+        OnBlur(toParentMessage(BlurredGrid())),
+        OnKeyDownPreventDefault(handleKeyDown),
+        ...activeDescendantAttributes,
+    ];
+    const headerRowAttributes = [
+        Role('row'),
+        AriaRowindex(1),
+    ];
+    const columnHeaders = Array.zipWith(rotatedShortDayNames, rotatedDayNames, (name, fullName) => ({
+        name,
+        fullName,
+    })).map(({ name, fullName }, columnIndex) => ({
+        name,
+        attributes: [
+            Role('columnheader'),
+            AriaLabel(fullName),
+            AriaColindex(columnIndex + 1),
+        ],
+    }));
+    const buildDayCell = (date, columnIndex) => {
+        const isSelected = Option.exists(maybeSelectedDate, Calendar.isEqual(date));
+        const isFocused = Option.exists(maybeFocusedDate, Calendar.isEqual(date));
+        const isToday = Calendar.isEqual(today, date);
+        const isInViewMonth = date.month === viewMonth && date.year === viewYear;
+        const isDisabled = isDateDisabled(model, date);
+        const stateDataAttributes = Array.getSomes([
+            OptionExt.when(isToday, DataAttribute('today', '')),
+            OptionExt.when(isSelected, DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, DataAttribute('focused', '')),
+            OptionExt.when(!isInViewMonth, DataAttribute('outside-month', '')),
+            OptionExt.when(isDisabled, DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            Id(cellId(id, date)),
+            Role('gridcell'),
+            AriaSelected(isSelected),
+            AriaColindex(columnIndex + 1),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            Type('button'),
+            Tabindex(-1),
+            AriaLabel(Calendar.formatAriaLabel(date, locale)),
+            AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [OnClick(dispatchSelectedDate(date))]),
+        ];
+        return {
+            date,
+            label: String(date.day),
+            cellAttributes,
+            buttonAttributes,
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isToday,
+            isInViewMonth,
+            isDisabled,
+        };
+    };
+    const weeks = weeksDates.map((weekDates, weekIndex) => {
+        const weekStart = Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK);
+        return {
+            attributes: [
+                Role('row'),
+                AriaRowindex(weekIndex + 2),
+                AriaLabel(`Week of ${Calendar.formatLong(weekStart, locale)}`),
+            ],
+            cells: weekDates.map(buildDayCell),
+        };
+    });
+    return toView({
+        root: rootAttributes,
+        previousMonthButton: previousMonthButtonAttributes,
+        nextMonthButton: nextMonthButtonAttributes,
+        heading: { id: headingId(id), text: headingText },
+        monthSelect: monthSelectAttributes,
+        monthOptions,
+        yearSelect: yearSelectAttributes,
+        yearOptions,
+        grid: gridAttributes,
+        headerRow: headerRowAttributes,
+        columnHeaders,
+        weeks,
+    });
+};
+/** Creates a memoized calendar view. Static config is captured in a closure;
+ *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
+export const lazy = (staticConfig) => {
+    const lazyView = createLazy();
+    return (model, toParentMessage) => lazyView((currentModel, currentToMessage) => view({
+        ...staticConfig,
+        model: currentModel,
+        toParentMessage: currentToMessage,
+    }), [model, toParentMessage]);
+};

package/dist/ui/calendar/public.d.ts

@@ -0,0 +1,3 @@
+export { init, update, view, lazy, focusGrid, selectDate, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index';
+export type { InitConfig, ViewConfig, CalendarAttributes, DayCell, ColumnHeader, Week, } from './index';
+//# sourceMappingURL=public.d.ts.map

package/dist/ui/calendar/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,IAAI,GACL,MAAM,SAAS,CAAA"}

package/dist/ui/calendar/public.js

@@ -0,0 +1 @@
+export { init, update, view, lazy, focusGrid, selectDate, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index';