@progress/kendo-react-inputs 13.4.0-develop.2 → 13.4.0-develop.4

package/slider/Slider.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function k(h){const s=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(s,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return s.default=h,Object.freeze(s)}const i=k(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,r=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: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.pageDown?t=this.state.value-(this.props.largeStep||0):e.keyCode===a.Keys.pageUp?t=this.state.value+(this.props.largeStep||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,p=c/r;this.change(e,this.props.min+p*(this.props.max-this.props.min))}}static getDerivedStateFromProps(s,e){const t=s.value!==void 0?s.value:e.value,{min:c,max:r}=s;return t===void 0?null:{value:Math.min(Math.max(t,c),r)}}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: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)},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(a.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,(r,p)=>r&&i.cloneElement(r,{position:100*(r.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},r.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:r=>{this._sliderTrack=r}},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:a.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}),a.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 d=u;const v=a.createPropsContext(),f=a.withPropsContext(v,d);f.displayName="KendoReactSlider";g.registerForLocalization(d);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),le=require("prop-types"),c=require("@progress/kendo-react-common"),j=require("@progress/kendo-react-intl"),u=require("../messages/index.js"),re=require("./SliderLabel.js"),_=require("@progress/kendo-react-buttons"),g=require("@progress/kendo-svg-icons");function F(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=F(n),r=F(le),v={step:1,largeStep:10,buttons:!1,vertical:!1,disabled:!1,tabIndex:0},T=i.forwardRef((e,k)=>{var K,M,O;const{step:d=v.step,largeStep:b=v.largeStep,vertical:l=v.vertical,disabled:E=v.disabled,tabIndex:U=v.tabIndex}=e,[H,W]=n.useState((K=e.defaultValue)!=null?K:e.min),[X,V]=n.useState(!1),[R,G]=n.useState(e.dir),L=n.useRef(null),h=n.useRef(null),A=n.useMemo(()=>new j.LocalizationService,[]),z=n.useRef(null),N=e.value!==void 0,x=N&&e.value!==void 0?e.value:H,s=n.useMemo(()=>{const{min:t,max:a}=e;return x<t?t:x>a?a:x},[x,e.min,e.max]),y=n.useMemo(()=>{const{min:t,max:a}=e,o=a-t;return o===0?0:(s-t)/o*100},[s,e.min,e.max]),f=(M=e.dir)!=null?M:R;n.useEffect(()=>{if(e.dir===void 0&&h.current){const a=window.getComputedStyle(h.current).direction;a!==R&&G(a)}},[e.dir,R]);const q=n.useCallback(t=>{let a=t;for(;a;){if(a.getAttribute(re.SLIDER_LABEL_ATTRIBUTE))return!0;a=a.parentElement}return!1},[]),m=n.useCallback((t,a)=>{const o=Math.min(Math.max(a,e.min),e.max);N||W(o),c.dispatchEvent(e.onChange,t,z.current,{value:o})},[e.min,e.max,e.onChange,N]),Y=n.useCallback(()=>{V(!0)},[]),J=n.useCallback(()=>{V(!1)},[]),Q=n.useCallback(t=>{let a;t.keyCode===c.Keys.left||t.keyCode===c.Keys.down?a=s-(d||0):t.keyCode===c.Keys.right||t.keyCode===c.Keys.up?a=s+(d||0):t.keyCode===c.Keys.pageDown?a=s-(b||0):t.keyCode===c.Keys.pageUp?a=s+(b||0):t.keyCode===c.Keys.home?a=e.min:t.keyCode===c.Keys.end&&(a=e.max),a!==void 0&&(t.preventDefault(),m(t,a))},[s,d,b,e.min,e.max,m]),Z=n.useCallback(t=>{t.preventDefault(),m(t,s-(d||0))},[s,d,m]),$=n.useCallback(t=>{t.preventDefault(),m(t,s+(d||0))},[s,d,m]),I=n.useCallback(t=>{const a=t.element.getBoundingClientRect();let o;l?o=a.bottom-t.event.clientY:o=f==="rtl"?a.right-t.event.clientX:t.event.clientX-a.left;const C=l?a.height:a.width,S=o/C;m(t,e.min+S*(e.max-e.min))},[l,e.min,e.max,f,m]),p=n.useCallback(t=>{q(t.event.originalEvent.target)||(t.event.isTouch&&t.event.originalEvent.preventDefault(),I(t))},[q,I]),ee=n.useCallback(t=>{t.event.originalEvent.preventDefault(),I(t)},[I]),w=n.useCallback(()=>{h.current&&h.current.focus()},[]),te=n.useCallback(t=>{if(!t.enabled)return t.children;let a,o,C,S;return f==="rtl"?(a=l?g.caretAltUpIcon:g.caretAltLeftIcon,o=l?g.caretAltDownIcon:g.caretAltRightIcon,C=l?"caret-alt-up":"caret-alt-left",S=l?"caret-alt-down":"caret-alt-right"):(a=l?g.caretAltUpIcon:g.caretAltRightIcon,o=l?g.caretAltDownIcon:g.caretAltLeftIcon,C=l?"caret-alt-up":"caret-alt-right",S=l?"caret-alt-down":"caret-alt-left"),i.createElement(i.Fragment,null,i.createElement(_.Button,{className:"k-button-decrease",rounded:"full",icon:S,svgIcon:o,title:t.decrementTitle,onClick:t.decrement}),t.children,i.createElement(_.Button,{className:"k-button-increase",rounded:"full",icon:C,svgIcon:a,title:t.incrementTitle,onClick:t.increment}))},[f,l]);n.useImperativeHandle(k,()=>({props:e,sliderTrack:L.current,focus:w}),[e,w]),n.useEffect(()=>{z.current={props:e,sliderTrack:L.current,focus:w}},[e,w]);const ae=l?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},ne=l?{paddingTop:0,height:"100%"}:{};let D;return l?D={bottom:"calc("+y+"%)",zIndex:1}:f==="rtl"?D={right:"calc("+y+"% - 13px)",zIndex:1}:D={left:"calc("+y+"%)",zIndex:1},i.createElement("div",{ref:h,dir:f,id:e.id,style:{gap:0,...e.style},onFocus:Y,onBlur:J,onKeyDown:Q,className:c.classNames("k-slider",{"k-focus":X,"k-disabled":E,"k-slider-horizontal":!l,"k-slider-vertical":l},e.className)},te({enabled:(O=e.buttons)!=null?O:v.buttons,decrement:Z,increment:$,incrementTitle:A.toLanguageString(u.sliderIncreaseValue,u.messages[u.sliderIncreaseValue]),decrementTitle:A.toLanguageString(u.sliderDecreaseValue,u.messages[u.sliderDecreaseValue]),children:i.createElement(c.Draggable,{onDrag:ee,onPress:p,autoScroll:!1},i.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...ae}},e.children&&i.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...ne}},i.Children.map(e.children,(t,a)=>t&&i.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:l,firstTick:a===0,lastTick:a===i.Children.count(e.children)-1},t.props.children))),i.createElement("div",{className:"k-slider-track",style:l?{bottom:0,height:"100%"}:{[f==="rtl"?"right":"left"]:0,width:"100%"},ref:L},i.createElement("div",{className:"k-slider-selection",style:l?{height:y+"%"}:{width:y+"%"}}),i.createElement("span",{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":s,"aria-valuetext":String(s),"aria-orientation":l?"vertical":void 0,"aria-disabled":E?"true":void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,tabIndex:c.getTabIndex(U,E,void 0),className:"k-draghandle k-draghandle-end",title:A.toLanguageString(u.sliderDragTitle,u.messages[u.sliderDragTitle]),style:D}))))}))});T.displayName="Slider";const P=c.createPropsContext(),B=c.withPropsContext(P,T);B.displayName="KendoReactSlider";B.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};j.registerForLocalization(T);exports.Slider=B;exports.SliderPropsContext=P;exports.SliderWithoutContext=T;

package/slider/Slider.mjs

@@ -5,216 +5,266 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
-import a from "prop-types";
-import { withPropsContext as y, createPropsContext as w, Keys as n, classNames as S, Draggable as x, getTabIndex as T, dispatchEvent as E } from "@progress/kendo-react-common";
-import { provideLocalizationService as D, registerForLocalization as C } from "@progress/kendo-react-intl";
-import { sliderDecreaseValue as d, messages as h, sliderIncreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
-import { SLIDER_LABEL_ATTRIBUTE as I } from "./SliderLabel.mjs";
-import { Button as v } from "@progress/kendo-react-buttons";
-import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
-const p = class p 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 = (t) => {
-      if (!t.enabled)
-        return t.children;
-      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";
-      return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
-        v,
+import * as l from "react";
+import { useState as L, useRef as R, useMemo as N, useEffect as q, useCallback as o, useImperativeHandle as me } from "react";
+import * as i from "prop-types";
+import { withPropsContext as ue, createPropsContext as fe, dispatchEvent as ge, Keys as s, classNames as ve, Draggable as he, getTabIndex as be } from "@progress/kendo-react-common";
+import { LocalizationService as ye, registerForLocalization as ke } from "@progress/kendo-react-intl";
+import { sliderDragTitle as H, messages as A, sliderDecreaseValue as O, sliderIncreaseValue as X } from "../messages/index.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as xe } from "./SliderLabel.mjs";
+import { Button as _ } from "@progress/kendo-react-buttons";
+import { caretAltUpIcon as j, caretAltLeftIcon as G, caretAltDownIcon as W, caretAltRightIcon as Y } from "@progress/kendo-svg-icons";
+const f = {
+  step: 1,
+  largeStep: 10,
+  buttons: !1,
+  vertical: !1,
+  disabled: !1,
+  tabIndex: 0
+}, z = l.forwardRef((t, P) => {
+  var M, K, U;
+  const {
+    step: m = f.step,
+    largeStep: w = f.largeStep,
+    vertical: a = f.vertical,
+    disabled: C = f.disabled,
+    tabIndex: Q = f.tabIndex
+  } = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p, B] = L(!1), [I, ee] = L(t.dir), E = R(null), g = R(null), T = N(() => new ye(), []), V = R(null), D = t.value !== void 0, y = D && t.value !== void 0 ? t.value : Z, r = N(() => {
+    const { min: e, max: n } = t;
+    return y < e ? e : y > n ? n : y;
+  }, [y, t.min, t.max]), v = N(() => {
+    const { min: e, max: n } = t, c = n - e;
+    return c === 0 ? 0 : (r - e) / c * 100;
+  }, [r, t.min, t.max]), u = (K = t.dir) != null ? K : I;
+  q(() => {
+    if (t.dir === void 0 && g.current) {
+      const n = window.getComputedStyle(g.current).direction;
+      n !== I && ee(n);
+    }
+  }, [t.dir, I]);
+  const F = o((e) => {
+    let n = e;
+    for (; n; ) {
+      if (n.getAttribute(xe))
+        return !0;
+      n = n.parentElement;
+    }
+    return !1;
+  }, []), d = o(
+    (e, n) => {
+      const c = Math.min(Math.max(n, t.min), t.max);
+      D || $(c), ge(t.onChange, e, V.current, { value: c });
+    },
+    [t.min, t.max, t.onChange, D]
+  ), te = o(() => {
+    B(!0);
+  }, []), ne = o(() => {
+    B(!1);
+  }, []), ae = o(
+    (e) => {
+      let n;
+      e.keyCode === s.left || e.keyCode === s.down ? n = r - (m || 0) : e.keyCode === s.right || e.keyCode === s.up ? n = r + (m || 0) : e.keyCode === s.pageDown ? n = r - (w || 0) : e.keyCode === s.pageUp ? n = r + (w || 0) : e.keyCode === s.home ? n = t.min : e.keyCode === s.end && (n = t.max), n !== void 0 && (e.preventDefault(), d(e, n));
+    },
+    [r, m, w, t.min, t.max, d]
+  ), ie = o(
+    (e) => {
+      e.preventDefault(), d(e, r - (m || 0));
+    },
+    [r, m, d]
+  ), le = o(
+    (e) => {
+      e.preventDefault(), d(e, r + (m || 0));
+    },
+    [r, m, d]
+  ), k = o(
+    (e) => {
+      const n = e.element.getBoundingClientRect();
+      let c;
+      a ? c = n.bottom - e.event.clientY : c = u === "rtl" ? n.right - e.event.clientX : e.event.clientX - n.left;
+      const h = a ? n.height : n.width, b = c / h;
+      d(e, t.min + b * (t.max - t.min));
+    },
+    [a, t.min, t.max, u, d]
+  ), re = o(
+    (e) => {
+      F(e.event.originalEvent.target) || (e.event.isTouch && e.event.originalEvent.preventDefault(), k(e));
+    },
+    [F, k]
+  ), ce = o(
+    (e) => {
+      e.event.originalEvent.preventDefault(), k(e);
+    },
+    [k]
+  ), x = o(() => {
+    g.current && g.current.focus();
+  }, []), oe = o(
+    (e) => {
+      if (!e.enabled)
+        return e.children;
+      let n, c, h, b;
+      return u === "rtl" ? (n = a ? j : G, c = a ? W : Y, h = a ? "caret-alt-up" : "caret-alt-left", b = a ? "caret-alt-down" : "caret-alt-right") : (n = a ? j : Y, c = a ? W : G, h = a ? "caret-alt-up" : "caret-alt-right", b = a ? "caret-alt-down" : "caret-alt-left"), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+        _,
         {
           className: "k-button-decrease",
           rounded: "full",
-          icon: o,
-          svgIcon: l,
-          title: t.decrementTitle,
-          onClick: t.decrement
+          icon: b,
+          svgIcon: c,
+          title: e.decrementTitle,
+          onClick: e.decrement
         }
-      ), t.children, /* @__PURE__ */ i.createElement(
-        v,
+      ), e.children, /* @__PURE__ */ l.createElement(
+        _,
         {
           className: "k-button-increase",
           rounded: "full",
-          icon: r,
-          svgIcon: e,
-          title: t.incrementTitle,
-          onClick: t.increment
+          icon: h,
+          svgIcon: n,
+          title: e.incrementTitle,
+          onClick: e.increment
         }
       ));
-    }, this.focus = () => {
-      this._element && this._element.focus();
-    }, this.isLabel = (t) => {
-      let e = t;
-      for (; e; ) {
-        if (e.getAttribute(I))
-          return !0;
-        e = e.parentElement;
-      }
-      return !1;
-    }, this.onFocus = () => {
-      this.setState({ focused: !0 });
-    }, this.onBlur = () => {
-      this.setState({ focused: !1 });
-    }, this.onKeyDown = (t) => {
-      let e;
-      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));
-    }, this.decrement = (t) => {
-      t.preventDefault(), this.change(t, this.state.value - (this.props.step || 0));
-    }, this.increment = (t) => {
-      t.preventDefault(), this.change(t, this.state.value + (this.props.step || 0));
-    }, this.dragStart = (t) => {
-      this.isLabel(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), this.drag(t));
-    }, this.dragOver = (t) => {
-      t.event.originalEvent.preventDefault(), this.drag(t);
-    }, this.drag = (t) => {
-      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;
-      this.change(t, this.props.min + o * (this.props.max - this.props.min));
+    },
+    [u, a]
+  );
+  me(
+    P,
+    () => ({
+      props: t,
+      sliderTrack: E.current,
+      focus: x
+    }),
+    [t, x]
+  ), q(() => {
+    V.current = {
+      props: t,
+      sliderTrack: E.current,
+      focus: x
     };
-  }
-  /**
-   * @hidden
-   */
-  static getDerivedStateFromProps(s, t) {
-    const e = s.value !== void 0 ? s.value : t.value, { min: l, max: r } = s;
-    return e === void 0 ? null : { value: Math.min(Math.max(e, l), r) };
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    if (!this.state.dir && window && this._element) {
-      const s = window.getComputedStyle(this._element).direction;
-      s && this.setState({ dir: s });
-    }
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const s = D(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%" } : {};
-    return /* @__PURE__ */ i.createElement(
-      "div",
-      {
-        ref: (r) => {
-          this._element = r;
+  }, [t, x]);
+  const de = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, se = a ? { paddingTop: 0, height: "100%" } : {};
+  let S;
+  return a ? S = { bottom: "calc(" + v + "%)", zIndex: 1 } : u === "rtl" ? S = { right: "calc(" + v + "% - 13px)", zIndex: 1 } : S = { left: "calc(" + v + "%)", zIndex: 1 }, /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      ref: g,
+      dir: u,
+      id: t.id,
+      style: { gap: 0, ...t.style },
+      onFocus: te,
+      onBlur: ne,
+      onKeyDown: ae,
+      className: ve(
+        "k-slider",
+        {
+          "k-focus": p,
+          "k-disabled": C,
+          "k-slider-horizontal": !a,
+          "k-slider-vertical": 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: S(
-          "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
-        )
-      },
-      /* @__PURE__ */ i.createElement(
-        this.buttons,
+        t.className
+      )
+    },
+    oe({
+      enabled: (U = t.buttons) != null ? U : f.buttons,
+      decrement: ie,
+      increment: le,
+      incrementTitle: T.toLanguageString(
+        X,
+        A[X]
+      ),
+      decrementTitle: T.toLanguageString(
+        O,
+        A[O]
+      ),
+      children: /* @__PURE__ */ l.createElement(he, { onDrag: ce, onPress: re, autoScroll: !1 }, /* @__PURE__ */ l.createElement(
+        "div",
         {
-          enabled: this.props.buttons,
-          decrement: this.decrement,
-          increment: this.increment,
-          incrementTitle: s.toLanguageString(m, h[m]),
-          decrementTitle: s.toLanguageString(d, h[d])
+          className: "k-slider-track-wrap",
+          style: {
+            flexGrow: 1,
+            position: "relative",
+            touchAction: "none",
+            ...de
+          }
         },
-        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
+        t.children && /* @__PURE__ */ l.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...se } }, l.Children.map(t.children, (e, n) => e && l.cloneElement(
+          e,
+          {
+            position: 100 * (e.props.position - t.min) / (t.max - t.min),
+            vertical: a,
+            firstTick: n === 0,
+            lastTick: n === l.Children.count(t.children) - 1
+          },
+          e.props.children
+        ))),
+        /* @__PURE__ */ l.createElement(
           "div",
           {
-            className: "k-slider-track-wrap",
-            style: {
-              flexGrow: 1,
-              position: "relative",
-              touchAction: "none",
-              ...e
-            }
+            className: "k-slider-track",
+            style: a ? { bottom: 0, height: "100%" } : { [u === "rtl" ? "right" : "left"]: 0, width: "100%" },
+            ref: E
           },
-          this.props.children && /* @__PURE__ */ i.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...l } }, i.Children.map(this.props.children, (r, o) => r && i.cloneElement(
-            r,
-            {
-              position: 100 * (r.props.position - this.props.min) / (this.props.max - this.props.min),
-              vertical: this.props.vertical,
-              firstTick: o === 0,
-              lastTick: o === i.Children.count(this.props.children) - 1
-            },
-            r.props.children
-          ))),
-          /* @__PURE__ */ i.createElement(
+          /* @__PURE__ */ l.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;
-              }
-            },
-            /* @__PURE__ */ i.createElement(
-              "div",
-              {
-                className: "k-slider-selection",
-                style: this.props.vertical ? { height: t + "%" } : { width: t + "%" }
-              }
-            ),
-            /* @__PURE__ */ 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: T(this.props.tabIndex, this.props.disabled, void 0),
-                className: "k-draghandle k-draghandle-end",
-                title: s.toLanguageString(u, h[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 }
-              }
-            )
+              className: "k-slider-selection",
+              style: a ? { height: v + "%" } : { width: v + "%" }
+            }
+          ),
+          /* @__PURE__ */ l.createElement(
+            "span",
+            {
+              role: "slider",
+              "aria-valuemin": t.min,
+              "aria-valuemax": t.max,
+              "aria-valuenow": r,
+              "aria-valuetext": String(r),
+              "aria-orientation": a ? "vertical" : void 0,
+              "aria-disabled": C ? "true" : void 0,
+              "aria-labelledby": t.ariaLabelledBy,
+              "aria-describedby": t.ariaDescribedBy,
+              "aria-label": t.ariaLabel,
+              tabIndex: be(Q, C, void 0),
+              className: "k-draghandle k-draghandle-end",
+              title: T.toLanguageString(
+                H,
+                A[H]
+              ),
+              style: S
+            }
           )
