react-native-keyboard-toolkit 0.0.0-stage → 1.0.0

package/dist/components/KeyboardAwareScrollView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { KeyboardAwareScrollViewProps } from '../types';
+import type { KeyboardAwareScrollViewRef } from '../types';
+/** A ScrollView that adds keyboard space and scrolls a covered focused input into view. */
+export declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<KeyboardAwareScrollViewProps & React.RefAttributes<KeyboardAwareScrollViewRef>>;
+export default KeyboardAwareScrollView;

package/dist/components/KeyboardAwareScrollView.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardAwareScrollView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const focusManager_1 = require("../utils/focusManager");
+const scrollManager_1 = require("../utils/scrollManager");
+const KeyboardContext_1 = require("../context/KeyboardContext");
+const useKeyboardState_1 = require("../hooks/useKeyboardState");
+const constants_1 = require("../utils/constants");
+const platform_1 = require("../utils/platform");
+/** A ScrollView that adds keyboard space and scrolls a covered focused input into view. */
+exports.KeyboardAwareScrollView = (0, react_1.forwardRef)(function KeyboardAwareScrollViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, contentContainerStyle, onScroll, onScrollBeginDrag, onContentSizeChange, onLayout, onFocusCapture, scrollEventThrottle = 16, ...props }, forwardedRef) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const debug = (0, KeyboardContext_1.useKeyboardDebug)();
+    const scrollRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(forwardedRef, () => scrollRef.current, []);
+    const scrollOffset = (0, react_1.useRef)(0);
+    const lastScrollTarget = (0, react_1.useRef)(null);
+    const measurementSequence = (0, react_1.useRef)(0);
+    const [keyboardOverlap, setKeyboardOverlap] = (0, react_1.useState)(0);
+    const spacing = Math.max(0, keyboardSpacing);
+    const scrollFocusedInput = (0, react_1.useCallback)(async () => {
+        const sequence = ++measurementSequence.current;
+        if (!enabled || !keyboard.isVisible || behavior === 'resize') {
+            return;
+        }
+        const scrollView = scrollRef.current;
+        const input = (0, focusManager_1.getFocusedInput)();
+        if (!scrollView?.measureInWindow) {
+            return;
+        }
+        const viewport = await new Promise(resolve => {
+            scrollView.measureInWindow((_x, y, _width, height) => resolve({ y, height }));
+        });
+        if (sequence !== measurementSequence.current || !keyboard.isVisible) {
+            return;
+        }
+        const overlap = (0, scrollManager_1.calculateKeyboardOverlap)(viewport, keyboard.height, keyboard.screenY);
+        if (Math.abs(overlap - keyboardOverlap) > 1) {
+            setKeyboardOverlap(overlap);
+            return;
+        }
+        if (!input?.measureInWindow ||
+            behavior === 'none' ||
+            behavior === 'padding') {
+            return;
+        }
+        const inputLayout = await (0, focusManager_1.measureFocusedInput)(input);
+        if (sequence !== measurementSequence.current || !inputLayout) {
+            return;
+        }
+        const calculation = (0, scrollManager_1.calculateScrollOffset)({ y: inputLayout.y, height: inputLayout.height }, viewport, keyboard.height, spacing, scrollOffset.current, keyboard.screenY);
+        if (debug && __DEV__) {
+            console.debug('[keyboard-toolkit] scroll calculation', calculation);
+        }
+        if (Math.abs(calculation.delta) > 1 &&
+            (lastScrollTarget.current === null ||
+                Math.abs(lastScrollTarget.current - calculation.offset) > 1)) {
+            lastScrollTarget.current = calculation.offset;
+            scrollView.scrollTo({ y: calculation.offset, animated: true });
+        }
+    }, [
+        behavior,
+        debug,
+        enabled,
+        keyboard.height,
+        keyboard.isVisible,
+        keyboard.screenY,
+        keyboardOverlap,
+        spacing,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!keyboard.isVisible) {
+            lastScrollTarget.current = null;
+            measurementSequence.current += 1;
+            setKeyboardOverlap(0);
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            scrollFocusedInput();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [keyboard.height, keyboard.isVisible, scrollFocusedInput]);
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        scrollOffset.current = event.nativeEvent.contentOffset.y;
+        if (lastScrollTarget.current !== null &&
+            Math.abs(scrollOffset.current - lastScrollTarget.current) <= 1) {
+            lastScrollTarget.current = null;
+        }
+        onScroll?.(event);
+    }, [onScroll]);
+    const handleScrollBeginDrag = (0, react_1.useCallback)((event) => {
+        lastScrollTarget.current = null;
+        onScrollBeginDrag?.(event);
+    }, [onScrollBeginDrag]);
+    const handleContentSizeChange = (0, react_1.useCallback)((width, height) => {
+        onContentSizeChange?.(width, height);
+        if (keyboard.isVisible) {
+            requestAnimationFrame(() => scrollFocusedInput());
+        }
+    }, [keyboard.isVisible, onContentSizeChange, scrollFocusedInput]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        onLayout?.(event);
+        if (keyboard.isVisible) {
+            requestAnimationFrame(() => scrollFocusedInput());
+        }
+    }, [keyboard.isVisible, onLayout, scrollFocusedInput]);
+    const handleFocusCapture = (0, react_1.useCallback)((event) => {
+        onFocusCapture?.(event);
+        if (keyboard.isVisible) {
+            requestAnimationFrame(() => scrollFocusedInput());
+        }
+    }, [keyboard.isVisible, onFocusCapture, scrollFocusedInput]);
+    const flattenedContentStyle = react_native_1.StyleSheet.flatten(contentContainerStyle);
+    const existingBottomPadding = typeof flattenedContentStyle?.paddingBottom === 'number'
+        ? flattenedContentStyle.paddingBottom
+        : 0;
+    const shouldPad = enabled &&
+        keyboard.isVisible &&
+        behavior !== 'none' &&
+        behavior !== 'resize' &&
+        keyboardOverlap > 0;
+    const adjustedContentStyle = shouldPad && typeof flattenedContentStyle?.paddingBottom !== 'string'
+        ? [
+            contentContainerStyle,
+            {
+                paddingBottom: Math.max(existingBottomPadding, keyboardOverlap + spacing),
+            },
+        ]
+        : contentContainerStyle;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ...props, automaticallyAdjustKeyboardInsets: props.automaticallyAdjustKeyboardInsets ??
+            (behavior === 'resize' && platform_1.isIOS), ref: scrollRef, contentContainerStyle: adjustedContentStyle, onContentSizeChange: handleContentSizeChange, onLayout: handleLayout, onFocusCapture: handleFocusCapture, onScroll: handleScroll, onScrollBeginDrag: handleScrollBeginDrag, scrollEventThrottle: scrollEventThrottle }));
+});
+exports.KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+exports.default = exports.KeyboardAwareScrollView;

