@tamagui/focus-scope 2.7.6 → 3.0.0-beta.637.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/FocusScope.cjs +346 -351
- package/dist/cjs/FocusScope.native.cjs +37 -0
- package/dist/cjs/FocusScope.native.js +21 -27
- package/dist/cjs/FocusScope.native.js.map +1 -1
- package/dist/cjs/FocusScopeController.cjs +48 -54
- package/dist/cjs/FocusScopeController.native.cjs +76 -0
- package/dist/cjs/FocusScopeController.native.js +50 -55
- package/dist/cjs/FocusScopeController.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +22 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/types.cjs +10 -11
- package/dist/cjs/types.native.cjs +19 -0
- package/dist/cjs/types.native.js +10 -10
- package/dist/cjs/types.native.js.map +1 -1
- package/dist/esm/FocusScope.mjs +331 -328
- package/dist/esm/FocusScope.mjs.map +1 -1
- package/dist/esm/FocusScope.native.js +6 -3
- package/dist/esm/FocusScope.native.js.map +1 -1
- package/dist/esm/FocusScopeController.mjs +29 -27
- package/dist/esm/FocusScopeController.mjs.map +1 -1
- package/dist/esm/FocusScopeController.native.js +32 -30
- package/dist/esm/FocusScopeController.native.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.mjs +3 -3
- package/dist/esm/index.native.js +3 -3
- package/dist/esm/types.mjs +0 -2
- package/dist/esm/types.native.js +0 -2
- package/dist/jsx/FocusScope.mjs +331 -328
- package/dist/jsx/FocusScope.mjs.map +1 -1
- package/dist/jsx/FocusScope.native.cjs +37 -0
- package/dist/jsx/FocusScope.native.js +21 -27
- package/dist/jsx/FocusScope.native.js.map +1 -1
- package/dist/jsx/FocusScopeController.mjs +29 -27
- package/dist/jsx/FocusScopeController.mjs.map +1 -1
- package/dist/jsx/FocusScopeController.native.cjs +76 -0
- package/dist/jsx/FocusScopeController.native.js +50 -55
- package/dist/jsx/FocusScopeController.native.js.map +1 -1
- package/dist/jsx/index.js +3 -3
- package/dist/jsx/index.mjs +3 -3
- package/dist/jsx/index.native.cjs +22 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/types.mjs +0 -2
- package/dist/jsx/types.native.cjs +19 -0
- package/dist/jsx/types.native.js +10 -10
- package/dist/jsx/types.native.js.map +1 -1
- package/package.json +9 -8
- package/src/FocusScope.native.tsx +2 -1
- package/src/FocusScope.tsx +62 -28
- package/src/FocusScopeController.tsx +3 -0
- package/src/types.tsx +16 -11
- package/types/FocusScope.d.ts +3 -4
- package/types/FocusScope.d.ts.map +1 -1
- package/types/FocusScope.native.d.ts +1 -2
- package/types/FocusScope.native.d.ts.map +1 -1
- package/types/FocusScopeController.d.ts +1 -1
- package/types/FocusScopeController.d.ts.map +1 -1
- package/types/types.d.ts +15 -9
- package/types/types.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/esm/types.mjs.map +0 -1
- package/dist/esm/types.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
- package/dist/jsx/types.mjs.map +0 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
+
get: () => from[key],
|
|
12
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var types_exports = {};
|
|
19
|
+
module.exports = __toCommonJS(types_exports);
|
package/dist/jsx/types.native.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
8
|
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
+
get: () => from[key],
|
|
12
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
15
16
|
};
|
|
16
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
17
|
-
value: true
|
|
18
|
-
}), mod);
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
18
|
var types_exports = {};
|
|
20
19
|
module.exports = __toCommonJS(types_exports);
|
|
20
|
+
|
|
21
21
|
//# sourceMappingURL=types.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":[],"sourcesContent":[
|
|
1
|
+
{"version":3,"file":"types.native.js","names":[],"sources":["jsx/types.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar types_exports = {};\nmodule.exports = __toCommonJS(types_exports);\n//# sourceMappingURL=types.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/focus-scope",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.637.1",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -34,15 +34,16 @@
|
|
|
34
34
|
"clean:build": "tamagui-build clean:build"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@tamagui/compose-refs": "
|
|
38
|
-
"@tamagui/constants": "
|
|
39
|
-
"@tamagui/
|
|
40
|
-
"@tamagui/
|
|
41
|
-
"@tamagui/
|
|
42
|
-
"@tamagui/use-
|
|
37
|
+
"@tamagui/compose-refs": "3.0.0-beta.637.1",
|
|
38
|
+
"@tamagui/constants": "3.0.0-beta.637.1",
|
|
39
|
+
"@tamagui/core": "3.0.0-beta.637.1",
|
|
40
|
+
"@tamagui/create-context": "3.0.0-beta.637.1",
|
|
41
|
+
"@tamagui/start-transition": "3.0.0-beta.637.1",
|
|
42
|
+
"@tamagui/use-async": "3.0.0-beta.637.1",
|
|
43
|
+
"@tamagui/use-event": "3.0.0-beta.637.1"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
|
-
"@tamagui/build": "
|
|
46
|
+
"@tamagui/build": "3.0.0-beta.637.1",
|
|
46
47
|
"react": ">=19"
|
|
47
48
|
},
|
|
48
49
|
"peerDependencies": {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { createRefComponent } from '@tamagui/compose-refs'
|
|
1
2
|
import React from 'react'
|
|
2
3
|
|
|
3
4
|
import type { FocusScopeProps } from './types'
|
|
4
5
|
|
|
5
|
-
export const FocusScope =
|
|
6
|
+
export const FocusScope = createRefComponent((props: FocusScopeProps, _ref) => {
|
|
6
7
|
return props.children as any
|
|
7
8
|
})
|
package/src/FocusScope.tsx
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
1
|
+
import { createRefComponent, useComposedRefs } from '@tamagui/compose-refs'
|
|
2
2
|
import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
|
|
3
|
+
import { createChangeEventDetails } from '@tamagui/core'
|
|
3
4
|
import { idle, useAsyncEffect } from '@tamagui/use-async'
|
|
4
5
|
import { useEvent } from '@tamagui/use-event'
|
|
5
6
|
import * as React from 'react'
|
|
6
7
|
import { useFocusScopeControllerContext } from './FocusScopeController'
|
|
7
8
|
import type { FocusScopeProps, ScopedProps } from './types'
|
|
8
9
|
|
|
9
|
-
const
|
|
10
|
-
const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'
|
|
11
|
-
const EVENT_OPTIONS = { bubbles: false, cancelable: true }
|
|
10
|
+
const FOCUS_SCOPE_STYLE: React.CSSProperties = { display: 'contents' }
|
|
12
11
|
|
|
13
12
|
type FocusableTarget = HTMLElement | { focus(): void }
|
|
14
13
|
|
|
@@ -18,7 +17,7 @@ type FocusableTarget = HTMLElement | { focus(): void }
|
|
|
18
17
|
|
|
19
18
|
type FocusScopeElement = HTMLDivElement
|
|
20
19
|
|
|
21
|
-
const FocusScope =
|
|
20
|
+
const FocusScope = createRefComponent<FocusScopeElement, FocusScopeProps>(
|
|
22
21
|
function FocusScope(
|
|
23
22
|
{ __scopeFocusScope, ...props }: ScopedProps<FocusScopeProps>,
|
|
24
23
|
forwardedRef
|
|
@@ -34,6 +33,7 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>(
|
|
|
34
33
|
enabled: context.enabled ?? props.enabled,
|
|
35
34
|
loop: context.loop ?? props.loop,
|
|
36
35
|
trapped: context.trapped ?? props.trapped,
|
|
36
|
+
noFocus: context.noFocus ?? props.noFocus,
|
|
37
37
|
onMountAutoFocus: context.onMountAutoFocus ?? props.onMountAutoFocus,
|
|
38
38
|
onUnmountAutoFocus: context.onUnmountAutoFocus ?? props.onUnmountAutoFocus,
|
|
39
39
|
forceUnmount: context.forceUnmount ?? props.forceUnmount,
|
|
@@ -41,18 +41,28 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>(
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
const childProps = useFocusScope(mergedProps, forwardedRef)
|
|
44
|
+
const { ref, style, ...scopeProps } =
|
|
45
|
+
childProps as React.HTMLAttributes<HTMLDivElement> & {
|
|
46
|
+
ref: React.Ref<HTMLDivElement>
|
|
47
|
+
}
|
|
48
|
+
const children = mergedProps.children
|
|
44
49
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return React.cloneElement(
|
|
50
|
-
React.Children.only(mergedProps.children) as any,
|
|
51
|
-
childProps
|
|
50
|
+
return (
|
|
51
|
+
<div {...scopeProps} ref={ref} style={getFocusScopeStyle(style)}>
|
|
52
|
+
{children}
|
|
53
|
+
</div>
|
|
52
54
|
)
|
|
53
55
|
}
|
|
54
56
|
)
|
|
55
57
|
|
|
58
|
+
function getFocusScopeStyle(style?: React.CSSProperties) {
|
|
59
|
+
if (!style) return FOCUS_SCOPE_STYLE
|
|
60
|
+
return {
|
|
61
|
+
...style,
|
|
62
|
+
display: 'contents',
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
56
66
|
/* -------------------------------------------------------------------------------------------------
|
|
57
67
|
* setupFocusTrap - extracted function to set up trap immediately in ref callback
|
|
58
68
|
* -----------------------------------------------------------------------------------------------*/
|
|
@@ -157,19 +167,23 @@ function setupFocusTrap(
|
|
|
157
167
|
|
|
158
168
|
export function useFocusScope(
|
|
159
169
|
props: FocusScopeProps,
|
|
160
|
-
forwardedRef
|
|
170
|
+
forwardedRef?: React.Ref<FocusScopeElement>
|
|
161
171
|
) {
|
|
162
172
|
const {
|
|
163
173
|
loop = false,
|
|
164
174
|
enabled = true,
|
|
165
|
-
trapped = false,
|
|
175
|
+
trapped: trappedProp = false,
|
|
176
|
+
noFocus = false,
|
|
166
177
|
onMountAutoFocus: onMountAutoFocusProp,
|
|
167
178
|
onUnmountAutoFocus: onUnmountAutoFocusProp,
|
|
168
179
|
forceUnmount,
|
|
169
180
|
focusOnIdle = true,
|
|
170
|
-
children,
|
|
181
|
+
children: _children,
|
|
182
|
+
asChild: _asChild,
|
|
171
183
|
...scopeProps
|
|
172
184
|
} = props
|
|
185
|
+
// noFocus is a "zero focus" mode that takes precedence over trapping
|
|
186
|
+
const trapped = noFocus ? false : trappedProp
|
|
173
187
|
const [container, setContainer] = React.useState<HTMLElement | null>(null)
|
|
174
188
|
const containerRef = React.useRef<HTMLElement | null>(null)
|
|
175
189
|
const onMountAutoFocus = useEvent(onMountAutoFocusProp)
|
|
@@ -236,11 +250,37 @@ export function useFocusScope(
|
|
|
236
250
|
}
|
|
237
251
|
}, [trapped, focusScope])
|
|
238
252
|
|
|
253
|
+
// zero focus mode: while active, nothing on the page can hold focus -
|
|
254
|
+
// not inside the scope, not outside it. any focusin is immediately
|
|
255
|
+
// blurred so document.activeElement settles on body
|
|
256
|
+
useIsomorphicLayoutEffect(() => {
|
|
257
|
+
if (!isWeb) return
|
|
258
|
+
if (!enabled || !noFocus || !container) return
|
|
259
|
+
|
|
260
|
+
const blurActiveElement = () => {
|
|
261
|
+
const active = document.activeElement as HTMLElement | null
|
|
262
|
+
if (active && active !== document.body && typeof active.blur === 'function') {
|
|
263
|
+
active.blur()
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// clear any element already holding focus on activation
|
|
268
|
+
blurActiveElement()
|
|
269
|
+
|
|
270
|
+
// capture phase so we run before any other focus handling
|
|
271
|
+
document.addEventListener('focusin', blurActiveElement, true)
|
|
272
|
+
return () => {
|
|
273
|
+
document.removeEventListener('focusin', blurActiveElement, true)
|
|
274
|
+
}
|
|
275
|
+
}, [enabled, noFocus, container])
|
|
276
|
+
|
|
239
277
|
useAsyncEffect(
|
|
240
278
|
async (signal) => {
|
|
241
279
|
if (!enabled) return
|
|
242
280
|
if (!container) return
|
|
243
281
|
if (forceUnmount) return
|
|
282
|
+
// zero focus mode skips all auto-focus behavior
|
|
283
|
+
if (noFocus) return
|
|
244
284
|
|
|
245
285
|
// only reset stopped flag when trap is actually active
|
|
246
286
|
// otherwise a prop change (trapped: true -> false) would reset it
|
|
@@ -256,11 +296,10 @@ export function useFocusScope(
|
|
|
256
296
|
!isHidden(previouslyFocusedElement, { upTo: container })
|
|
257
297
|
|
|
258
298
|
if (!hasFocusedCandidate) {
|
|
259
|
-
const
|
|
260
|
-
|
|
261
|
-
container.dispatchEvent(mountEvent)
|
|
299
|
+
const details = createChangeEventDetails<'trigger-focus', Event>('trigger-focus')
|
|
300
|
+
onMountAutoFocus?.(details)
|
|
262
301
|
|
|
263
|
-
if (!
|
|
302
|
+
if (!details.isCanceled) {
|
|
264
303
|
// wait for idle before focusing to prevent reflows during animations
|
|
265
304
|
if (focusOnIdle) {
|
|
266
305
|
await idle(
|
|
@@ -304,12 +343,9 @@ export function useFocusScope(
|
|
|
304
343
|
// signal trap to stop before cleanup runs
|
|
305
344
|
focusScope.stop()
|
|
306
345
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
|
|
311
|
-
container.dispatchEvent(unmountEvent)
|
|
312
|
-
if (!unmountEvent.defaultPrevented) {
|
|
346
|
+
const details = createChangeEventDetails<'focus-out', Event>('focus-out')
|
|
347
|
+
onUnmountAutoFocus?.(details)
|
|
348
|
+
if (!details.isCanceled) {
|
|
313
349
|
// check if focus has already moved to a valid element outside this scope
|
|
314
350
|
// (e.g. another component's autoFocus ran during the same commit)
|
|
315
351
|
// if so, respect that focus rather than stealing it back
|
|
@@ -324,9 +360,6 @@ export function useFocusScope(
|
|
|
324
360
|
focus(previouslyFocusedElement ?? document.body, { select: true })
|
|
325
361
|
}
|
|
326
362
|
}
|
|
327
|
-
// we need to remove the listener after we `dispatchEvent`
|
|
328
|
-
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)
|
|
329
|
-
|
|
330
363
|
focusScopesStack.remove(focusScope)
|
|
331
364
|
}
|
|
332
365
|
},
|
|
@@ -334,6 +367,7 @@ export function useFocusScope(
|
|
|
334
367
|
enabled,
|
|
335
368
|
container,
|
|
336
369
|
forceUnmount,
|
|
370
|
+
noFocus,
|
|
337
371
|
onMountAutoFocus,
|
|
338
372
|
onUnmountAutoFocus,
|
|
339
373
|
focusScope,
|
|
@@ -31,6 +31,7 @@ function FocusScopeController(props: ScopedProps<FocusScopeControllerProps>) {
|
|
|
31
31
|
enabled,
|
|
32
32
|
loop,
|
|
33
33
|
trapped,
|
|
34
|
+
noFocus,
|
|
34
35
|
onMountAutoFocus,
|
|
35
36
|
onUnmountAutoFocus,
|
|
36
37
|
forceUnmount,
|
|
@@ -45,6 +46,7 @@ function FocusScopeController(props: ScopedProps<FocusScopeControllerProps>) {
|
|
|
45
46
|
enabled,
|
|
46
47
|
loop,
|
|
47
48
|
trapped,
|
|
49
|
+
noFocus,
|
|
48
50
|
onMountAutoFocus: stableOnMountAutoFocus,
|
|
49
51
|
onUnmountAutoFocus: stableOnUnmountAutoFocus,
|
|
50
52
|
forceUnmount,
|
|
@@ -54,6 +56,7 @@ function FocusScopeController(props: ScopedProps<FocusScopeControllerProps>) {
|
|
|
54
56
|
enabled,
|
|
55
57
|
loop,
|
|
56
58
|
trapped,
|
|
59
|
+
noFocus,
|
|
57
60
|
stableOnMountAutoFocus,
|
|
58
61
|
stableOnUnmountAutoFocus,
|
|
59
62
|
forceUnmount,
|
package/src/types.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Scope } from '@tamagui/create-context'
|
|
2
|
+
import type { TamaguiChangeEventDetails } from '@tamagui/core'
|
|
2
3
|
import type React from 'react'
|
|
3
4
|
|
|
4
5
|
export type ScopedProps<P> = P & { __scopeFocusScope?: Scope }
|
|
@@ -23,17 +24,27 @@ export interface FocusScopeProps {
|
|
|
23
24
|
*/
|
|
24
25
|
trapped?: boolean
|
|
25
26
|
|
|
27
|
+
/**
|
|
28
|
+
* When `true`, enables a "zero focus" mode: while active, focus is
|
|
29
|
+
* allowed neither inside nor outside the scope. Any element that
|
|
30
|
+
* receives focus is immediately blurred so `document.activeElement`
|
|
31
|
+
* settles on `document.body`. Takes precedence over `trapped` and
|
|
32
|
+
* auto-focus behavior. Web only.
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
noFocus?: boolean
|
|
36
|
+
|
|
26
37
|
/**
|
|
27
38
|
* Event handler called when auto-focusing on mount.
|
|
28
|
-
* Can be
|
|
39
|
+
* Can be canceled.
|
|
29
40
|
*/
|
|
30
|
-
onMountAutoFocus?: (
|
|
41
|
+
onMountAutoFocus?: (details: TamaguiChangeEventDetails<'trigger-focus', Event>) => void
|
|
31
42
|
|
|
32
43
|
/**
|
|
33
44
|
* Event handler called when auto-focusing on unmount.
|
|
34
|
-
* Can be
|
|
45
|
+
* Can be canceled.
|
|
35
46
|
*/
|
|
36
|
-
onUnmountAutoFocus?: (
|
|
47
|
+
onUnmountAutoFocus?: (details: TamaguiChangeEventDetails<'focus-out', Event>) => void
|
|
37
48
|
|
|
38
49
|
/**
|
|
39
50
|
* If unmount is animated, you want to force re-focus at start of animation not after
|
|
@@ -47,12 +58,6 @@ export interface FocusScopeProps {
|
|
|
47
58
|
*/
|
|
48
59
|
focusOnIdle?: boolean | number | { min?: number; max?: number }
|
|
49
60
|
|
|
50
|
-
children?:
|
|
51
|
-
| React.ReactNode
|
|
52
|
-
| ((props: {
|
|
53
|
-
onKeyDown: (event: React.KeyboardEvent) => void
|
|
54
|
-
tabIndex?: number
|
|
55
|
-
ref: React.ForwardedRef<any>
|
|
56
|
-
}) => React.ReactNode)
|
|
61
|
+
children?: React.ReactNode
|
|
57
62
|
asChild?: boolean
|
|
58
63
|
}
|
package/types/FocusScope.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { FocusScopeProps } from './types';
|
|
3
3
|
type FocusScopeElement = HTMLDivElement;
|
|
4
|
-
declare const FocusScope:
|
|
5
|
-
export declare function useFocusScope(props: FocusScopeProps, forwardedRef
|
|
6
|
-
ref: (node:
|
|
4
|
+
declare const FocusScope: import("@tamagui/compose-refs").RefComponent<HTMLDivElement, FocusScopeProps>;
|
|
5
|
+
export declare function useFocusScope(props: FocusScopeProps, forwardedRef?: React.Ref<FocusScopeElement>): {
|
|
6
|
+
ref: (node: HTMLElement) => void;
|
|
7
7
|
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
8
|
-
asChild?: boolean;
|
|
9
8
|
};
|
|
10
9
|
export { FocusScope };
|
|
11
10
|
export type { FocusScopeProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusScope.d.ts","sourceRoot":"","sources":["../src/FocusScope.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FocusScope.d.ts","sourceRoot":"","sources":["../src/FocusScope.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,SAAS,CAAA;AAU3D,KAAK,iBAAiB,GAAG,cAAc,CAAA;AAEvC,QAAA,MAAM,UAAU,+EAoCf,CAAA;AAgHD,wBAAgB,aAAa,CAC3B,KAAK,EAAE,eAAe,EACtB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;;uBA2QjC,KAAK,CAAC,aAAa;EAY9B;AA+ID,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { FocusScopeProps } from './types';
|
|
3
|
-
export declare const FocusScope:
|
|
2
|
+
export declare const FocusScope: import("@tamagui/compose-refs").RefComponent<unknown, FocusScopeProps>;
|
|
4
3
|
//# sourceMappingURL=FocusScope.native.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusScope.native.d.ts","sourceRoot":"","sources":["../src/FocusScope.native.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FocusScope.native.d.ts","sourceRoot":"","sources":["../src/FocusScope.native.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,UAAU,wEAErB,CAAA"}
|
|
@@ -13,7 +13,7 @@ declare const FocusScopeControllerProvider: (props: FocusScopeControllerContextV
|
|
|
13
13
|
export interface FocusScopeControllerProps extends FocusScopeControllerContextValue {
|
|
14
14
|
children?: React.ReactNode;
|
|
15
15
|
}
|
|
16
|
-
declare function FocusScopeController(props: ScopedProps<FocusScopeControllerProps>):
|
|
16
|
+
declare function FocusScopeController(props: ScopedProps<FocusScopeControllerProps>): React.JSX.Element;
|
|
17
17
|
declare const FocusScopeControllerComponent: typeof FocusScopeController;
|
|
18
18
|
export { createFocusScopeControllerScope, FocusScopeControllerComponent as FocusScopeController, FocusScopeControllerProvider, useFocusScopeControllerContext, };
|
|
19
19
|
//# sourceMappingURL=FocusScopeController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusScopeController.d.ts","sourceRoot":"","sources":["../src/FocusScopeController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,QAAA,MAA0C,+BAA+B,+CACxB,CAAA;AAEjD,KAAK,gCAAgC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAA;AAEzE,QAAA,MAAO,4BAA4B;;;+CAAE,8BAA8B;;;kDAGhE,CAAA;AAMH,MAAM,WAAW,yBAA0B,SAAQ,gCAAgC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC,yBAAyB,CAAC,
|
|
1
|
+
{"version":3,"file":"FocusScopeController.d.ts","sourceRoot":"","sources":["../src/FocusScopeController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,QAAA,MAA0C,+BAA+B,+CACxB,CAAA;AAEjD,KAAK,gCAAgC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAA;AAEzE,QAAA,MAAO,4BAA4B;;;+CAAE,8BAA8B;;;kDAGhE,CAAA;AAMH,MAAM,WAAW,yBAA0B,SAAQ,gCAAgC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC,yBAAyB,CAAC,qBA6C1E;AAED,QAAA,MAAM,6BAA6B,6BAAuB,CAAA;AAE1D,OAAO,EACL,+BAA+B,EAC/B,6BAA6B,IAAI,oBAAoB,EACrD,4BAA4B,EAC5B,8BAA8B,GAC/B,CAAA"}
|
package/types/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Scope } from '@tamagui/create-context';
|
|
2
|
+
import type { TamaguiChangeEventDetails } from '@tamagui/core';
|
|
2
3
|
import type React from 'react';
|
|
3
4
|
export type ScopedProps<P> = P & {
|
|
4
5
|
__scopeFocusScope?: Scope;
|
|
@@ -20,16 +21,25 @@ export interface FocusScopeProps {
|
|
|
20
21
|
* @default false
|
|
21
22
|
*/
|
|
22
23
|
trapped?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* When `true`, enables a "zero focus" mode: while active, focus is
|
|
26
|
+
* allowed neither inside nor outside the scope. Any element that
|
|
27
|
+
* receives focus is immediately blurred so `document.activeElement`
|
|
28
|
+
* settles on `document.body`. Takes precedence over `trapped` and
|
|
29
|
+
* auto-focus behavior. Web only.
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
noFocus?: boolean;
|
|
23
33
|
/**
|
|
24
34
|
* Event handler called when auto-focusing on mount.
|
|
25
|
-
* Can be
|
|
35
|
+
* Can be canceled.
|
|
26
36
|
*/
|
|
27
|
-
onMountAutoFocus?: (
|
|
37
|
+
onMountAutoFocus?: (details: TamaguiChangeEventDetails<'trigger-focus', Event>) => void;
|
|
28
38
|
/**
|
|
29
39
|
* Event handler called when auto-focusing on unmount.
|
|
30
|
-
* Can be
|
|
40
|
+
* Can be canceled.
|
|
31
41
|
*/
|
|
32
|
-
onUnmountAutoFocus?: (
|
|
42
|
+
onUnmountAutoFocus?: (details: TamaguiChangeEventDetails<'focus-out', Event>) => void;
|
|
33
43
|
/**
|
|
34
44
|
* If unmount is animated, you want to force re-focus at start of animation not after
|
|
35
45
|
*/
|
|
@@ -43,11 +53,7 @@ export interface FocusScopeProps {
|
|
|
43
53
|
min?: number;
|
|
44
54
|
max?: number;
|
|
45
55
|
};
|
|
46
|
-
children?: React.ReactNode
|
|
47
|
-
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
48
|
-
tabIndex?: number;
|
|
49
|
-
ref: React.ForwardedRef<any>;
|
|
50
|
-
}) => React.ReactNode);
|
|
56
|
+
children?: React.ReactNode;
|
|
51
57
|
asChild?: boolean;
|
|
52
58
|
}
|
|
53
59
|
//# sourceMappingURL=types.d.ts.map
|
package/types/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAE9D,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAE9D,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,IAAI,CAAA;IAEvF;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,IAAI,CAAA;IAErF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAE/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}
|
package/dist/esm/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}
|
package/dist/esm/types.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
|
package/dist/jsx/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}
|
package/dist/jsx/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}
|
package/dist/jsx/types.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
|