reactjs-virtual-keyboard 1.0.2 → 2.0.0

package/dist/index.d.ts

@@ -8,22 +8,44 @@ export declare const BackspaceIcon: FC<IconProps>;
 
 export declare const CapsLockIcon: FC<IconProps>;
 
+export declare interface ContinuousPressConfig {
+    /** Delay before continuous press starts (ms) */
+    initialDelay?: number;
+    /** Interval between repeated presses (ms) */
+    interval?: number;
+}
+
 export declare interface ContinuousPressOptions {
     initialDelay?: number;
     interval?: number;
     shouldPreventDefault?: boolean;
 }
 
+/**
+ * Creates a caret manager for manipulating text in input elements.
+ * This is a pure utility that doesn't use React hooks.
+ *
+ * @param getInputRef - Function that returns the current input element ref
+ * @returns Object with insertText and backspace functions
+ *
+ * @example
+ * ```tsx
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * const { insertText, backspace } = createCaretManager(() => inputRef.current);
+ * ```
+ */
+export declare function createCaretManager(getInputRef: () => InputElement | null): UseCaretManagerReturn;
+
 export declare const DEFAULT_THEME: {
-    backgroundColor: string;
-    keyColor: string;
-    keyTextColor: string;
-    keyActiveColor: string;
-    keyHoverColor: string;
-    activeStateColor: string;
-    keyBorderRadius: string;
-    keyFontSize: string;
-    keyHeight: string;
+    readonly backgroundColor: "#1a1a1a";
+    readonly keyColor: "#444444";
+    readonly keyTextColor: "#ffffff";
+    readonly keyActiveColor: "#666666";
+    readonly keyHoverColor: "#555555";
+    readonly activeStateColor: "#4a90e2";
+    readonly keyBorderRadius: "0.5vw";
+    readonly keyFontSize: "32px";
+    readonly keyHeight: "100%";
 };
 
 export declare const EnterIcon: FC<IconProps>;
@@ -129,7 +151,12 @@ export declare interface KeyboardLayoutProps {
     onSpace: () => void;
     onCapsToggle: () => void;
     onLayoutToggle: () => void;
-    inputType: HTMLInputTypeAttribute;
+    inputType?: HTMLInputTypeAttribute;
+    customLayouts?: {
+        letters?: string[][];
+        symbols?: string[][];
+        numbers?: string[][];
+    };
 }
 
 export declare const KeyboardRow: FC<KeyboardRowProps>;