package/dist/components/KeyboardAwareView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { KeyboardAwareViewProps } from '../types';
+import type { KeyboardAwareViewRef } from '../types';
+/** A lightweight view that adds bottom space while the keyboard is visible. */
+export declare const KeyboardAwareView: React.ForwardRefExoticComponent<KeyboardAwareViewProps & React.RefAttributes<KeyboardAwareViewRef>>;
+export default KeyboardAwareView;

package/dist/components/KeyboardAwareView.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardAwareView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const constants_1 = require("../utils/constants");
+const useKeyboardState_1 = require("../hooks/useKeyboardState");
+const scrollManager_1 = require("../utils/scrollManager");
+/** A lightweight view that adds bottom space while the keyboard is visible. */
+exports.KeyboardAwareView = (0, react_1.forwardRef)(function KeyboardAwareViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, style, onLayout, ...props }, forwardedRef) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const viewRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(forwardedRef, () => viewRef.current, []);
+    const measurementSequence = (0, react_1.useRef)(0);
+    const [keyboardOverlap, setKeyboardOverlap] = (0, react_1.useState)(0);
+    const flattenedStyle = react_native_1.StyleSheet.flatten(style);
+    const basePadding = typeof flattenedStyle?.paddingBottom === 'number'
+        ? flattenedStyle.paddingBottom
+        : 0;
+    const measureOverlap = (0, react_1.useCallback)(() => {
+        const view = viewRef.current;
+        if (!view?.measureInWindow || !keyboard.isVisible) {
+            return;
+        }
+        const sequence = ++measurementSequence.current;
+        view.measureInWindow((_x, y, _width, height) => {
+            if (sequence !== measurementSequence.current || !keyboard.isVisible) {
+                return;
+            }
+            setKeyboardOverlap((0, scrollManager_1.calculateKeyboardOverlap)({ y, height }, keyboard.height, keyboard.screenY));
+        });
+    }, [keyboard.height, keyboard.isVisible, keyboard.screenY]);
+    (0, react_1.useEffect)(() => {
+        if (!keyboard.isVisible) {
+            measurementSequence.current += 1;
+            setKeyboardOverlap(0);
+            return;
+        }
+        const frame = requestAnimationFrame(measureOverlap);
+        return () => cancelAnimationFrame(frame);
+    }, [keyboard.isVisible, keyboard.height, keyboard.screenY, measureOverlap]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        onLayout?.(event);
+        measureOverlap();
+    }, [measureOverlap, onLayout]);
+    const adjust = enabled &&
+        keyboard.isVisible &&
+        behavior !== 'none' &&
+        behavior !== 'resize' &&
+        keyboardOverlap > 0 &&
+        typeof flattenedStyle?.paddingBottom !== 'string';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, ref: viewRef, onLayout: handleLayout, style: adjust
+            ? [
+                style,
+                {
+                    paddingBottom: Math.max(basePadding, keyboardOverlap + Math.max(0, keyboardSpacing)),
+                },
+            ]
+            : style }));
+});
+exports.KeyboardAwareView.displayName = 'KeyboardAwareView';
+exports.default = exports.KeyboardAwareView;

