@octanejs/aria 0.0.46 → 0.0.48

package/src/intl/table/nb-NO.json

@@ -1,13 +1,13 @@
 {
   "ascending": "stigende",
   "ascendingSort": "sortert etter kolonne {columnName} i stigende rekkefølge",
+  "collapse": "Skjul",
   "columnSize": "{value} piksler",
   "descending": "synkende",
   "descendingSort": "sortert etter kolonne {columnName} i synkende rekkefølge",
+  "expand": "Utvid",
   "resizerDescription": "Trykk på Enter for å starte størrelsesendring",
   "select": "Velg",
   "selectAll": "Velg alle",
-  "sortable": "kolonne som kan sorteres",
-  "collapse": "Skjul",
-  "expand": "Utvid"
+  "sortable": "kolonne som kan sorteres"
 }

package/src/intl/table/nl-NL.json

@@ -1,13 +1,13 @@
 {
   "ascending": "oplopend",
   "ascendingSort": "gesorteerd in oplopende volgorde in kolom {columnName}",
+  "collapse": "Samenvouwen",
   "columnSize": "{value} pixels",
   "descending": "aflopend",
   "descendingSort": "gesorteerd in aflopende volgorde in kolom {columnName}",
+  "expand": "Uitvouwen",
   "resizerDescription": "Druk op Enter om het formaat te wijzigen",
   "select": "Selecteren",
   "selectAll": "Alles selecteren",
-  "sortable": "sorteerbare kolom",
-  "collapse": "Samenvouwen",
-  "expand": "Uitvouwen"
+  "sortable": "sorteerbare kolom"
 }

package/src/intl/table/pl-PL.json

@@ -1,13 +1,13 @@
 {
   "ascending": "rosnąco",
   "ascendingSort": "posortowano według kolumny {columnName} w porządku rosnącym",
+  "collapse": "Zwiń",
   "columnSize": "Liczba pikseli: {value}",
   "descending": "malejąco",
   "descendingSort": "posortowano według kolumny {columnName} w porządku malejącym",
+  "expand": "Rozwiń",
   "resizerDescription": "Naciśnij Enter, aby rozpocząć zmienianie rozmiaru",
   "select": "Zaznacz",
   "selectAll": "Zaznacz wszystko",
-  "sortable": "kolumna z możliwością sortowania",
-  "collapse": "Zwiń",
-  "expand": "Rozwiń"
+  "sortable": "kolumna z możliwością sortowania"
 }

package/src/intl/table/pt-BR.json

@@ -1,13 +1,13 @@
 {
   "ascending": "crescente",
   "ascendingSort": "classificado pela coluna {columnName} em ordem crescente",
+  "collapse": "Recolher",
   "columnSize": "{value} pixels",
   "descending": "decrescente",
   "descendingSort": "classificado pela coluna {columnName} em ordem decrescente",
+  "expand": "Expandir",
   "resizerDescription": "Pressione Enter para começar a redimensionar",
   "select": "Selecionar",
   "selectAll": "Selecionar tudo",
-  "sortable": "coluna classificável",
-  "collapse": "Recolher",
-  "expand": "Expandir"
+  "sortable": "coluna classificável"
 }

package/src/intl/table/pt-PT.json

@@ -1,13 +1,13 @@
 {
   "ascending": "ascendente",
   "ascendingSort": "Ordenar por coluna {columnName} em ordem ascendente",
+  "collapse": "Colapsar",
   "columnSize": "{value} pixels",
   "descending": "descendente",
   "descendingSort": "Ordenar por coluna {columnName} em ordem descendente",
+  "expand": "Expandir",
   "resizerDescription": "Prima Enter para iniciar o redimensionamento",
   "select": "Selecionar",
   "selectAll": "Selecionar tudo",
-  "sortable": "Coluna ordenável",
-  "collapse": "Colapsar",
-  "expand": "Expandir"
+  "sortable": "Coluna ordenável"
 }

package/src/intl/table/ro-RO.json

@@ -1,13 +1,13 @@
 {
   "ascending": "crescătoare",
   "ascendingSort": "sortate după coloana {columnName} în ordine crescătoare",
+  "collapse": "Restrângeți",
   "columnSize": "{value} pixeli",
   "descending": "descrescătoare",
   "descendingSort": "sortate după coloana {columnName} în ordine descrescătoare",
+  "expand": "Extindeți",
   "resizerDescription": "Apăsați pe Enter pentru a începe redimensionarea",
   "select": "Selectare",
   "selectAll": "Selectare totală",
-  "sortable": "coloană sortabilă",
-  "collapse": "Restrângeți",
-  "expand": "Extindeți"
+  "sortable": "coloană sortabilă"
 }

