@tamagui/sheet 2.0.0 → 2.1.0-1780288049558
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/.turbo/turbo-build.log +1 -1
- package/dist/cjs/SheetImplementationCustom.cjs +46 -22
- package/dist/cjs/SheetImplementationCustom.native.js +58 -27
- package/dist/cjs/SheetImplementationCustom.native.js.map +1 -1
- package/dist/cjs/SheetScrollView.cjs +15 -4
- package/dist/cjs/SheetScrollView.native.js +15 -4
- package/dist/cjs/SheetScrollView.native.js.map +1 -1
- package/dist/cjs/createSheet.cjs +5 -2
- package/dist/cjs/createSheet.native.js +5 -2
- package/dist/cjs/createSheet.native.js.map +1 -1
- package/dist/cjs/nativeSheet.cjs +2 -0
- package/dist/cjs/nativeSheet.native.js +2 -0
- package/dist/cjs/nativeSheet.native.js.map +1 -1
- package/dist/cjs/useKeyboardControllerSheet.cjs +65 -6
- package/dist/cjs/useSheetProviderProps.native.js.map +1 -1
- package/dist/cjs/useSheetScrollViewGestures.cjs +6 -1
- package/dist/cjs/webViewport.cjs +58 -0
- package/dist/cjs/webViewport.native.js +63 -0
- package/dist/cjs/webViewport.native.js.map +1 -0
- package/dist/esm/SheetImplementationCustom.mjs +52 -29
- package/dist/esm/SheetImplementationCustom.mjs.map +1 -1
- package/dist/esm/SheetImplementationCustom.native.js +71 -45
- package/dist/esm/SheetImplementationCustom.native.js.map +1 -1
- package/dist/esm/SheetScrollView.mjs +16 -5
- package/dist/esm/SheetScrollView.mjs.map +1 -1
- package/dist/esm/SheetScrollView.native.js +16 -5
- package/dist/esm/SheetScrollView.native.js.map +1 -1
- package/dist/esm/createSheet.mjs +7 -5
- package/dist/esm/createSheet.mjs.map +1 -1
- package/dist/esm/createSheet.native.js +17 -14
- package/dist/esm/createSheet.native.js.map +1 -1
- package/dist/esm/nativeSheet.mjs +2 -0
- package/dist/esm/nativeSheet.mjs.map +1 -1
- package/dist/esm/nativeSheet.native.js +2 -0
- package/dist/esm/nativeSheet.native.js.map +1 -1
- package/dist/esm/useKeyboardControllerSheet.mjs +66 -7
- package/dist/esm/useKeyboardControllerSheet.mjs.map +1 -1
- package/dist/esm/useSheetProviderProps.mjs.map +1 -1
- package/dist/esm/useSheetProviderProps.native.js.map +1 -1
- package/dist/esm/useSheetScrollViewGestures.mjs +6 -1
- package/dist/esm/useSheetScrollViewGestures.mjs.map +1 -1
- package/dist/esm/webViewport.mjs +29 -0
- package/dist/esm/webViewport.mjs.map +1 -0
- package/dist/esm/webViewport.native.js +31 -0
- package/dist/esm/webViewport.native.js.map +1 -0
- package/dist/jsx/SheetImplementationCustom.mjs +52 -29
- package/dist/jsx/SheetImplementationCustom.mjs.map +1 -1
- package/dist/jsx/SheetImplementationCustom.native.js +58 -27
- package/dist/jsx/SheetImplementationCustom.native.js.map +1 -1
- package/dist/jsx/SheetScrollView.mjs +16 -5
- package/dist/jsx/SheetScrollView.mjs.map +1 -1
- package/dist/jsx/SheetScrollView.native.js +15 -4
- package/dist/jsx/SheetScrollView.native.js.map +1 -1
- package/dist/jsx/createSheet.mjs +7 -5
- package/dist/jsx/createSheet.mjs.map +1 -1
- package/dist/jsx/createSheet.native.js +5 -2
- package/dist/jsx/createSheet.native.js.map +1 -1
- package/dist/jsx/nativeSheet.mjs +2 -0
- package/dist/jsx/nativeSheet.mjs.map +1 -1
- package/dist/jsx/nativeSheet.native.js +2 -0
- package/dist/jsx/nativeSheet.native.js.map +1 -1
- package/dist/jsx/useKeyboardControllerSheet.mjs +66 -7
- package/dist/jsx/useKeyboardControllerSheet.mjs.map +1 -1
- package/dist/jsx/useSheetProviderProps.mjs.map +1 -1
- package/dist/jsx/useSheetProviderProps.native.js.map +1 -1
- package/dist/jsx/useSheetScrollViewGestures.mjs +6 -1
- package/dist/jsx/useSheetScrollViewGestures.mjs.map +1 -1
- package/dist/jsx/webViewport.mjs +29 -0
- package/dist/jsx/webViewport.mjs.map +1 -0
- package/dist/jsx/webViewport.native.js +63 -0
- package/dist/jsx/webViewport.native.js.map +1 -0
- package/package.json +21 -23
- package/src/SheetImplementationCustom.tsx +207 -53
- package/src/SheetScrollView.tsx +36 -9
- package/src/createSheet.tsx +18 -6
- package/src/nativeSheet.tsx +2 -0
- package/src/types.tsx +11 -1
- package/src/useKeyboardControllerSheet.ts +123 -10
- package/src/useSheetProviderProps.tsx +10 -0
- package/src/useSheetScrollViewGestures.ts +23 -2
- package/src/webViewport.ts +81 -0
- package/types/SheetContext.d.ts +2 -0
- package/types/SheetContext.d.ts.map +1 -1
- package/types/SheetImplementationCustom.d.ts.map +1 -1
- package/types/SheetScrollView.d.ts.map +1 -1
- package/types/createSheet.d.ts +12 -12
- package/types/createSheet.d.ts.map +1 -1
- package/types/nativeSheet.d.ts.map +1 -1
- package/types/types.d.ts +4 -1
- package/types/types.d.ts.map +1 -1
- package/types/useKeyboardControllerSheet.d.ts +14 -3
- package/types/useKeyboardControllerSheet.d.ts.map +1 -1
- package/types/useSheetProviderProps.d.ts +2 -0
- package/types/useSheetProviderProps.d.ts.map +1 -1
- package/types/useSheetScrollViewGestures.d.ts.map +1 -1
- package/types/webViewport.d.ts +31 -0
- package/types/webViewport.d.ts.map +1 -0
package/src/types.tsx
CHANGED
|
@@ -75,7 +75,8 @@ export type SheetProps = ScopedProps<
|
|
|
75
75
|
zIndex?: number
|
|
76
76
|
portalProps?: PortalProps
|
|
77
77
|
/**
|
|
78
|
-
*
|
|
78
|
+
* Makes the sheet move up when the mobile keyboard opens so the focused input remains visible.
|
|
79
|
+
* Works on native (via keyboard events) and on mobile web (via the VisualViewport API).
|
|
79
80
|
*/
|
|
80
81
|
moveOnKeyboardChange?: boolean
|
|
81
82
|
containerComponent?: React.ComponentType<any>
|
|
@@ -131,6 +132,15 @@ export type ScrollBridge = {
|
|
|
131
132
|
isAtTop?: boolean
|
|
132
133
|
// snap sheet to a specific position (for handoff UP)
|
|
133
134
|
snapToPosition?: (positionIndex: number) => void
|
|
135
|
+
// re-baseline the pan drag origin to the current animated position. the web
|
|
136
|
+
// scroll-view hook calls this on each transition into pan ownership so a
|
|
137
|
+
// scroll→pan handoff resumes from where the sheet is, not a stale origin.
|
|
138
|
+
startPanDrag?: () => void
|
|
139
|
+
// web only: true while a touch is active on the ScrollView node. The web
|
|
140
|
+
// scroll-view gesture hook owns drag detection for those touches (it calls
|
|
141
|
+
// drag/release on this bridge), so the PanResponder must NOT also grant for
|
|
142
|
+
// them — otherwise two systems drive the animated position and it jitters.
|
|
143
|
+
scrollNodeTouched?: boolean
|
|
134
144
|
}
|
|
135
145
|
|
|
136
146
|
// keyboard controller sheet types
|
|
@@ -1,26 +1,139 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Web
|
|
3
|
-
*
|
|
2
|
+
* Web implementation of the keyboard controller sheet hook.
|
|
3
|
+
*
|
|
4
|
+
* Mobile browsers don't expose a keyboard API, but they do resize the
|
|
5
|
+
* VisualViewport when the soft keyboard opens. We derive the keyboard height as
|
|
6
|
+
* `getStableLayoutViewportHeight() - visualViewport.height` (see webViewport —
|
|
7
|
+
* the stable baseline is document.documentElement.clientHeight, NOT innerHeight,
|
|
8
|
+
* which itself shrinks with the keyboard on real iOS Safari) and feed it into the
|
|
9
|
+
* keyboardOccludedHeight scroll padding in SheetImplementationCustom.
|
|
10
|
+
*
|
|
11
|
+
* Without this, a bottom sheet on mobile web stays pinned behind the keyboard:
|
|
12
|
+
* react-native-web's Dimensions tracks the (shrinking) VisualViewport, so any
|
|
13
|
+
* content sized off window dimensions collapses while the sheet's bottom stays
|
|
14
|
+
* occluded. See SheetImplementationCustom's activePositions / keyboardOccludedHeight.
|
|
4
15
|
*/
|
|
5
16
|
|
|
6
|
-
import { useRef } from 'react'
|
|
17
|
+
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
18
|
+
import { isWeb } from '@tamagui/constants'
|
|
7
19
|
import type {
|
|
8
20
|
KeyboardControllerSheetOptions,
|
|
9
21
|
KeyboardControllerSheetResult,
|
|
10
22
|
} from './types'
|
|
11
|
-
|
|
12
|
-
|
|
23
|
+
import {
|
|
24
|
+
getWebKeyboardHeight,
|
|
25
|
+
isEditableElement,
|
|
26
|
+
MIN_KEYBOARD_HEIGHT,
|
|
27
|
+
} from './webViewport'
|
|
13
28
|
|
|
14
29
|
export function useKeyboardControllerSheet(
|
|
15
|
-
|
|
30
|
+
options: KeyboardControllerSheetOptions
|
|
16
31
|
): KeyboardControllerSheetResult {
|
|
32
|
+
const { enabled } = options
|
|
33
|
+
|
|
34
|
+
// initialize from the CURRENT viewport, not blindly from 0/false. when the
|
|
35
|
+
// sheet opens with the soft keyboard already up (e.g. it was raised by a field
|
|
36
|
+
// on the page behind, or by an autofocus whose keyboard wins the race against
|
|
37
|
+
// the first layout), a false initial value makes the sheet's very first render
|
|
38
|
+
// believe the keyboard is down — it captures a keyboard-free baseline from a
|
|
39
|
+
// keyboard-shrunk layout and the anchor/seed machinery has to recover. reading
|
|
40
|
+
// the viewport synchronously here removes that first-render race: the sheet
|
|
41
|
+
// knows the keyboard is up on render 1 and takes the seed path deterministically.
|
|
42
|
+
const [keyboardHeight, setKeyboardHeight] = useState(() =>
|
|
43
|
+
isWeb && enabled && typeof window !== 'undefined' && window.visualViewport
|
|
44
|
+
? (() => {
|
|
45
|
+
const h = getWebKeyboardHeight()
|
|
46
|
+
return h >= MIN_KEYBOARD_HEIGHT && isEditableElement(document.activeElement)
|
|
47
|
+
? h
|
|
48
|
+
: 0
|
|
49
|
+
})()
|
|
50
|
+
: 0
|
|
51
|
+
)
|
|
52
|
+
const [isKeyboardVisible, setIsKeyboardVisible] = useState(() => keyboardHeight > 0)
|
|
53
|
+
|
|
54
|
+
// action-sheet pattern: pause keyboard hide events during drag so the sheet
|
|
55
|
+
// position doesn't revert mid-gesture when a TextInput blurs.
|
|
17
56
|
const pauseKeyboardHandler = useRef(false)
|
|
57
|
+
const pendingHide = useRef(false)
|
|
58
|
+
// live mirror of isKeyboardVisible so the listener can read it without
|
|
59
|
+
// re-subscribing on every toggle.
|
|
60
|
+
const isVisibleRef = useRef(false)
|
|
61
|
+
isVisibleRef.current = isKeyboardVisible
|
|
62
|
+
|
|
63
|
+
const dismissKeyboard = useCallback(() => {
|
|
64
|
+
if (typeof document === 'undefined') return
|
|
65
|
+
const active = document.activeElement as HTMLElement | null
|
|
66
|
+
if (isEditableElement(active)) {
|
|
67
|
+
active?.blur?.()
|
|
68
|
+
}
|
|
69
|
+
}, [])
|
|
70
|
+
|
|
71
|
+
const flushPendingHide = useCallback(() => {
|
|
72
|
+
if (pendingHide.current) {
|
|
73
|
+
pendingHide.current = false
|
|
74
|
+
setIsKeyboardVisible(false)
|
|
75
|
+
setKeyboardHeight(0)
|
|
76
|
+
}
|
|
77
|
+
}, [])
|
|
78
|
+
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
if (!isWeb || !enabled) return
|
|
81
|
+
if (typeof window === 'undefined') return
|
|
82
|
+
const vv = window.visualViewport
|
|
83
|
+
if (!vv) return
|
|
84
|
+
|
|
85
|
+
const update = () => {
|
|
86
|
+
const height = getWebKeyboardHeight()
|
|
87
|
+
const tall = height >= MIN_KEYBOARD_HEIGHT
|
|
88
|
+
// require an editable element focused to *show* — this rules out URL-bar
|
|
89
|
+
// collapse and other viewport changes that aren't a keyboard. but stay
|
|
90
|
+
// visible while the viewport remains shrunk even if focus momentarily
|
|
91
|
+
// moves to a non-editable element (e.g. tapping between two inputs fires
|
|
92
|
+
// focusout→focusin), so the sheet doesn't flicker mid-transition.
|
|
93
|
+
const editableFocused = isEditableElement(document.activeElement)
|
|
94
|
+
const visible = tall && (editableFocused || isVisibleRef.current)
|
|
95
|
+
|
|
96
|
+
if (!visible) {
|
|
97
|
+
// suppress hide during an active drag so positions stay frozen; the
|
|
98
|
+
// drag-end flush reconciles the real state.
|
|
99
|
+
if (pauseKeyboardHandler.current && isVisibleRef.current) {
|
|
100
|
+
pendingHide.current = true
|
|
101
|
+
return
|
|
102
|
+
}
|
|
103
|
+
setIsKeyboardVisible(false)
|
|
104
|
+
setKeyboardHeight(0)
|
|
105
|
+
return
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
pendingHide.current = false
|
|
109
|
+
setIsKeyboardVisible(true)
|
|
110
|
+
setKeyboardHeight((prev) => (prev === height ? prev : height))
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// only react to resize (keyboard height changes). we intentionally do NOT
|
|
114
|
+
// listen to visualViewport 'scroll' — that fires continuously while the
|
|
115
|
+
// sheet content scrolls and would re-derive the keyboard height from a
|
|
116
|
+
// shifting viewport, making the sheet jump.
|
|
117
|
+
vv.addEventListener('resize', update)
|
|
118
|
+
// focus changes flip editable state without necessarily resizing the viewport
|
|
119
|
+
window.addEventListener('focusin', update)
|
|
120
|
+
window.addEventListener('focusout', update)
|
|
121
|
+
|
|
122
|
+
update()
|
|
123
|
+
|
|
124
|
+
return () => {
|
|
125
|
+
vv.removeEventListener('resize', update)
|
|
126
|
+
window.removeEventListener('focusin', update)
|
|
127
|
+
window.removeEventListener('focusout', update)
|
|
128
|
+
}
|
|
129
|
+
}, [enabled])
|
|
130
|
+
|
|
18
131
|
return {
|
|
19
132
|
keyboardControllerEnabled: false,
|
|
20
|
-
keyboardHeight
|
|
21
|
-
isKeyboardVisible
|
|
22
|
-
dismissKeyboard
|
|
133
|
+
keyboardHeight,
|
|
134
|
+
isKeyboardVisible,
|
|
135
|
+
dismissKeyboard,
|
|
23
136
|
pauseKeyboardHandler,
|
|
24
|
-
flushPendingHide
|
|
137
|
+
flushPendingHide,
|
|
25
138
|
}
|
|
26
139
|
}
|
|
@@ -9,6 +9,16 @@ import type { SheetOpenState } from './useSheetOpenState'
|
|
|
9
9
|
|
|
10
10
|
export type SheetContextValue = ReturnType<typeof useSheetProviderProps> & {
|
|
11
11
|
keyboardOccludedHeight: number
|
|
12
|
+
// whether the soft keyboard is currently open. distinct from
|
|
13
|
+
// keyboardOccludedHeight (which is 0 once the sheet fits above the keyboard):
|
|
14
|
+
// the fit-mode height freeze must persist for the whole time the keyboard is
|
|
15
|
+
// open, not just while occluded, or it releases and the sheet collapses.
|
|
16
|
+
isKeyboardVisible: boolean
|
|
17
|
+
// the sheet's pre-keyboard frame height (web). SheetScrollView pins its height
|
|
18
|
+
// to this while the keyboard is open so the frame keeps its full size (and just
|
|
19
|
+
// translates up) instead of collapsing to a consumer maxHeight that shrank with
|
|
20
|
+
// the viewport. 0 when not applicable.
|
|
21
|
+
keyboardStableFrameHeight: number
|
|
12
22
|
setHasScrollView: (val: boolean) => void
|
|
13
23
|
}
|
|
14
24
|
|
|
@@ -75,6 +75,10 @@ export function useSheetScrollViewGestures({
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
scrollBridge.scrollStartY = touch.pageY
|
|
78
|
+
// claim this touch for the scroll-view gesture hook so the PanResponder
|
|
79
|
+
// (which also negotiates this touch via RNW's responder system) defers
|
|
80
|
+
// and doesn't double-drive the sheet position. cleared on touchend.
|
|
81
|
+
scrollBridge.scrollNodeTouched = true
|
|
78
82
|
}
|
|
79
83
|
|
|
80
84
|
const handleTouchMove = (e: TouchEvent) => {
|
|
@@ -115,6 +119,10 @@ export function useSheetScrollViewGestures({
|
|
|
115
119
|
if (newOwner === 'pan') {
|
|
116
120
|
s.panDragOffset = 0
|
|
117
121
|
s.dys = []
|
|
122
|
+
// re-baseline the pan origin to the sheet's CURRENT position so the
|
|
123
|
+
// offset (reset to 0 here) maps to where it actually is — required for
|
|
124
|
+
// a correct scroll→pan handoff now that the PanResponder defers to us.
|
|
125
|
+
scrollBridge.startPanDrag?.()
|
|
118
126
|
scrollBridge.setParentDragging(true)
|
|
119
127
|
disableScroll()
|
|
120
128
|
} else {
|
|
@@ -133,8 +141,13 @@ export function useSheetScrollViewGestures({
|
|
|
133
141
|
|
|
134
142
|
s.dys.push(dy)
|
|
135
143
|
if (s.dys.length > 100) s.dys = s.dys.slice(-10)
|
|
136
|
-
} else if (s.owner === 'scroll') {
|
|
137
|
-
//
|
|
144
|
+
} else if (s.owner === 'scroll' && !e.isTrusted) {
|
|
145
|
+
// SYNTHETIC events only (tests): dispatched TouchEvents don't trigger the
|
|
146
|
+
// browser's native overflow scroll, so we move scrollTop ourselves. for a
|
|
147
|
+
// REAL touch (e.isTrusted) the browser already scrolls the overflow
|
|
148
|
+
// container natively — doing it again here double-applies the delta and
|
|
149
|
+
// makes scrollTop jitter / snap around. so for real touches we let native
|
|
150
|
+
// scrolling own it and only track the offset via the ScrollView onScroll.
|
|
138
151
|
const scrollDelta = -dy
|
|
139
152
|
const maxScrollY = node.scrollHeight - node.clientHeight
|
|
140
153
|
const newScrollY = Math.max(0, Math.min(maxScrollY, currentScrollY + scrollDelta))
|
|
@@ -159,12 +172,20 @@ export function useSheetScrollViewGestures({
|
|
|
159
172
|
}
|
|
160
173
|
|
|
161
174
|
scrollBridge.release({ dragAt: s.panDragOffset, vy })
|
|
175
|
+
} else if (s.owner === 'scroll') {
|
|
176
|
+
// gesture ended while scrolling. a pan→scroll handoff only happens once
|
|
177
|
+
// the pane reached the top, so commit the top snap (index 0) and clear
|
|
178
|
+
// the dragging state HERE, on touchend — never mid-gesture (that would
|
|
179
|
+
// fight the live gesture). this replaces the PanResponder's release,
|
|
180
|
+
// which used to fire on touchend before it deferred to this hook.
|
|
181
|
+
scrollBridge.snapToPosition?.(0)
|
|
162
182
|
}
|
|
163
183
|
|
|
164
184
|
enableScroll()
|
|
165
185
|
s.owner = 'none'
|
|
166
186
|
s.panDragOffset = 0
|
|
167
187
|
s.dys = []
|
|
188
|
+
scrollBridge.scrollNodeTouched = false
|
|
168
189
|
}
|
|
169
190
|
|
|
170
191
|
node.addEventListener('touchstart', handleTouchStart, {
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Web (mobile-browser) viewport helpers for the Sheet's keyboard handling.
|
|
3
|
+
*
|
|
4
|
+
* On real iOS Safari (verified on-device, iOS 26) the soft keyboard shrinks
|
|
5
|
+
* BOTH `window.visualViewport.height` AND `window.innerHeight` — neither is the
|
|
6
|
+
* stable layout viewport. Measured during a keyboard open: visualViewport
|
|
7
|
+
* 714 -> 404, innerHeight 714 -> 561 (it wobbles), but
|
|
8
|
+
* `document.documentElement.clientHeight` holds rock-steady at 714 the whole
|
|
9
|
+
* time (open, mid-keyboard, and close). So clientHeight IS the stable layout
|
|
10
|
+
* viewport, and we derive everything from it:
|
|
11
|
+
* - soft-keyboard height = clientHeight - visualViewport.height (stays correct
|
|
12
|
+
* even as innerHeight drifts), so the scroll padding clears the input.
|
|
13
|
+
* - the sheet's fit-mode anchor cap (translateY = screenSize - frameSize) reads
|
|
14
|
+
* clientHeight, so it never re-measures against a shrunk value and the frame
|
|
15
|
+
* stays anchored at the bottom.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
// ignore small viewport changes (URL bar collapse, accessory bars) so they
|
|
19
|
+
// don't read as a full keyboard. a real soft keyboard is well above this.
|
|
20
|
+
export const MIN_KEYBOARD_HEIGHT = 80
|
|
21
|
+
|
|
22
|
+
export function isEditableElement(el: Element | null): boolean {
|
|
23
|
+
if (!el) return false
|
|
24
|
+
const tag = el.tagName
|
|
25
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
|
|
26
|
+
if ((el as HTMLElement).isContentEditable) return true
|
|
27
|
+
return false
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* The stable layout-viewport height. document.documentElement.clientHeight is
|
|
32
|
+
* unaffected by the soft keyboard on iOS Safari (unlike innerHeight /
|
|
33
|
+
* visualViewport), so it stays constant while the keyboard animates in/out.
|
|
34
|
+
*/
|
|
35
|
+
export function getStableLayoutViewportHeight(): number {
|
|
36
|
+
if (typeof window === 'undefined') return 0
|
|
37
|
+
const ch = typeof document !== 'undefined' ? document.documentElement?.clientHeight : 0
|
|
38
|
+
if (ch && ch > 0) return ch
|
|
39
|
+
// fallback when clientHeight is unavailable (SSR / detached): best effort
|
|
40
|
+
return Math.max(window.innerHeight || 0, window.visualViewport?.height || 0)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* the largest the visible viewport can ever become on this device.
|
|
45
|
+
*
|
|
46
|
+
* iOS Safari grows the visible area as its top/bottom chrome (URL bar, toolbar,
|
|
47
|
+
* the dynamic bottom safe area) retracts on scroll, so the current layout
|
|
48
|
+
* viewport — document.documentElement.clientHeight — is not an upper bound: the
|
|
49
|
+
* chrome can collapse and reveal area BELOW it. A sheet whose hidden/below-fold
|
|
50
|
+
* region is sized against the current viewport then peeks back into view as the
|
|
51
|
+
* page scrolls and Safari reveals more.
|
|
52
|
+
*
|
|
53
|
+
* So we track a session high-water mark across every measured viewport signal,
|
|
54
|
+
* floored at the device screen height, so we never under-shoot even before any
|
|
55
|
+
* chrome collapse has been observed. Used to push hidden/minimized sheet content
|
|
56
|
+
* fully past the maximum the viewport could ever expose.
|
|
57
|
+
*/
|
|
58
|
+
let _maxViewportHeight = 0
|
|
59
|
+
export function getMaxViewportHeight(): number {
|
|
60
|
+
if (typeof window === 'undefined') return 0
|
|
61
|
+
const ch = typeof document !== 'undefined' ? document.documentElement?.clientHeight : 0
|
|
62
|
+
_maxViewportHeight = Math.max(
|
|
63
|
+
_maxViewportHeight,
|
|
64
|
+
ch || 0,
|
|
65
|
+
window.innerHeight || 0,
|
|
66
|
+
window.visualViewport?.height || 0,
|
|
67
|
+
window.screen?.height || 0
|
|
68
|
+
)
|
|
69
|
+
return _maxViewportHeight
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Soft-keyboard height = the occluded region between the (stable) layout
|
|
74
|
+
* viewport bottom and the visual viewport bottom.
|
|
75
|
+
*/
|
|
76
|
+
export function getWebKeyboardHeight(): number {
|
|
77
|
+
if (typeof window === 'undefined') return 0
|
|
78
|
+
const vv = window.visualViewport
|
|
79
|
+
if (!vv) return 0
|
|
80
|
+
return Math.max(0, Math.round(getStableLayoutViewportHeight() - vv.height))
|
|
81
|
+
}
|
package/types/SheetContext.d.ts
CHANGED
|
@@ -33,6 +33,8 @@ export declare const SheetProvider: (props: {
|
|
|
33
33
|
onlyShowFrame: boolean;
|
|
34
34
|
} & {
|
|
35
35
|
keyboardOccludedHeight: number;
|
|
36
|
+
isKeyboardVisible: boolean;
|
|
37
|
+
keyboardStableFrameHeight: number;
|
|
36
38
|
setHasScrollView: (val: boolean) => void;
|
|
37
39
|
} & {
|
|
38
40
|
scope: import("@tamagui/create-context").Scope<SheetContextValue>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetContext.d.ts","sourceRoot":"","sources":["../src/SheetContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,eAAO,MAAO,kBAAkB;;;2JAM4rB,CAAC;QAAS,CAAC;YAAoB,CAAC;yBAN1tB,gBAAgB,+CAAkC,CAAA;AAEpF,eAAO,MAAO,aAAa
|
|
1
|
+
{"version":3,"file":"SheetContext.d.ts","sourceRoot":"","sources":["../src/SheetContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,eAAO,MAAO,kBAAkB;;;2JAM4rB,CAAC;QAAS,CAAC;YAAoB,CAAC;yBAN1tB,gBAAgB,+CAAkC,CAAA;AAEpF,eAAO,MAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CAAE,eAAe;;;mCAG3C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetImplementationCustom.d.ts","sourceRoot":"","sources":["../src/SheetImplementationCustom.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAA4B,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"SheetImplementationCustom.d.ts","sourceRoot":"","sources":["../src/SheetImplementationCustom.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAA4B,IAAI,EAAE,MAAM,cAAc,CAAA;AAc7D,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AA2CzD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAu7BrC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetScrollView.d.ts","sourceRoot":"","sources":["../src/SheetScrollView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"SheetScrollView.d.ts","sourceRoot":"","sources":["../src/SheetScrollView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AAU9D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAuO3B,CAAA"}
|
package/types/createSheet.d.ts
CHANGED
|
@@ -46,9 +46,9 @@ export declare function createSheet<H extends TamaguiComponent | SheetStyledComp
|
|
|
46
46
|
Controlled: FunctionComponent<Omit<SheetProps, "open" | "onOpenChange"> & RefAttributes<RNView>> & {
|
|
47
47
|
Frame: ForwardRefExoticComponent<SheetScopedProps<Omit<GetProps<F>, keyof {
|
|
48
48
|
/**
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
49
|
+
* by default the sheet adds a view below its bottom that extends past the
|
|
50
|
+
* largest visible viewport height. this covers spring overshoot when opening
|
|
51
|
+
* so page content never shows through below the sheet.
|
|
52
52
|
*/
|
|
53
53
|
disableHideBottomOverflow?: boolean;
|
|
54
54
|
/**
|
|
@@ -59,9 +59,9 @@ export declare function createSheet<H extends TamaguiComponent | SheetStyledComp
|
|
|
59
59
|
adjustPaddingForOffscreenContent?: boolean;
|
|
60
60
|
}> & {
|
|
61
61
|
/**
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
62
|
+
* by default the sheet adds a view below its bottom that extends past the
|
|
63
|
+
* largest visible viewport height. this covers spring overshoot when opening
|
|
64
|
+
* so page content never shows through below the sheet.
|
|
65
65
|
*/
|
|
66
66
|
disableHideBottomOverflow?: boolean;
|
|
67
67
|
/**
|
|
@@ -119,9 +119,9 @@ export declare function createSheet<H extends TamaguiComponent | SheetStyledComp
|
|
|
119
119
|
};
|
|
120
120
|
Frame: ForwardRefExoticComponent<SheetScopedProps<Omit<GetProps<F>, keyof {
|
|
121
121
|
/**
|
|
122
|
-
*
|
|
123
|
-
*
|
|
124
|
-
*
|
|
122
|
+
* by default the sheet adds a view below its bottom that extends past the
|
|
123
|
+
* largest visible viewport height. this covers spring overshoot when opening
|
|
124
|
+
* so page content never shows through below the sheet.
|
|
125
125
|
*/
|
|
126
126
|
disableHideBottomOverflow?: boolean;
|
|
127
127
|
/**
|
|
@@ -132,9 +132,9 @@ export declare function createSheet<H extends TamaguiComponent | SheetStyledComp
|
|
|
132
132
|
adjustPaddingForOffscreenContent?: boolean;
|
|
133
133
|
}> & {
|
|
134
134
|
/**
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
*
|
|
135
|
+
* by default the sheet adds a view below its bottom that extends past the
|
|
136
|
+
* largest visible viewport height. this covers spring overshoot when opening
|
|
137
|
+
* so page content never shows through below the sheet.
|
|
138
138
|
*/
|
|
139
139
|
disableHideBottomOverflow?: boolean;
|
|
140
140
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createSheet.d.ts","sourceRoot":"","sources":["../src/createSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iCAAiC,EAElC,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAExF,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAOlD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"createSheet.d.ts","sourceRoot":"","sources":["../src/createSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iCAAiC,EAElC,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAExF,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAOlD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAK3D,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAA;AAE7C,KAAK,oBAAoB,GAAG,iCAAiC,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;AAE1F,wBAAgB,WAAW,CACzB,CAAC,SAAS,gBAAgB,GAAG,oBAAoB,EACjD,CAAC,SAAS,gBAAgB,GAAG,oBAAoB,EACjD,CAAC,SAAS,gBAAgB,GAAG,oBAAoB,EACjD,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,MAAM,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiG7D;;;;eAIG;wCACyB,OAAO;YAEnC;;;;eAIG;+CACgC,OAAO;;YAZ1C;;;;eAIG;wCACyB,OAAO;YAEnC;;;;eAIG;+CACgC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAZ1C;;;;WAIG;oCACyB,OAAO;QAEnC;;;;WAIG;2CACgC,OAAO;;QAZ1C;;;;WAIG;oCACyB,OAAO;QAEnC;;;;WAIG;2CACgC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2J7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAI9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,oBAAoB,EAC9B,UAAU,EAAE;IAAE,cAAc,EAAE,GAAG,CAAC;IAAC,yBAAyB,EAAE,GAAG,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAI9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,oBAAoB,EAC9B,UAAU,EAAE;IAAE,cAAc,EAAE,GAAG,CAAC;IAAC,yBAAyB,EAAE,GAAG,CAAA;CAAE,QAoEpE"}
|
package/types/types.d.ts
CHANGED
|
@@ -62,7 +62,8 @@ export type SheetProps = ScopedProps<{
|
|
|
62
62
|
zIndex?: number;
|
|
63
63
|
portalProps?: PortalProps;
|
|
64
64
|
/**
|
|
65
|
-
*
|
|
65
|
+
* Makes the sheet move up when the mobile keyboard opens so the focused input remains visible.
|
|
66
|
+
* Works on native (via keyboard events) and on mobile web (via the VisualViewport API).
|
|
66
67
|
*/
|
|
67
68
|
moveOnKeyboardChange?: boolean;
|
|
68
69
|
containerComponent?: React.ComponentType<any>;
|
|
@@ -104,6 +105,8 @@ export type ScrollBridge = {
|
|
|
104
105
|
forceScrollTo?: (y: number) => void;
|
|
105
106
|
isAtTop?: boolean;
|
|
106
107
|
snapToPosition?: (positionIndex: number) => void;
|
|
108
|
+
startPanDrag?: () => void;
|
|
109
|
+
scrollNodeTouched?: boolean;
|
|
107
110
|
};
|
|
108
111
|
export interface KeyboardControllerSheetOptions {
|
|
109
112
|
/**
|
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,sBAAsB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,UAAU,GAAG,WAAW,CAClC;IACE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAEhC,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAElC,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IAEzC;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAA;IAEpC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,CAAA;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Web
|
|
3
|
-
*
|
|
2
|
+
* Web implementation of the keyboard controller sheet hook.
|
|
3
|
+
*
|
|
4
|
+
* Mobile browsers don't expose a keyboard API, but they do resize the
|
|
5
|
+
* VisualViewport when the soft keyboard opens. We derive the keyboard height as
|
|
6
|
+
* `getStableLayoutViewportHeight() - visualViewport.height` (see webViewport —
|
|
7
|
+
* the stable baseline is document.documentElement.clientHeight, NOT innerHeight,
|
|
8
|
+
* which itself shrinks with the keyboard on real iOS Safari) and feed it into the
|
|
9
|
+
* keyboardOccludedHeight scroll padding in SheetImplementationCustom.
|
|
10
|
+
*
|
|
11
|
+
* Without this, a bottom sheet on mobile web stays pinned behind the keyboard:
|
|
12
|
+
* react-native-web's Dimensions tracks the (shrinking) VisualViewport, so any
|
|
13
|
+
* content sized off window dimensions collapses while the sheet's bottom stays
|
|
14
|
+
* occluded. See SheetImplementationCustom's activePositions / keyboardOccludedHeight.
|
|
4
15
|
*/
|
|
5
16
|
import type { KeyboardControllerSheetOptions, KeyboardControllerSheetResult } from './types';
|
|
6
|
-
export declare function useKeyboardControllerSheet(
|
|
17
|
+
export declare function useKeyboardControllerSheet(options: KeyboardControllerSheetOptions): KeyboardControllerSheetResult;
|
|
7
18
|
//# sourceMappingURL=useKeyboardControllerSheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboardControllerSheet.d.ts","sourceRoot":"","sources":["../src/useKeyboardControllerSheet.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"useKeyboardControllerSheet.d.ts","sourceRoot":"","sources":["../src/useKeyboardControllerSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,KAAK,EACV,8BAA8B,EAC9B,6BAA6B,EAC9B,MAAM,SAAS,CAAA;AAOhB,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,8BAA8B,GACtC,6BAA6B,CA4G/B"}
|
|
@@ -4,6 +4,8 @@ import type { ScrollBridge, SheetProps } from './types';
|
|
|
4
4
|
import type { SheetOpenState } from './useSheetOpenState';
|
|
5
5
|
export type SheetContextValue = ReturnType<typeof useSheetProviderProps> & {
|
|
6
6
|
keyboardOccludedHeight: number;
|
|
7
|
+
isKeyboardVisible: boolean;
|
|
8
|
+
keyboardStableFrameHeight: number;
|
|
7
9
|
setHasScrollView: (val: boolean) => void;
|
|
8
10
|
};
|
|
9
11
|
export declare function useSheetProviderProps(props: SheetProps, state: SheetOpenState, options?: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetProviderProps.d.ts","sourceRoot":"","sources":["../src/useSheetProviderProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzE,sBAAsB,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"useSheetProviderProps.d.ts","sourceRoot":"","sources":["../src/useSheetProviderProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzE,sBAAsB,EAAE,MAAM,CAAA;IAK9B,iBAAiB,EAAE,OAAO,CAAA;IAK1B,yBAAyB,EAAE,MAAM,CAAA;IACjC,gBAAgB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,cAAc,EACrB,OAAO,GAAE;IACP,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;CACpC;;;;;;;;;;;;;;;gCADwB,GAAG,KAAK,IAAI;;;;;;;wBAoCjC,MAAM;;;EAyKhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetScrollViewGestures.d.ts","sourceRoot":"","sources":["../src/useSheetScrollViewGestures.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAa3C,UAAU,+BAA+B;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;IAC/C,YAAY,EAAE,YAAY,CAAA;IAC1B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,CAAA;IACtB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9D;AAED,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,YAAY,EACZ,oBAAoB,GACrB,EAAE,+BAA+B,
|
|
1
|
+
{"version":3,"file":"useSheetScrollViewGestures.d.ts","sourceRoot":"","sources":["../src/useSheetScrollViewGestures.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAa3C,UAAU,+BAA+B;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;IAC/C,YAAY,EAAE,YAAY,CAAA;IAC1B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,CAAA;IACtB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9D;AAED,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,YAAY,EACZ,oBAAoB,GACrB,EAAE,+BAA+B,MA2LjC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Web (mobile-browser) viewport helpers for the Sheet's keyboard handling.
|
|
3
|
+
*
|
|
4
|
+
* On real iOS Safari (verified on-device, iOS 26) the soft keyboard shrinks
|
|
5
|
+
* BOTH `window.visualViewport.height` AND `window.innerHeight` — neither is the
|
|
6
|
+
* stable layout viewport. Measured during a keyboard open: visualViewport
|
|
7
|
+
* 714 -> 404, innerHeight 714 -> 561 (it wobbles), but
|
|
8
|
+
* `document.documentElement.clientHeight` holds rock-steady at 714 the whole
|
|
9
|
+
* time (open, mid-keyboard, and close). So clientHeight IS the stable layout
|
|
10
|
+
* viewport, and we derive everything from it:
|
|
11
|
+
* - soft-keyboard height = clientHeight - visualViewport.height (stays correct
|
|
12
|
+
* even as innerHeight drifts), so the scroll padding clears the input.
|
|
13
|
+
* - the sheet's fit-mode anchor cap (translateY = screenSize - frameSize) reads
|
|
14
|
+
* clientHeight, so it never re-measures against a shrunk value and the frame
|
|
15
|
+
* stays anchored at the bottom.
|
|
16
|
+
*/
|
|
17
|
+
export declare const MIN_KEYBOARD_HEIGHT = 80;
|
|
18
|
+
export declare function isEditableElement(el: Element | null): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The stable layout-viewport height. document.documentElement.clientHeight is
|
|
21
|
+
* unaffected by the soft keyboard on iOS Safari (unlike innerHeight /
|
|
22
|
+
* visualViewport), so it stays constant while the keyboard animates in/out.
|
|
23
|
+
*/
|
|
24
|
+
export declare function getStableLayoutViewportHeight(): number;
|
|
25
|
+
export declare function getMaxViewportHeight(): number;
|
|
26
|
+
/**
|
|
27
|
+
* Soft-keyboard height = the occluded region between the (stable) layout
|
|
28
|
+
* viewport bottom and the visual viewport bottom.
|
|
29
|
+
*/
|
|
30
|
+
export declare function getWebKeyboardHeight(): number;
|
|
31
|
+
//# sourceMappingURL=webViewport.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webViewport.d.ts","sourceRoot":"","sources":["../src/webViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,eAAO,MAAM,mBAAmB,KAAK,CAAA;AAErC,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAM7D;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,IAAI,MAAM,CAMtD;AAkBD,wBAAgB,oBAAoB,IAAI,MAAM,CAW7C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAK7C"}
|