index.d.ts 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { CheckOptions as TabbableCheckOptions } from 'tabbable';
  2. declare module 'focus-trap' {
  3. export type FocusTargetValue = HTMLElement | SVGElement | string;
  4. export type FocusTargetValueOrFalse = FocusTargetValue | false;
  5. /**
  6. * A DOM node, a selector string (which will be passed to
  7. * `document.querySelector()` to find the DOM node), or a function that
  8. * returns a DOM node.
  9. */
  10. export type FocusTarget = FocusTargetValue | (() => FocusTargetValue);
  11. /**
  12. * A DOM node, a selector string (which will be passed to
  13. * `document.querySelector()` to find the DOM node), `false` to explicitly indicate
  14. * an opt-out, or a function that returns a DOM node or `false`.
  15. */
  16. export type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse);
  17. type MouseEventToBoolean = (event: MouseEvent | TouchEvent) => boolean;
  18. type KeyboardEventToBoolean = (event: KeyboardEvent) => boolean;
  19. /** tabbable options supported by focus-trap. */
  20. export interface FocusTrapTabbableOptions extends TabbableCheckOptions {
  21. }
  22. export interface Options {
  23. /**
  24. * A function that will be called **before** sending focus to the
  25. * target element upon activation.
  26. */
  27. onActivate?: () => void;
  28. /**
  29. * A function that will be called **after** focus has been sent to the
  30. * target element upon activation.
  31. */
  32. onPostActivate?: () => void
  33. /**
  34. * A function for determining if it is safe to send focus to the focus trap
  35. * or not.
  36. *
  37. * It should return a promise that only resolves once all the listed `containers`
  38. * are able to receive focus.
  39. *
  40. * The purpose of this is to prevent early focus-trap activation on animated
  41. * dialogs that fade in and out. When a dialog fades in, there is a brief delay
  42. * between the activation of the trap and the trap element being focusable.
  43. */
  44. checkCanFocusTrap?: (containers: Array<HTMLElement | SVGElement>) => Promise<void>
  45. /**
  46. * A function that will be called **before** sending focus to the
  47. * trigger element upon deactivation.
  48. */
  49. onDeactivate?: () => void;
  50. /**
  51. * A function that will be called after the trap is deactivated, after `onDeactivate`.
  52. * If `returnFocus` was set, it will be called **after** focus has been sent to the trigger
  53. * element upon deactivation; otherwise, it will be called after deactivation completes.
  54. */
  55. onPostDeactivate?: () => void
  56. /**
  57. * A function for determining if it is safe to send focus back to the `trigger` element.
  58. *
  59. * It should return a promise that only resolves once `trigger` is focusable.
  60. *
  61. * The purpose of this is to prevent the focus being sent to an animated trigger element too early.
  62. * If a trigger element fades in upon trap deactivation, there is a brief delay between the deactivation
  63. * of the trap and when the trigger element is focusable.
  64. *
  65. * `trigger` will be either the node that had focus prior to the trap being activated,
  66. * or the result of the `setReturnFocus` option, if configured.
  67. *
  68. * This handler is **not** called if the `returnFocusOnDeactivate` configuration option
  69. * (or the `returnFocus` deactivation option) is falsy.
  70. */
  71. checkCanReturnFocus?: (trigger: HTMLElement | SVGElement) => Promise<void>
  72. /**
  73. * By default, when a focus trap is activated the first element in the
  74. * focus trap's tab order will receive focus. With this option you can
  75. * specify a different element to receive that initial focus, or use `false`
  76. * for no initially focused element at all.
  77. *
  78. * NOTE: Setting this option to `false` (or a function that returns `false`)
  79. * will prevent the `fallbackFocus` option from being used.
  80. */
  81. initialFocus?: FocusTargetOrFalse;
  82. /**
  83. * By default, an error will be thrown if the focus trap contains no
  84. * elements in its tab order. With this option you can specify a
  85. * fallback element to programmatically receive focus if no other
  86. * tabbable elements are found. For example, you may want a popover's
  87. * `<div>` to receive focus if the popover's content includes no
  88. * tabbable elements. *Make sure the fallback element has a negative
  89. * `tabindex` so it can be programmatically focused.
  90. *
  91. * NOTE: If `initialFocus` is `false` (or a function that returns `false`),
  92. * this function will not be called when the trap is activated, and no element
  93. * will be initially focused. This function may still be called while the trap
  94. * is active if things change such that there are no longer any tabbable nodes
  95. * in the trap.
  96. */
  97. fallbackFocus?: FocusTarget;
  98. /**
  99. * Default: `true`. If `false`, when the trap is deactivated,
  100. * focus will *not* return to the element that had focus before activation.
  101. */
  102. returnFocusOnDeactivate?: boolean;
  103. /**
  104. * By default, focus trap on deactivation will return to the element
  105. * that was focused before activation.
  106. */
  107. setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse);
  108. /**
  109. * Default: `true`. If `false` or returns `false`, the `Escape` key will not trigger
  110. * deactivation of the focus trap. This can be useful if you want
  111. * to force the user to make a decision instead of allowing an easy
  112. * way out. Note that if a function is given, it's only called if the ESC key
  113. * was pressed.
  114. */
  115. escapeDeactivates?: boolean | KeyboardEventToBoolean;
  116. /**
  117. * If `true` or returns `true`, a click outside the focus trap will
  118. * deactivate the focus trap and allow the click event to do its thing (i.e.
  119. * to pass-through to the element that was clicked). This option **takes
  120. * precedence** over `allowOutsideClick` when it's set to `true`, causing
  121. * that option to be ignored. Default: `false`.
  122. */
  123. clickOutsideDeactivates?: boolean | MouseEventToBoolean;
  124. /**
  125. * If set and is or returns `true`, a click outside the focus trap will not
  126. * be prevented, even when `clickOutsideDeactivates` is `false`. When
  127. * `clickOutsideDeactivates` is `true`, this option is **ignored** (i.e.
  128. * if it's a function, it will not be called). Use this option to control
  129. * if (and even which) clicks are allowed outside the trap in conjunction
  130. * with `clickOutsideDeactivates: false`. Default: `false`.
  131. */
  132. allowOutsideClick?: boolean | MouseEventToBoolean;
  133. /**
  134. * By default, focus() will scroll to the element if not in viewport.
  135. * It can produce unintended effects like scrolling back to the top of a modal.
  136. * If set to `true`, no scroll will happen.
  137. */
  138. preventScroll?: boolean;
  139. /**
  140. * Default: `true`. Delays the autofocus when the focus trap is activated.
  141. * This prevents elements within the focusable element from capturing
  142. * the event that triggered the focus trap activation.
  143. */
  144. delayInitialFocus?: boolean;
  145. /**
  146. * Default: `window.document`. Document where the focus trap will be active.
  147. * This allows to use FocusTrap in an iFrame context.
  148. */
  149. document?: Document;
  150. /**
  151. * Specific tabbable options configurable on focus-trap.
  152. */
  153. tabbableOptions?: FocusTrapTabbableOptions;
  154. }
  155. type ActivateOptions = Pick<Options, 'onActivate' | 'onPostActivate' | 'checkCanFocusTrap'>;
  156. interface DeactivateOptions extends Pick<Options, 'onDeactivate' | 'onPostDeactivate' | 'checkCanReturnFocus'> {
  157. returnFocus?: boolean;
  158. }
  159. export interface FocusTrap {
  160. active: boolean,
  161. paused: boolean,
  162. activate(activateOptions?: ActivateOptions): FocusTrap;
  163. deactivate(deactivateOptions?: DeactivateOptions): FocusTrap;
  164. pause(): FocusTrap;
  165. unpause(): FocusTrap;
  166. updateContainerElements(containerElements: HTMLElement | SVGElement | string | Array<HTMLElement | SVGElement | string>): FocusTrap;
  167. }
  168. /**
  169. * Returns a new focus trap on `element`.
  170. *
  171. * @param element
  172. * The element to be the focus trap, or a selector that will be used to
  173. * find the element.
  174. */
  175. export function createFocusTrap(
  176. element: HTMLElement | SVGElement | string | Array<HTMLElement | SVGElement | string>,
  177. userOptions?: Options
  178. ): FocusTrap;
  179. }