@progress/kendo-react-inputs 14.5.0-develop.9 → 15.0.0-develop.1

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.
Files changed (58) hide show
  1. package/MaskedTextBoxMcpWrapper.d.ts +17 -0
  2. package/MaskedTextBoxMcpWrapper.js +8 -0
  3. package/MaskedTextBoxMcpWrapper.mjs +18 -0
  4. package/README.md +4 -4
  5. package/checkbox/Checkbox.js +1 -1
  6. package/checkbox/Checkbox.mjs +64 -64
  7. package/colors/ColorGradient.js +1 -1
  8. package/colors/ColorGradient.mjs +74 -72
  9. package/colors/ColorInput.js +1 -1
  10. package/colors/ColorInput.mjs +57 -45
  11. package/colors/ColorPalette.js +1 -1
  12. package/colors/ColorPalette.mjs +84 -81
  13. package/colors/ColorPicker.js +1 -1
  14. package/colors/ColorPicker.mjs +203 -190
  15. package/colors/FlatColorPicker.js +1 -1
  16. package/colors/FlatColorPicker.mjs +86 -94
  17. package/colors/interfaces/ColorPickerProps.d.ts +6 -1
  18. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  19. package/index.d.mts +5 -1
  20. package/index.d.ts +5 -1
  21. package/index.js +1 -1
  22. package/index.mjs +92 -89
  23. package/maskedtextbox/MaskedTextBoxProps.d.ts +6 -1
  24. package/messages/index.d.ts +55 -0
  25. package/messages/index.js +1 -1
  26. package/messages/index.mjs +82 -60
  27. package/numerictextbox/NumericTextBox.js +1 -1
  28. package/numerictextbox/NumericTextBox.mjs +190 -188
  29. package/numerictextbox/interfaces/NumericTextBoxProps.d.ts +6 -1
  30. package/package-metadata.js +1 -1
  31. package/package-metadata.mjs +2 -2
  32. package/package.json +10 -10
  33. package/radiobutton/RadioButton.js +1 -1
  34. package/radiobutton/RadioButton.mjs +23 -20
  35. package/radiobutton/interfaces/RadioButtonProps.d.ts +7 -0
  36. package/range-slider/RangeSlider.d.ts +14 -1
  37. package/range-slider/RangeSlider.js +11 -11
  38. package/range-slider/RangeSlider.mjs +188 -185
  39. package/rating/Rating.d.ts +6 -1
  40. package/rating/Rating.js +3 -3
  41. package/rating/Rating.mjs +88 -81
  42. package/signature/Signature.js +1 -1
  43. package/signature/Signature.mjs +127 -129
  44. package/signature/interfaces/SignatureProps.d.ts +6 -1
  45. package/slider/Slider.d.ts +6 -1
  46. package/slider/Slider.js +1 -1
  47. package/slider/Slider.mjs +149 -144
  48. package/slider/SliderLabel.js +1 -1
  49. package/slider/SliderLabel.mjs +3 -2
  50. package/switch/Switch.d.ts +6 -1
  51. package/switch/Switch.js +1 -1
  52. package/switch/Switch.mjs +100 -100
  53. package/textarea/TextArea.js +1 -1
  54. package/textarea/TextArea.mjs +101 -101
  55. package/textarea/interfaces/TextAreaProps.d.ts +6 -1
  56. package/textbox/Textbox.d.ts +20 -1
  57. package/textbox/Textbox.js +1 -1
  58. package/textbox/Textbox.mjs +92 -81
@@ -5,7 +5,7 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
8
+ import { CustomComponent, FormComponentProps, WebMcpProps } from '@progress/kendo-react-common';
9
9
  import { TextAreaBlurEvent } from './TextAreaBlurEvent';
10
10
  import { TextAreaChangeEvent } from './TextAreaChangeEvent';
11
11
  import { TextAreaFocusEvent } from './TextAreaFocusEvent';
@@ -210,5 +210,10 @@ export interface TextAreaProps extends FormComponentProps, Omit<React.TextareaHT
210
210
  * @hidden
211
211
  */
212
212
  textareaStyle?: React.CSSProperties;
