1 | import * as React from 'react';
|
2 | import {Ref} from "react";
|
3 |
|
4 | export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps = Record<string, any>> {
|
5 | disabled?: boolean;
|
6 |
|
7 | |
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
|
16 |
|
17 | /**
|
18 | * used to control behavior or "returning focus back to the lock"
|
19 | *
|
20 | * @deprecated Can lead to a wrong user experience. Use this option only if you known what you are doing
|
21 | * @see {@link https://github.com/theKashey/react-focus-lock/issues/162}
|
22 | * @example
|
23 | * prevent scroll example
|
24 | * ```tsx
|
25 | * <FocusLock focusOptions={{preventScroll: true}} />
|
26 | * ```
|
27 | */
|
28 | focusOptions?: FocusOptions;
|
29 |
|
30 | /**
|
31 | * @deprecated Use persistentFocus=false instead
|
32 | * enables(or disables) text selection. This also allows not to have ANY focus.
|
33 | */
|
34 | allowTextSelection?: boolean;
|
35 |
|
36 | /**
|
37 | * enables of disables "sticky" behavior, when any focusable element shall be focused.
|
38 | * This disallow any text selection on the page.
|
39 | * @default false
|
40 | */
|
41 | persistentFocus?: boolean;
|
42 |
|
43 | /**
|
44 | * enables aggressive focus capturing within iframes
|
45 | * - once disabled allows focus to move outside of iframe, if enabled inside iframe
|
46 | * - once enabled keep focus in the lock, no matter where lock is active (default)
|
47 | * @default true
|
48 | */
|
49 | crossFrame?: boolean;
|
50 |
|
51 | /**
|
52 | * enables or disables autoFocusing feature.
|
53 | * If enabled - will move focus inside Lock, selecting the first or autoFocusable element
|
54 | * If disable - will blur any focus on Lock activation.
|
55 | * @default true
|
56 | */
|
57 | autoFocus?: boolean;
|
58 |
|
59 | /**
|
60 | * disables hidden inputs before and after the lock.
|
61 | */
|
62 | noFocusGuards?: boolean | "tail";
|
63 |
|
64 | /**
|
65 | * Controls support a focus lock behavior when any elements tabIndex greater than 0.
|
66 | * @default false
|
67 | * @see - https://github.com/theKashey/react-focus-lock/issues/32
|
68 | */
|
69 | hasPositiveIndices?: boolean;
|
70 |
|
71 | /**
|
72 | * named focus group for focus scattering aka combined lock targets
|
73 | */
|
74 | group?: string;
|
75 |
|
76 | className?: string;
|
77 |
|
78 | /**
|
79 | * life-cycle hook, called on lock activation
|
80 | * @param node the observed node
|
81 | */
|
82 | onActivation?(node: HTMLElement): void;
|
83 |
|
84 | /**
|
85 | * life-cycle hook, called on deactivation
|
86 | * @param node the observed node
|
87 | */
|
88 | onDeactivation?(node: HTMLElement): void;
|
89 |
|
90 | /**
|
91 | * Component to use, defaults to 'div'
|
92 | */
|
93 | as?: string | React.ElementType<LockProps & { children: ChildrenType }>,
|
94 | lockProps?: LockProps,
|
95 |
|
96 | ref?: Ref<HTMLElement>;
|
97 |
|
98 | /**
|
99 | * Controls focus lock working areas. Lock will silently ignore all the events from `not allowed` areas
|
100 | * @param activeElement
|
101 | * @returns {Boolean} true if focus lock should handle activeElement, false if not
|
102 | */
|
103 | whiteList?: (activeElement: HTMLElement) => boolean;
|
104 |
|
105 | |
106 |
|
107 |
|
108 | shards?: Array<React.RefObject<any> | HTMLElement>;
|
109 |
|
110 | children?: ChildrenType;
|
111 | }
|
112 |
|
113 | export interface AutoFocusProps {
|
114 | children: React.ReactNode;
|
115 | disabled?: boolean;
|
116 | className?: string;
|
117 | }
|
118 |
|
119 | export interface FreeFocusProps {
|
120 | children: React.ReactNode;
|
121 | className?: string;
|
122 | }
|
123 |
|
124 | export interface InFocusGuardProps {
|
125 | children?: React.ReactNode;
|
126 | }
|