@octanejs/aria 0.0.40 → 0.0.41

package/src/datepicker/useDatePicker.tsx

@@ -0,0 +1,229 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDatePicker.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 { AriaDialogProps } from '../dialog/useDialog';
+import {
+	AriaLabelingProps,
+	DOMAttributes,
+	DOMProps,
+	GroupDOMAttributes,
+	InputDOMProps,
+	KeyboardEvent,
+	RefObject,
+	ValidationResult,
+} from '@react-types/shared';
+import { CalendarProps } from '../upstream-exports/react-stately/useCalendarState';
+import { createFocusManager } from '../focus/FocusScope';
+import {
+	DatePickerProps,
+	DatePickerState,
+	DateValue,
+} from '../upstream-exports/react-stately/useDatePickerState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import intlMessages from '../intl/datepicker/index';
+import { mergeProps } from '../utils/mergeProps';
+import { nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { privateValidationStateProp } from '../upstream-exports/react-stately/private/form/useFormValidationState';
+import { roleSymbol } from './useDateField';
+import { useDatePickerGroup } from './useDatePickerGroup';
+import { useDescription } from '../utils/useDescription';
+import { useField } from '../label/useField';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useId } from '../utils/useId';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMemo, useRef } from '../compat/react';
+
+export interface AriaDatePickerProps<T extends DateValue>
+	extends DatePickerProps<T>, AriaLabelingProps, InputDOMProps, DOMProps, InputDOMProps {
+	/**
+	 * 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;
+}
+
+export interface DatePickerAria extends ValidationResult {
+	/** Props for the date picker's visible label element, if any. */
+	labelProps: DOMAttributes;
+	/** Props for the grouping element containing the date field and button. */
+	groupProps: GroupDOMAttributes;
+	/** Props for the date field. */
+	fieldProps: AriaDatePickerProps<DateValue>;
+	/** Props for the popover trigger button. */
+	buttonProps: AriaButtonProps;
+	/** Props for the description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the error message element, if any. */
+	errorMessageProps: DOMAttributes;
+	/** Props for the popover dialog. */
+	dialogProps: AriaDialogProps;
+	/** Props for the calendar within the popover dialog. */
+	calendarProps: CalendarProps<DateValue>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a date picker component. A date picker
+ * combines a DateField and a Calendar popover to allow users to enter or select a date and time
+ * value.
+ */
+export function useDatePicker<T extends DateValue>(
+	props: AriaDatePickerProps<T>,
+	state: DatePickerState,
+	ref: RefObject<Element | null>,
+): DatePickerAria {
+	let buttonId = useId();
+	let dialogId = useId();
+	let fieldId = useId();
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
+
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+		...props,
+		labelElementType: 'span',
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors,
+	});
+
+	let groupProps = useDatePickerGroup(state, ref);
+
+	let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
+
+	let { locale } = useLocale();
+	let date = state.formatValue(locale, { month: 'long' });
+	let description = date ? stringFormatter.format('selectedDateDescription', { date }) : '';
+	let descProps = useDescription(description);
+	let ariaDescribedBy =
+		[descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') ||
+		undefined;
+	let domProps = filterDOMProps(props);
+	let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+
+	let isFocused = useRef(false);
+	let { focusWithinProps } = useFocusWithin({
+		...props,
+		isDisabled: state.isOpen,
+		onBlurWithin: (e) => {
+			// Ignore when focus moves into the popover.
+			let dialog = document.getElementById(dialogId);
+			if (!nodeContains(dialog, e.relatedTarget as Node | null)) {
+				isFocused.current = false;
+				props.onBlur?.(e as any);
+				props.onFocusChange?.(false);
+			}
+		},
+		onFocusWithin: (e) => {
+			if (!isFocused.current) {
+				isFocused.current = true;
+				props.onFocus?.(e as any);
+				props.onFocusChange?.(true);
+			}
+		},
+	});
+
+	return {
+		groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+			role: 'group' as const,
+			'aria-disabled': props.isDisabled || null,
+			'aria-labelledby': labelledBy,
+			'aria-describedby': ariaDescribedBy,
+			onKeyDown(e: KeyboardEvent) {
+				if (state.isOpen) {
+					return;
+				}
+
+				if (props.onKeyDown) {
+					props.onKeyDown(e);
+				}
+			},
+			onKeyUp(e: KeyboardEvent) {
+				if (state.isOpen) {
+					return;
+				}
+
+				if (props.onKeyUp) {
+					props.onKeyUp(e);
+				}
+			},
+		}),
+		labelProps: {
+			...labelProps,
+			onClick: () => {
+				focusManager.focusFirst();
+			},
+		},
+		fieldProps: {
+			...fieldProps,
+			id: fieldId,
+			[roleSymbol]: 'presentation',
+			'aria-describedby': ariaDescribedBy,
+			value: state.value,
+			defaultValue: state.defaultValue,
+			onChange: state.setValue,
+			placeholderValue: props.placeholderValue,
+			hideTimeZone: props.hideTimeZone,
+			hourCycle: props.hourCycle,
+			shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+			granularity: props.granularity,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isRequired: props.isRequired,
+			validationBehavior: props.validationBehavior,
+			// DatePicker owns the validation state for the date field.
+			[privateValidationStateProp]: state,
+			autoFocus: props.autoFocus,
+			name: props.name,
+			form: props.form,
+		},
+		descriptionProps,
+		errorMessageProps,
+		buttonProps: {
+			...descProps,
+			id: buttonId,
+			'aria-haspopup': 'dialog',
+			'aria-label': stringFormatter.format('calendar'),
+			'aria-labelledby': `${buttonId} ${labelledBy}`,
+			'aria-describedby': ariaDescribedBy,
+			'aria-expanded': state.isOpen,
+			isDisabled: props.isDisabled || props.isReadOnly,
+			onPress: () => state.setOpen(true),
+		},
+		dialogProps: {
+			id: dialogId,
+			'aria-labelledby': `${buttonId} ${labelledBy}`,
+		},
+		calendarProps: {
+			autoFocus: true,
+			value: state.dateValue,
+			onChange: state.setDateValue,
+			minValue: props.minValue,
+			maxValue: props.maxValue,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: props.isDateUnavailable,
+			defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+			isInvalid: state.isInvalid,
+			errorMessage:
+				typeof props.errorMessage === 'function'
+					? props.errorMessage(state.displayValidation)
+					: props.errorMessage || state.displayValidation.validationErrors.join(' '),
+			firstDayOfWeek: props.firstDayOfWeek,
+			pageBehavior: props.pageBehavior,
+		},
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	};
+}

