Dashboard sipadu mbip
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.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. /**
  22. * useFocusManager provides a way to track and manage focus as it moves around
  23. * a container element. An `onChange` is fired when focus enters or leaves the
  24. * element, but not when it moves around inside the element, similar to
  25. * `pointerenter` and `pointerleave` DOM events.
  26. *
  27. * ```ts
  28. * const [focused, setFocusState] = useState(false)
  29. *
  30. * const { onBlur, onFocus } = useFocusManager({
  31. * onChange: nextFocused => setFocusState(nextFocused)
  32. * })
  33. *
  34. * return (
  35. * <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
  36. * {String(focused)}
  37. * <input />
  38. * <input />
  39. *
  40. * <button>A button</button>
  41. * </div>
  42. * ```
  43. *
  44. * @param opts Options
  45. * @returns FocusController a set of paired focus and blur event handlers
  46. */
  47. export default function useFocusManager(opts: FocusManagerOptions): {
  48. onBlur: (event: any) => void;
  49. onFocus: (event: any) => void;
  50. };