213
+ /**
214
+ * Enables Web MCP tool registration for this component.
215
+ * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
216
+ */
217
+ webMcp?: boolean | WebMcpProps;
213
218
  }
214
219
  export {};
@@ -5,7 +5,7 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { BaseEvent, CustomComponent, InputsClassStructure } from '@progress/kendo-react-common';
8
+ import { BaseEvent, CustomComponent, InputsClassStructure, WebMcpProps } from '@progress/kendo-react-common';
9
9
  import * as React from 'react';
10
10
  export interface TextBoxChangeEvent extends BaseEvent<TextBoxHandle> {
11
11
  /**
@@ -91,6 +91,23 @@ export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
91
91
  * This property is related to accessibility.
92
92
  */
93
93
  inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
94
+ /**
95
+ * Enables Web MCP tool registration for this component.
96
+ * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
97
+ *
98
+ * Pass `true` for defaults or an object for fine-grained control.
99
+ * When absent or `false`, zero webMcp overhead.
100
+ *
101
+ * @example
102
+ * ```tsx
103
+ * // Boolean — use provider's dataName
104
+ * <TextBox webMcp value={value} onChange={handleChange} />
105
+ *
106
+ * // Config object — override dataName per component
107
+ * <TextBox webMcp={{ dataName: 'firstName' }} value={value} onChange={handleChange} />
108
+ * ```
109
+ */
110
+ webMcp?: boolean | WebMcpProps;
94
111
  }
95
112
  /**
96
113
  * Represent the `ref` of the TextBox component.
@@ -99,6 +116,8 @@ export type TextBoxHandle = {
99
116
  element: HTMLInputElement | null;
100
117
  value: TextBoxProps['value'];
101
118
  name?: string | null;
119
+ /** Programmatically set the value. Triggers `onChange` if provided. */
120
+ setValue: (value: string) => void;
102
121
  };