package/src/datepicker/useDatePickerGroup.tsx

@@ -0,0 +1,147 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDatePickerGroup.ts).
+import { createFocusManager, getFocusableTreeWalker } from '../focus/FocusScope';
+import { DateFieldState } from '../upstream-exports/react-stately/useDateFieldState';
+import { DatePickerState } from '../upstream-exports/react-stately/useDatePickerState';
+import { DateRangePickerState } from '../upstream-exports/react-stately/useDateRangePickerState';
+import { DOMAttributes, FocusableElement, KeyboardEvent, RefObject } from '@react-types/shared';
+import { getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { mergeProps } from '../utils/mergeProps';
+import { useLocale } from '../i18n/I18nProvider';
+import { useMemo } from '../compat/react';
+import { usePress } from '../interactions/usePress';
+
+export function useDatePickerGroup(
+	state: DatePickerState | DateRangePickerState | DateFieldState,
+	ref: RefObject<Element | null>,
+	disableArrowNavigation?: boolean,
+): DOMAttributes<FocusableElement> {
+	let { direction } = useLocale();
+	let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+
+	// Open the popover on alt + arrow down
+	let onKeyDown = (e: KeyboardEvent) => {
+		if (!nodeContains(e.currentTarget, getEventTarget(e as unknown as Event) as Element)) {
+			return;
+		}
+
+		if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
+			e.preventDefault();
+			e.stopPropagation();
+			state.setOpen(true);
+		}
+
+		if (disableArrowNavigation) {
+			return;
+		}
+
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				e.stopPropagation();
+				if (direction === 'rtl') {
+					if (ref.current) {
+						let target = getEventTarget(e as unknown as Event) as FocusableElement;
+						let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
+
+						if (prev) {
+							prev.focus();
+						}
+					}
+				} else {
+					focusManager.focusPrevious();
+				}
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				e.stopPropagation();
+				if (direction === 'rtl') {
+					if (ref.current) {
+						let target = getEventTarget(e as unknown as Event) as FocusableElement;
+						let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
+
+						if (next) {
+							next.focus();
+						}
+					}
+				} else {
+					focusManager.focusNext();
+				}
+				break;
+		}
+	};
+
+	// Focus the first placeholder segment from the end on mouse down/touch up in the field.
+	let focusLast = () => {
+		if (!ref.current) {
+			return;
+		}
+		// Try to find the segment prior to the element that was clicked on.
+		let target = window.event ? (getEventTarget(window.event) as FocusableElement) : null;
+		let walker = getFocusableTreeWalker(ref.current, { tabbable: true });
+		if (target) {
+			walker.currentNode = target;
+			target = walker.previousNode() as FocusableElement;
+		}
+
+		// If no target found, find the last element from the end.
+		if (!target) {
+			let last: FocusableElement;
+			do {
+				last = walker.lastChild() as FocusableElement;
+				if (last) {
+					target = last;
+				}
+			} while (last);
+		}
+
+		// Now go backwards until we find an element that is not a placeholder.
+		while (target?.hasAttribute('data-placeholder')) {
+			let prev = walker.previousNode() as FocusableElement;
+			if (prev && prev.hasAttribute('data-placeholder')) {
+				target = prev;
+			} else {
+				break;
+			}
+		}
+
+		if (target) {
+			target.focus();
+		}
+	};
+
+	let { pressProps } = usePress({
+		preventFocusOnPress: true,
+		allowTextSelectionOnPress: true,
+		onPressStart(e) {
+			if (e.pointerType === 'mouse') {
+				focusLast();
+			}
+		},
+		onPress(e) {
+			if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+				focusLast();
+			}
+		},
+	});
+
+	return mergeProps(pressProps, { onKeyDown });
+}
+
+function findNextSegment(group: Element, fromX: number, direction: number) {
+	let walker = getFocusableTreeWalker(group, { tabbable: true });
+	let node = walker.nextNode();
+	let closest: FocusableElement | null = null;
+	let closestDistance = Infinity;
+	while (node) {
+		let x = (node as Element).getBoundingClientRect().left;
+		let distance = x - fromX;
+		let absoluteDistance = Math.abs(distance);
+		if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
+			closest = node as FocusableElement;
+			closestDistance = absoluteDistance;
+		}
+		node = walker.nextNode();
+	}
+	return closest;
+}