package/dist/components/KeyboardDismissButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { KeyboardDismissButtonProps } from '../types';
+/** A pressable that dismisses the software keyboard by default. */
+export declare function KeyboardDismissButton({ children, onPress, dismissKeyboard, accessibilityLabel, ...props }: KeyboardDismissButtonProps): React.JSX.Element;
+export default KeyboardDismissButton;

package/dist/components/KeyboardDismissButton.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardDismissButton = KeyboardDismissButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+/** A pressable that dismisses the software keyboard by default. */
+function KeyboardDismissButton({ children, onPress, dismissKeyboard = true, accessibilityLabel = 'Dismiss keyboard', ...props }) {
+    const handlePress = () => {
+        onPress?.();
+        if (dismissKeyboard) {
+            react_native_1.Keyboard.dismiss();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", onPress: handlePress, children: children }));
+}
+exports.default = KeyboardDismissButton;

package/dist/components/KeyboardToolbar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { KeyboardToolbarProps } from '../types';
+/** An optional in-layout toolbar for input navigation and keyboard dismissal. */
+export declare function KeyboardToolbar({ inputRefs, focusedInputIndex, onFocusedInputChange, onDone, doneText, children, alwaysVisible, style, ...props }: KeyboardToolbarProps): React.JSX.Element | null;
+export default KeyboardToolbar;

package/dist/components/KeyboardToolbar.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardToolbar = KeyboardToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const useKeyboardState_1 = require("../hooks/useKeyboardState");
+function findFocusedInputIndex(inputRefs) {
+    return inputRefs.findIndex(ref => ref.current?.isFocused() === true);
+}
+function isMountedInputAt(inputRefs, index) {
+    return (index >= 0 && index < inputRefs.length && inputRefs[index]?.current != null);
+}
+function hasMountedInputBefore(inputRefs, index) {
+    return inputRefs.some((input, inputIndex) => inputIndex < index && input.current != null);
+}
+function hasMountedInputAfter(inputRefs, index) {
+    return inputRefs.some((input, inputIndex) => inputIndex > index && input.current != null);
+}
+/** An optional in-layout toolbar for input navigation and keyboard dismissal. */
+function KeyboardToolbar({ inputRefs = [], focusedInputIndex, onFocusedInputChange, onDone, doneText = 'Done', children, alwaysVisible = false, style, ...props }) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const [trackedIndex, setTrackedIndex] = (0, react_1.useState)(-1);
+    const lastReportedIndex = (0, react_1.useRef)(-1);
+    const trackFocus = (0, react_1.useCallback)(() => {
+        const index = findFocusedInputIndex(inputRefs);
+        setTrackedIndex(current => (current === index ? current : index));
+        if (lastReportedIndex.current !== index) {
+            lastReportedIndex.current = index;
+            onFocusedInputChange?.(index);
+        }
+    }, [inputRefs, onFocusedInputChange]);
+    (0, react_1.useEffect)(() => {
+        trackFocus();
+        if (!keyboard.isVisible && !alwaysVisible) {
+            return;
+        }
+        const interval = setInterval(trackFocus, 100);
+        return () => clearInterval(interval);
+    }, [alwaysVisible, keyboard.isVisible, trackFocus]);
+    if (!alwaysVisible && !keyboard.isVisible) {
+        return null;
+    }
+    const actualFocusedIndex = findFocusedInputIndex(inputRefs);
+    const currentIndex = actualFocusedIndex >= 0
+        ? actualFocusedIndex
+        : isMountedInputAt(inputRefs, trackedIndex)
+            ? trackedIndex
+            : isMountedInputAt(inputRefs, focusedInputIndex ?? -1)
+                ? focusedInputIndex
+                : -1;
+    const canNavigateBackward = currentIndex >= 0 && hasMountedInputBefore(inputRefs, currentIndex);
+    const canNavigateForward = currentIndex >= 0 && hasMountedInputAfter(inputRefs, currentIndex);
+    const focusInDirection = (direction) => {
+        const actualIndex = findFocusedInputIndex(inputRefs);
+        const origin = actualIndex >= 0 ? actualIndex : currentIndex;
+        if (origin < 0) {
+            return;
+        }
+        for (let index = origin + direction; index >= 0 && index < inputRefs.length; index += direction) {
+            const target = inputRefs[index]?.current;
+            if (target) {
+                target.focus();
+                lastReportedIndex.current = index;
+                setTrackedIndex(index);
+                onFocusedInputChange?.(index);
+                return;
+            }
+        }
+    };
+    const done = () => {
+        const focusedInput = react_native_1.TextInput.State.currentlyFocusedInput?.();
+        if (focusedInput) {
+            react_native_1.TextInput.State.blurTextInput(focusedInput);
+        }
+        react_native_1.Keyboard.dismiss();
+        onDone?.();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.toolbar, style], children: children ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: "Previous input", disabled: !canNavigateBackward, onPress: () => focusInDirection(-1), style: styles.action, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: canNavigateBackward ? styles.label : styles.disabled, children: "Previous" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: "Next input", disabled: !canNavigateForward, onPress: () => focusInDirection(1), style: styles.action, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: canNavigateForward ? styles.label : styles.disabled, children: "Next" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.spacer }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: "Done", onPress: done, style: styles.action, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: doneText }) })] })) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    toolbar: {
+        alignItems: 'center',
+        backgroundColor: '#f6f7f9',
+        borderTopColor: '#d8dce2',
+        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
+        flexDirection: 'row',
+        minHeight: 48,
+        paddingHorizontal: 12,
+    },
+    action: {
+        minHeight: 44,
+        justifyContent: 'center',
+        paddingHorizontal: 10,
+    },
+    label: {
+        color: '#155eef',
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    disabled: {
+        color: '#98a2b3',
+        fontSize: 15,
+    },
+    spacer: {
+        flex: 1,
+    },
+});
+exports.default = KeyboardToolbar;

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { KeyboardAwareScrollView } from './KeyboardAwareScrollView';
+export { KeyboardAwareView } from './KeyboardAwareView';
+export { KeyboardToolbar } from './KeyboardToolbar';
+export { KeyboardDismissButton } from './KeyboardDismissButton';

