@progress/kendo-react-inputs 8.2.0-develop.8 → 8.2.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.
Files changed (33) hide show
  1. package/checkbox/Checkbox.js +1 -1
  2. package/checkbox/Checkbox.mjs +74 -70
  3. package/colors/ColorGradient.js +1 -1
  4. package/colors/ColorGradient.mjs +181 -121
  5. package/colors/ColorPalette.js +1 -1
  6. package/colors/ColorPalette.mjs +29 -29
  7. package/colors/ColorPicker.js +1 -1
  8. package/colors/ColorPicker.mjs +168 -152
  9. package/colors/FlatColorPicker.js +1 -1
  10. package/colors/FlatColorPicker.mjs +120 -104
  11. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  12. package/index.d.mts +120 -45
  13. package/index.d.ts +120 -45
  14. package/input/Input.js +1 -1
  15. package/input/Input.mjs +47 -43
  16. package/maskedtextbox/MaskedTextBox.js +1 -1
  17. package/maskedtextbox/MaskedTextBox.mjs +61 -57
  18. package/numerictextbox/NumericTextBox.js +1 -1
  19. package/numerictextbox/NumericTextBox.mjs +89 -86
  20. package/package-metadata.mjs +1 -1
  21. package/package.json +8 -8
  22. package/range-slider/RangeSlider.js +11 -11
  23. package/range-slider/RangeSlider.mjs +176 -154
  24. package/range-slider/range-raducer.js +1 -1
  25. package/range-slider/range-raducer.mjs +35 -1
  26. package/signature/Signature.js +1 -1
  27. package/signature/Signature.mjs +112 -111
  28. package/slider/Slider.js +1 -1
  29. package/slider/Slider.mjs +29 -29
  30. package/textarea/TextArea.js +1 -1
  31. package/textarea/TextArea.mjs +96 -92
  32. package/textbox/Textbox.js +1 -1
  33. package/textbox/Textbox.mjs +54 -50
package/colors/FlatColorPicker.mjs CHANGED
@@ -7,110 +7,125 @@
7
7
  */
8
8
  "use client";
9
9
  import * as e from "react";
