You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

useFocusManager.d.ts 1.5 KiB

3 vuotta sitten
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. /// <reference types="react" />
  2. export interface FocusManagerOptions {
  3. /**
  4. * A callback fired when focus shifts. returning `false` will prevent
  5. * handling the focus event
  6. */
  7. willHandle?(focused: boolean, event: React.FocusEvent): boolean | void;
  8. /**
  9. * A callback fired after focus is handled but before onChange is called
  10. */
  11. didHandle?(focused: boolean, event: React.FocusEvent): void;
  12. /**
  13. * A callback fired after focus has changed
  14. */
  15. onChange?(focused: boolean, event: React.FocusEvent): void;
  16. /**
  17. * When true, the event handlers will not report focus changes
  18. */
  19. isDisabled: () => boolean;
  20. }
  21. export interface FocusController {
  22. onBlur: (event: any) => void;
  23. onFocus: (event: any) => void;
  24. }
  25. /**
  26. * useFocusManager provides a way to track and manage focus as it moves around
  27. * a container element. An `onChange` is fired when focus enters or leaves the
  28. * element, but not when it moves around inside the element, similar to
  29. * `pointerenter` and `pointerleave` DOM events.
  30. *
  31. * ```tsx
  32. * const [focused, setFocusState] = useState(false)
  33. *
  34. * const { onBlur, onFocus } = useFocusManager({
  35. * onChange: nextFocused => setFocusState(nextFocused)
  36. * })
  37. *
  38. * return (
  39. * <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
  40. * {String(focused)}
  41. * <input />
  42. * <input />
  43. *
  44. * <button>A button</button>
  45. * </div>
  46. * ```
  47. *
  48. */
  49. export default function useFocusManager(opts: FocusManagerOptions): FocusController;