package/dist/components/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardDismissButton = exports.KeyboardToolbar = exports.KeyboardAwareView = exports.KeyboardAwareScrollView = void 0;
+var KeyboardAwareScrollView_1 = require("./KeyboardAwareScrollView");
+Object.defineProperty(exports, "KeyboardAwareScrollView", { enumerable: true, get: function () { return KeyboardAwareScrollView_1.KeyboardAwareScrollView; } });
+var KeyboardAwareView_1 = require("./KeyboardAwareView");
+Object.defineProperty(exports, "KeyboardAwareView", { enumerable: true, get: function () { return KeyboardAwareView_1.KeyboardAwareView; } });
+var KeyboardToolbar_1 = require("./KeyboardToolbar");
+Object.defineProperty(exports, "KeyboardToolbar", { enumerable: true, get: function () { return KeyboardToolbar_1.KeyboardToolbar; } });
+var KeyboardDismissButton_1 = require("./KeyboardDismissButton");
+Object.defineProperty(exports, "KeyboardDismissButton", { enumerable: true, get: function () { return KeyboardDismissButton_1.KeyboardDismissButton; } });

package/dist/context/KeyboardContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { KeyboardProviderProps } from '../types';
+/** Optional provider for development diagnostics; keyboard subscriptions are shared globally. */
+export declare function KeyboardProvider({ children, debug, }: KeyboardProviderProps): React.JSX.Element;
+/** Read whether development diagnostics are enabled on the nearest provider. */
+export declare function useKeyboardDebug(): boolean;

