@progress/kendo-react-inputs 8.3.0-develop.9 → 8.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/checkbox/Checkbox.js +1 -1
- package/checkbox/Checkbox.mjs +83 -82
- package/colors/ColorGradient.js +1 -1
- package/colors/ColorGradient.mjs +31 -25
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +6 -3
- package/index.d.ts +6 -3
- package/input/Input.js +1 -1
- package/input/Input.mjs +14 -13
- package/input/InputClearValue.js +1 -1
- package/input/InputClearValue.mjs +14 -10
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +28 -24
- package/maskedtextbox/parsing/stream.mjs +2 -0
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +67 -66
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/radiobutton/RadioButton.js +1 -1
- package/radiobutton/RadioButton.mjs +26 -24
- package/radiobutton/RadioGroup.js +1 -1
- package/radiobutton/RadioGroup.mjs +26 -25
- package/slider/Slider.mjs +12 -19
- package/switch/Switch.js +1 -1
- package/switch/Switch.mjs +3 -3
- package/textarea/TextArea.js +1 -1
- package/textarea/TextArea.mjs +28 -27
- package/textbox/Textbox.js +1 -1
- package/textbox/Textbox.mjs +24 -23
package/index.d.mts
CHANGED
|
@@ -1276,7 +1276,12 @@ export declare type InputClearValueHandle = {
|
|
|
1276
1276
|
/**
|
|
1277
1277
|
* Represents the `props` of the `InputClearValue` component.
|
|
1278
1278
|
*/
|
|
1279
|
-
export declare
|
|
1279
|
+
export declare interface InputClearValueProps extends React_2.HTMLAttributes<HTMLSpanElement> {
|
|
1280
|
+
/**
|
|
1281
|
+
* @hidden
|
|
1282
|
+
*/
|
|
1283
|
+
unstyled?: InputsClassStructure;
|
|
1284
|
+
}
|
|
1280
1285
|
|
|
1281
1286
|
/**
|
|
1282
1287
|
* Represent the `ref` of the Input component.
|
|
@@ -1931,7 +1936,6 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
|
|
|
1931
1936
|
rules: {
|
|
1932
1937
|
[key: string]: RegExp;
|
|
1933
1938
|
};
|
|
1934
|
-
required: boolean;
|
|
1935
1939
|
validityStyles: boolean;
|
|
1936
1940
|
prefix: (_: any) => null;
|
|
1937
1941
|
suffix: (_: any) => null;
|
|
@@ -4026,7 +4030,6 @@ export declare class SwitchWithoutContext extends React_2.Component<SwitchProps,
|
|
|
4026
4030
|
onBlur: () => void;
|
|
4027
4031
|
onFocus: () => void;
|
|
4028
4032
|
onLabel: string;
|
|
4029
|
-
required: boolean;
|
|
4030
4033
|
validityStyles: boolean;
|
|
4031
4034
|
};
|
|
4032
4035
|
/**
|
package/index.d.ts
CHANGED
|
@@ -1276,7 +1276,12 @@ export declare type InputClearValueHandle = {
|
|
|
1276
1276
|
/**
|
|
1277
1277
|
* Represents the `props` of the `InputClearValue` component.
|
|
1278
1278
|
*/
|
|
1279
|
-
export declare
|
|
1279
|
+
export declare interface InputClearValueProps extends React_2.HTMLAttributes<HTMLSpanElement> {
|
|
1280
|
+
/**
|
|
1281
|
+
* @hidden
|
|
1282
|
+
*/
|
|
1283
|
+
unstyled?: InputsClassStructure;
|
|
1284
|
+
}
|
|
1280
1285
|
|
|
1281
1286
|
/**
|
|
1282
1287
|
* Represent the `ref` of the Input component.
|
|
@@ -1931,7 +1936,6 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
|
|
|
1931
1936
|
rules: {
|
|
1932
1937
|
[key: string]: RegExp;
|
|
1933
1938
|
};
|
|
1934
|
-
required: boolean;
|
|
1935
1939
|
validityStyles: boolean;
|
|
1936
1940
|
prefix: (_: any) => null;
|
|
1937
1941
|
suffix: (_: any) => null;
|
|
@@ -4026,7 +4030,6 @@ export declare class SwitchWithoutContext extends React_2.Component<SwitchProps,
|
|
|
4026
4030
|
onBlur: () => void;
|
|
4027
4031
|
onFocus: () => void;
|
|
4028
4032
|
onLabel: string;
|
|
4029
|
-
required: boolean;
|
|
4030
4033
|
validityStyles: boolean;
|
|
4031
4034
|
};
|
|
4032
4035
|
/**
|
package/input/Input.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"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
|
|
8
|
+
"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 h=D(I),s=class s extends h.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:u,visited:w,touched:q,modified:F,autoFocus:m,ariaLabelledBy:b,ariaDescribedBy:_,validityStyles:E,style:c,ariaLabel:C,...o}=this.props,v=r||this._inputId,p=!this.validityStyles||this.validity.valid,M=u&&u.uInput,S=l.classNames(e,l.uInput.input({c:M,invalid:!p,disabled:this.props.disabled})),y=h.createElement("input",{"aria-labelledby":b,"aria-describedby":_,"aria-disabled":this.props.disabled||void 0,"aria-invalid":!p||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?h.createElement(P.FloatingLabel,{label:t,labelClassName:i,editorId:v,editorValue:String(this.value),editorValid:p,editorDisabled:o.disabled,editorPlaceholder:o.placeholder,children:y,style:c,dir:o.dir,unstyled:u}):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
CHANGED
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
9
|
+
import * as o from "react";
|
|
10
10
|
import i from "prop-types";
|
|
11
11
|
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";
|
|
12
12
|
import { FloatingLabel as P } from "@progress/kendo-react-labels";
|
|
13
13
|
import { packageMetadata as D } from "../package-metadata.mjs";
|
|
14
|
-
const s = class s extends
|
|
14
|
+
const s = class s extends o.Component {
|
|
15
15
|
constructor(e) {
|
|
16
16
|
super(e), this._input = null, this.focus = () => {
|
|
17
17
|
this._input && this._input.focus();
|
|
@@ -113,7 +113,7 @@ const s = class s extends d.Component {
|
|
|
113
113
|
validationMessage: F,
|
|
114
114
|
defaultValue: k,
|
|
115
115
|
valid: E,
|
|
116
|
-
unstyled:
|
|
116
|
+
unstyled: r,
|
|
117
117
|
// Removed to support direct use in Form Field component
|
|
118
118
|
visited: B,
|
|
119
119
|
touched: U,
|
|
@@ -125,19 +125,19 @@ const s = class s extends d.Component {
|
|
|
125
125
|
style: u,
|
|
126
126
|
ariaLabel: m,
|
|
127
127
|
...n
|
|
128
|
-
} = this.props, h = l || this._inputId,
|
|
128
|
+
} = this.props, h = l || this._inputId, d = !this.validityStyles || this.validity.valid, f = r && r.uInput, b = M(e, S.input(
|
|
129
129
|
{
|
|
130
130
|
c: f,
|
|
131
|
-
invalid: !
|
|
131
|
+
invalid: !d,
|
|
132
132
|
disabled: this.props.disabled
|
|
133
133
|
}
|
|
134
|
-
)), v = /* @__PURE__ */
|
|
134
|
+
)), v = /* @__PURE__ */ o.createElement(
|
|
135
135
|
"input",
|
|
136
136
|
{
|
|
137
137
|
"aria-labelledby": y,
|
|
138
138
|
"aria-describedby": g,
|
|
139
139
|
"aria-disabled": this.props.disabled || void 0,
|
|
140
|
-
"aria-invalid": !
|
|
140
|
+
"aria-invalid": !d || void 0,
|
|
141
141
|
"aria-label": m || void 0,
|
|
142
142
|
...n,
|
|
143
143
|
style: t ? void 0 : u,
|
|
@@ -152,19 +152,20 @@ const s = class s extends d.Component {
|
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
);
|
|
155
|
-
return t ? /* @__PURE__ */
|
|
155
|
+
return t ? /* @__PURE__ */ o.createElement(
|
|
156
156
|
P,
|
|
157
157
|
{
|
|
158
158
|
label: t,
|
|
159
159
|
labelClassName: a,
|
|
160
160
|
editorId: h,
|
|
161
161
|
editorValue: String(this.value),
|
|
162
|
-
editorValid:
|
|
162
|
+
editorValid: d,
|
|
163
163
|
editorDisabled: n.disabled,
|
|
164
164
|
editorPlaceholder: n.placeholder,
|
|
165
165
|
children: v,
|
|
166
166
|
style: u,
|
|
167
|
-
dir: n.dir
|
|
167
|
+
dir: n.dir,
|
|
168
|
+
unstyled: r
|
|
168
169
|
}
|
|
169
170
|
) : v;
|
|
170
171
|
}
|
|
@@ -186,11 +187,11 @@ s.displayName = "Input", s.propTypes = {
|
|
|
186
187
|
validityStyles: !0,
|
|
187
188
|
autoFocus: !1
|
|
188
189
|
};
|
|
189
|
-
let
|
|
190
|
-
const O = I(), w = L(V(O, N(
|
|
190
|
+
let p = s;
|
|
191
|
+
const O = I(), w = L(V(O, N(p)));
|
|
191
192
|
w.displayName = "KendoReactInput";
|
|
192
193
|
export {
|
|
193
194
|
w as Input,
|
|
194
195
|
O as InputPropsContext,
|
|
195
|
-
|
|
196
|
+
p as InputWithoutContext
|
|
196
197
|
};
|
package/input/InputClearValue.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),r=require("@progress/kendo-react-common");function m(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,u.get?u:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const n=m(i),l=n.forwardRef((e,a)=>{const t=n.useRef(null),u=n.useRef(null),s=r.useUnstyled(),c=s&&s.uInput,o=r.classNames(r.uInput.clearButton({c}),e.className);return n.useImperativeHandle(t,()=>({element:u.current})),n.useImperativeHandle(a,()=>t.current),n.createElement("span",{...e,className:o})});l.displayName="KendoReactInputClearValue";exports.InputClearValue=l;
|
|
@@ -7,18 +7,22 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as e from "react";
|
|
10
|
-
import { classNames as
|
|
11
|
-
const
|
|
12
|
-
const
|
|
10
|
+
import { useUnstyled as c, classNames as m, uInput as o } from "@progress/kendo-react-common";
|
|
11
|
+
const p = e.forwardRef((t, a) => {
|
|
12
|
+
const n = e.useRef(null), l = e.useRef(null), s = c(), u = s && s.uInput, r = m(o.clearButton(
|
|
13
|
+
{
|
|
14
|
+
c: u
|
|
15
|
+
}
|
|
16
|
+
), t.className);
|
|
13
17
|
return e.useImperativeHandle(
|
|
14
|
-
|
|
15
|
-
() => ({ element:
|
|
18
|
+
n,
|
|
19
|
+
() => ({ element: l.current })
|
|
16
20
|
), e.useImperativeHandle(
|
|
17
|
-
|
|
18
|
-
() =>
|
|
19
|
-
), /* @__PURE__ */ e.createElement("span", { ...
|
|
21
|
+
a,
|
|
22
|
+
() => n.current
|
|
23
|
+
), /* @__PURE__ */ e.createElement("span", { ...t, className: r });
|
|
20
24
|
});
|
|
21
|
-
|
|
25
|
+
p.displayName = "KendoReactInputClearValue";
|
|
22
26
|
export {
|
|
23
|
-
|
|
27
|
+
p as InputClearValue
|
|
24
28
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),e=require("prop-types"),O=require("./masking.service.js"),h=require("./utils.js"),o=require("@progress/kendo-react-common"),M=require("@progress/kendo-react-labels"),E=require("../package-metadata.js");function V(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),e=require("prop-types"),O=require("./masking.service.js"),h=require("./utils.js"),o=require("@progress/kendo-react-common"),M=require("@progress/kendo-react-labels"),E=require("../package-metadata.js");function V(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const u=V(S),l=class l extends u.Component{constructor(s){super(s),this.state={},this._inputId=`k_${this.props.id}`,this._service=new O.MaskingService,this._isPasted=!1,this._selection=[null,null],this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.pasteHandler=t=>{const{selectionStart:i,selectionEnd:a}=t.target;a!==i&&(this._isPasted=!0,this._selection=[i||0,a||0])},this.onChangeHandler=t=>{const i=t.currentTarget,a=i.value,n=this._selection[0]||0,r=this._selection[1]||0;if(!this.props.mask){this._isPasted=!1,this._selection=[null,null],this.triggerOnChange(a,t);return}const p=this.value;let d;if(this._isPasted){this._isPasted=!1;const f=p.length-r,v=a.length-f;d=this._service.maskInRange(a.slice(n,v),p,n,r)}else d=this._service.maskInput(a,p,i.selectionStart||0);this._selection=[d.selection,d.selection],this.triggerOnChange(d.value,t)},this.focusHandler=t=>{this.state.focused||(this.setState({focused:!0}),this.props.onFocus&&this.props.onFocus.call(void 0,{target:this,syntheticEvent:t,nativeEvent:t.nativeEvent}))},this.blurHandler=t=>{this.state.focused&&(this.setState({focused:!1}),this.props.onBlur&&this.props.onBlur.call(void 0,{target:this,syntheticEvent:t,nativeEvent:t.nativeEvent}))},this.setValidity=()=>{this.element&&this.element.setCustomValidity(this.validity.valid?"":this.props.validationMessage||"")},o.validatePackage(E.packageMetadata)}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!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get rawValue(){return this._service.rawValue(this.value)}get validity(){const s=this.value,t=this._service.validationValue(s),i=this.props.validationMessage!==void 0,a=this.props.valid!==void 0?this.props.valid:(!this.required||!!t)&&(!this.props.maskValidation||!this.props.prompt||s.indexOf(this.props.prompt)===-1);return{customError:i,valid:a,valueMissing:!t}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:l.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get name(){return this.props.name}componentDidUpdate(s,t){if(this.element&&this.state.focused&&t.focused){let[i,a]=this._selection;const n=s.selection,r=this.props.selection;(!n&&r||n&&r&&(n.start!==r.start||n.end!==r.end))&&(i=r.start,a=r.end),i!==null&&a!==null&&this.element.setSelectionRange(i,a)}h.maskingChanged(s,this.props)&&this.updateService(),this.setValidity()}componentDidMount(){this.updateService(),this.setValidity()}render(){const{size:s=l.defaultProps.size,fillMode:t=l.defaultProps.fillMode,rounded:i=l.defaultProps.rounded,autoFocus:a=l.defaultProps.autoFocus,unstyled:n,className:r}=this.props,p=this.props.id||this._inputId,d=!this.validityStyles||this.validity.valid,f=this.props.style||{},v=n&&n.uMaskedTextBox,{prefix:x=l.defaultProps.prefix,suffix:C=l.defaultProps.suffix}=this.props,[P]=o.useCustomComponent(x),[_]=o.useCustomComponent(C),m=u.createElement("span",{dir:this.props.dir,className:o.classNames(o.uMaskedTextBox.wrapper({c:v,invalid:!d,disabled:this.props.disabled,size:s,fillMode:t,rounded:i}),r),style:this.props.label?f:{width:this.props.width,...f}},u.createElement(P,null),u.createElement("input",{type:"text",autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",autoFocus:a,spellCheck:!1,className:o.classNames(o.uMaskedTextBox.input({c:v})),value:this.value,id:p,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-placeholder":this.props.mask,"aria-required":this.props.required,name:this.props.name,tabIndex:o.getTabIndex(this.props.tabIndex,this.props.disabled,!0),accessKey:this.props.accessKey,title:this.props.title,disabled:this.props.disabled||void 0,readOnly:this.props.readonly||void 0,placeholder:this.props.placeholder,ref:k=>this._input=k,onChange:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragStart:h.returnFalse,onDrop:h.returnFalse}),u.createElement(_,null));return this.props.label?u.createElement(M.FloatingLabel,{label:this.props.label,editorId:p,editorValue:this.value,editorValid:d,editorDisabled:this.props.disabled,editorPlaceholder:this.props.placeholder,children:m,style:{width:this.props.width},dir:this.props.dir}):m}triggerOnChange(s,t){if(this.setState({value:s}),this.props.onChange){this._valueDuringOnChange=s;const i={syntheticEvent:t,nativeEvent:t.nativeEvent,selectionStart:this._selection[0],selectionEnd:this._selection[1],target:this,value:this.value};this.props.onChange.call(void 0,i),this._valueDuringOnChange=void 0}}updateService(s){const t=Object.assign({includeLiterals:this.props.includeLiterals,mask:this.props.mask,prompt:this.props.prompt,promptPlaceholder:this.props.promptPlaceholder,rules:this.rules},s);this._service.update(t)}get rules(){return Object.assign({},h.defaultRules,this.props.rules)}};l.displayName="MaskedTextBox",l.propTypes={value:e.string,defaultValue:e.string,placeholder:e.string,title:e.string,dir:e.string,id:e.string,style:e.object,className:e.string,prefix:e.any,suffix:e.any,ariaLabelledBy:e.string,ariaDescribedBy:e.string,width:e.oneOfType([e.string,e.number]),tabIndex:e.number,accessKey:e.string,disabled:e.bool,readonly:e.bool,prompt:e.string,promptPlaceholder:e.string,includeLiterals:e.bool,maskValidation:e.bool,mask:e.string,rules:function(s,t,i){const a=s.rules;return a!==void 0&&!Object.entries(a).some(r=>typeof r!="string"||!(a[r]instanceof RegExp))?new Error("Invalid prop `"+t+"` supplied to `"+i+"`. Validation failed."):null},selection:e.shape({start:e.number.isRequired,end:e.number.isRequired}),name:e.string,label:e.string,validationMessage:e.string,required:e.bool,valid:e.bool,validityStyles:e.bool,onChange:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},l.defaultProps={prompt:"_",promptPlaceholder:" ",includeLiterals:!1,maskValidation:!0,rules:h.defaultRules,validityStyles:!0,prefix:s=>null,suffix:s=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=l;const y=o.createPropsContext(),b=o.withIdHOC(o.withPropsContext(y,o.withUnstyledHOC(g)));b.displayName="KendoReactMaskedTextBox";exports.MaskedTextBox=b;exports.MaskedTextBoxPropsContext=y;exports.MaskedTextBoxWithoutContext=g;
|
|
@@ -48,9 +48,7 @@ const l = class l extends d.Component {
|
|
|
48
48
|
nativeEvent: t.nativeEvent
|
|
49
49
|
}));
|
|
50
50
|
}, this.setValidity = () => {
|
|
51
|
-
this.element && this.element.setCustomValidity(
|
|
52
|
-
this.validity.valid ? "" : this.props.validationMessage || ""
|
|
53
|
-
);
|
|
51
|
+
this.element && this.element.setCustomValidity(this.validity.valid ? "" : this.props.validationMessage || "");
|
|
54
52
|
}, O(q);
|
|
55
53
|
}
|
|
56
54
|
/**
|
|
@@ -120,7 +118,7 @@ const l = class l extends d.Component {
|
|
|
120
118
|
* @hidden
|
|
121
119
|
*/
|
|
122
120
|
get required() {
|
|
123
|
-
return this.props.required !== void 0 ? this.props.required :
|
|
121
|
+
return this.props.required !== void 0 ? this.props.required : !1;
|
|
124
122
|
}
|
|
125
123
|
/**
|
|
126
124
|
* Gets the `name` property of the MaskedTextBox.
|
|
@@ -158,24 +156,25 @@ const l = class l extends d.Component {
|
|
|
158
156
|
className: a
|
|
159
157
|
} = this.props, p = this.props.id || this._inputId, n = !this.validityStyles || this.validity.valid, u = this.props.style || {}, h = o && o.uMaskedTextBox, {
|
|
160
158
|
prefix: P = l.defaultProps.prefix,
|
|
161
|
-
suffix:
|
|
162
|
-
} = this.props, [
|
|
159
|
+
suffix: _ = l.defaultProps.suffix
|
|
160
|
+
} = this.props, [C] = g(P), [x] = g(_), f = /* @__PURE__ */ d.createElement(
|
|
163
161
|
"span",
|
|
164
162
|
{
|
|
165
163
|
dir: this.props.dir,
|
|
166
|
-
className: y(
|
|
167
|
-
{
|
|
164
|
+
className: y(
|
|
165
|
+
b.wrapper({
|
|
168
166
|
c: h,
|
|
169
167
|
invalid: !n,
|
|
170
168
|
disabled: this.props.disabled,
|
|
171
169
|
size: i,
|
|
172
170
|
fillMode: t,
|
|
173
171
|
rounded: r
|
|
174
|
-
}
|
|
175
|
-
|
|
172
|
+
}),
|
|
173
|
+
a
|
|
174
|
+
),
|
|
176
175
|
style: this.props.label ? u : { width: this.props.width, ...u }
|
|
177
176
|
},
|
|
178
|
-
/* @__PURE__ */ d.createElement(
|
|
177
|
+
/* @__PURE__ */ d.createElement(C, null),
|
|
179
178
|
/* @__PURE__ */ d.createElement(
|
|
180
179
|
"input",
|
|
181
180
|
{
|
|
@@ -191,6 +190,7 @@ const l = class l extends d.Component {
|
|
|
191
190
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
192
191
|
"aria-describedby": this.props.ariaDescribedBy,
|
|
193
192
|
"aria-placeholder": this.props.mask,
|
|
193
|
+
"aria-required": this.props.required,
|
|
194
194
|
name: this.props.name,
|
|
195
195
|
tabIndex: V(this.props.tabIndex, this.props.disabled, !0),
|
|
196
196
|
accessKey: this.props.accessKey,
|
|
@@ -241,13 +241,16 @@ const l = class l extends d.Component {
|
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
updateService(i) {
|
|
244
|
-
const t = Object.assign(
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
244
|
+
const t = Object.assign(
|
|
245
|
+
{
|
|
246
|
+
includeLiterals: this.props.includeLiterals,
|
|
247
|
+
mask: this.props.mask,
|
|
248
|
+
prompt: this.props.prompt,
|
|
249
|
+
promptPlaceholder: this.props.promptPlaceholder,
|
|
250
|
+
rules: this.rules
|
|
251
|
+
},
|
|
252
|
+
i
|
|
253
|
+
);
|
|
251
254
|
this._service.update(t);
|
|
252
255
|
}
|
|
253
256
|
get rules() {
|
|
@@ -267,10 +270,7 @@ l.displayName = "MaskedTextBox", l.propTypes = {
|
|
|
267
270
|
suffix: e.any,
|
|
268
271
|
ariaLabelledBy: e.string,
|
|
269
272
|
ariaDescribedBy: e.string,
|
|
270
|
-
width: e.oneOfType([
|
|
271
|
-
e.string,
|
|
272
|
-
e.number
|
|
273
|
-
]),
|
|
273
|
+
width: e.oneOfType([e.string, e.number]),
|
|
274
274
|
tabIndex: e.number,
|
|
275
275
|
accessKey: e.string,
|
|
276
276
|
disabled: e.bool,
|
|
@@ -307,7 +307,6 @@ l.displayName = "MaskedTextBox", l.propTypes = {
|
|
|
307
307
|
includeLiterals: !1,
|
|
308
308
|
maskValidation: !0,
|
|
309
309
|
rules: v,
|
|
310
|
-
required: !1,
|
|
311
310
|
validityStyles: !0,
|
|
312
311
|
prefix: (i) => null,
|
|
313
312
|
suffix: (i) => null,
|
|
@@ -317,7 +316,12 @@ l.displayName = "MaskedTextBox", l.propTypes = {
|
|
|
317
316
|
autoFocus: !1
|
|
318
317
|
};
|
|
319
318
|
let c = l;
|
|
320
|
-
const B = w(), F = M(
|
|
319
|
+
const B = w(), F = M(
|
|
320
|
+
I(
|
|
321
|
+
B,
|
|
322
|
+
D(c)
|
|
323
|
+
)
|
|
324
|
+
);
|
|
321
325
|
F.displayName = "KendoReactMaskedTextBox";
|
|
322
326
|
export {
|
|
323
327
|
F as MaskedTextBox,
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const He=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),we=require("@progress/kendo-react-labels"),Ke=require("../package-metadata.js"),g=require("../messages/index.js"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const He=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),we=require("@progress/kendo-react-labels"),Ke=require("../package-metadata.js"),g=require("../messages/index.js"),s=require("./utils/index.js"),pe=require("@progress/kendo-react-buttons");function $e(m){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const v in m)if(v!=="default"){const N=Object.getOwnPropertyDescriptor(m,v);Object.defineProperty(L,v,N.get?N:{enumerable:!0,get:()=>m[v]})}}return L.default=m,Object.freeze(L)}const n=$e(He),Ue="Please enter a valid value!",ge=o.createPropsContext(),Q=n.forwardRef((m,L)=>{o.validatePackage(Ke.packageMetadata);const v=o.usePropsContext(ge,m),{className:N,value:k,defaultValue:ve,format:u,width:X,tabIndex:ye,accessKey:Ve,title:ke,placeholder:Z,min:f,max:b,dir:ee,name:G,label:R,id:Ce,ariaDescribedBy:Se,ariaLabelledBy:Ee,ariaLabel:xe,inputType:Oe,readOnly:C,validationMessage:A,children:Ie,style:te,inputStyle:he,valid:H,step:S=i.step,spinners:Le=i.spinners,disabled:c=i.disabled,required:q=i.required,validityStyles:ne=i.validityStyles,prefix:Pe=i.prefix,suffix:De=i.suffix,onChange:I=i.onChange,onFocus:re=i.onFocus,onBlur:ae=i.onBlur,rangeOnEnter:ue=i.rangeOnEnter,size:w=i.size,rounded:K=i.rounded,fillMode:B=i.fillMode,autoFocus:Ne=i.autoFocus,...se}=v,Re=o.useId(),le=Ce||Re,l=fe.useInternationalization(),M=fe.useLocalization(),a=n.useRef(null),T=n.useRef(),[qe,h]=n.useState(!1),d=n.useRef(s.getInitialState()),F=n.useRef(!1),$=n.useRef(),P=n.useRef(ve),D=s.formatValue(d.current.focused&&!c?d.current.currentLooseValue:s.getStateOrPropsValue(k,P.current),u,l);$.current=D;const[Be]=o.useCustomComponent(Pe),[Me]=o.useCustomComponent(De);n.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(_().valid?"":A||Ue)});const oe=n.useCallback(()=>{a.current&&a.current.focus()},[]),j=n.useCallback(()=>T.current!==void 0?T.current:s.getStateOrPropsValue(k,P.current),[k]),ce=n.useCallback(()=>G,[G]),z=n.useCallback(()=>q,[q]),_=n.useCallback(()=>{const r=A!==void 0,e=j(),x=H!==void 0?H:!d.current.valueIsOutOfRange&&(!z()||e!=null);return{customError:r,valid:x,valueMissing:e==null}},[A,H,j,z]),U=n.useCallback(()=>ne,[ne]),ie=n.useCallback(()=>v,[v]),E=n.useCallback(()=>{const r={element:a.current,focus:oe};return Object.defineProperty(r,"name",{get:ce}),Object.defineProperty(r,"value",{get:j}),Object.defineProperty(r,"validity",{get:_}),Object.defineProperty(r,"validityStyles",{get:U}),Object.defineProperty(r,"required",{get:z}),Object.defineProperty(r,"props",{get:ie}),r},[ce,j,_,U,z,oe,ie]);n.useImperativeHandle(L,E);const y=n.useCallback(()=>({eventValue:s.getStateOrPropsValue(k,P.current),prevLooseValue:$.current,currentLooseValue:a.current.value,selectionStart:a.current.selectionStart,selectionEnd:a.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:F.current,focused:d.current.focused}),[k]),V=n.useCallback((r,e)=>{if(c)return;T.current=e.eventValue,P.current=e.eventValue;const x=s.formatValue(s.rangeValue(e.eventValue,f,b),u,l),p=s.rangeValue(l.parseNumber(x,u),f,b);p!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=p,P.current=p),k!==e.eventValue&&o.dispatchEvent(I,r,E(),{value:e.eventValue}),T.current=void 0,d.current=e,h(J=>!J)},[k,I,c,h,E]),Te=n.useCallback(r=>{const e=y();F.current=!1,V(r,s.sanitizeNumber(e,u,l))},[u,I,l,V,y]),Fe=n.useCallback(r=>{let e=y();const x=l.parseNumber(String(e.currentLooseValue),u);if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const p=l.numberSymbols(),O=p&&r.key===p.minusSign,J=p&&r.key===p.decimal;F.current=!O&&!J;return}switch(r.keyCode){case 38:s.increaseValue(x,e,S,f,b,u,l);break;case 40:s.decreaseValue(x,e,S,f,b,u,l);break;case 13:{if(ue===!1)return;const p=s.formatValue(s.rangeValue(x,f,b),u,l),O=s.rangeValue(l.parseNumber(p,u),f,b);e.eventValue=O,e.currentLooseValue=s.formatValue(O,u,l),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break}case 110:{const p=a.current,O=l.numberSymbols();p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+O.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=s.sanitizeNumber(e,u,l));break}default:return}r.preventDefault(),V(r,e)},[u,f,b,S,I,ue,V,y]),je=n.useCallback(()=>{F.current=!0},[]),W=n.useCallback(r=>{if(C||c)return;const e=y();s.increaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,I,C,c,V,y]),Y=n.useCallback(r=>{if(C||c)return;const e=y();s.decreaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,I,C,c,V,y]),ze=n.useCallback(r=>{const e=o.getActiveElement(document);!document||e!==a.current||!a.current||C||c||(r.nativeEvent.deltaY<0&&W(r),r.nativeEvent.deltaY>0&&Y(r))},[W,Y,c,C]),_e=n.useCallback(r=>{d.current.currentLooseValue=$.current,d.current.focused=!0,o.dispatchEvent(re,r,E(),{}),h(e=>!e)},[re,h,E]),Ge=n.useCallback(r=>{d.current=s.getInitialState(),o.dispatchEvent(ae,r,E(),{}),h(e=>!e)},[ae,h,E]),Ae=n.useCallback(r=>{if(document&&a.current){const e=o.getActiveElement(document);r.preventDefault(),e!==a.current&&a.current.focus()}},[]);o.useIsomorphicLayoutEffect(()=>{a.current&&a.current.type!=="number"&&d.current.selectionStart!==void 0&&d.current.selectionEnd!==void 0&&(a.current.selectionStart=d.current.selectionStart,a.current.selectionEnd=d.current.selectionEnd,d.current.selectionStart=void 0,d.current.selectionEnd=void 0)},[qe]);const de=!U()||_().valid,me=n.createElement("span",{dir:ee,style:R?te:{width:X,...te},className:o.classNames("k-input","k-numerictextbox",{[`k-input-${o.kendoThemeMaps.sizeMap[w]||w}`]:w,[`k-input-${B}`]:B,[`k-rounded-${o.kendoThemeMaps.roundedMap[K]||K}`]:K,"k-invalid":!de,"k-required":q,"k-disabled":c},N),"aria-disabled":c?"true":void 0,...R?{}:se},n.createElement(Be,null),n.createElement("input",{role:"spinbutton",value:D===null?"":D,tabIndex:o.getTabIndex(ye,c),accessKey:Ve,disabled:c,title:ke,"aria-disabled":c?"true":void 0,"aria-valuemin":f,"aria-valuemax":b,"aria-label":xe,"aria-labelledby":Ee,"aria-describedby":Se,"aria-required":q,placeholder:Z,spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:Ne,type:Oe||"tel",className:"k-input-inner",id:le,name:G,readOnly:C,style:he,onChange:Te,onFocus:_e,onBlur:Ge,onKeyDown:Fe,onPaste:je,onWheel:ze,ref:a}),n.createElement(Me,null),Ie,Le&&n.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:Ae},n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:be.caretAltUpIcon,rounded:null,fillMode:B,className:"k-spinner-increase","aria-label":M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),title:M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),onClick:W}),n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:be.caretAltDownIcon,rounded:null,fillMode:B,className:"k-spinner-decrease","aria-label":M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),title:M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),onClick:Y})));return R?n.createElement(we.FloatingLabel,{label:R,editorId:le,editorValue:D===null?"":D,editorValid:de,editorDisabled:c,editorPlaceholder:Z,children:me,style:{width:X},dir:ee,...se}):me});Q.propTypes={value:t.number,defaultValue:t.number,step:t.number,format:t.oneOfType([t.string,t.shape({style:t.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:t.string,currencyDisplay:t.oneOf(["symbol","code","name"]),useGrouping:t.bool,minimumIntegerDigits:t.number,minimumFractionDigits:t.number,maximumFractionDigits:t.number})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,title:t.string,placeholder:t.string,min:t.number,max:t.number,spinners:t.bool,disabled:t.bool,readOnly:t.bool,dir:t.string,name:t.string,label:t.string,validationMessage:t.string,required:t.bool,id:t.string,rangeOnEnter:t.bool,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,onChange:t.func,onFocus:t.func,onBlur:t.func,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"])};const i={prefix:m=>null,suffix:m=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,autoFocus:!1,onChange:m=>{},onFocus:m=>{},onBlur:m=>{},size:"medium",rounded:"medium",fillMode:"solid"};Q.displayName="KendoNumericTextBox";exports.NumericTextBox=Q;exports.NumericTextBoxPropsContext=ge;
|