38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { useState, useCallback } from "react";
|
|
import type { FocusArea, ButtonFocus } from "../types.js";
|
|
|
|
/**
|
|
* Manages which area of the wizard UI has keyboard focus and
|
|
* which specific element within that area is highlighted.
|
|
*/
|
|
export function useWizardFocus() {
|
|
const [focusArea, setFocusArea] = useState<FocusArea>("content");
|
|
const [focusedButton, setFocusedButton] = useState<ButtonFocus>("next");
|
|
const [focusedInput, setFocusedInput] = useState(0);
|
|
|
|
/** Reset focus to the content area at the first element. */
|
|
const resetToContent = useCallback(() => {
|
|
setFocusArea("content");
|
|
setFocusedInput(0);
|
|
}, []);
|
|
|
|
/** Move focus to the button bar. */
|
|
const moveToButtons = useCallback((button: ButtonFocus = "next") => {
|
|
setFocusArea("buttons");
|
|
setFocusedButton(button);
|
|
}, []);
|
|
|
|
return {
|
|
focusArea,
|
|
setFocusArea,
|
|
focusedButton,
|
|
setFocusedButton,
|
|
focusedInput,
|
|
setFocusedInput,
|
|
resetToContent,
|
|
moveToButtons,
|
|
} as const;
|
|
}
|
|
|
|
export type WizardFocusState = ReturnType<typeof useWizardFocus>;
|