@octanejs/aria 0.0.40 → 0.0.42

package/src/calendar/useCalendarMonthPicker.tsx

@@ -0,0 +1,92 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/calendar/useCalendarMonthPicker.ts).
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CalendarDate } from '@internationalized/date';
+import {
+	CalendarSelectionMode,
+	CalendarState,
+} from '../upstream-exports/react-stately/useCalendarState';
+import { Key } from '@react-types/shared';
+import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import { useDateFormatter } from '../i18n/useDateFormatter';
+import { useLocale } from '../i18n/I18nProvider';
+import { useMemo } from '../compat/react';
+
+export interface CalendarMonthPickerProps {
+	/**
+	 * The format of the month.
+	 */
+	format?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+}
+
+export interface CalendarMonthPickerAria {
+	'aria-label': string;
+	value: Key;
+	onChange: (key: Key | null) => void;
+	items: CalendarMonthPickerItem[];
+}
+
+export interface CalendarMonthPickerItem {
+	id: number;
+	date: CalendarDate;
+	formatted: string;
+}
+
+export function useCalendarMonthPicker(
+	props: CalendarMonthPickerProps,
+	state: CalendarState<CalendarSelectionMode> | RangeCalendarState,
+): CalendarMonthPickerAria {
+	let formatter = useDateFormatter({
+		month: props.format || 'short',
+		calendar: state.focusedDate.calendar.identifier,
+		timeZone: state.timeZone,
+	});
+
+	// Format the name of each month in the year according to the
+	// current locale and calendar system. Note that in some calendar
+	// systems, such as the Hebrew, the number of months may differ
+	// between years.
+	let months: CalendarMonthPickerItem[] = [];
+	let numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	for (let i = 1; i <= numMonths; i++) {
+		let date = state.focusedDate.set({ month: i });
+		// Calendars like the 4-5-4 fiscal calendar use getFormattableMonth to map
+		// their internal month back to the Gregorian month that should be displayed.
+		let displayDate = date.calendar.getFormattableMonth
+			? date.calendar.getFormattableMonth(date)
+			: date;
+		months.push({
+			id: i,
+			date,
+			formatted: formatter.format(displayDate.toDate(state.timeZone)),
+		});
+	}
+
+	let { locale } = useLocale();
+	let ariaLabel = useMemo(
+		() => new Intl.DisplayNames(locale, { type: 'dateTimeField' }).of('month')!,
+		[locale],
+	);
+
+	return {
+		'aria-label': ariaLabel,
+		value: state.focusedDate.month,
+		onChange: (key) => {
+			if (key != null) {
+				state.setFocusedDate(months[Number(key) - 1].date);
+			}
+		},
+		items: months,
+	};
+}

package/src/calendar/useCalendarYearPicker.tsx

