@octanejs/aria 0.0.1 → 0.0.3

package/src/textfield/useTextField.ts

@@ -0,0 +1,248 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/textfield/useTextField.ts).
+// octane adaptations:
+// - onChange→onInput DOM wiring: the per-keystroke state update rides octane's native
+//   `input` event (identical timing to React's synthetic onChange for text inputs). The
+//   user's own `onInput` prop still runs first (matching React's plugin order, where
+//   onInput fires before onChange), chained ahead of the setter.
+// - The React intrinsic-element generic machinery (JSX.IntrinsicElements lookup types)
+//   collapses to a plain 'input' | 'textarea' parameter with structural prop bags.
+// - `FocusableProps` is the ported native-event version; `enterKeyHint` is always the
+//   camelCase prop (the React-version probe collapses).
+// - Public-hook slot threading.
+import type {
+	AriaLabelingProps,
+	AriaValidationProps,
+	FocusableDOMProps,
+	HelpTextProps,
+	InputBase,
+	LabelableProps,
+	TextInputBase,
+	Validation,
+	ValidationResult,
+	ValueBase,
+	RefObject,
+} from '@react-types/shared';
+import { useState } from 'octane';
+
+import type { FocusableProps } from '../interactions/useFocusable';
+import { S, splitSlot, subSlot } from '../internal';
+import { chain } from '../utils/chain';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { mergeProps } from '../utils/mergeProps';
+import { useControlledState } from '../stately/utils/useControlledState';
+import { useField } from '../label/useField';
+import { useFocusable } from '../interactions/useFocusable';
+import { useFormReset } from '../utils/useFormReset';
+import { useFormValidation } from '../form/useFormValidation';
+import { useFormValidationState } from '../stately/form/useFormValidationState';
+
+type DOMAttributes = Record<string, any>;
+type TextFieldIntrinsicElements = 'input' | 'textarea';
+
+export interface TextFieldProps
+	extends
+		InputBase,
+		Validation<string>,
+		HelpTextProps,
+		FocusableProps,
+		TextInputBase,
+		ValueBase<string>,
+		LabelableProps {}
+
+export interface AriaTextFieldProps
+	extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, AriaValidationProps {
+	// https://www.w3.org/TR/wai-aria-1.2/#textbox
+	/**
+	 * Identifies the currently active element when DOM focus is on a composite widget, textbox,
+	 * group, or application.
+	 */
+	'aria-activedescendant'?: string;
+	/**
+	 * Indicates whether inputting text could trigger display of one or more predictions of the user's
+	 * intended value for an input and specifies how predictions would be presented if they are made.
+	 */
+	'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+	/**
+	 * Indicates the availability and type of interactive popup element, such as menu or dialog, that
+	 * can be triggered by an element.
+	 */
+	'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+	/**
+	 * Identifies the element (or elements) whose contents or presence are controlled by the current
+	 * element.
+	 */
+	'aria-controls'?: string;
+	/**
+	 * An enumerated attribute that defines what action label or icon to preset for the enter key on
+	 * virtual keyboards. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
+	 */
+	enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+	// octane adaptation: the text-input DOM props are structural (upstream's
+	// TextInputDOMProps drags React handler types).
+	type?: string;
+	pattern?: string;
+	autoComplete?: string;
+	autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+	maxLength?: number;
+	minLength?: number;
+	name?: string;
+	form?: string;
+	placeholder?: string;
+	inputMode?: string;
+	autoCorrect?: string;
+	spellCheck?: string | boolean;
+	onCopy?: (e: ClipboardEvent) => void;
+	onCut?: (e: ClipboardEvent) => void;
+	onPaste?: (e: ClipboardEvent) => void;
+	onCompositionEnd?: (e: CompositionEvent) => void;
+	onCompositionStart?: (e: CompositionEvent) => void;
+	onCompositionUpdate?: (e: CompositionEvent) => void;
+	onSelect?: (e: Event) => void;
+	onBeforeInput?: (e: InputEvent) => void;
+	onInput?: (e: Event) => void;
+}
+
+export interface AriaTextFieldOptions<
+	T extends TextFieldIntrinsicElements = 'input',
+> extends AriaTextFieldProps {
+	/**
+	 * The HTML element used to render the input, e.g. 'input', or 'textarea'. It determines whether
+	 * certain HTML attributes will be included in `inputProps`. For example,
+	 * [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
+	 *
+	 * @default 'input'
+	 */
+	inputElementType?: T;
+}
+
+export interface TextFieldAria extends ValidationResult {
+	/** Props for the input element. */
+	inputProps: DOMAttributes;
+	/** Props for the text field's visible label element, if any. */
+	labelProps: DOMAttributes;
+	/** Props for the text field's description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the text field's error message element, if any. */
+	errorMessageProps: DOMAttributes;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a text field.
+ */
+export function useTextField<T extends TextFieldIntrinsicElements = 'input'>(
+	props: AriaTextFieldOptions<T>,
+	ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+): TextFieldAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useTextField<T extends TextFieldIntrinsicElements = 'input'>(
+	props: AriaTextFieldOptions<T>,
+	ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+	slot: symbol | undefined,
+): TextFieldAria;
+export function useTextField(...args: any[]): TextFieldAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useTextField');
+	const props = user[0] as AriaTextFieldOptions<any>;
+	const ref = user[1] as RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
+
+	let {
+		inputElementType = 'input',
+		isDisabled = false,
+		isRequired = false,
+		isReadOnly = false,
+		type = 'text',
+		validationBehavior = 'aria',
+	} = props as any;
+	let [value, setValue] = useControlledState<string>(
+		props.value,
+		props.defaultValue || '',
+		props.onChange,
+		subSlot(slot, 'value'),
+	);
+	let { focusableProps } = useFocusable(props, ref, subSlot(slot, 'focusable'));
+	let validationState = useFormValidationState(
+		{
+			...props,
+			value,
+		},
+		subSlot(slot, 'validationState'),
+	);
+	let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField(
+		{
+			...props,
+			isInvalid,
+			errorMessage: props.errorMessage || validationErrors,
+		},
+		subSlot(slot, 'field'),
+	);
+	let domProps = filterDOMProps(props, { labelable: true });
+
+	const inputOnlyProps = {
+		type,
+		pattern: props.pattern,
+	};
+
+	let [initialValue] = useState(value, subSlot(slot, 'initialValue'));
+	useFormReset(ref, props.defaultValue ?? initialValue, setValue, subSlot(slot, 'reset'));
+	useFormValidation(props, validationState, ref, subSlot(slot, 'validation'));
+
+	return {
+		labelProps,
+		inputProps: mergeProps(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
+			disabled: isDisabled,
+			readOnly: isReadOnly,
+			required: isRequired && validationBehavior === 'native',
+			'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+			'aria-invalid': isInvalid || undefined,
+			'aria-errormessage': props['aria-errormessage'],
+			'aria-activedescendant': props['aria-activedescendant'],
+			'aria-autocomplete': props['aria-autocomplete'],
+			'aria-haspopup': props['aria-haspopup'],
+			'aria-controls': props['aria-controls'],
+			value,
+			// octane adaptation: the state update rides the native `input` event (no
+			// synthetic onChange); the user's own onInput runs first, matching React's
+			// dispatch order for the same native event.
+			onInput: chain(props.onInput, (e: Event) =>
+				setValue((getEventTarget(e) as HTMLInputElement).value),
+			),
+			autoComplete: props.autoComplete,
+			autoCapitalize: props.autoCapitalize,
+			maxLength: props.maxLength,
+			minLength: props.minLength,
+			name: props.name,
+			form: props.form,
+			placeholder: props.placeholder,
+			inputMode: props.inputMode,
+			autoCorrect: props.autoCorrect,
+			spellCheck: props.spellCheck,
+			enterKeyHint: props.enterKeyHint,
+
+			// Clipboard events
+			onCopy: props.onCopy,
+			onCut: props.onCut,
+			onPaste: props.onPaste,
+
+			// Composition events
+			onCompositionEnd: props.onCompositionEnd,
+			onCompositionStart: props.onCompositionStart,
+			onCompositionUpdate: props.onCompositionUpdate,
+
+			// Selection events
+			onSelect: props.onSelect,
+
+			// Input events
+			onBeforeInput: props.onBeforeInput,
+			...focusableProps,
+			...fieldProps,
+		}),
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	};
+}

