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

package/otpinput/interfaces/OTPInputProps.d.ts

@@ -0,0 +1,314 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { WebMcpProps } from '@progress/kendo-react-common';
+import { OTPSeparatorIcon } from './OTPSeparatorIcon';
+import { OTPInputChangeEvent } from './OTPInputChangeEvent';
+import { OTPInputFocusEvent } from './OTPInputFocusEvent';
+import { OTPInputBlurEvent } from './OTPInputBlurEvent';
+import * as React from 'react';
+/**
+ * The input `type` options for the OTPInput.
+ */
+export type OTPInputType = 'text' | 'password' | 'number';
+/**
+ * Represents the props for the KendoReact
+ * [OTPInput](https://www.telerik.com/kendo-react-ui/components/inputs/api/OTPInput) component.
+ */
+export interface OTPInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'> {
+    /**
+     * Sets the current value of the OTPInput (controlled mode).
+     * Unfilled input cells are represented with a space (`' '`).
+     *
+     * @example
+     * ```tsx
+     * <OTPInput value="12 4" length={4} onChange={handleChange} />
+     * ```
+     */
+    value?: string;
+    /**
+     * Sets the initial value of the OTPInput (uncontrolled mode).
+     * Once set, subsequent updates are managed internally.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput defaultValue="12" length={6} />
+     * ```
+     */
+    defaultValue?: string;
+    /**
+     * Sets the total number of individual input cells.
+     *
+     * @default 4
+     *
+     * @example
+     * ```tsx
+     * <OTPInput length={6} />
+     * ```
+     */
+    length?: number;
+    /**
+     * Sets the length of each group of input cells.
+     *
+     * - Provide a `number` to give all groups the same length.
+     * - Provide a `number[]` to assign different lengths to each group.
+     *
+     * The sum of all group lengths must equal `length`.
+     *
+     * @example
+     * ```tsx
+     * // Two groups of 3: "XXX-XXX"
+     * <OTPInput length={6} groupLength={3} separator="-" />
+     *
+     * // Groups of 4-4-4: "XXXX-XXXX-XXXX"
+     * <OTPInput length={12} groupLength={[4, 4, 4]} separator="-" />
+     * ```
+     */
+    groupLength?: number | number[];
+    /**
+     * Sets the separator rendered between groups of input cells.
+     * Only effective when `groupLength` is set.
+     *
+     * - Provide a `string` to render a text separator.
+     * - Provide an `OTPSeparatorIcon` to render an icon separator.
+     *
+     * @example
+     * ```tsx
+     * // Text separator
+     * <OTPInput length={6} groupLength={3} separator="-" />
+     *
+     * // SVG icon separator
+     * <OTPInput length={6} groupLength={3} separator={{ type: 'svgIcon', value: minusIcon }} />
+     * ```
+     */
+    separator?: string | OTPSeparatorIcon;
+    /**
+     * Sets the input type.
+     *
+     * @default 'text'
+     *
+     * @example
+     * ```tsx
+     * <OTPInput type="number" length={6} />
+     * ```
+     */
+    type?: OTPInputType;
+    /**
+     * Sets a placeholder character shown in each empty input cell.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput placeholder="·" length={6} />
+     * ```
+     */
+    placeholder?: string;
+    /**
+     * When `true`, renders the input cells as separate boxes with spacing
+     * between them. When `false`, renders them as adjacent (joined) cells.
+     *
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * <OTPInput spacing={false} length={6} />
+     * ```
+     */
+    spacing?: boolean;
+    /**
+     * When `true`, disables the OTPInput so that it cannot be interacted
+     * with and receives the `k-disabled` CSS class.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <OTPInput disabled={true} length={6} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the OTPInput to read-only mode.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <OTPInput readOnly={true} value="123456" length={6} />
+     * ```
+     */
+    readOnly?: boolean;
+    /**
+     * Sets additional HTML attributes on every inner `<input>` element.
+     * Attributes that are required for the component to work correctly cannot be overridden.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput inputAttributes={{ autoComplete: 'off' }} length={6} />
+     * ```
+     */
+    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Sets the `name` attribute used when the component participates in an
+     * HTML form. A hidden `<input>` with this name and the current value
+     * is rendered for native form submission.
+     *
+     * @example
+     * ```tsx
+     * <form>
+     *   <OTPInput name="verificationCode" length={6} />
+     * </form>
+     * ```
+     */
+    name?: string;
+    /**
+     * Marks the field as required for HTML5 constraint validation.
+     *
+     * @default false
+     *
+     * @remarks
+     * This property is related to accessibility.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput required={true} length={6} />
+     * ```
+     */
+    required?: boolean;
+    /**
+     * When `false`, renders the component in an invalid visual state.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput valid={false} length={6} />
+     * ```
+     */
+    valid?: boolean;
+    /**
+     * Configures the `size` of the component.
+     *
+     * The available options are:
+     * - `'small'`
+     * - `'medium'`
+     * - `'large'`
+     *
+     * @example
+     * ```tsx
+     * <OTPInput size="large" length={6} />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `fillMode` of the component.
+     *
+     * The available options are:
+     * - `'solid'`
+     * - `'flat'`
+     * - `'outline'`
+     *
+     * @example
+     * ```tsx
+     * <OTPInput fillMode="outline" length={6} />
+     * ```
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Configures the `rounded` property of the component.
+     *
+     * The available options are:
+     * - `'small'`
+     * - `'medium'`
+     * - `'large'`
+     * - `'full'`
+     * - `'none'
+     *
+     * @example
+     * ```tsx
+     * <OTPInput rounded="full" length={6} />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
+    /**
+     * Fires when the user changes the value of any input cell.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput onChange={(e) => console.log(e.value)} length={6} />
+     * ```
+     */
+    onChange?: (event: OTPInputChangeEvent) => void;
+    /**
+     * Fires when any input cell receives focus.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput onFocus={(e) => console.log('focused cell index', e.cellIndex)} length={6} />
+     * ```
+     */
+    onFocus?: (event: OTPInputFocusEvent) => void;
+    /**
+     * Fires when the entire OTPInput loses focus (not on every
+     * inter-cell navigation).
+     *
+     * @example
+     * ```tsx
+     * <OTPInput onBlur={(e) => console.log('blurred')} length={6} />
+     * ```
+     */
+    onBlur?: (event: OTPInputBlurEvent) => void;
+    /**
+     * Sets the `aria-label` attribute on the OTPInput wrapper element.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput ariaLabel="Enter your 6-digit code" length={6} />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `aria-labelledby` attribute on the OTPInput wrapper element.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Sets the `aria-describedby` attribute on the OTPInput wrapper element.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Sets the `id` attribute on the OTPInput wrapper element.
+     *
+     * @example
+     * ```tsx
+     * <OTPInput id="otp-code" length={6} />
+     * ```
+     */
+    id?: string;
+    /**
+     * Enables Web MCP tool registration for this component.
+     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
+     *
+     * Pass `true` for defaults or an object for fine-grained control.
+     * When absent or `false`, zero webMcp overhead.
+     *
+     * @example
+     * ```tsx
+     * // Boolean — use provider's dataName
+     * <OTPInput webMcp length={6} onChange={handleChange} />
+     *
+     * // Config object — override dataName per component
+     * <OTPInput webMcp={{ dataName: 'verificationCode' }} length={6} onChange={handleChange} />
+     * ```
+     */
+    webMcp?: boolean | WebMcpProps;
+}