@@ -0,0 +1,127 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/calendar/useCalendarYearPicker.ts).
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CalendarDate, isSameYear, toCalendarDate } from '@internationalized/date';
+import {
+	CalendarSelectionMode,
+	CalendarState,
+} from '../upstream-exports/react-stately/useCalendarState';
+import { Key } from '@react-types/shared';
+import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import { useDateFormatter } from '../i18n/useDateFormatter';
+import { useLocale } from '../i18n/I18nProvider';
+import { useMemo } from '../compat/react';
+
+export interface CalendarYearPickerFormatOptions {
+	year?: 'numeric' | '2-digit';
+	era?: 'long' | 'short' | 'narrow';
+}
+
+export interface CalendarYearPickerProps {
+	/**
+	 * The number of years to display.
+	 *
+	 * @default 20
+	 */
+	visibleYears?: number;
+	/**
+	 * The format to display.
+	 */
+	format?: CalendarYearPickerFormatOptions;
+}
+
+export interface CalendarYearPickerAria {
+	'aria-label': string;
+	value: Key;
+	onChange: (key: Key | null) => void;
+	items: CalendarYearPickerItem[];
+}
+
+export interface CalendarYearPickerItem {
+	id: number;
+	date: CalendarDate;
+	formatted: string;
+}
+
+export function useCalendarYearPicker(
+	props: CalendarYearPickerProps,
+	state: CalendarState<CalendarSelectionMode> | RangeCalendarState,
+): CalendarYearPickerAria {
+	let formatter = useDateFormatter({
+		year: props.format?.year || 'numeric',
+		era:
+			props.format?.era ||
+			(state.focusedDate.calendar.identifier === 'gregory' && state.focusedDate.era === 'BC'
+				? 'short'
+				: undefined),
+		calendar: state.focusedDate.calendar.identifier,
+		timeZone: state.timeZone,
+	});
+
+	// Determine the minimum and maximum date. By default, show an equal number of years on each side of the current year.
+	// However, this can be constrained by the calendar's minimum and maximum date.
+	let visibleYears = props.visibleYears || 20;
+	let minDate = state.focusedDate.subtract({ years: Math.floor(visibleYears / 2) });
+	let maxDate = state.focusedDate.add({ years: Math.ceil(visibleYears / 2) - 1 });
+	if (state.maxValue && maxDate.compare(state.maxValue) > 0) {
+		maxDate = toCalendarDate(state.maxValue);
+		minDate = maxDate.subtract({ years: visibleYears - 1 });
+	}
+
+	if (state.minValue && minDate.compare(state.minValue) < 0) {
+		minDate = toCalendarDate(state.minValue);
+		maxDate = minDate.add({ years: visibleYears - 1 });
+		if (state.maxValue && maxDate.compare(state.maxValue) > 0) {
+			maxDate = toCalendarDate(state.maxValue);
+		}
+	}
+
+	let years: CalendarYearPickerItem[] = [];
+	let date = minDate;
+	let value = 0;
+	while (date.compare(maxDate) <= 0) {
+		if (isSameYear(date, state.focusedDate)) {
+			value = years.length;
+		}
+
+		years.push({
+			// Use the index as the id so we can retrieve the full
+			// date object from the list in onChange. We cannot only
+			// store the year number, because in some calendars, such
+			// as the Japanese, the era may also change.
+			id: years.length,
+			date,
+			formatted: formatter.format(date.toDate(state.timeZone)),
+		});
+
+		date = date.add({ years: 1 });
+	}
+
+	let { locale } = useLocale();
+	let ariaLabel = useMemo(
+		() => new Intl.DisplayNames(locale, { type: 'dateTimeField' }).of('year')!,
+		[locale],
+	);
+
+	return {
+		'aria-label': ariaLabel,
+		value,
+		onChange: (key) => {
+			if (key != null) {
+				state.setFocusedDate(years[Number(key)].date);
+			}
+		},
+		items: years,
+	};
+}

package/src/calendar/useRangeCalendar.tsx