103
122
  /**
104
123
  * Represents the [KendoReact TextBox component](https://www.telerik.com/kendo-react-ui/components/inputs/textbox).
@@ -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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common");function $(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const n=$(K),v=n.forwardRef((e,s)=>{const t=n.useRef(null),o=n.useRef(null),c=n.useRef(void 0),g=a.useUnstyled(),y=g&&g.uTextBox,C=n.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=t.current)==null?void 0:u.value},[]);n.useImperativeHandle(o,()=>({get element(){return t.current},get name(){return t.current&&t.current.name},get value(){return C()}})),n.useImperativeHandle(s,()=>o.current);const{size:i=r.size,fillMode:f=r.fillMode,rounded:d=r.rounded,autoFocus:k=r.autoFocus,inputAttributes:_,className:x,dir:B,style:M,prefix:F=r.prefix,suffix:S=r.suffix,valid:w,onFocus:T,onBlur:p,modified:H,touched:V,visited:G,validationMessage:U,autoSize:J,textareaStyle:L,...O}=e,[N]=a.useCustomComponent(F),[R]=a.useCustomComponent(S),[b,h]=n.useState(!1),q=u=>{h(!0)},z=u=>{h(!1)},m=n.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:o.current}),c.current=void 0},[e.onChange]),E=e.name||e.id,P=n.useCallback(u=>{t.current&&(t.current.value=u);const I={target:t.current,currentTarget:t.current};m(I)},[m]);a.useKendoPaste(t,{fieldName:E,onValueChange:P});const{onFocus:j,onBlur:A}=a.useAsyncFocusBlur({onFocus:q,onBlur:z,onSyncFocus:T,onSyncBlur:p}),D=n.useMemo(()=>a.classNames("k-input","k-textbox",{[`k-input-${a.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-input-${f}`]:f,[`k-rounded-${a.kendoThemeMaps.roundedMap[d]||d}`]:d,"k-focus":b,"k-required":e.required,"k-disabled":e.disabled,"k-invalid":e.valid===!1},x),[x,f,b,e.disabled,e.required,e.valid,d,i]);return n.createElement("span",{style:M,dir:B,className:D,onFocus:j,onBlur:A},n.createElement(N,null),n.createElement("input",{ref:t,className:a.classNames(a.uTextBox.inputInner({c:y})),autoFocus:k,...Object.assign({},O,_),"aria-required":e.required,onChange:m}),n.createElement(R,null))}),r={prefix:e=>null,suffix:e=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};v.propTypes={size:l.oneOf(["small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["solid","flat","outline"]),autoFocus:l.bool,inputAttributes:l.object};v.displayName="KendoReactTextBoxComponent";exports.TextBox=v;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),l=require("prop-types"),r=require("@progress/kendo-react-common");function H(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const n=H($),x=n.forwardRef((e,s)=>{const t=n.useRef(null),a=n.useRef(null),c=n.useRef(void 0),b=r.useUnstyled(),M=b&&b.uTextBox,_=n.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=t.current)==null?void 0:u.value},[]),i=n.useRef(null);n.useImperativeHandle(a,()=>({get element(){return t.current},get name(){return t.current&&t.current.name},get value(){return _()},setValue(g){var k;t.current&&(t.current.value=g);const V={target:t.current,currentTarget:t.current};(k=i.current)==null||k.call(i,V)}})),n.useImperativeHandle(s,()=>a.current),r.useWebMcpRegister("textbox",a,e,e.webMcp);const{size:d=o.size,fillMode:v=o.fillMode,rounded:f=o.rounded,autoFocus:B=o.autoFocus,inputAttributes:T,className:y,dir:F,style:S,prefix:O=o.prefix,suffix:R=o.suffix,valid:G,onFocus:E,onBlur:N,modified:U,touched:W,visited:J,validationMessage:L,autoSize:Q,textareaStyle:X,...p}=e,[q]=r.useCustomComponent(O),[z]=r.useCustomComponent(R),[h,C]=n.useState(!1),P=u=>{C(!0)},j=u=>{C(!1)},m=n.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:a.current}),c.current=void 0},[e.onChange]);i.current=m;const w=e.name||e.id,A=n.useCallback(u=>{t.current&&(t.current.value=u);const g={target:t.current,currentTarget:t.current};m(g)},[m]);r.useKendoPaste(t,{fieldName:w,onValueChange:A});const{onFocus:D,onBlur:I}=r.useAsyncFocusBlur({onFocus:P,onBlur:j,onSyncFocus:E,onSyncBlur:N}),K=n.useMemo(()=>r.classNames("k-input","k-textbox",{[`k-input-${r.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-input-${v}`]:v,[`k-rounded-${r.kendoThemeMaps.roundedMap[f]||f}`]:f,"k-focus":h,"k-required":e.required,"k-disabled":e.disabled,"k-invalid":e.valid===!1},y),[y,v,h,e.disabled,e.required,e.valid,f,d]);return n.createElement("span",{style:S,dir:F,className:K,onFocus:D,onBlur:I},n.createElement(q,null),n.createElement("input",{ref:t,className:r.classNames(r.uTextBox.inputInner({c:M})),autoFocus:B,...Object.assign({},p,T),"aria-required":e.required,onChange:m}),n.createElement(z,null))}),o={prefix:e=>null,suffix:e=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};x.propTypes={size:l.oneOf(["small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["solid","flat","outline"]),autoFocus:l.bool,inputAttributes:l.object};x.displayName="KendoReactTextBoxComponent";exports.TextBox=x;
@@ -6,109 +6,120 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  import * as t from "react";
9
- import o from "prop-types";
10
- import { useUnstyled as V, useCustomComponent as g, useKendoPaste as w, useAsyncFocusBlur as D, classNames as h, kendoThemeMaps as C, uTextBox as G } from "@progress/kendo-react-common";
11
- const k = t.forwardRef((e, y) => {
12
- const u = t.useRef(null), i = t.useRef(null), l = t.useRef(void 0), f = V(), b = f && f.uTextBox, B = t.useCallback(() => {
13
- var n;
14
- return l.current !== void 0 ? l.current : (n = u.current) == null ? void 0 : n.value;
15
- }, []);
16
- t.useImperativeHandle(i, () => ({
9
+ import a from "prop-types";
10
+ import { useUnstyled as G, useWebMcpRegister as U, useCustomComponent as y, useKendoPaste as W, useAsyncFocusBlur as J, classNames as C, kendoThemeMaps as k, uTextBox as L } from "@progress/kendo-react-common";
11
+ const B = t.forwardRef((e, F) => {
12
+ const n = t.useRef(null), o = t.useRef(null), s = t.useRef(void 0), v = G(), M = v && v.uTextBox, _ = t.useCallback(() => {
13
+ var u;
14
+ return s.current !== void 0 ? s.current : (u = n.current) == null ? void 0 : u.value;
15
+ }, []), l = t.useRef(null);
16
+ t.useImperativeHandle(o, () => ({
17
17
  get element() {
18
- return u.current;
18
+ return n.current;
19
19
  },
20
20
  get name() {
21
- return u.current && u.current.name;
21
+ return n.current && n.current.name;
22
22
  },
23
23
  get value() {
24
- return B();
24
+ return _();
25
+ },
26
+ setValue(m) {
27
+ var b;
28
+ n.current && (n.current.value = m);
29
+ const D = {
30
+ target: n.current,
31
+ currentTarget: n.current
32
+ };
33
+ (b = l.current) == null || b.call(l, D);
25
34
  }
26
- })), t.useImperativeHandle(y, () => i.current);
35
+ })), t.useImperativeHandle(F, () => o.current), U("textbox", o, e, e.webMcp);
27
36
  const {
28
- size: r = a.size,
29
- fillMode: c = a.fillMode,
30
- rounded: s = a.rounded,
31
- autoFocus: F = a.autoFocus,
32
- inputAttributes: _,
33
- className: m,
34
- dir: M,
35
- style: E,
36
- prefix: S = a.prefix,
37
- suffix: T = a.suffix,
38
- valid: U,
39
- onFocus: z,
40
- onBlur: N,
37
+ size: c = r.size,
38
+ fillMode: f = r.fillMode,
39
+ rounded: i = r.rounded,
40
+ autoFocus: E = r.autoFocus,
41
+ inputAttributes: T,
42
+ className: x,
43
+ dir: R,
44
+ style: S,
45
+ prefix: z = r.prefix,
46
+ suffix: N = r.suffix,
47
+ valid: Q,
48
+ onFocus: q,
49
+ onBlur: P,
41
50
  // Destruct to avoid warning when used inside a form field
42
- modified: J,
43
- touched: L,
44
- visited: Q,
45
- validationMessage: W,
46
- autoSize: X,
47
- textareaStyle: Y,
48
- ...R
49
- } = e, [p] = g(S), [q] = g(T), [v, x] = t.useState(!1), P = (n) => {
50
- x(!0);
51
- }, O = (n) => {
52
- x(!1);
51
+ modified: X,
52
+ touched: Y,
53
+ visited: Z,
54
+ validationMessage: ee,
55
+ autoSize: te,
56
+ textareaStyle: ne,
57
+ ...O
58
+ } = e, [p] = y(z), [A] = y(N), [g, h] = t.useState(!1), I = (u) => {
59
+ h(!0);
60
+ }, K = (u) => {
61
+ h(!1);
53
62
  }, d = t.useCallback(
54
- (n) => {
55
- l.current = n.target.value, e.onChange && e.onChange.call(void 0, {
56
- syntheticEvent: n,
57
- nativeEvent: n.nativeEvent,
58
- value: n.target.value,
59
- target: i.current
60
- }), l.current = void 0;
63
+ (u) => {
64
+ s.current = u.target.value, e.onChange && e.onChange.call(void 0, {
65
+ syntheticEvent: u,
66
+ nativeEvent: u.nativeEvent,
67
+ value: u.target.value,
68
+ target: o.current
69
+ }), s.current = void 0;
61
70
  },
62
71
  [e.onChange]
63
- ), A = e.name || e.id, I = t.useCallback(
64
- (n) => {
65
- u.current && (u.current.value = n);
66
- const H = {
67
- target: u.current,
68
- currentTarget: u.current
72
+ );
73
+ l.current = d;
74
+ const V = e.name || e.id, $ = t.useCallback(
75
+ (u) => {
76
+ n.current && (n.current.value = u);
77
+ const m = {
78
+ target: n.current,
79
+ currentTarget: n.current
69
80
  };
70
- d(H);
81
+ d(m);
71
82
  },
72
83
  [d]
73
84
  );
74
- w(u, {
75
- fieldName: A,
76
- onValueChange: I
85
+ W(n, {
86
+ fieldName: V,
87
+ onValueChange: $
77
88
  });
78
- const { onFocus: K, onBlur: $ } = D({
79
- onFocus: P,
80
- onBlur: O,
81
- onSyncFocus: z,
82
- onSyncBlur: N
83
- }), j = t.useMemo(
84
- () => h(
89
+ const { onFocus: j, onBlur: w } = J({
90
+ onFocus: I,
91
+ onBlur: K,
92
+ onSyncFocus: q,
93
+ onSyncBlur: P
94
+ }), H = t.useMemo(
95
+ () => C(
85
96
  "k-input",
86
97
  "k-textbox",
87
98
  {
88
- [`k-input-${C.sizeMap[r] || r}`]: r,
89
- [`k-input-${c}`]: c,
90
- [`k-rounded-${C.roundedMap[s] || s}`]: s,
91
- "k-focus": v,
99
+ [`k-input-${k.sizeMap[c] || c}`]: c,
100
+ [`k-input-${f}`]: f,
101
+ [`k-rounded-${k.roundedMap[i] || i}`]: i,
102
+ "k-focus": g,
92
103
  "k-required": e.required,
93
104
  "k-disabled": e.disabled,
94
105
  "k-invalid": e.valid === !1
95
106
  },
96
- m
107
+ x
97
108
  ),
98
- [m, c, v, e.disabled, e.required, e.valid, s, r]
109
+ [x, f, g, e.disabled, e.required, e.valid, i, c]
99
110
  );
100
- return /* @__PURE__ */ t.createElement("span", { style: E, dir: M, className: j, onFocus: K, onBlur: $ }, /* @__PURE__ */ t.createElement(p, null), /* @__PURE__ */ t.createElement(
111
+ return /* @__PURE__ */ t.createElement("span", { style: S, dir: R, className: H, onFocus: j, onBlur: w }, /* @__PURE__ */ t.createElement(p, null), /* @__PURE__ */ t.createElement(
101
112
  "input",
102
113
  {
103
- ref: u,
104
- className: h(G.inputInner({ c: b })),
105
- autoFocus: F,
106
- ...Object.assign({}, R, _),
114
+ ref: n,
115
+ className: C(L.inputInner({ c: M })),
116
+ autoFocus: E,
117
+ ...Object.assign({}, O, T),
107
118
  "aria-required": e.required,
108
119
  onChange: d
109
120
  }
110
- ), /* @__PURE__ */ t.createElement(q, null));
111
- }), a = {
121
+ ), /* @__PURE__ */ t.createElement(A, null));
122
+ }), r = {
112
123
  prefix: (e) => null,
113
124
  suffix: (e) => null,
114
125
  size: void 0,
@@ -116,14 +127,14 @@ const k = t.forwardRef((e, y) => {
116
127
  fillMode: void 0,
117
128
  autoFocus: !1
118
129
  };
119
- k.propTypes = {
120
- size: o.oneOf(["small", "medium", "large"]),
121
- rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
122
- fillMode: o.oneOf(["solid", "flat", "outline"]),
123
- autoFocus: o.bool,
124
- inputAttributes: o.object
130
+ B.propTypes = {
131
+ size: a.oneOf(["small", "medium", "large"]),
132
+ rounded: a.oneOf(["small", "medium", "large", "full", "none"]),
133
+ fillMode: a.oneOf(["solid", "flat", "outline"]),
134
+ autoFocus: a.bool,
135
+ inputAttributes: a.object
125
136
  };
126
- k.displayName = "KendoReactTextBoxComponent";
137
+ B.displayName = "KendoReactTextBoxComponent";
127
138
  export {
128
- k as TextBox
139
+ B as TextBox
129
140
  };