@progress/kendo-react-inputs 15.0.1-develop.9 → 15.1.0-develop.1

package/otpinput/OTPInput.mjs

@@ -0,0 +1,301 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as r from "react";
+import { useAsyncFocusBlur as de, useWebMcpRegister as me, classNames as he, kendoThemeMaps as be } from "@progress/kendo-react-common";
+import { OTPInputCell as Ce } from "./OTPInputCell.mjs";
+import { OTPInputSeparator as ge } from "./OTPInputSeparator.mjs";
+import { useLocalization as ve } from "@progress/kendo-react-intl";
+import { otpInputAriaLabel as j, messages as ke } from "../messages/index.mjs";
+const ye = 4;
+function Ee(f, d) {
+  if (Array.isArray(d)) {
+    const C = d.reduce((_, w) => _ + w, 0);
+    return C !== f && console.warn(`[OTPInput] The sum of groupLength values (${C}) must equal length (${f}).`), d;
+  }
+  const y = [];
+  let m = f;
+  for (; m > 0; )
+    y.push(Math.min(d, m)), m -= d;
+  return y;
+}
+const _e = r.forwardRef((f, d) => {
+  const {
+    value: y,
+    defaultValue: m,
+    length: C,
+    groupLength: _,
+    separator: w,
+    type: h,
+    placeholder: H,
+    spacing: L,
+    disabled: z,
+    readOnly: E,
+    inputAttributes: q,
+    name: R,
+    required: G,
+    valid: A,
+    size: D,
+    fillMode: U,
+    rounded: W,
+    onChange: M,
+    onFocus: B,
+    onBlur: N,
+    ariaLabel: J,
+    ariaLabelledBy: Q,
+    ariaDescribedBy: X,
+    id: I,
+    style: Y,
+    dir: V,
+    className: Z,
+    // Form
+    touched: we,
+    visited: Re,
+    modified: De,
+    validationMessage: Te,
+    ...x
+  } = f, o = C != null ? C : ye, F = y !== void 0, [ee, te] = r.useState(() => (m != null ? m : "").padEnd(o, " ").slice(0, o)), n = (F ? y : ee).padEnd(o, " ").slice(0, o), O = r.useRef(n);
+  O.current = n;
+  const [ae, P] = r.useState(null), g = r.useRef(null), v = r.useCallback((e) => {
+    g.current !== null && clearTimeout(g.current), P(e), g.current = setTimeout(() => {
+      P(null), g.current = null;
+    }, 300);
+  }, []);
+  r.useEffect(() => () => {
+    g.current !== null && clearTimeout(g.current);
+  }, []);
+  const S = r.useRef(null), T = r.useRef([]), k = r.useRef(null), c = r.useCallback(
+    (e) => {
+      var l;
+      const t = Math.max(0, Math.min(e, o - 1));
+      (l = T.current[t]) == null || l.focus();
+    },
+    [o]
+  ), p = r.useCallback(
+    (e, t) => {
+      const l = e.padEnd(o, " ").slice(0, o);
+      l !== n && (O.current = l, F || te(l), M && M({
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        target: k.current,
+        value: l
+      }));
+    },
+    [F, o, M, n]
+  ), re = r.useCallback(
+    (e, t, l) => {
+      const a = l.target.value.slice(-1);
+      if (!a)
+        return;
+      if (h === "number" && !/^\d$/.test(a)) {
+        v(e);
+        const b = n[e] === " " ? "" : n[e];
+        l.target.value = b, l.target.select();
+        return;
+      }
+      const i = O.current.split("");
+      i[e] = a;
+      const s = i.join("");
+      p(s, l), c(e + 1);
+    },
+    [n, p, c, h, v]
+  ), K = r.useCallback(
+    (e, t, l) => {
+      if (l.preventDefault(), h === "number" && !/^\d$/.test(t)) {
+        v(e), l.target.select();
+        return;
+      }
+      const u = n.split("");
+      u[e] = t, p(u.join(""), l), c(e + 1);
+    },
+    [h, v, n, p, c]
+  ), le = r.useCallback(
+    (e, t) => {
+      var u;
+      if (E)
+        return;
+      const l = V === "rtl";
+      switch (t.key) {
+        case "ArrowLeft": {
+          t.preventDefault(), c(l ? e + 1 : e - 1);
+          break;
+        }
+        case "ArrowRight": {
+          t.preventDefault(), c(l ? e - 1 : e + 1);
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowDown": {
+          t.preventDefault();
+          break;
+        }
+        case "Backspace": {
+          t.preventDefault();
+          const a = n.split("");
+          a[e] = " ", p(a.join(""), t), c(e - 1);
+          break;
+        }
+        case "Delete": {
+          t.preventDefault();
+          const a = n.split("");
+          a[e] = " ", p(a.join(""), t);
+          break;
+        }
+        default: {
+          const { key: a, ctrlKey: i, altKey: s, metaKey: b } = t, $ = (u = n[e]) != null ? u : " ";
+          a.length === 1 && !i && !s && !b && $ !== " " && K(e, a, t);
+          break;
+        }
+      }
+    },
+    [n, p, c, V, E, K]
+  ), ne = r.useCallback(
+    (e, t) => {
+      B && B({
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        target: k.current,
+        cellIndex: e
+      });
+    },
+    [B]
+  ), se = r.useCallback((e, t) => {
+  }, []), { onFocus: oe, onBlur: ue } = de({
+    onFocus: (e) => {
+    },
+    onBlur: (e) => {
+      N && N({
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        target: k.current
+      });
+    }
+  }), ce = r.useCallback(
+    (e) => {
+      if (e.preventDefault(), E)
+        return;
+      const t = e.clipboardData.getData("text");
+      if (!t)
+        return;
+      const l = T.current.findIndex((s) => s === document.activeElement), u = l >= 0 ? l : 0;
+      if (h === "number" && !/^\d+$/.test(t.trim())) {
+        v(u);
+        return;
+      }
+      const a = n.split("");
+      for (let s = 0; s < t.length && u + s < o; s++)
+        a[u + s] = t[s];
+      p(a.join(""), e);
+      const i = Math.min(u + t.length, o - 1);
+      c(i);
+    },
+    [n, p, c, o, h, v, E]
+  );
+  r.useImperativeHandle(k, () => ({
+    get element() {
+      return S.current;
+    },
+    get value() {
+      return n;
+    },
+    focus(e) {
+      if (e !== void 0)
+        c(e);
+      else {
+        const t = n.indexOf(" ");
+        c(t >= 0 ? t : o - 1);
+      }
+    },
+    blur() {
+      T.current.forEach((e) => e == null ? void 0 : e.blur());
+    }
+  })), r.useImperativeHandle(d, () => k.current), me("otpinput", k, f, f.webMcp);
+  const ie = () => {
+    const e = (a) => {
+      var i;
+      return /* @__PURE__ */ r.createElement(
+        Ce,
+        {
+          key: a,
+          ref: (s) => {
+            T.current[a] = s;
+          },
+          index: a,
+          totalLength: o,
+          char: (i = n[a]) != null ? i : " ",
+          type: h,
+          placeholder: H,
+          disabled: z,
+          readOnly: E,
+          required: G,
+          size: D,
+          fillMode: U,
+          rounded: W,
+          inputAttributes: q,
+          valid: A === !1 || ae === a ? !1 : A,
+          onCellChange: re,
+          onCellKeyDown: le,
+          onCellFocus: ne,
+          onCellBlur: se,
+          name: R ? `${R}-cell-${a}` : `otp-cell-${a}`,
+          id: I ? `${I}-cell-${a}` : `otp-cell-${a}`
+        }
+      );
+    };
+    if (!_) {
+      const a = Array.from({ length: o }, (i, s) => e(s));
+      return L === !1 ? [
+        /* @__PURE__ */ r.createElement("div", { key: "group", className: "k-input-group" }, a)
+      ] : a;
+    }
+    const t = Ee(o, _);
+    let l = 0;
+    const u = [];
+    return t.forEach((a, i) => {
+      const s = l;
+      i > 0 && w !== void 0 && u.push(/* @__PURE__ */ r.createElement(ge, { key: `sep-${s}`, separator: w }));
+      const b = [];
+      for (let $ = 0; $ < a; $++)
+        b.push(e(l++));
+      L === !1 ? u.push(
+        /* @__PURE__ */ r.createElement("div", { key: `group-${s}`, className: "k-input-group" }, b)
+      ) : u.push(...b);
+    }), u;
+  }, pe = he(
+    "k-otp",
+    {
+      "k-disabled": z,
+      "k-invalid": A === !1,
+      [`k-otp-${be.sizeMap[D] || D}`]: D
+    },
+    Z
+  ), fe = ve().toLanguageString(j, ke[j]);
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: S,
+      className: pe,
+      role: "group",
+      "aria-label": J || fe,
+      "aria-labelledby": Q,
+      "aria-describedby": X,
+      id: I,
+      style: Y,
+      dir: V,
+      onFocus: oe,
+      onBlur: ue,
+      onPaste: ce,
+      ...x
+    },
+    R && /* @__PURE__ */ r.createElement("input", { "aria-hidden": !0, type: "hidden", name: R, value: n.replace(/ /g, "") }),
+    ie()
+  );
+});
+_e.displayName = "KendoReactOTPInput";
+export {
+  _e as OTPInput
+};

