@progress/kendo-react-inputs 8.2.0-develop.2 → 8.2.0-develop.20

package/signature/Signature.mjs

@@ -7,89 +7,89 @@
  */
 "use client";
 import { SignaturePad as Oe } from "@progress/kendo-inputs-common";
-import { Button as D } from "@progress/kendo-react-buttons";
-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";
-import { Dialog as De } from "@progress/kendo-react-dialogs";
-import { useLocalization as Te } from "@progress/kendo-react-intl";
+import { Button as T } from "@progress/kendo-react-buttons";
+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";
+import { Dialog as Pe } from "@progress/kendo-react-dialogs";
+import { useLocalization as De } from "@progress/kendo-react-intl";
 import a from "prop-types";
 import * as o from "react";
-import { signatureMaximize as te, messages as B, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
-import { packageMetadata as Be } from "../package-metadata.mjs";
-import { hasParent as Re } from "./utils/index.mjs";
-import { hyperlinkOpenIcon as ae, xIcon as Fe } from "@progress/kendo-svg-icons";
-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) => {
-  Me(Be);
-  const F = we(We, u), e = o.useMemo(() => ({
-    strokeWidth: i.strokeWidth,
-    smooth: i.smooth,
-    popupScale: i.popupScale,
-    exportScale: i.exportScale,
-    maximizable: i.maximizable,
-    disabled: i.disabled,
-    required: i.required,
-    validityStyles: i.validityStyles,
-    onChange: i.onChange,
-    onFocus: i.onFocus,
-    onBlur: i.onBlur,
-    onOpen: i.onOpen,
-    onClose: i.onClose,
-    size: i.size,
-    rounded: i.rounded,
-    fillMode: i.fillMode,
-    ...F
-  }), [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) => {
+import { signatureMaximize as te, messages as R, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
+import { packageMetadata as Te } from "../package-metadata.mjs";
+import { hasParent as Be } from "./utils/index.mjs";
+import { hyperlinkOpenIcon as ae, xIcon as Re } from "@progress/kendo-svg-icons";
+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) => {
+  Me(Te);
+  const _ = we(Ge, d), e = o.useMemo(() => ({
+    strokeWidth: l.strokeWidth,
+    smooth: l.smooth,
+    popupScale: l.popupScale,
+    exportScale: l.exportScale,
+    maximizable: l.maximizable,
+    disabled: l.disabled,
+    required: l.required,
+    validityStyles: l.validityStyles,
+    onChange: l.onChange,
+    onFocus: l.onFocus,
+    onBlur: l.onBlur,
+    onOpen: l.onOpen,
+    onClose: l.onClose,
+    size: l.size,
+    rounded: l.rounded,
+    fillMode: l.fillMode,
+    ..._
+  }), [_]), 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) => {
     A(t), e.onChange && e.onChange({ value: t });
   }, ke = (t) => {
-    r == null || r.loadImage(t.value), x(t.value);
+    r == null || r.loadImage(t.value), M(t.value);
   };
   o.useEffect(() => {
     e.value !== k && (A(e.value), r == null || r.loadImage(e.value));
   }, [e.value]);
   const ye = () => {
-    r == null || r.clear(), x();
+    r == null || r.clear(), M();
   }, y = o.useCallback(
     (t) => {
       f || fe(t);
     },
     [f]
-  ), Ce = (t) => {
-    var n, s;
-    Q(t), (s = ((n = q.current) == null ? void 0 : n.element) || g.current) == null || s.focus();
-  }, M = o.useCallback(() => {
+  ), ve = (t) => {
+    var n, i;
+    Q(t), (i = ((n = S.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
+  }, w = o.useCallback(() => {
+    let t = Ne;
+    return !e.color && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).color), e.color || t;
+  }, [e.color]), L = o.useCallback(() => {
     let t = qe;
-    return !e.color && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).color), e.color || t;
-  }, [e.color]), w = o.useCallback(() => {
-    let t = Ge;
-    return !e.backgroundColor && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).backgroundColor), e.backgroundColor || t;
-  }, [e.backgroundColor]), K = () => ({
+    return !e.backgroundColor && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).backgroundColor), e.backgroundColor || t;
+  }, [e.backgroundColor]), $ = () => ({
     scale: e.maximized ? e.popupScale : 1,
-    color: M(),
-    backgroundColor: w(),
+    color: w(),
+    backgroundColor: L(),
     strokeWidth: e.strokeWidth,
     smooth: e.smooth,
     readonly: e.readOnly
-  }), $ = async (t) => {
-    const { width: n, height: s } = t;
+  }), K = async (t) => {
+    const { width: n, height: i } = t;
     return await (r == null ? void 0 : r.exportImage({
-      width: n * O,
-      height: s * O
+      width: n * x,
+      height: i * x
     }));
   };
   o.useEffect(() => {
-    const t = g.current, n = new Oe(t, K());
+    const t = g.current, n = new Oe(t, $());
     return V && n.loadImage(V), ce(n), () => n.destroy();
   }, []), o.useEffect(() => {
     r == null || r.setOptions({
-      onChange: async () => x(await $(Y())),
+      onChange: async () => M(await K(Y())),
       onDraw: () => W(!0),
       onDrawEnd: () => W(!1)
     });
   }, [r]), Le(
-    () => r == null ? void 0 : r.setOptions(K()),
+    () => r == null ? void 0 : r.setOptions($()),
     [e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
   ), o.useEffect(() => {
-    var s, d;
-    const t = (d = (s = _.current) == null ? void 0 : s.element) == null ? void 0 : d.querySelector(".k-overlay");
+    var i, s;
+    const t = (s = (i = N.current) == null ? void 0 : i.element) == null ? void 0 : s.querySelector(".k-overlay");
     if (!t)
       return;
     const n = () => y(!1);
@@ -98,100 +98,101 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
     if (!m || typeof document == "undefined")
       return;
     const t = (n) => {
-      n.keyCode === Pe.esc && y(!1);
+      var i, s;
+      n.key === "Escape" && (y(!1), (s = (i = S.current) == null ? void 0 : i.element) == null || s.focus());
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [m]), o.useEffect(() => {
     var t, n;
-    e.maximized && ((n = (t = N.current) == null ? void 0 : t.element) == null || n.focus());
+    e.maximized && ((n = (t = q.current) == null ? void 0 : t.element) == null || n.focus());
   }, []);
-  const L = o.useCallback(
+  const I = o.useCallback(
     () => {
       var t;
       return (t = g.current) == null ? void 0 : t.focus();
     },
     []
-  ), C = o.useCallback(
+  ), v = o.useCallback(
     () => e.value,
     [e.value]
   ), X = o.useCallback(
     () => e.name,
     [e.name]
-  ), v = o.useCallback(
+  ), C = o.useCallback(
     () => e.required,
     [e.required]
-  ), I = o.useCallback(
+  ), P = o.useCallback(
     () => {
-      const t = e.validationMessage !== void 0, s = !C(), d = e.valid !== void 0 ? e.valid : !v() || !s;
+      const t = e.validationMessage !== void 0, i = !v(), s = e.valid !== void 0 ? e.valid : !C() || !i;
       return {
         customError: t,
-        valid: d,
-        valueMissing: s
+        valid: s,
+        valueMissing: i
       };
     },
-    [e.validationMessage, e.valid, C, v]
-  ), P = o.useCallback(
+    [e.validationMessage, e.valid, v, C]
+  ), D = o.useCallback(
     () => e.validityStyles,
     [e.validityStyles]
   ), J = o.useCallback(
     () => e,
     [e]
-  ), c = o.useCallback(
+  ), u = o.useCallback(
     () => {
       const t = {
-        element: l.current,
-        focus: L
+        element: c.current,
+        focus: I
       };
-      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;
+      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;
     },
-    [X, C, I, P, v, L, J, M, w]
+    [X, v, P, D, C, I, J, w, L]
   );
-  o.useImperativeHandle(le, c);
-  const ve = o.useCallback(
+  o.useImperativeHandle(se, u);
+  const Ce = o.useCallback(
     (t) => {
       b || e.maximized || (G(!0), h(
         e.onFocus,
         t,
-        c(),
+        u(),
         {}
       ));
     },
-    [b, e.onFocus, c]
+    [b, e.onFocus, u]
   ), he = o.useCallback(
     (t) => {
-      Re(t.relatedTarget, l.current) || (G(!1), h(
+      Be(t.relatedTarget, c.current) || (G(!1), h(
         e.onBlur,
         t,
-        c(),
+        u(),
         {}
       ));
     },
-    [b, e.onBlur, c]
+    [b, e.onBlur, u]
   ), ze = o.useCallback(
     async (t) => {
-      de(await $(Z())), y(!0), h(
+      de(await K(Z())), y(!0), h(
         e.onOpen,
         t,
-        c(),
+        u(),
         {}
       );
     },
-    [m, f, e.onOpen, e.value, k, c]
+    [m, f, e.onOpen, e.value, k, u]
   ), Q = o.useCallback(
     (t) => {
       y(!1), h(
         e.onClose,
         t,
-        c(),
+        u(),
         {}
       );
     },
-    [m, f, e.onClose, c]
+    [m, f, e.onClose, u]
   ), Se = () => {
-    ye(), L();
+    ye(), I();
   }, Y = () => {
-    var s, d;
-    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;
+    var i, s;
+    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;
     return {
       width: t,
       height: n
@@ -199,17 +200,17 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
   }, Z = () => {
     const { width: t, height: n } = Y();
     return {
-      width: t * E,
-      height: n * E
+      width: t * O,
+      height: n * O
     };
-  }, Ee = !P() || I().valid;
+  }, Ee = !D() || P().valid;
   return /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: l,
+      ref: c,
       dir: e.dir,
       style: { width: e.width, height: e.height, ...e.style },
-      className: T(
+      className: B(
         "k-input",
         "k-signature",
         {
@@ -225,7 +226,7 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
         },
         e.className
       ),
-      onFocus: ve,
+      onFocus: Ce,
       onBlur: he
     },
     /* @__PURE__ */ o.createElement(
@@ -243,11 +244,11 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
       }
     ),
     /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, /* @__PURE__ */ o.createElement(
-      D,
+      T,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || pe }),
-        ref: q,
+        className: B("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || pe }),
+        ref: S,
         icon: "hyperlink-open",
         svgIcon: ae,
         fillMode: "flat",
@@ -257,11 +258,11 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
         title: j
       }
     ), /* @__PURE__ */ o.createElement(
-      D,
+      T,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || ge }),
-        ref: N,
+        className: B("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || ge }),
+        ref: q,
         icon: "hyperlink-open",
         svgIcon: ae,
         fillMode: "flat",
@@ -279,12 +280,12 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
       }
     ),
     /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, be && /* @__PURE__ */ o.createElement(
-      D,
+      T,
       {
         type: "button",
         className: "k-signature-action k-signature-clear",
         icon: "x",
-        svgIcon: Fe,
+        svgIcon: Re,
         fillMode: "flat",
         size: e.size,
         onClick: Se,
@@ -292,22 +293,22 @@ const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u
         title: H
       }
     )),
-    m && /* @__PURE__ */ o.createElement(De, { ref: _ }, /* @__PURE__ */ o.createElement(
-      R,
+    m && /* @__PURE__ */ o.createElement(Pe, { ref: N }, /* @__PURE__ */ o.createElement(
+      F,
       {
         ...e,
         ...Z(),
         value: ue,
         maximized: !0,
-        exportScale: 1 / E * O,
+        exportScale: 1 / O * x,
         open: !1,
         onChange: ke,
-        onClose: Ce
+        onClose: ve
       }
     ))
   );
 });
-R.propTypes = {
+F.propTypes = {
   value: a.string,
   width: a.number,
   height: a.number,
@@ -329,26 +330,26 @@ R.propTypes = {
   rounded: a.oneOf([null, "small", "medium", "large"]),
   fillMode: a.oneOf([null, "solid", "flat", "outline"])
 };
-const i = {
+const l = {
   strokeWidth: 1,
   smooth: !1,
   popupScale: ie,
-  exportScale: se,
+  exportScale: le,
   maximizable: !0,
   disabled: !1,
   required: !1,
   validityStyles: !0,
-  onChange: (u) => p,
-  onFocus: (u) => p,
-  onBlur: (u) => p,
-  onOpen: (u) => p,
-  onClose: (u) => p,
+  onChange: (d) => p,
+  onFocus: (d) => p,
+  onBlur: (d) => p,
+  onOpen: (d) => p,
+  onClose: (d) => p,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-R.displayName = "KendoSignature";
+F.displayName = "KendoSignature";
 export {
-  R as Signature,
-  We as SignaturePropsContext
+  F as Signature,
+  Ge as SignaturePropsContext
 };

package/slider/Slider.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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;
+"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,autoScroll:!1},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;

package/slider/Slider.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as i from "react";
 import a from "prop-types";
-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";
+import { Keys as o, validatePackage as y, classNames as w, Draggable as x, getTabIndex as S, dispatchEvent as T, createPropsContext as E, withPropsContext as D } from "@progress/kendo-react-common";
 import { provideLocalizationService as I, registerForLocalization as L } from "@progress/kendo-react-intl";
 import { sliderIncreaseValue as d, messages as p, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
 import { SLIDER_LABEL_ATTRIBUTE as C } from "./SliderLabel.mjs";
@@ -127,7 +127,7 @@ const h = class h extends i.Component {
           incrementTitle: s.toLanguageString(d, p[d]),
           decrementTitle: s.toLanguageString(m, p[m])
         },
-        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart }, /* @__PURE__ */ i.createElement(
+        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
           "div",
           {
             className: "k-slider-track-wrap",
@@ -182,7 +182,7 @@ const h = class h extends i.Component {
                 "aria-labelledby": this.props.ariaLabelledBy,
                 "aria-describedby": this.props.ariaDescribedBy,
                 "aria-label": this.props.ariaLabel,
-                tabIndex: T(this.props.tabIndex, this.props.disabled, void 0),
+                tabIndex: S(this.props.tabIndex, this.props.disabled, void 0),
                 className: "k-draghandle k-draghandle-end",
                 title: s.toLanguageString(u, p[u]),
                 style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
@@ -200,7 +200,7 @@ const h = class h extends i.Component {
     return this._sliderTrack;
   }
   change(s, t) {
-    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), E(this.props.onChange, s, this, { value: t });
+    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), T(this.props.onChange, s, this, { value: t });
   }
 };
 h.displayName = "Slider", h.propTypes = {
@@ -215,7 +215,7 @@ h.displayName = "Slider", h.propTypes = {
   // TODO: validation when buttons is set to true, but no step is provided
 };
 let c = h;
-const A = S(), N = D(A, c);
+const A = E(), N = D(A, c);
 N.displayName = "KendoReactSlider";
 L(c);
 export {

package/textarea/TextArea.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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;
+"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;