ropav 0.2.0 → 0.3.0

package/dist/composables/use-form-validation-state.js

@@ -0,0 +1,213 @@
+import { createContext } from "../utils/create-context.js";
+import { computed, nextTick, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-form-validation-state.ts
+var VALID_VALIDITY_STATE = Object.freeze({
+	badInput: false,
+	customError: false,
+	patternMismatch: false,
+	rangeOverflow: false,
+	rangeUnderflow: false,
+	stepMismatch: false,
+	tooLong: false,
+	tooShort: false,
+	typeMismatch: false,
+	valid: true,
+	valueMissing: false
+});
+/** Failure that came from a prop, a `validate` function or the server rather than the browser. */
+var CUSTOM_VALIDITY_STATE = Object.freeze({
+	...VALID_VALIDITY_STATE,
+	customError: true,
+	valid: false
+});
+var DEFAULT_VALIDATION_RESULT = Object.freeze({
+	isInvalid: false,
+	validationDetails: VALID_VALIDITY_STATE,
+	validationErrors: []
+});
+/**
+* One verdict out of several, for a control whose value has more than one part.
+*
+* Invalid if any part is, with the messages collected in order and deduplicated — two ends of a
+* range that are both out of bounds say the same thing, and saying it twice is not more helpful.
+*/
+var mergeValidation = (...results) => {
+	const errors = /* @__PURE__ */ new Set();
+	const details = { ...VALID_VALIDITY_STATE };
+	let isInvalid = false;
+	for (const result of results) {
+		for (const error of result.validationErrors) errors.add(error);
+		isInvalid ||= result.isInvalid;
+		for (const key of Object.keys(details)) details[key] ||= result.validationDetails[key];
+	}
+	details.valid = !isInvalid;
+	return {
+		isInvalid,
+		validationDetails: details,
+		validationErrors: [...errors]
+	};
+};
+/** Freeze an element's live validity into a result the state layer can hold. */
+var getNativeValidation = (element) => {
+	const validity = element.validity;
+	return {
+		isInvalid: !validity.valid,
+		validationDetails: {
+			badInput: validity.badInput,
+			customError: validity.customError,
+			patternMismatch: validity.patternMismatch,
+			rangeOverflow: validity.rangeOverflow,
+			rangeUnderflow: validity.rangeUnderflow,
+			stepMismatch: validity.stepMismatch,
+			tooLong: validity.tooLong,
+			tooShort: validity.tooShort,
+			typeMismatch: validity.typeMismatch,
+			valid: validity.valid,
+			valueMissing: validity.valueMissing
+		},
+		validationErrors: element.validationMessage ? [element.validationMessage] : []
+	};
+};
+/**
+* React splits this in two — `FormValidationContext` in react-stately for the errors,
+* `FormContext` in react-aria-components for the behaviour — only because the two live in
+* different packages. Here one provider hands out both, so a field injects once and the two
+* halves cannot drift apart.
+*
+* Loose: a field outside a form is the normal case, not an error.
+*/
+var [useFormContext, provideFormContext] = createContext({
+	defaultValue: null,
+	name: "FormContext",
+	strict: false
+});
+var asArray = (value) => {
+	if (!value) return [];
+	return Array.isArray(value) ? value : [value];
+};
+var runValidate = (validate, value) => {
+	const result = validate(value);
+	return result && typeof result !== "boolean" ? asArray(result) : [];
+};
+var toValidationResult = (errors) => errors.length > 0 ? {
+	isInvalid: true,
+	validationDetails: CUSTOM_VALIDITY_STATE,
+	validationErrors: errors
+} : null;
+/**
+* Whether two results say the same thing.
+*
+* Not an optimisation: the results live in `shallowRef`s, and assigning an equal-but-new
+* object still retriggers every computed reading them.
+*/
+var isEqualValidation = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((error, index) => error === b.validationErrors[index]) && Object.keys(a.validationDetails).every((key) => a.validationDetails[key] === b.validationDetails[key]);
+};
+/**
+* Decide what a field's validation currently says, ported from React Aria's
+* `packages/react-stately/src/form/useFormValidationState.ts` (react-stately 3.49.0).
+*
+* Knows nothing about the DOM — `useFormValidation` is what connects this to a real input.
+* Four sources feed it, in a fixed order of precedence:
+*
+* ```
+* realtime        = controlled ?? server ?? client ?? builtin ?? valid
+* display(native) = controlled ?? server ?? committed
+* display(aria)   = controlled ?? server ?? client ?? builtin ?? committed
+* ```
+*
+* `realtimeValidation` is what the field pushes onto the input through `setCustomValidity`,
+* so the browser blocks submission the moment the value stops being acceptable.
+* `displayValidation` is what the user reads, and under `"native"` it moves only on commit —
+* which is what keeps an untouched field from turning red before it has been used.
+*
+* @example
+* ```ts
+* const validation = useFormValidationState<boolean>({
+*   isInvalid: () => props.isInvalid,
+*   name: () => props.name,
+*   validate: () => props.validate,
+*   validationBehavior: () => props.validationBehavior,
+*   value: () => state.value,
+* });
+* ```
+*/
+var useFormValidationState = (options) => {
+	if (options.validationState) return options.validationState;
+	const form = useFormContext();
+	const validationBehavior = computed(() => toValue(options.validationBehavior) ?? form?.validationBehavior.value ?? "native");
+	const controlledError = computed(() => {
+		const isInvalid = toValue(options.isInvalid);
+		if (isInvalid === void 0) return null;
+		return {
+			isInvalid,
+			validationDetails: isInvalid ? CUSTOM_VALIDITY_STATE : VALID_VALIDITY_STATE,
+			validationErrors: []
+		};
+	});
+	const clientError = computed(() => {
+		const validate = toValue(options.validate);
+		const value = toValue(options.value);
+		if (!validate || value == null) return null;
+		return toValidationResult(runValidate(validate, value));
+	});
+	const builtinValidation = computed(() => {
+		const result = toValue(options.builtinValidation);
+		return result && !result.validationDetails.valid ? result : null;
+	});
+	const serverErrors = computed(() => form?.validationErrors.value ?? {});
+	const serverErrorMessages = computed(() => {
+		const name = toValue(options.name);
+		if (!name) return [];
+		return Array.isArray(name) ? name.flatMap((key) => asArray(serverErrors.value[key])) : asArray(serverErrors.value[name]);
+	});
+	const isServerErrorCleared = shallowRef(false);
+	watch(serverErrors, () => {
+		isServerErrorCleared.value = false;
+	});
+	const serverError = computed(() => isServerErrorCleared.value ? null : toValidationResult(serverErrorMessages.value));
+	/** What a commit will reveal. Written by `updateValidation` under `"native"`. */
+	const nextNative = shallowRef(DEFAULT_VALIDATION_RESULT);
+	/** What a commit has already revealed. */
+	const committed = shallowRef(DEFAULT_VALIDATION_RESULT);
+	let isCommitQueued = false;
+	const realtimeValidation = computed(() => controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? DEFAULT_VALIDATION_RESULT);
+	const displayValidation = computed(() => {
+		if (validationBehavior.value === "native") return controlledError.value ?? serverError.value ?? committed.value;
+		return controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? committed.value;
+	});
+	const setCommitted = (result) => {
+		if (!isEqualValidation(result, committed.value)) committed.value = result;
+	};
+	return {
+		commitValidation: () => {
+			isServerErrorCleared.value = true;
+			if (validationBehavior.value !== "native" || isCommitQueued) return;
+			isCommitQueued = true;
+			nextTick(() => {
+				if (!isCommitQueued) return;
+				isCommitQueued = false;
+				setCommitted(clientError.value ?? builtinValidation.value ?? nextNative.value);
+			});
+		},
+		displayValidation,
+		realtimeValidation,
+		resetValidation: () => {
+			setCommitted(DEFAULT_VALIDATION_RESULT);
+			isCommitQueued = false;
+			isServerErrorCleared.value = true;
+		},
+		updateValidation: (result) => {
+			if (validationBehavior.value === "aria") {
+				setCommitted(result);
+				return;
+			}
+			nextNative.value = result;
+		},
+		validationBehavior
+	};
+};
+//#endregion
+export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, mergeValidation, provideFormContext, useFormContext, useFormValidationState };

