@progress/kendo-react-inputs 8.3.0-develop.5 → 8.3.0-develop.7

package/index.d.mts

@@ -14,8 +14,8 @@ import { FormComponentValidity } from '@progress/kendo-react-common';
 import { HTMLAttributes } from 'react';
 import { IconHandle } from '@progress/kendo-react-common';
 import { IconProps } from '@progress/kendo-react-common';
+import { InputsClassStructure } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { MaskedTextBoxClassStructure } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { PopupAnimation } from '@progress/kendo-react-popup';
 import PropTypes from 'prop-types';
@@ -1369,6 +1369,10 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
      * Triggered after value change.
      */
     onChange?: (event: InputChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: InputsClassStructure;
 }
 
 /**
@@ -1851,7 +1855,7 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     /**
      * @hidden
      */
-    unstyled?: MaskedTextBoxClassStructure;
+    unstyled?: InputsClassStructure;
 }
 
 /**
@@ -4353,6 +4357,10 @@ export declare interface TextBoxProps extends Omit<React_2.InputHTMLAttributes<H
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextBox. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: InputsClassStructure;
 }
 
 /**

package/index.d.ts

@@ -14,8 +14,8 @@ import { FormComponentValidity } from '@progress/kendo-react-common';
 import { HTMLAttributes } from 'react';
 import { IconHandle } from '@progress/kendo-react-common';
 import { IconProps } from '@progress/kendo-react-common';
+import { InputsClassStructure } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { MaskedTextBoxClassStructure } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { PopupAnimation } from '@progress/kendo-react-popup';
 import PropTypes from 'prop-types';
@@ -1369,6 +1369,10 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
      * Triggered after value change.
      */
     onChange?: (event: InputChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: InputsClassStructure;
 }
 
 /**
@@ -1851,7 +1855,7 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     /**
      * @hidden
      */