-        ))
-      )
-    );
-  }
-  /**
-   * @hidden
-   */
-  get sliderTrack() {
-    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 });
-  }
-};
-p.displayName = "Slider", p.propTypes = {
-  min: a.number.isRequired,
-  max: a.number.isRequired,
-  value: a.number,
-  vertical: a.bool,
-  id: a.string,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  ariaLabel: a.string
-  // TODO: validation when buttons is set to true, but no step is provided
+        )
+      ))
+    })
+  );
+});
+z.displayName = "Slider";
+const Se = fe(), J = ue(Se, z);
+J.displayName = "KendoReactSlider";
+J.propTypes = {
+  value: i.number,
+  defaultValue: i.number,
+  min: i.number.isRequired,
+  max: i.number.isRequired,
+  step: i.number,
+  largeStep: i.number,
+  onChange: i.func,
+  style: i.object,
+  className: i.string,
+  buttons: i.bool,
+  tabIndex: i.number,
+  disabled: i.bool,
+  vertical: i.bool,
+  id: i.string,
+  ariaDescribedBy: i.string,
+  ariaLabelledBy: i.string,
+  ariaLabel: i.string,
+  dir: i.oneOf(["ltr", "rtl"]),
+  children: i.node
 };
-let c = p;
-const L = w(), A = y(L, c);
-A.displayName = "KendoReactSlider";
-C(c);
+ke(z);
 export {
-  A as Slider,
-  L as SliderPropsContext,
-  c as SliderWithoutContext
+  J as Slider,
+  Se as SliderPropsContext,
+  z as SliderWithoutContext
 };