package/src/toggle/useToggle.ts

@@ -0,0 +1,265 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/toggle/useToggle.ts).
+// octane adaptations:
+// - `react-stately/*` imports → the ported `../stately/*` modules.
+// - DOM wiring uses octane's native `onInput` prop instead of React's synthetic `onChange`
+//   (for checkbox-type inputs the native `input` event fires on every toggle, matching the
+//   upstream timing); `React.ChangeEvent` reads become the native event via
+//   `getEventTarget`. Public value-level `onChange` callbacks are unchanged.
+// - React's `LabelHTMLAttributes`/`InputHTMLAttributes`/`DOMAttributesWithRef` prop-bag
+//   types → a local structural `DOMAttributes` (octane native event props).
+// - The dev-only "you must specify an aria-label" console.warn (and the locals that only
+//   fed it) is not ported (repo policy: no dev-only console warnings).
+// - Public-hook slot threading (splitSlot/subSlot) per the binding convention.
+import type {
+	AriaLabelingProps,
+	AriaValidationProps,
+	FocusableDOMProps,
+	InputDOMProps,
+	PressEvents,
+	RefObject,
+	ValidationResult,
+} from '@react-types/shared';
+import { useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { mergeProps } from '../utils/mergeProps';
+import {
+	privateValidationStateProp,
+	useFormValidationState,
+} from '../stately/form/useFormValidationState';
+import type { ToggleProps, ToggleState } from '../stately/toggle/useToggleState';
+import { useFocusable } from '../interactions/useFocusable';
+import { useFormReset } from '../utils/useFormReset';
+import { useFormValidation } from '../form/useFormValidation';
+import { usePress } from '../interactions/usePress';
+import { useSlotId2 } from '../utils/useSlot';
+
+// octane adaptation: minimal structural prop bag (upstream's drags React attribute types).
+type DOMAttributes = Record<string, any>;
+
+export interface AriaToggleProps
+	extends
+		ToggleProps,
+		FocusableDOMProps,
+		AriaLabelingProps,
+		AriaValidationProps,
+		InputDOMProps,
+		Omit<PressEvents, 'onClick'> {
+	/**
+	 * **Not recommended – use `onPress` instead.** octane adaptation: native MouseEvent
+	 * (upstream's `PressEvents.onClick` is typed over React's synthetic event).
+	 */
+	onClick?: (e: MouseEvent) => void;
+	/**
+	 * Identifies the element (or elements) whose contents or presence are controlled by the current
+	 * element.
+	 */
+	'aria-controls'?: string;
+}
+
+export interface ToggleAria extends ValidationResult {
+	/** Props to be spread on the label element. */
+	labelProps: DOMAttributes;
+	/** Props to be spread on the input element. */
+	inputProps: DOMAttributes;
+	/** Props for the checkbox description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the checkbox error message element, if any. */
+	errorMessageProps: DOMAttributes;
+	/** Whether the toggle is selected. */
+	isSelected: boolean;
+	/** Whether the toggle is in a pressed state. */
+	isPressed: boolean;
+	/** Whether the toggle is disabled. */
+	isDisabled: boolean;
+	/** Whether the toggle is read only. */
+	isReadOnly: boolean;
+	/** Whether the toggle is invalid. */
+	isInvalid: boolean;
+}
+
+/**
+ * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
+ */
+export function useToggle(
+	props: AriaToggleProps,
+	state: ToggleState,
+	ref: RefObject<HTMLInputElement | null>,
+): ToggleAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useToggle(
+	props: AriaToggleProps,
+	state: ToggleState,
+	ref: RefObject<HTMLInputElement | null>,
+	slot: symbol | undefined,
+): ToggleAria;
+export function useToggle(...args: any[]): ToggleAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useToggle');
+	const props = user[0] as AriaToggleProps;
+	const state = user[1] as ToggleState;
+	const ref = user[2] as RefObject<HTMLInputElement | null>;
+
+	let {
+		isDisabled = false,
+		isReadOnly = false,
+		value,
+		name,
+		form,
+		isRequired,
+		validationBehavior = 'aria',
+		'aria-describedby': ariaDescribedby,
+		onPressStart,
+		onPressEnd,
+		onPressChange,
+		onPress,
+		onPressUp,
+		onClick,
+	} = props;
+
+	// Create validation state here because it doesn't make sense to add to general useToggleState.
+	let validationState = useFormValidationState(
+		{ ...props, value: state.isSelected },
+		subSlot(slot, 'validation'),
+	);
+	let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+
+	useFormValidation(props, validationState, ref, subSlot(slot, 'formValidation'));
+
+	let onInput = (e: Event) => {
+		// since we spread props on label, onInput will end up there as well as in here.
+		// so we have to stop propagation at the lowest level that we care about
+		e.stopPropagation();
+		state.setSelected((getEventTarget(e) as HTMLInputElement).checked);
+	};
+
+	// Handle press state for keyboard interactions and cases where labelProps is not used.
+	let { pressProps, isPressed } = usePress(
+		{
+			onPressStart,
+			onPressEnd,
+			onPressChange,
+			onPress,
+			onPressUp,
+			onClick,
+			isDisabled,
+		},
+		subSlot(slot, 'press'),
+	);
+
+	// Handle press state on the label.
+	let [isLabelPressed, setLabelPressed] = useState(false, subSlot(slot, 'labelPressed'));
+	let { pressProps: labelProps } = usePress(
+		{
+			onPressStart(e) {
+				// Keyboard interactions are handled directly on the input.
+				if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+					e.continuePropagation();
+					return;
+				}
+
+				onPressStart?.(e);
+				onPressChange?.(true);
+				setLabelPressed(true);
+			},
+			onPressEnd(e) {
+				// Keyboard interactions are handled directly on the input.
+				if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+					e.continuePropagation();
+					return;
+				}
+
+				onPressEnd?.(e);
+				onPressChange?.(false);
+				setLabelPressed(false);
+			},
+			onPressUp(e) {
+				if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+					e.continuePropagation();
+					return;
+				}
+
+				onPressUp?.(e);
+			},
+			onClick,
+			onPress(e) {
+				if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+					e.continuePropagation();
+					return;
+				}
+
+				onPress?.(e);
+				state.toggle();
+				ref.current?.focus();
+
+				let groupValidationState = (props as any)[privateValidationStateProp];
+
+				let { commitValidation } = groupValidationState ? groupValidationState : validationState;
+
+				commitValidation();
+			},
+			isDisabled: isDisabled || isReadOnly,
+		},
+		subSlot(slot, 'labelPress'),
+	);
+
+	let { focusableProps } = useFocusable(props, ref, subSlot(slot, 'focusable'));
+	let interactions = mergeProps(pressProps, focusableProps);
+	let domProps = filterDOMProps(props, { labelable: true });
+
+	useFormReset(ref, state.defaultSelected, state.setSelected, subSlot(slot, 'formReset'));
+
+	// Copied from useField because we don't want the label behavior that provides.
+	let descriptionProps = useSlotId2(undefined, subSlot(slot, 'description'));
+	let errorMessageProps = useSlotId2(undefined, subSlot(slot, 'errorMessage'));
+
+	return {
+		labelProps: mergeProps(labelProps, {
+			// octane adaptation: upstream preventDefaults ALL label clicks to stop the label's
+			// built-in click-forwarding (a second, doubled activation) — React's synthetic
+			// onChange still fires either way, and the controlled `checked` prop papers over
+			// the cancelled DOM activation. With native events, an unconditional preventDefault
+			// would ALSO cancel the input's own activation (no `input` event → no toggle) for
+			// virtual clicks (element.click(), assistive tech). Scope it to clicks that do NOT
+			// target the input: label-body clicks still can't double-forward, input-targeted
+			// clicks activate natively. Real pointer gestures toggle via the label press path
+			// on both sides; virtual label-body clicks toggle on NEITHER side (React's
+			// onChange only fires for clicks targeting the input).
+			onClick: (e: MouseEvent) => {
+				if (getEventTarget(e) !== ref.current) {
+					e.preventDefault();
+				}
+			},
+		}),
+		inputProps: mergeProps(domProps, {
+			checked: state.isSelected,
+			'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+			required: isRequired && validationBehavior === 'native',
+			'aria-invalid': isInvalid || props.validationState === 'invalid' || undefined,
+			'aria-errormessage': props['aria-errormessage'],
+			'aria-controls': props['aria-controls'],
+			'aria-readonly': isReadOnly || undefined,
+			'aria-describedby':
+				[descriptionProps.id, errorMessageProps.id, ariaDescribedby].filter(Boolean).join(' ') ||
+				undefined,
+			onInput,
+			disabled: isDisabled,
+			...(value == null ? {} : { value }),
+			name,
+			form,
+			type: 'checkbox',
+			...interactions,
+		}),
+		descriptionProps,
+		errorMessageProps,
+		isSelected: state.isSelected,
+		isPressed: isPressed || isLabelPressed,
+		isDisabled,
+		isReadOnly,
+		isInvalid: isInvalid || props.validationState === 'invalid',
+		validationErrors,
+		validationDetails,
+	};
+}