package/otpinput/OTPInputCell.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/** @hidden */
+export interface OTPInputCellProps {
+    index: number;
+    totalLength: number;
+    char: string;
+    type?: 'text' | 'password' | 'number';
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    fillMode?: 'solid' | 'flat' | 'outline';
+    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
+    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
+    valid?: boolean;
+    onCellChange?: (index: number, char: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onCellKeyDown?: (index: number, event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onCellFocus?: (index: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    onCellBlur?: (index: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    id?: string;
+    name?: string;
+}
+/** @hidden */
+export declare const OTPInputCell: React.NamedExoticComponent<OTPInputCellProps & React.RefAttributes<HTMLInputElement | null>>;

package/otpinput/OTPInputCell.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),w=require("@progress/kendo-react-common"),z=require("@progress/kendo-react-intl"),D=require("../textbox/Textbox.js"),d=require("../messages/index.js");function E(l){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(a,e,r.get?r:{enumerable:!0,get:()=>l[e]})}}return a.default=l,Object.freeze(a)}const n=E(B),x=n.forwardRef((l,a)=>{const{index:e,totalLength:r,char:p,type:f,placeholder:y,disabled:v,readOnly:b,required:h,size:O,fillMode:I,rounded:T,inputAttributes:k,id:L,name:S,valid:m,onCellChange:i,onCellKeyDown:g,onCellFocus:u,onCellBlur:c}=l,s=n.useRef(null),P=z.useLocalization();n.useImperativeHandle(a,()=>{var t,o;return(o=(t=s.current)==null?void 0:t.element)!=null?o:null});const R={autoComplete:"off","aria-label":P.toLanguageString(d.otpInputCellAriaLabel,d.messages[d.otpInputCellAriaLabel]).replace("{index}",String(e+1)).replace("{total}",String(r)),...k,maxLength:1,...m===!1&&{"aria-invalid":!0},onKeyDown:g?t=>g(e,t):void 0},q=n.useCallback(t=>{i&&i(e,t.syntheticEvent.target.value,t.syntheticEvent)},[e,i]),j=n.useCallback(t=>{var C;const o=(C=s.current)==null?void 0:C.element;o&&o.select(),u&&u(e,t)},[e,u]),A=n.useCallback(t=>{c&&c(e,t)},[e,c]);return n.createElement(D.TextBox,{id:L,name:S,ref:s,className:w.classNames("k-otp-input",{"k-readonly":b}),value:p===" "?"":p,size:O,fillMode:I,rounded:T,disabled:v,readOnly:b,required:h,valid:m,placeholder:y,onChange:i?q:void 0,onFocus:j,onBlur:c?A:void 0,inputAttributes:R,type:f==="number"?"text":f})});x.displayName="OTPInputCell";const N=n.memo(x);exports.OTPInputCell=N;

package/otpinput/OTPInputCell.mjs

@@ -0,0 +1,96 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as l from "react";
+import { classNames as z } from "@progress/kendo-react-common";
+import { useLocalization as F } from "@progress/kendo-react-intl";
+import { TextBox as N } from "../textbox/Textbox.mjs";
+import { otpInputCellAriaLabel as f, messages as P } from "../messages/index.mjs";
+const C = l.forwardRef((b, g) => {
+  const {
+    index: t,
+    totalLength: h,
+    char: s,
+    type: u,
+    placeholder: v,
+    disabled: x,
+    readOnly: c,
+    required: y,
+    size: I,
+    fillMode: L,
+    rounded: T,
+    inputAttributes: k,
+    id: B,
+    name: A,
+    valid: p,
+    onCellChange: a,
+    onCellKeyDown: m,
+    onCellFocus: r,
+    onCellBlur: o
+  } = b, i = l.useRef(null), E = F();
+  l.useImperativeHandle(
+    g,
+    () => {
+      var e, n;
+      return (n = (e = i.current) == null ? void 0 : e.element) != null ? n : null;
+    }
+  );
+  const O = {
+    autoComplete: "off",
+    "aria-label": E.toLanguageString(f, P[f]).replace("{index}", String(t + 1)).replace("{total}", String(h)),
+    ...k,
+    // Protected attrs — cannot be overridden by user's inputAttributes:
+    maxLength: 1,
+    ...p === !1 && { "aria-invalid": !0 },
+    onKeyDown: m ? (e) => m(t, e) : void 0
+  }, R = l.useCallback(
+    (e) => {
+      a && a(t, e.syntheticEvent.target.value, e.syntheticEvent);
+    },
+    [t, a]
+  ), S = l.useCallback(
+    (e) => {
+      var d;
+      const n = (d = i.current) == null ? void 0 : d.element;
+      n && n.select(), r && r(t, e);
+    },
+    [t, r]
+  ), w = l.useCallback(
+    (e) => {
+      o && o(t, e);
+    },
+    [t, o]
+  );
+  return /* @__PURE__ */ l.createElement(
+    N,
+    {
+      id: B,
+      name: A,
+      ref: i,
+      className: z("k-otp-input", { "k-readonly": c }),
+      value: s === " " ? "" : s,
+      size: I,
+      fillMode: L,
+      rounded: T,
+      disabled: x,
+      readOnly: c,
+      required: y,
+      valid: p,
+      placeholder: v,
+      onChange: a ? R : void 0,
+      onFocus: S,
+      onBlur: o ? w : void 0,
+      inputAttributes: O,
+      type: u === "number" ? "text" : u
+    }
+  );
+});
+C.displayName = "OTPInputCell";
+const j = l.memo(C);
+export {
+  j as OTPInputCell
+};

package/otpinput/OTPInputSeparator.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OTPSeparatorIcon } from './interfaces/OTPSeparatorIcon';
+import * as React from 'react';
+/** @hidden */
+export interface OTPInputSeparatorProps {
+    separator: string | OTPSeparatorIcon;
+}
+/** @hidden */
+export declare const OTPInputSeparator: (props: OTPInputSeparatorProps) => React.ReactElement;

