@octanejs/aria 0.0.40 → 0.0.41

package/src/components/HiddenDateInput.tsx

@@ -0,0 +1,169 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/HiddenDateInput.tsx).
+/*
+ * Copyright 2025 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,
+	CalendarDateTime,
+	parseDate,
+	parseDateTime,
+	toCalendarDate,
+	toCalendarDateTime,
+	toLocalTimeZone,
+} from '@internationalized/date';
+import {
+	DateFieldState,
+	DateSegmentType,
+} from '../upstream-exports/react-stately/useDateFieldState';
+import { DatePickerState } from '../upstream-exports/react-stately/useDatePickerState';
+import { getEventTarget } from '../upstream-exports/react-aria/private/utils/shadowdom/DOMFunctions';
+import React, { ReactNode } from '../compat/react';
+import { useVisuallyHidden } from '../upstream-exports/react-aria/VisuallyHidden';
+
+interface AriaHiddenDateInputProps {
+	/**
+	 * Describes the type of autocomplete functionality the input should provide if any. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+	 */
+	autoComplete?: string;
+	/** HTML form input name. */
+	name?: string;
+	/** Sets the disabled state of the input. */
+	isDisabled?: boolean;
+}
+
+interface HiddenDateInputProps extends AriaHiddenDateInputProps {
+	/**
+	 * State for the input.
+	 */
+	state: DateFieldState | DatePickerState;
+}
+
+export interface HiddenDateAria {
+	/** Props for the container element. */
+	containerProps: React.HTMLAttributes<HTMLDivElement>;
+	/** Props for the hidden input element. */
+	inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+const dateSegments = ['day', 'month', 'year'];
+const granularityMap: Record<string, number> = { hour: 1, minute: 2, second: 3 };
+
+export function useHiddenDateInput(
+	props: HiddenDateInputProps,
+	state: DateFieldState | DatePickerState,
+): HiddenDateAria {
+	let { autoComplete, isDisabled, name } = props;
+	let { visuallyHiddenProps } = useVisuallyHidden({
+		style: {
+			// Prevent page scrolling.
+			position: 'fixed',
+			top: 0,
+			left: 0,
+		},
+	});
+
+	let inputStep = 60;
+	if (state.granularity === 'second') {
+		inputStep = 1;
+	} else if (state.granularity === 'hour') {
+		inputStep = 3600;
+	}
+
+	let dateValue = '';
+	if (state.value) {
+		if (state.granularity === 'day') {
+			dateValue = toCalendarDate(state.value).toString();
+		} else {
+			dateValue = toCalendarDateTime(
+				'timeZone' in state.value ? toLocalTimeZone(state.value) : state.value,
+			).toString();
+		}
+	}
+
+	let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
+
+	let timeSegments = ['hour', 'minute', 'second'];
+	// Depending on the granularity, we only want to validate certain time segments
+	let end = 0;
+	if (timeSegments.includes(state.granularity)) {
+		end = granularityMap[state.granularity];
+		timeSegments = timeSegments.slice(0, end);
+	}
+
+	return {
+		containerProps: {
+			...visuallyHiddenProps,
+			'aria-hidden': true,
+			// @ts-ignore
+			['data-react-aria-prevent-focus']: true,
+			// @ts-ignore
+			['data-a11y-ignore']: 'aria-hidden-focus',
+		},
+		inputProps: {
+			tabIndex: -1,
+			autoComplete,
+			disabled: isDisabled,
+			type: inputType,
+			// We set the form prop to an empty string to prevent the hidden date input's value from being submitted
+			form: '',
+			name,
+			step: inputStep,
+			value: dateValue,
+			// React's synthetic onChange follows the native input event for date controls.
+			// Octane has no synthetic layer, so wire the equivalent event directly.
+			onInput: (e: React.ChangeEvent<HTMLInputElement>) => {
+				let targetString = e.currentTarget.value.toString();
+				if (targetString) {
+					try {
+						let targetValue: CalendarDateTime | CalendarDate = parseDateTime(targetString);
+						if (state.granularity === 'day') {
+							targetValue = parseDate(targetString);
+						}
+						// We check to to see if setSegment exists in the state since it only exists in DateFieldState and not DatePickerState.
+						// The setValue method has different behavior depending on if it's coming from DateFieldState or DatePickerState.
+						// In DateFieldState, setValue firsts checks to make sure that each segment is filled before committing the newValue
+						// which is why in the code below we first set each segment to validate it before committing the new value.
+						// However, in DatePickerState, since we have to be able to commit values from the Calendar popover, we are also able to
+						// set a new value when the field itself is empty.
+						if ('setSegment' in state) {
+							for (let type in targetValue) {
+								// eslint-disable-next-line max-depth
+								if (dateSegments.includes(type)) {
+									state.setSegment(type as DateSegmentType, (targetValue as any)[type]);
+								}
+								// eslint-disable-next-line max-depth
+								if (timeSegments.includes(type)) {
+									state.setSegment(type as DateSegmentType, (targetValue as any)[type]);
+								}
+							}
+						}
+						state.setValue(targetValue);
+					} catch {
+						// ignore
+					}
+				}
+			},
+		},
+	};
+}
+
+export function HiddenDateInput(props: HiddenDateInputProps): ReactNode | null {
+	let { state } = props;
+	let { containerProps, inputProps } = useHiddenDateInput({ ...props }, state);
+	return (
+		<div {...containerProps} data-testid="hidden-dateinput-container">
+			<input {...inputProps} />
+		</div>
+	);
+}

package/src/components/TableLayout.tsx

@@ -0,0 +1,39 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/TableLayout.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 {
+	TableLayout as BaseTableLayout,
+	TableLayoutProps,
+} from '../upstream-exports/react-stately/useVirtualizerState';
+import { LayoutOptionsDelegate } from './Virtualizer';
+import { TableColumnResizeStateContext } from './Table';
+import { useContext, useMemo } from '../compat/react';
+
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps>
+	extends BaseTableLayout<T, O>
+	implements LayoutOptionsDelegate<TableLayoutProps>
+{
+	// Invalidate the layout whenever the column widths change.
+	useLayoutOptions(): TableLayoutProps {
+		// This is not a React class component, just a regular class.
+		/* eslint-disable react-hooks/rules-of-hooks */
+		let colResizeState = useContext(TableColumnResizeStateContext);
+		return useMemo(
+			() => ({
+				columnWidths: colResizeState?.columnWidths,
+			}),
+			[colResizeState?.columnWidths],
+		);
+	}
+}

package/src/components/Toast.tsx

@@ -0,0 +1,336 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/Toast.tsx).
+/*
+ * Copyright 2025 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 {
+	AriaToastProps,
+	AriaToastRegionProps,
+	useToast,
+	useToastRegion,
+} from '../upstream-exports/react-aria/useToast';
+
+import { ButtonContext } from './Button';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	DEFAULT_SLOT,
+	dom,
+	DOMRenderProps,
+	Provider,
+	RenderProps,
+	StyleRenderProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+import { createPortal, isChildrenBlock } from 'octane';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { forwardRefType, GlobalDOMAttributes } from '@react-types/shared';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import {
+	QueuedToast,
+	ToastQueue,
+	ToastState,
+	useToastQueue,
+} from '../upstream-exports/react-stately/useToastState';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	HTMLAttributes,
+	JSX,
+	ReactElement,
+	ReactNode,
+	useContext,
+} from '../compat/react';
+import { TextContext } from './Text';
+import { useFocusRing } from '../upstream-exports/react-aria/useFocusRing';
+import { useHover } from '../upstream-exports/react-aria/useHover';
+import { useIsSSR } from '../upstream-exports/react-aria/SSRProvider';
+import { useLocale } from '../upstream-exports/react-aria/I18nProvider';
+import { useObjectRef } from '../upstream-exports/react-aria/useObjectRef';
+import { useUNSAFE_PortalContext } from '../upstream-exports/react-aria/PortalProvider';
+
+const ToastStateContext = createContext<ToastState<any> | null>(null);
+
+export interface ToastRegionRenderProps<T> {
+	/** A list of all currently visible toasts. */
+	visibleToasts: QueuedToast<T>[];
+	/**
+	 * Whether the toast region is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the toast region is currently focused.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the toast region is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+}
+
+export interface ToastRegionProps<T>
+	extends
+		AriaToastRegionProps,
+		StyleRenderProps<ToastRegionRenderProps<T>>,
+		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-ToastRegion'
+	 */
+	className?: ClassNameOrFunction<ToastRegionRenderProps<T>>;
+	/** The queue of toasts to display. */
+	queue: ToastQueue<T>;
+	/** A function to render each toast, or children containing a `<ToastList>`. */
+	children: ReactNode | ((renderProps: { toast: QueuedToast<T> }) => ReactElement);
+}
+
+/**
+ * A ToastRegion displays one or more toast notifications.
+ */
+const ToastRegion = /*#__PURE__*/ (forwardRef as any)(function ToastRegion<T>(
+	props: ToastRegionProps<T>,
+	ref: ForwardedRef<HTMLDivElement>,
+): JSX.Element | null {
+	let isSSR = useIsSSR();
+	let state = useToastQueue(props.queue);
+	let objectRef = useObjectRef(ref);
+	let { regionProps } = useToastRegion(props, state, objectRef);
+
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing();
+	let { hoverProps, isHovered } = useHover({});
+	let renderProps = useRenderProps({
+		...props,
+		children: undefined,
+		defaultClassName: 'react-aria-ToastRegion',
+		values: {
+			visibleToasts: state.visibleToasts,
+			isHovered,
+			isFocused,
+			isFocusVisible,
+		},
+	});
+
+	let { direction } = useLocale();
+	let portalContainer;
+	let { getContainer } = useUNSAFE_PortalContext();
+	if (!isSSR) {
+		portalContainer = document.body;
+		if (getContainer) {
+			portalContainer = getContainer();
+		}
+	}
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	let region = (
+		<ToastStateContext.Provider value={state}>
+			<dom.div
+				{...mergeProps(DOMProps, renderProps, regionProps, focusProps, hoverProps)}
+				dir={direction}
+				ref={objectRef}
+				data-hovered={isHovered || undefined}
+				data-focused={isFocused || undefined}
+				data-focus-visible={isFocusVisible || undefined}
+			>
+				{typeof props.children === 'function' && !isChildrenBlock(props.children) ? (
+					<ToastList
+						{...props}
+						render={undefined}
+						className={undefined}
+						style={{ display: 'contents' }}
+					>
+						{props.children}
+					</ToastList>
+				) : (
+					props.children
+				)}
+			</dom.div>
+		</ToastStateContext.Provider>
+	);
+
+	return state.visibleToasts.length > 0 && portalContainer
+		? createPortal(region, portalContainer)
+		: null;
+});
+
+export interface ToastListProps<T>
+	extends
+		Omit<ToastRegionProps<T>, 'queue' | 'children' | 'render'>,
+		DOMRenderProps<'ol', ToastRegionRenderProps<T>> {
+	/** A function to render each toast. */
+	children: (renderProps: { toast: QueuedToast<T> }) => ReactElement;
+}
+
+const ToastList = /*#__PURE__*/ (forwardRef as any)(function ToastList<T>(
+	props: ToastListProps<T>,
+	ref: ForwardedRef<HTMLOListElement>,
+) {
+	let state = useContext(ToastStateContext)!;
+	let { hoverProps, isHovered } = useHover({});
+	let renderProps = useRenderProps({
+		...props,
+		children: undefined,
+		defaultClassName: 'react-aria-ToastList',
+		values: {
+			visibleToasts: state.visibleToasts,
+			isFocused: false,
+			isFocusVisible: false,
+			isHovered,
+		},
+	});
+
+	return (
+		<dom.ol {...hoverProps} {...renderProps} ref={ref}>
+			{state.visibleToasts.map((toast) => (
+				<li key={toast.key} style={{ display: 'contents' }}>
+					{props.children({ toast })}
+				</li>
+			))}
+		</dom.ol>
+	);
+});
+
+export interface ToastRenderProps<T> {
+	/**
+	 * The toast object to display.
+	 */
+	toast: QueuedToast<T>;
+	/**
+	 * Whether the toast is currently focused.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the toast is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+}
+
+export interface ToastProps<T>
+	extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>>, 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-Toast'
+	 */
+	className?: ClassNameOrFunction<ToastRenderProps<T>>;
+}
+
+/**
+ * A Toast displays a brief, temporary notification of actions, errors, or other events in an
+ * application.
+ */
+const Toast = /*#__PURE__*/ (forwardRef as any)(function Toast<T>(
+	props: ToastProps<T>,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	let state = useContext(ToastStateContext)!;
+	let objectRef = useObjectRef(ref);
+	let { toastProps, contentProps, titleProps, descriptionProps, closeButtonProps } = useToast(
+		props,
+		state,
+		objectRef,
+	);
+
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing();
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-Toast',
+		values: {
+			toast: props.toast,
+			isFocused,
+			isFocusVisible,
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return (
+		<dom.div
+			{...mergeProps(DOMProps, renderProps, toastProps, focusProps)}
+			ref={objectRef}
+			data-focused={isFocused || undefined}
+			data-focus-visible={isFocusVisible || undefined}
+		>
+			<Provider
+				values={[
+					[ToastContentContext, contentProps],
+					[
+						TextContext,
+						{
+							slots: {
+								[DEFAULT_SLOT]: {},
+								title: titleProps,
+								description: descriptionProps,
+							},
+						},
+					],
+					[
+						ButtonContext,
+						{
+							slots: {
+								[DEFAULT_SLOT]: {},
+								close: closeButtonProps,
+							},
+						},
+					],
+				]}
+			>
+				{renderProps.children}
+			</Provider>
+		</dom.div>
+	);
+});
+
+export interface ToastContentProps
+	extends HTMLAttributes<HTMLElement>, DOMRenderProps<'div', undefined> {}
+
+export const ToastContentContext = createContext<
+	ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>
+>({});
+
+/**
+ * ToastContent wraps the main content of a toast notification.
+ */
+export const ToastContent = /*#__PURE__*/ forwardRef(function ToastContent(
+	props: ToastContentProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ToastContentContext);
+	return (
+		<dom.div render={props.render} className="react-aria-ToastContent" {...props} ref={ref}>
+			{props.children}
+		</dom.div>
+	);
+});
+
+export {
+	Toast as UNSTABLE_Toast,
+	ToastList as UNSTABLE_ToastList,
+	ToastRegion as UNSTABLE_ToastRegion,
+	ToastContent as UNSTABLE_ToastContent,
+	ToastStateContext as UNSTABLE_ToastStateContext,
+};