package/dist/context/KeyboardContext.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardProvider = KeyboardProvider;
+exports.useKeyboardDebug = useKeyboardDebug;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useKeyboardState_1 = require("../hooks/useKeyboardState");
+const DebugContext = (0, react_1.createContext)(false);
+/** Optional provider for development diagnostics; keyboard subscriptions are shared globally. */
+function KeyboardProvider({ children, debug = false, }) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const previous = (0, react_1.useRef)(keyboard);
+    (0, react_1.useEffect)(() => {
+        if (debug &&
+            __DEV__ &&
+            (previous.current.isVisible !== keyboard.isVisible ||
+                previous.current.height !== keyboard.height)) {
+            console.debug('[keyboard-toolkit]', keyboard);
+        }
+        previous.current = keyboard;
+    }, [debug, keyboard]);
+    return ((0, jsx_runtime_1.jsx)(DebugContext.Provider, { value: debug, children: children }));
+}
+/** Read whether development diagnostics are enabled on the nearest provider. */
+function useKeyboardDebug() {
+    return (0, react_1.useContext)(DebugContext);
+}

package/dist/context/index.d.ts

@@ -0,0 +1 @@
+export { KeyboardProvider } from './KeyboardContext';

package/dist/context/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardProvider = void 0;
+var KeyboardContext_1 = require("./KeyboardContext");
+Object.defineProperty(exports, "KeyboardProvider", { enumerable: true, get: function () { return KeyboardContext_1.KeyboardProvider; } });

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useKeyboard } from './useKeyboard';
+export { useKeyboardState } from './useKeyboardState';
+export { useKeyboardAnimation } from './useKeyboardAnimation';
+export { useFocusedInput } from './useFocusedInput';

package/dist/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusedInput = exports.useKeyboardAnimation = exports.useKeyboardState = exports.useKeyboard = void 0;
+var useKeyboard_1 = require("./useKeyboard");
+Object.defineProperty(exports, "useKeyboard", { enumerable: true, get: function () { return useKeyboard_1.useKeyboard; } });
+var useKeyboardState_1 = require("./useKeyboardState");
+Object.defineProperty(exports, "useKeyboardState", { enumerable: true, get: function () { return useKeyboardState_1.useKeyboardState; } });
+var useKeyboardAnimation_1 = require("./useKeyboardAnimation");
+Object.defineProperty(exports, "useKeyboardAnimation", { enumerable: true, get: function () { return useKeyboardAnimation_1.useKeyboardAnimation; } });
+var useFocusedInput_1 = require("./useFocusedInput");
+Object.defineProperty(exports, "useFocusedInput", { enumerable: true, get: function () { return useFocusedInput_1.useFocusedInput; } });