package/src/intl/table/ru-RU.json

@@ -1,13 +1,13 @@
 {
   "ascending": "возрастание",
   "ascendingSort": "сортировать столбец {columnName} в порядке возрастания",
+  "collapse": "Свернуть",
   "columnSize": "{value} пикс.",
   "descending": "убывание",
   "descendingSort": "сортировать столбец {columnName} в порядке убывания",
+  "expand": "Развернуть",
   "resizerDescription": "Нажмите клавишу Enter для начала изменения размеров",
   "select": "Выбрать",
   "selectAll": "Выбрать все",
-  "sortable": "сортируемый столбец",
-  "collapse": "Свернуть",
-  "expand": "Развернуть"
+  "sortable": "сортируемый столбец"
 }

package/src/intl/table/sk-SK.json

@@ -1,13 +1,13 @@
 {
   "ascending": "vzostupne",
   "ascendingSort": "zoradené zostupne podľa stĺpca {columnName}",
+  "collapse": "Zbaliť",
   "columnSize": "Počet pixelov: {value}",
   "descending": "zostupne",
   "descendingSort": "zoradené zostupne podľa stĺpca {columnName}",
+  "expand": "Rozbaliť",
   "resizerDescription": "Stlačením klávesu Enter začnete zmenu veľkosti",
   "select": "Vybrať",
   "selectAll": "Vybrať všetko",
-  "sortable": "zoraditeľný stĺpec",
-  "collapse": "Zbaliť",
-  "expand": "Rozbaliť"
+  "sortable": "zoraditeľný stĺpec"
 }

package/src/intl/table/sl-SI.json

@@ -1,13 +1,13 @@
 {
   "ascending": "naraščajoče",
   "ascendingSort": "razvrščeno po stolpcu {columnName} v naraščajočem vrstnem redu",
+  "collapse": "Strni",
   "columnSize": "{value} slikovnih pik",
   "descending": "padajoče",
   "descendingSort": "razvrščeno po stolpcu {columnName} v padajočem vrstnem redu",
+  "expand": "Razširi",
   "resizerDescription": "Pritisnite tipko Enter da začnete spreminjati velikost",
   "select": "Izberite",
   "selectAll": "Izberite vse",
-  "sortable": "razvrstljivi stolpec",
-  "collapse": "Strni",
-  "expand": "Razširi"
+  "sortable": "razvrstljivi stolpec"
 }

package/src/intl/table/sr-SP.json

@@ -1,13 +1,13 @@
 {
   "ascending": "rastući",
   "ascendingSort": "sortirano po kolonama {columnName} rastućim redosledom",
+  "collapse": "Skupi",
   "columnSize": "{value} piksela",
   "descending": "padajući",
   "descendingSort": "sortirano po kolonama {columnName} padajućim redosledom",
+  "expand": "Proširi",
   "resizerDescription": "Pritisnite Enter da biste započeli promenu veličine",
   "select": "Izaberite",
   "selectAll": "Izaberite sve",
-  "sortable": "kolona koja se može sortirati",
-  "collapse": " Skupi",
-  "expand": "Proširi"
+  "sortable": "kolona koja se može sortirati"
 }

package/src/intl/table/sv-SE.json

@@ -1,13 +1,13 @@
 {
   "ascending": "stigande",
   "ascendingSort": "sorterat på kolumn {columnName} i stigande ordning",
+  "collapse": "Dölj",
   "columnSize": "{value} pixlar",
   "descending": "fallande",
   "descendingSort": "sorterat på kolumn {columnName} i fallande ordning",
+  "expand": "Expandera",
   "resizerDescription": "Tryck på Retur för att börja ändra storlek",
   "select": "Markera",
   "selectAll": "Markera allt",
-  "sortable": "sorterbar kolumn",
-  "collapse": "Dölj",
-  "expand": "Expandera"
+  "sortable": "sorterbar kolumn"
 }

package/src/intl/table/tr-TR.json

