@progress/kendo-react-inputs 14.5.0-develop.1 → 14.5.0-develop.10
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/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +197 -192
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +88 -88
- package/colors/interfaces/ColorPickerProps.d.ts +6 -0
- package/common/AdaptiveMode.d.ts +1 -1
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +1 -1
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +95 -95
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +16 -11
- package/rating/Rating.js +1 -1
- package/rating/Rating.mjs +62 -62
- package/slider/Slider.js +1 -1
- package/slider/Slider.mjs +38 -38
- package/switch/Switch.js +1 -1
- package/switch/Switch.mjs +114 -107
package/rating/Rating.mjs
CHANGED
|
@@ -7,21 +7,21 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as a from "react";
|
|
9
9
|
import c from "prop-types";
|
|
10
|
-
import { usePropsContext as
|
|
11
|
-
import {
|
|
12
|
-
import { RatingItem as
|
|
13
|
-
import { RATING_ACTION as r, ratingReducer as
|
|
14
|
-
import { calcIsFirstHalf as
|
|
15
|
-
import { ratingAriaLabel as
|
|
16
|
-
import { useLocalization as
|
|
17
|
-
const
|
|
18
|
-
const [e,
|
|
10
|
+
import { usePropsContext as ee, useDir as te, Keys as R, IconWrap as y, toIconName as H, classNames as ae, getTabIndex as ne, createPropsContext as le, svgIconPropType as $ } from "@progress/kendo-react-common";
|
|
11
|
+
import { starIcon as N } from "@progress/kendo-svg-icons";
|
|
12
|
+
import { RatingItem as se } from "./RatingItem.mjs";
|
|
13
|
+
import { RATING_ACTION as r, ratingReducer as oe } from "./rating-reducer.mjs";
|
|
14
|
+
import { calcIsFirstHalf as K, toRound as D, getRemainder as ie, isHalf as re, isSelected as O, isCorrectValue as L } from "./utils/index.mjs";
|
|
15
|
+
import { ratingAriaLabel as A, messages as ce } from "../messages/index.mjs";
|
|
16
|
+
import { useLocalization as ue } from "@progress/kendo-react-intl";
|
|
17
|
+
const X = (n, g, v) => {
|
|
18
|
+
const [e, z] = a.useState(n);
|
|
19
19
|
return [e, (h) => {
|
|
20
|
-
const o =
|
|
21
|
-
v && v(o, h.event),
|
|
20
|
+
const o = oe(g.state || e, { ...h, ...g });
|
|
21
|
+
v && v(o, h.event), z(o);
|
|
22
22
|
}];
|
|
23
|
-
},
|
|
24
|
-
const v =
|
|
23
|
+
}, me = le(), q = a.forwardRef((n, g) => {
|
|
24
|
+
const v = ee(me, n), e = {
|
|
25
25
|
dir: s.dir,
|
|
26
26
|
min: s.min,
|
|
27
27
|
max: s.max,
|
|
@@ -33,12 +33,12 @@ const q = (n, g, v) => {
|
|
|
33
33
|
selection: s.selection,
|
|
34
34
|
precision: s.precision,
|
|
35
35
|
...v
|
|
36
|
-
},
|
|
36
|
+
}, z = ue(), m = a.useRef(null), h = a.useRef(null), o = te(h, e.dir);
|
|
37
37
|
a.useImperativeHandle(m, () => ({
|
|
38
38
|
element: h.current,
|
|
39
39
|
props: e
|
|
40
40
|
})), a.useImperativeHandle(g, () => m.current);
|
|
41
|
-
const
|
|
41
|
+
const G = a.useCallback(
|
|
42
42
|
(t, l) => {
|
|
43
43
|
e.onChange && m.current && e.onChange.call(void 0, {
|
|
44
44
|
value: t,
|
|
@@ -47,7 +47,7 @@ const q = (n, g, v) => {
|
|
|
47
47
|
});
|
|
48
48
|
},
|
|
49
49
|
[e.onChange]
|
|
50
|
-
), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), V = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]),
|
|
50
|
+
), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), V = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]), W = a.useMemo(() => e.item || s.item, [e.item]), [T, p] = X(
|
|
51
51
|
e.defaultValue !== void 0 ? e.defaultValue : s.defaultValue,
|
|
52
52
|
{
|
|
53
53
|
state: e.value,
|
|
@@ -55,24 +55,24 @@ const q = (n, g, v) => {
|
|
|
55
55
|
max: x,
|
|
56
56
|
step: d === "half" ? i / 2 : i
|
|
57
57
|
},
|
|
58
|
-
|
|
59
|
-
), [
|
|
58
|
+
G
|
|
59
|
+
), [P, B] = X(null, {
|
|
60
60
|
state: e.value,
|
|
61
61
|
min: I,
|
|
62
62
|
max: x,
|
|
63
63
|
step: d === "half" ? i / 2 : i,
|
|
64
64
|
precision: d
|
|
65
65
|
}), u = a.useMemo(
|
|
66
|
-
() => e.value !== void 0 ? e.value :
|
|
67
|
-
[e.value,
|
|
68
|
-
), C = a.useMemo(() =>
|
|
66
|
+
() => e.value !== void 0 ? e.value : T,
|
|
67
|
+
[e.value, T]
|
|
68
|
+
), C = a.useMemo(() => P, [P]), F = a.useMemo(
|
|
69
69
|
() => e.selection || s.selection,
|
|
70
70
|
[e.selection]
|
|
71
|
-
), E = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]),
|
|
71
|
+
), E = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]), _ = a.useCallback(
|
|
72
72
|
(t) => {
|
|
73
73
|
if (!(!t.target || !t.target.element || V || k)) {
|
|
74
74
|
if (d === "half") {
|
|
75
|
-
const l = t.target.element.getBoundingClientRect(), M =
|
|
75
|
+
const l = t.target.element.getBoundingClientRect(), M = K(o || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, E) : t.target.value;
|
|
76
76
|
p({ type: r.select, payload: M, event: t.syntheticEvent });
|
|
77
77
|
} else
|
|
78
78
|
p({
|
|
@@ -91,7 +91,7 @@ const q = (n, g, v) => {
|
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
[e.onClick, p, u]
|
|
94
|
-
),
|
|
94
|
+
), j = a.useCallback(
|
|
95
95
|
(t) => {
|
|
96
96
|
if (!(V || k)) {
|
|
97
97
|
switch (t.keyCode) {
|
|
@@ -134,7 +134,7 @@ const q = (n, g, v) => {
|
|
|
134
134
|
}
|
|
135
135
|
},
|
|
136
136
|
[e.onKeyDown, p, u]
|
|
137
|
-
),
|
|
137
|
+
), J = a.useCallback(
|
|
138
138
|
(t) => {
|
|
139
139
|
if (e.onFocus) {
|
|
140
140
|
const l = {
|
|
@@ -145,7 +145,7 @@ const q = (n, g, v) => {
|
|
|
145
145
|
}
|
|
146
146
|
},
|
|
147
147
|
[e.onFocus]
|
|
148
|
-
),
|
|
148
|
+
), Q = a.useCallback(
|
|
149
149
|
(t) => {
|
|
150
150
|
if (e.onBlur) {
|
|
151
151
|
const l = {
|
|
@@ -156,28 +156,28 @@ const q = (n, g, v) => {
|
|
|
156
156
|
}
|
|
157
157
|
},
|
|
158
158
|
[e.onBlur]
|
|
159
|
-
),
|
|
159
|
+
), U = a.useCallback(
|
|
160
160
|
(t) => {
|
|
161
161
|
if (!(!t.target || !t.target.element))
|
|
162
162
|
if (d === "half") {
|
|
163
|
-
const l = t.target.element.getBoundingClientRect(), M =
|
|
164
|
-
|
|
163
|
+
const l = t.target.element.getBoundingClientRect(), M = K(o || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
|
|
164
|
+
B({ type: r.select, payload: M, event: t.syntheticEvent });
|
|
165
165
|
} else
|
|
166
|
-
|
|
166
|
+
B({
|
|
167
167
|
type: r.select,
|
|
168
168
|
payload: t.target.value,
|
|
169
169
|
event: t.syntheticEvent
|
|
170
170
|
});
|
|
171
171
|
},
|
|
172
172
|
[d, i, o]
|
|
173
|
-
),
|
|
174
|
-
|
|
175
|
-
}, []),
|
|
173
|
+
), Y = a.useCallback((t) => {
|
|
174
|
+
B({ type: r.reset, event: t.syntheticEvent });
|
|
175
|
+
}, []), S = [], Z = ie(D(x - I, E), i);
|
|
176
176
|
for (let t = I; t <= x; t = D(t + i, E)) {
|
|
177
|
-
const l = D(t +
|
|
178
|
-
|
|
177
|
+
const l = D(t + Z, E), f = d === "half" ? re(l, C !== null ? C : u !== null ? u : 0, i) : !1, M = O(l, u, i, F), w = O(l, C !== null ? C : u, i, F), b = O(l, C, i, F);
|
|
178
|
+
S.push(
|
|
179
179
|
/* @__PURE__ */ a.createElement(
|
|
180
|
-
|
|
180
|
+
W,
|
|
181
181
|
{
|
|
182
182
|
key: l,
|
|
183
183
|
value: l,
|
|
@@ -188,22 +188,22 @@ const q = (n, g, v) => {
|
|
|
188
188
|
half: f,
|
|
189
189
|
selected: M || w,
|
|
190
190
|
hovered: b,
|
|
191
|
-
onClick:
|
|
192
|
-
onMouseMove:
|
|
193
|
-
onMouseLeave:
|
|
191
|
+
onClick: _,
|
|
192
|
+
onMouseMove: U,
|
|
193
|
+
onMouseLeave: Y
|
|
194
194
|
},
|
|
195
195
|
f && /* @__PURE__ */ a.createElement("span", { className: "k-rating-precision-complement" }, !(e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
|
|
196
196
|
y,
|
|
197
197
|
{
|
|
198
|
-
name: "star
|
|
199
|
-
icon:
|
|
198
|
+
name: "star",
|
|
199
|
+
icon: N,
|
|
200
200
|
style: { clipPath: `${o === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` },
|
|
201
201
|
size: "xlarge"
|
|
202
202
|
}
|
|
203
203
|
), (e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
|
|
204
204
|
y,
|
|
205
205
|
{
|
|
206
|
-
name:
|
|
206
|
+
name: H(`${e.icon}-outline`),
|
|
207
207
|
icon: e.svgIconOutline,
|
|
208
208
|
size: "xlarge"
|
|
209
209
|
}
|
|
@@ -212,23 +212,23 @@ const q = (n, g, v) => {
|
|
|
212
212
|
y,
|
|
213
213
|
{
|
|
214
214
|
name: "star",
|
|
215
|
-
icon:
|
|
215
|
+
icon: N,
|
|
216
216
|
style: { clipPath: `${o === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` },
|
|
217
217
|
size: "xlarge"
|
|
218
218
|
}
|
|
219
219
|
), (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
|
|
220
220
|
y,
|
|
221
221
|
{
|
|
222
|
-
name: e.icon ?
|
|
222
|
+
name: e.icon ? H(e.icon) : void 0,
|
|
223
223
|
icon: e.svgIcon,
|
|
224
224
|
size: "xlarge"
|
|
225
225
|
}
|
|
226
226
|
)),
|
|
227
227
|
f && /* @__PURE__ */ a.createElement("span", { style: { width: "24px", height: "24px", display: "block" } }),
|
|
228
|
-
!f && !(e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: "star", icon:
|
|
228
|
+
!f && !(e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: "star", icon: N, size: "xlarge" }) || !(e.icon || e.svgIcon) && !b && !w && /* @__PURE__ */ a.createElement(y, { name: "star", icon: N, size: "xlarge" }) || (e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !b && /* @__PURE__ */ a.createElement(
|
|
229
229
|
y,
|
|
230
230
|
{
|
|
231
|
-
name:
|
|
231
|
+
name: H(`${e.icon}-outline`),
|
|
232
232
|
icon: e.svgIconOutline,
|
|
233
233
|
size: "xlarge"
|
|
234
234
|
}
|
|
@@ -244,8 +244,8 @@ const q = (n, g, v) => {
|
|
|
244
244
|
ref: h,
|
|
245
245
|
role: "slider",
|
|
246
246
|
dir: o,
|
|
247
|
-
tabIndex:
|
|
248
|
-
className:
|
|
247
|
+
tabIndex: ne(e.tabIndex, e.disabled, void 0),
|
|
248
|
+
className: ae(
|
|
249
249
|
"k-rating",
|
|
250
250
|
{
|
|
251
251
|
"k-rtl": o === "rtl",
|
|
@@ -254,27 +254,27 @@ const q = (n, g, v) => {
|
|
|
254
254
|
},
|
|
255
255
|
e.className
|
|
256
256
|
),
|
|
257
|
-
onKeyDown:
|
|
258
|
-
onFocus:
|
|
259
|
-
onBlur:
|
|
257
|
+
onKeyDown: j,
|
|
258
|
+
onFocus: J,
|
|
259
|
+
onBlur: Q,
|
|
260
260
|
"aria-valuemin": I,
|
|
261
261
|
"aria-valuemax": x,
|
|
262
262
|
"aria-valuenow": u !== null ? u : void 0,
|
|
263
263
|
"aria-disabled": k ? "true" : void 0,
|
|
264
|
-
"aria-label":
|
|
264
|
+
"aria-label": z.toLanguageString(A, ce[A]),
|
|
265
265
|
"aria-labelledby": e.ariaLabelledBy,
|
|
266
266
|
"aria-describedby": e.ariaDescribedBy
|
|
267
267
|
},
|
|
268
268
|
/* @__PURE__ */ a.createElement("input", { id: "rating", className: "k-hidden", readOnly: V, disabled: k }),
|
|
269
|
-
/* @__PURE__ */ a.createElement("span", { className: "k-rating-container" },
|
|
269
|
+
/* @__PURE__ */ a.createElement("span", { className: "k-rating-container" }, S),
|
|
270
270
|
e.label && /* @__PURE__ */ a.createElement("span", { className: "k-rating-label" }, e.label)
|
|
271
271
|
);
|
|
272
|
-
}),
|
|
272
|
+
}), de = {
|
|
273
273
|
id: c.string,
|
|
274
274
|
dir: c.oneOf(["ltr", "rtl"]),
|
|
275
275
|
selection: c.oneOf(["continues", "single"]),
|
|
276
276
|
precision: c.oneOf(["item", "half"]),
|
|
277
|
-
value: (n, g, v) => n.value && n.min && n.max && n.step && !(n.precision === "half" ?
|
|
277
|
+
value: (n, g, v) => n.value && n.min && n.max && n.step && !(n.precision === "half" ? L(n.min, n.max, n.step / 2, n.value) : L(n.min, n.max, n.step, n.value)) && n.precision === "half" ? new Error(
|
|
278
278
|
`Invalid prop + ${g} supplied to ${v}.
|
|
279
279
|
The value of the { value } property is not correct, please check your values.
|
|
280
280
|
`
|
|
@@ -292,24 +292,24 @@ const q = (n, g, v) => {
|
|
|
292
292
|
readonly: c.bool,
|
|
293
293
|
disabled: c.bool,
|
|
294
294
|
icon: c.string,
|
|
295
|
-
svgIcon:
|
|
296
|
-
svgIconOutline:
|
|
295
|
+
svgIcon: $,
|
|
296
|
+
svgIconOutline: $,
|
|
297
297
|
ariaDescribedBy: c.string
|
|
298
298
|
}, s = {
|
|
299
299
|
dir: "ltr",
|
|
300
300
|
min: 1,
|
|
301
301
|
max: 5,
|
|
302
302
|
step: 1,
|
|
303
|
-
item:
|
|
303
|
+
item: se,
|
|
304
304
|
defaultValue: null,
|
|
305
305
|
readonly: !1,
|
|
306
306
|
disabled: !1,
|
|
307
307
|
selection: "continues",
|
|
308
308
|
precision: "item"
|
|
309
309
|
};
|
|
310
|
-
|
|
311
|
-
|
|
310
|
+
q.displayName = "KendoReactRating";
|
|
311
|
+
q.propTypes = de;
|
|
312
312
|
export {
|
|
313
|
-
|
|
314
|
-
|
|
313
|
+
q as Rating,
|
|
314
|
+
me as RatingPropsContext
|
|
315
315
|
};
|
package/slider/Slider.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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),r=require("prop-types"),c=require("@progress/kendo-react-common"),F=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),ae=require("./SliderLabel.js"),j=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons");function le(e){const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),r=require("prop-types"),c=require("@progress/kendo-react-common"),F=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),ae=require("./SliderLabel.js"),j=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons");function le(e){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const d in e)if(d!=="default"){const b=Object.getOwnPropertyDescriptor(e,d);Object.defineProperty(k,d,b.get?b:{enumerable:!0,get:()=>e[d]})}}return k.default=e,Object.freeze(k)}const i=le(a),h={step:1,largeStep:10,buttons:!1,vertical:!1,disabled:!1,tabIndex:0},E=i.forwardRef((e,k)=>{var A,M,O;const{step:d=h.step,largeStep:b=h.largeStep,vertical:l=h.vertical,disabled:u=h.disabled,tabIndex:P=h.tabIndex}=e,[U,H]=a.useState((A=e.defaultValue)!=null?A:e.min),[W,z]=a.useState(!1),[R,X]=a.useState(e.dir),L=a.useRef(null),y=a.useRef(null),N=a.useMemo(()=>new F.LocalizationService,[]),q=a.useRef(null),B=e.value!==void 0,I=B&&e.value!==void 0?e.value:U,o=a.useMemo(()=>{const{min:t,max:n}=e;return I<t?t:I>n?n:I},[I,e.min,e.max]),C=a.useMemo(()=>{const{min:t,max:n}=e,s=n-t;return s===0?0:(o-t)/s*100},[o,e.min,e.max]),v=(M=e.dir)!=null?M:R;a.useEffect(()=>{if(e.dir===void 0&&y.current){const n=window.getComputedStyle(y.current).direction;n!==R&&X(n)}},[e.dir,R]);const K=a.useCallback(t=>{let n=t;for(;n;){if(n.getAttribute(ae.SLIDER_LABEL_ATTRIBUTE))return!0;n=n.parentElement}return!1},[]),g=a.useCallback((t,n)=>{const s=Math.min(Math.max(n,e.min),e.max);B||H(s),c.dispatchEvent(e.onChange,t,q.current,{value:s})},[e.min,e.max,e.onChange,B]),G=a.useCallback(()=>{z(!0)},[]),Y=a.useCallback(()=>{z(!1)},[]),J=a.useCallback(t=>{if(u)return;let n;t.keyCode===c.Keys.left||t.keyCode===c.Keys.down?n=o-(d||0):t.keyCode===c.Keys.right||t.keyCode===c.Keys.up?n=o+(d||0):t.keyCode===c.Keys.pageDown?n=o-(b||0):t.keyCode===c.Keys.pageUp?n=o+(b||0):t.keyCode===c.Keys.home?n=e.min:t.keyCode===c.Keys.end&&(n=e.max),n!==void 0&&(t.preventDefault(),g(t,n))},[o,d,b,e.min,e.max,g,u]),Q=a.useCallback(t=>{t.preventDefault(),!u&&g(t,o-(d||0))},[o,d,g,u]),Z=a.useCallback(t=>{t.preventDefault(),!u&&g(t,o+(d||0))},[o,d,g,u]),w=a.useCallback(t=>{const n=t.element.getBoundingClientRect();let s;l?s=n.bottom-t.event.clientY:s=v==="rtl"?n.right-t.event.clientX:t.event.clientX-n.left;const S=l?n.height:n.width,x=s/S;g(t,e.min+x*(e.max-e.min))},[l,e.min,e.max,v,g]),$=a.useCallback(t=>{K(t.event.originalEvent.target)||(t.event.isTouch&&t.event.originalEvent.preventDefault(),w(t))},[K,w]),p=a.useCallback(t=>{t.event.originalEvent.preventDefault(),w(t)},[w]),D=a.useCallback(()=>{y.current&&y.current.focus()},[]),ee=a.useCallback(t=>{if(!t.enabled)return t.children;let n,s,S,x;return v==="rtl"?(n=l?f.chevronUpIcon:f.chevronLeftIcon,s=l?f.chevronDownIcon:f.chevronRightIcon,S=l?"chevron-up":"chevron-left",x=l?"chevron-down":"chevron-right"):(n=l?f.chevronUpIcon:f.chevronRightIcon,s=l?f.chevronDownIcon:f.chevronLeftIcon,S=l?"chevron-up":"chevron-right",x=l?"chevron-down":"chevron-left"),i.createElement(i.Fragment,null,i.createElement(j.Button,{className:"k-button-decrease",rounded:"full",icon:x,svgIcon:s,title:t.decrementTitle,onClick:t.decrement}),t.children,i.createElement(j.Button,{className:"k-button-increase",rounded:"full",icon:S,svgIcon:n,title:t.incrementTitle,onClick:t.increment}))},[v,l]);a.useImperativeHandle(k,()=>({props:e,sliderTrack:L.current,focus:D}),[e,D]),a.useEffect(()=>{q.current={props:e,sliderTrack:L.current,focus:D}},[e,D]);const te=l?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},ne=l?{paddingTop:0,height:"100%"}:{};let T;return l?T={bottom:"calc("+C+"%)",zIndex:1}:v==="rtl"?T={right:"calc("+C+"% - 13px)",zIndex:1}:T={left:"calc("+C+"%)",zIndex:1},i.createElement("div",{ref:y,dir:v,id:e.id,style:{gap:0,...e.style},onFocus:G,onBlur:Y,onKeyDown:J,className:c.classNames("k-slider",{"k-focus":W,"k-disabled":u,"k-slider-horizontal":!l,"k-slider-vertical":l},e.className)},ee({enabled:(O=e.buttons)!=null?O:h.buttons,decrement:Q,increment:Z,incrementTitle:N.toLanguageString(m.sliderIncreaseValue,m.messages[m.sliderIncreaseValue]),decrementTitle:N.toLanguageString(m.sliderDecreaseValue,m.messages[m.sliderDecreaseValue]),children:i.createElement(c.Draggable,{onDrag:p,onPress:$,autoScroll:!1},i.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...te}},e.children&&i.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...ne}},i.Children.map(e.children,(t,n)=>t&&i.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:l,firstTick:n===0,lastTick:n===i.Children.count(e.children)-1},t.props.children))),i.createElement("div",{className:"k-slider-track",style:l?{bottom:0,height:"100%"}:{[v==="rtl"?"right":"left"]:0,width:"100%"},ref:L},i.createElement("div",{className:"k-slider-selection",style:l?{height:C+"%"}:{width:C+"%"}}),i.createElement("span",{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":o,"aria-valuetext":String(o),"aria-orientation":l?"vertical":void 0,"aria-disabled":u?"true":void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,tabIndex:c.getTabIndex(P,u,void 0),className:"k-draghandle k-draghandle-end",title:N.toLanguageString(m.sliderDragTitle,m.messages[m.sliderDragTitle]),style:T}))))}))});E.displayName="Slider";const _=c.createPropsContext(),V=c.withPropsContext(_,E);V.displayName="KendoReactSlider";V.propTypes={value:r.number,defaultValue:r.number,min:r.number.isRequired,max:r.number.isRequired,step:r.number,largeStep:r.number,onChange:r.func,style:r.object,className:r.string,buttons:r.bool,tabIndex:r.number,disabled:r.bool,vertical:r.bool,id:r.string,ariaDescribedBy:r.string,ariaLabelledBy:r.string,ariaLabel:r.string,dir:r.oneOf(["ltr","rtl"]),children:r.node};F.registerForLocalization(E);exports.Slider=V;exports.SliderPropsContext=_;exports.SliderWithoutContext=E;
|
package/slider/Slider.mjs
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as r from "react";
|
|
9
9
|
import { useState as L, useRef as R, useMemo as N, useEffect as q, useCallback as o, useImperativeHandle as me } from "react";
|
|
10
10
|
import i from "prop-types";
|
|
11
11
|
import { withPropsContext as ue, dispatchEvent as fe, Keys as m, classNames as ge, Draggable as ve, getTabIndex as he, createPropsContext as be } from "@progress/kendo-react-common";
|
|
12
12
|
import { LocalizationService as ye, registerForLocalization as ke } from "@progress/kendo-react-intl";
|
|
13
|
-
import { sliderDragTitle as H, messages as
|
|
13
|
+
import { sliderDragTitle as H, messages as z, sliderDecreaseValue as O, sliderIncreaseValue as X } from "../messages/index.mjs";
|
|
14
14
|
import { SLIDER_LABEL_ATTRIBUTE as xe } from "./SliderLabel.mjs";
|
|
15
15
|
import { Button as _ } from "@progress/kendo-react-buttons";
|
|
16
|
-
import {
|
|
16
|
+
import { chevronUpIcon as j, chevronLeftIcon as G, chevronDownIcon as W, chevronRightIcon as Y } from "@progress/kendo-svg-icons";
|
|
17
17
|
const g = {
|
|
18
18
|
step: 1,
|
|
19
19
|
largeStep: 10,
|
|
@@ -21,7 +21,7 @@ const g = {
|
|
|
21
21
|
vertical: !1,
|
|
22
22
|
disabled: !1,
|
|
23
23
|
tabIndex: 0
|
|
24
|
-
},
|
|
24
|
+
}, B = r.forwardRef((t, P) => {
|
|
25
25
|
var M, K, U;
|
|
26
26
|
const {
|
|
27
27
|
step: u = g.step,
|
|
@@ -29,13 +29,13 @@ const g = {
|
|
|
29
29
|
vertical: a = g.vertical,
|
|
30
30
|
disabled: d = g.disabled,
|
|
31
31
|
tabIndex: Q = g.tabIndex
|
|
32
|
-
} = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p,
|
|
32
|
+
} = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p, V] = L(!1), [I, ee] = L(t.dir), E = R(null), v = R(null), T = N(() => new ye(), []), A = R(null), D = t.value !== void 0, k = D && t.value !== void 0 ? t.value : Z, l = N(() => {
|
|
33
33
|
const { min: e, max: n } = t;
|
|
34
34
|
return k < e ? e : k > n ? n : k;
|
|
35
35
|
}, [k, t.min, t.max]), h = N(() => {
|
|
36
36
|
const { min: e, max: n } = t, c = n - e;
|
|
37
|
-
return c === 0 ? 0 : (
|
|
38
|
-
}, [
|
|
37
|
+
return c === 0 ? 0 : (l - e) / c * 100;
|
|
38
|
+
}, [l, t.min, t.max]), f = (K = t.dir) != null ? K : I;
|
|
39
39
|
q(() => {
|
|
40
40
|
if (t.dir === void 0 && v.current) {
|
|
41
41
|
const n = window.getComputedStyle(v.current).direction;
|
|
@@ -53,31 +53,31 @@ const g = {
|
|
|
53
53
|
}, []), s = o(
|
|
54
54
|
(e, n) => {
|
|
55
55
|
const c = Math.min(Math.max(n, t.min), t.max);
|
|
56
|
-
D || $(c), fe(t.onChange, e,
|
|
56
|
+
D || $(c), fe(t.onChange, e, A.current, { value: c });
|
|
57
57
|
},
|
|
58
58
|
[t.min, t.max, t.onChange, D]
|
|
59
59
|
), te = o(() => {
|
|
60
|
-
|
|
60
|
+
V(!0);
|
|
61
61
|
}, []), ne = o(() => {
|
|
62
|
-
|
|
62
|
+
V(!1);
|
|
63
63
|
}, []), ae = o(
|
|
64
64
|
(e) => {
|
|
65
65
|
if (d)
|
|
66
66
|
return;
|
|
67
67
|
let n;
|
|
68
|
-
e.keyCode === m.left || e.keyCode === m.down ? n =
|
|
68
|
+
e.keyCode === m.left || e.keyCode === m.down ? n = l - (u || 0) : e.keyCode === m.right || e.keyCode === m.up ? n = l + (u || 0) : e.keyCode === m.pageDown ? n = l - (C || 0) : e.keyCode === m.pageUp ? n = l + (C || 0) : e.keyCode === m.home ? n = t.min : e.keyCode === m.end && (n = t.max), n !== void 0 && (e.preventDefault(), s(e, n));
|
|
69
69
|
},
|
|
70
|
-
[
|
|
70
|
+
[l, u, C, t.min, t.max, s, d]
|
|
71
71
|
), ie = o(
|
|
72
72
|
(e) => {
|
|
73
|
-
e.preventDefault(), !d && s(e,
|
|
73
|
+
e.preventDefault(), !d && s(e, l - (u || 0));
|
|
74
74
|
},
|
|
75
|
-
[
|
|
76
|
-
),
|
|
75
|
+
[l, u, s, d]
|
|
76
|
+
), re = o(
|
|
77
77
|
(e) => {
|
|
78
|
-
e.preventDefault(), !d && s(e,
|
|
78
|
+
e.preventDefault(), !d && s(e, l + (u || 0));
|
|
79
79
|
},
|
|
80
|
-
[
|
|
80
|
+
[l, u, s, d]
|
|
81
81
|
), x = o(
|
|
82
82
|
(e) => {
|
|
83
83
|
const n = e.element.getBoundingClientRect();
|
|
@@ -87,7 +87,7 @@ const g = {
|
|
|
87
87
|
s(e, t.min + y * (t.max - t.min));
|
|
88
88
|
},
|
|
89
89
|
[a, t.min, t.max, f, s]
|
|
90
|
-
),
|
|
90
|
+
), le = o(
|
|
91
91
|
(e) => {
|
|
92
92
|
F(e.event.originalEvent.target) || (e.event.isTouch && e.event.originalEvent.preventDefault(), x(e));
|
|
93
93
|
},
|
|
@@ -104,7 +104,7 @@ const g = {
|
|
|
104
104
|
if (!e.enabled)
|
|
105
105
|
return e.children;
|
|
106
106
|
let n, c, b, y;
|
|
107
|
-
return f === "rtl" ? (n = a ? j : G, c = a ? W : Y, b = a ? "
|
|
107
|
+
return f === "rtl" ? (n = a ? j : G, c = a ? W : Y, b = a ? "chevron-up" : "chevron-left", y = a ? "chevron-down" : "chevron-right") : (n = a ? j : Y, c = a ? W : G, b = a ? "chevron-up" : "chevron-right", y = a ? "chevron-down" : "chevron-left"), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
|
|
108
108
|
_,
|
|
109
109
|
{
|
|
110
110
|
className: "k-button-decrease",
|
|
@@ -114,7 +114,7 @@ const g = {
|
|
|
114
114
|
title: e.decrementTitle,
|
|
115
115
|
onClick: e.decrement
|
|
116
116
|
}
|
|
117
|
-
), e.children, /* @__PURE__ */
|
|
117
|
+
), e.children, /* @__PURE__ */ r.createElement(
|
|
118
118
|
_,
|
|
119
119
|
{
|
|
120
120
|
className: "k-button-increase",
|
|
@@ -137,7 +137,7 @@ const g = {
|
|
|
137
137
|
}),
|
|
138
138
|
[t, S]
|
|
139
139
|
), q(() => {
|
|
140
|
-
|
|
140
|
+
A.current = {
|
|
141
141
|
props: t,
|
|
142
142
|
sliderTrack: E.current,
|
|
143
143
|
focus: S
|
|
@@ -145,7 +145,7 @@ const g = {
|
|
|
145
145
|
}, [t, S]);
|
|
146
146
|
const de = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, se = a ? { paddingTop: 0, height: "100%" } : {};
|
|
147
147
|
let w;
|
|
148
|
-
return a ? w = { bottom: "calc(" + h + "%)", zIndex: 1 } : f === "rtl" ? w = { right: "calc(" + h + "% - 13px)", zIndex: 1 } : w = { left: "calc(" + h + "%)", zIndex: 1 }, /* @__PURE__ */
|
|
148
|
+
return a ? w = { bottom: "calc(" + h + "%)", zIndex: 1 } : f === "rtl" ? w = { right: "calc(" + h + "% - 13px)", zIndex: 1 } : w = { left: "calc(" + h + "%)", zIndex: 1 }, /* @__PURE__ */ r.createElement(
|
|
149
149
|
"div",
|
|
150
150
|
{
|
|
151
151
|
ref: v,
|
|
@@ -169,16 +169,16 @@ const g = {
|
|
|
169
169
|
oe({
|
|
170
170
|
enabled: (U = t.buttons) != null ? U : g.buttons,
|
|
171
171
|
decrement: ie,
|
|
172
|
-
increment:
|
|
172
|
+
increment: re,
|
|
173
173
|
incrementTitle: T.toLanguageString(
|
|
174
174
|
X,
|
|
175
|
-
|
|
175
|
+
z[X]
|
|
176
176
|
),
|
|
177
177
|
decrementTitle: T.toLanguageString(
|
|
178
178
|
O,
|
|
179
|
-
|
|
179
|
+
z[O]
|
|
180
180
|
),
|
|
181
|
-
children: /* @__PURE__ */
|
|
181
|
+
children: /* @__PURE__ */ r.createElement(ve, { onDrag: ce, onPress: le, autoScroll: !1 }, /* @__PURE__ */ r.createElement(
|
|
182
182
|
"div",
|
|
183
183
|
{
|
|
184
184
|
className: "k-slider-track-wrap",
|
|
@@ -189,38 +189,38 @@ const g = {
|
|
|
189
189
|
...de
|
|
190
190
|
}
|
|
191
191
|
},
|
|
192
|
-
t.children && /* @__PURE__ */
|
|
192
|
+
t.children && /* @__PURE__ */ r.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...se } }, r.Children.map(t.children, (e, n) => e && r.cloneElement(
|
|
193
193
|
e,
|
|
194
194
|
{
|
|
195
195
|
position: 100 * (e.props.position - t.min) / (t.max - t.min),
|
|
196
196
|
vertical: a,
|
|
197
197
|
firstTick: n === 0,
|
|
198
|
-
lastTick: n ===
|
|
198
|
+
lastTick: n === r.Children.count(t.children) - 1
|
|
199
199
|
},
|
|
200
200
|
e.props.children
|
|
201
201
|
))),
|
|
202
|
-
/* @__PURE__ */
|
|
202
|
+
/* @__PURE__ */ r.createElement(
|
|
203
203
|
"div",
|
|
204
204
|
{
|
|
205
205
|
className: "k-slider-track",
|
|
206
206
|
style: a ? { bottom: 0, height: "100%" } : { [f === "rtl" ? "right" : "left"]: 0, width: "100%" },
|
|
207
207
|
ref: E
|
|
208
208
|
},
|
|
209
|
-
/* @__PURE__ */
|
|
209
|
+
/* @__PURE__ */ r.createElement(
|
|
210
210
|
"div",
|
|
211
211
|
{
|
|
212
212
|
className: "k-slider-selection",
|
|
213
213
|
style: a ? { height: h + "%" } : { width: h + "%" }
|
|
214
214
|
}
|
|
215
215
|
),
|
|
216
|
-
/* @__PURE__ */
|
|
216
|
+
/* @__PURE__ */ r.createElement(
|
|
217
217
|
"span",
|
|
218
218
|
{
|
|
219
219
|
role: "slider",
|
|
220
220
|
"aria-valuemin": t.min,
|
|
221
221
|
"aria-valuemax": t.max,
|
|
222
|
-
"aria-valuenow":
|
|
223
|
-
"aria-valuetext": String(
|
|
222
|
+
"aria-valuenow": l,
|
|
223
|
+
"aria-valuetext": String(l),
|
|
224
224
|
"aria-orientation": a ? "vertical" : void 0,
|
|
225
225
|
"aria-disabled": d ? "true" : void 0,
|
|
226
226
|
"aria-labelledby": t.ariaLabelledBy,
|
|
@@ -230,7 +230,7 @@ const g = {
|
|
|
230
230
|
className: "k-draghandle k-draghandle-end",
|
|
231
231
|
title: T.toLanguageString(
|
|
232
232
|
H,
|
|
233
|
-
|
|
233
|
+
z[H]
|
|
234
234
|
),
|
|
235
235
|
style: w
|
|
236
236
|
}
|
|
@@ -240,8 +240,8 @@ const g = {
|
|
|
240
240
|
})
|
|
241
241
|
);
|
|
242
242
|
});
|
|
243
|
-
|
|
244
|
-
const Se = be(), J = ue(Se,
|
|
243
|
+
B.displayName = "Slider";
|
|
244
|
+
const Se = be(), J = ue(Se, B);
|
|
245
245
|
J.displayName = "KendoReactSlider";
|
|
246
246
|
J.propTypes = {
|
|
247
247
|
value: i.number,
|
|
@@ -264,9 +264,9 @@ J.propTypes = {
|
|
|
264
264
|
dir: i.oneOf(["ltr", "rtl"]),
|
|
265
265
|
children: i.node
|
|
266
266
|
};
|
|
267
|
-
ke(
|
|
267
|
+
ke(B);
|
|
268
268
|
export {
|
|
269
269
|
J as Slider,
|
|
270
270
|
Se as SliderPropsContext,
|
|
271
|
-
|
|
271
|
+
B as SliderWithoutContext
|
|
272
272
|
};
|
package/switch/Switch.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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("prop-types"),i=require("@progress/kendo-react-common"),X=require("@progress/kendo-react-intl"),m=require("../messages/index.js");function Y(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const g=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(b,r,g.get?g:{enumerable:!0,get:()=>e[r]})}}return b.default=e,Object.freeze(b)}const d=Y(n),l={disabled:!1,defaultChecked:!1,size:void 0,trackRounded:void 0,thumbRounded:void 0,offLabel:"OFF",onBlur:i.noop,onFocus:i.noop,onLabel:"ON",validityStyles:!0},O=d.forwardRef((e,b)=>{var F;const{disabled:r=l.disabled,defaultChecked:g=l.defaultChecked,size:R=l.size,trackRounded:S=l.trackRounded,thumbRounded:L=l.thumbRounded,offLabel:q=l.offLabel,onBlur:M=l.onBlur,onFocus:E=l.onFocus,onLabel:B=l.onLabel}=e,[D,j]=n.useState(g||!1),[V,P]=n.useState(!1),u=n.useRef(null),o=n.useRef(null),k=n.useRef(null),v=n.useRef(void 0),N=n.useRef(!1),T=n.useRef(void 0),x=n.useMemo(()=>new X.LocalizationService,[]),c=n.useMemo(()=>v.current!==void 0?v.current:e.checked!==void 0?e.checked:D,[e.checked,D]),h=n.useMemo(()=>{var C,K;const a=e.validationMessage!==void 0,s=(C=e.valid)!=null?C:e.required?!!c:!0,w=(K=e.valid)!=null?K:s;return{customError:a,valid:w,valueMissing:c===null}},[e.valid,e.validationMessage,e.required,c]),H=(F=e.validityStyles)!=null?F:l.validityStyles;n.useEffect(()=>{var a;(a=k.current)!=null&&a.setCustomValidity&&k.current.setCustomValidity(h.valid?"":e.validationMessage||x.toLanguageString(m.switchValidation,m.messages[m.switchValidation]))},[h,e.validationMessage,x]),n.useEffect(()=>{u.current&&(T.current=e.dir||getComputedStyle(u.current).direction||void 0)},[e.dir]);const y=n.useCallback(()=>({props:e,get element(){return u.current},get actionElement(){return o.current},focus:()=>{var a;(a=o.current)==null||a.focus()},get value(){return c},get name(){return e.name},get validity(){return h}}),[e,c,h]),f=n.useCallback((a,s)=>{j(a),v.current=a,i.dispatchEvent(e.onChange,s,{...y(),value:a},{value:a}),v.current=void 0},[e.onChange,y]);n.useEffect(()=>{const a=e.name||e.id,s=i.subscribeToKendoPaste(o.current,{fieldName:a,onValueChange:w=>{if(w!==c){const C={target:o.current,currentTarget:o.current,nativeEvent:new Event("change",{bubbles:!0})};f(w,C)}}});return()=>{s==null||s.unsubscribe()}},[e.name,e.id,c,f]);const W=n.useCallback(a=>{if(a.target===k.current){if(N.current){N.current=!1;return}}else N.current=!0;f(!c,a)},[c,f]),_=n.useCallback(a=>{if(r)return;const{keyCode:s}=a;(s===i.Keys.space||s===i.Keys.enter)&&(f(!c,a),a.preventDefault())},[r,c,f]),$=n.useCallback(a=>{r||(P(!0),E&&E(a))},[r,E]),A=n.useCallback(a=>{r||(P(!1),M&&M(a))},[r,M]);n.useImperativeHandle(b,y,[y]);const G=T.current||e.dir||u.current&&getComputedStyle(u.current).direction||void 0,J=!H||h.valid,Q=i.classNames("k-switch",{[`k-switch-${i.kendoThemeMaps.sizeMap[R]||R}`]:R,"k-switch-on":c,"k-switch-off":!c,"k-focus":V,"k-disabled":r,"k-invalid":!J},e.className),U=d.createElement("input",{type:"checkbox",checked:e.checked,ref:k,tabIndex:-1,"aria-hidden":!0,"aria-label":e.ariaLabel||x.toLanguageString(m.switchAriaLabel,m.messages[m.switchAriaLabel]),value:c,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:i.noop,name:e.name||void 0});return d.createElement("span",{ref:o,role:"switch","aria-checked":c,"aria-disabled":r||void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,"aria-required":e.required,className:Q,dir:G,onKeyDown:_,onClick:W,onBlur:A,onFocus:$,tabIndex:i.getTabIndex(e.tabIndex,r,void 0),accessKey:e.accessKey,id:e.id},d.createElement("span",{className:i.classNames("k-switch-track",{[`k-rounded-${i.kendoThemeMaps.roundedMap[S]||S}`]:S}),ref:u},U,B?d.createElement("span",{className:"k-switch-label-on"},B):"",q?d.createElement("span",{className:"k-switch-label-off"},q):""),d.createElement("span",{className:"k-switch-thumb-wrap"},d.createElement("span",{className:i.classNames("k-switch-thumb",{[`k-rounded-${i.kendoThemeMaps.roundedMap[L]||L}`]:L})})))});O.displayName="Switch";const z=i.createPropsContext(),I=i.withIdHOC(i.withPropsContext(z,O));I.displayName="KendoReactSwitch";I.propTypes={accessKey:t.string,checked:t.bool,className:t.string,defaultChecked:t.bool,defaultValue:t.any,disabled:t.bool,dir:t.string,id:t.string,size:t.oneOf(["small","medium","large"]),trackRounded:t.oneOf(["small","medium","large","full"]),thumbRounded:t.oneOf(["small","medium","large","full"]),ariaDescribedBy:t.string,ariaLabelledBy:t.string,ariaLabel:t.string,offLabel:t.node,onBlur:t.func,onChange:t.func,onFocus:t.func,onLabel:t.node,tabIndex:t.number,value:t.any,name:t.string,required:t.bool,valid:t.bool,validationMessage:t.string,validityStyles:t.bool};exports.Switch=I;exports.SwitchPropsContext=z;exports.SwitchWithoutContext=O;
|