@@ -0,0 +1,121 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/calendar/useRangeCalendar.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { AriaLabelingProps, DOMProps, FocusableElement, RefObject } from '@react-types/shared';
+import { CalendarAria, useCalendarBase } from './useCalendarBase';
+import {
+	DateValue,
+	RangeCalendarState,
+} from '../upstream-exports/react-stately/useRangeCalendarState';
+import { isFocusWithin, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { RangeCalendarProps } from '../upstream-exports/react-stately/useRangeCalendarState';
+import { useEvent } from '../utils/useEvent';
+import { useRef } from '../compat/react';
+
+export interface AriaRangeCalendarProps<T extends DateValue>
+	extends RangeCalendarProps<T>, DOMProps, AriaLabelingProps {
+	/**
+	 * Controls the behavior when a pointer is released outside the calendar or a blur occurs mid
+	 * selection:
+	 *
+	 * - `clear`: clear the currently selected range of dates.
+	 * - `reset`: reset the selection to the previously selected range of dates.
+	 * - `select`: select the currently hovered range of dates.
+	 *
+	 * @default 'select'
+	 */
+	commitBehavior?: 'clear' | 'reset' | 'select';
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a range calendar component. A range
+ * calendar displays one or more date grids and allows users to select a contiguous range of dates.
+ */
+export function useRangeCalendar<T extends DateValue>(
+	props: AriaRangeCalendarProps<T>,
+	state: RangeCalendarState,
+	ref: RefObject<FocusableElement | null>,
+): CalendarAria {
+	let { commitBehavior = 'select', ...otherProps } = props;
+	let res = useCalendarBase(otherProps, state);
+
+	// We need to ignore virtual pointer events from VoiceOver due to these bugs.
+	// https://bugs.webkit.org/show_bug.cgi?id=222627
+	// https://bugs.webkit.org/show_bug.cgi?id=223202
+	// usePress also does this and waits for the following click event before firing.
+	// We need to match that here otherwise this will fire before the press event in
+	// useCalendarCell, causing range selection to not work properly.
+	let isVirtualClick = useRef(false);
+	let windowRef = useRef(typeof window !== 'undefined' ? window : null);
+	useEvent(windowRef, 'pointerdown', (e) => {
+		isVirtualClick.current = e.width === 0 && e.height === 0;
+	});
+
+	const commitBehaviorMapping = {
+		clear: () => state.clearSelection(),
+		reset: () => state.setAnchorDate(null),
+		select: () => state.commitSelection(),
+	};
+
+	// Execute method corresponding to `commitBehavior` when pressing or releasing a pointer outside the calendar body,
+	// except when pressing the next or previous buttons to switch months.
+	let endDragging = (e: PointerEvent) => {
+		if (isVirtualClick.current) {
+			isVirtualClick.current = false;
+			return;
+		}
+
+		state.setDragging(false);
+		if (!state.anchorDate) {
+			return;
+		}
+
+		let target = e.target as Element;
+		if (
+			ref.current &&
+			isFocusWithin(ref.current) &&
+			(!nodeContains(ref.current, target) || !target.closest('button, [role="button"]'))
+		) {
+			commitBehaviorMapping[commitBehavior]();
+		}
+	};
+
+	useEvent(windowRef, 'pointerup', endDragging);
+
+	// Also execute method corresponding to `commitBehavior` on blur,
+	// e.g. tabbing away from the calendar.
+	res.calendarProps.onBlur = (e) => {
+		if (!ref.current) {
+			return;
+		}
+
+		if ((!e.relatedTarget || !nodeContains(ref.current, e.relatedTarget)) && state.anchorDate) {
+			commitBehaviorMapping[commitBehavior]();
+		}
+	};
+
+	// Prevent touch scrolling while dragging
+	useEvent(
+		ref,
+		'touchmove',
+		(e) => {
+			if (state.isDragging) {
+				e.preventDefault();
+			}
+		},
+		{ passive: false, capture: true },
+	);
+
+	return res;
+}

package/src/calendar/utils.tsx

@@ -0,0 +1,183 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/calendar/utils.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+	CalendarDate,
+	DateFormatter,
+	endOfMonth,
+	isSameDay,
+	startOfMonth,
+} from '@internationalized/date';
+import {
+	CalendarSelectionMode,
+	CalendarState,
+} from '../upstream-exports/react-stately/useCalendarState';
+import intlMessages from '../intl/calendar/index';
+import type { LocalizedStringFormatter } from '@internationalized/string';
+import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import { useDateFormatter } from '../i18n/useDateFormatter';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMemo } from '../compat/react';
+
+interface HookData {
+	ariaLabel?: string;
+	ariaLabelledBy?: string;
+	errorMessageId: string;
+	selectedDateDescription: string;
+}
+
+export const hookData: WeakMap<
+	CalendarState<CalendarSelectionMode> | RangeCalendarState,
+	HookData
+> = new WeakMap<CalendarState<CalendarSelectionMode> | RangeCalendarState, HookData>();
+
+export function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {
+	return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
+}
+
+export function useSelectedDateDescription(
+	state: CalendarState<'single' | 'multiple'> | RangeCalendarState,
+): string {
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
+
+	let start: CalendarDate | undefined, end: CalendarDate | undefined;
+	if ('highlightedRange' in state) {
+		({ start, end } = state.highlightedRange || {});
+	} else {
+		start = Array.isArray(state.value) ? state.value[0] : (state.value ?? undefined);
+		end = Array.isArray(state.value) ? state.value.at(-1) : (state.value ?? undefined);
+	}
+
+	let dateFormatter = useDateFormatter({
+		weekday: 'long',
+		month: 'long',
+		year: 'numeric',
+		day: 'numeric',
+		era: getEraFormat(start) || getEraFormat(end),
+		timeZone: state.timeZone,
+	});
+
+	let { locale } = useLocale();
+	let listFormatter = useMemo(() => new Intl.ListFormat(locale), [locale]);
+
+	let anchorDate = 'anchorDate' in state ? state.anchorDate : null;
+	return useMemo(() => {
+		// No message if currently selecting a range, or there is nothing highlighted.
+		if (!anchorDate && start && end) {
+			// Use a single date message if the start and end dates are the same day,
+			// otherwise include both dates.
+			if (isSameDay(start, end)) {
+				let date = dateFormatter.format(start.toDate(state.timeZone));
+				return stringFormatter.format('selectedDateDescription', { date });
+			} else if ('highlightedRange' in state) {
+				let dateRange = formatRange(dateFormatter, stringFormatter, start, end, state.timeZone);
+				return stringFormatter.format('selectedRangeDescription', { dateRange });
+			} else if (Array.isArray(state.value)) {
+				let dates = state.value.map((date) => dateFormatter.format(date.toDate(state.timeZone)));
+				let formatted = listFormatter.format(dates);
+				return stringFormatter.format('selectedDateDescription', { date: formatted });
+			}
+		}
+		return '';
+	}, [start, end, anchorDate, state, stringFormatter, dateFormatter, listFormatter]);
+}
+
+export function useVisibleRangeDescription(
+	startDate: CalendarDate,
+	endDate: CalendarDate,
+	timeZone: string,
+	isAria: boolean,
+): string {
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
+	let era: any = getEraFormat(startDate) || getEraFormat(endDate);
+	let monthFormatter = useDateFormatter({
+		month: 'long',
+		year: 'numeric',
+		era,
+		calendar: startDate.calendar.identifier,
+		timeZone,
+	});
+
+	let dateFormatter = useDateFormatter({
+		month: 'long',
+		year: 'numeric',
+		day: 'numeric',
+		era,
+		calendar: startDate.calendar.identifier,
+		timeZone,
+	});
+
+	return useMemo(() => {
+		// Special case for month granularity. Format as a single month if only a
+		// single month is visible, otherwise format as a range of months.
+		if (isSameDay(startDate, startOfMonth(startDate))) {
+			let startMonth = startDate;
+			let endMonth = endDate;
+			if (startDate.calendar.getFormattableMonth) {
+				startMonth = startDate.calendar.getFormattableMonth(startDate);
+			}
+			if (endDate.calendar.getFormattableMonth) {
+				endMonth = endDate.calendar.getFormattableMonth(endDate);
+			}
+
+			if (isSameDay(endDate, endOfMonth(startDate))) {
+				return monthFormatter.format(startMonth.toDate(timeZone));
+			} else if (isSameDay(endDate, endOfMonth(endDate))) {
+				return isAria
+					? formatRange(monthFormatter, stringFormatter, startMonth, endMonth, timeZone)
+					: monthFormatter.formatRange(startMonth.toDate(timeZone), endMonth.toDate(timeZone));
+			}
+		}
+
+		return isAria
+			? formatRange(dateFormatter, stringFormatter, startDate, endDate, timeZone)
+			: dateFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
+	}, [startDate, endDate, monthFormatter, dateFormatter, stringFormatter, timeZone, isAria]);
+}
+
+function formatRange(
+	dateFormatter: DateFormatter,
+	stringFormatter: LocalizedStringFormatter,
+	start: CalendarDate,
+	end: CalendarDate,
+	timeZone: string,
+) {
+	let parts = dateFormatter.formatRangeToParts(start.toDate(timeZone), end.toDate(timeZone));
+
+	// Find the separator between the start and end date. This is determined
+	// by finding the last shared literal before the end range.
+	let separatorIndex = -1;
+	for (let i = 0; i < parts.length; i++) {
+		let part = parts[i];
+		if (part.source === 'shared' && part.type === 'literal') {
+			separatorIndex = i;
+		} else if (part.source === 'endRange') {
+			break;
+		}
+	}
+
+	// Now we can combine the parts into start and end strings.
+	let startValue = '';
+	let endValue = '';
+	for (let i = 0; i < parts.length; i++) {
+		if (i < separatorIndex) {
+			startValue += parts[i].value;
+		} else if (i > separatorIndex) {
+			endValue += parts[i].value;
+		}
+	}
+
+	return stringFormatter.format('dateRange', { startDate: startValue, endDate: endValue });
+}