@@ -1,13 +1,13 @@
 {
   "ascending": "artan sırada",
   "ascendingSort": "{columnName} sütuna göre artan düzende sırala",
+  "collapse": "Daralt",
   "columnSize": "{value} piksel",
   "descending": "azalan sırada",
   "descendingSort": "{columnName} sütuna göre azalan düzende sırala",
+  "expand": "Genişlet",
   "resizerDescription": "Yeniden boyutlandırmak için Enter'a basın",
   "select": "Seç",
   "selectAll": "Tümünü Seç",
-  "sortable": "Sıralanabilir sütun",
-  "collapse": "Daralt",
-  "expand": "Genişlet"
+  "sortable": "Sıralanabilir sütun"
 }

package/src/intl/table/uk-UA.json

@@ -1,13 +1,13 @@
 {
   "ascending": "висхідний",
   "ascendingSort": "відсортовано за стовпцем {columnName} у висхідному порядку",
+  "collapse": "Згорнути",
   "columnSize": "{value} пікс.",
   "descending": "низхідний",
   "descendingSort": "відсортовано за стовпцем {columnName} у низхідному порядку",
+  "expand": "Розгорнути",
   "resizerDescription": "Натисніть Enter, щоб почати зміну розміру",
   "select": "Вибрати",
   "selectAll": "Вибрати все",
-  "sortable": "сортувальний стовпець",
-  "collapse": "Згорнути",
-  "expand": "Розгорнути"
+  "sortable": "сортувальний стовпець"
 }

package/src/intl/table/zh-CN.json

@@ -1,13 +1,13 @@
 {
   "ascending": "升序",
   "ascendingSort": "按列 {columnName} 升序排序",
+  "collapse": "折叠",
   "columnSize": "{value} 像素",
   "descending": "降序",
   "descendingSort": "按列 {columnName} 降序排序",
-  "resizerDescription": "按“输入”键开始调整大小。",
+  "expand": "扩展",
+  "resizerDescription": "按 Enter 开始调整大小。",
   "select": "选择",
   "selectAll": "全选",
-  "sortable": "可排序的列",
-  "collapse": "折叠",
-  "expand": "扩展"
+  "sortable": "可排序的列"
 }

package/src/intl/table/zh-TW.json

@@ -1,13 +1,13 @@
 {
   "ascending": "遞增",
   "ascendingSort": "已依據「{columnName}」欄遞增排序",
+  "collapse": "收合",
   "columnSize": "{value} 像素",
   "descending": "遞減",
   "descendingSort": "已依據「{columnName}」欄遞減排序",
+  "expand": "展開",
   "resizerDescription": "按 Enter 鍵以開始調整大小",
   "select": "選取",
   "selectAll": "全選",
-  "sortable": "可排序的欄",
-  "collapse": "收合",
-  "expand": "展開"
+  "sortable": "可排序的欄"
 }

package/src/intl/tree/es-ES.json

@@ -1,4 +1,4 @@
 {
   "collapse": "Contraer",
-  "expand": "Ampliar"
+  "expand": "Expandir"
 }

package/src/link/useLink.ts

