@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.
@@ -7,89 +7,89 @@
7
7
  */
8
8
  "use client";
9
9
  import { SignaturePad as Oe } from "@progress/kendo-inputs-common";
10
- import { Button as D } from "@progress/kendo-react-buttons";
11
- import { createPropsContext as xe, validatePackage as Me, usePropsContext as we, useIsomorphicLayoutEffect as Le, dispatchEvent as h, classNames as T, kendoThemeMaps as ee, getTabIndex as Ie, noop as p, Keys as Pe } from "@progress/kendo-react-common";
12
- import { Dialog as De } from "@progress/kendo-react-dialogs";
13
- import { useLocalization as Te } from "@progress/kendo-react-intl";
10
+ import { Button as T } from "@progress/kendo-react-buttons";
11
+ import { createPropsContext as xe, validatePackage as Me, usePropsContext as we, useIsomorphicLayoutEffect as Le, dispatchEvent as h, classNames as B, kendoThemeMaps as ee, getTabIndex as Ie, noop as p } from "@progress/kendo-react-common";
12
+ import { Dialog as Pe } from "@progress/kendo-react-dialogs";
13
+ import { useLocalization as De } from "@progress/kendo-react-intl";
14
14
  import a from "prop-types";
15
15
  import * as o from "react";
16
- import { signatureMaximize as te, messages as B, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
17
- import { packageMetadata as Be } from "../package-metadata.mjs";
18
- import { hasParent as Re } from "./utils/index.mjs";
19
- import { hyperlinkOpenIcon as ae, xIcon as Fe } from "@progress/kendo-svg-icons";
20
- const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u) => u !== void 0, We = xe(), R = o.forwardRef((u, le) => {
21
- Me(Be);
22
- const F = we(We, u), e = o.useMemo(() => ({
23
- strokeWidth: i.strokeWidth,
24
- smooth: i.smooth,
25
- popupScale: i.popupScale,
26
- exportScale: i.exportScale,
27
- maximizable: i.maximizable,
28
- disabled: i.disabled,
29
- required: i.required,
30
- validityStyles: i.validityStyles,
31
- onChange: i.onChange,
32
- onFocus: i.onFocus,
33
- onBlur: i.onBlur,
34
- onOpen: i.onOpen,
35
- onClose: i.onClose,
36
- size: i.size,
37
- rounded: i.rounded,
38
- fillMode: i.fillMode,
39
- ...F
40
- }), [F]), z = Te(), l = o.useRef(null), g = o.useRef(null), _ = o.useRef(null), N = o.useRef(null), q = o.useRef(null), [r, ce] = o.useState(), [b, G] = o.useState(!1), [S, W] = o.useState(!1), [k, A] = o.useState(), [ue, de] = o.useState(), V = re(e.value) ? e.value : k, [me, fe] = o.useState(!1), f = re(e.open), m = f ? e.open : me, pe = e.maximized || S || !e.maximizable || e.disabled, ge = !(e.maximized && !S), be = !(!(e.value || k) || S || e.readOnly || e.disabled), j = z.toLanguageString(te, B[te]), U = z.toLanguageString(oe, B[oe]), H = z.toLanguageString(ne, B[ne]), E = e.popupScale || ie, O = e.exportScale || se, x = (t) => {
16
+ import { signatureMaximize as te, messages as R, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
17
+ import { packageMetadata as Te } from "../package-metadata.mjs";
18
+ import { hasParent as Be } from "./utils/index.mjs";
19
+ import { hyperlinkOpenIcon as ae, xIcon as Re } from "@progress/kendo-svg-icons";
20
+ const Fe = 250, _e = 84, ie = 3, le = 2, Ne = "#000000", qe = "#ffffff", re = (d) => d !== void 0, Ge = xe(), F = o.forwardRef((d, se) => {
21
+ Me(Te);
22
+ const _ = we(Ge, d), e = o.useMemo(() => ({
23
+ strokeWidth: l.strokeWidth,
24
+ smooth: l.smooth,
25
+ popupScale: l.popupScale,
26
+ exportScale: l.exportScale,
27
+ maximizable: l.maximizable,
28
+ disabled: l.disabled,
29
+ required: l.required,
30
+ validityStyles: l.validityStyles,
31
+ onChange: l.onChange,
32
+ onFocus: l.onFocus,
33
+ onBlur: l.onBlur,
34
+ onOpen: l.onOpen,
35
+ onClose: l.onClose,
36
+ size: l.size,
37
+ rounded: l.rounded,
38
+ fillMode: l.fillMode,
39
+ ..._
40
+ }), [_]), z = De(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), q = o.useRef(null), S = o.useRef(null), [r, ce] = o.useState(), [b, G] = o.useState(!1), [E, W] = o.useState(!1), [k, A] = o.useState(), [ue, de] = o.useState(), V = re(e.value) ? e.value : k, [me, fe] = o.useState(!1), f = re(e.open), m = f ? e.open : me, pe = e.maximized || E || !e.maximizable || e.disabled, ge = !(e.maximized && !E), be = !(!(e.value || k) || E || e.readOnly || e.disabled), j = z.toLanguageString(te, R[te]), U = z.toLanguageString(oe, R[oe]), H = z.toLanguageString(ne, R[ne]), O = e.popupScale || ie, x = e.exportScale || le, M = (t) => {
41
41
  A(t), e.onChange && e.onChange({ value: t });
42
42
  }, ke = (t) => {
43
- r == null || r.loadImage(t.value), x(t.value);
43
+ r == null || r.loadImage(t.value), M(t.value);
44
44
  };
45
45
  o.useEffect(() => {
46
46
  e.value !== k && (A(e.value), r == null || r.loadImage(e.value));
47
47
  }, [e.value]);
48
48
  const ye = () => {
49
- r == null || r.clear(), x();
49
+ r == null || r.clear(), M();
50
50
  }, y = o.useCallback(
51
51
  (t) => {
52
52
  f || fe(t);
53
53
  },
54
54
  [f]
55
- ), Ce = (t) => {
56
- var n, s;
57
- Q(t), (s = ((n = q.current) == null ? void 0 : n.element) || g.current) == null || s.focus();
58
- }, M = o.useCallback(() => {
55
+ ), ve = (t) => {
56
+ var n, i;
57
+ Q(t), (i = ((n = S.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
58
+ }, w = o.useCallback(() => {
59
+ let t = Ne;
60
+ return !e.color && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).color), e.color || t;
61
+ }, [e.color]), L = o.useCallback(() => {
59
62
  let t = qe;
60
- return !e.color && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).color), e.color || t;
61
- }, [e.color]), w = o.useCallback(() => {
62
- let t = Ge;
63
- return !e.backgroundColor && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).backgroundColor), e.backgroundColor || t;
64
- }, [e.backgroundColor]), K = () => ({
63
+ return !e.backgroundColor && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).backgroundColor), e.backgroundColor || t;
64
+ }, [e.backgroundColor]), $ = () => ({
65
65
  scale: e.maximized ? e.popupScale : 1,
66
- color: M(),
67
- backgroundColor: w(),
66
+ color: w(),
67
+ backgroundColor: L(),
68
68
  strokeWidth: e.strokeWidth,
69
69
  smooth: e.smooth,
70
70
  readonly: e.readOnly
71
- }), $ = async (t) => {
72
- const { width: n, height: s } = t;
71
+ }), K = async (t) => {
72
+ const { width: n, height: i } = t;
73
73
  return await (r == null ? void 0 : r.exportImage({
74
- width: n * O,
75
- height: s * O
74
+ width: n * x,
75
+ height: i * x
76
76
  }));
77
77
  };
78
78
  o.useEffect(() => {
79
- const t = g.current, n = new Oe(t, K());
79
+ const t = g.current, n = new Oe(t, $());
80
80
  return V && n.loadImage(V), ce(n), () => n.destroy();
81
81
  }, []), o.useEffect(() => {
82
82
  r == null || r.setOptions({
83
- onChange: async () => x(await $(Y())),
83
+ onChange: async () => M(await K(Y())),
84
84
  onDraw: () => W(!0),
85
85
  onDrawEnd: () => W(!1)
86
86
  });
87
87
  }, [r]), Le(
88
- () => r == null ? void 0 : r.setOptions(K()),
88
+ () => r == null ? void 0 : r.setOptions($()),
89
89
  [e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
90
90
  ), o.useEffect(() => {
91
- var s, d;
92
- const t = (d = (s = _.current) == null ? void 0 : s.element) == null ? void 0 : d.querySelector(".k-overlay");
91
+ var i, s;
92
+ const t = (s = (i = N.current) == null ? void 0 : i.element) == null ? void 0 : s.querySelector(".k-overlay");
93
93
  if (!t)
94
94
  return;
95
95
  const n = () => y(!1);
@@ -98,100 +98,101 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
98
98
  if (!m || typeof document == "undefined")
99
99
  return;
100
100
  const t = (n) => {
101
- n.keyCode === Pe.esc && y(!1);
101
+ var i, s;
102
+ n.key === "Escape" && (y(!1), (s = (i = S.current) == null ? void 0 : i.element) == null || s.focus());
102
103
  };
103
104
  return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
104
105
  }, [m]), o.useEffect(() => {
105
106
  var t, n;
106
- e.maximized && ((n = (t = N.current) == null ? void 0 : t.element) == null || n.focus());
107
+ e.maximized && ((n = (t = q.current) == null ? void 0 : t.element) == null || n.focus());
107
108
  }, []);
108
- const L = o.useCallback(
109
+ const I = o.useCallback(
109
110
  () => {
110
111
  var t;
111
112
  return (t = g.current) == null ? void 0 : t.focus();
112
113
  },
113
114
  []
114
- ), C = o.useCallback(
115
+ ), v = o.useCallback(
115
116
  () => e.value,
116
117
  [e.value]
117
118
  ), X = o.useCallback(
118
119
  () => e.name,
119
120
  [e.name]
120
- ), v = o.useCallback(
121
+ ), C = o.useCallback(
121
122
  () => e.required,
122
123
  [e.required]
123
- ), I = o.useCallback(
124
+ ), P = o.useCallback(
124
125
  () => {
125
- const t = e.validationMessage !== void 0, s = !C(), d = e.valid !== void 0 ? e.valid : !v() || !s;
126
+ const t = e.validationMessage !== void 0, i = !v(), s = e.valid !== void 0 ? e.valid : !C() || !i;
126
127
  return {
127
128
  customError: t,
128
- valid: d,
129
- valueMissing: s
129
+ valid: s,
130
+ valueMissing: i
130
131
  };
131
132
  },
132
- [e.validationMessage, e.valid, C, v]
133
- ), P = o.useCallback(
133
+ [e.validationMessage, e.valid, v, C]
134
+ ), D = o.useCallback(
134
135
  () => e.validityStyles,
135
136
  [e.validityStyles]
136
137
  ), J = o.useCallback(
137
138
  () => e,
138
139
  [e]
139
- ), c = o.useCallback(
140
+ ), u = o.useCallback(
140
141
  () => {
141
142
  const t = {
142
- element: l.current,
143
- focus: L
143
+ element: c.current,
144
+ focus: I
144
145
  };
145
- return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: C }), Object.defineProperty(t, "validity", { get: I }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: v }), Object.defineProperty(t, "props", { get: J }), Object.defineProperty(t, "color", { get: M }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
146
+ return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: v }), Object.defineProperty(t, "validity", { get: P }), Object.defineProperty(t, "validityStyles", { get: D }), Object.defineProperty(t, "required", { get: C }), Object.defineProperty(t, "props", { get: J }), Object.defineProperty(t, "color", { get: w }), Object.defineProperty(t, "backgroundColor", { get: L }), t;
146
147
  },
