@octanejs/aria 0.0.40 → 0.0.42

package/src/components/DatePicker.tsx

@@ -0,0 +1,386 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/DatePicker.tsx).
+/*
+ * Copyright 2022 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 { AriaDatePickerProps, useDatePicker } from '../upstream-exports/react-aria/useDatePicker';
+import {
+	AriaDateRangePickerProps,
+	useDateRangePicker,
+} from '../upstream-exports/react-aria/useDateRangePicker';
+import { ButtonContext } from './Button';
+import { CalendarContext, RangeCalendarContext } from './Calendar';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RACValidation,
+	removeDataAttributes,
+	RenderProps,
+	SlotProps,
+	useContextProps,
+	useRenderProps,
+	useSlot,
+	useSlottedContext,
+} from './utils';
+import { DateFieldContext } from './DateField';
+import {
+	DatePickerState,
+	DatePickerStateOptions,
+	DateValue,
+	useDatePickerState,
+} from '../upstream-exports/react-stately/useDatePickerState';
+import {
+	DateRangePickerState,
+	DateRangePickerStateOptions,
+	useDateRangePickerState,
+} from '../upstream-exports/react-stately/useDateRangePickerState';
+import { DialogContext, OverlayTriggerStateContext } from './Dialog';
+import { FieldErrorContext } from './FieldError';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { FormContext } from './Form';
+import { forwardRefType, GlobalDOMAttributes } from '@react-types/shared';
+import { GroupContext } from './Group';
+import { HiddenDateInput } from './HiddenDateInput';
+import { LabelContext } from './Label';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import { PopoverContext } from './Popover';
+import React, { createContext, ForwardedRef, forwardRef, useRef } from '../compat/react';
+import { TextContext } from './Text';
+import { useFocusRing } from '../upstream-exports/react-aria/useFocusRing';
+
+export interface DatePickerRenderProps {
+	/**
+	 * Whether an element within the date picker is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focus-within]
+	 */
+	isFocusWithin: boolean;
+	/**
+	 * Whether an element within the date picker is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the date picker is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the date picker is read only.
+	 *
+	 * @selector [data-readonly]
+	 */
+	isReadOnly: boolean;
+	/**
+	 * Whether the date picker is invalid.
+	 *
+	 * @selector [data-invalid]
+	 */
+	isInvalid: boolean;
+	/**
+	 * Whether the date picker is required.
+	 *
+	 * @selector [data-required]
+	 */
+	isRequired: boolean;
+	/**
+	 * Whether the date picker's popover is currently open.
+	 *
+	 * @selector [data-open]
+	 */
+	isOpen: boolean;
+	/**
+	 * State of the date picker.
+	 */
+	state: DatePickerState;
+}
+export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {
+	/**
+	 * State of the date range picker.
+	 */
+	state: DateRangePickerState;
+}
+
+export interface DatePickerProps<T extends DateValue>
+	extends
+		Omit<
+			AriaDatePickerProps<T>,
+			'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'
+		>,
+		Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>,
+		RACValidation,
+		RenderProps<DatePickerRenderProps>,
+		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-DatePicker'
+	 */
+	className?: ClassNameOrFunction<DatePickerRenderProps>;
+}
+export interface DateRangePickerProps<T extends DateValue>
+	extends
+		Omit<
+			AriaDateRangePickerProps<T>,
+			'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'
+		>,
+		Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>,
+		RACValidation,
+		RenderProps<DateRangePickerRenderProps>,
+		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-DateRangePicker'
+	 */
+	className?: ClassNameOrFunction<DateRangePickerRenderProps>;
+}
+
+export const DatePickerContext =
+	createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
+export const DateRangePickerContext =
+	createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
+export const DatePickerStateContext = createContext<DatePickerState | null>(null);
+export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
+
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
+
+/**
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a
+ * date and time value.
+ */
+export const DatePicker = /*#__PURE__*/ (forwardRef as any)(function DatePicker<
+	T extends DateValue,
+>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+	[props, ref] = useContextProps(props, ref, DatePickerContext);
+	let { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+	let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+	let state = useDatePickerState({
+		...props,
+		validationBehavior,
+	});
+
+	let groupRef = useRef<HTMLDivElement>(null);
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+	let {
+		groupProps,
+		labelProps,
+		fieldProps,
+		buttonProps,
+		dialogProps,
+		calendarProps,
+		descriptionProps,
+		errorMessageProps,
+		...validation
+	} = useDatePicker(
+		{
+			...removeDataAttributes(props),
+			label,
+			validationBehavior,
+		},
+		state,
+		groupRef,
+	);
+
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing({ within: true });
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			state,
+			isFocusWithin: isFocused,
+			isFocusVisible,
+			isDisabled: props.isDisabled || false,
+			isInvalid: state.isInvalid,
+			isOpen: state.isOpen,
+			isReadOnly: props.isReadOnly || false,
+			isRequired: props.isRequired || false,
+		},
+		defaultClassName: 'react-aria-DatePicker',
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<Provider
+			values={[
+				[DatePickerStateContext, state],
+				[GroupContext, { ...groupProps, ref: groupRef, isInvalid: state.isInvalid }],
+				[DateFieldContext, fieldProps],
+				[ButtonContext, { ...buttonProps, isPressed: state.isOpen }],
+				[LabelContext, { ...labelProps, ref: labelRef, elementType: 'span' }],
+				[CalendarContext, calendarProps as any],
+				[OverlayTriggerStateContext, state],
+				[
+					PopoverContext,
+					{
+						trigger: 'DatePicker',
+						triggerRef: groupRef,
+						placement: 'bottom start',
+						clearContexts: CLEAR_CONTEXTS,
+					},
+				],
+				[DialogContext, dialogProps],
+				[
+					TextContext,
+					{
+						slots: {
+							description: descriptionProps,
+							errorMessage: errorMessageProps,
+						},
+					},
+				],
+				[FieldErrorContext, validation],
+			]}
+		>
+			<dom.div
+				{...mergeProps(DOMProps, renderProps, focusProps)}
+				ref={ref}
+				slot={props.slot || undefined}
+				data-focus-within={isFocused || undefined}
+				data-invalid={state.isInvalid || undefined}
+				data-focus-visible={isFocusVisible || undefined}
+				data-disabled={props.isDisabled || undefined}
+				data-readonly={props.isReadOnly || undefined}
+				data-required={props.isRequired || undefined}
+				data-open={state.isOpen || undefined}
+			/>
+			<HiddenDateInput
+				autoComplete={props.autoComplete}
+				name={props.name}
+				isDisabled={props.isDisabled}
+				state={state}
+			/>
+		</Provider>
+	);
+});
+
+/**
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+export const DateRangePicker = /*#__PURE__*/ (forwardRef as any)(function DateRangePicker<
+	T extends DateValue,
+>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+	[props, ref] = useContextProps(props, ref, DateRangePickerContext);
+	let { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+	let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+	let state = useDateRangePickerState({
+		...props,
+		validationBehavior,
+	});
+
+	let groupRef = useRef<HTMLDivElement>(null);
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+	let {
+		groupProps,
+		labelProps,
+		startFieldProps,
+		endFieldProps,
+		buttonProps,
+		dialogProps,
+		calendarProps,
+		descriptionProps,
+		errorMessageProps,
+		...validation
+	} = useDateRangePicker(
+		{
+			...removeDataAttributes(props),
+			label,
+			validationBehavior,
+		},
+		state,
+		groupRef,
+	);
+
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing({ within: true });
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			state,
+			isFocusWithin: isFocused,
+			isFocusVisible,
+			isDisabled: props.isDisabled || false,
+			isInvalid: state.isInvalid,
+			isOpen: state.isOpen,
+			isReadOnly: props.isReadOnly || false,
+			isRequired: props.isRequired || false,
+		},
+		defaultClassName: 'react-aria-DateRangePicker',
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<Provider
+			values={[
+				[DateRangePickerStateContext, state],
+				[GroupContext, { ...groupProps, ref: groupRef, isInvalid: state.isInvalid }],
+				[ButtonContext, { ...buttonProps, isPressed: state.isOpen }],
+				[LabelContext, { ...labelProps, ref: labelRef, elementType: 'span' }],
+				[RangeCalendarContext, calendarProps],
+				[OverlayTriggerStateContext, state],
+				[
+					PopoverContext,
+					{
+						trigger: 'DateRangePicker',
+						triggerRef: groupRef,
+						placement: 'bottom start',
+						clearContexts: CLEAR_CONTEXTS,
+					},
+				],
+				[DialogContext, dialogProps],
+				[
+					DateFieldContext,
+					{
+						slots: {
+							start: startFieldProps,
+							end: endFieldProps,
+						},
+					},
+				],
+				[
+					TextContext,
+					{
+						slots: {
+							description: descriptionProps,
+							errorMessage: errorMessageProps,
+						},
+					},
+				],
+				[FieldErrorContext, validation],
+			]}
+		>
+			<dom.div
+				{...mergeProps(DOMProps, renderProps, focusProps)}
+				ref={ref}
+				slot={props.slot || undefined}
+				data-focus-within={isFocused || undefined}
+				data-invalid={state.isInvalid || undefined}
+				data-focus-visible={isFocusVisible || undefined}
+				data-disabled={props.isDisabled || undefined}
+				data-readonly={props.isReadOnly || undefined}
+				data-required={props.isRequired || undefined}
+				data-open={state.isOpen || undefined}
+			/>
+		</Provider>
+	);
+});