package/otpinput/OTPInputSeparator.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),o=require("@progress/kendo-react-common");function s(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const a=s(c),l=n=>{const{separator:e}=n;let t;return typeof e=="string"?t=e:e.type==="svgIcon"?t=a.createElement(o.IconWrap,{icon:e.value}):e.type==="iconClass"?t=a.createElement("span",{className:e.value}):t=a.createElement(o.IconWrap,{name:e.value}),a.createElement("div",{className:"k-otp-separator"},t)};exports.OTPInputSeparator=l;

package/otpinput/OTPInputSeparator.mjs

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as a from "react";
+import { IconWrap as r } from "@progress/kendo-react-common";
+const s = (n) => {
+  const { separator: e } = n;
+  let t;
+  return typeof e == "string" ? t = e : e.type === "svgIcon" ? t = /* @__PURE__ */ a.createElement(r, { icon: e.value }) : e.type === "iconClass" ? t = /* @__PURE__ */ a.createElement("span", { className: e.value }) : t = /* @__PURE__ */ a.createElement(r, { name: e.value }), /* @__PURE__ */ a.createElement("div", { className: "k-otp-separator" }, t);
+};
+export {
+  s as OTPInputSeparator
+};

package/otpinput/interfaces/OTPInputBlurEvent.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { OTPInputHandle } from './OTPInputHandle';
+import * as React from 'react';
+/**
+ * Event object fired by `OTPInput.onBlur`.
+ */
+export interface OTPInputBlurEvent extends BaseEvent<OTPInputHandle> {
+    /**
+     * The underlying native blur event.
+     */
+    nativeEvent: FocusEvent;
+    /**
+     * The underlying React synthetic event.
+     */
+    syntheticEvent: React.FocusEvent<HTMLInputElement>;
+}

package/otpinput/interfaces/OTPInputChangeEvent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { OTPInputHandle } from './OTPInputHandle';
+/**
+ * Event object fired by `OTPInput.onChange`.
+ */
+export interface OTPInputChangeEvent extends BaseEvent<OTPInputHandle> {
+    /**
+     * The new full string value of the OTPInput after the change.
+     * Unfilled cells are represented as a space (`' '`).
+     */
+    value: string;
+}

package/otpinput/interfaces/OTPInputFocusEvent.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { OTPInputHandle } from './OTPInputHandle';
+import * as React from 'react';
+/**
+ * Event object fired by `OTPInput.onFocus`.
+ */
+export interface OTPInputFocusEvent extends BaseEvent<OTPInputHandle> {
+    /**
+     * The zero-based index of the cell that received focus.
+     */
+    cellIndex: number;
+    /**
+     * The underlying native focus event.
+     */
+    nativeEvent: FocusEvent;
+    /**
+     * The underlying React synthetic event.
+     */
+    syntheticEvent: React.FocusEvent<HTMLInputElement>;
+}

package/otpinput/interfaces/OTPInputHandle.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the `ref` of the KendoReact OTPInput component.
+ */
+export interface OTPInputHandle {
+    /**
+     * The root wrapper DOM element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The current string value of the OTPInput.
+     * Unfilled cells are represented with a space (`' '`).
+     */
+    value: string;
+    /**
+     * Focuses the input cell at `index`.
+     * When `index` is omitted, focuses the first unfilled cell or
+     * the last cell if all are filled.
+     *
+     * @param index - Zero-based index of the cell to focus.
+     */
+    focus: (index?: number) => void;
+    /**
+     * Programmatically blurs the OTPInput.
+     */
+    blur: () => void;
+}