147
- [X, C, I, P, v, L, J, M, w]
148
+ [X, v, P, D, C, I, J, w, L]
148
149
  );
149
- o.useImperativeHandle(le, c);
150
- const ve = o.useCallback(
150
+ o.useImperativeHandle(se, u);
151
+ const Ce = o.useCallback(
151
152
  (t) => {
152
153
  b || e.maximized || (G(!0), h(
153
154
  e.onFocus,
154
155
  t,
155
- c(),
156
+ u(),
156
157
  {}
157
158
  ));
158
159
  },
159
- [b, e.onFocus, c]
160
+ [b, e.onFocus, u]
160
161
  ), he = o.useCallback(
161
162
  (t) => {
162
- Re(t.relatedTarget, l.current) || (G(!1), h(
163
+ Be(t.relatedTarget, c.current) || (G(!1), h(
163
164
  e.onBlur,
164
165
  t,
165
- c(),
166
+ u(),
166
167
  {}
167
168
  ));
168
169
  },
169
- [b, e.onBlur, c]
170
+ [b, e.onBlur, u]
170
171
  ), ze = o.useCallback(
171
172
  async (t) => {
172
- de(await $(Z())), y(!0), h(
173
+ de(await K(Z())), y(!0), h(
173
174
  e.onOpen,
174
175
  t,
175
- c(),
176
+ u(),
176
177
  {}
177
178
  );
178
179
  },
179
- [m, f, e.onOpen, e.value, k, c]
180
+ [m, f, e.onOpen, e.value, k, u]
180
181
  ), Q = o.useCallback(
181
182
  (t) => {
182
183
  y(!1), h(
183
184
  e.onClose,
184
185
  t,
185
- c(),
186
+ u(),
186
187
  {}
187
188
  );
188
189
  },
189
- [m, f, e.onClose, c]
190
+ [m, f, e.onClose, u]
190
191
  ), Se = () => {
191
- ye(), L();
192
+ ye(), I();
192
193
  }, Y = () => {
193
- var s, d;
194
- const t = e.width || ((s = l.current) == null ? void 0 : s.offsetWidth) || _e, n = e.height || ((d = l.current) == null ? void 0 : d.offsetHeight) || Ne;
194
+ var i, s;
195
+ const t = e.width || ((i = c.current) == null ? void 0 : i.offsetWidth) || Fe, n = e.height || ((s = c.current) == null ? void 0 : s.offsetHeight) || _e;
195
196
  return {
196
197
  width: t,
197
198
  height: n
@@ -199,17 +200,17 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
199
200
  }, Z = () => {
200
201
  const { width: t, height: n } = Y();
201
202
  return {
202
- width: t * E,
203
- height: n * E
203
+ width: t * O,
204
+ height: n * O
204
205
  };
205
- }, Ee = !P() || I().valid;
206
+ }, Ee = !D() || P().valid;
206
207
  return /* @__PURE__ */ o.createElement(
207
208
  "div",
208
209
  {
209
- ref: l,
210
+ ref: c,
210
211
  dir: e.dir,
211
212
  style: { width: e.width, height: e.height, ...e.style },
212
- className: T(
213
+ className: B(
213
214
  "k-input",
214
215
  "k-signature",
215
216
  {
@@ -225,7 +226,7 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
225
226
  },
226
227
  e.className
227
228
  ),
228
- onFocus: ve,
229
+ onFocus: Ce,
229
230
  onBlur: he
230
231
  },
231
232
  /* @__PURE__ */ o.createElement(
@@ -243,11 +244,11 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
243
244
  }
244
245
  ),
245
246
  /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, /* @__PURE__ */ o.createElement(
246
- D,
247
+ T,
247
248
  {
248
249
  type: "button",
249
- className: T("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || pe }),
250
- ref: q,
250
+ className: B("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || pe }),
251
+ ref: S,
251
252
  icon: "hyperlink-open",
252
253
  svgIcon: ae,
253
254
  fillMode: "flat",
@@ -257,11 +258,11 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
257
258
  title: j
258
259
  }
259
260
  ), /* @__PURE__ */ o.createElement(
260
- D,
261
+ T,
261
262
  {
262
263
  type: "button",
263
- className: T("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || ge }),
264
- ref: N,
264
+ className: B("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || ge }),
265
+ ref: q,
265
266
  icon: "hyperlink-open",
266
267
  svgIcon: ae,
267
268
  fillMode: "flat",
@@ -279,12 +280,12 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
279
280
  }
280
281
  ),
281
282
  /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, be && /* @__PURE__ */ o.createElement(
282
- D,
283
+ T,
283
284
  {
284
285
  type: "button",
285
286
  className: "k-signature-action k-signature-clear",
286
287
  icon: "x",
287
- svgIcon: Fe,
288
+ svgIcon: Re,
288
289
  fillMode: "flat",
289
290
  size: e.size,
290
291
  onClick: Se,
@@ -292,22 +293,22 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
292
293
  title: H
293
294
  }
294
295
  )),
295
- m && /* @__PURE__ */ o.createElement(De, { ref: _ }, /* @__PURE__ */ o.createElement(
296
- R,
296
+ m && /* @__PURE__ */ o.createElement(Pe, { ref: N }, /* @__PURE__ */ o.createElement(
297
+ F,
297
298
  {
298
299
  ...e,
299
300
  ...Z(),
300
301
  value: ue,
301
302
  maximized: !0,
302
- exportScale: 1 / E * O,
303
+ exportScale: 1 / O * x,
303
304
  open: !1,
304
305
  onChange: ke,
305
- onClose: Ce
306
+ onClose: ve
306
307
  }
307
308
  ))
308
309
  );
309
310
  });
310
- R.propTypes = {
311
+ F.propTypes = {
311
312
  value: a.string,
312
313
  width: a.number,
313
314
  height: a.number,
@@ -329,26 +330,26 @@ R.propTypes = {
329
330
  rounded: a.oneOf([null, "small", "medium", "large"]),
330
331
  fillMode: a.oneOf([null, "solid", "flat", "outline"])
331
332
  };
332
- const i = {
333
+ const l = {
333
334
  strokeWidth: 1,
334
335
  smooth: !1,
335
336
  popupScale: ie,
336
- exportScale: se,
337
+ exportScale: le,
337
338
  maximizable: !0,
338
339
  disabled: !1,
339
340
  required: !1,
340
341
  validityStyles: !0,
341
- onChange: (u) => p,
342
- onFocus: (u) => p,
343
- onBlur: (u) => p,
344
- onOpen: (u) => p,
345
- onClose: (u) => p,
342
+ onChange: (d) => p,
343
+ onFocus: (d) => p,
344
+ onBlur: (d) => p,
345
+ onOpen: (d) => p,
346
+ onClose: (d) => p,
346
347
  size: "medium",
347
348
  rounded: "medium",
348
349
  fillMode: "solid"
349
350
  };
350
- R.displayName = "KendoSignature";
351
+ F.displayName = "KendoSignature";
351
352
  export {
352
- R as Signature,
353
- We as SignaturePropsContext
353
+ F as Signature,
354
+ Ge as SignaturePropsContext
354
355
  };
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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),y=require("./SliderLabel.js"),k=require("../package-metadata.js"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function S(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return i.default=h,Object.freeze(i)}const s=S(b),u=class u extends s.Component{constructor(i){super(i),this.state={value:this.props.defaultValue===void 0?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t=this.state.dir==="rtl"?this.props.vertical?o.caretAltUpIcon:o.caretAltLeftIcon:this.props.vertical?o.caretAltUpIcon:o.caretAltRightIcon,c=this.state.dir==="rtl"?this.props.vertical?o.caretAltDownIcon:o.caretAltRightIcon:this.props.vertical?o.caretAltDownIcon:o.caretAltLeftIcon,r=this.state.dir==="rtl"?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",d=this.state.dir==="rtl"?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return s.createElement(s.Fragment,null,s.createElement(m.Button,{className:"k-button-decrease",rounded:"full",icon:d,svgIcon:c,title:e.decrementTitle,onClick:e.decrement}),e.children,s.createElement(m.Button,{className:"k-button-increase",rounded:"full",icon:r,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(y.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===a.Keys.left||e.keyCode===a.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===a.Keys.right||e.keyCode===a.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===a.Keys.home?t=this.props.min:e.keyCode===a.Keys.end&&(t=this.props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),c=this.props.vertical?t.bottom-e.event.clientY:this.state.dir==="rtl"?t.right-e.event.clientX:e.event.clientX-t.left,r=this.props.vertical?t.height:t.width,d=c/r;this.change(e,this.props.min+d*(this.props.max-this.props.min))},a.validatePackage(k.packageMetadata)}static getDerivedStateFromProps(i,e){const t=i.value!==void 0?i.value:e.value,{min:c,max:r}=i;return t===void 0?null:{value:Math.min(Math.max(t,c),r)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const i=window.getComputedStyle(this._element).direction;i&&this.setState({dir:i})}}render(){const i=g.provideLocalizationService(this),e=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,t=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},c=this.props.vertical?{paddingTop:0,height:"100%"}:{};return s.createElement("div",{ref:r=>this._element=r,dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:a.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},s.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:i.toLanguageString(n.sliderIncreaseValue,n.messages[n.sliderIncreaseValue]),decrementTitle:i.toLanguageString(n.sliderDecreaseValue,n.messages[n.sliderDecreaseValue])},s.createElement(a.Draggable,{onDrag:this.dragOver,onPress:this.dragStart},s.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...t}},this.props.children&&s.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...c}},s.Children.map(this.props.children,(r,d)=>r&&s.cloneElement(r,{position:100*(r.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical,firstTick:d===0,lastTick:d===s.Children.count(this.props.children)-1},r.props.children))),s.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{[this.state.dir==="rtl"?"right":"left"]:0,width:"100%"},ref:r=>this._sliderTrack=r},s.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:e+"%"}:{width:e+"%"}}),s.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:a.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle k-draghandle-end",title:i.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.props.vertical?{bottom:"calc("+e+"%)",zIndex:1}:this.state.dir==="rtl"?{right:"calc("+e+"% - 13px)",zIndex:1}:{left:"calc("+e+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(i,e){e=Math.min(Math.max(e,this.props.min),this.props.max),this.setState({value:e}),a.dispatchEvent(this.props.onChange,i,this,{value:e})}};u.displayName="Slider",u.propTypes={min:l.number.isRequired,max:l.number.isRequired,value:l.number,vertical:l.bool,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,ariaLabel:l.string};let p=u;const v=a.createPropsContext(),f=a.withPropsContext(v,p);f.displayName="KendoReactSlider";g.registerForLocalization(p);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=p;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),l=require("prop-types"),r=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),y=require("./SliderLabel.js"),k=require("../package-metadata.js"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function S(d){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const i=S(b),u=class u extends i.Component{constructor(s){super(s),this.state={value:this.props.defaultValue===void 0?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t=this.state.dir==="rtl"?this.props.vertical?o.caretAltUpIcon:o.caretAltLeftIcon:this.props.vertical?o.caretAltUpIcon:o.caretAltRightIcon,c=this.state.dir==="rtl"?this.props.vertical?o.caretAltDownIcon:o.caretAltRightIcon:this.props.vertical?o.caretAltDownIcon:o.caretAltLeftIcon,a=this.state.dir==="rtl"?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",p=this.state.dir==="rtl"?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return i.createElement(i.Fragment,null,i.createElement(m.Button,{className:"k-button-decrease",rounded:"full",icon:p,svgIcon:c,title:e.decrementTitle,onClick:e.decrement}),e.children,i.createElement(m.Button,{className:"k-button-increase",rounded:"full",icon:a,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(y.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===r.Keys.left||e.keyCode===r.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===r.Keys.right||e.keyCode===r.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===r.Keys.pageDown?t=this.state.value-(this.props.largeStep||0):e.keyCode===r.Keys.pageUp?t=this.state.value+(this.props.largeStep||0):e.keyCode===r.Keys.home?t=this.props.min:e.keyCode===r.Keys.end&&(t=this.props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),c=this.props.vertical?t.bottom-e.event.clientY:this.state.dir==="rtl"?t.right-e.event.clientX:e.event.clientX-t.left,a=this.props.vertical?t.height:t.width,p=c/a;this.change(e,this.props.min+p*(this.props.max-this.props.min))},r.validatePackage(k.packageMetadata)}static getDerivedStateFromProps(s,e){const t=s.value!==void 0?s.value:e.value,{min:c,max:a}=s;return t===void 0?null:{value:Math.min(Math.max(t,c),a)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const s=window.getComputedStyle(this._element).direction;s&&this.setState({dir:s})}}render(){const s=g.provideLocalizationService(this),e=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,t=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},c=this.props.vertical?{paddingTop:0,height:"100%"}:{};return i.createElement("div",{ref:a=>this._element=a,dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:r.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},i.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:s.toLanguageString(n.sliderIncreaseValue,n.messages[n.sliderIncreaseValue]),decrementTitle:s.toLanguageString(n.sliderDecreaseValue,n.messages[n.sliderDecreaseValue])},i.createElement(r.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,autoScroll:!1},i.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...t}},this.props.children&&i.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...c}},i.Children.map(this.props.children,(a,p)=>a&&i.cloneElement(a,{position:100*(a.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical,firstTick:p===0,lastTick:p===i.Children.count(this.props.children)-1},a.props.children))),i.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{[this.state.dir==="rtl"?"right":"left"]:0,width:"100%"},ref:a=>this._sliderTrack=a},i.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:e+"%"}:{width:e+"%"}}),i.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle k-draghandle-end",title:s.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.props.vertical?{bottom:"calc("+e+"%)",zIndex:1}:this.state.dir==="rtl"?{right:"calc("+e+"% - 13px)",zIndex:1}:{left:"calc("+e+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(s,e){e=Math.min(Math.max(e,this.props.min),this.props.max),this.setState({value:e}),r.dispatchEvent(this.props.onChange,s,this,{value:e})}};u.displayName="Slider",u.propTypes={min:l.number.isRequired,max:l.number.isRequired,value:l.number,vertical:l.bool,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,ariaLabel:l.string};let h=u;const v=r.createPropsContext(),f=r.withPropsContext(v,h);f.displayName="KendoReactSlider";g.registerForLocalization(h);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=h;
package/slider/Slider.mjs CHANGED
@@ -8,14 +8,14 @@
8
8
  "use client";
9
9
  import * as i from "react";
10
10
  import a from "prop-types";
11
- import { Keys as o, validatePackage as y, classNames as w, Draggable as x, getTabIndex as T, dispatchEvent as E, createPropsContext as S, withPropsContext as D } from "@progress/kendo-react-common";
12
- import { provideLocalizationService as I, registerForLocalization as L } from "@progress/kendo-react-intl";
13
- import { sliderIncreaseValue as d, messages as p, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
14
- import { SLIDER_LABEL_ATTRIBUTE as C } from "./SliderLabel.mjs";
11
+ import { Keys as n, validatePackage as y, classNames as w, Draggable as S, getTabIndex as x, dispatchEvent as T, createPropsContext as E, withPropsContext as D } from "@progress/kendo-react-common";
12
+ import { provideLocalizationService as C, registerForLocalization as I } from "@progress/kendo-react-intl";
13
+ import { sliderIncreaseValue as d, messages as h, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
14
+ import { SLIDER_LABEL_ATTRIBUTE as L } from "./SliderLabel.mjs";
15
15
  import { packageMetadata as B } from "../package-metadata.mjs";
16
16
  import { Button as v } from "@progress/kendo-react-buttons";
17
17
  import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
18
- const h = class h extends i.Component {
18
+ const p = class p extends i.Component {
19
19
  constructor(s) {
20
20
  super(s), this.state = {
21
21
  value: this.props.defaultValue === void 0 ? this.props.min : this.props.defaultValue,
@@ -24,14 +24,14 @@ const h = class h extends i.Component {
24
24
  }, this._sliderTrack = null, this._element = null, this.buttons = (t) => {
25
25
  if (!t.enabled)
26
26
  return t.children;
27
- const e = this.state.dir === "rtl" ? this.props.vertical ? g : f : this.props.vertical ? g : b, n = this.state.dir === "rtl" ? this.props.vertical ? k : b : this.props.vertical ? k : f, r = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", l = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
27
+ const e = this.state.dir === "rtl" ? this.props.vertical ? g : f : this.props.vertical ? g : b, l = this.state.dir === "rtl" ? this.props.vertical ? k : b : this.props.vertical ? k : f, r = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", o = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
28
28
  return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
29
29
  v,
30
30
  {
31
31
  className: "k-button-decrease",
32
32
  rounded: "full",
33
- icon: l,
34
- svgIcon: n,
33
+ icon: o,
34
+ svgIcon: l,
35
35
  title: t.decrementTitle,
36
36
  onClick: t.decrement
37
37
  }
@@ -51,7 +51,7 @@ const h = class h extends i.Component {
51
51
  }, this.isLabel = (t) => {
52
52
  let e = t;
53
53
  for (; e; ) {
54
- if (e.getAttribute(C))
54
+ if (e.getAttribute(L))
55
55
  return !0;
56
56
  e = e.parentElement;
57
57
  }
@@ -62,7 +62,7 @@ const h = class h extends i.Component {
62
62
  this.setState({ focused: !1 });
63
63
  }, this.onKeyDown = (t) => {
64
64
  let e;
65
- t.keyCode === o.left || t.keyCode === o.down ? e = this.state.value - (this.props.step || 0) : t.keyCode === o.right || t.keyCode === o.up ? e = this.state.value + (this.props.step || 0) : t.keyCode === o.home ? e = this.props.min : t.keyCode === o.end && (e = this.props.max), e !== void 0 && (t.preventDefault(), this.change(t, e));
65
+ t.keyCode === n.left || t.keyCode === n.down ? e = this.state.value - (this.props.step || 0) : t.keyCode === n.right || t.keyCode === n.up ? e = this.state.value + (this.props.step || 0) : t.keyCode === n.pageDown ? e = this.state.value - (this.props.largeStep || 0) : t.keyCode === n.pageUp ? e = this.state.value + (this.props.largeStep || 0) : t.keyCode === n.home ? e = this.props.min : t.keyCode === n.end && (e = this.props.max), e !== void 0 && (t.preventDefault(), this.change(t, e));
66
66
  }, this.decrement = (t) => {
67
67
  t.preventDefault(), this.change(t, this.state.value - (this.props.step || 0));
68
68
  }, this.increment = (t) => {
@@ -72,16 +72,16 @@ const h = class h extends i.Component {
72
72
  }, this.dragOver = (t) => {
73
73
  t.event.originalEvent.preventDefault(), this.drag(t);
74
74
  }, this.drag = (t) => {
75
- const e = t.element.getBoundingClientRect(), n = this.props.vertical ? e.bottom - t.event.clientY : this.state.dir === "rtl" ? e.right - t.event.clientX : t.event.clientX - e.left, r = this.props.vertical ? e.height : e.width, l = n / r;
76
- this.change(t, this.props.min + l * (this.props.max - this.props.min));
75
+ const e = t.element.getBoundingClientRect(), l = this.props.vertical ? e.bottom - t.event.clientY : this.state.dir === "rtl" ? e.right - t.event.clientX : t.event.clientX - e.left, r = this.props.vertical ? e.height : e.width, o = l / r;
76
+ this.change(t, this.props.min + o * (this.props.max - this.props.min));
77
77
  }, y(B);
78
78
  }
79
79
  /**
80
80
  * @hidden
81
81
  */
82
82
  static getDerivedStateFromProps(s, t) {
83
- const e = s.value !== void 0 ? s.value : t.value, { min: n, max: r } = s;
84
- return e === void 0 ? null : { value: Math.min(Math.max(e, n), r) };
83
+ const e = s.value !== void 0 ? s.value : t.value, { min: l, max: r } = s;
84
+ return e === void 0 ? null : { value: Math.min(Math.max(e, l), r) };
85
85
  }
86
86
  /**
87
87
  * @hidden
@@ -96,7 +96,7 @@ const h = class h extends i.Component {
96
96
  * @hidden
97
97
  */
98
98
  render() {
99
- const s = I(this), t = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, e = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, n = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
99
+ const s = C(this), t = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, e = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, l = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
100
100
  return /* @__PURE__ */ i.createElement(
101
101
  "div",
102
102
  {
@@ -124,10 +124,10 @@ const h = class h extends i.Component {
124
124
  enabled: this.props.buttons,
125
125
  decrement: this.decrement,
126
126
  increment: this.increment,
127
- incrementTitle: s.toLanguageString(d, p[d]),
128
- decrementTitle: s.toLanguageString(m, p[m])
127
+ incrementTitle: s.toLanguageString(d, h[d]),
128
+ decrementTitle: s.toLanguageString(m, h[m])
129
129
  },
130
- /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart }, /* @__PURE__ */ i.createElement(
130
+ /* @__PURE__ */ i.createElement(S, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
131
131
  "div",
132
132
  {
133
133
  className: "k-slider-track-wrap",
@@ -142,15 +142,15 @@ const h = class h extends i.Component {
142
142
  "ul",
143
143
  {
144
144
  className: "k-reset k-slider-items",
145
- style: { margin: 0, ...n }
145
+ style: { margin: 0, ...l }
146
146
  },
147
- i.Children.map(this.props.children, (r, l) => r && i.cloneElement(
147
+ i.Children.map(this.props.children, (r, o) => r && i.cloneElement(
148
148
  r,
149
149
  {
150
150
  position: 100 * (r.props.position - this.props.min) / (this.props.max - this.props.min),
151
151
  vertical: this.props.vertical,
152
- firstTick: l === 0,
153
- lastTick: l === i.Children.count(this.props.children) - 1
152
+ firstTick: o === 0,
153
+ lastTick: o === i.Children.count(this.props.children) - 1
154
154
  },
155
155
  r.props.children
156
156
  ))
@@ -182,9 +182,9 @@ const h = class h extends i.Component {
182
182
  "aria-labelledby": this.props.ariaLabelledBy,
183
183
  "aria-describedby": this.props.ariaDescribedBy,
184
184
  "aria-label": this.props.ariaLabel,
185
- tabIndex: T(this.props.tabIndex, this.props.disabled, void 0),
185
+ tabIndex: x(this.props.tabIndex, this.props.disabled, void 0),
186
186
  className: "k-draghandle k-draghandle-end",
187
- title: s.toLanguageString(u, p[u]),
187
+ title: s.toLanguageString(u, h[u]),
188
188
  style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
189
189
  }
190
190
  )
@@ -200,10 +200,10 @@ const h = class h extends i.Component {
200
200
  return this._sliderTrack;
201
201
  }
202
202
  change(s, t) {
203
- t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), E(this.props.onChange, s, this, { value: t });
203
+ t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), T(this.props.onChange, s, this, { value: t });
204
204
  }
205
205
  };
206
- h.displayName = "Slider", h.propTypes = {
206
+ p.displayName = "Slider", p.propTypes = {
207
207
  min: a.number.isRequired,
208
208
  max: a.number.isRequired,
209
209
  value: a.number,
@@ -214,10 +214,10 @@ h.displayName = "Slider", h.propTypes = {
214
214
  ariaLabel: a.string
215
215
  // TODO: validation when buttons is set to true, but no step is provided
216
216
  };
217
- let c = h;
218
- const A = S(), N = D(A, c);
217
+ let c = p;
218
+ const A = E(), N = D(A, c);
219
219
  N.displayName = "KendoReactSlider";
220
- L(c);
220
+ I(c);
221
221
  export {
222
222
  N as Slider,
223
223
  A as SliderPropsContext,
@@ -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 oe=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function se(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=se(oe),B=a.createPropsContext(),z=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=k.size,rounded:m=k.rounded,fillMode:O=k.fillMode,prefix:N=null,suffix:w=null,ariaDescribedBy:j,ariaLabelledBy:R,autoSize:T,className:q,defaultValue:D,disabled:r,readOnly:H,required:p,rows:F,id:$,name:L,placeholder:_,style:K,tabIndex:G,value:b,valid:P,validationMessage:M,validityStyles:S,onChange:g,onFocus:x,onBlur:v,visited:le,touched:ie,modified:ue,resizable:y,...J}=o,n=t.useRef(null),E=t.useCallback(()=>{n.current&&n.current.focus()},[]),[I,V]=t.useState(D),[Q,U]=a.useCustomComponent(N),[W,X]=a.useCustomComponent(w),d=b!==void 0,c=d?b:I,f=t.useCallback(()=>({element:n,focus:E,get value(){return c},get name(){return n.current&&n.current.name}}),[E,c]);t.useImperativeHandle(u,f);const[Y,A]=t.useState("auto"),Z=a.useId(),ee=a.useDir(n,o.dir),h=P!==void 0?P:p?!!c:!0;t.useEffect(()=>{n.current&&n.current.setCustomValidity&&n.current.setCustomValidity(h?"":M||"")},[h,M]),a.useIsomorphicLayoutEffect(()=>{n.current&&A(`${n.current.scrollHeight}px`)},[c]);const te=t.useCallback(i=>{const C=i.target.value;A("auto"),!d&&!r&&V(C),g&&!r&&a.dispatchEvent(g,i,{...f(),value:C},{value:C})},[V,g,r,d]),ae=t.useCallback(i=>{x&&!r&&a.dispatchEvent(x,i,f(),void 0)},[x,r]),ne=t.useCallback(i=>{v&&!r&&a.dispatchEvent(v,i,f(),void 0)},[v,r]),re={id:$||Z,role:"textbox",name:L,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&y!=="none"}),ref:n,disabled:r,rows:F,placeholder:_,readOnly:H,required:p,tabIndex:a.getTabIndex(G,r),style:T?{resize:"none",overflow:"hidden",height:Y}:y?{resize:y}:{},"aria-labelledby":R,"aria-describedby":j,"aria-multiline":!0,"aria-disabled":r||void 0,value:d?b:I,...J,onChange:te,onFocus:ae,onBlur:ne};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${O}`]:O,[`k-rounded-${a.kendoThemeMaps.roundedMap[m]||m}`]:m,"k-invalid":!(h||S!==void 0||S===!0),"k-required":p,"k-disabled":r},q),style:K,dir:ee},o.prefix&&t.createElement(Q,{...U}),t.createElement("textarea",{...re}),o.suffix&&t.createElement(W,{...X}))});z.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"])};const k={size:"medium",rounded:"medium",fillMode:"solid"};z.displayName="KendoTextArea";exports.TextArea=z;exports.TextAreaPropsContext=B;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function le(s){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>s[r]})}}return i.default=s,Object.freeze(i)}const t=le(se),B=a.createPropsContext(),z=t.forwardRef((s,i)=>{const r=a.usePropsContext(B,s),{size:l=m.size,rounded:p=m.rounded,fillMode:O=m.fillMode,autoFocus:F=m.autoFocus,prefix:N=null,suffix:w=null,ariaDescribedBy:j,ariaLabelledBy:R,autoSize:T,className:q,defaultValue:D,disabled:o,readOnly:H,required:b,rows:$,id:L,name:_,placeholder:K,style:G,tabIndex:J,value:g,valid:P,validationMessage:M,validityStyles:S,onChange:x,onFocus:v,onBlur:y,visited:ue,touched:ie,modified:ce,resizable:h,...Q}=r,n=t.useRef(null),E=t.useCallback(()=>{n.current&&n.current.focus()},[]),[I,V]=t.useState(D),[U,W]=a.useCustomComponent(N),[X,Y]=a.useCustomComponent(w),c=g!==void 0,d=c?g:I,f=t.useCallback(()=>({element:n,focus:E,get value(){return d},get name(){return n.current&&n.current.name}}),[E,d]);t.useImperativeHandle(i,f);const[Z,A]=t.useState("auto"),ee=a.useId(),te=a.useDir(n,r.dir),C=P!==void 0?P:b?!!d:!0;t.useEffect(()=>{n.current&&n.current.setCustomValidity&&n.current.setCustomValidity(C?"":M||"")},[C,M]),a.useIsomorphicLayoutEffect(()=>{n.current&&A(`${n.current.scrollHeight}px`)},[d]);const ae=t.useCallback(u=>{const k=u.target.value;A("auto"),!c&&!o&&V(k),x&&!o&&a.dispatchEvent(x,u,{...f(),value:k},{value:k})},[V,x,o,c]),ne=t.useCallback(u=>{v&&!o&&a.dispatchEvent(v,u,f(),void 0)},[v,o]),oe=t.useCallback(u=>{y&&!o&&a.dispatchEvent(y,u,f(),void 0)},[y,o]),re={id:L||ee,role:"textbox",name:_,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&h!=="none"}),ref:n,disabled:o,rows:$,placeholder:K,readOnly:H,required:b,tabIndex:a.getTabIndex(J,o),autoFocus:F,style:T?{resize:"none",overflow:"hidden",height:Z}:h?{resize:h}:{},"aria-labelledby":R,"aria-describedby":j,"aria-multiline":!0,"aria-disabled":o||void 0,value:c?g:I,...Q,onChange:ae,onFocus:ne,onBlur:oe};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${O}`]:O,[`k-rounded-${a.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!(C||S!==void 0||S===!0),"k-required":b,"k-disabled":o},q),style:G,dir:te},r.prefix&&t.createElement(U,{...W}),t.createElement("textarea",{...re}),r.suffix&&t.createElement(X,{...Y}))});z.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool};const m={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};z.displayName="KendoTextArea";exports.TextArea=z;exports.TextAreaPropsContext=B;