package/src/components/DropZone.tsx

@@ -0,0 +1,181 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/DropZone.tsx).
+/*
+ * Copyright 2023 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, GlobalDOMAttributes, HoverEvents } from '@react-types/shared';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RenderProps,
+	SlotProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+import { DropOptions, useDrop } from '../upstream-exports/react-aria/useDrop';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import {
+	getEventTarget,
+	nodeContains,
+} from '../upstream-exports/react-aria/private/utils/shadowdom/DOMFunctions';
+import intlMessages from '../intl/react-aria-components/index';
+import { isFocusable } from '../upstream-exports/react-aria/private/utils/isFocusable';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import React, { createContext, ForwardedRef, forwardRef, useRef } from '../compat/react';
+import { TextContext } from './Text';
+import { useButton } from '../upstream-exports/react-aria/useButton';
+import { useClipboard } from '../upstream-exports/react-aria/useClipboard';
+import { useFocusRing } from '../upstream-exports/react-aria/useFocusRing';
+import { useHover } from '../upstream-exports/react-aria/useHover';
+import { useLabels } from '../upstream-exports/react-aria/private/utils/useLabels';
+import { useLocalizedStringFormatter } from '../upstream-exports/react-aria/useLocalizedStringFormatter';
+import { useObjectRef } from '../upstream-exports/react-aria/useObjectRef';
+import { useSlotId } from '../upstream-exports/react-aria/private/utils/useId';
+import { VisuallyHidden } from '../upstream-exports/react-aria/VisuallyHidden';
+
+export interface DropZoneRenderProps {
+	/**
+	 * Whether the dropzone is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the dropzone is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the dropzone is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the dropzone is the drop target.
+	 *
+	 * @selector [data-drop-target]
+	 */
+	isDropTarget: boolean;
+	/**
+	 * Whether the dropzone is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+}
+
+export interface DropZoneProps
+	extends
+		Omit<DropOptions, 'getDropOperationForPoint' | 'ref' | 'hasDropButton'>,
+		HoverEvents,
+		RenderProps<DropZoneRenderProps>,
+		SlotProps,
+		AriaLabelingProps,
+		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-DropZone'
+	 */
+	className?: ClassNameOrFunction<DropZoneRenderProps>;
+}
+
+export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
+
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged and dropped.
+ */
+export const DropZone = forwardRef(function DropZone(
+	props: DropZoneProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	let { isDisabled = false } = props;
+	[props, ref] = useContextProps(props, ref, DropZoneContext);
+	let dropzoneRef = useObjectRef(ref);
+	let buttonRef = useRef<HTMLButtonElement>(null);
+	let { dropProps, dropButtonProps, isDropTarget } = useDrop({
+		...props,
+		ref: buttonRef,
+		hasDropButton: true,
+	});
+	let { buttonProps } = useButton(dropButtonProps || {}, buttonRef);
+	let { hoverProps, isHovered } = useHover(props);
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing();
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
+
+	let textId = useSlotId();
+	let ariaLabel = props['aria-label'] || stringFormatter.format('dropzoneLabel');
+	let messageId = props['aria-labelledby'];
+	let ariaLabelledby = [textId, messageId].filter(Boolean).join(' ');
+	let labelProps = useLabels({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby });
+
+	let { clipboardProps } = useClipboard({
+		isDisabled,
+		onPaste: (items) =>
+			props.onDrop?.({
+				type: 'drop',
+				items,
+				x: 0,
+				y: 0,
+				dropOperation: 'copy',
+			}),
+	});
+
+	let renderProps = useRenderProps({
+		...props,
+		values: { isHovered, isFocused, isFocusVisible, isDropTarget, isDisabled },
+		defaultClassName: 'react-aria-DropZone',
+	});
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<Provider values={[[TextContext, { id: textId, slot: 'label' }]]}>
+			<dom.div
+				{...mergeProps(DOMProps, renderProps, dropProps, hoverProps)}
+				slot={props.slot || undefined}
+				ref={dropzoneRef}
+				onClick={(e: MouseEvent) => {
+					let target = getEventTarget(e) as HTMLElement | null;
+					while (target && nodeContains(dropzoneRef.current, target)) {
+						if (isFocusable(target)) {
+							break;
+						} else if (target === dropzoneRef.current) {
+							buttonRef.current?.focus();
+							break;
+						}
+
+						target = target.parentElement;
+					}
+				}}
+				data-hovered={isHovered || undefined}
+				data-focused={isFocused || undefined}
+				data-focus-visible={isFocusVisible || undefined}
+				data-drop-target={isDropTarget || undefined}
+				data-disabled={isDisabled || undefined}
+			>
+				<VisuallyHidden>
+					<dom.button
+						{...mergeProps(buttonProps, focusProps, clipboardProps, labelProps)}
+						ref={buttonRef}
+					/>
+				</VisuallyHidden>
+				{renderProps.children}
+			</dom.div>
+		</Provider>
+	);
+});