package/otpinput/interfaces/OTPSeparatorIcon.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 { SVGIcon } from '@progress/kendo-svg-icons';
+/**
+ * Describes the icon separator for the OTPInput.
+ */
+export interface OTPSeparatorIcon {
+    /**
+     * Sets the type of icon to display as a separator.
+     *
+     * The available options are:
+     * - `'svgIcon'` — an SVG icon from `@progress/kendo-svg-icons`
+     * - `'iconClass'` — a CSS class-based icon
+     * - `'icon'` — a Kendo font icon name (e.g., `'home'`)
+     */
+    type: 'svgIcon' | 'iconClass' | 'icon';
+    /**
+     * The icon to display. Provide a CSS class string for `'iconClass'`,
+     * a Kendo icon name string for `'icon'`, or an `SVGIcon` object for `'svgIcon'`.
+     */
+    value: string | SVGIcon;
+}

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1780558423,version:"15.0.1-develop.9",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1782140873,version:"15.1.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1780558423,
-    version: '15.0.1-develop.9',
+    publishDate: 1782140873,
+    version: '15.1.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "15.0.1-develop.9",
+  "version": "15.1.0-develop.1",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,14 +28,14 @@
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-animation": "15.0.1-develop.9",
-    "@progress/kendo-react-buttons": "15.0.1-develop.9",
-    "@progress/kendo-react-common": "15.0.1-develop.9",
-    "@progress/kendo-react-dialogs": "15.0.1-develop.9",
-    "@progress/kendo-react-layout": "15.0.1-develop.9",
-    "@progress/kendo-react-intl": "15.0.1-develop.9",
-    "@progress/kendo-react-labels": "15.0.1-develop.9",
-    "@progress/kendo-react-popup": "15.0.1-develop.9",
+    "@progress/kendo-react-animation": "15.1.0-develop.1",
+    "@progress/kendo-react-buttons": "15.1.0-develop.1",
+    "@progress/kendo-react-common": "15.1.0-develop.1",
+    "@progress/kendo-react-dialogs": "15.1.0-develop.1",
+    "@progress/kendo-react-layout": "15.1.0-develop.1",
+    "@progress/kendo-react-intl": "15.1.0-develop.1",
+    "@progress/kendo-react-labels": "15.1.0-develop.1",
+    "@progress/kendo-react-popup": "15.1.0-develop.1",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -82,7 +82,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1780558423,
+      "publishDate": 1782140873,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },