@progress/kendo-react-inputs 11.4.0-develop.6 → 11.4.0-develop.8

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 (16) hide show
  1. package/colors/ColorGradient.js +1 -1
  2. package/colors/ColorGradient.mjs +47 -47
  3. package/colors/ColorPicker.js +1 -1
  4. package/colors/ColorPicker.mjs +78 -78
  5. package/colors/FlatColorPicker.js +1 -1
  6. package/colors/FlatColorPicker.mjs +125 -125
  7. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  8. package/index.d.mts +1 -0
  9. package/index.d.ts +1 -0
  10. package/package-metadata.js +1 -1
  11. package/package-metadata.mjs +2 -2
  12. package/package.json +11 -11
  13. package/range-slider/RangeSlider.js +11 -11
  14. package/range-slider/RangeSlider.mjs +96 -96
  15. package/signature/Signature.js +1 -1
  16. package/signature/Signature.mjs +79 -79
package/colors/FlatColorPicker.mjs CHANGED
@@ -5,38 +5,38 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import * as t from "react";
8
+ import * as a from "react";
9
9
  import l from "prop-types";
10
- import { validatePackage as ee, Navigation as te, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as ae, focusFirstFocusableChild as le, enableNavigatableContainer as ne, getTabIndex as oe, classNames as V, kendoThemeMaps as ie, WatermarkOverlay as re } from "@progress/kendo-react-common";
11
- import { ButtonGroup as L, Button as s } from "@progress/kendo-react-buttons";
12
- import { dropletSliderIcon as M, paletteIcon as G, dropletSlashIcon as ce } from "@progress/kendo-svg-icons";
13
- import { ColorPalette as de } from "./ColorPalette.mjs";
14
- import { ColorGradient as se } from "./ColorGradient.mjs";
15
- import { packageMetadata as ue } from "../package-metadata.mjs";
16
- import { useLocalization as ve } from "@progress/kendo-react-intl";
17
- import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as O, flatColorPickerApplyBtn as ge, flatColorPickerCancelBtn as me } from "../messages/index.mjs";
18
- const T = t.forwardRef((e, D) => {
19
- const H = !ee(ue, { component: "FlatColorPicker" }), f = t.useRef(null), y = t.useRef(null), W = t.useRef(null), {
10
+ import { validatePackage as te, getLicenseMessage as le, Navigation as ne, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as oe, focusFirstFocusableChild as ie, enableNavigatableContainer as re, getTabIndex as ce, classNames as M, kendoThemeMaps as se, WatermarkOverlay as de } from "@progress/kendo-react-common";
11
+ import { ButtonGroup as L, Button as d } from "@progress/kendo-react-buttons";
12
+ import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ve } from "@progress/kendo-svg-icons";
13
+ import { ColorPalette as ue } from "./ColorPalette.mjs";
14
+ import { ColorGradient as ge } from "./ColorGradient.mjs";
15
+ import { packageMetadata as O } from "../package-metadata.mjs";
16
+ import { useLocalization as me } from "@progress/kendo-react-intl";
17
+ import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as ke, flatColorPickerCancelBtn as Ce } from "../messages/index.mjs";
18
+ const D = a.forwardRef((e, H) => {
19
+ const W = !te(O, { component: "FlatColorPicker" }), q = le(O), f = a.useRef(null), y = a.useRef(null), $ = a.useRef(null), {
20
20
  defaultValue: b,
21
21
  showButtons: w = !0,
22
- showPreview: q = !0,
23
- showClearButton: $ = !0,
22
+ showPreview: j = !0,
23
+ showClearButton: J = !0,
24
24
  view: h = e.views ? void 0 : "ColorGradient",
25
25
  views: r = h ? void 0 : ["gradient", "palette"],
26
26
  activeView: P = "gradient",
27
27
  size: o = "medium"
28
- } = e, [v, j] = t.useState(
28
+ } = e, [u, Q] = a.useState(
29
29
  (h || "ColorGradient") === "ColorGradient"
30
- ), [d, x] = t.useState(
30
+ ), [s, x] = a.useState(
31
31
  (r != null ? r : [])[0] === "gradient" && P === "gradient"
32
- ), [i, E] = t.useState(e.value || b || void 0), [g, I] = t.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
33
- t.useEffect(() => {
32
+ ), [i, E] = a.useState(e.value || b || void 0), [g, I] = a.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
33
+ a.useEffect(() => {
34
34
  E(e.value);
35
35
  }, [e.value]);
36
- const m = ve(), R = t.useCallback(() => {
36
+ const m = me(), R = a.useCallback(() => {
37
37
  f.current && f.current.focus();
38
38
  }, [f]);
39
- t.useImperativeHandle(
39
+ a.useImperativeHandle(
40
40
  f,
41
41
  () => ({
42
42
  element: y.current,
@@ -45,106 +45,106 @@ const T = t.forwardRef((e, D) => {
45
45
  value: B
46
46
  }),
47
47
  [B, R, e]
48
- ), t.useImperativeHandle(D, () => f.current);
49
- const A = t.useCallback(
50
- (a) => {
51
- (a === "ColorGradient" && !v || a === "ColorPalette" && v) && j(!v);
48
+ ), a.useImperativeHandle(H, () => f.current);
49
+ const A = a.useCallback(
50
+ (t) => {
51
+ (t === "ColorGradient" && !u || t === "ColorPalette" && u) && Q(!u);
52
52
  },
53
- [v]
54
- ), N = t.useCallback(
55
- (a) => {
56
- a === "gradient" && !d || a === "palette" && d || a === "palette" && P === "gradient" ? x(!d) : a === "gradient" && P === "palette" && x(!0);
53
+ [u]
54
+ ), N = a.useCallback(
55
+ (t) => {
56
+ t === "gradient" && !s || t === "palette" && s || t === "palette" && P === "gradient" ? x(!s) : t === "gradient" && P === "palette" && x(!0);
57
57
  },
58
- [P, d]
59
- ), J = t.useCallback(
60
- (a) => {
58
+ [P, s]
59
+ ), U = a.useCallback(
60
+ (t) => {
61
61
  var c;
62
62
  const n = b || void 0;
63
63
  if (E(n), I(n), (c = e._gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
64
64
  const S = {
65
65
  value: n,
66
- nativeEvent: a.nativeEvent,
67
- syntheticEvent: a
66
+ nativeEvent: t.nativeEvent,
67
+ syntheticEvent: t
68
68
  };
69
69
  e.onPreviewChange.call(void 0, S);
70
70
  }
71
71
  },
72
72
  [b, e.onPreviewChange]
73
- ), F = t.useCallback(
74
- (a) => {
73
+ ), F = a.useCallback(
74
+ (t) => {
75
75
  var n;
76
- if (E(a.value), e.onPreviewChange) {
76
+ if (E(t.value), e.onPreviewChange) {
77
77
  const c = {
78
- value: a.value,
79
- nativeEvent: a.nativeEvent,
80
- syntheticEvent: a.syntheticEvent
78
+ value: t.value,
79
+ nativeEvent: t.nativeEvent,
80
+ syntheticEvent: t.syntheticEvent
81
81
  };
82
82
  e.onPreviewChange.call(void 0, c);
83
83
  }
84
- (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(a.value);
84
+ (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
85
85
  },
86
86
  [e.onPreviewChange]
87
- ), Q = t.useCallback(
88
- (a) => {
87
+ ), X = a.useCallback(
88
+ (t) => {
89
89
  if (i !== void 0 && I(i), e.onChange) {
90
90
  const n = {
91
91
  value: i,
92
- nativeEvent: a.nativeEvent,
93
- syntheticEvent: a
92
+ nativeEvent: t.nativeEvent,
93
+ syntheticEvent: t
94
94
  };
95
95
  e.onChange.call(void 0, n);
96
96
  }
97
97
  },
98
98
  [i, e.onChange]
99
- ), U = t.useCallback(() => {
99
+ ), Y = a.useCallback(() => {
100
100
  E(g), e.setOpen && e.setOpen(!1);
101
- }, [g]), X = t.useCallback(
102
- (a) => {
101
+ }, [g]), Z = a.useCallback(
102
+ (t) => {
103
103
  if (E(g), e.onPreviewChange) {
104
104
  const n = {
105
105
  value: g,
106
- nativeEvent: a.nativeEvent,
107
- syntheticEvent: a
106
+ nativeEvent: t.nativeEvent,
107
+ syntheticEvent: t
108
108
  };
109
109
  e.onPreviewChange.call(void 0, n);
110
110
  }
111
111
  },
112
112
  [g, e.onPreviewChange]
113
- ), Y = t.useCallback(
114
- (a) => {
113
+ ), p = a.useCallback(
114
+ (t) => {
115
115
  var c, S;
116
- if ((!a.relatedTarget || !((c = y.current) != null && c.contains(a.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
117
- const p = {
116
+ if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
117
+ const ae = {
118
118
  value: i,
119
- nativeEvent: a.nativeEvent,
120
- syntheticEvent: a
119
+ nativeEvent: t.nativeEvent,
120
+ syntheticEvent: t
121
121
  };
122
- e.onChange.call(void 0, p);
122
+ e.onChange.call(void 0, ae);
123
123
  }
124
124
  },
125
125
  [i, w, e.onChange]
126
- ), z = t.useMemo(
127
- () => new te({
126
+ ), z = a.useMemo(
127
+ () => new ne({
128
128
  root: y,
129
129
  selectors: [".k-coloreditor"],
130
130
  tabIndex: 0,
131
131
  keyboardEvents: {
132
132
  keydown: {
133
- Tab: (a, n, c) => {
134
- _(document) === a ? K(a) : ae(c, a);
133
+ Tab: (t, n, c) => {
134
+ _(document) === t ? K(t) : oe(c, t);
135
135
  },
136
- Enter: (a, n, c) => {
137
- _(document) === a && (le(a), ne(a));
136
+ Enter: (t, n, c) => {
137
+ _(document) === t && (ie(t), re(t));
138
138
  },
139
- Escape: (a, n, c) => {
140
- _(document) !== a && (a.focus(), K(a));
139
+ Escape: (t, n, c) => {
140
+ _(document) !== t && (t.focus(), K(t));
141
141
  }
142
142
  }
143
143
  }
144
144
  }),
145
145
  []
146
- ), Z = t.useCallback(z.triggerKeyboardEvent.bind(z), []);
147
- return /* @__PURE__ */ t.createElement(
146
+ ), ee = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
147
+ return /* @__PURE__ */ a.createElement(
148
148
  "div",
149
149
  {
150
150
  id: e.id,
@@ -154,158 +154,158 @@ const T = t.forwardRef((e, D) => {
154
154
  "aria-disabled": e.disabled ? "true" : void 0,
155
155
  style: { position: "relative", ...e.style },
156
156
  ref: y,
157
- tabIndex: oe(e.tabIndex, e.disabled),
158
- className: V(
157
+ tabIndex: ce(e.tabIndex, e.disabled),
158
+ className: M(
159
159
  "k-flatcolorpicker k-coloreditor",
160
160
  {
161
- [`k-coloreditor-${ie.sizeMap[o] || o}`]: o,
161
+ [`k-coloreditor-${se.sizeMap[o] || o}`]: o,
162
162
  "k-disabled": e.disabled
163
163
  },
164
164
  e.className
165
165
  ),
166
- onBlur: Y,
167
- onKeyDown: Z
166
+ onBlur: p,
167
+ onKeyDown: ee
168
168
  },
169
- e.header || /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
170
- s,
169
+ e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
170
+ d,
171
171
  {
172
172
  type: "button",
173
173
  "aria-label": m.toLanguageString(
174
174
  k,
175
- u[k]
175
+ v[k]
176
176
  ),
177
177
  togglable: !0,
178
178
  fillMode: "flat",
179
179
  size: o,
180
- svgIcon: M,
181
- selected: d,
180
+ svgIcon: V,
181
+ selected: s,
182
182
  onClick: () => N("gradient")
183
183
  }
184
- ), /* @__PURE__ */ t.createElement(
185
- s,
184
+ ), /* @__PURE__ */ a.createElement(
185
+ d,
186
186
  {
187
187
  type: "button",
188
188
  "aria-label": m.toLanguageString(
189
189
  C,
190
- u[C]
190
+ v[C]
191
191
  ),
192
192
  togglable: !0,
193
193
  fillMode: "flat",
194
194
  size: o,
195
195
  svgIcon: G,
196
- selected: !d,
196
+ selected: !s,
197
197
  onClick: () => N("palette")
198
198
  }
199
- )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
200
- s,
199
+ )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
200
+ d,
201
201
  {
202
202
  type: "button",
203
203
  "aria-label": m.toLanguageString(
204
204
  C,
205
- u[C]
205
+ v[C]
206
206
  ),
207
207
  togglable: !0,
208
208
  fillMode: "flat",
209
209
  size: o,
210
210
  svgIcon: G,
211
- selected: !d,
211
+ selected: !s,
212
212
  onClick: () => N("palette")
213
213
  }
214
- ), /* @__PURE__ */ t.createElement(
215
- s,
214
+ ), /* @__PURE__ */ a.createElement(
215
+ d,
216
216
  {
217
217
  type: "button",
218
218
  "aria-label": m.toLanguageString(
219
219
  k,
220
- u[k]
220
+ v[k]
221
221
  ),
222
222
  togglable: !0,
223
223
  fillMode: "flat",
224
224
  size: o,
225
- svgIcon: M,
226
- selected: d,
225
+ svgIcon: V,
226
+ selected: s,
227
227
  onClick: () => N("gradient")
228
228
  }
229
- )), h && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
230
- s,
229
+ )), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
230
+ d,
231
231
  {
232
232
  type: "button",
233
233
  "aria-label": m.toLanguageString(
234
234
  k,
235
- u[k]
235
+ v[k]
236
236
  ),
237
237
  togglable: !0,
238
238
  fillMode: "flat",
239
239
  size: o,
240
- selected: v,
240
+ selected: u,
241
241
  onClick: () => A("ColorGradient"),
242
242
  icon: "droplet-slider",
243
- svgIcon: M
243
+ svgIcon: V
244
244
  }
245
- ), /* @__PURE__ */ t.createElement(
246
- s,
245
+ ), /* @__PURE__ */ a.createElement(
246
+ d,
247
247
  {
248
248
  type: "button",
249
249
  "aria-label": m.toLanguageString(
250
250
  C,
251
- u[C]
251
+ v[C]
252
252
  ),
253
253
  togglable: !0,
254
254
  fillMode: "flat",
255
255
  size: o,
256
- selected: !v,
256
+ selected: !u,
257
257
  onClick: () => A("ColorPalette"),
258
258
  icon: "palette",
259
259
  svgIcon: G
260
260
  }
261
- ))), /* @__PURE__ */ t.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, $ && /* @__PURE__ */ t.createElement(
262
- s,
261
+ ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, J && /* @__PURE__ */ a.createElement(
262
+ d,
263
263
  {
264
264
  type: "button",
265
265
  fillMode: "flat",
266
266
  size: o,
267
- onClick: J,
267
+ onClick: U,
268
268
  "aria-label": m.toLanguageString(
269
- O,
270
- u[O]
269
+ T,
270
+ v[T]
271
271
  ),
272
272
  icon: "droplet-slash",
273
- svgIcon: ce
273
+ svgIcon: ve
274
274
  }
275
- ), q && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ t.createElement(
275
+ ), j && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
276
276
  "span",
277
277
  {
278
- className: V("k-coloreditor-preview-color", "k-color-preview", {
278
+ className: M("k-coloreditor-preview-color", "k-color-preview", {
279
279
  "k-no-color": B === void 0
280
280
  })
281
281
  },
282
- /* @__PURE__ */ t.createElement(
282
+ /* @__PURE__ */ a.createElement(
283
283
  "span",
284
284
  {
285
285
  className: "k-color-preview-mask",
286
286
  style: { background: i || void 0 }
287
287
  }
288
288
  )
289
- ), /* @__PURE__ */ t.createElement(
289
+ ), /* @__PURE__ */ a.createElement(
290
290
  "span",
291
291
  {
292
- className: V("k-coloreditor-current-color", "k-color-preview", {
292
+ className: M("k-coloreditor-current-color", "k-color-preview", {
293
293
  "k-no-color": g === void 0
294
294
  }),
295
- onClick: X
295
+ onClick: Z
296
296
  },
297
- /* @__PURE__ */ t.createElement(
297
+ /* @__PURE__ */ a.createElement(
298
298
  "span",
299
299
  {
300
300
  className: "k-color-preview-mask",
301
301
  style: { background: g || void 0 }
302
302
  }
303
303
  )
304
- ))), H && /* @__PURE__ */ t.createElement(re, null)),
305
- /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ t.createElement(
306
- se,
304
+ ))), W && /* @__PURE__ */ a.createElement(de, { message: q })),
305
+ /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && u || r && s) && /* @__PURE__ */ a.createElement(
306
+ ge,
307
307
  {
308
- ref: W,
308
+ ref: $,
309
309
  role: "none",
310
310
  ariaLabel: void 0,
311
311
  value: i,
@@ -316,8 +316,8 @@ const T = t.forwardRef((e, D) => {
316
316
  _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
317
317
  ...e._gradientSettings
318
318
  }
319
- ), (h && !v || r && !d) && /* @__PURE__ */ t.createElement(
320
- de,
319
+ ), (h && !u || r && !s) && /* @__PURE__ */ a.createElement(
320
+ ue,
321
321
  {
322
322
  ariaDisabled: !0,
323
323
  ariaLabelledBy: "required_label",
@@ -327,19 +327,19 @@ const T = t.forwardRef((e, D) => {
327
327
  ...e._paletteSettings
328
328
  }
329
329
  )),
330
- w && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(
331
- s,
330
+ w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ a.createElement(
331
+ d,
332
332
  {
333
333
  type: "button",
334
334
  themeColor: "primary",
335
335
  className: "k-coloreditor-apply",
336
336
  size: o,
337
- onClick: Q
337
+ onClick: X
338
338
  },
339
- u[ge]
340
- ), /* @__PURE__ */ t.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[me]))
339
+ v[ke]
340
+ ), /* @__PURE__ */ a.createElement(d, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: Y }, v[Ce]))
341
341
  );
342
- }), ke = {
342
+ }), fe = {
343
343
  id: l.string,
344
344
  style: l.any,
345
345
  className: l.string,
@@ -361,8 +361,8 @@ const T = t.forwardRef((e, D) => {
361
361
  views: l.array,
362
362
  size: l.oneOf([null, "small", "medium", "large"])
363
363
  };
364
- T.displayName = "KendoFlatColorPicker";
365
- T.propTypes = ke;
364
+ D.displayName = "KendoFlatColorPicker";
365
+ D.propTypes = fe;
366
366
  export {
367
- T as FlatColorPicker
367
+ D as FlatColorPicker
368
368
  };