reactjs-virtual-keyboard 1.0.2 → 2.0.0

package/dist/index.esm.js

@@ -1,190 +1,129 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import { useRef as A, useCallback as k, useEffect as $, useState as H } from "react";
-const B = (e, r, n = {}) => {
-  var s;
-  const { skipValueAssignment: t = !1 } = n;
-  if (!t) {
-    const l = Object.getPrototypeOf(e), c = (s = Object.getOwnPropertyDescriptor(l, "value")) == null ? void 0 : s.set;
-    c && c.call(e, r);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect, memo, useState } from "react";
+const setInputValueAndDispatchEvents = (input, value, options = {}) => {
+  var _a;
+  const { skipValueAssignment = false } = options;
+  if (!skipValueAssignment) {
+    const proto = Object.getPrototypeOf(input);
+    const valueSetter = (_a = Object.getOwnPropertyDescriptor(proto, "value")) == null ? void 0 : _a.set;
+    if (valueSetter) {
+      valueSetter.call(input, value);
+    }
   }
-  e.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0, cancelable: !0 }));
+  input.dispatchEvent(new InputEvent("input", { bubbles: true, cancelable: true }));
+  input.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));
 };
-function Y(e) {
-  return {
-    insertText: (t) => {
-      const s = e.current;
-      if (!s || s.readOnly || s.disabled) return;
-      const l = s.selectionStart, c = s.selectionEnd, o = l ?? s.value.length, u = c ?? s.value.length, f = s.scrollTop ?? 0, d = s.scrollLeft ?? 0, v = s.value.slice(0, o) + t + s.value.slice(u), m = o + t.length;
-      B(s, v), s.focus(), s.setSelectionRange(m, m), "scrollTop" in s && (s.scrollTop = f, s.scrollLeft = d);
-    },
-    backspace: () => {
-      const t = e.current;
-      if (!t || t.readOnly || t.disabled) return;
-      const s = t.selectionStart, l = t.selectionEnd, c = s ?? t.value.length, o = l ?? t.value.length, u = t.scrollTop ?? 0, f = t.scrollLeft ?? 0;
-      if (c !== o) {
-        const d = t.value.slice(0, c) + t.value.slice(o);
-        B(t, d), t.focus(), t.setSelectionRange(c, c);
-      } else if (c > 0) {
-        const d = t.value.slice(0, c - 1) + t.value.slice(c), v = c - 1;
-        B(t, d), t.focus(), t.setSelectionRange(v, v);
-      }
-      "scrollTop" in t && (t.scrollTop = u, t.scrollLeft = f);
-    }
-  };
-}
-function F(e, {
-  initialDelay: r = 500,
-  interval: n = 50,
-  shouldPreventDefault: t = !0
-} = {}) {
-  const s = A(), l = A(), c = k(() => {
-    s.current && (clearTimeout(s.current), s.current = void 0), l.current && (clearInterval(l.current), l.current = void 0);
-  }, []), o = k(() => {
-    e(), s.current = setTimeout(() => {
-      l.current = setInterval(e, n);
-    }, r);
-  }, [e, r, n]);
-  return {
-    onMouseDown: (u) => {
-      u.preventDefault(), o();
-    },
-    onTouchStart: (u) => {
-      t && u.preventDefault(), o();
-    },
-    onMouseUp: c,
-    onMouseLeave: c,
-    onTouchEnd: (u) => {
-      t && u.preventDefault(), c();
-    }
-  };
-}
-function G({
-  isInputFocused: e,
-  onBackspace: r,
-  onEnter: n,
-  onSpace: t,
-  onCapsToggle: s,
-  onKeyClick: l
-}) {
-  $(() => {
-    if (!e) return;
-    const c = (o) => {
-      const u = o.key;
-      switch (u) {
-        case "Backspace":
-          o.preventDefault(), o.stopPropagation(), r();
-          return;
-        case "Enter":
-          o.preventDefault(), n();
-          return;
-        case " ":
-          o.preventDefault(), t();
-          return;
-        case "CapsLock":
-          o.preventDefault(), s();
-          return;
-        default:
-          u.length === 1 && (o.preventDefault(), l(u));
-      }
-    };
-    return document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
-    };
-  }, [e, r, n, t, s, l]);
-}
-const X = 38, Z = 20, _ = "vk-keyboard-shift-transition", R = 300;
-let g = [], D = !1;
-function q() {
-  if (D) return;
-  const e = document.createElement("style");
-  e.id = "vk-keyboard-shift-styles", e.textContent = `
-    .${_} {
-      transition: transform ${R}ms ease-out;
+const validateValueUtil = (value, inputType) => {
+  switch (inputType) {
+    case "number":
+      return /^[0-9]*$/.test(value);
+    case "email":
+      return /^[a-zA-Z0-9@._+-]*$/.test(value);
+    case "tel":
+      return /^[0-9+\-() ]*$/.test(value);
+    case "url":
+      return /^[a-zA-Z0-9:/._-]*$/.test(value);
+    case "password":
+      return true;
+    default:
+      return true;
+  }
+};
+const getInitialLayout = (inputType, defaultLayout) => {
+  if (inputType === "number") {
+    return "numbers";
+  }
+  return defaultLayout;
+};
+const KEYBOARD_HEIGHT_VH = 38;
+const INPUT_PADDING = 20;
+const TRANSITION_CLASS = "vk-keyboard-shift-transition";
+const TRANSITION_DURATION = 300;
+let shiftedElements = [];
+let styleInjected = false;
+function injectStyles() {
+  if (styleInjected) return;
+  const style = document.createElement("style");
+  style.id = "vk-keyboard-shift-styles";
+  style.textContent = `
+    .${TRANSITION_CLASS} {
+      transition: transform ${TRANSITION_DURATION}ms ease-out;
       will-change: transform;
     }
-  `, document.head.appendChild(e), D = !0;
+  `;
+  document.head.appendChild(style);
+  styleInjected = true;
 }