package/dist/hooks/useFocusedInput.d.ts

@@ -0,0 +1,6 @@
+import type { FocusedInputLayout } from '../types';
+/** Measure the focused TextInput when the keyboard opens; call `refresh` after layout changes. */
+export declare function useFocusedInput(): {
+    focusedInput: FocusedInputLayout | null;
+    refresh: () => Promise<FocusedInputLayout | null>;
+};

package/dist/hooks/useFocusedInput.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusedInput = useFocusedInput;
+const react_1 = require("react");
+const focusManager_1 = require("../utils/focusManager");
+const useKeyboardState_1 = require("./useKeyboardState");
+/** Measure the focused TextInput when the keyboard opens; call `refresh` after layout changes. */
+function useFocusedInput() {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const [focusedInput, setFocusedInput] = (0, react_1.useState)(null);
+    const measureSequence = (0, react_1.useRef)(0);
+    const refresh = (0, react_1.useCallback)(async () => {
+        const sequence = ++measureSequence.current;
+        const layout = await (0, focusManager_1.measureFocusedInput)((0, focusManager_1.getFocusedInput)());
+        if (sequence === measureSequence.current) {
+            setFocusedInput(current => {
+                if (current?.x === layout?.x &&
+                    current?.y === layout?.y &&
+                    current?.width === layout?.width &&
+                    current?.height === layout?.height) {
+                    return current;
+                }
+                return layout;
+            });
+        }
+        return layout;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!keyboard.isVisible) {
+            measureSequence.current += 1;
+            setFocusedInput(null);
+            return;
+        }
+        refresh();
+        const interval = setInterval(refresh, 120);
+        return () => {
+            measureSequence.current += 1;
+            clearInterval(interval);
+        };
+    }, [keyboard.isVisible, keyboard.height, refresh]);
+    return { focusedInput, refresh };
+}

package/dist/hooks/useKeyboard.d.ts

@@ -0,0 +1 @@
+export { useKeyboardState as useKeyboard } from './useKeyboardState';

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboard = void 0;
+var useKeyboardState_1 = require("./useKeyboardState");
+Object.defineProperty(exports, "useKeyboard", { enumerable: true, get: function () { return useKeyboardState_1.useKeyboardState; } });

package/dist/hooks/useKeyboardAnimation.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+/** Provides an animated 0-to-1 visibility value and the native event duration. */
+export declare function useKeyboardAnimation(): {
+    progress: Animated.Value;
+    animationDuration: number;
+};

package/dist/hooks/useKeyboardAnimation.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardAnimation = useKeyboardAnimation;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const useKeyboardState_1 = require("./useKeyboardState");
+/** Provides an animated 0-to-1 visibility value and the native event duration. */
+function useKeyboardAnimation() {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+    const progressRef = (0, react_1.useRef)(null);
+    if (!progressRef.current) {
+        progressRef.current = new react_native_1.Animated.Value(keyboard.progress);
+    }
+    const progress = progressRef.current;
+    const [reduceMotion, setReduceMotion] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        react_native_1.AccessibilityInfo.isReduceMotionEnabled()
+            .then(enabled => {
+            if (active) {
+                setReduceMotion(enabled);
+            }
+        })
+            .catch(() => {
+            // Keep animations enabled when the platform preference cannot be read.
+        });
+        const subscription = react_native_1.AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+        return () => {
+            active = false;
+            subscription.remove();
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const animation = react_native_1.Animated.timing(progress, {
+            toValue: keyboard.progress,
+            duration: reduceMotion ? 0 : keyboard.animationDuration,
+            useNativeDriver: true,
+        });
+        animation.start();
+        return () => animation.stop();
+    }, [keyboard.animationDuration, keyboard.progress, progress, reduceMotion]);
+    return { progress, animationDuration: keyboard.animationDuration };
+}