package/dist/composables/use-form-validation.d.ts

@@ -0,0 +1,44 @@
+import type { FormValidationState, ValidatableElement } from "./use-form-validation-state";
+import type { MaybeRefOrGetter, Ref } from "vue";
+export interface UseFormValidationOptions {
+    /** Called instead of focusing the element when a failed submit lands on this field. */
+    focus?: () => void;
+    /**
+     * Whether leaving the field reveals its errors. Text fields want this; a toggle does not,
+     * since focus merely passing through is no reason to turn it red.
+     * @default false
+     */
+    commitOnBlur?: MaybeRefOrGetter<boolean | undefined>;
+}
+/**
+ * Connect a field's validation state to the real input it renders, ported from React Aria's
+ * `packages/react-aria/src/form/useFormValidation.ts` (react-aria 3.51.0).
+ *
+ * Two halves. A post-flush effect mirrors the field's own verdict onto the input through
+ * `setCustomValidity`, which is what makes the browser refuse to submit and jump to the
+ * field. Listeners on the input then turn the browser's answer back into state: `invalid`
+ * reveals the error, `change` commits, and a form reset clears it.
+ *
+ * The listeners are attached imperatively rather than declared in a template. Vapor removes
+ * and re-adds every `on*` that arrives through `v-bind` on each render, which drops handlers
+ * mid-dispatch — and a validating input re-renders on exactly the events it is listening for.
+ *
+ * @example
+ * ```ts
+ * const inputEl = shallowRef<HTMLInputElement | null>(null);
+ * useFormValidation(inputEl, validation);
+ * ```
+ */
+export declare const useFormValidation: (element: Ref<ValidatableElement | null | undefined>, state: FormValidationState, options?: UseFormValidationOptions) => void;
+/**
+ * Keep a group's registry of item inputs in step with one item's element.
+ *
+ * A checkbox group has no native constraint of its own, so it works out its validity by
+ * reading the inputs of its items. Each item hands its element over for as long as it lives.
+ *
+ * @example
+ * ```ts
+ * useValidationInput(inputEl, group?.registerInput);
+ * ```
+ */
+export declare const useValidationInput: (element: Ref<HTMLInputElement | null | undefined>, register: ((input: HTMLInputElement) => () => void) | null | undefined) => void;