package/src/components/FileTrigger.tsx

@@ -0,0 +1,96 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/FileTrigger.tsx).
+/*
+ * Copyright 2023 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 { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { Input } from './Input';
+import { PressResponder } from '../upstream-exports/react-aria/private/interactions/PressResponder';
+import React, { ForwardedRef, forwardRef, ReactNode } from '../compat/react';
+import { useObjectRef } from '../upstream-exports/react-aria/useObjectRef';
+
+export interface FileTriggerProps extends GlobalDOMAttributes<HTMLInputElement> {
+	/**
+	 * Specifies what mime type of files are allowed.
+	 */
+	acceptedFileTypes?: ReadonlyArray<string>;
+	/**
+	 * Whether multiple files can be selected.
+	 */
+	allowsMultiple?: boolean;
+	/**
+	 * Specifies the use of a media capture mechanism to capture the media on the spot.
+	 */
+	defaultCamera?: 'user' | 'environment';
+	/**
+	 * Handler when a user selects a file.
+	 */
+	onSelect?: (files: FileList | null) => void;
+	/**
+	 * The children of the component.
+	 */
+	children?: ReactNode;
+	/**
+	 * Enables the selection of directories instead of individual files.
+	 */
+	acceptDirectory?: boolean;
+}
+
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React
+ * Spectrum component, or custom components built with usePress.
+ */
+export const FileTrigger = forwardRef(function FileTrigger(
+	props: FileTriggerProps,
+	ref: ForwardedRef<HTMLInputElement>,
+) {
+	let {
+		onSelect,
+		acceptedFileTypes,
+		allowsMultiple,
+		defaultCamera,
+		children,
+		acceptDirectory,
+		...rest
+	} = props;
+	let inputRef = useObjectRef(ref);
+	let domProps = filterDOMProps(rest, { global: true });
+
+	return (
+		<>
+			<PressResponder
+				onPress={() => {
+					if (inputRef.current?.value) {
+						inputRef.current.value = '';
+					}
+					inputRef.current?.click();
+				}}
+			>
+				{children}
+			</PressResponder>
+			<Input
+				{...domProps}
+				className=""
+				type="file"
+				ref={inputRef}
+				style={{ display: 'none' }}
+				accept={acceptedFileTypes?.toString()}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSelect?.(e.currentTarget.files)}
+				capture={defaultCamera}
+				multiple={allowsMultiple}
+				webkitdirectory={acceptDirectory ? '' : undefined}
+			/>
+		</>
+	);
+});

package/src/components/GridLayout.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/GridLayout.ts).
+/*
+ * Copyright 2024 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 {
+	GridLayout as BaseGridLayout,
+	GridLayoutOptions,
+} from '../upstream-exports/react-stately/useVirtualizerState';
+import { LayoutOptionsDelegate } from './Virtualizer';
+import { useLocale } from '../upstream-exports/react-aria/I18nProvider';
+import { useMemo } from '../compat/react';
+
+export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions>
+	extends BaseGridLayout<T, O>
+	implements LayoutOptionsDelegate<GridLayoutOptions>
+{
+	// Automatically determine the layout direction from the current locale.
+	useLayoutOptions(): GridLayoutOptions {
+		/* eslint-disable react-hooks/rules-of-hooks */
+		let { direction } = useLocale();
+		return useMemo(() => ({ direction }), [direction]);
+	}
+}