package/dist/hooks/useKeyboardState.d.ts

@@ -0,0 +1,2 @@
+/** Subscribe to the shared, normalized keyboard state. A provider is optional. */
+export declare function useKeyboardState(): import("..").KeyboardState;

package/dist/hooks/useKeyboardState.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardState = useKeyboardState;
+const react_1 = require("react");
+const keyboardEvents_1 = require("../utils/keyboardEvents");
+/** Subscribe to the shared, normalized keyboard state. A provider is optional. */
+function useKeyboardState() {
+    return (0, react_1.useSyncExternalStore)(keyboardEvents_1.subscribeKeyboardState, keyboardEvents_1.getKeyboardState, keyboardEvents_1.getKeyboardState);
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { KeyboardAwareScrollView, KeyboardAwareView, KeyboardDismissButton, KeyboardToolbar, } from './components';
+export { KeyboardProvider } from './context';
+export { useFocusedInput, useKeyboard, useKeyboardAnimation, useKeyboardState, } from './hooks';
+export { calculateScrollOffset, calculateKeyboardOverlap, focusInput, getFocusedInput, isAndroid, isIOS, measureFocusedInput, } from './utils';
+export type { FocusedInputLayout, KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef, KeyboardAwareViewProps, KeyboardAwareViewRef, KeyboardBehavior, KeyboardDismissButtonProps, KeyboardProviderProps, KeyboardState, KeyboardToolbarProps, TextInputRef, } from './types';

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureFocusedInput = exports.isIOS = exports.isAndroid = exports.getFocusedInput = exports.focusInput = exports.calculateKeyboardOverlap = exports.calculateScrollOffset = exports.useKeyboardState = exports.useKeyboardAnimation = exports.useKeyboard = exports.useFocusedInput = exports.KeyboardProvider = exports.KeyboardToolbar = exports.KeyboardDismissButton = exports.KeyboardAwareView = exports.KeyboardAwareScrollView = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "KeyboardAwareScrollView", { enumerable: true, get: function () { return components_1.KeyboardAwareScrollView; } });
+Object.defineProperty(exports, "KeyboardAwareView", { enumerable: true, get: function () { return components_1.KeyboardAwareView; } });
+Object.defineProperty(exports, "KeyboardDismissButton", { enumerable: true, get: function () { return components_1.KeyboardDismissButton; } });
+Object.defineProperty(exports, "KeyboardToolbar", { enumerable: true, get: function () { return components_1.KeyboardToolbar; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "KeyboardProvider", { enumerable: true, get: function () { return context_1.KeyboardProvider; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useFocusedInput", { enumerable: true, get: function () { return hooks_1.useFocusedInput; } });
+Object.defineProperty(exports, "useKeyboard", { enumerable: true, get: function () { return hooks_1.useKeyboard; } });
+Object.defineProperty(exports, "useKeyboardAnimation", { enumerable: true, get: function () { return hooks_1.useKeyboardAnimation; } });
+Object.defineProperty(exports, "useKeyboardState", { enumerable: true, get: function () { return hooks_1.useKeyboardState; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "calculateScrollOffset", { enumerable: true, get: function () { return utils_1.calculateScrollOffset; } });
+Object.defineProperty(exports, "calculateKeyboardOverlap", { enumerable: true, get: function () { return utils_1.calculateKeyboardOverlap; } });
+Object.defineProperty(exports, "focusInput", { enumerable: true, get: function () { return utils_1.focusInput; } });
+Object.defineProperty(exports, "getFocusedInput", { enumerable: true, get: function () { return utils_1.getFocusedInput; } });
+Object.defineProperty(exports, "isAndroid", { enumerable: true, get: function () { return utils_1.isAndroid; } });
+Object.defineProperty(exports, "isIOS", { enumerable: true, get: function () { return utils_1.isIOS; } });
+Object.defineProperty(exports, "measureFocusedInput", { enumerable: true, get: function () { return utils_1.measureFocusedInput; } });