package/dist/composables/use-form-validation.js

@@ -0,0 +1,137 @@
+import { setInteractionModality } from "./use-interaction-states.js";
+import { getNativeValidation } from "./use-form-validation-state.js";
+import { onScopeDispose, toValue, watch, watchEffect } from "vue";
+//#region src/composables/use-form-validation.ts
+/** First control in the form the browser considers invalid, in document order. */
+var firstInvalidElement = (form) => {
+	for (const element of Array.from(form.elements)) {
+		const candidate = element;
+		if (candidate.validity?.valid === false) return candidate;
+	}
+	return null;
+};
+/**
+* Connect a field's validation state to the real input it renders, ported from React Aria's
+* `packages/react-aria/src/form/useFormValidation.ts` (react-aria 3.51.0).
+*
+* Two halves. A post-flush effect mirrors the field's own verdict onto the input through
+* `setCustomValidity`, which is what makes the browser refuse to submit and jump to the
+* field. Listeners on the input then turn the browser's answer back into state: `invalid`
+* reveals the error, `change` commits, and a form reset clears it.
+*
+* The listeners are attached imperatively rather than declared in a template. Vapor removes
+* and re-adds every `on*` that arrives through `v-bind` on each render, which drops handlers
+* mid-dispatch — and a validating input re-renders on exactly the events it is listening for.
+*
+* @example
+* ```ts
+* const inputEl = shallowRef<HTMLInputElement | null>(null);
+* useFormValidation(inputEl, validation);
+* ```
+*/
+var useFormValidation = (element, state, options = {}) => {
+	watchEffect(() => {
+		if (state.validationBehavior.value !== "native") return;
+		const input = element.value;
+		if (!input || input.disabled) return;
+		const { isInvalid, validationErrors } = state.realtimeValidation.value;
+		input.setCustomValidity(isInvalid ? validationErrors.join(" ") || "Invalid value." : "");
+		if (!input.hasAttribute("title")) input.title = "";
+		if (!isInvalid) state.updateValidation(getNativeValidation(input));
+	}, { flush: "post" });
+	const onInvalid = (event) => {
+		if (!state.displayValidation.value.isInvalid) state.commitValidation();
+		const input = element.value;
+		const form = input?.form;
+		if (!event.defaultPrevented && input && form && firstInvalidElement(form) === input) {
+			if (options.focus) options.focus();
+			else input.focus();
+			setInteractionModality("keyboard");
+		}
+		event.preventDefault();
+	};
+	/**
+	* Re-read the browser's verdict before revealing it.
+	*
+	* The effect above only re-runs when one of the reactive values it reads changes, and reading
+	* `input.validity` tracks nothing — so for a field with no `validate`, no `isInvalid` and no
+	* server errors, *nothing* it depends on ever changes and the snapshot taken at mount is the one
+	* a later commit reveals. That is how a required field ends up marked invalid after being filled
+	* in correctly: the commit on `change` reads a "value missing" verdict from when the field was
+	* still empty, and nothing commits again to clear it.
+	*
+	* React gets this for free because its effect runs on every render and a keystroke is always a
+	* render. Nothing is revealed by this on its own — under native behaviour `updateValidation` only
+	* records what a commit *would* say — so it cannot make an error appear before its time.
+	*/
+	const refreshNativeValidity = () => {
+		if (state.validationBehavior.value !== "native") return;
+		const input = element.value;
+		if (!input || input.disabled) return;
+		if (state.realtimeValidation.value.isInvalid) return;
+		state.updateValidation(getNativeValidation(input));
+	};
+	const onChange = () => {
+		refreshNativeValidity();
+		state.commitValidation();
+	};
+	const onBlur = () => {
+		if (toValue(options.commitOnBlur)) state.commitValidation();
+	};
+	const onReset = (event) => {
+		if (!event.defaultPrevented) state.resetValidation();
+	};
+	let attached = null;
+	const detach = () => {
+		if (!attached) return;
+		attached.input.removeEventListener("invalid", onInvalid);
+		attached.input.removeEventListener("change", onChange);
+		attached.input.removeEventListener("blur", onBlur);
+		attached.form?.removeEventListener("reset", onReset);
+		attached = null;
+	};
+	watch([() => element.value, () => element.value?.form ?? null], ([input, form]) => {
+		detach();
+		if (!input) return;
+		input.addEventListener("invalid", onInvalid);
+		input.addEventListener("change", onChange);
+		input.addEventListener("blur", onBlur);
+		form?.addEventListener("reset", onReset);
+		attached = {
+			form,
+			input
+		};
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(detach, true);
+};
+/**
+* Keep a group's registry of item inputs in step with one item's element.
+*
+* A checkbox group has no native constraint of its own, so it works out its validity by
+* reading the inputs of its items. Each item hands its element over for as long as it lives.
+*
+* @example
+* ```ts
+* useValidationInput(inputEl, group?.registerInput);
+* ```
+*/
+var useValidationInput = (element, register) => {
+	if (!register) return;
+	let unregister;
+	watch(() => element.value, (input) => {
+		unregister?.();
+		unregister = input ? register(input) : void 0;
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => {
+		unregister?.();
+		unregister = void 0;
+	}, true);
+};
+//#endregion
+export { useFormValidation, useValidationInput };

package/dist/composables/use-formatted-text-field.d.ts

@@ -0,0 +1,25 @@
+import type { ShallowRef } from "vue";
+export interface UseFormattedTextFieldOptions {
+    /** Whether a string could still become an acceptable value, half-typed or not. */
+    validate: (value: string) => boolean;
+    /** Put the text back, for input that has to be undone after the fact. */
+    setInputValue: (value: string) => void;
+}
+/**
+ * Keeps unacceptable characters out of a formatted text field, ported from React Aria's
+ * `packages/react-aria/src/textfield/useFormattedTextField.ts` (react-aria 3.51.0).
+ *
+ * The work happens on `beforeinput`, which is the only event that can still be cancelled: by the
+ * time `input` fires the text is already in the field and the undo stack has a step in it. What
+ * the edit *would* produce is worked out from the input type and the current selection, and the
+ * event is cancelled if that result could never become a number.
+ *
+ * Composition — an IME, or Android autocorrect — cannot be cancelled that way, because the input
+ * is deliberately incomplete while it is in progress. That one is handled by remembering the
+ * field before composition started and putting it back afterwards if the result is unacceptable.
+ *
+ * Listeners are attached here rather than declared in a template: `beforeinput` on an element
+ * that re-renders in response to its own input is exactly the case where a listener arriving
+ * through `v-bind` gets dropped mid-dispatch.
+ */
+export declare const useFormattedTextField: (element: ShallowRef<HTMLInputElement | null> | (() => HTMLInputElement | null), options: UseFormattedTextFieldOptions) => void;

package/dist/composables/use-formatted-text-field.js

@@ -0,0 +1,97 @@
+import { onScopeDispose, watch } from "vue";
+//#region src/composables/use-formatted-text-field.ts
+/**
+* Keeps unacceptable characters out of a formatted text field, ported from React Aria's
+* `packages/react-aria/src/textfield/useFormattedTextField.ts` (react-aria 3.51.0).
+*
+* The work happens on `beforeinput`, which is the only event that can still be cancelled: by the
+* time `input` fires the text is already in the field and the undo stack has a step in it. What
+* the edit *would* produce is worked out from the input type and the current selection, and the
+* event is cancelled if that result could never become a number.
+*
+* Composition — an IME, or Android autocorrect — cannot be cancelled that way, because the input
+* is deliberately incomplete while it is in progress. That one is handled by remembering the
+* field before composition started and putting it back afterwards if the result is unacceptable.
+*
+* Listeners are attached here rather than declared in a template: `beforeinput` on an element
+* that re-renders in response to its own input is exactly the case where a listener arriving
+* through `v-bind` gets dropped mid-dispatch.
+*/
+var useFormattedTextField = (element, options) => {
+	let composition = null;
+	const onBeforeInput = (event) => {
+		const input = event.currentTarget;
+		if (!input || !(event instanceof InputEvent)) return;
+		const start = input.selectionStart ?? 0;
+		const end = input.selectionEnd ?? 0;
+		let next = null;
+		switch (event.inputType) {
+			case "historyRedo":
+			case "historyUndo": return;
+			case "insertLineBreak": return;
+			case "deleteByCut":
+			case "deleteByDrag":
+			case "deleteContent":
+				next = input.value.slice(0, start) + input.value.slice(end);
+				break;
+			case "deleteContentForward":
+				next = start === end ? input.value.slice(0, start) + input.value.slice(end + 1) : input.value.slice(0, start) + input.value.slice(end);
+				break;
+			case "deleteContentBackward":
+				next = start === end ? input.value.slice(0, start - 1) + input.value.slice(start) : input.value.slice(0, start) + input.value.slice(end);
+				break;
+			case "deleteHardLineBackward":
+			case "deleteSoftLineBackward":
+				next = input.value.slice(start);
+				break;
+			default: if (event.data != null) next = input.value.slice(0, start) + event.data + input.value.slice(end);
+		}
+		if (next === null || !options.validate(next)) event.preventDefault();
+	};
+	const onCompositionStart = (event) => {
+		const input = event.currentTarget;
+		if (!input) return;
+		composition = {
+			selectionEnd: input.selectionEnd,
+			selectionStart: input.selectionStart,
+			value: input.value
+		};
+	};
+	const onCompositionEnd = (event) => {
+		const input = event.currentTarget;
+		if (!input || !composition) return;
+		if (options.validate(input.value)) {
+			composition = null;
+			return;
+		}
+		input.value = composition.value;
+		input.setSelectionRange(composition.selectionStart, composition.selectionEnd);
+		options.setInputValue(composition.value);
+		composition = null;
+	};
+	const attach = (input) => {
+		input.addEventListener("beforeinput", onBeforeInput, false);
+		input.addEventListener("compositionstart", onCompositionStart, false);
+		input.addEventListener("compositionend", onCompositionEnd, false);
+	};
+	const detach = (input) => {
+		input.removeEventListener("beforeinput", onBeforeInput, false);
+		input.removeEventListener("compositionstart", onCompositionStart, false);
+		input.removeEventListener("compositionend", onCompositionEnd, false);
+	};
+	let attached = null;
+	watch(element, (input) => {
+		if (attached) detach(attached);
+		attached = input ?? null;
+		if (attached) attach(attached);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => {
+		if (attached) detach(attached);
+		attached = null;
+	});
+};
+//#endregion
+export { useFormattedTextField };

package/dist/composables/use-grid-keyboard.d.ts

@@ -0,0 +1,83 @@
+import type { CollectionKey } from "./use-collection";
+import type { ListKeyboardLayoutDelegate } from "./use-list-keyboard";
+import type { UseSelectionManagerReturn } from "./use-selection-manager";
+import type { UseTableCollectionReturn } from "./use-table-collection";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/**
+ * Where focus sits in a grid.
+ *
+ * `rowKey: null` means the header row, `columnKey: null` means the row itself rather than one of
+ * its cells, and both `null` means focus is not inside the grid at all.
+ *
+ * React Aria carries the same three states in a single key, because its collection holds rows and
+ * cells in one tree. Here the selection manager runs on the **rows** alone — which is what lets a
+ * listbox's manager be reused unchanged — so the two axes are held apart, and only `rowKey` is
+ * ever handed to the manager. Handing it a cell key instead would silently break range selection:
+ * `extendSelection` would look up a key the row collection does not have.
+ */
+export interface GridFocusTarget {
+    rowKey: CollectionKey | null;
+    columnKey: CollectionKey | null;
+}
+/** What the grid needs to know to open and close rows from the horizontal arrows. */
+export interface GridExpansion {
+    isTree: () => boolean;
+    isExpanded: (rowKey: CollectionKey) => boolean;
+    hasChildRows: (rowKey: CollectionKey) => boolean;
+    parentKey: (rowKey: CollectionKey) => CollectionKey | null;
+    toggle: (rowKey: CollectionKey) => void;
+}
+export interface UseGridKeyboardOptions {
+    collection: UseTableCollectionReturn;
+    selection: UseSelectionManagerReturn;
+    /** The element carrying `role="grid"`. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    disallowSelectAll?: MaybeRefOrGetter<boolean | undefined>;
+    /** Hands every key back, for as long as something else owns them — a column being resized. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Supplied by a tree grid, where the horizontal arrows expand and collapse rows. */
+    expansion?: GridExpansion;
+    /**
+     * Where the rows are, when a layout knows better than the DOM does.
+     *
+     * The same delegate a virtualized listbox pages by: measuring elements can only answer for the
+     * rows that rendered, which in a virtualized table is a screenful.
+     */
+    layout?: MaybeRefOrGetter<ListKeyboardLayoutDelegate | null | undefined>;
+    /** @default "clearSelection" */
+    escapeKeyBehavior?: MaybeRefOrGetter<"clearSelection" | "none" | undefined>;
+}
+export interface UseGridKeyboardReturn {
+    focusedCell: ComputedRef<GridFocusTarget>;
+    /** `0` while nothing inside is focused, `-1` afterwards. */
+    collectionTabIndex: ComputedRef<number>;
+    columnTabIndex: (columnKey: CollectionKey) => number;
+    rowTabIndex: (rowKey: CollectionKey) => number | undefined;
+    cellTabIndex: (rowKey: CollectionKey, columnKey: CollectionKey | null) => number;
+    /** Move focus to a target, and move real DOM focus with it. */
+    focusCell: (target: GridFocusTarget, options?: {
+        scroll?: boolean;
+    }) => void;
+    /** Record focus that arrived on its own, from a click or from assistive technology. */
+    claimFocus: (target: GridFocusTarget) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onFocusin: (event: FocusEvent) => void;
+    onFocusout: (event: FocusEvent) => void;
+    getKeyForSearch: (search: string, fromKey?: CollectionKey | null) => CollectionKey | null;
+}
+/**
+ * Two-dimensional keyboard navigation for a grid, ported from React Aria's
+ * `GridKeyboardDelegate`, `TableKeyboardDelegate` and `useSelectableCollection`.
+ *
+ * Focus is real DOM focus with a roving tab stop, and it moves over three kinds of thing: the
+ * column headers, a row as a whole, and the cells of a row. The rules that are easy to get wrong,
+ * all taken from the delegates rather than guessed:
+ *
+ * - Up from the first row lands on the **column header** above it, and down from a column header
+ *   lands on the cell under it. The header is part of the same two-dimensional walk.
+ * - Left and right **wrap** among the column headers, but not among the cells of a row: running
+ *   off either end of a row lands on the row itself.
+ * - `Home` and `End` stay inside the current row; with a modifier they jump to the whole grid's
+ *   first or last position.
+ */
+export declare const useGridKeyboard: (options: UseGridKeyboardOptions) => UseGridKeyboardReturn;