package/src/datepicker/useDateRangePicker.tsx

@@ -0,0 +1,288 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDateRangePicker.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 { AriaDatePickerProps } from './useDatePicker';
+import { AriaDialogProps } from '../dialog/useDialog';
+import {
+	AriaLabelingProps,
+	DOMAttributes,
+	DOMProps,
+	GroupDOMAttributes,
+	InputDOMProps,
+	KeyboardEvent,
+	RefObject,
+	ValidationResult,
+} from '@react-types/shared';
+import { createFocusManager } from '../focus/FocusScope';
+import {
+	DateRange,
+	DateRangePickerProps,
+	DateRangePickerState,
+	DateValue,
+} from '../upstream-exports/react-stately/useDateRangePickerState';
+import {
+	DEFAULT_VALIDATION_RESULT,
+	mergeValidation,
+	privateValidationStateProp,
+} from '../upstream-exports/react-stately/private/form/useFormValidationState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { focusManagerSymbol, roleSymbol } from './useDateField';
+import intlMessages from '../intl/datepicker/index';
+import { mergeProps } from '../utils/mergeProps';
+import { nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { RangeCalendarProps } from '../upstream-exports/react-stately/useRangeCalendarState';
+import { useDatePickerGroup } from './useDatePickerGroup';
+import { useDescription } from '../utils/useDescription';
+import { useField } from '../label/useField';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useId } from '../utils/useId';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMemo, useRef } from '../compat/react';
+
+export interface AriaDateRangePickerProps<T extends DateValue>
+	extends DateRangePickerProps<T>, AriaLabelingProps, Omit<InputDOMProps, 'name'>, DOMProps {}
+
+export interface DateRangePickerAria extends ValidationResult {
+	/** Props for the date range picker's visible label element, if any. */
+	labelProps: DOMAttributes;
+	/** Props for the grouping element containing the date fields and button. */
+	groupProps: GroupDOMAttributes;
+	/** Props for the start date field. */
+	startFieldProps: AriaDatePickerProps<DateValue>;
+	/** Props for the end date field. */
+	endFieldProps: AriaDatePickerProps<DateValue>;
+	/** Props for the popover trigger button. */
+	buttonProps: AriaButtonProps;
+	/** Props for the description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the error message element, if any. */
+	errorMessageProps: DOMAttributes;
+	/** Props for the popover dialog. */
+	dialogProps: AriaDialogProps;
+	/** Props for the range calendar within the popover dialog. */
+	calendarProps: RangeCalendarProps<DateValue>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a date picker component.
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+export function useDateRangePicker<T extends DateValue>(
+	props: AriaDateRangePickerProps<T>,
+	state: DateRangePickerState,
+	ref: RefObject<Element | null>,
+): DateRangePickerAria {
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+		...props,
+		labelElementType: 'span',
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors,
+	});
+
+	let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
+
+	let { locale } = useLocale();
+	let range = state.formatValue(locale, { month: 'long' });
+	let description = range
+		? stringFormatter.format('selectedRangeDescription', {
+				startDate: range.start,
+				endDate: range.end,
+			})
+		: '';
+	let descProps = useDescription(description);
+
+	let startFieldProps = {
+		'aria-label': stringFormatter.format('startDate'),
+		'aria-labelledby': labelledBy,
+	};
+
+	let endFieldProps = {
+		'aria-label': stringFormatter.format('endDate'),
+		'aria-labelledby': labelledBy,
+	};
+
+	let buttonId = useId();
+	let dialogId = useId();
+
+	let groupProps = useDatePickerGroup(state, ref);
+
+	let ariaDescribedBy =
+		[descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') ||
+		undefined;
+	let focusManager = useMemo(
+		() =>
+			createFocusManager(ref, {
+				// Exclude the button from the focus manager.
+				accept: (element) => element.id !== buttonId,
+			}),
+		[ref, buttonId],
+	);
+
+	let commonFieldProps = {
+		[focusManagerSymbol]: focusManager,
+		[roleSymbol]: 'presentation',
+		'aria-describedby': ariaDescribedBy,
+		placeholderValue: props.placeholderValue,
+		hideTimeZone: props.hideTimeZone,
+		hourCycle: props.hourCycle,
+		granularity: props.granularity,
+		shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+		isDisabled: props.isDisabled,
+		isReadOnly: props.isReadOnly,
+		isRequired: props.isRequired,
+		validationBehavior: props.validationBehavior,
+	};
+
+	let domProps = filterDOMProps(props);
+
+	let isFocused = useRef(false);
+	let { focusWithinProps } = useFocusWithin({
+		...props,
+		isDisabled: state.isOpen,
+		onBlurWithin: (e) => {
+			// Ignore when focus moves into the popover.
+			let dialog = document.getElementById(dialogId);
+			if (!nodeContains(dialog, e.relatedTarget as Node | null)) {
+				isFocused.current = false;
+				props.onBlur?.(e as any);
+				props.onFocusChange?.(false);
+			}
+		},
+		onFocusWithin: (e) => {
+			if (!isFocused.current) {
+				isFocused.current = true;
+				props.onFocus?.(e as any);
+				props.onFocusChange?.(true);
+			}
+		},
+	});
+
+	let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+	let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+
+	return {
+		groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+			role: 'group' as const,
+			'aria-disabled': props.isDisabled || null,
+			'aria-describedby': ariaDescribedBy,
+			onKeyDown(e: KeyboardEvent) {
+				if (state.isOpen) {
+					return;
+				}
+
+				if (props.onKeyDown) {
+					props.onKeyDown(e);
+				}
+			},
+			onKeyUp(e: KeyboardEvent) {
+				if (state.isOpen) {
+					return;
+				}
+
+				if (props.onKeyUp) {
+					props.onKeyUp(e);
+				}
+			},
+		}),
+		labelProps: {
+			...labelProps,
+			onClick: () => {
+				focusManager.focusFirst();
+			},
+		},
+		buttonProps: {
+			...descProps,
+			id: buttonId,
+			'aria-haspopup': 'dialog',
+			'aria-label': stringFormatter.format('calendar'),
+			'aria-labelledby': `${buttonId} ${labelledBy}`,
+			'aria-describedby': ariaDescribedBy,
+			'aria-expanded': state.isOpen,
+			isDisabled: props.isDisabled || props.isReadOnly,
+			onPress: () => state.setOpen(true),
+		},
+		dialogProps: {
+			id: dialogId,
+			'aria-labelledby': `${buttonId} ${labelledBy}`,
+		},
+		startFieldProps: {
+			...startFieldProps,
+			...commonFieldProps,
+			value: state.value?.start ?? null,
+			defaultValue: state.defaultValue?.start,
+			onChange: (start) => state.setDateTime('start', start),
+			autoFocus: props.autoFocus,
+			name: props.startName,
+			form: props.form,
+			[privateValidationStateProp]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e: ValidationResult) {
+					startFieldValidation.current = e;
+					state.updateValidation(mergeValidation(e, endFieldValidation.current));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation,
+			},
+		},
+		endFieldProps: {
+			...endFieldProps,
+			...commonFieldProps,
+			value: state.value?.end ?? null,
+			defaultValue: state.defaultValue?.end,
+			onChange: (end) => state.setDateTime('end', end),
+			name: props.endName,
+			form: props.form,
+			[privateValidationStateProp]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e: ValidationResult) {
+					endFieldValidation.current = e;
+					state.updateValidation(mergeValidation(startFieldValidation.current, e));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation,
+			},
+		},
+		descriptionProps,
+		errorMessageProps,
+		calendarProps: {
+			autoFocus: true,
+			value: state.dateRange?.start && state.dateRange.end ? (state.dateRange as DateRange) : null,
+			onChange: state.setDateRange,
+			minValue: props.minValue,
+			maxValue: props.maxValue,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: props.isDateUnavailable,
+			allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+			defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
+			isInvalid: state.isInvalid,
+			errorMessage:
+				typeof props.errorMessage === 'function'
+					? props.errorMessage(state.displayValidation)
+					: props.errorMessage || state.displayValidation.validationErrors.join(' '),
+			firstDayOfWeek: props.firstDayOfWeek,
+			pageBehavior: props.pageBehavior,
+		},
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	};
+}