-function Q(e) {
-  var r;
-  return e ? Array.from(((r = e.parentElement) == null ? void 0 : r.children) ?? []).filter(
-    (n) => {
-      if (n === e) return !1;
-      const { position: t } = window.getComputedStyle(n);
-      return t !== "fixed" && t !== "absolute";
+function findContentElements(keyboardContainerRef) {
+  var _a;
+  if (!keyboardContainerRef) return [];
+  return Array.from(((_a = keyboardContainerRef.parentElement) == null ? void 0 : _a.children) ?? []).filter(
+    (child) => {
+      if (child === keyboardContainerRef) return false;
+      const { position } = window.getComputedStyle(child);
+      return position !== "fixed" && position !== "absolute";
     }
-  ) : [];
+  );
 }
-function W(e) {
-  const r = e.getBoundingClientRect().bottom, n = window.innerHeight * (1 - X / 100), t = r + Z - n;
-  return t > 0 ? t : 0;
+function calculateShiftAmount(input) {
+  const inputBottom = input.getBoundingClientRect().bottom;
+  const visibleHeight = window.innerHeight * (1 - KEYBOARD_HEIGHT_VH / 100);
+  const overflow = inputBottom + INPUT_PADDING - visibleHeight;
+  return overflow > 0 ? overflow : 0;
 }
-function J(e, r) {
-  g.length > 0 && C();
-  const n = W(e);
-  if (n === 0) return;
-  const t = Q(r);
-  if (t.length !== 0) {
-    q(), g = t;
-    for (const s of t)
-      s.classList.add(_), s.style.transform = `translateY(-${n}px)`;
+function scrollInputIntoView(input, keyboardContainerRef) {
+  if (shiftedElements.length > 0) resetScrollPosition();
+  const shiftAmount = calculateShiftAmount(input);
+  if (shiftAmount === 0) return;
+  const contentElements = findContentElements(keyboardContainerRef);
+  if (contentElements.length === 0) return;
+  injectStyles();
+  shiftedElements = contentElements;
+  for (const element of contentElements) {
+    element.classList.add(TRANSITION_CLASS);
+    element.style.transform = `translateY(-${shiftAmount}px)`;
   }
 }
-function C() {
-  if (g.length === 0) return;
-  for (const r of g)
-    document.body.contains(r) && (r.style.transform = "translateY(0)");
-  const e = [...g];
+function resetScrollPosition() {
+  if (shiftedElements.length === 0) return;
+  for (const element of shiftedElements) {
+    if (document.body.contains(element)) {
+      element.style.transform = "translateY(0)";
+    }
+  }
+  const elementsToCleanup = [...shiftedElements];
   setTimeout(() => {
-    for (const r of e)
-      document.body.contains(r) && r.classList.remove(_);
-  }, R), g = [];
-}
-function V(e) {
-  const r = k((t) => {
-    setTimeout(() => {
-      e != null && e.current && J(t, e.current);
-    }, 0);
-  }, [e]), n = k(() => {
-    C();
-  }, []);
-  return $(() => () => {
-    C();
-  }, []), {
-    scrollInput: r,
-    resetScroll: n
-  };
+    for (const element of elementsToCleanup) {
+      if (document.body.contains(element)) {
+        element.classList.remove(TRANSITION_CLASS);
+      }
+    }
+  }, TRANSITION_DURATION);
+  shiftedElements = [];
 }
-const ee = (e, r) => {
-  switch (r) {
-    case "number":
-      return /^[0-9]*$/.test(e);
-    case "email":
-      return /^[a-zA-Z0-9@._+-]*$/.test(e);
-    case "tel":
-      return /^[0-9+\-() ]*$/.test(e);
-    case "url":
-      return /^[a-zA-Z0-9:/._-]*$/.test(e);
-    case "password":
-      return !0;
-    default:
-      return !0;
+const onEnterClickUtil = (focusedInputRef) => {
+  var _a;
+  if (focusedInputRef.current) {
+    const input = focusedInputRef.current;
+    input.blur();
+    (_a = input.form) == null ? void 0 : _a.submit();
   }
-}, K = (e, r) => e === "number" ? "numbers" : r, te = (e) => {
-  var r;
-  if (e.current) {
-    const n = e.current;
-    n.blur(), (r = n.form) == null || r.submit();
+};
+const handleValueChangeUtil = (focusedInputRef, value) => {
+  const input = focusedInputRef.current;
+  if (!input) return;
+  setInputValueAndDispatchEvents(input, value);
+};
+const validateFocusInputs = (event) => {
+  const target = event.target;
+  const isInput = target.tagName === "INPUT";
+  const isTextarea = target.tagName === "TEXTAREA";
+  if (isTextarea) {
+    return target;
   }
-}, me = (e, r) => {
-  const n = e.current;
-  n && B(n, r);
-}, M = (e) => {
-  const r = e.target, n = r.tagName === "INPUT";
-  if (r.tagName === "TEXTAREA")
-    return r;
-  if (n) {
-    const s = r;
-    return [
+  if (isInput) {
+    const input = target;
+    const excludedTypes = [
       "checkbox",
       "radio",
       "range",
@@ -199,25 +138,118 @@ const ee = (e, r) => {
       "reset",
       "button",
       "image"
-    ].includes(s.type) ? null : s;
+    ];
+    if (excludedTypes.includes(input.type)) return null;
+    return input;
   }
   return null;
-}, ne = [
+};
+function createCaretManager(getInputRef) {
+  const insertText = (text) => {
+    const input = getInputRef();
+    if (!input) return;
+    if (input.readOnly || input.disabled) return;
+    const startRaw = input.selectionStart;
+    const endRaw = input.selectionEnd;
+    const start = startRaw == null ? input.value.length : startRaw;
+    const end = endRaw == null ? input.value.length : endRaw;
+    const scrollTop = input.scrollTop ?? 0;
+    const scrollLeft = input.scrollLeft ?? 0;
+    const newValue = input.value.slice(0, start) + text + input.value.slice(end);
+    const caretAfter = start + text.length;
+    setInputValueAndDispatchEvents(input, newValue);
+    input.focus();
+    input.setSelectionRange(caretAfter, caretAfter);
+    if ("scrollTop" in input) {
+      input.scrollTop = scrollTop;
+      input.scrollLeft = scrollLeft;
+    }
+  };
+  const backspace = () => {
+    const input = getInputRef();
+    if (!input) return;
+    if (input.readOnly || input.disabled) return;
+    const startRaw = input.selectionStart;
+    const endRaw = input.selectionEnd;
+    const start = startRaw == null ? input.value.length : startRaw;
+    const end = endRaw == null ? input.value.length : endRaw;
+    const scrollTop = input.scrollTop ?? 0;
+    const scrollLeft = input.scrollLeft ?? 0;
+    if (start !== end) {
+      const newValue = input.value.slice(0, start) + input.value.slice(end);
+      setInputValueAndDispatchEvents(input, newValue);
+      input.focus();
+      input.setSelectionRange(start, start);
+    } else if (start > 0) {
+      const newValue = input.value.slice(0, start - 1) + input.value.slice(start);
+      const newCaret = start - 1;
+      setInputValueAndDispatchEvents(input, newValue);
+      input.focus();
+      input.setSelectionRange(newCaret, newCaret);
+    }
+    if ("scrollTop" in input) {
+      input.scrollTop = scrollTop;
+      input.scrollLeft = scrollLeft;
+    }
+  };
+  return {
+    insertText,
+    backspace
+  };
+}
+function setupHardwareKeyboard(handlers) {
+  const { onBackspace, onEnter, onSpace, onCapsToggle, onKeyClick } = handlers;
+  const handleKeyboardKeyDown = (event) => {
+    const key = event.key;
+    switch (key) {
+      case "Backspace":
+        event.preventDefault();
+        event.stopPropagation();
+        onBackspace();
+        return;
+      case "Enter":
+        event.preventDefault();
+        onEnter();
+        return;
+      case " ":
+        event.preventDefault();
+        onSpace();
+        return;
+      case "CapsLock":
+        event.preventDefault();
+        onCapsToggle();
+        return;
+      default:
+        if (key.length === 1) {
+          event.preventDefault();
+          onKeyClick(key);
+        }
+    }
+  };
+  document.addEventListener("keydown", handleKeyboardKeyDown);
+  return () => {
+    document.removeEventListener("keydown", handleKeyboardKeyDown);
+  };
+}
+const QWERTY_LAYOUT = [
   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
   ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
   ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
   ["z", "x", "c", "v", "b", "n", "m"]
-], se = [
+];
+const SYMBOLS_LAYOUT = [
   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
   ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
   ["-", "_", "=", "+", "[", "]", "{", "}", "\\", "|"],
   [";", ":", '"', "'", ",", ".", "<", ">", "/", "?"]
-], re = [
+];
+const NUMBERS_LAYOUT = [
   ["7", "8", "9", "#"],
   ["4", "5", "6", "-"],
   ["1", "2", "3"],
   [",", "0", "."]
-], ve = {
+];
+const DEFAULT_THEME = {
   backgroundColor: "#1a1a1a",
   keyColor: "#444444",
   keyTextColor: "#ffffff",
@@ -227,7 +259,8 @@ const ee = (e, r) => {
   keyBorderRadius: "0.5vw",
   keyFontSize: "32px",
   keyHeight: "100%"
-}, U = (e) => /* @__PURE__ */ a(
+};
+const BackspaceIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -235,10 +268,11 @@ const ee = (e, r) => {
     fill: "currentColor",
     width: "1em",
     height: "1em",
-    ...e,
-    children: /* @__PURE__ */ a("path", { d: "M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14zm-11.59-2L14 13.41 17.59 17 19 15.59 15.41 12 19 8.41 17.59 7 14 10.59 10.41 7 9 8.41 12.59 12 9 15.59z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14zm-11.59-2L14 13.41 17.59 17 19 15.59 15.41 12 19 8.41 17.59 7 14 10.59 10.41 7 9 8.41 12.59 12 9 15.59z" })
   }
-), j = (e) => /* @__PURE__ */ a(
+);
+const EnterIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -246,10 +280,11 @@ const ee = (e, r) => {
     fill: "currentColor",
     width: "1em",
     height: "1em",
-    ...e,
-    children: /* @__PURE__ */ a("path", { d: "M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z" })
   }
-), ce = (e) => /* @__PURE__ */ a(
+);
+const SpacebarIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -257,10 +292,11 @@ const ee = (e, r) => {
     fill: "currentColor",
     width: "1em",
     height: "1em",
-    ...e,
-    children: /* @__PURE__ */ a("path", { d: "M18 9v4H6V9H4v6h16V9z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M18 9v4H6V9H4v6h16V9z" })
   }
-), oe = (e) => /* @__PURE__ */ a(
+);
+const CapsLockIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -269,137 +305,211 @@ const ee = (e, r) => {
     width: "1em",
     height: "1em",
     style: { transform: "rotate(270deg)" },
-    ...e,
-    children: /* @__PURE__ */ a("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" })
   }
-), T = ({
-  type: e,
-  icon: r,
-  onClick: n,
-  extraClass: t = "",
-  text: s,
-  capsLock: l = !1,
-  enableContinuousPress: c = !1
-}) => {
-  const o = e === "caps" && l, u = [
+);
+function useContinuousPress(onPress, {
+  initialDelay = 500,
+  interval = 50,
+  shouldPreventDefault = true
+} = {}) {
+  const timeoutRef = useRef();
+  const intervalRef = useRef();
+  const clear = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = void 0;
+    }
+  }, []);
+  const start = useCallback(() => {
+    onPress();
+    timeoutRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(onPress, interval);
+    }, initialDelay);
+  }, [onPress, initialDelay, interval]);
+  return {
+    onMouseDown: (e) => {
+      e.preventDefault();
+      start();
+    },
+    onTouchStart: (e) => {
+      if (shouldPreventDefault) e.preventDefault();
+      start();
+    },
+    onMouseUp: clear,
+    onMouseLeave: clear,
+    onTouchEnd: (e) => {
+      if (shouldPreventDefault) e.preventDefault();
+      clear();
+    }
+  };
+}
+function useKeyboardScroll(keyboardContainerRef) {
+  const handleScrollInput = useCallback((input) => {
+    setTimeout(() => {
+      if (!(keyboardContainerRef == null ? void 0 : keyboardContainerRef.current)) return;
+      scrollInputIntoView(input, keyboardContainerRef.current);
+    }, 0);
+  }, [keyboardContainerRef]);
+  const handleResetScroll = useCallback(() => {
+    resetScrollPosition();
+  }, []);
+  useEffect(() => {
+    return () => {
+      resetScrollPosition();
+    };
+  }, []);
+  return {
+    scrollInput: handleScrollInput,
+    resetScroll: handleResetScroll
+  };
+}
+const SpecialKey = memo((props) => {
+  const {
+    type,
+    icon,
+    onClick,
+    extraClass = "",
+    text,
+    capsLock = false,
+    enableContinuousPress = false
+  } = props;
+  const isCapsLockActive = type === "caps" && capsLock;
+  const keyClasses = [
     "vk-key",
-    `vk-key--${t}`,
-    o ? "vk-key--caps-active" : ""
-  ].filter(Boolean).join(" "), f = F(n, {
+    `vk-key--${extraClass}`,
+    isCapsLockActive ? "vk-key--caps-active" : ""
+  ].filter(Boolean).join(" ");
+  const continuousPressHandlers = useContinuousPress(onClick, {
     initialDelay: 500,
     interval: 50
-  }), d = c ? f : { onClick: n };
-  return /* @__PURE__ */ L(
+  });
+  const buttonHandlers = enableContinuousPress ? continuousPressHandlers : { onClick };
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      className: u,
-      "data-testid": `${e}${o ? "-active" : ""}`,
-      "data-key": o ? `${e}-active` : e,
-      ...d,
+      className: keyClasses,
+      "data-testid": `${type}${isCapsLockActive ? "-active" : ""}`,
+      "data-key": isCapsLockActive ? `${type}-active` : type,
+      ...buttonHandlers,
       children: [
-        r && r,
-        s && /* @__PURE__ */ a("span", { className: "vk-key__text", children: s })
+        icon && icon,
+        text && /* @__PURE__ */ jsx("span", { className: "vk-key__text", children: text })
       ]
     }
   );
-}, z = ({ keyValue: e, onClick: r, className: n = "" }) => {
-  const t = ["vk-key", n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(
+});
+SpecialKey.displayName = "SpecialKey";
+const VirtualKey = memo(({ keyValue, onClick, className = "" }) => {
+  const keyClasses = ["vk-key", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      className: t,
-      onClick: () => r(e),
-      "data-testid": e,
-      children: e
+      className: keyClasses,
+      onClick: () => onClick(keyValue),
+      "data-testid": keyValue,
+      children: keyValue
     }
   );
-}, O = ({ children: e, className: r = "" }) => {
-  const n = ["vk-row", r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: n, children: e });
-}, le = ({
-  currentLayoutData: e,
-  onBackspace: r,
-  onEnter: n,
-  onKeyClick: t,
-  capsLock: s
-}) => /* @__PURE__ */ a("div", { className: "vk-layout vk-layout--numbers", "data-testid": "keyboard-layout", children: e == null ? void 0 : e.map((l, c) => /* @__PURE__ */ L(O, { children: [
-  l == null ? void 0 : l.map((o, u) => /* @__PURE__ */ a(
-    z,
-    {
-      keyValue: o,
-      onClick: t
-    },
-    `num-${c}-${u}-${o}`
-  )),
-  c === 3 && /* @__PURE__ */ a(
-    T,
-    {
-      type: "enter",
-      icon: /* @__PURE__ */ a(j, {}),
-      onClick: n,
-      extraClass: "enter-num",
-      text: "Enter",
-      capsLock: s
-    },
-    "enter-num"
-  ),
-  c === 2 && /* @__PURE__ */ a(
-    T,
-    {
-      type: "backspace",
-      icon: /* @__PURE__ */ a(U, {}),
-      onClick: r,
-      extraClass: "backspace-num",
-      text: "Backspace",
-      capsLock: s,
-      enableContinuousPress: !0
-    },
-    "backspace-num"
-  )
-] }, `num-row-${c}`)) }), ae = ({
-  inputType: e,
-  currentLayoutData: r,
-  onBackspace: n,
-  onEnter: t,
-  onSpace: s,
-  onCapsToggle: l,
-  onLayoutToggle: c,
-  onKeyClick: o,
-  capsLock: u,
-  currentLayout: f
+});
+VirtualKey.displayName = "VirtualKey";
+const KeyboardRow = ({ children, className = "" }) => {
+  const rowClasses = ["vk-row", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: rowClasses, children });
+};
+const NumbersLayout = ({
+  currentLayoutData,
+  onBackspace,
+  onEnter,
+  onKeyClick,
+  capsLock
 }) => {
-  const d = (m) => {
-    switch (m) {
+  return /* @__PURE__ */ jsx("div", { className: "vk-layout vk-layout--numbers", "data-testid": "keyboard-layout", children: currentLayoutData == null ? void 0 : currentLayoutData.map((row, rowIndex) => /* @__PURE__ */ jsxs(KeyboardRow, { children: [
+    row == null ? void 0 : row.map((key, keyIndex) => /* @__PURE__ */ jsx(
+      VirtualKey,
+      {
+        keyValue: key,
+        onClick: onKeyClick
+      },
+      `num-${rowIndex}-${keyIndex}-${key}`
+    )),
+    rowIndex === 3 && /* @__PURE__ */ jsx(
+      SpecialKey,
+      {
+        type: "enter",
+        icon: /* @__PURE__ */ jsx(EnterIcon, {}),
+        onClick: onEnter,
+        extraClass: "enter-num",
+        text: "Enter",
+        capsLock
+      },
+      "enter-num"
+    ),
+    rowIndex === 2 && /* @__PURE__ */ jsx(
+      SpecialKey,
+      {
+        type: "backspace",
+        icon: /* @__PURE__ */ jsx(BackspaceIcon, {}),
+        onClick: onBackspace,
+        extraClass: "backspace-num",
+        text: "Backspace",
+        capsLock,
+        enableContinuousPress: true
+      },
+      "backspace-num"
+    )
+  ] }, `num-row-${rowIndex}`)) });
+};
+const TextLayout = ({
+  inputType,
+  currentLayoutData,
+  onBackspace,
+  onEnter,
+  onSpace,
+  onCapsToggle,
+  onLayoutToggle,
+  onKeyClick,
+  capsLock,
+  currentLayout
+}) => {
+  const renderSpecialKeysLeft = (rowIndex) => {
+    switch (rowIndex) {
       case 3:
-        return f === "letters" && /* @__PURE__ */ a(
-          T,
+        return currentLayout === "letters" && /* @__PURE__ */ jsx(
+          SpecialKey,
           {
             type: "caps",
-            icon: /* @__PURE__ */ a(oe, {}),
-            onClick: l,
+            icon: /* @__PURE__ */ jsx(CapsLockIcon, {}),
+            onClick: onCapsToggle,
             extraClass: "capsLock",
             text: "Caps Lock",
-            capsLock: u
+            capsLock
           },
           "caps"
         );
       default:
         return null;
     }
-  }, v = (m) => {
-    switch (m) {
+  };
+  const renderSpecialKeysRight = (rowIndex) => {
+    switch (rowIndex) {
       case 3:
-        return /* @__PURE__ */ a(
-          T,
+        return /* @__PURE__ */ jsx(
+          SpecialKey,
           {
             type: "backspace",
-            icon: /* @__PURE__ */ a(U, {}),
-            onClick: n,
+            icon: /* @__PURE__ */ jsx(BackspaceIcon, {}),
+            onClick: onBackspace,
             extraClass: "backspace",
             text: "Backspace",
-            enableContinuousPress: !0
+            enableContinuousPress: true
           },
           "backspace"
         );
@@ -407,72 +517,72 @@ const ee = (e, r) => {
         return null;
     }
   };
-  return /* @__PURE__ */ L("div", { className: "vk-layout vk-layout--text", "data-testid": "keyboard-layout", children: [
-    r == null ? void 0 : r.map((m, h) => /* @__PURE__ */ L(O, { children: [
-      d(h),
-      m.map((w, y) => {
-        const b = u ? w.toUpperCase() : w.toLowerCase();
-        return /* @__PURE__ */ a(
-          z,
+  return /* @__PURE__ */ jsxs("div", { className: "vk-layout vk-layout--text", "data-testid": "keyboard-layout", children: [
+    currentLayoutData == null ? void 0 : currentLayoutData.map((row, rowIndex) => /* @__PURE__ */ jsxs(KeyboardRow, { children: [
+      renderSpecialKeysLeft(rowIndex),
+      row.map((key, keyIndex) => {
+        const displayKey = capsLock ? key.toUpperCase() : key.toLowerCase();
+        return /* @__PURE__ */ jsx(
+          VirtualKey,
           {
-            keyValue: b,
-            onClick: o
+            keyValue: displayKey,
+            onClick: onKeyClick
           },
-          `${h}-${y}-${w}`
+          `${rowIndex}-${keyIndex}-${key}`
         );
       }),
-      v(h)
-    ] }, `row-${h}`)),
-    /* @__PURE__ */ L(O, { children: [
-      /* @__PURE__ */ a(
-        T,
+      renderSpecialKeysRight(rowIndex)
+    ] }, `row-${rowIndex}`)),
+    /* @__PURE__ */ jsxs(KeyboardRow, { children: [
+      /* @__PURE__ */ jsx(
+        SpecialKey,
         {
           type: "layout",
-          icon: f === "letters" ? "&123" : "ABC",
-          onClick: c,
+          icon: currentLayout === "letters" ? "&123" : "ABC",
+          onClick: onLayoutToggle,
           extraClass: "layout",
           text: ""
         },
         "layout"
       ),
-      e === "email" && /* @__PURE__ */ a(
-        T,
+      inputType === "email" && /* @__PURE__ */ jsx(
+        SpecialKey,
         {
           type: "dot",
-          onClick: () => o("."),
+          onClick: () => onKeyClick("."),
           extraClass: "dot",
           icon: "."
         },
         "dot"
       ),
-      /* @__PURE__ */ a(
-        T,
+      /* @__PURE__ */ jsx(
+        SpecialKey,
         {
           type: "space",
-          icon: /* @__PURE__ */ a(ce, {}),
-          onClick: s,
+          icon: /* @__PURE__ */ jsx(SpacebarIcon, {}),
+          onClick: onSpace,
           extraClass: "space",
           text: "Space"
         },
         "space"
       ),
-      e === "email" && /* @__PURE__ */ a(
-        T,
+      inputType === "email" && /* @__PURE__ */ jsx(
+        SpecialKey,
         {
           type: "at",
           icon: "@",
-          onClick: () => o("@"),
+          onClick: () => onKeyClick("@"),
           extraClass: "at",
           text: ""
         },
         "at"
       ),
-      /* @__PURE__ */ a(
-        T,
+      /* @__PURE__ */ jsx(
+        SpecialKey,
         {
           type: "enter",
-          icon: /* @__PURE__ */ a(j, {}),
-          onClick: t,
+          icon: /* @__PURE__ */ jsx(EnterIcon, {}),
+          onClick: onEnter,
           extraClass: "enter",
           text: "Enter"
         },
@@ -480,199 +590,299 @@ const ee = (e, r) => {
       )
     ] })
   ] });
-}, ue = ({
-  currentLayout: e,
-  capsLock: r,
-  onKeyClick: n,
-  onBackspace: t,
-  onEnter: s,
-  onSpace: l,
-  onCapsToggle: c,
-  onLayoutToggle: o,
-  inputType: u
+};
+const KeyboardLayout = ({
+  currentLayout,
+  capsLock,
+  onKeyClick,
+  onBackspace,
+  onEnter,
+  onSpace,
+  onCapsToggle,
+  onLayoutToggle,
+  inputType,
+  customLayouts
 }) => {
-  const f = e === "letters" ? ne : e === "symbols" ? se : re;
-  return e === "numbers" ? /* @__PURE__ */ a(
-    le,
-    {
-      currentLayoutData: f,
-      onBackspace: t,
-      onEnter: s,
-      onKeyClick: n,
-      capsLock: r,
-      currentLayout: e
-    }
-  ) : /* @__PURE__ */ a(
-    ae,
+  const currentLayoutData = currentLayout === "letters" ? (customLayouts == null ? void 0 : customLayouts.letters) || QWERTY_LAYOUT : currentLayout === "symbols" ? (customLayouts == null ? void 0 : customLayouts.symbols) || SYMBOLS_LAYOUT : (customLayouts == null ? void 0 : customLayouts.numbers) || NUMBERS_LAYOUT;
+  if (currentLayout === "numbers") {
+    return /* @__PURE__ */ jsx(
+      NumbersLayout,
+      {
+        currentLayoutData,
+        onBackspace,
+        onEnter,
+        onKeyClick,
+        capsLock,
+        currentLayout
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TextLayout,
     {
-      inputType: u,
-      currentLayoutData: f,
-      onBackspace: t,
-      onEnter: s,
-      onSpace: l,
-      onCapsToggle: c,
-      onLayoutToggle: o,
-      onKeyClick: n,
-      capsLock: r,
-      currentLayout: e
+      inputType,
+      currentLayoutData,
+      onBackspace,
+      onEnter,
+      onSpace,
+      onCapsToggle,
+      onLayoutToggle,
+      onKeyClick,
+      capsLock,
+      currentLayout
     }
   );
-}, ie = ({
-  children: e,
-  className: r = ""
+};
+const VirtualKeyboardContainer = ({
+  children,
+  className = ""
 }) => {
-  const n = (l) => {
-    l.preventDefault();
-  }, t = (l) => {
-    l.preventDefault(), l.stopPropagation();
-  }, s = ["vk-container", r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const containerClasses = ["vk-container", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: s,
-      onMouseDown: n,
-      onClick: t,
+      className: containerClasses,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
       "data-testid": "keyboard-container",
-      children: e
+      children
     }
   );
-}, de = ({
-  focusedInputRef: e,
-  isInputFocused: r,
-  inputType: n = "text",
-  onEnterClick: t,
-  onChange: s,
-  className: l,
-  defaultLayout: c = "letters",
-  validate: o
+};
+const VirtualKeyboard = ({
+  focusedInputRef,
+  isInputFocused,
+  inputType = "text",
+  onEnterClick,
+  onChange,
+  className,
+  defaultLayout = "letters",
+  validate,
+  syncWithHardwareKeyboard = true,
+  customLayouts,
+  languages,
+  currentLanguage,
+  onLanguageChange,
+  showLanguageSwitcher = false
 }) => {
-  const [u, f] = H(!1), { insertText: d, backspace: v } = Y(e), [m, h] = H(
-    () => K(n, c)
-  ), w = k(
-    (p) => {
-      var x;
-      o && !o(p) || ee(p, n) && (d(p), s == null || s(((x = e.current) == null ? void 0 : x.value) ?? ""));
+  const [capsLock, setCapsLock] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState(currentLanguage || Object.keys(languages || {})[0] || "en");
+  const { insertText, backspace } = createCaretManager(() => focusedInputRef.current);
+  const [currentLayout, setCurrentLayout] = useState(
+    () => getInitialLayout(inputType, defaultLayout)
+  );
+  const updateValue = useCallback(
+    (next) => {
+      var _a;
+      if (validate && !validate(next)) return;
+      if (!validateValueUtil(next, inputType)) return;
+      insertText(next);
+      onChange == null ? void 0 : onChange(((_a = focusedInputRef.current) == null ? void 0 : _a.value) ?? "");
     },
-    [e, n, d, s, o]
-  ), y = k(
-    (p) => {
-      w(p);
+    [focusedInputRef, inputType, insertText, onChange, validate]
+  );
+  const handleKeyClick = useCallback(
+    (key) => {
+      updateValue(key);
     },
-    [w]
-  ), b = k(() => {
-    var p, x;
-    ((p = e.current) == null ? void 0 : p.value.length) !== 0 && (v(), s == null || s(((x = e.current) == null ? void 0 : x.value) ?? ""));
-  }, [v, e, s]), S = k(() => {
-    t == null || t();
-  }, [t]), i = k(() => {
-    w(" ");
-  }, [w]), E = k(() => {
-    f((p) => !p);
-  }, []), I = k(() => {
-    n !== "number" && h((p) => p === "letters" ? "symbols" : "letters");
-  }, [n]);
-  $(() => {
-    h(K(n, c));
-  }, [n, c]);
-  const N = {
-    onBackspace: b,
-    onEnter: S,
-    onSpace: i,
-    onCapsToggle: E,
-    onKeyClick: y
+    [updateValue]
+  );
+  const handleBackspace = useCallback(() => {
+    var _a, _b;
+    if (((_a = focusedInputRef.current) == null ? void 0 : _a.value.length) === 0) return;
+    backspace();
+    onChange == null ? void 0 : onChange(((_b = focusedInputRef.current) == null ? void 0 : _b.value) ?? "");
+  }, [backspace, focusedInputRef, onChange]);
+  const handleEnter = useCallback(() => {
+    onEnterClick == null ? void 0 : onEnterClick();
+  }, [onEnterClick]);
+  const handleSpace = useCallback(() => {
+    var _a;
+    updateValue(" ");
+    insertText(" ");
+    onChange == null ? void 0 : onChange(((_a = focusedInputRef.current) == null ? void 0 : _a.value) || "");
+  }, [insertText, onChange, focusedInputRef]);
+  const handleCapsToggle = useCallback(() => {
+    setCapsLock((prev) => !prev);
+  }, []);
+  useEffect(() => {
+    setCurrentLayout(getInitialLayout(inputType, defaultLayout));
+  }, [inputType, defaultLayout]);
+  const keysHandlers = {
+    onBackspace: handleBackspace,
+    onEnter: handleEnter,
+    onSpace: handleSpace,
+    onCapsToggle: handleCapsToggle,
+    onKeyClick: handleKeyClick
   };
-  return G({
-    isInputFocused: r,
-    ...N
-  }), /* @__PURE__ */ a(ie, { className: l, children: /* @__PURE__ */ a(
-    ue,
-    {
-      currentLayout: m,
-      capsLock: u,
-      ...N,
-      onLayoutToggle: I,
-      inputType: n
-    }
-  ) });
-}, he = ({
-  enabled: e = !0,
-  className: r,
-  onVisibilityChange: n,
-  onEnterClick: t,
-  onChange: s
+  useEffect(() => {
+    if (!isInputFocused || !syncWithHardwareKeyboard) return;
+    return setupHardwareKeyboard(keysHandlers);
+  }, [
+    isInputFocused,
+    syncWithHardwareKeyboard,
+    handleKeyClick,
+    handleBackspace,
+    handleEnter,
+    handleSpace,
+    handleCapsToggle
+  ]);
+  const handleLanguageChange = (lang) => {
+    setSelectedLanguage(lang);
+    onLanguageChange == null ? void 0 : onLanguageChange(lang);
+  };
+  const activeLayouts = (languages == null ? void 0 : languages[selectedLanguage]) || customLayouts;
+  return /* @__PURE__ */ jsxs(VirtualKeyboardContainer, { className, children: [
+    showLanguageSwitcher && languages && Object.keys(languages).length > 1 && /* @__PURE__ */ jsx("div", { className: "vk-language-switcher", children: Object.entries(languages).map(([code, config]) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `vk-lang-btn ${selectedLanguage === code ? "active" : ""}`,
+        onClick: () => handleLanguageChange(code),
+        children: config.label || code.toUpperCase()
+      },
+      code
+    )) }),
+    /* @__PURE__ */ jsx(
+      KeyboardLayout,
+      {
+        capsLock,
+        currentLayout,
+        onKeyClick: handleKeyClick,
+        onBackspace: handleBackspace,
+        onEnter: handleEnter,
+        onSpace: handleSpace,
+        onCapsToggle: handleCapsToggle,
+        onLayoutToggle: () => setCurrentLayout((prev) => prev === "letters" ? "symbols" : "letters"),
+        inputType,
+        customLayouts: activeLayouts
+      }
+    )
+  ] });
+};
+const GlobalVirtualKeyboard = ({
+  enabled = true,
+  className,
+  onVisibilityChange,
+  onEnterClick,
+  onChange
 }) => {
-  const l = A(null), [c, o] = H(!1), [u, f] = H("text"), d = A(null), v = A("text"), { scrollInput: m, resetScroll: h } = V(l);
-  $(() => {
-    if (!e) {
-      c && (setTimeout(() => {
-        o(!1);
-      }, 0), n == null || n(!1));
+  const keyboardContainerRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [inputType, setInputType] = useState("text");
+  const focusedInputRef = useRef(null);
+  const originalInputTypeRef = useRef("text");
+  const { scrollInput, resetScroll } = useKeyboardScroll(keyboardContainerRef);
+  useEffect(() => {
+    if (!enabled) {
+      if (isVisible) {
+        setTimeout(() => {
+          setIsVisible(false);
+        }, 0);
+        onVisibilityChange == null ? void 0 : onVisibilityChange(false);
+      }
       return;
     }
-    const y = (S) => {
-      const i = M(S);
-      if (!i) return;
-      const E = i.tagName === "TEXTAREA", I = E ? "text" : i.type;
-      if (f(I), o(!0), n == null || n(!0), d.current = i, !E && (v.current = i.type, i.type !== "text")) {
-        const N = i.selectionStart, p = i.selectionEnd;
-        i.type = "text";
-        const x = N ?? i.value.length, P = p ?? x;
-        i.setSelectionRange(x, P);
+    const handleFocus = (event) => {
+      const input = validateFocusInputs(event);
+      if (!input) return;
+      const isTextarea = input.tagName === "TEXTAREA";
+      const detectedInputType = isTextarea ? "text" : input.type;
+      setInputType(detectedInputType);
+      setIsVisible(true);
+      onVisibilityChange == null ? void 0 : onVisibilityChange(true);
+      focusedInputRef.current = input;
+      if (!isTextarea) {
+        originalInputTypeRef.current = input.type;
+        if (input.type !== "text") {
+          const selectionStart = input.selectionStart;
+          const selectionEnd = input.selectionEnd;
+          input.type = "text";
+          const caretPos = selectionStart ?? input.value.length;
+          const caretEnd = selectionEnd ?? caretPos;
+          input.setSelectionRange(caretPos, caretEnd);
+        }
       }
-      m(i);
-    }, b = (S) => {
-      const i = M(S);
-      if (!i) return;
-      i.tagName === "TEXTAREA" || (i.type = v.current), d.current === i && (d.current = null, o(!1), n == null || n(!1), h());
+      scrollInput(input);
     };
-    return document.addEventListener("focusin", y, !0), document.addEventListener("focusout", b, !0), () => {
-      document.removeEventListener("focusin", y, !0), document.removeEventListener("focusout", b, !0);
+    const handleBlur = (event) => {
+      const input = validateFocusInputs(event);
+      if (!input) return;
+      const isTextarea = input.tagName === "TEXTAREA";
+      if (!isTextarea) {
+        input.type = originalInputTypeRef.current;
+      }
+      if (focusedInputRef.current === input) {
+        focusedInputRef.current = null;
+        setIsVisible(false);
+        onVisibilityChange == null ? void 0 : onVisibilityChange(false);
+        resetScroll();
+      }
+    };
+    document.addEventListener("focusin", handleFocus, true);
+    document.addEventListener("focusout", handleBlur, true);
+    return () => {
+      document.removeEventListener("focusin", handleFocus, true);
+      document.removeEventListener("focusout", handleBlur, true);
     };
-  }, [e, m, h, n]);
-  const w = () => {
-    o(!1), n == null || n(!1), te(d), t == null || t(), h();
+  }, [enabled, scrollInput, resetScroll, onVisibilityChange]);
+  const handleEnterClick = () => {
+    setIsVisible(false);
+    onVisibilityChange == null ? void 0 : onVisibilityChange(false);
+    onEnterClickUtil(focusedInputRef);
+    onEnterClick == null ? void 0 : onEnterClick();
+    resetScroll();
   };
-  return !c || !e ? null : /* @__PURE__ */ a("span", { ref: l, children: /* @__PURE__ */ a(
-    de,
+  if (!isVisible || !enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { ref: keyboardContainerRef, children: /* @__PURE__ */ jsx(
+    VirtualKeyboard,
     {
-      focusedInputRef: d,
-      isInputFocused: c,
-      inputType: u,
-      onEnterClick: w,
-      onChange: s,
-      className: r
+      focusedInputRef,
+      isInputFocused: isVisible,
+      inputType,
+      onEnterClick: handleEnterClick,
+      onChange,
+      className
     }
   ) });
 };
 export {
-  U as BackspaceIcon,
-  oe as CapsLockIcon,
-  ve as DEFAULT_THEME,
-  j as EnterIcon,
-  he as GlobalVirtualKeyboard,
-  ue as KeyboardLayout,
-  O as KeyboardRow,
-  re as NUMBERS_LAYOUT,
-  le as NumbersLayout,
-  ne as QWERTY_LAYOUT,
-  se as SYMBOLS_LAYOUT,
-  ce as SpacebarIcon,
-  T as SpecialKey,
-  ae as TextLayout,
-  z as VirtualKey,
-  de as VirtualKeyboard,
-  ie as VirtualKeyboardContainer,
-  K as getInitialLayout,
-  me as handleValueChangeUtil,
-  te as onEnterClickUtil,
-  C as resetScrollPosition,
-  J as scrollInputIntoView,
-  B as setInputValueAndDispatchEvents,
-  Y as useCaretManager,
-  F as useContinuousPress,
-  G as useHardwareKeyboard,
-  V as useKeyboardScroll,
-  M as validateFocusInputs,
-  ee as validateValueUtil
+  BackspaceIcon,
+  CapsLockIcon,
+  DEFAULT_THEME,
+  EnterIcon,
+  GlobalVirtualKeyboard,
+  KeyboardLayout,
+  KeyboardRow,
+  NUMBERS_LAYOUT,
+  NumbersLayout,
+  QWERTY_LAYOUT,
+  SYMBOLS_LAYOUT,
+  SpacebarIcon,
+  SpecialKey,
+  TextLayout,
+  VirtualKey,
+  VirtualKeyboard,
+  VirtualKeyboardContainer,
+  createCaretManager,
+  getInitialLayout,
+  handleValueChangeUtil,
+  onEnterClickUtil,
+  resetScrollPosition,
+  scrollInputIntoView,
+  setInputValueAndDispatchEvents,
+  setupHardwareKeyboard,
+  useContinuousPress,
+  useKeyboardScroll,
+  validateFocusInputs,
+  validateValueUtil
 };
 //# sourceMappingURL=index.esm.js.map