ropav 0.2.0 → 0.3.0

package/dist/composables/use-autocomplete.js

@@ -0,0 +1,188 @@
+import { createContext } from "../utils/create-context.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { computed, toValue, watch } from "vue";
+//#region src/composables/use-autocomplete.ts
+/** The `inputType` values that mean text was typed forwards rather than edited. */
+var TYPED_FORWARD = [
+	"insertText",
+	"insertCompositionText",
+	"insertFromComposition"
+];
+var [useAutocompleteInputContext, provideAutocompleteInputContext] = createContext({
+	defaultValue: null,
+	name: "AutocompleteInputContext",
+	strict: false
+});
+/**
+* An input that drives a collection beside it, ported from React Aria's
+* `packages/react-aria/src/autocomplete/useAutocomplete.ts` (react-aria 3.51.0).
+*
+* The whole arrangement is that real focus never leaves the input: the arrows move a *nominal*
+* focus over the collection, the input names whichever option holds it with
+* `aria-activedescendant`, and Enter acts on that option. Without it, arrowing into the options
+* would take the caret out of the field the user is typing in.
+*
+* The event simulation upstream is deliberately left out. React has to dispatch synthetic
+* `CustomEvent`s and re-dispatch `KeyboardEvent`s onto the collection element, because the
+* collection's own keyboard layer lives in a different component and the DOM is the only channel
+* between them. Here the caller holds both halves and hands the keyboard layer over directly, so
+* the keys are simply passed to it — same behaviour, without the round trip through the DOM.
+*
+* @example
+* ```ts
+* const autocomplete = useAutocomplete({
+*   collection,
+*   collectionId: () => listId.value,
+*   inputElement,
+*   keyboard,
+*   selection,
+* });
+* ```
+*/
+var useAutocomplete = (options) => {
+	const { collection, selection } = options;
+	const keyboard = computed(() => toValue(options.keyboard) ?? null);
+	const isVirtual = computed(() => !toValue(options.disableVirtualFocus));
+	const { setState, state } = useControllableState({
+		defaultValue: options.defaultInputValue ?? "",
+		onValueChange: options.onInputChange,
+		value: () => toValue(options.inputValue)
+	});
+	const clearVirtualFocus = () => {
+		selection.setFocusedKey(null);
+	};
+	const focusFirstItem = () => {
+		const first = keyboard.value?.getFirstKey() ?? null;
+		if (first == null) {
+			clearVirtualFocus();
+			return;
+		}
+		selection.setFocused(true);
+		keyboard.value?.focusKey(first, { scroll: true });
+	};
+	/** What the edit currently in flight is doing to the text. Only `beforeinput` carries it. */
+	let lastInputType = "";
+	const onBeforeinput = (event) => {
+		lastInputType = event.inputType ?? "";
+	};
+	/**
+	* The new text, and with it the decision about where virtual focus goes.
+	*
+	* Read here rather than in the `beforeinput` handler, and that ordering is the whole point: the
+	* options are narrowed by this very value, so asking for the first match any earlier asks the
+	* list the user is leaving behind — and that option is often one of the ones about to go.
+	*
+	* IME composition reports `insertCompositionText`/`insertFromComposition` rather than
+	* `insertText`, and all three mean the same thing to a user: they typed forwards, so the first
+	* match should light up. Anything else — a paste, a backspace, an undo — moves the caret over
+	* text that is already there, and lighting an option then would announce a choice nobody made.
+	*/
+	const setInputValue = (value) => {
+		setState(value);
+		if (!isVirtual.value || !lastInputType) return;
+		if (TYPED_FORWARD.includes(lastInputType)) {
+			if (!toValue(options.disableAutoFocusFirst)) focusFirstItem();
+			return;
+		}
+		if (lastInputType.includes("insert") || lastInputType.includes("delete") || lastInputType.includes("history")) clearVirtualFocus();
+		lastInputType = "";
+	};
+	/**
+	* Clicking back into the input while virtual focus sits on an option.
+	*
+	* The press has to clear it on the way *down*, before the click's own focus handling runs, or
+	* the option would stay lit under a caret the user just put back in the text. Touch is left
+	* out on purpose: a tap on a touch device is not a request to move focus to the input.
+	*/
+	const onPointerdown = (event) => {
+		const pointer = event;
+		if (pointer.button !== 0 || pointer.pointerType === "touch") return;
+		if (selection.focusedKey.value == null) return;
+		if (pointer.target !== options.inputElement.value) return;
+		clearVirtualFocus();
+	};
+	watch(options.inputElement, (element, _previous, onCleanup) => {
+		if (!element) return;
+		element.addEventListener("beforeinput", onBeforeinput);
+		element.addEventListener("pointerdown", onPointerdown);
+		onCleanup(() => {
+			element.removeEventListener("beforeinput", onBeforeinput);
+			element.removeEventListener("pointerdown", onPointerdown);
+		});
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	/** The keys the collection answers, which the caret must not also act on. */
+	const isCollectionKey = (key) => key === "ArrowUp" || key === "ArrowDown" || key === "Home" || key === "End" || key === "PageUp" || key === "PageDown";
+	const onKeydown = (event) => {
+		if (!isVirtual.value || event.isComposing || !keyboard.value) return;
+		const focused = selection.focusedKey.value;
+		switch (event.key) {
+			case " ": return;
+			case "Tab":
+			case "Escape": return;
+			case "Enter":
+				if (focused == null) return;
+				event.preventDefault();
+				selection.select(focused);
+				return;
+			case "ArrowLeft":
+			case "ArrowRight":
+				if (focused == null) {
+					clearVirtualFocus();
+					return;
+				}
+				keyboard.value?.onKeydown(event);
+				clearVirtualFocus();
+				return;
+			default:
+				if (!isCollectionKey(event.key)) return;
+				if (focused == null && event.shiftKey && (event.key === "Home" || event.key === "End")) return;
+				event.preventDefault();
+				selection.setFocused(true);
+				keyboard.value?.onKeydown(event);
+		}
+	};
+	/**
+	* Nothing to do on the way up, and that is the point.
+	*
+	* Upstream re-dispatches the keyup onto the focused option so its press layer sees a matched
+	* down/up pair; here the option was never sent a keydown to match. Kept in the shape so a
+	* control can wire both halves without asking which one matters.
+	*/
+	const onKeyup = (_event) => {};
+	const onBlur = () => {
+		clearVirtualFocus();
+	};
+	/**
+	* The focused option loses virtual focus when it leaves the collection.
+	*
+	* Typing narrows the options, and the one the arrows had landed on is often among the ones that
+	* go. Left alone, the input would keep naming an element that is no longer in the document.
+	*/
+	watch(() => collection.size.value, () => {
+		const focused = selection.focusedKey.value;
+		if (focused != null && !collection.getItem(focused)) clearVirtualFocus();
+	}, { flush: "post" });
+	return {
+		clearVirtualFocus,
+		focusFirstItem,
+		inputAttributes: computed(() => ({
+			"aria-activedescendant": keyboard.value?.focusedNodeId.value,
+			"aria-autocomplete": "list",
+			"aria-controls": toValue(options.collectionId),
+			autocomplete: "off",
+			autocorrect: "off",
+			enterkeyhint: "go",
+			spellcheck: "false"
+		})),
+		inputValue: computed(() => state.value),
+		onBlur,
+		onKeydown,
+		onKeyup,
+		setInputValue
+	};
+};
+//#endregion
+export { provideAutocompleteInputContext, useAutocomplete, useAutocompleteInputContext };

package/dist/composables/use-calendar-cell.d.ts

@@ -0,0 +1,47 @@
+import type { AnyCalendarState, CalendarShared } from "./use-calendar";
+import type { UsePressHandlers } from "./use-press";
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseCalendarCellOptions {
+    /** The date this cell stands for. */
+    date: MaybeRefOrGetter<CalendarDate>;
+    /** Forces the cell disabled, on top of the calendar's own bounds. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the cell shows a date from a neighbouring month. */
+    isOutsideMonth?: MaybeRefOrGetter<boolean | undefined>;
+    /** The element focus lands on, read lazily so a template ref that fills in later still works. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+}
+export interface UseCalendarCellReturn {
+    /** Spread with `v-bind` onto the grid cell. Never carries an `on*` key. */
+    cellAttrs: ComputedRef<Record<string, unknown>>;
+    /** Spread with `v-bind` onto the focusable element inside the cell. */
+    buttonAttrs: ComputedRef<Record<string, unknown>>;
+    /** Wire with `@event`, never with `v-bind`. */
+    handlers: UsePressHandlers & {
+        onFocus: () => void;
+        onPointerenter: (event: PointerEvent) => void;
+        onContextmenu: (event: MouseEvent) => void;
+    };
+    isPressed: ComputedRef<boolean>;
+    isSelected: ComputedRef<boolean>;
+    isFocused: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isUnavailable: ComputedRef<boolean>;
+    isOutsideVisibleRange: ComputedRef<boolean>;
+    isInvalid: ComputedRef<boolean>;
+    isToday: ComputedRef<boolean>;
+    /** The day number written for the current locale and calendar system. */
+    formattedDate: ComputedRef<string>;
+}
+/**
+ * The behaviour and accessibility wiring for one date cell.
+ *
+ * Ported from react-aria's `packages/react-aria/src/calendar/useCalendarCell.ts`
+ * (react-aria 3.51.0).
+ *
+ * The cell is a `role="button"` inside a `role="gridcell"` rather than a `<button>`, and its label
+ * is the whole date rather than the day number — a screen reader reading "15" out of a grid tells
+ * the user nothing about which month or year they are in.
+ */
+export declare const useCalendarCell: (options: UseCalendarCellOptions, state: AnyCalendarState, shared: CalendarShared) => UseCalendarCellReturn;

package/dist/composables/use-calendar-cell.js

@@ -0,0 +1,224 @@
+import { getInteractionModality } from "./use-interaction-states.js";
+import { getScrollParent } from "../utils/focus.js";
+import { usePress } from "./use-press.js";
+import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
+import { useDescription } from "./use-description.js";
+import { calendarStrings } from "../i18n/calendar.js";
+import { useDateFormatter } from "./use-date-formatter.js";
+import { isRangeCalendarState } from "./use-calendar.js";
+import { computed, onScopeDispose, toValue, watch } from "vue";
+import { isSameDay, isToday } from "@internationalized/date";
+//#region src/composables/use-calendar-cell.ts
+/** How long a finger has to stay down before it counts as dragging a range rather than scrolling. */
+var TOUCH_DRAG_DELAY = 200;
+/**
+* The behaviour and accessibility wiring for one date cell.
+*
+* Ported from react-aria's `packages/react-aria/src/calendar/useCalendarCell.ts`
+* (react-aria 3.51.0).
+*
+* The cell is a `role="button"` inside a `role="gridcell"` rather than a `<button>`, and its label
+* is the whole date rather than the day number — a screen reader reading "15" out of a grid tells
+* the user nothing about which month or year they are in.
+*/
+var useCalendarCell = (options, state, shared) => {
+	const stringFormatter = useLocalizedStringFormatter(calendarStrings);
+	const date = computed(() => toValue(options.date));
+	const isOutsideMonth = computed(() => Boolean(toValue(options.isOutsideMonth)));
+	const dateFormatter = useDateFormatter(() => ({
+		day: "numeric",
+		era: date.value.calendar.identifier === "gregory" && date.value.era === "BC" ? "short" : void 0,
+		month: "long",
+		timeZone: state.timeZone.value,
+		weekday: "long",
+		year: "numeric"
+	}));
+	const cellDateFormatter = useDateFormatter(() => ({
+		calendar: date.value.calendar.identifier,
+		day: "numeric",
+		timeZone: state.timeZone.value
+	}));
+	const nativeDate = computed(() => date.value.toDate(state.timeZone.value));
+	const isFocused = computed(() => state.isCellFocused(date.value) && !isOutsideMonth.value);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)) || state.isCellDisabled(date.value) || isOutsideMonth.value);
+	const isUnavailable = computed(() => state.isCellUnavailable(date.value));
+	const isSelectable = computed(() => !isDisabled.value && !isUnavailable.value);
+	const isInvalid = computed(() => {
+		if (!state.isValueInvalid.value) return false;
+		if (isRangeCalendarState(state)) {
+			const range = state.highlightedRange.value;
+			return !state.anchorDate.value && range != null && date.value.compare(range.start) >= 0 && date.value.compare(range.end) <= 0;
+		}
+		const value = state.value.value;
+		if (Array.isArray(value)) return value.some((entry) => isSameDay(entry, date.value));
+		if (value && !("start" in value)) return isSameDay(value, date.value);
+		return false;
+	});
+	const isSelected = computed(() => state.isSelected(date.value) && isSelectable.value || isInvalid.value && !isDisabled.value);
+	const isDateToday = computed(() => isToday(date.value, state.timeZone.value));
+	const label = computed(() => {
+		let text = "";
+		if (isRangeCalendarState(state)) {
+			const range = state.value.value;
+			if (range && !state.anchorDate.value && (isSameDay(date.value, range.start) || isSameDay(date.value, range.end))) text = `${shared.selectedDateDescription.value}, `;
+		}
+		text += dateFormatter.value.format(nativeDate.value);
+		if (isDateToday.value) text = stringFormatter.value.format(isSelected.value ? "todayDateSelected" : "todayDate", { date: text });
+		else if (isSelected.value) text = stringFormatter.value.format("dateSelected", { date: text });
+		if (state.minValue.value && isSameDay(date.value, state.minValue.value)) text += `, ${stringFormatter.value.format("minimumDate")}`;
+		else if (state.maxValue.value && isSameDay(date.value, state.maxValue.value)) text += `, ${stringFormatter.value.format("maximumDate")}`;
+		return text;
+	});
+	/**
+	* A prompt telling a screen reader user that a range takes two presses.
+	*
+	* Nothing on screen says so, and the two presses look identical from the outside, so this is the
+	* only way a non-visual user learns what the second one is for.
+	*/
+	const rangeSelectionPrompt = computed(() => {
+		if (!isRangeCalendarState(state)) return void 0;
+		if (!isFocused.value || state.isReadOnly.value || !isSelectable.value) return void 0;
+		return stringFormatter.value.format(state.anchorDate.value ? "finishRangeSelectionPrompt" : "startRangeSelectionPrompt");
+	});
+	const { describedBy } = useDescription(rangeSelectionPrompt);
+	let isAnchorPressed = false;
+	let isRangeBoundaryPressed = false;
+	let touchDragTimer;
+	const clearTouchDragTimer = () => {
+		clearTimeout(touchDragTimer);
+		touchDragTimer = void 0;
+	};
+	onScopeDispose(clearTouchDragTimer);
+	const { handlers: pressHandlers, isPressed } = usePress({
+		isDisabled: () => !isSelectable.value || state.isReadOnly.value,
+		onPress: () => {
+			if (!isRangeCalendarState(state) && !state.isReadOnly.value) {
+				state.selectDate(date.value);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+			}
+		},
+		onPressEnd: () => {
+			isRangeBoundaryPressed = false;
+			isAnchorPressed = false;
+			clearTouchDragTimer();
+		},
+		onPressStart: (event) => {
+			if (state.isReadOnly.value) {
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+				return;
+			}
+			if (!isRangeCalendarState(state) || state.anchorDate.value || event.pointerType !== "mouse" && event.pointerType !== "touch") return;
+			const range = state.highlightedRange.value;
+			if (range && !isInvalid.value) for (const [end, other] of [[range.start, range.end], [range.end, range.start]]) {
+				if (!isSameDay(date.value, end)) continue;
+				state.setAnchorDate(other);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+				state.setDragging(true);
+				isRangeBoundaryPressed = true;
+				return;
+			}
+			const startDragging = () => {
+				state.setDragging(true);
+				touchDragTimer = void 0;
+				state.selectDate(date.value);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+				isAnchorPressed = true;
+			};
+			if (event.pointerType === "touch") touchDragTimer = setTimeout(startDragging, TOUCH_DRAG_DELAY);
+			else startDragging();
+		},
+		onPressUp: (event) => {
+			if (state.isReadOnly.value || !isRangeCalendarState(state)) return;
+			if (touchDragTimer) {
+				state.selectDate(date.value);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+			}
+			if (isRangeBoundaryPressed) state.setAnchorDate(date.value);
+			else if (state.anchorDate.value && !isAnchorPressed) {
+				state.selectDate(date.value);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+			} else if (event.pointerType === "keyboard" && !state.anchorDate.value) {
+				state.selectDate(date.value);
+				state.focusNearestAvailableDate(date.value);
+			} else if (event.pointerType === "virtual") {
+				state.selectDate(date.value);
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+			}
+		}
+	});
+	watch([isFocused, () => toValue(options.element)], ([focused, element]) => {
+		if (!focused || !element) return;
+		element.focus({ preventScroll: true });
+		if (getInteractionModality() !== "pointer" && document.activeElement === element) {
+			if (getScrollParent(element) && typeof element.scrollIntoView === "function") element.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	const tabIndex = computed(() => {
+		if (isDisabled.value) return void 0;
+		return isSameDay(date.value, state.focusedDate.value) ? 0 : -1;
+	});
+	return {
+		buttonAttrs: computed(() => ({
+			"aria-describedby": [isInvalid.value ? shared.errorMessageId.value : void 0, describedBy.value].filter(Boolean).join(" ") || void 0,
+			"aria-disabled": !isSelectable.value || void 0,
+			"aria-invalid": isInvalid.value || void 0,
+			"aria-label": label.value,
+			role: "button",
+			tabindex: tabIndex.value
+		})),
+		cellAttrs: computed(() => ({
+			"aria-disabled": !isSelectable.value || void 0,
+			"aria-invalid": isInvalid.value || void 0,
+			"aria-selected": isSelected.value || void 0,
+			role: "gridcell"
+		})),
+		formattedDate: computed(() => cellDateFormatter.value.formatToParts(nativeDate.value).find((part) => part.type === "day").value),
+		handlers: {
+			...pressHandlers,
+			onContextmenu: (event) => {
+				event.preventDefault();
+			},
+			onFocus: () => {
+				if (isDisabled.value) return;
+				state.setFocusedDate(date.value);
+				state.setFocused(true);
+			},
+			onPointerdown: (event) => {
+				const target = event.target;
+				if (target instanceof HTMLElement && "releasePointerCapture" in target) {
+					if (!("hasPointerCapture" in target) || target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+				}
+				pressHandlers.onPointerdown(event);
+			},
+			onPointerenter: (event) => {
+				if (isRangeCalendarState(state) && isSelectable.value) {
+					if (event.pointerType !== "touch" || state.isDragging.value) state.highlightDate(date.value);
+				}
+				pressHandlers.onPointerenter(event);
+			}
+		},
+		isDisabled,
+		isFocused,
+		isInvalid,
+		isOutsideVisibleRange: computed(() => date.value.compare(state.visibleRange.value.start) < 0 || date.value.compare(state.visibleRange.value.end) > 0),
+		isPressed,
+		isSelected,
+		isToday: isDateToday,
+		isUnavailable
+	};
+};
+//#endregion
+export { useCalendarCell };

package/dist/composables/use-calendar-grid.d.ts

@@ -0,0 +1,37 @@
+import type { DayOfWeek, WeekdayStyle } from "../utils/calendar";
+import type { AnyCalendarState, CalendarShared } from "./use-calendar";
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseCalendarGridOptions {
+    /** The first date this grid shows. Defaults to the first visible date of the calendar. */
+    startDate?: MaybeRefOrGetter<CalendarDate | undefined>;
+    /** The last date this grid shows. Defaults to the last visible date of the calendar. */
+    endDate?: MaybeRefOrGetter<CalendarDate | undefined>;
+    /** How wide the weekday names above the grid are written. @default "narrow" */
+    weekdayStyle?: MaybeRefOrGetter<WeekdayStyle | undefined>;
+    /** The day a week starts on, when it should not follow the locale. */
+    firstDayOfWeek?: MaybeRefOrGetter<DayOfWeek | undefined>;
+}
+export interface UseCalendarGridReturn {
+    /** Spread with `v-bind` onto the grid element. Never carries an `on*` key. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    /** Spread with `v-bind` onto the grid's header row container. */
+    headerAttrs: ComputedRef<Record<string, unknown>>;
+    onKeydown: (event: KeyboardEvent) => void;
+    onFocusin: () => void;
+    onFocusout: () => void;
+    /** The weekday names for the column headers, in the order the locale writes them. */
+    weekDays: ComputedRef<string[]>;
+    /** How many week rows this grid has. */
+    weeksInMonth: ComputedRef<number>;
+}
+/**
+ * The behaviour and accessibility wiring for one grid of dates.
+ *
+ * Ported from react-aria's `packages/react-aria/src/calendar/useCalendarGrid.ts`
+ * (react-aria 3.51.0).
+ *
+ * The grid owns the whole keyboard contract — arrows, paging, Home/End, Enter and Space — because
+ * only it knows which way is "next" in the current writing direction.
+ */
+export declare const useCalendarGrid: (options: UseCalendarGridOptions, state: AnyCalendarState, shared: CalendarShared) => UseCalendarGridReturn;

package/dist/composables/use-calendar-grid.js

@@ -0,0 +1,113 @@
+import { useLocale } from "./use-locale.js";
+import { useDateFormatter } from "./use-date-formatter.js";
+import { useLabels } from "./use-labels.js";
+import { isRangeCalendarState, useVisibleRangeDescription } from "./use-calendar.js";
+import { computed, toValue } from "vue";
+import { startOfWeek, today } from "@internationalized/date";
+//#region src/composables/use-calendar-grid.ts
+/**
+* The behaviour and accessibility wiring for one grid of dates.
+*
+* Ported from react-aria's `packages/react-aria/src/calendar/useCalendarGrid.ts`
+* (react-aria 3.51.0).
+*
+* The grid owns the whole keyboard contract — arrows, paging, Home/End, Enter and Space — because
+* only it knows which way is "next" in the current writing direction.
+*/
+var useCalendarGrid = (options, state, shared) => {
+	const locale = useLocale();
+	const startDate = computed(() => toValue(options.startDate) ?? state.visibleRange.value.start);
+	const endDate = computed(() => toValue(options.endDate) ?? state.visibleRange.value.end);
+	const visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, () => state.timeZone.value, true);
+	const labels = useLabels(() => ({
+		"aria-label": [shared.ariaLabel.value, visibleRangeDescription.value].filter(Boolean).join(", "),
+		"aria-labelledby": shared.ariaLabelledBy.value
+	}));
+	/**
+	* Keys that must keep working while held down: paging and stepping are what a user holds.
+	*
+	* Selecting is in here too, which is upstream's choice — holding Enter re-selects the same date,
+	* which is harmless because selecting is idempotent.
+	*/
+	const repeatable = {
+		" ": () => state.selectFocusedDate(),
+		ArrowDown: () => state.focusNextRow(),
+		ArrowLeft: () => {
+			if (locale.value.direction === "rtl") state.focusNextDay();
+			else state.focusPreviousDay();
+		},
+		ArrowRight: () => {
+			if (locale.value.direction === "rtl") state.focusPreviousDay();
+			else state.focusNextDay();
+		},
+		ArrowUp: () => state.focusPreviousRow(),
+		Enter: () => state.selectFocusedDate(),
+		PageDown: () => state.focusNextSection(),
+		PageUp: () => state.focusPreviousSection(),
+		"Shift+PageDown": () => state.focusNextSection(true),
+		"Shift+PageUp": () => state.focusPreviousSection(true)
+	};
+	/** Keys that act once per press. */
+	const single = {
+		End: () => {
+			state.focusSectionEnd();
+			return true;
+		},
+		Escape: () => {
+			if (isRangeCalendarState(state)) state.setAnchorDate(null);
+			return false;
+		},
+		Home: () => {
+			state.focusSectionStart();
+			return true;
+		}
+	};
+	const onKeydown = (event) => {
+		const withModifiers = `${event.shiftKey ? "Shift+" : ""}${event.key}`;
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const repeat = repeatable[withModifiers];
+		if (repeat) {
+			if (!event.isComposing) {
+				repeat();
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
+		if (event.shiftKey || event.repeat || event.isComposing) return;
+		const handler = single[event.key];
+		if (!handler) return;
+		if (handler()) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	};
+	const dayFormatter = useDateFormatter(() => ({
+		timeZone: state.timeZone.value,
+		weekday: toValue(options.weekdayStyle) || "narrow"
+	}));
+	const weekDays = computed(() => {
+		const duration = state.visibleDuration.value;
+		const isDayView = Boolean(duration.days && duration.days < 7);
+		const firstDayOfWeek = toValue(options.firstDayOfWeek);
+		const weekStart = isDayView ? startDate.value : startOfWeek(today(state.timeZone.value), locale.value.locale, firstDayOfWeek);
+		return Array.from({ length: isDayView ? duration.days : 7 }, (_, index) => dayFormatter.value.format(weekStart.add({ days: index }).toDate(state.timeZone.value)));
+	});
+	return {
+		attrs: computed(() => ({
+			...labels.value,
+			"aria-disabled": state.isDisabled.value || void 0,
+			"aria-multiselectable": isRangeCalendarState(state) || state.selectionMode?.value === "multiple" || void 0,
+			"aria-readonly": state.isReadOnly.value || void 0,
+			role: "grid"
+		})),
+		headerAttrs: computed(() => ({ "aria-hidden": true })),
+		onFocusin: () => state.setFocused(true),
+		onFocusout: () => state.setFocused(false),
+		onKeydown,
+		weekDays,
+		weeksInMonth: computed(() => state.getWeeksInMonth(startDate.value))
+	};
+};
+//#endregion
+export { useCalendarGrid };

package/dist/composables/use-calendar-heading.d.ts

@@ -0,0 +1,25 @@
+import type { AnyCalendarState } from "./use-calendar";
+import type { DateDuration } from "@internationalized/date";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface CalendarHeadingFormatOptions {
+    day?: "numeric" | "2-digit";
+    month?: "numeric" | "2-digit" | "long" | "short" | "narrow";
+    year?: "numeric" | "2-digit";
+    era?: "long" | "short" | "narrow";
+}
+export interface UseCalendarHeadingOptions {
+    /** How far past the first visible date this heading describes. @default 0 */
+    offset?: MaybeRefOrGetter<DateDuration | undefined>;
+    /** Overrides the parts the heading is written from. */
+    format?: MaybeRefOrGetter<CalendarHeadingFormatOptions | undefined>;
+}
+/**
+ * The heading over one grid of dates: the month and year, or the range a day view covers.
+ *
+ * Ported from react-aria's `packages/react-aria/src/calendar/useCalendarHeading.ts`
+ * (react-aria 3.51.0).
+ *
+ * The `offset` is what lets a multi-month calendar give each grid its own heading from the one
+ * shared state.
+ */
+export declare const useCalendarHeading: (options: UseCalendarHeadingOptions, state: AnyCalendarState) => ComputedRef<string>;

package/dist/composables/use-calendar-heading.js

@@ -0,0 +1,40 @@
+import { useDateFormatter } from "./use-date-formatter.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-calendar-heading.ts
+/**
+* The heading over one grid of dates: the month and year, or the range a day view covers.
+*
+* Ported from react-aria's `packages/react-aria/src/calendar/useCalendarHeading.ts`
+* (react-aria 3.51.0).
+*
+* The `offset` is what lets a multi-month calendar give each grid its own heading from the one
+* shared state.
+*/
+var useCalendarHeading = (options, state) => {
+	const startDate = computed(() => {
+		const offset = toValue(options.offset);
+		const start = state.visibleRange.value.start;
+		return offset ? start.add(offset) : start;
+	});
+	/** A day or week view names its two ends; a month or year view names the month. */
+	const isDays = computed(() => Boolean(state.visibleDuration.value.days || state.visibleDuration.value.weeks));
+	const formatter = useDateFormatter(() => {
+		const format = toValue(options.format);
+		return {
+			calendar: state.visibleRange.value.start.calendar.identifier,
+			day: format?.day || (isDays.value ? "numeric" : void 0),
+			era: format?.era || startDate.value.calendar.identifier === "gregory" && startDate.value.era === "BC" ? "short" : void 0,
+			month: format?.month || "long",
+			timeZone: state.timeZone.value,
+			year: format?.year || "numeric"
+		};
+	});
+	return computed(() => {
+		const timeZone = state.timeZone.value;
+		if (isDays.value) return formatter.value.formatRange(startDate.value.toDate(timeZone), state.visibleRange.value.end.toDate(timeZone));
+		const displayDate = startDate.value.calendar.getFormattableMonth?.(startDate.value) ?? startDate.value;
+		return formatter.value.format(displayDate.toDate(timeZone));
+	});
+};
+//#endregion
+export { useCalendarHeading };