reactjs-virtual-keyboard 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,678 @@
+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);
+  }
+  e.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0, cancelable: !0 }));
+};
+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;
+      will-change: transform;
+    }
+  `, document.head.appendChild(e), D = !0;
+}
+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 W(e) {
+  const r = e.getBoundingClientRect().bottom, n = window.innerHeight * (1 - X / 100), t = r + Z - n;
+  return t > 0 ? t : 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 C() {
+  if (g.length === 0) return;
+  for (const r of g)
+    document.body.contains(r) && (r.style.transform = "translateY(0)");
+  const e = [...g];
+  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
+  };
+}
+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;
+  }
+}, 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();
+  }
+}, 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 [
+      "checkbox",
+      "radio",
+      "range",
+      "date",
+      "time",
+      "color",
+      "month",
+      "week",
+      "file",
+      "hidden",
+      "submit",
+      "reset",
+      "button",
+      "image"
+    ].includes(s.type) ? null : s;
+  }
+  return null;
+}, ne = [
+  ["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 = [
+  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+  ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
+  ["-", "_", "=", "+", "[", "]", "{", "}", "\\", "|"],
+  [";", ":", '"', "'", ",", ".", "<", ">", "/", "?"]
+], re = [
+  ["7", "8", "9", "#"],
+  ["4", "5", "6", "-"],
+  ["1", "2", "3"],
+  [",", "0", "."]
+], ve = {
+  backgroundColor: "#1a1a1a",
+  keyColor: "#444444",
+  keyTextColor: "#ffffff",
+  keyActiveColor: "#666666",
+  keyHoverColor: "#555555",
+  activeStateColor: "#4a90e2",
+  keyBorderRadius: "0.5vw",
+  keyFontSize: "32px",
+  keyHeight: "100%"
+}, U = (e) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    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" })
+  }
+), j = (e) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    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" })
+  }
+), ce = (e) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "1em",
+    height: "1em",
+    ...e,
+    children: /* @__PURE__ */ a("path", { d: "M18 9v4H6V9H4v6h16V9z" })
+  }
+), oe = (e) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    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" })
+  }
+), T = ({
+  type: e,
+  icon: r,
+  onClick: n,
+  extraClass: t = "",
+  text: s,
+  capsLock: l = !1,
+  enableContinuousPress: c = !1
+}) => {
+  const o = e === "caps" && l, u = [
+    "vk-key",
+    `vk-key--${t}`,
+    o ? "vk-key--caps-active" : ""
+  ].filter(Boolean).join(" "), f = F(n, {
+    initialDelay: 500,
+    interval: 50
+  }), d = c ? f : { onClick: n };
+  return /* @__PURE__ */ L(
+    "button",
+    {
+      type: "button",
+      className: u,
+      "data-testid": `${e}${o ? "-active" : ""}`,
+      "data-key": o ? `${e}-active` : e,
+      ...d,
+      children: [
+        r && r,
+        s && /* @__PURE__ */ a("span", { className: "vk-key__text", children: s })
+      ]
+    }
+  );
+}, z = ({ keyValue: e, onClick: r, className: n = "" }) => {
+  const t = ["vk-key", n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: t,
+      onClick: () => r(e),
+      "data-testid": e,
+      children: e
+    }
+  );
+}, 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
+}) => {
+  const d = (m) => {
+    switch (m) {
+      case 3:
+        return f === "letters" && /* @__PURE__ */ a(
+          T,
+          {
+            type: "caps",
+            icon: /* @__PURE__ */ a(oe, {}),
+            onClick: l,
+            extraClass: "capsLock",
+            text: "Caps Lock",
+            capsLock: u
+          },
+          "caps"
+        );
+      default:
+        return null;
+    }
+  }, v = (m) => {
+    switch (m) {
+      case 3:
+        return /* @__PURE__ */ a(
+          T,
+          {
+            type: "backspace",
+            icon: /* @__PURE__ */ a(U, {}),
+            onClick: n,
+            extraClass: "backspace",
+            text: "Backspace",
+            enableContinuousPress: !0
+          },
+          "backspace"
+        );
+      default:
+        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,
+          {
+            keyValue: b,
+            onClick: o
+          },
+          `${h}-${y}-${w}`
+        );
+      }),
+      v(h)
+    ] }, `row-${h}`)),
+    /* @__PURE__ */ L(O, { children: [
+      /* @__PURE__ */ a(
+        T,
+        {
+          type: "layout",
+          icon: f === "letters" ? "&123" : "ABC",
+          onClick: c,
+          extraClass: "layout",
+          text: ""
+        },
+        "layout"
+      ),
+      e === "email" && /* @__PURE__ */ a(
+        T,
+        {
+          type: "dot",
+          onClick: () => o("."),
+          extraClass: "dot",
+          icon: "."
+        },
+        "dot"
+      ),
+      /* @__PURE__ */ a(
+        T,
+        {
+          type: "space",
+          icon: /* @__PURE__ */ a(ce, {}),
+          onClick: s,
+          extraClass: "space",
+          text: "Space"
+        },
+        "space"
+      ),
+      e === "email" && /* @__PURE__ */ a(
+        T,
+        {
+          type: "at",
+          icon: "@",
+          onClick: () => o("@"),
+          extraClass: "at",
+          text: ""
+        },
+        "at"
+      ),
+      /* @__PURE__ */ a(
+        T,
+        {
+          type: "enter",
+          icon: /* @__PURE__ */ a(j, {}),
+          onClick: t,
+          extraClass: "enter",
+          text: "Enter"
+        },
+        "enter"
+      )
+    ] })
+  ] });
+}, ue = ({
+  currentLayout: e,
+  capsLock: r,
+  onKeyClick: n,
+  onBackspace: t,
+  onEnter: s,
+  onSpace: l,
+  onCapsToggle: c,
+  onLayoutToggle: o,
+  inputType: u
+}) => {
+  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,
+    {
+      inputType: u,
+      currentLayoutData: f,
+      onBackspace: t,
+      onEnter: s,
+      onSpace: l,
+      onCapsToggle: c,
+      onLayoutToggle: o,
+      onKeyClick: n,
+      capsLock: r,
+      currentLayout: e
+    }
+  );
+}, ie = ({
+  children: e,
+  className: r = ""
+}) => {
+  const n = (l) => {
+    l.preventDefault();
+  }, t = (l) => {
+    l.preventDefault(), l.stopPropagation();
+  }, s = ["vk-container", r].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s,
+      onMouseDown: n,
+      onClick: t,
+      "data-testid": "keyboard-container",
+      children: e
+    }
+  );
+}, de = ({
+  focusedInputRef: e,
+  isInputFocused: r,
+  inputType: n = "text",
+  onEnterClick: t,
+  onChange: s,
+  className: l,
+  defaultLayout: c = "letters",
+  validate: o
+}) => {
+  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) ?? ""));
+    },
+    [e, n, d, s, o]
+  ), y = k(
+    (p) => {
+      w(p);
+    },
+    [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
+  };
+  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
+}) => {
+  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));
+      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);
+      }
+      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());
+    };
+    return document.addEventListener("focusin", y, !0), document.addEventListener("focusout", b, !0), () => {
+      document.removeEventListener("focusin", y, !0), document.removeEventListener("focusout", b, !0);
+    };
+  }, [e, m, h, n]);
+  const w = () => {
+    o(!1), n == null || n(!1), te(d), t == null || t(), h();
+  };
+  return !c || !e ? null : /* @__PURE__ */ a("span", { ref: l, children: /* @__PURE__ */ a(
+    de,
+    {
+      focusedInputRef: d,
+      isInputFocused: c,
+      inputType: u,
+      onEnterClick: w,
+      onChange: s,
+      className: r
+    }
+  ) });
+};
+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
+};
+//# sourceMappingURL=index.esm.js.map