-    unstyled?: MaskedTextBoxClassStructure;
+    unstyled?: InputsClassStructure;
 }
 
 /**
@@ -4353,6 +4357,10 @@ export declare interface TextBoxProps extends Omit<React_2.InputHTMLAttributes<H
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextBox. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: InputsClassStructure;
 }
 
 /**

package/input/Input.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),k=require("@progress/kendo-react-labels"),O=require("../package-metadata.js");function P(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const u=P(S),s=class s extends u.Component{constructor(e){super(e),this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.isInvalid=t=>{let i=!1;for(let r in t)t.hasOwnProperty(r)&&(i=i||!!t[r]);return i},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&(this.validity.valid||!this.validityStyles?this._input.classList.remove("k-invalid"):this._input.classList.add("k-invalid"),this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||""))},this.handleChange=t=>{this.setState({value:t.target.value}),this.valueDuringOnChange=t.target.value,this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:this}),this.valueDuringOnChange=void 0},this.handleAutoFill=t=>{if(t.animationName==="autoFillStart"){let i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}},n.validatePackage(O.packageMetadata),this.state={value:this.props.defaultValue||s.defaultProps.defaultValue}}get _inputId(){return this.props.id}get element(){return this._input}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get name(){return this.props.name}get validity(){const e={badInput:this._input?this._input.validity.badInput:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...e,customError:this.props.validationMessage!==void 0,valid:this.props.valid!==void 0?this.props.valid:this._input?!this.isInvalid(e):!0}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:s.defaultProps.validityStyles}componentDidMount(){this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{className:e,label:t,labelClassName:i,id:r,validationMessage:I,defaultValue:L,valid:D,visited:N,touched:V,modified:w,autoFocus:f,ariaLabelledBy:m,ariaDescribedBy:b,validityStyles:q,style:p,ariaLabel:_,...o}=this.props,h=r||this._inputId,c=!this.validityStyles||this.validity.valid,C=n.classNames(e,"k-input k-input-md k-rounded-md k-input-solid"),v=u.createElement("input",{"aria-labelledby":m,"aria-describedby":b,"aria-disabled":this.props.disabled||void 0,"aria-invalid":!c||void 0,"aria-label":_||void 0,...o,style:t?void 0:p,value:this.value,id:h,autoFocus:f,className:C,onChange:this.handleChange,onAnimationStart:this.handleAutoFill,ref:M=>{this._input=M}});return t?u.createElement(k.FloatingLabel,{label:t,labelClassName:i,editorId:h,editorValue:String(this.value),editorValid:c,editorDisabled:o.disabled,editorPlaceholder:o.placeholder,children:v,style:p,dir:o.dir}):v}};s.displayName="Input",s.propTypes={label:a.string,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool},s.defaultProps={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};let d=s;const g=n.createPropsContext(),y=n.withIdHOC(n.withPropsContext(g,d));y.displayName="KendoReactInput";exports.Input=y;exports.InputPropsContext=g;exports.InputWithoutContext=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),P=require("@progress/kendo-react-labels"),L=require("../package-metadata.js");function D(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const p=D(I),s=class s extends p.Component{constructor(e){super(e),this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.isInvalid=t=>{let i=!1;for(let r in t)t.hasOwnProperty(r)&&(i=i||!!t[r]);return i},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&(this.validity.valid||!this.validityStyles?this._input.classList.remove("k-invalid"):this._input.classList.add("k-invalid"),this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||""))},this.handleChange=t=>{this.setState({value:t.target.value}),this.valueDuringOnChange=t.target.value,this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:this}),this.valueDuringOnChange=void 0},this.handleAutoFill=t=>{if(t.animationName==="autoFillStart"){let i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}},l.validatePackage(L.packageMetadata),this.state={value:this.props.defaultValue||s.defaultProps.defaultValue}}get _inputId(){return this.props.id}get element(){return this._input}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get name(){return this.props.name}get validity(){const e={badInput:this._input?this._input.validity.badInput:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...e,customError:this.props.validationMessage!==void 0,valid:this.props.valid!==void 0?this.props.valid:this._input?!this.isInvalid(e):!0}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:s.defaultProps.validityStyles}componentDidMount(){this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{className:e,label:t,labelClassName:i,id:r,validationMessage:N,defaultValue:V,valid:k,unstyled:h,visited:w,touched:q,modified:F,autoFocus:m,ariaLabelledBy:b,ariaDescribedBy:_,validityStyles:E,style:c,ariaLabel:C,...o}=this.props,v=r||this._inputId,u=!this.validityStyles||this.validity.valid,M=h&&h.uInput,S=l.classNames(e,l.uInput.input({c:M,invalid:!u,disabled:this.props.disabled})),y=p.createElement("input",{"aria-labelledby":b,"aria-describedby":_,"aria-disabled":this.props.disabled||void 0,"aria-invalid":!u||void 0,"aria-label":C||void 0,...o,style:t?void 0:c,value:this.value,id:v,autoFocus:m,className:S,onChange:this.handleChange,onAnimationStart:this.handleAutoFill,ref:O=>{this._input=O}});return t?p.createElement(P.FloatingLabel,{label:t,labelClassName:i,editorId:v,editorValue:String(this.value),editorValid:u,editorDisabled:o.disabled,editorPlaceholder:o.placeholder,children:y,style:c,dir:o.dir}):y}};s.displayName="Input",s.propTypes={label:a.string,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool},s.defaultProps={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};let d=s;const g=l.createPropsContext(),f=l.withIdHOC(l.withPropsContext(g,l.withUnstyledHOC(d)));f.displayName="KendoReactInput";exports.Input=f;exports.InputPropsContext=g;exports.InputWithoutContext=d;

package/input/Input.mjs

@@ -6,40 +6,40 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as r from "react";
-import t from "prop-types";
-import { validatePackage as b, classNames as _, createPropsContext as C, withIdHOC as M, withPropsContext as S } from "@progress/kendo-react-common";
-import { FloatingLabel as L } from "@progress/kendo-react-labels";
-import { packageMetadata as V } from "../package-metadata.mjs";
-const e = class e extends r.Component {
-  constructor(s) {
-    super(s), this._input = null, this.focus = () => {
+import * as d from "react";
+import i from "prop-types";
+import { validatePackage as C, classNames as M, uInput as S, createPropsContext as I, withIdHOC as L, withPropsContext as V, withUnstyledHOC as N } from "@progress/kendo-react-common";
+import { FloatingLabel as P } from "@progress/kendo-react-labels";
+import { packageMetadata as D } from "../package-metadata.mjs";
+const s = class s extends d.Component {
+  constructor(e) {
+    super(e), this._input = null, this.focus = () => {
       this._input && this._input.focus();
-    }, this.isInvalid = (i) => {
+    }, this.isInvalid = (t) => {
       let a = !1;
-      for (let l in i)
-        i.hasOwnProperty(l) && (a = a || !!i[l]);
+      for (let l in t)
+        t.hasOwnProperty(l) && (a = a || !!t[l]);
       return a;
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && (this.validity.valid || !this.validityStyles ? this._input.classList.remove("k-invalid") : this._input.classList.add("k-invalid"), this._input.setCustomValidity(
         this.validity.valid ? "" : this.props.validationMessage || ""
       ));
-    }, this.handleChange = (i) => {
+    }, this.handleChange = (t) => {
       this.setState({
-        value: i.target.value
-      }), this.valueDuringOnChange = i.target.value, this.props.onChange && this.props.onChange.call(void 0, {
-        syntheticEvent: i,
-        nativeEvent: i.nativeEvent,
-        value: i.target.value,
+        value: t.target.value
+      }), this.valueDuringOnChange = t.target.value, this.props.onChange && this.props.onChange.call(void 0, {
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        value: t.target.value,
         target: this
       }), this.valueDuringOnChange = void 0;
-    }, this.handleAutoFill = (i) => {
-      if (i.animationName === "autoFillStart") {
-        let a = i.target.parentNode;
+    }, this.handleAutoFill = (t) => {
+      if (t.animationName === "autoFillStart") {
+        let a = t.target.parentNode;
         a && a.classList.contains("k-empty") && a.classList.remove("k-empty");
       }
-    }, b(V), this.state = {
-      value: this.props.defaultValue || e.defaultProps.defaultValue
+    }, C(D), this.state = {
+      value: this.props.defaultValue || s.defaultProps.defaultValue
     };
   }
   get _inputId() {
@@ -67,7 +67,7 @@ const e = class e extends r.Component {
    * Represents the validity state into which the Input is set.
    */
   get validity() {
-    const s = {
+    const e = {
       badInput: this._input ? this._input.validity.badInput : !1,
       patternMismatch: this._input ? this._input.validity.patternMismatch : !1,
       rangeOverflow: this._input ? this._input.validity.rangeOverflow : !1,
@@ -78,16 +78,16 @@ const e = class e extends r.Component {
       valueMissing: this._input ? this._input.validity.valueMissing : !1
     };
     return {
-      ...s,
+      ...e,
       customError: this.props.validationMessage !== void 0,
-      valid: this.props.valid !== void 0 ? this.props.valid : this._input ? !this.isInvalid(s) : !0
+      valid: this.props.valid !== void 0 ? this.props.valid : this._input ? !this.isInvalid(e) : !0
     };
   }
   /**
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : e.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : s.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -106,84 +106,91 @@ const e = class e extends r.Component {
    */
   render() {
     const {
-      className: s,
-      label: i,
+      className: e,
+      label: t,
       labelClassName: a,
       id: l,
-      validationMessage: P,
-      defaultValue: D,
-      valid: I,
+      validationMessage: F,
+      defaultValue: k,
+      valid: E,
+      unstyled: p,
       // Removed to support direct use in Form Field component
-      visited: O,
-      touched: w,
-      modified: F,
-      autoFocus: v,
-      ariaLabelledBy: c,
-      ariaDescribedBy: y,
-      validityStyles: E,
-      style: o,
-      ariaLabel: g,
+      visited: B,
+      touched: U,
+      modified: x,
+      autoFocus: c,
+      ariaLabelledBy: y,
+      ariaDescribedBy: g,
+      validityStyles: A,
+      style: u,
+      ariaLabel: m,
       ...n
-    } = this.props, p = l || this._inputId, u = !this.validityStyles || this.validity.valid, m = _(s, "k-input k-input-md k-rounded-md k-input-solid"), h = /* @__PURE__ */ r.createElement(
+    } = this.props, h = l || this._inputId, r = !this.validityStyles || this.validity.valid, f = p && p.uInput, b = M(e, S.input(
+      {
+        c: f,
+        invalid: !r,
+        disabled: this.props.disabled
+      }
+    )), v = /* @__PURE__ */ d.createElement(
       "input",
       {
-        "aria-labelledby": c,
-        "aria-describedby": y,
+        "aria-labelledby": y,
+        "aria-describedby": g,
         "aria-disabled": this.props.disabled || void 0,
-        "aria-invalid": !u || void 0,
-        "aria-label": g || void 0,
+        "aria-invalid": !r || void 0,
+        "aria-label": m || void 0,
         ...n,
-        style: i ? void 0 : o,
+        style: t ? void 0 : u,
         value: this.value,
-        id: p,
-        autoFocus: v,
-        className: m,
+        id: h,
+        autoFocus: c,
+        className: b,
         onChange: this.handleChange,
         onAnimationStart: this.handleAutoFill,
-        ref: (f) => {
-          this._input = f;
+        ref: (_) => {
+          this._input = _;
         }
       }
     );
-    return i ? /* @__PURE__ */ r.createElement(
-      L,
+    return t ? /* @__PURE__ */ d.createElement(
+      P,
       {
-        label: i,
+        label: t,
         labelClassName: a,
-        editorId: p,
+        editorId: h,
         editorValue: String(this.value),
-        editorValid: u,
+        editorValid: r,
         editorDisabled: n.disabled,
         editorPlaceholder: n.placeholder,
-        children: h,
-        style: o,
+        children: v,
+        style: u,
         dir: n.dir
       }
-    ) : h;
+    ) : v;
   }
 };
-e.displayName = "Input", e.propTypes = {
-  label: t.string,
-  labelClassName: t.string,
-  validationMessage: t.string,
-  required: t.bool,
-  validate: t.bool,
-  id: t.string,
-  ariaLabelledBy: t.string,
-  ariaDescribedBy: t.string,
-  ariaLabel: t.string,
-  autoFocus: t.bool
-}, e.defaultProps = {
+s.displayName = "Input", s.propTypes = {
+  label: i.string,
+  labelClassName: i.string,
+  validationMessage: i.string,
+  required: i.bool,
+  validate: i.bool,
+  id: i.string,
+  ariaLabelledBy: i.string,
+  ariaDescribedBy: i.string,
+  ariaLabel: i.string,
+  autoFocus: i.bool
+}, s.defaultProps = {
   defaultValue: "",
   required: !1,
   validityStyles: !0,
   autoFocus: !1
 };
-let d = e;
-const k = C(), N = M(S(k, d));
-N.displayName = "KendoReactInput";
+let o = s;
+const O = I(), w = L(V(O, N(o)));
+w.displayName = "KendoReactInput";
 export {
-  N as Input,
-  k as InputPropsContext,
-  d as InputWithoutContext
+  w as Input,
+  O as InputPropsContext,
+  o as InputWithoutContext
 };

package/input/InputPrefix.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@progress/kendo-react-common"),l=require("react");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const r=s(l),c=r.forwardRef(({orientation:e="horizontal",...t},n)=>{const a=r.useRef(null),u=r.useRef(null);return r.useImperativeHandle(a,()=>({element:u.current})),r.useImperativeHandle(n,()=>a.current),r.createElement("span",{...t,className:o.classNames("k-input-prefix",t.className,`k-input-prefix-${e}`)})});c.displayName="KendoReactInputPrefix";exports.InputPrefix=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),r=require("@progress/kendo-react-common");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const n=f(m),u=n.forwardRef(({orientation:e="horizontal",...t},s)=>{const a=n.useRef(null),o=n.useRef(null),c=r.useUnstyled(),l=c&&c.uTextBox;n.useImperativeHandle(a,()=>({element:o.current})),n.useImperativeHandle(s,()=>a.current);const i=n.useMemo(()=>r.classNames(r.uTextBox.prefix({c:l,orientation:e}),t.className),[t.className,l,e]);return n.createElement("span",{...t,className:i})});u.displayName="KendoReactInputPrefix";exports.InputPrefix=u;

package/input/InputPrefix.mjs

@@ -6,19 +6,27 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { classNames as l } from "@progress/kendo-react-common";
 import * as e from "react";
-const u = e.forwardRef(({ orientation: r = "horizontal", ...t }, a) => {
-  const n = e.useRef(null), s = e.useRef(null);
-  return e.useImperativeHandle(
-    n,
-    () => ({ element: s.current })
-  ), e.useImperativeHandle(
+import { useUnstyled as u, classNames as o, uTextBox as x } from "@progress/kendo-react-common";
+const f = e.forwardRef(({ orientation: t = "horizontal", ...s }, r) => {
+  const a = e.useRef(null), c = e.useRef(null), n = u(), l = n && n.uTextBox;
+  e.useImperativeHandle(
     a,
-    () => n.current
-  ), /* @__PURE__ */ e.createElement("span", { ...t, className: l("k-input-prefix", t.className, `k-input-prefix-${r}`) });
+    () => ({ element: c.current })
+  ), e.useImperativeHandle(
+    r,
+    () => a.current
+  );
+  const m = e.useMemo(
+    () => o(x.prefix({
+      c: l,
+      orientation: t
+    }), s.className),
+    [s.className, l, t]
+  );
+  return /* @__PURE__ */ e.createElement("span", { ...s, className: m });
 });
-u.displayName = "KendoReactInputPrefix";
+f.displayName = "KendoReactInputPrefix";
 export {
-  u as InputPrefix
+  f as InputPrefix
 };

package/input/InputSuffix.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),o=require("@progress/kendo-react-common");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const u=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,u.get?u:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const r=l(s),a=r.forwardRef(({orientation:e="horizontal",...t},n)=>{const u=r.useRef(null),c=r.useRef(null);return r.useImperativeHandle(u,()=>({element:c.current})),r.useImperativeHandle(n,()=>u.current),r.createElement("span",{...t,className:o.classNames("k-input-suffix",t.className,`k-input-suffix-${e}`)})});a.displayName="KendoReactInputSuffix";exports.InputSuffix=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),u=require("@progress/kendo-react-common");function m(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const n=m(i),r=n.forwardRef(({orientation:e="horizontal",...t},s)=>{const a=n.useRef(null),o=n.useRef(null),c=u.useUnstyled(),l=c&&c.uTextBox;n.useImperativeHandle(a,()=>({element:o.current})),n.useImperativeHandle(s,()=>a.current);const f=n.useMemo(()=>u.classNames(u.uTextBox.suffix({c:l,orientation:e}),t.className),[t.className,l,e]);return n.createElement("span",{...t,className:f})});r.displayName="KendoReactInputSuffix";exports.InputSuffix=r;

package/input/InputSuffix.mjs

@@ -7,18 +7,26 @@
  */
 "use client";
 import * as e from "react";
-import { classNames as r } from "@progress/kendo-react-common";
-const l = e.forwardRef(({ orientation: a = "horizontal", ...t }, s) => {
-  const n = e.useRef(null), u = e.useRef(null);
-  return e.useImperativeHandle(
-    n,
-    () => ({ element: u.current })
+import { useUnstyled as o, classNames as r, uTextBox as f } from "@progress/kendo-react-common";
+const x = e.forwardRef(({ orientation: t = "horizontal", ...s }, u) => {
+  const a = e.useRef(null), c = e.useRef(null), n = o(), l = n && n.uTextBox;
+  e.useImperativeHandle(
+    a,
+    () => ({ element: c.current })
   ), e.useImperativeHandle(
-    s,
-    () => n.current
-  ), /* @__PURE__ */ e.createElement("span", { ...t, className: r("k-input-suffix", t.className, `k-input-suffix-${a}`) });
+    u,
+    () => a.current
+  );
+  const m = e.useMemo(
+    () => r(f.suffix({
+      c: l,
+      orientation: t
+    }), s.className),
+    [s.className, l, t]
+  );
+  return /* @__PURE__ */ e.createElement("span", { ...s, className: m });
 });
-l.displayName = "KendoReactInputSuffix";
+x.displayName = "KendoReactInputSuffix";
 export {
-  l as InputSuffix
+  x as InputSuffix
 };

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1723701999,
+  publishDate: 1724392762,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "8.3.0-develop.5",
+  "version": "8.3.0-develop.7",
   "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",
@@ -25,13 +25,13 @@
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.3.0-develop.5",
-    "@progress/kendo-react-buttons": "8.3.0-develop.5",
-    "@progress/kendo-react-common": "8.3.0-develop.5",
-    "@progress/kendo-react-dialogs": "8.3.0-develop.5",
-    "@progress/kendo-react-intl": "8.3.0-develop.5",
-    "@progress/kendo-react-labels": "8.3.0-develop.5",
-    "@progress/kendo-react-popup": "8.3.0-develop.5",
+    "@progress/kendo-react-animation": "8.3.0-develop.7",
+    "@progress/kendo-react-buttons": "8.3.0-develop.7",
+    "@progress/kendo-react-common": "8.3.0-develop.7",
+    "@progress/kendo-react-dialogs": "8.3.0-develop.7",
+    "@progress/kendo-react-intl": "8.3.0-develop.7",
+    "@progress/kendo-react-labels": "8.3.0-develop.7",
+    "@progress/kendo-react-popup": "8.3.0-develop.7",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/textbox/Textbox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),c=require("prop-types"),o=require("@progress/kendo-react-common"),P=require("../package-metadata.js");function q(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const t=q(E),f=t.forwardRef((e,r)=>{o.validatePackage(P.packageMetadata);const n=t.useRef(null),a=t.useRef(null),s=t.useRef(),v=t.useCallback(()=>{var u;return s.current!==void 0?s.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(a,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return v()}})),t.useImperativeHandle(r,()=>a.current);const{size:i=l.size,fillMode:m=l.fillMode,rounded:d=l.rounded,autoFocus:k=l.autoFocus,className:p,dir:x,style:h,prefix:b=l.prefix,suffix:C=l.suffix,valid:z,modified:N,touched:j,visited:D,...y}=e,[M]=o.useCustomComponent(b),[F]=o.useCustomComponent(C),[_,g]=t.useState(!1),B=u=>{g(!0)},O=u=>{g(!1)},R=t.useCallback(u=>{s.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:a.current}),s.current=void 0},[e.onChange]),{onFocus:T,onBlur:S}=o.useAsyncFocusBlur({onFocus:B,onBlur:O,onSyncFocus:e.onFocus,onSyncBlur:e.onBlur});return t.createElement("span",{style:h,dir:x,className:o.classNames("k-textbox k-input",{[`k-input-${o.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-input-${m}`]:m,[`k-rounded-${o.kendoThemeMaps.roundedMap[d]||d}`]:d},{"k-focus":_,"k-required":e.required,"k-disabled":e.disabled,"k-invalid":e.valid===!1},p),onFocus:T,onBlur:S},t.createElement(M,null),t.createElement("input",{ref:n,className:"k-input-inner",autoFocus:k,...y,onChange:R}),t.createElement(F,null))}),l={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};f.propTypes={size:c.oneOf([null,"small","medium","large"]),rounded:c.oneOf([null,"small","medium","large","full"]),fillMode:c.oneOf([null,"solid","flat","outline"]),autoFocus:c.bool};f.displayName="KendoReactTextBoxComponent";exports.TextBox=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),c=require("prop-types"),l=require("@progress/kendo-react-common"),j=require("../package-metadata.js");function z(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const t=z(P),d=t.forwardRef((e,s)=>{l.validatePackage(j.packageMetadata);const n=t.useRef(null),a=t.useRef(null),r=t.useRef(),f=l.useUnstyled(),i=f&&f.uTextBox,b=t.useCallback(()=>{var u;return r.current!==void 0?r.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(a,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return b()}})),t.useImperativeHandle(s,()=>a.current);const{size:m=o.size,fillMode:g=o.fillMode,rounded:v=o.rounded,autoFocus:h=o.autoFocus,className:x,dir:B,style:F,prefix:T=o.prefix,suffix:_=o.suffix,valid:w,modified:D,touched:H,visited:I,...M}=e,[O]=l.useCustomComponent(T),[R]=l.useCustomComponent(_),[C,y]=t.useState(!1),N=u=>{y(!0)},S=u=>{y(!1)},k=t.useCallback(u=>{r.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:a.current}),r.current=void 0},[e.onChange]),{onFocus:p,onBlur:q}=l.useAsyncFocusBlur({onFocus:N,onBlur:S,onSyncFocus:e.onFocus,onSyncBlur:e.onBlur}),E=t.useMemo(()=>l.classNames(l.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:C,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,C,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:F,dir:B,className:E,onFocus:p,onBlur:q},t.createElement(O,null),t.createElement("input",{ref:n,className:l.classNames(l.uTextBox.input({c:i})),autoFocus:h,...M,onChange:k}),t.createElement(R,null))}),o={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:c.oneOf([null,"small","medium","large"]),rounded:c.oneOf([null,"small","medium","large","full"]),fillMode:c.oneOf([null,"solid","flat","outline"]),autoFocus:c.bool};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;