package/src/toolbar/useToolbar.ts

@@ -0,0 +1,147 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/toolbar/useToolbar.ts).
+// octane adaptations: React's FocusEventHandler/KeyboardEventHandler → native event
+// handlers (octane delegates the *Capture props natively); public-hook slot threading.
+import type { AriaLabelingProps, Orientation, RefObject } from '@react-types/shared';
+import { useRef, useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { createFocusManager } from '../focus/FocusScope';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { getActiveElement, getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { useLayoutEffect } from '../utils/useLayoutEffect';
+import { useLocale } from '../i18n/I18nProvider';
+
+export interface AriaToolbarProps extends AriaLabelingProps {
+	/**
+	 * The orientation of the entire toolbar.
+	 *
+	 * @default 'horizontal'
+	 */
+	orientation?: Orientation;
+}
+
+export interface ToolbarAria {
+	/**
+	 * Props for the toolbar container.
+	 */
+	toolbarProps: Record<string, any>;
+}
+
+export function useToolbar(
+	props: AriaToolbarProps,
+	ref: RefObject<HTMLElement | null>,
+): ToolbarAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useToolbar(
+	props: AriaToolbarProps,
+	ref: RefObject<HTMLElement | null>,
+	slot: symbol | undefined,
+): ToolbarAria;
+export function useToolbar(...args: any[]): ToolbarAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useToolbar');
+	const props = user[0] as AriaToolbarProps;
+	const ref = user[1] as RefObject<HTMLElement | null>;
+
+	const {
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledBy,
+		orientation = 'horizontal',
+	} = props;
+	let [isInToolbar, setInToolbar] = useState(false, subSlot(slot, 'inToolbar'));
+	// should be safe because re-calling set state with the same value it already has is a no-op
+	// this will allow us to react should a parent re-render and change its role though
+	useLayoutEffect(
+		() => {
+			setInToolbar(!!(ref.current && ref.current.parentElement?.closest('[role="toolbar"]')));
+		},
+		null,
+		subSlot(slot, 'detect'),
+	);
+	const { direction } = useLocale(subSlot(slot, 'locale'));
+	const shouldReverse = direction === 'rtl' && orientation === 'horizontal';
+	let focusManager = createFocusManager(ref);
+
+	const onKeyDown = (e: KeyboardEvent) => {
+		// don't handle portalled events
+		if (!nodeContains(e.currentTarget as Element, getEventTarget(e) as HTMLElement)) {
+			return;
+		}
+		if (
+			(orientation === 'horizontal' && e.key === 'ArrowRight') ||
+			(orientation === 'vertical' && e.key === 'ArrowDown')
+		) {
+			if (shouldReverse) {
+				focusManager.focusPrevious();
+			} else {
+				focusManager.focusNext();
+			}
+		} else if (
+			(orientation === 'horizontal' && e.key === 'ArrowLeft') ||
+			(orientation === 'vertical' && e.key === 'ArrowUp')
+		) {
+			if (shouldReverse) {
+				focusManager.focusNext();
+			} else {
+				focusManager.focusPrevious();
+			}
+		} else if (e.key === 'Tab') {
+			// When the tab key is pressed, we want to move focus
+			// out of the entire toolbar. To do this, move focus
+			// to the first or last focusable child, and let the
+			// browser handle the Tab key as usual from there.
+			lastFocused.current = getActiveElement() as HTMLElement;
+			if (e.shiftKey) {
+				focusManager.focusFirst();
+			} else {
+				focusManager.focusLast();
+			}
+			return;
+		} else {
+			// if we didn't handle anything, return early so we don't preventDefault
+			return;
+		}
+
+		// Prevent arrow keys from being handled by nested action groups.
+		e.stopPropagation();
+		e.preventDefault();
+	};
+
+	// Record the last focused child when focus moves out of the toolbar.
+	const lastFocused = useRef<HTMLElement | null>(null, subSlot(slot, 'lastFocused'));
+	const onBlur = (e: FocusEvent) => {
+		if (
+			!nodeContains(e.currentTarget as Element, e.relatedTarget as Element) &&
+			!lastFocused.current
+		) {
+			lastFocused.current = getEventTarget(e) as HTMLElement;
+		}
+	};
+
+	// Restore focus to the last focused child when focus returns into the toolbar.
+	// If the element was removed, do nothing, either the first item in the first group,
+	// or the last item in the last group will be focused, depending on direction.
+	const onFocus = (e: FocusEvent) => {
+		if (
+			lastFocused.current &&
+			!nodeContains(e.currentTarget as Element, e.relatedTarget as Element) &&
+			nodeContains(ref.current, getEventTarget(e) as Element)
+		) {
+			lastFocused.current?.focus();
+			lastFocused.current = null;
+		}
+	};
+
+	return {
+		toolbarProps: {
+			...filterDOMProps(props, { labelable: true }),
+			role: !isInToolbar ? 'toolbar' : 'group',
+			'aria-orientation': orientation,
+			'aria-label': ariaLabel,
+			'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,
+			onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
+			onFocusCapture: !isInToolbar ? onFocus : undefined,
+			onBlurCapture: !isInToolbar ? onBlur : undefined,
+		},
+	};
+}