10
- import l from "prop-types";
11
- import { validatePackage as q, getTabIndex as D, classNames as b } from "@progress/kendo-react-common";
12
- import { ButtonGroup as K, Button as u } from "@progress/kendo-react-buttons";
13
- import { dropletSliderIcon as _, paletteIcon as j, dropletSlashIcon as J } from "@progress/kendo-svg-icons";
14
- import { ColorPalette as O } from "./ColorPalette.mjs";
15
- import { ColorGradient as Q } from "./ColorGradient.mjs";
16
- import { packageMetadata as U } from "../package-metadata.mjs";
17
- import { useLocalization as W } from "@progress/kendo-react-intl";
18
- import { flatColorPickerColorGradientBtn as N, messages as m, flatColorPickerColorPaletteBtn as B, flatColorPickerClearBtn as I, flatColorPickerCancelBtn as X, flatColorPickerApplyBtn as Y } from "../messages/index.mjs";
19
- const L = e.forwardRef((a, G) => {
20
- q(U);
21
- const v = e.useRef(null), s = e.useRef(null), S = e.useRef(null), { defaultValue: n, showButtons: C = !0, showPreview: x = !0, showClearButton: R = !0 } = a, [c, F] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [o, d] = e.useState(a.value || n || void 0), [r, k] = e.useState(a.value || n || void 0), f = a.value !== void 0 ? a.value : void 0;
10
+ import o from "prop-types";
11
+ import { validatePackage as q, Navigation as j, getActiveElement as h, disableNavigatableContainer as B, keepFocusInContainer as J, focusFirstFocusableChild as O, enableNavigatableContainer as Q, getTabIndex as U, classNames as E } from "@progress/kendo-react-common";
12
+ import { ButtonGroup as W, Button as u } from "@progress/kendo-react-buttons";
13
+ import { dropletSliderIcon as X, paletteIcon as Y, dropletSlashIcon as Z } from "@progress/kendo-svg-icons";
14
+ import { ColorPalette as $ } from "./ColorPalette.mjs";
15
+ import { ColorGradient as p } from "./ColorGradient.mjs";
16
+ import { packageMetadata as ee } from "../package-metadata.mjs";
17
+ import { useLocalization as ae } from "@progress/kendo-react-intl";
18
+ import { flatColorPickerColorGradientBtn as I, messages as m, flatColorPickerColorPaletteBtn as G, flatColorPickerClearBtn as L, flatColorPickerCancelBtn as te, flatColorPickerApplyBtn as oe } from "../messages/index.mjs";
19
+ const S = e.forwardRef((a, x) => {
20
+ q(ee);
21
+ const v = e.useRef(null), C = e.useRef(null), R = e.useRef(null), { defaultValue: r, showButtons: k = !0, showPreview: V = !0, showClearButton: F = !0 } = a, [c, T] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [l, s] = e.useState(a.value || r || void 0), [i, b] = e.useState(a.value || r || void 0), f = a.value !== void 0 ? a.value : void 0;
22
22
  e.useEffect(() => {
23
- d(a.value);
23
+ s(a.value);
24
24
  }, [a.value]);
25
- const g = W(), h = e.useCallback(
25
+ const g = ae(), y = e.useCallback(
26
26
  () => {
27
27
  v.current && v.current.focus();
28
28
  },
29
29
  [v]
30
30
  );
31
31
  e.useImperativeHandle(v, () => ({
32
- element: s.current,
33
- focus: h,
32
+ element: C.current,
33
+ focus: y,
34
34
  props: a,
35
35
  value: f
36
- }), [f, h, a]), e.useImperativeHandle(G, () => v.current);
37
- const E = e.useCallback(
36
+ }), [f, y, a]), e.useImperativeHandle(x, () => v.current);
37
+ const w = e.useCallback(
38
38
  (t) => {
39
- (t === "ColorGradient" && !c || t === "ColorPalette" && c) && F(!c);
39
+ (t === "ColorGradient" && !c || t === "ColorPalette" && c) && T(!c);
40
40
  },
41
41
  [c]
42
- ), V = e.useCallback(
42
+ ), _ = e.useCallback(
43
43
  (t) => {
44
- if (n ? (d(n), k(n)) : (d(void 0), k(void 0)), a.onPreviewChange) {
45
- const i = {
46
- value: n || void 0,
44
+ if (r ? (s(r), b(r)) : (s(void 0), b(void 0)), a.onPreviewChange) {
45
+ const n = {
46
+ value: r || void 0,
47
47
  nativeEvent: t.nativeEvent,
48
48
  syntheticEvent: t
49
49
  };
50
- a.onPreviewChange.call(void 0, i);
50
+ a.onPreviewChange.call(void 0, n);
51
51
  }
52
52
  },
53
- [n, a.onPreviewChange]
54
- ), y = e.useCallback(
53
+ [r, a.onPreviewChange]
54
+ ), P = e.useCallback(
55
55
  (t) => {
56
- if (d(t.value), a.onPreviewChange) {
57
- const i = {
56
+ if (s(t.value), a.onPreviewChange) {
57
+ const n = {
58
58
  value: t.value,
59
59
  nativeEvent: t.nativeEvent,
60
60
  syntheticEvent: t.syntheticEvent
61
61
  };
62
- a.onPreviewChange.call(void 0, i);
62
+ a.onPreviewChange.call(void 0, n);
63
63
  }
64
64
  },
65
65
  [a.onPreviewChange]
66
- ), T = e.useCallback(
66
+ ), M = e.useCallback(
67
67
  (t) => {
68
- if (o !== void 0 && k(o), a.onChange) {
69
- const i = {
70
- value: o,
68
+ if (l !== void 0 && b(l), a.onChange) {
69
+ const n = {
70
+ value: l,
71
71
  nativeEvent: t.nativeEvent,
72
72
  syntheticEvent: t
73
73
  };
74
- a.onChange.call(void 0, i);
74
+ a.onChange.call(void 0, n);
75
75
  }
76
76
  },
77
- [o, a.onChange]
78
- ), M = e.useCallback(
77
+ [l, a.onChange]
78
+ ), K = e.useCallback(
79
79
  () => {
80
- d(r);
80
+ s(i);
81
81
  },
82
- [r]
82
+ [i]
83
83
  ), z = e.useCallback(
84
84
  (t) => {
85
- if (d(r), a.onPreviewChange) {
86
- const i = {
87
- value: r,
85
+ if (s(i), a.onPreviewChange) {
86
+ const n = {
87
+ value: i,
88
88
  nativeEvent: t.nativeEvent,
89
89
  syntheticEvent: t
90
90
  };
91
- a.onPreviewChange.call(void 0, i);
91
+ a.onPreviewChange.call(void 0, n);
92
92
  }
93
93
  },
94
- [r, a.onPreviewChange]
95
- ), w = e.useCallback(
96
- (t) => {
97
- s.current && !(t.nativeEvent.target instanceof HTMLInputElement) && s.current.focus();
98
- },
99
- [s]
100
- ), H = e.useCallback(
94
+ [i, a.onPreviewChange]
95
+ ), A = e.useCallback(
101
96
  (t) => {
102
- var P;
103
- if ((!t.relatedTarget || !((P = s.current) != null && P.contains(t.relatedTarget))) && (!C && o !== void 0 && k(o), !C && a.onChange)) {
104
- const A = {
105
- value: o,
97
+ var d;
98
+ if ((!t.relatedTarget || !((d = C.current) != null && d.contains(t.relatedTarget))) && (!k && l !== void 0 && b(l), !k && a.onChange)) {
99
+ const H = {
100
+ value: l,
106
101
  nativeEvent: t.nativeEvent,
107
102
  syntheticEvent: t
108
103
  };
109
- a.onChange.call(void 0, A);
104
+ a.onChange.call(void 0, H);
110
105
  }
111
106
  },
112
- [o, C, a.onChange]
113
- );
107
+ [l, k, a.onChange]
108
+ ), N = e.useMemo(
109
+ () => new j({
110
+ root: C,
111
+ selectors: [".k-coloreditor"],
112
+ tabIndex: 0,
113
+ keyboardEvents: {
114
+ keydown: {
115
+ Tab: (t, n, d) => {
116
+ h(document) === t ? B(t) : J(d, t);
117
+ },
118
+ Enter: (t, n, d) => {
119
+ h(document) === t && (O(t), Q(t));
120
+ },
121
+ Escape: (t, n, d) => {
122
+ h(document) !== t && (t.focus(), B(t));
123
+ }
124
+ }
125
+ }
126
+ }),
127
+ []
128
+ ), D = e.useCallback(N.triggerKeyboardEvent.bind(N), []);
114
129
  return /* @__PURE__ */ e.createElement(
115
130
  "div",
116
131
  {
@@ -120,97 +135,98 @@ const L = e.forwardRef((a, G) => {
120
135
  "aria-labelledby": a.ariaLabelledBy,
121
136
  "aria-disabled": a.disabled ? "true" : void 0,
122
137
  style: a.style,
123
- ref: s,
124
- tabIndex: D(a.tabIndex, a.disabled),
125
- className: b(
138
+ ref: C,
139
+ tabIndex: U(a.tabIndex, a.disabled),
140
+ className: E(
126
141
  "k-flatcolorpicker k-coloreditor",
127
142
  {
128
143
  "k-disabled": a.disabled
129
144
  },
130
145
  a.className
131
146
  ),
132
- onBlur: H
147
+ onBlur: A,
148
+ onKeyDown: D
133
149
  },
134
- /* @__PURE__ */ e.createElement(e.Fragment, null, a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(K, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
150
+ a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(W, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
135
151
  u,
136
152
  {
137
153
  type: "button",
138
154
  "aria-label": g.toLanguageString(
139
- N,
140
- m[N]
155
+ I,
156
+ m[I]
141
157
  ),
142
158
  togglable: !0,
143
159
  fillMode: "flat",
144
160
  selected: c,
145
- onClick: () => E("ColorGradient"),
161
+ onClick: () => w("ColorGradient"),
146
162
  icon: "droplet-slider",
147
- svgIcon: _
163
+ svgIcon: X
148
164
  }
149
165
  ), /* @__PURE__ */ e.createElement(
150
166
  u,
151
167
  {
152
168
  type: "button",
153
169
  "aria-label": g.toLanguageString(
154
- B,
155
- m[B]
170
+ G,
171
+ m[G]
156
172
  ),
157
173
  togglable: !0,
158
174
  fillMode: "flat",
159
175
  selected: !c,
160
- onClick: () => E("ColorPalette"),
176
+ onClick: () => w("ColorPalette"),
161
177
  icon: "palette",
162
- svgIcon: j
178
+ svgIcon: Y
163
179
  }
164
- ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, R && /* @__PURE__ */ e.createElement(
180
+ ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, F && /* @__PURE__ */ e.createElement(
165
181
  u,
166
182
  {
167
183
  type: "button",
168
184
  fillMode: "flat",
169
- onClick: V,
185
+ onClick: _,
170
186
  "aria-label": g.toLanguageString(
171
- I,
172
- m[I]
187
+ L,
188
+ m[L]
173
189
  ),
174
190
  icon: "droplet-slash",
175
- svgIcon: J
191
+ svgIcon: Z
176
192
  }
177
- ), x && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: o || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-current-color", "k-color-preview", { "k-no-color": r === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: r || void 0 } }))))), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
178
- Q,
193
+ ), V && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: l || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-current-color", "k-color-preview", { "k-no-color": i === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: i || void 0 } }))))),
194
+ /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
195
+ p,
179
196
  {
180
- ref: S,
197
+ ref: R,
181
198
  role: "none",
182
- tabIndex: -1,
183
199
  ariaLabel: void 0,
184
- value: o,
185
- onChange: y,
186
- onFocus: w,
200
+ value: l,
201
+ onChange: P,
187
202
  opacity: a.opacity,
188
203
  format: a.format
189
204
  }
190
- ) : /* @__PURE__ */ e.createElement(O, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: o, onChange: y, onFocus: w })), C && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: M }, m[X]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: T }, m[Y])))
205
+ ) : /* @__PURE__ */ e.createElement($, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: l, onChange: P })),
206
+ k && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: K }, m[te]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: M }, m[oe]))
191
207
  );
192
- }), Z = {
193
- id: l.string,
194
- style: l.any,
195
- className: l.string,
196
- value: l.string,
197
- defaultValue: l.string,
198
- onPreviewChange: l.func,
199
- onChange: l.func,
200
- opacity: l.bool,
201
- format: l.any,
202
- tabIndex: l.number,
203
- ariaLabel: l.string,
204
- ariaLabelledBy: l.string,
205
- disabled: l.bool,
206
- view: l.any,
207
- header: l.any,
208
- showClearButton: l.bool,
209
- showPreview: l.bool,
210
- showButtons: l.bool
208
+ }), le = {
209
+ id: o.string,
210
+ style: o.any,
211
+ className: o.string,
212
+ value: o.string,
213
+ defaultValue: o.string,
214
+ onPreviewChange: o.func,
215
+ onChange: o.func,
216
+ opacity: o.bool,
217
+ format: o.any,
218
+ tabIndex: o.number,
219
+ ariaLabel: o.string,
220
+ ariaLabelledBy: o.string,
221
+ disabled: o.bool,
222
+ view: o.any,
223
+ header: o.any,
224
+ showClearButton: o.bool,
225
+ showPreview: o.bool,
226
+ showButtons: o.bool
211
227
  };
212
- L.displayName = "KendoFlatColorPicker";
213
- L.propTypes = Z;
228
+ S.displayName = "KendoFlatColorPicker";
229
+ S.propTypes = le;
214
230
  export {
215
- L as FlatColorPicker
231
+ S as FlatColorPicker
216
232
  };