@octanejs/aria 0.0.46 → 0.0.47

package/src/components/TokenField.tsx

@@ -0,0 +1,395 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria-components/src/TokenField.tsx).
+/*
+ * 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 { isChildrenBlock, type OctaneNode } from 'octane';
+import { AriaTokenFieldProps } from '../upstream-exports/react-aria/useTokenField';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RenderProps,
+	SlotProps,
+	StyleRenderProps,
+	useContextProps,
+	useRenderProps,
+	useSlot,
+	useSlottedContext,
+} from './utils';
+import { createHideableComponent } from '../collections/Hidden';
+import { FieldInputContext } from './Autocomplete';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { forwardRefType, GlobalDOMAttributes } from '@react-types/shared';
+import { HoverProps, useHover } from '../upstream-exports/react-aria/useHover';
+import { LabelContext } from './Label';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import { mergeRefs } from '../upstream-exports/react-aria/mergeRefs';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	HTMLAttributes,
+	memo,
+	RefObject,
+	useContext,
+	useMemo,
+} from '../compat/react';
+import { TextContext } from './Text';
+import {
+	TokenFieldState,
+	TokenFieldValue,
+	TokenSegment,
+	useTokenFieldState,
+} from '../upstream-exports/react-stately/useTokenFieldState';
+import { useFocusRing } from '../upstream-exports/react-aria/useFocusRing';
+import { useObjectRef } from '../upstream-exports/react-aria/useObjectRef';
+import { useToken, useTokenField } from '../upstream-exports/react-aria/useTokenField';
+
+export interface TokenFieldRenderProps {
+	/**
+	 * Whether the token field is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the token field is read only.
+	 *
+	 * @selector [data-readonly]
+	 */
+	isReadOnly: boolean;
+}
+
+export interface TokenFieldProps<T extends TokenFieldValue = TokenFieldValue>
+	extends
+		AriaTokenFieldProps<T>,
+		RenderProps<TokenFieldRenderProps>,
+		SlotProps,
+		GlobalDOMAttributes<HTMLDivElement> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-TokenField'
+	 */
+	className?: ClassNameOrFunction<TokenFieldRenderProps>;
+}
+
+export interface TokenInputRenderProps {
+	/**
+	 * Whether the token input is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the token input is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the token input is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the token input is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the token input is read only.
+	 *
+	 * @selector [data-readonly]
+	 */
+	isReadOnly: boolean;
+}
+
+export interface TokenInputProps<T extends TokenFieldValue = TokenFieldValue>
+	extends
+		HoverProps,
+		StyleRenderProps<TokenInputRenderProps>,
+		SlotProps,
+		GlobalDOMAttributes<HTMLDivElement> {
+	/**
+	 * A function that renders a token for each segment in the token field.
+	 */
+	children: (segment: TokenSegment<T extends TokenFieldValue<infer V> ? V : never>) => OctaneNode;
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-TokenInput'
+	 */
+	className?: ClassNameOrFunction<TokenInputRenderProps>;
+}
+
+interface TokenInputContextValue<T extends TokenFieldValue = TokenFieldValue> {
+	tokenFieldProps: HTMLAttributes<HTMLDivElement>;
+	state: TokenFieldState<T>;
+	isDisabled: boolean;
+	isReadOnly: boolean;
+	autocompleteProps?: HTMLAttributes<HTMLDivElement>;
+	ref: RefObject<HTMLDivElement | null>;
+}
+
+export const TokenFieldContext = createContext<ContextValue<TokenFieldProps, HTMLDivElement>>(null);
+const TokenInputContext = createContext<TokenInputContextValue | null>(null);
+
+/**
+ * A token field allows users to enter text with inline tokens. Use it to build AI prompt fields,
+ * tag inputs, structured search fields, mention inputs, and multi-select comboboxes.
+ */
+export const TokenField = /*#__PURE__*/ createHideableComponent(function TokenField<
+	T extends TokenFieldValue = TokenFieldValue,
+>(props: TokenFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+	[props, ref] = useContextProps(props, ref, TokenFieldContext);
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+
+	let fieldCtx = useSlottedContext(FieldInputContext, props.slot);
+	let {
+		value: _autocompleteValue,
+		onChange: onAutocompleteChange,
+		ref: autocompleteRef,
+		...autocompleteProps
+	} = fieldCtx ?? {};
+	let inputRef = useObjectRef(autocompleteRef);
+
+	let isDisabled = props.isDisabled || false;
+	let isReadOnly = props.isReadOnly || false;
+
+	let state = useTokenFieldState<T>({
+		...props,
+		onChange: (value: T) => {
+			props.onChange?.(value);
+			onAutocompleteChange?.(value.toString());
+		},
+	});
+
+	let { tokenFieldProps, labelProps, descriptionProps } = useTokenField(
+		{
+			...props,
+			// @ts-ignore - not a public prop, used to determine if slot is present
+			label,
+			role:
+				props.role ||
+				('role' in autocompleteProps
+					? (autocompleteProps.role as 'combobox' | 'searchbox' | 'textbox')
+					: undefined) ||
+				'textbox',
+		},
+		state,
+		inputRef,
+	);
+
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			isDisabled,
+			isReadOnly,
+		},
+		defaultClassName: 'react-aria-TokenField',
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return (
+		<dom.div
+			{...DOMProps}
+			{...renderProps}
+			ref={ref}
+			slot={props.slot || undefined}
+			data-disabled={isDisabled || undefined}
+			data-readonly={isReadOnly || undefined}
+		>
+			<Provider
+				values={[
+					[LabelContext, { ...labelProps, elementType: 'span', ref: labelRef }],
+					[
+						TextContext,
+						{
+							slots: {
+								description: descriptionProps,
+							},
+						},
+					],
+					[
+						TokenInputContext,
+						{
+							tokenFieldProps,
+							state: state as any,
+							isDisabled,
+							isReadOnly,
+							autocompleteProps: autocompleteProps as HTMLAttributes<HTMLDivElement>,
+							ref: inputRef as RefObject<HTMLDivElement | null>,
+						},
+					],
+				]}
+			>
+				{renderProps.children}
+			</Provider>
+		</dom.div>
+	);
+});
+
+/**
+ * A token input represents the editable area within a token field.
+ */
+export const TokenInput = /*#__PURE__*/ (forwardRef as any)(function TokenInput<
+	T extends TokenFieldValue = TokenFieldValue,
+>(props: TokenInputProps<T>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
+	let {
+		tokenFieldProps,
+		state,
+		isDisabled = false,
+		isReadOnly = false,
+		autocompleteProps,
+		ref: contextRef,
+	} = useContext(TokenInputContext)!;
+	let ref = useMemo(() => mergeRefs(contextRef, forwardedRef), [contextRef, forwardedRef]);
+	let { children, ...domProps } = props;
+
+	let { isHovered, hoverProps } = useHover(domProps);
+	let { isFocused, isFocusVisible, focusProps } = useFocusRing();
+
+	let renderProps = useRenderProps({
+		...domProps,
+		defaultClassName: 'react-aria-TokenInput',
+		values: {
+			isHovered,
+			isFocused,
+			isFocusVisible,
+			isDisabled,
+			isReadOnly,
+		},
+	});
+
+	let DOMProps = filterDOMProps(domProps, { global: true });
+
+	return (
+		<dom.div
+			{...mergeProps(
+				DOMProps,
+				renderProps,
+				focusProps,
+				hoverProps,
+				tokenFieldProps,
+				autocompleteProps,
+			)}
+			ref={ref}
+			data-focused={isFocused || undefined}
+			data-focus-visible={isFocusVisible || undefined}
+			data-disabled={isDisabled || undefined}
+			data-readonly={isReadOnly || undefined}
+			style={{ ...renderProps.style, ...tokenFieldProps?.style }}
+		>
+			<CompositionRenderBlocker isComposing={state.isComposing}>
+				{state.value.segments.map((v, i) => {
+					switch (v.type) {
+						case 'token': {
+							// Compiled template children are blocks, not per-token render callbacks.
+							let token = isChildrenBlock(children) ? children : children(v);
+							return (
+								// Wrap tokens in zero-width spaces so the cursor is placed correctly.
+								<span key={i}>
+									{'\u200b'}
+									{token}
+									{'\u200b'}
+								</span>
+							);
+						}
+						case 'text':
+							return v.text;
+					}
+				})}
+				{/* Force cursor to the next line if the last segment ends with a newline. */}
+				{state.value.segments.at(-1)?.text.endsWith('\n') && <br />}
+			</CompositionRenderBlocker>
+		</dom.div>
+	);
+});
+
+export interface TokenRenderProps {
+	/**
+	 * Whether the token is selected.
+	 *
+	 * @selector [data-selected]
+	 */
+	isSelected: boolean;
+	/**
+	 * Whether the token is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+}
+
+export interface TokenProps
+	extends RenderProps<TokenRenderProps, 'span'>, GlobalDOMAttributes<HTMLSpanElement> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-Token'
+	 */
+	className?: ClassNameOrFunction<TokenRenderProps>;
+}
+
+/**
+ * A token represents an inline segment within a token field.
+ */
+export const Token = forwardRef(function Token(
+	props: TokenProps,
+	ref: ForwardedRef<HTMLSpanElement>,
+) {
+	let { isDisabled } = useContext(TokenInputContext)!;
+	let objectRef = useObjectRef(ref);
+	let { tokenProps, isSelected } = useToken(props, {}, objectRef);
+
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-Token',
+		values: {
+			isSelected,
+			isDisabled,
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return (
+		<dom.span
+			ref={objectRef}
+			{...mergeProps(DOMProps, renderProps, tokenProps)}
+			data-selected={isSelected || undefined}
+			data-disabled={isDisabled || undefined}
+			style={{
+				...renderProps.style,
+				...tokenProps.style,
+			}}
+		>
+			{renderProps.children}
+		</dom.span>
+	);
+});
+
+// Prevents React from re-rendering during composition events.
+const CompositionRenderBlocker = memo(
+	({ children }: { children: React.ReactNode; isComposing: boolean }) => children,
+	(prevProps, nextProps) =>
+		nextProps.isComposing ? true : prevProps.children === nextProps.children,
+);

package/src/components/Tooltip.ts

@@ -168,8 +168,8 @@ export function Tooltip(allProps: TooltipProps): any {
 	let localState = useTooltipTriggerState(props, subSlot(slot, 'state'));
 	let state =
 		props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-	let isExiting =
-		useExitAnimation(ref, state.isOpen, subSlot(slot, 'exit')) || props.isExiting || false;
+	let exitAnimation = useExitAnimation(ref, state.isOpen, subSlot(slot, 'exit'));
+	let isExiting = props.isExiting || (!state.shouldSkipAnimation && exitAnimation) || false;
 	if (!state.isOpen && !isExiting) {
 		return null;
 	}
@@ -205,10 +205,8 @@ function TooltipInner(
 		subSlot(slot, 'position'),
 	);
 
-	let isEntering =
-		useEnterAnimation(props.tooltipRef, !!placement, subSlot(slot, 'enter')) ||
-		props.isEntering ||
-		false;
+	let enterAnimation = useEnterAnimation(props.tooltipRef, !!placement, subSlot(slot, 'enter'));
+	let isEntering = props.isEntering || (!state.shouldSkipAnimation && enterAnimation) || false;
 	let renderProps = useRenderProps(
 		{
 			...props,

package/src/components/Tree.ts

@@ -780,7 +780,7 @@ export interface TreeItemProps<T = object>
 		LinkDOMProps,
 		HoverEvents,
 		PressEvents,
-		Pick<AriaTreeItemOptions, 'hasChildItems'>,
+		Pick<AriaTreeItemOptions, 'hasChildItems' | 'focusMode' | 'allowsArrowNavigation'>,
 		Omit<GlobalDOMAttributes, 'onClick'> {
 	/**
 	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
@@ -836,6 +836,8 @@ export const TreeItem: <T extends object = object>(props: TreeItemProps<T> & { r
 		let { rowProps, gridCellProps, expandButtonProps, descriptionProps, ...states } = useTreeItem(
 			{
 				node: item!,
+				focusMode: props.focusMode,
+				allowsArrowNavigation: props.allowsArrowNavigation,
 				shouldSelectOnPressUp: !!dragState,
 			},
 			state,
@@ -1092,6 +1094,7 @@ export const TreeItem: <T extends object = object>(props: TreeItemProps<T> & { r
 								CheckboxContext,
 								{
 									slots: {
+										[DEFAULT_SLOT]: {},
 										selection: checkboxProps,
 									},
 								},
@@ -1100,6 +1103,7 @@ export const TreeItem: <T extends object = object>(props: TreeItemProps<T> & { r
 								CheckboxFieldContext,
 								{
 									slots: {
+										[DEFAULT_SLOT]: {},
 										selection: checkboxProps,
 									},
 								},
@@ -1150,7 +1154,9 @@ export interface TreeLoadMoreItemRenderProps {
 }
 
 export interface TreeLoadMoreItemProps
-	extends Omit<LoadMoreSentinelProps, 'collection'>, RenderProps<TreeLoadMoreItemRenderProps> {
+	extends
+		Omit<LoadMoreSentinelProps, 'collection' | 'direction'>,
+		RenderProps<TreeLoadMoreItemRenderProps> {
 	/**
 	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
 	 * element. A function may be provided to compute the class based on component state.
@@ -1374,17 +1380,16 @@ function RootDropIndicator(): any {
 	});
 }
 
-export interface GridListSectionProps<T>
-	extends SectionProps<T>, DOMRenderProps<'div', undefined> {}
+export interface TreeSectionProps<T> extends SectionProps<T>, DOMRenderProps<'div', undefined> {}
 
 /**
  * A TreeSection represents a section within a Tree.
  */
 export const TreeSection: <T extends object = object>(
-	props: GridListSectionProps<T> & { ref?: any },
+	props: GridListHeaderProps & { ref?: any },
 ) => any = /*#__PURE__*/ createBranchComponent(SectionNode, function TreeSection<
 	T,
->(props: GridListSectionProps<T>, forwardedRef: any, item?: Node<T>): any {
+>(props: TreeSectionProps<T>, forwardedRef: any, item?: Node<T>): any {
 	const slot = S('TreeSection');
 	let state = useContext(TreeStateContext)!;
 	let { CollectionBranch } = useContext(CollectionRendererContext);
@@ -1428,7 +1433,9 @@ export const TreeSection: <T extends object = object>(
 	});
 });
 
-export const TreeHeader = (props: GridListHeaderProps): ReactNode => {
+export interface TreeHeaderProps extends GridListHeaderProps {}
+
+export const TreeHeader = (props: TreeHeaderProps): ReactNode => {
 	return createElement(GridListHeader, {
 		className: 'react-aria-TreeHeader',
 		...props,

package/src/components/Virtualizer.tsx

@@ -50,15 +50,17 @@ export interface VirtualizerProps<O> {
 	layout: LayoutClass<O> | ILayout<O>;
 	/** Options for the layout. */
 	layoutOptions?: O;
+	shouldObserveItemSize?: boolean;
 }
 
-interface LayoutContextValue {
+interface VirtualizerOptionsContextValue {
 	layout: ILayout<any>;
 	layoutOptions?: any;
+	shouldObserveItemSize?: boolean;
 }
 
 const VirtualizerContext = createContext<VirtualizerState<any, any> | null>(null);
-const LayoutContext = createContext<LayoutContextValue | null>(null);
+const VirtualizerOptionsContext = createContext<VirtualizerOptionsContextValue | null>(null);
 
 /**
  * A Virtualizer renders a scrollable collection of data using customizable layouts.
@@ -66,7 +68,7 @@ const LayoutContext = createContext<LayoutContextValue | null>(null);
  * them as the user scrolls.
  */
 export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
-	let { children, layout: layoutProp, layoutOptions } = props;
+	let { children, layout: layoutProp, layoutOptions, shouldObserveItemSize } = props;
 	let layout = useMemo(
 		() => (typeof layoutProp === 'function' ? new layoutProp() : layoutProp),
 		[layoutProp],
@@ -86,7 +88,9 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
 
 	return (
 		<CollectionRendererContext.Provider value={renderer}>
-			<LayoutContext.Provider value={{ layout, layoutOptions }}>{children}</LayoutContext.Provider>
+			<VirtualizerOptionsContext.Provider value={{ layout, layoutOptions, shouldObserveItemSize }}>
+				{children}
+			</VirtualizerOptionsContext.Provider>
 		</CollectionRendererContext.Provider>
 	);
 }
@@ -97,7 +101,7 @@ function CollectionRoot({
 	scrollRef,
 	renderDropIndicator,
 }: CollectionRootProps) {
-	let { layout, layoutOptions } = useContext(LayoutContext)!;
+	let { layout, layoutOptions, shouldObserveItemSize } = useContext(VirtualizerOptionsContext)!;
 	let layoutOptions2 = layout.useLayoutOptions?.();
 	let state = useVirtualizerState({
 		allowsWindowScrolling: true,
@@ -114,12 +118,13 @@ function CollectionRoot({
 			}
 		},
 		persistedKeys,
-		layoutOptions: useMemo(() => {
-			if (layoutOptions && layoutOptions2) {
-				return { ...layoutOptions, ...layoutOptions2 };
-			}
-			return layoutOptions || layoutOptions2;
-		}, [layoutOptions, layoutOptions2]),
+		layoutOptions: useMemo(
+			() =>
+				layoutOptions && layoutOptions2
+					? { ...layoutOptions, ...layoutOptions2 }
+					: layoutOptions || layoutOptions2,
+			[layoutOptions, layoutOptions2],
+		),
 	});
 
 	let { contentProps } = useScrollView(
@@ -137,7 +142,7 @@ function CollectionRoot({
 	return (
 		<div {...contentProps}>
 			<VirtualizerContext.Provider value={state}>
-				{renderChildren(null, state.visibleViews, renderDropIndicator)}
+				{renderChildren(null, state.visibleViews, renderDropIndicator, shouldObserveItemSize)}
 			</VirtualizerContext.Provider>
 		</div>
 	);
@@ -146,21 +151,31 @@ function CollectionRoot({
 function CollectionBranch({ parent, renderDropIndicator }: CollectionBranchProps) {
 	let virtualizer = useContext(VirtualizerContext);
 	let parentView = virtualizer!.virtualizer.getVisibleView(parent.key)!;
-	return renderChildren(parentView, Array.from(parentView.children), renderDropIndicator);
+	let { shouldObserveItemSize } = useContext(VirtualizerOptionsContext)!;
+	return renderChildren(
+		parentView,
+		Array.from(parentView.children),
+		renderDropIndicator,
+		shouldObserveItemSize,
+	);
 }
 
 function renderChildren(
 	parent: View | null,
 	children: View[],
 	renderDropIndicator?: (target: ItemDropTarget) => ReactNode,
+	shouldObserveItemSize?: boolean,
 ) {
-	return children.map((view) => renderWrapper(parent, view, renderDropIndicator));
+	return children.map((view) =>
+		renderWrapper(parent, view, renderDropIndicator, shouldObserveItemSize),
+	);
 }
 
 function renderWrapper(
 	parent: View | null,
 	reusableView: View,
 	renderDropIndicator?: (target: ItemDropTarget) => ReactNode,
+	shouldObserveItemSize?: boolean,
 ): ReactNode {
 	let rendered = (
 		<VirtualizerItem
@@ -168,6 +183,7 @@ function renderWrapper(
 			layoutInfo={reusableView.layoutInfo!}
 			virtualizer={reusableView.virtualizer}
 			parent={parent?.layoutInfo}
+			shouldObserveItemSize={shouldObserveItemSize}
 		>
 			{reusableView.rendered}
 		</VirtualizerItem>

package/src/components/index.ts

@@ -612,3 +612,25 @@ export type {
 	TableLoadMoreItemProps,
 	TableFooterProps,
 } from './Table';
+
+export { PreviewTrigger } from './PreviewTrigger';
+export type { PreviewTriggerProps } from './PreviewTrigger';
+export { TokenField, TokenInput, Token, TokenFieldContext } from './TokenField';
+export type {
+	TokenFieldProps,
+	TokenFieldRenderProps,
+	TokenInputProps,
+	TokenInputRenderProps,
+	TokenProps,
+	TokenRenderProps,
+} from './TokenField';
+export { TokenFieldValue } from '../stately/tokenfield/TokenFieldValue';
+export type { GridListHeaderProps } from './GridList';
+export type {
+	DOMRenderProps,
+	PossibleLinkDOMRenderProps,
+	DOMRenderFunction,
+	ClassNameOrFunction,
+	StyleOrFunction,
+	ChildrenOrFunction,
+} from './utils';

package/src/components/utils.ts

@@ -84,7 +84,7 @@ export interface DOMProps extends StyleProps, SharedDOMProps {
 
 export type ClassNameOrFunction<T> =
 	string | ((values: T & { defaultClassName: string | undefined }) => string);
-type StyleOrFunction<T> =
+export type StyleOrFunction<T> =
 	CSSProperties | ((values: T & { defaultStyle: CSSProperties }) => CSSProperties | undefined);
 
 export interface StyleRenderProps<T, E extends string = 'div'> extends DOMRenderProps<E, T> {

package/src/datepicker/useDateField.tsx

@@ -18,7 +18,6 @@ import {
 	DOMProps,
 	GroupDOMAttributes,
 	InputDOMProps,
-	KeyboardEvent,
 	RefObject,
 	ValidationResult,
 } from '@react-types/shared';
@@ -225,16 +224,8 @@ export function useDateField<T extends DateValue>(
 			},
 		},
 		fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
-			onKeyDown(e: KeyboardEvent) {
-				if (props.onKeyDown) {
-					props.onKeyDown(e);
-				}
-			},
-			onKeyUp(e: KeyboardEvent) {
-				if (props.onKeyUp) {
-					props.onKeyUp(e);
-				}
-			},
+			onKeyDown: props.onKeyDown,
+			onKeyUp: props.onKeyUp,
 			style: {
 				unicodeBidi: 'isolate',
 			},