@@ -141,12 +168,12 @@ export declare interface KeyboardRowProps {
 
 export declare type LayoutType = 'letters' | 'symbols' | 'numbers';
 
-export declare const NUMBERS_LAYOUT: string[][];
+export declare const NUMBERS_LAYOUT: readonly [readonly ["7", "8", "9", "#"], readonly ["4", "5", "6", "-"], readonly ["1", "2", "3"], readonly [",", "0", "."]];
 
 export declare const NumbersLayout: FC<NumbersLayoutProps>;
 
 export declare interface NumbersLayoutProps {
-    currentLayoutData: string[][];
+    currentLayoutData: ReadonlyArray<ReadonlyArray<string>> | string[][];
     onBackspace: () => void;
     onEnter: () => void;
     onKeyClick: (key: string) => void;
@@ -159,13 +186,20 @@ export declare interface NumbersLayoutProps {
  */
 export declare const onEnterClickUtil: (focusedInputRef: FocusedInputRef) => void;
 
-export declare const QWERTY_LAYOUT: string[][];
+export declare const QWERTY_LAYOUT: readonly [readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], readonly ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"], readonly ["a", "s", "d", "f", "g", "h", "j", "k", "l"], readonly ["z", "x", "c", "v", "b", "n", "m"]];
 
 /**
  * Reset scroll position by removing transforms from shifted elements
  */
 export declare function resetScrollPosition(): void;
 
+export declare interface ScrollConfig {
+    /** Enable automatic scrolling when keyboard appears */
+    enabled?: boolean;
+    /** Additional offset padding (px) */
+    offset?: number;
+}
+
 /**
  * Utility functions to handle layout shifting when virtual keyboard appears
  */
@@ -182,6 +216,27 @@ export declare const setInputValueAndDispatchEvents: (input: InputElement, value
     skipValueAssignment?: boolean;
 }) => void;
 
+/**
+ * Sets up hardware keyboard event listeners to sync with virtual keyboard.
+ * This is a pure utility that returns a cleanup function.
+ *
+ * @param handlers - Handlers for keyboard events
+ * @returns Cleanup function to remove event listeners
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   if (!isInputFocused) return;
+ *   return setupHardwareKeyboard({
+ *     onBackspace: handleBackspace,
+ *     onEnter: handleEnter,
+ *     // ...
+ *   });
+ * }, [isInputFocused, handleBackspace, handleEnter]);
+ * ```
+ */
+export declare function setupHardwareKeyboard(handlers: Omit<HardwareKeyboardHandlers, 'isInputFocused'>): () => void;
+
 export declare const SpacebarIcon: FC<IconProps>;
 
 export declare const SpecialKey: FC<SpecialKeyProps>;
@@ -196,13 +251,13 @@ export declare interface SpecialKeyProps {
     enableContinuousPress?: boolean;
 }
 
-export declare const SYMBOLS_LAYOUT: string[][];
+export declare const SYMBOLS_LAYOUT: readonly [readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], readonly ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], readonly ["-", "_", "=", "+", "[", "]", "{", "}", "\\", "|"], readonly [";", ":", "\"", "'", ",", ".", "<", ">", "/", "?"]];
 
 export declare const TextLayout: FC<TextLayoutProps>;
 
 export declare interface TextLayoutProps {
-    inputType: HTMLInputTypeAttribute;
-    currentLayoutData: string[][];
+    inputType?: HTMLInputTypeAttribute;
+    currentLayoutData: ReadonlyArray<ReadonlyArray<string>> | string[][];
     onBackspace: () => void;
     onEnter: () => void;
     onSpace: () => void;
@@ -213,11 +268,6 @@ export declare interface TextLayoutProps {
     currentLayout: LayoutType;
 }
 
-/**
- * Hook to manage caret position and text insertion/deletion in input elements
- */
-export declare function useCaretManager(focusedInputRef: RefObject<InputElement | null>): UseCaretManagerReturn;
-
 export declare interface UseCaretManagerReturn {
     insertText: (text: string) => void;
     backspace: () => void;
@@ -234,12 +284,6 @@ export declare function useContinuousPress(onPress: () => void, { initialDelay,
     onTouchEnd: (e: React.TouchEvent) => void;
 };
 
-/**
- * Hook to keep virtual keyboard in sync with hardware keyboard events
- * (e.g., when pressing caps lock on hardware keyboard, virtual keyboard should reflect it)
- */
-export declare function useHardwareKeyboard({ isInputFocused, onBackspace, onEnter, onSpace, onCapsToggle, onKeyClick, }: HardwareKeyboardHandlers): void;
-
 /**
  * Hook to handle keyboard scrolling for input elements.
  * Automatically shifts content up when the virtual keyboard would cover the input.
@@ -314,6 +358,43 @@ export declare interface VirtualKeyboardProps {
     validate?: (value: string) => boolean;
     /** Theme configuration */
     theme?: VirtualKeyboardTheme;
+    /** Custom keyboard layouts (overrides default layouts) */
+    customLayouts?: {
+        letters?: string[][];
+        symbols?: string[][];
+        numbers?: string[][];
+    };
+    /** Continuous press configuration for backspace */
+    continuousPressConfig?: ContinuousPressConfig;
+    /** Scroll behavior configuration */
+    scrollConfig?: ScrollConfig;
+    /** Enable/disable hardware keyboard synchronization */
+    syncWithHardwareKeyboard?: boolean;
+    /** Custom key labels (e.g., { 'enter': 'Submit', 'space': 'Space Bar' }) */
+    keyLabels?: Record<string, string>;
+    /** Keys to hide from the keyboard */
+    hiddenKeys?: string[];
+    /** Keys to disable (grayed out and non-clickable) */
+    disabledKeys?: string[];
+    /** Custom render function for individual keys */
+    renderKey?: (key: string, defaultRender: ReactNode) => ReactNode;
+    /** Custom render function for special keys */
+    renderSpecialKey?: (type: string, defaultRender: ReactNode) => ReactNode;
+    /** Multi-language keyboard layouts */
+    languages?: {
+        [languageCode: string]: {
+            letters?: string[][];
+            symbols?: string[][];
+            numbers?: string[][];
+            label?: string;
+        };
+    };
+    /** Currently selected language code */
+    currentLanguage?: string;
+    /** Callback when language changes */
+    onLanguageChange?: (languageCode: string) => void;
+    /** Show language switcher button */
+    showLanguageSwitcher?: boolean;
 }
 
 export declare interface VirtualKeyboardTheme {