@@ -63,6 +63,7 @@ export function useLink(...args: any[]): LinkAria {
 		onPress,
 		onPressStart,
 		onPressEnd,
+		onPressChange,
 		onClick,
 		isDisabled,
 		...otherProps
@@ -81,6 +82,7 @@ export function useLink(...args: any[]): LinkAria {
 			onPress,
 			onPressStart,
 			onPressEnd,
+			onPressChange,
 			onClick,
 			isDisabled,
 			ref,

package/src/menu/useMenuItem.ts

@@ -353,44 +353,41 @@ export function useMenuItem(...args: any[]): MenuItemAria {
 
 	let { keyboardProps } = useKeyboard(
 		{
-			onKeyDown: (e) => {
-				// Ignore repeating events, which may have started on the menu trigger before moving
-				// focus to the menu item. We want to wait for a second complete key press sequence.
-				if (e.repeat) {
-					e.continuePropagation();
-					return;
-				}
-
-				switch (e.key) {
-					case ' ':
-						interaction.current = { pointerType: 'keyboard', key: ' ' };
-						(getEventTarget(e) as HTMLElement).click();
-
-						// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
-						// to the newly opened submenu's first item.
-						setInteractionModality('keyboard');
-						break;
-					case 'Enter':
-						interaction.current = { pointerType: 'keyboard', key: 'Enter' };
-
-						// Trigger click unless this is a link. Links trigger click natively.
-						if ((getEventTarget(e) as HTMLElement).tagName !== 'A') {
-							(getEventTarget(e) as HTMLElement).click();
-						}
-
-						// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
-						// to the newly opened submenu's first item.
+			shortcuts: {
+				' ': (e) => {
+					// Ignore repeating events, which may have started on the menu trigger before moving
+					// focus to the menu item. We want to wait for a second complete key press sequence.
+
+					interaction.current = { pointerType: 'keyboard', key: ' ' };
+					(getEventTarget(e) as HTMLElement).click();
+
+					// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
+					// to the newly opened submenu's first item.
+					setInteractionModality('keyboard');
+				},
+				Enter: (e) => {
+					interaction.current = { pointerType: 'keyboard', key: 'Enter' };
+
+					// Trigger click unless this is a link. Links trigger click natively.
+					let target = getEventTarget(e) as HTMLElement;
+
+					// Trigger click unless this is a link. Links with real DOM focus activate on Enter natively.
+					// With virtual focus (e.g. Autocomplete) focus stays on the input and useAutocomplete dispatches
+					// keydown here then follows with a synthetic click only if dispatchEvent was not canceled—so
+					// links must not preventDefault on that keydown.
+					if (target.tagName !== 'A') {
+						target.click();
 						setInteractionModality('keyboard');
-						break;
-					default:
-						if (!isTrigger) {
-							e.continuePropagation();
-						}
-
-						onKeyDown?.(e);
-						break;
-				}
+						return;
+					}
+
+					// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
+					// to the newly opened submenu's first item.
+					setInteractionModality('keyboard');
+					return { shouldPreventDefault: false, shouldContinuePropagation: false };
+				},
 			},
+			onKeyDown,
 			onKeyUp,
 		},
 		subSlot(slot, 'keyboard'),

package/src/menu/useMenuTrigger.tsx

@@ -0,0 +1,222 @@
+/** @jsxImportSource octane */
+import type { BaseEvent } from '../interactions/createEventHandler';
+type KeyboardEvent = BaseEvent<globalThis.KeyboardEvent>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/menu/useMenuTrigger.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 { AriaButtonProps } from '../button/useButton';
+import { withSlot } from 'octane';
+import { AriaMenuOptions } from './useMenu';
+import { FocusableElement, FocusStrategy, RefObject } from '@react-types/shared';
+import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
+import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import intlMessages from '../intl/menu/index';
+import {
+	MenuTriggerState,
+	MenuTriggerType,
+} from '../upstream-exports/react-stately/useMenuTriggerState';
+import { PressProps } from '../interactions/usePress';
+import { useContextMenu } from '../interactions/useContextMenu';
+import { useEffect } from '../compat/react';
+import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useLongPress } from '../interactions/useLongPress';
+import { useOverlayTrigger } from '../overlays/useOverlayTrigger';
+
+export interface AriaMenuTriggerProps {
+	/** The type of menu that the menu trigger opens. */
+	type?: 'menu' | 'listbox';
+	/** Whether menu trigger is disabled. */
+	isDisabled?: boolean;
+	/** How menu is triggered. */
+	trigger?: MenuTriggerType;
+}
+
+export interface MenuTriggerAria<T> {
+	/** Props for the menu trigger element. */
+	menuTriggerProps: AriaButtonProps;
+
+	/** Props for the menu. */
+	menuProps: AriaMenuOptions<T>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu trigger.
+ *
+ * @param props - Props for the menu trigger.
+ * @param state - State for the menu trigger.
+ * @param ref - Ref to the HTML element trigger for the menu.
+ */
+export function useMenuTrigger<T>(
+	props: AriaMenuTriggerProps,
+	state: MenuTriggerState,
+	ref: RefObject<Element | null>,
+	_slot?: symbol,
+): MenuTriggerAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useMenuTrigger<T>, props, state, ref);
+	}
+
+	let { type = 'menu', isDisabled, trigger = 'press' } = props;
+
+	let menuTriggerId = useId();
+	let { triggerProps, overlayProps } = useOverlayTrigger({ type }, state, ref);
+
+	let open = (
+		shouldOpen: boolean,
+		e: KeyboardEvent,
+		focusStrategy: FocusStrategy = 'first',
+	): boolean | void => {
+		if (!shouldOpen || e.isDefaultPrevented()) {
+			return false;
+		}
+		state.toggle(focusStrategy);
+	};
+
+	// React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
+	// useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
+	// We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
+	// And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
+	let { keyboardProps } = useKeyboard({
+		isDisabled,
+		shortcuts: {
+			Enter: (e) => {
+				return open(trigger !== 'longPress', e, 'first');
+			},
+			' ': (e) => {
+				return open(trigger !== 'longPress', e, 'first');
+			},
+			ArrowDown: (e) => {
+				return open(trigger !== 'longPress', e, 'first');
+			},
+			ArrowUp: (e) => {
+				return open(trigger !== 'longPress', e, 'last');
+			},
+			'Alt+Enter': (e) => {
+				return open(trigger === 'longPress', e, 'first');
+			},
+			'Alt+ ': (e) => {
+				return open(trigger === 'longPress', e, 'first');
+			},
+			// Alt+Arrow* must open for both trigger modes: for `press` it matches the same `e.key` cases as
+			// plain Arrow*; for `longPress`, plain arrows are ignored elsewhere and Alt+Arrow is the opener
+			// (see legacy `if (trigger === 'longPress' && !e.altKey) return` before the ArrowDown/Up switch).
+			'Alt+ArrowDown': (e) => {
+				return open(true, e, 'first');
+			},
+			'Alt+ArrowUp': (e) => {
+				return open(true, e, 'last');
+			},
+		},
+	});
+
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');
+	let { longPressProps } = useLongPress({
+		isDisabled: isDisabled || trigger !== 'longPress',
+		accessibilityDescription: stringFormatter.format('longPressMessage'),
+		onLongPressStart() {
+			state.close();
+		},
+		onLongPress() {
+			state.open('first');
+		},
+	});
+
+	let pressProps: PressProps = {
+		preventFocusOnPress: true,
+		onPressStart(e) {
+			// For consistency with native, open the menu on mouse/key down, but touch up.
+			if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {
+				// Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.
+				focusWithoutScrolling(e.target as FocusableElement);
+
+				// If opened with a screen reader, auto focus the first item.
+				// Otherwise, the menu itself will be focused.
+				state.open(e.pointerType === 'virtual' ? 'first' : null);
+			}
+		},
+		onPress(e) {
+			if (e.pointerType === 'touch' && !isDisabled) {
+				// Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.
+				focusWithoutScrolling(e.target as FocusableElement);
+
+				state.toggle();
+			}
+		},
+	};
+
+	// omit onPress from triggerProps since we override it above.
+	// oxlint-disable-next-line react/react-compiler
+	delete triggerProps.onPress;
+
+	let { contextMenuProps } = useContextMenu({
+		onContextMenu(e) {
+			// This is not a DOM event, so the linter is incorrect.
+			// eslint-disable-next-line rsp-rules/safe-event-target
+			let rect = e.target.getBoundingClientRect();
+			state.setPoint({ x: rect.x + e.x, y: rect.y + e.y });
+			state.open();
+		},
+	});
+
+	useEffect(() => {
+		// Close context menus when right clicking outside. The browser's context menu will appear instead.
+		if (state.isOpen && trigger === 'contextMenu') {
+			let onContextMenu = (e: MouseEvent) => {
+				// Checking if the target is the body works because everything outside the menu is inert.
+				if (
+					(e.button === 2 || (e.button === 0 && e.ctrlKey === true)) &&
+					getEventTarget(e) === document.body
+				) {
+					state.close();
+				}
+			};
+			document.addEventListener('mousedown', onContextMenu);
+			return () => document.removeEventListener('mousedown', onContextMenu);
+		}
+	}, [state, trigger]);
+
+	let interactionProps;
+	if (trigger === 'press') {
+		interactionProps = { ...pressProps, ...keyboardProps };
+	} else if (trigger === 'longPress') {
+		interactionProps = { ...longPressProps, ...keyboardProps };
+	} else if (trigger === 'contextMenu') {
+		interactionProps = contextMenuProps;
+
+		// Remove aria-haspopup and associated attributes from context menu triggers.
+		// aria-haspopup indicates that the trigger opens a menu on activation (i.e. click/Enter),
+		// which is not the case for context menus, so this would lead to confusing announcements.
+		// Context menus are equally discoverable (or not) by sighted and non-sighted users,
+		// so we don't need a screen reader specific announcement.
+		// See https://github.com/w3c/aria/issues/1971 for further discussion.
+		let { 'aria-haspopup': _a, 'aria-expanded': _b, 'aria-controls': _c, ...rest } = triggerProps;
+		triggerProps = rest;
+	}
+
+	return {
+		// @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples
+		menuTriggerProps: {
+			...triggerProps,
+			...interactionProps,
+			id: menuTriggerId,
+		},
+		menuProps: {
+			...overlayProps,
+			'aria-labelledby': menuTriggerId,
+			autoFocus: state.focusStrategy || true,
+			onClose: state.close,
+		},
+	};
+}