@progress/kendo-react-inputs 8.2.0-develop.1 → 8.2.0-develop.11

package/numerictextbox/NumericTextBox.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 Ae=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),He=require("@progress/kendo-react-labels"),we=require("../package-metadata.js"),g=require("../messages/index.js"),u=require("./utils/index.js"),pe=require("@progress/kendo-react-buttons");function Ke(m){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const v in m)if(v!=="default"){const N=Object.getOwnPropertyDescriptor(m,v);Object.defineProperty(L,v,N.get?N:{enumerable:!0,get:()=>m[v]})}}return L.default=m,Object.freeze(L)}const n=Ke(Ae),$e="Please enter a valid value!",ge=o.createPropsContext(),Q=n.forwardRef((m,L)=>{o.validatePackage(we.packageMetadata);const v=o.usePropsContext(ge,m),{className:N,value:k,defaultValue:ve,format:s,width:X,tabIndex:ye,accessKey:Ve,title:ke,placeholder:Z,min:f,max:b,dir:ee,name:_,label:R,id:Ce,ariaDescribedBy:Se,ariaLabelledBy:Ee,ariaLabel:xe,inputType:Oe,readOnly:C,validationMessage:G,children:Ie,style:te,inputStyle:he,valid:A,step:S=d.step,spinners:Le=d.spinners,disabled:c=d.disabled,required:H=d.required,validityStyles:ne=d.validityStyles,prefix:Pe=d.prefix,suffix:De=d.suffix,onChange:I=d.onChange,onFocus:re=d.onFocus,onBlur:ae=d.onBlur,rangeOnEnter:se=d.rangeOnEnter,size:w=d.size,rounded:K=d.rounded,fillMode:B=d.fillMode,...ue}=v,Ne=o.useId(),le=Ce||Ne,l=fe.useInternationalization(),M=fe.useLocalization(),a=n.useRef(null),q=n.useRef(),[Re,h]=n.useState(!1),i=n.useRef(u.getInitialState()),T=n.useRef(!1),$=n.useRef(),P=n.useRef(ve),D=u.formatValue(i.current.focused&&!c?i.current.currentLooseValue:u.getStateOrPropsValue(k,P.current),s,l);$.current=D;const[Be]=o.useCustomComponent(Pe),[Me]=o.useCustomComponent(De);n.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(z().valid?"":G||$e)});const oe=n.useCallback(()=>{a.current&&a.current.focus()},[]),F=n.useCallback(()=>q.current!==void 0?q.current:u.getStateOrPropsValue(k,P.current),[k]),ce=n.useCallback(()=>_,[_]),j=n.useCallback(()=>H,[H]),z=n.useCallback(()=>{const r=G!==void 0,e=F(),x=A!==void 0?A:!i.current.valueIsOutOfRange&&(!j()||e!=null);return{customError:r,valid:x,valueMissing:e==null}},[G,A,F,j]),U=n.useCallback(()=>ne,[ne]),ie=n.useCallback(()=>v,[v]),E=n.useCallback(()=>{const r={element:a.current,focus:oe};return Object.defineProperty(r,"name",{get:ce}),Object.defineProperty(r,"value",{get:F}),Object.defineProperty(r,"validity",{get:z}),Object.defineProperty(r,"validityStyles",{get:U}),Object.defineProperty(r,"required",{get:j}),Object.defineProperty(r,"props",{get:ie}),r},[ce,F,z,U,j,oe,ie]);n.useImperativeHandle(L,E);const y=n.useCallback(()=>({eventValue:u.getStateOrPropsValue(k,P.current),prevLooseValue:$.current,currentLooseValue:a.current.value,selectionStart:a.current.selectionStart,selectionEnd:a.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:T.current,focused:i.current.focused}),[k]),V=n.useCallback((r,e)=>{if(c)return;q.current=e.eventValue,P.current=e.eventValue;const x=u.formatValue(u.rangeValue(e.eventValue,f,b),s,l),p=u.rangeValue(l.parseNumber(x,s),f,b);p!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=p,P.current=p),k!==e.eventValue&&o.dispatchEvent(I,r,E(),{value:e.eventValue}),q.current=void 0,i.current=e,h(J=>!J)},[k,I,c,h,E]),qe=n.useCallback(r=>{const e=y();T.current=!1,V(r,u.sanitizeNumber(e,s,l))},[s,I,l,V,y]),Te=n.useCallback(r=>{let e=y();const x=l.parseNumber(String(e.currentLooseValue),s);if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const p=l.numberSymbols(),O=p&&r.key===p.minusSign,J=p&&r.key===p.decimal;T.current=!O&&!J;return}switch(r.keyCode){case 38:u.increaseValue(x,e,S,f,b,s,l);break;case 40:u.decreaseValue(x,e,S,f,b,s,l);break;case 13:{if(se===!1)return;const p=u.formatValue(u.rangeValue(x,f,b),s,l),O=u.rangeValue(l.parseNumber(p,s),f,b);e.eventValue=O,e.currentLooseValue=u.formatValue(O,s,l),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break}case 110:{const p=a.current,O=l.numberSymbols();p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+O.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=u.sanitizeNumber(e,s,l));break}default:return}r.preventDefault(),V(r,e)},[s,f,b,S,I,se,V,y]),Fe=n.useCallback(()=>{T.current=!0},[]),W=n.useCallback(r=>{if(C||c)return;const e=y();u.increaseValue(l.parseNumber(String(e.currentLooseValue),s),e,S,f,b,s,l),V(r,e)},[s,f,b,S,I,C,c,V,y]),Y=n.useCallback(r=>{if(C||c)return;const e=y();u.decreaseValue(l.parseNumber(String(e.currentLooseValue),s),e,S,f,b,s,l),V(r,e)},[s,f,b,S,I,C,c,V,y]),je=n.useCallback(r=>{const e=o.getActiveElement(document);!document||e!==a.current||!a.current||C||c||(r.nativeEvent.deltaY<0&&W(r),r.nativeEvent.deltaY>0&&Y(r))},[W,Y,c,C]),ze=n.useCallback(r=>{i.current.currentLooseValue=$.current,i.current.focused=!0,o.dispatchEvent(re,r,E(),{}),h(e=>!e)},[re,h,E]),_e=n.useCallback(r=>{i.current=u.getInitialState(),o.dispatchEvent(ae,r,E(),{}),h(e=>!e)},[ae,h,E]),Ge=n.useCallback(r=>{if(document&&a.current){const e=o.getActiveElement(document);r.preventDefault(),e!==a.current&&a.current.focus()}},[]);o.useIsomorphicLayoutEffect(()=>{a.current&&a.current.type!=="number"&&i.current.selectionStart!==void 0&&i.current.selectionEnd!==void 0&&(a.current.selectionStart=i.current.selectionStart,a.current.selectionEnd=i.current.selectionEnd,i.current.selectionStart=void 0,i.current.selectionEnd=void 0)},[Re]);const de=!U()||z().valid,me=n.createElement("span",{dir:ee,style:R?te:{width:X,...te},className:o.classNames("k-input","k-numerictextbox",{[`k-input-${o.kendoThemeMaps.sizeMap[w]||w}`]:w,[`k-input-${B}`]:B,[`k-rounded-${o.kendoThemeMaps.roundedMap[K]||K}`]:K,"k-invalid":!de,"k-required":H,"k-disabled":c},N),"aria-disabled":c?"true":void 0,...R?{}:ue},n.createElement(Be,null),n.createElement("input",{role:"spinbutton",value:D===null?"":D,tabIndex:o.getTabIndex(ye,c),accessKey:Ve,disabled:c,title:ke,"aria-disabled":c?"true":void 0,"aria-valuemin":f,"aria-valuemax":b,"aria-label":xe,"aria-labelledby":Ee,"aria-describedby":Se,placeholder:Z,spellCheck:!1,autoComplete:"off",autoCorrect:"off",type:Oe||"tel",className:"k-input-inner",id:le,name:_,readOnly:C,style:he,onChange:qe,onFocus:ze,onBlur:_e,onKeyDown:Te,onPaste:Fe,onWheel:je,ref:a}),n.createElement(Me,null),Ie,Le&&n.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:Ge},n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:be.caretAltUpIcon,rounded:null,fillMode:B,className:"k-spinner-increase","aria-label":M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),title:M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),onClick:W}),n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:be.caretAltDownIcon,rounded:null,fillMode:B,className:"k-spinner-decrease","aria-label":M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),title:M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),onClick:Y})));return R?n.createElement(He.FloatingLabel,{label:R,editorId:le,editorValue:D===null?"":D,editorValid:de,editorDisabled:c,editorPlaceholder:Z,children:me,style:{width:X},dir:ee,...ue}):me});Q.propTypes={value:t.number,defaultValue:t.number,step:t.number,format:t.oneOfType([t.string,t.shape({style:t.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:t.string,currencyDisplay:t.oneOf(["symbol","code","name"]),useGrouping:t.bool,minimumIntegerDigits:t.number,minimumFractionDigits:t.number,maximumFractionDigits:t.number})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,title:t.string,placeholder:t.string,min:t.number,max:t.number,spinners:t.bool,disabled:t.bool,readOnly:t.bool,dir:t.string,name:t.string,label:t.string,validationMessage:t.string,required:t.bool,id:t.string,rangeOnEnter:t.bool,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,onChange:t.func,onFocus:t.func,onBlur:t.func,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"])};const d={prefix:m=>null,suffix:m=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,onChange:m=>{},onFocus:m=>{},onBlur:m=>{},size:"medium",rounded:"medium",fillMode:"solid"};Q.displayName="KendoNumericTextBox";exports.NumericTextBox=Q;exports.NumericTextBoxPropsContext=ge;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const He=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),we=require("@progress/kendo-react-labels"),Ke=require("../package-metadata.js"),g=require("../messages/index.js"),u=require("./utils/index.js"),pe=require("@progress/kendo-react-buttons");function $e(m){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const v in m)if(v!=="default"){const N=Object.getOwnPropertyDescriptor(m,v);Object.defineProperty(L,v,N.get?N:{enumerable:!0,get:()=>m[v]})}}return L.default=m,Object.freeze(L)}const n=$e(He),Ue="Please enter a valid value!",ge=o.createPropsContext(),Q=n.forwardRef((m,L)=>{o.validatePackage(Ke.packageMetadata);const v=o.usePropsContext(ge,m),{className:N,value:k,defaultValue:ve,format:s,width:X,tabIndex:ye,accessKey:Ve,title:ke,placeholder:Z,min:f,max:b,dir:ee,name:_,label:R,id:Ce,ariaDescribedBy:Se,ariaLabelledBy:Ee,ariaLabel:xe,inputType:Oe,readOnly:C,validationMessage:G,children:Ie,style:te,inputStyle:he,valid:A,step:S=i.step,spinners:Le=i.spinners,disabled:c=i.disabled,required:H=i.required,validityStyles:ne=i.validityStyles,prefix:Pe=i.prefix,suffix:De=i.suffix,onChange:I=i.onChange,onFocus:re=i.onFocus,onBlur:ae=i.onBlur,rangeOnEnter:se=i.rangeOnEnter,size:w=i.size,rounded:K=i.rounded,fillMode:B=i.fillMode,autoFocus:Ne=i.autoFocus,...ue}=v,Re=o.useId(),le=Ce||Re,l=fe.useInternationalization(),M=fe.useLocalization(),a=n.useRef(null),q=n.useRef(),[Be,h]=n.useState(!1),d=n.useRef(u.getInitialState()),T=n.useRef(!1),$=n.useRef(),P=n.useRef(ve),D=u.formatValue(d.current.focused&&!c?d.current.currentLooseValue:u.getStateOrPropsValue(k,P.current),s,l);$.current=D;const[Me]=o.useCustomComponent(Pe),[qe]=o.useCustomComponent(De);n.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(z().valid?"":G||Ue)});const oe=n.useCallback(()=>{a.current&&a.current.focus()},[]),F=n.useCallback(()=>q.current!==void 0?q.current:u.getStateOrPropsValue(k,P.current),[k]),ce=n.useCallback(()=>_,[_]),j=n.useCallback(()=>H,[H]),z=n.useCallback(()=>{const r=G!==void 0,e=F(),x=A!==void 0?A:!d.current.valueIsOutOfRange&&(!j()||e!=null);return{customError:r,valid:x,valueMissing:e==null}},[G,A,F,j]),U=n.useCallback(()=>ne,[ne]),ie=n.useCallback(()=>v,[v]),E=n.useCallback(()=>{const r={element:a.current,focus:oe};return Object.defineProperty(r,"name",{get:ce}),Object.defineProperty(r,"value",{get:F}),Object.defineProperty(r,"validity",{get:z}),Object.defineProperty(r,"validityStyles",{get:U}),Object.defineProperty(r,"required",{get:j}),Object.defineProperty(r,"props",{get:ie}),r},[ce,F,z,U,j,oe,ie]);n.useImperativeHandle(L,E);const y=n.useCallback(()=>({eventValue:u.getStateOrPropsValue(k,P.current),prevLooseValue:$.current,currentLooseValue:a.current.value,selectionStart:a.current.selectionStart,selectionEnd:a.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:T.current,focused:d.current.focused}),[k]),V=n.useCallback((r,e)=>{if(c)return;q.current=e.eventValue,P.current=e.eventValue;const x=u.formatValue(u.rangeValue(e.eventValue,f,b),s,l),p=u.rangeValue(l.parseNumber(x,s),f,b);p!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=p,P.current=p),k!==e.eventValue&&o.dispatchEvent(I,r,E(),{value:e.eventValue}),q.current=void 0,d.current=e,h(J=>!J)},[k,I,c,h,E]),Te=n.useCallback(r=>{const e=y();T.current=!1,V(r,u.sanitizeNumber(e,s,l))},[s,I,l,V,y]),Fe=n.useCallback(r=>{let e=y();const x=l.parseNumber(String(e.currentLooseValue),s);if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const p=l.numberSymbols(),O=p&&r.key===p.minusSign,J=p&&r.key===p.decimal;T.current=!O&&!J;return}switch(r.keyCode){case 38:u.increaseValue(x,e,S,f,b,s,l);break;case 40:u.decreaseValue(x,e,S,f,b,s,l);break;case 13:{if(se===!1)return;const p=u.formatValue(u.rangeValue(x,f,b),s,l),O=u.rangeValue(l.parseNumber(p,s),f,b);e.eventValue=O,e.currentLooseValue=u.formatValue(O,s,l),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break}case 110:{const p=a.current,O=l.numberSymbols();p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+O.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=u.sanitizeNumber(e,s,l));break}default:return}r.preventDefault(),V(r,e)},[s,f,b,S,I,se,V,y]),je=n.useCallback(()=>{T.current=!0},[]),W=n.useCallback(r=>{if(C||c)return;const e=y();u.increaseValue(l.parseNumber(String(e.currentLooseValue),s),e,S,f,b,s,l),V(r,e)},[s,f,b,S,I,C,c,V,y]),Y=n.useCallback(r=>{if(C||c)return;const e=y();u.decreaseValue(l.parseNumber(String(e.currentLooseValue),s),e,S,f,b,s,l),V(r,e)},[s,f,b,S,I,C,c,V,y]),ze=n.useCallback(r=>{const e=o.getActiveElement(document);!document||e!==a.current||!a.current||C||c||(r.nativeEvent.deltaY<0&&W(r),r.nativeEvent.deltaY>0&&Y(r))},[W,Y,c,C]),_e=n.useCallback(r=>{d.current.currentLooseValue=$.current,d.current.focused=!0,o.dispatchEvent(re,r,E(),{}),h(e=>!e)},[re,h,E]),Ge=n.useCallback(r=>{d.current=u.getInitialState(),o.dispatchEvent(ae,r,E(),{}),h(e=>!e)},[ae,h,E]),Ae=n.useCallback(r=>{if(document&&a.current){const e=o.getActiveElement(document);r.preventDefault(),e!==a.current&&a.current.focus()}},[]);o.useIsomorphicLayoutEffect(()=>{a.current&&a.current.type!=="number"&&d.current.selectionStart!==void 0&&d.current.selectionEnd!==void 0&&(a.current.selectionStart=d.current.selectionStart,a.current.selectionEnd=d.current.selectionEnd,d.current.selectionStart=void 0,d.current.selectionEnd=void 0)},[Be]);const de=!U()||z().valid,me=n.createElement("span",{dir:ee,style:R?te:{width:X,...te},className:o.classNames("k-input","k-numerictextbox",{[`k-input-${o.kendoThemeMaps.sizeMap[w]||w}`]:w,[`k-input-${B}`]:B,[`k-rounded-${o.kendoThemeMaps.roundedMap[K]||K}`]:K,"k-invalid":!de,"k-required":H,"k-disabled":c},N),"aria-disabled":c?"true":void 0,...R?{}:ue},n.createElement(Me,null),n.createElement("input",{role:"spinbutton",value:D===null?"":D,tabIndex:o.getTabIndex(ye,c),accessKey:Ve,disabled:c,title:ke,"aria-disabled":c?"true":void 0,"aria-valuemin":f,"aria-valuemax":b,"aria-label":xe,"aria-labelledby":Ee,"aria-describedby":Se,placeholder:Z,spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:Ne,type:Oe||"tel",className:"k-input-inner",id:le,name:_,readOnly:C,style:he,onChange:Te,onFocus:_e,onBlur:Ge,onKeyDown:Fe,onPaste:je,onWheel:ze,ref:a}),n.createElement(qe,null),Ie,Le&&n.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:Ae},n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:be.caretAltUpIcon,rounded:null,fillMode:B,className:"k-spinner-increase","aria-label":M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),title:M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),onClick:W}),n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:be.caretAltDownIcon,rounded:null,fillMode:B,className:"k-spinner-decrease","aria-label":M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),title:M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),onClick:Y})));return R?n.createElement(we.FloatingLabel,{label:R,editorId:le,editorValue:D===null?"":D,editorValid:de,editorDisabled:c,editorPlaceholder:Z,children:me,style:{width:X},dir:ee,...ue}):me});Q.propTypes={value:t.number,defaultValue:t.number,step:t.number,format:t.oneOfType([t.string,t.shape({style:t.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:t.string,currencyDisplay:t.oneOf(["symbol","code","name"]),useGrouping:t.bool,minimumIntegerDigits:t.number,minimumFractionDigits:t.number,maximumFractionDigits:t.number})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,title:t.string,placeholder:t.string,min:t.number,max:t.number,spinners:t.bool,disabled:t.bool,readOnly:t.bool,dir:t.string,name:t.string,label:t.string,validationMessage:t.string,required:t.bool,id:t.string,rangeOnEnter:t.bool,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,onChange:t.func,onFocus:t.func,onBlur:t.func,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"])};const i={prefix:m=>null,suffix:m=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,autoFocus:!1,onChange:m=>{},onFocus:m=>{},onBlur:m=>{},size:"medium",rounded:"medium",fillMode:"solid"};Q.displayName="KendoNumericTextBox";exports.NumericTextBox=Q;exports.NumericTextBoxPropsContext=ge;

package/numerictextbox/NumericTextBox.mjs

@@ -8,17 +8,17 @@
 "use client";
 import * as n from "react";
 import t from "prop-types";
-import { useInternationalization as Je, useLocalization as Qe } from "@progress/kendo-react-intl";
-import { createPropsContext as Xe, validatePackage as Ze, usePropsContext as et, useId as tt, useCustomComponent as pe, dispatchEvent as Q, getActiveElement as be, useIsomorphicLayoutEffect as nt, classNames as rt, kendoThemeMaps as ge, getTabIndex as at } from "@progress/kendo-react-common";
-import { caretAltUpIcon as lt, caretAltDownIcon as st } from "@progress/kendo-svg-icons";
-import { FloatingLabel as ot } from "@progress/kendo-react-labels";
-import { packageMetadata as ut } from "../package-metadata.mjs";
-import { numericIncreaseValue as M, messages as F, numericDecreaseValue as T } from "../messages/index.mjs";
+import { useInternationalization as Qe, useLocalization as Xe } from "@progress/kendo-react-intl";
+import { createPropsContext as Ze, validatePackage as et, usePropsContext as tt, useId as nt, useCustomComponent as pe, dispatchEvent as Q, getActiveElement as be, useIsomorphicLayoutEffect as rt, classNames as at, kendoThemeMaps as ge, getTabIndex as lt } from "@progress/kendo-react-common";
+import { caretAltUpIcon as st, caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
+import { FloatingLabel as ut } from "@progress/kendo-react-labels";
+import { packageMetadata as ct } from "../package-metadata.mjs";
+import { numericIncreaseValue as B, messages as M, numericDecreaseValue as T } from "../messages/index.mjs";
 import { getInitialState as ve, formatValue as z, getStateOrPropsValue as X, rangeValue as G, sanitizeNumber as ye, decreaseValue as Ve, increaseValue as ke } from "./utils/index.mjs";
 import { Button as Ce } from "@progress/kendo-react-buttons";
-const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) => {
-  Ze(ut);
-  const q = et(ct, C), {
+const it = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef((C, Se) => {
+  et(ct);
+  const q = tt(dt, C), {
     className: xe,
     value: b,
     defaultValue: he,
@@ -28,7 +28,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
     accessKey: Oe,
     title: Le,
     placeholder: ee,
-    min: c,
+    min: i,
     max: d,
     dir: te,
     name: j,
@@ -37,43 +37,44 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
     ariaDescribedBy: Ne,
     ariaLabelledBy: De,
     ariaLabel: Re,
-    inputType: Be,
+    inputType: Fe,
     readOnly: g,
     validationMessage: A,
-    children: Me,
+    children: Be,
     style: ne,
-    inputStyle: Fe,
+    inputStyle: Me,
     valid: _,
-    step: v = i.step,
-    spinners: Te = i.spinners,
-    disabled: o = i.disabled,
-    required: H = i.required,
-    validityStyles: re = i.validityStyles,
-    prefix: ze = i.prefix,
-    suffix: Ge = i.suffix,
-    onChange: E = i.onChange,
-    onFocus: ae = i.onFocus,
-    onBlur: le = i.onBlur,
-    rangeOnEnter: se = i.rangeOnEnter,
-    size: K = i.size,
-    rounded: w = i.rounded,
-    fillMode: O = i.fillMode,
+    step: v = u.step,
+    spinners: Te = u.spinners,
+    disabled: o = u.disabled,
+    required: H = u.required,
+    validityStyles: re = u.validityStyles,
+    prefix: ze = u.prefix,
+    suffix: Ge = u.suffix,
+    onChange: E = u.onChange,
+    onFocus: ae = u.onFocus,
+    onBlur: le = u.onBlur,
+    rangeOnEnter: se = u.rangeOnEnter,
+    size: K = u.size,
+    rounded: w = u.rounded,
+    fillMode: O = u.fillMode,
+    autoFocus: qe = u.autoFocus,
     ...oe
-  } = q, qe = tt(), ue = Pe || qe, s = Je(), L = Qe(), a = n.useRef(null), P = n.useRef(), [je, S] = n.useState(!1), u = n.useRef(ve()), N = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = z(
-    u.current.focused && !o ? u.current.currentLooseValue : X(b, x.current),
+  } = q, je = nt(), ue = Pe || je, s = Qe(), L = Xe(), a = n.useRef(null), P = n.useRef(), [Ae, S] = n.useState(!1), c = n.useRef(ve()), N = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = z(
+    c.current.focused && !o ? c.current.currentLooseValue : X(b, x.current),
     l,
     s
   );
   U.current = h;
-  const [Ae] = pe(ze), [_e] = pe(Ge);
+  const [_e] = pe(ze), [He] = pe(Ge);
   n.useEffect(
     () => {
       a.current && a.current.setCustomValidity && a.current.setCustomValidity(
-        B().valid ? "" : A || it
+        F().valid ? "" : A || it
       );
     }
   );
-  const ie = n.useCallback(
+  const ce = n.useCallback(
     () => {
       a.current && a.current.focus();
     },
@@ -81,15 +82,15 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
   ), D = n.useCallback(
     () => P.current !== void 0 ? P.current : X(b, x.current),
     [b]
-  ), ce = n.useCallback(
+  ), ie = n.useCallback(
     () => j,
     [j]
   ), R = n.useCallback(
     () => H,
     [H]
-  ), B = n.useCallback(
+  ), F = n.useCallback(
     () => {
-      const r = A !== void 0, e = D(), V = _ !== void 0 ? _ : !u.current.valueIsOutOfRange && (!R() || e != null);
+      const r = A !== void 0, e = D(), V = _ !== void 0 ? _ : !c.current.valueIsOutOfRange && (!R() || e != null);
       return {
         customError: r,
         valid: V,
@@ -107,11 +108,11 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
     () => {
       const r = {
         element: a.current,
-        focus: ie
+        focus: ce
       };
-      return Object.defineProperty(r, "name", { get: ce }), Object.defineProperty(r, "value", { get: D }), Object.defineProperty(r, "validity", { get: B }), Object.defineProperty(r, "validityStyles", { get: $ }), Object.defineProperty(r, "required", { get: R }), Object.defineProperty(r, "props", { get: de }), r;
+      return Object.defineProperty(r, "name", { get: ie }), Object.defineProperty(r, "value", { get: D }), Object.defineProperty(r, "validity", { get: F }), Object.defineProperty(r, "validityStyles", { get: $ }), Object.defineProperty(r, "required", { get: R }), Object.defineProperty(r, "props", { get: de }), r;
     },
-    [ce, D, B, $, R, ie, de]
+    [ie, D, F, $, R, ce, de]
   );
   n.useImperativeHandle(Se, y);
   const f = n.useCallback(
@@ -125,7 +126,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       valueIsCorrected: !1,
       valueIsOutOfRange: !1,
       isPaste: N.current,
-      focused: u.current.focused
+      focused: c.current.focused
     }),
     [b]
   ), p = n.useCallback(
@@ -133,22 +134,22 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       if (o)
         return;
       P.current = e.eventValue, x.current = e.eventValue;
-      const V = z(G(e.eventValue, c, d), l, s), m = G(s.parseNumber(V, l), c, d);
+      const V = z(G(e.eventValue, i, d), l, s), m = G(s.parseNumber(V, l), i, d);
       m !== e.eventValue && (e.valueIsOutOfRange = !0, e.eventValue = m, x.current = m), b !== e.eventValue && Q(
         E,
         r,
         y(),
         { value: e.eventValue }
-      ), P.current = void 0, u.current = e, S((J) => !J);
+      ), P.current = void 0, c.current = e, S((J) => !J);
     },
     [b, E, o, S, y]
-  ), He = n.useCallback(
+  ), Ke = n.useCallback(
     (r) => {
       const e = f();
       N.current = !1, p(r, ye(e, l, s));
     },
     [l, E, s, p, f]
-  ), Ke = n.useCallback(
+  ), we = n.useCallback(
     (r) => {
       let e = f();
       const V = s.parseNumber(String(e.currentLooseValue), l);
@@ -163,7 +164,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
             V,
             e,
             v,
-            c,
+            i,
             d,
             l,
             s
@@ -174,7 +175,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
             V,
             e,
             v,
-            c,
+            i,
             d,
             l,
             s
@@ -183,7 +184,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
         case 13: {
           if (se === !1)
             return;
-          const m = z(G(V, c, d), l, s), k = G(s.parseNumber(m, l), c, d);
+          const m = z(G(V, i, d), l, s), k = G(s.parseNumber(m, l), i, d);
           e.eventValue = k, e.currentLooseValue = z(k, l, s), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
           break;
         }
@@ -197,8 +198,8 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       }
       r.preventDefault(), p(r, e);
     },
-    [l, c, d, v, E, se, p, f]
-  ), we = n.useCallback(
+    [l, i, d, v, E, se, p, f]
+  ), Ue = n.useCallback(
     () => {
       N.current = !0;
     },
@@ -212,13 +213,13 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
         s.parseNumber(String(e.currentLooseValue), l),
         e,
         v,
-        c,
+        i,
         d,
         l,
         s
       ), p(r, e);
     },
-    [l, c, d, v, E, g, o, p, f]
+    [l, i, d, v, E, g, o, p, f]
   ), Y = n.useCallback(
     (r) => {
       if (g || o)
@@ -228,22 +229,22 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
         s.parseNumber(String(e.currentLooseValue), l),
         e,
         v,
-        c,
+        i,
         d,
         l,
         s
       ), p(r, e);
     },
-    [l, c, d, v, E, g, o, p, f]
-  ), Ue = n.useCallback(
+    [l, i, d, v, E, g, o, p, f]
+  ), $e = n.useCallback(
     (r) => {
       const e = be(document);
       !document || e !== a.current || !a.current || g || o || (r.nativeEvent.deltaY < 0 && W(r), r.nativeEvent.deltaY > 0 && Y(r));
     },
     [W, Y, o, g]
-  ), $e = n.useCallback(
+  ), We = n.useCallback(
     (r) => {
-      u.current.currentLooseValue = U.current, u.current.focused = !0, Q(
+      c.current.currentLooseValue = U.current, c.current.focused = !0, Q(
         ae,
         r,
         y(),
@@ -251,9 +252,9 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       ), S((e) => !e);
     },
     [ae, S, y]
-  ), We = n.useCallback(
+  ), Ye = n.useCallback(
     (r) => {
-      u.current = ve(), Q(
+      c.current = ve(), Q(
         le,
         r,
         y(),
@@ -261,7 +262,7 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       ), S((e) => !e);
     },
     [le, S, y]
-  ), Ye = n.useCallback(
+  ), Je = n.useCallback(
     (r) => {
       if (document && a.current) {
         const e = be(document);
@@ -270,18 +271,18 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
     },
     []
   );
-  nt(
+  rt(
     () => {
-      a.current && a.current.type !== "number" && u.current.selectionStart !== void 0 && u.current.selectionEnd !== void 0 && (a.current.selectionStart = u.current.selectionStart, a.current.selectionEnd = u.current.selectionEnd, u.current.selectionStart = void 0, u.current.selectionEnd = void 0);
+      a.current && a.current.type !== "number" && c.current.selectionStart !== void 0 && c.current.selectionEnd !== void 0 && (a.current.selectionStart = c.current.selectionStart, a.current.selectionEnd = c.current.selectionEnd, c.current.selectionStart = void 0, c.current.selectionEnd = void 0);
     },
-    [je]
+    [Ae]
   );
-  const me = !$() || B().valid, fe = /* @__PURE__ */ n.createElement(
+  const me = !$() || F().valid, fe = /* @__PURE__ */ n.createElement(
     "span",
     {
       dir: te,
       style: I ? ne : { width: Z, ...ne },
-      className: rt(
+      className: at(
         "k-input",
         "k-numerictextbox",
         {
@@ -297,18 +298,18 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
       "aria-disabled": o ? "true" : void 0,
       ...I ? {} : oe
     },
-    /* @__PURE__ */ n.createElement(Ae, null),
+    /* @__PURE__ */ n.createElement(_e, null),
     /* @__PURE__ */ n.createElement(
       "input",
       {
         role: "spinbutton",
         value: h === null ? "" : h,
-        tabIndex: at(Ie, o),
+        tabIndex: lt(Ie, o),
         accessKey: Oe,
         disabled: o,
         title: Le,
         "aria-disabled": o ? "true" : void 0,
-        "aria-valuemin": c,
+        "aria-valuemin": i,
         "aria-valuemax": d,
         "aria-label": Re,
         "aria-labelledby": De,
@@ -317,28 +318,29 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
         spellCheck: !1,
         autoComplete: "off",
         autoCorrect: "off",
-        type: Be || "tel",
+        autoFocus: qe,
+        type: Fe || "tel",
         className: "k-input-inner",
         id: ue,
         name: j,
         readOnly: g,
-        style: Fe,
-        onChange: He,
-        onFocus: $e,
-        onBlur: We,
-        onKeyDown: Ke,
-        onPaste: we,
-        onWheel: Ue,
+        style: Me,
+        onChange: Ke,
+        onFocus: We,
+        onBlur: Ye,
+        onKeyDown: we,
+        onPaste: Ue,
+        onWheel: $e,
         ref: a
       }
     ),
-    /* @__PURE__ */ n.createElement(_e, null),
-    Me,
+    /* @__PURE__ */ n.createElement(He, null),
+    Be,
     Te && /* @__PURE__ */ n.createElement(
       "span",
       {
         className: "k-input-spinner k-spin-button",
-        onMouseDown: Ye
+        onMouseDown: Je
       },
       /* @__PURE__ */ n.createElement(
         Ce,
@@ -346,12 +348,12 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
           tabIndex: -1,
           type: "button",
           icon: "caret-alt-up",
-          svgIcon: lt,
+          svgIcon: st,
           rounded: null,
           fillMode: O,
           className: "k-spinner-increase",
-          "aria-label": L.toLanguageString(M, F[M]),
-          title: L.toLanguageString(M, F[M]),
+          "aria-label": L.toLanguageString(B, M[B]),
+          title: L.toLanguageString(B, M[B]),
           onClick: W
         }
       ),
@@ -361,19 +363,19 @@ const it = "Please enter a valid value!", ct = Xe(), Ee = n.forwardRef((C, Se) =
           tabIndex: -1,
           type: "button",
           icon: "caret-alt-down",
-          svgIcon: st,
+          svgIcon: ot,
           rounded: null,
           fillMode: O,
           className: "k-spinner-decrease",
-          "aria-label": L.toLanguageString(T, F[T]),
-          title: L.toLanguageString(T, F[T]),
+          "aria-label": L.toLanguageString(T, M[T]),
+          title: L.toLanguageString(T, M[T]),
           onClick: Y
         }
       )
     )
   );
   return I ? /* @__PURE__ */ n.createElement(
-    ot,
+    ut,
     {
       label: I,
       editorId: ue,
@@ -434,7 +436,7 @@ Ee.propTypes = {
   rounded: t.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: t.oneOf([null, "solid", "flat", "outline"])
 };
-const i = {
+const u = {
   prefix: (C) => null,
   suffix: (C) => null,
   step: 1,
@@ -443,6 +445,7 @@ const i = {
   required: !1,
   validityStyles: !0,
   rangeOnEnter: !0,
+  autoFocus: !1,
   onChange: (C) => {
   },
   onFocus: (C) => {
@@ -456,5 +459,5 @@ const i = {
 Ee.displayName = "KendoNumericTextBox";
 export {
   Ee as NumericTextBox,
-  ct as NumericTextBoxPropsContext
+  dt as NumericTextBoxPropsContext
 };

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1719843130,
+  publishDate: 1721022337,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "8.2.0-develop.1",
+  "version": "8.2.0-develop.11",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,13 +25,13 @@
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.2.0-develop.1",
-    "@progress/kendo-react-buttons": "8.2.0-develop.1",
-    "@progress/kendo-react-common": "8.2.0-develop.1",
-    "@progress/kendo-react-dialogs": "8.2.0-develop.1",
-    "@progress/kendo-react-intl": "8.2.0-develop.1",
-    "@progress/kendo-react-labels": "8.2.0-develop.1",
-    "@progress/kendo-react-popup": "8.2.0-develop.1",
+    "@progress/kendo-react-animation": "8.2.0-develop.11",
+    "@progress/kendo-react-buttons": "8.2.0-develop.11",
+    "@progress/kendo-react-common": "8.2.0-develop.11",
+    "@progress/kendo-react-dialogs": "8.2.0-develop.11",
+    "@progress/kendo-react-intl": "8.2.0-develop.11",
+    "@progress/kendo-react-labels": "8.2.0-develop.11",
+    "@progress/kendo-react-popup": "8.2.0-develop.11",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/range-slider/RangeSlider.js

@@ -5,7 +5,7 @@
  * 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 W=require("react"),C=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("../messages/index.js"),Y=require("@progress/kendo-react-intl"),s=require("./range-raducer.js"),F=require("../package-metadata.js");function J(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const e=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(n,c,e.get?e:{enumerable:!0,get:()=>r[c]})}}return n.default=r,Object.freeze(n)}const a=J(W),Q=(r,n,c)=>{const[e,l]=a.useState(r),m=a.useCallback(y=>{const b=s.rangeReducer(n.state||e,{...y,...n});c&&c(b,y.event),l(b)},[n,c]);return[e,m]},G=i.createPropsContext(),E=a.forwardRef((r,n)=>{i.validatePackage(F.packageMetadata);const c=i.usePropsContext(G,r),e={step:h.step,defaultValue:h.defaultValue,vertical:h.vertical,disabled:h.disabled,...c},l=a.useRef(null),m=a.useRef(null),y=a.useRef(null),b=a.useRef(null),D=a.useRef(null),$=a.useCallback(()=>{b.current&&b.current.focus()},[b]);a.useImperativeHandle(l,()=>({element:m.current,focus:$,props:e})),a.useImperativeHandle(n,()=>l.current);const f=a.useMemo(()=>e.min,[e.min]),g=a.useMemo(()=>e.max,[e.max]),S=a.useMemo(()=>e.step!==void 0?e.step:h.step,[e.step,h.step]),p=i.useDir(m,e.dir),K=(t,u)=>{e.onChange&&l.current&&e.onChange.call(void 0,{value:t,target:l.current,syntheticEvent:u})},[O,w]=a.useState(""),[R,d]=Q(e.defaultValue||h.defaultValue,{min:f,max:g,step:S,state:e.value},K),o=a.useMemo(()=>e.value||R,[e.value,R]),M=a.useRef(null),T=a.useRef(null),k=a.useMemo(()=>(o.start-f)/(g-f)*100,[o.start,f,g]),A=a.useMemo(()=>(o.end-f)/(g-f)*100,[o.end,f,g]),P=a.useMemo(()=>e.vertical?{paddingTop:0,height:"100%"}:{},[e.vertical]),z=a.useMemo(()=>e.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},[e.vertical]),_=Y.useLocalization(),I=a.useCallback(t=>{if(!T.current)return;const u=T.current.getBoundingClientRect(),v=e.vertical?u.bottom-t.clientY:p==="rtl"?u.right-t.clientX:t.clientX-u.left,x=e.vertical?u.height:u.width,X=v/x;return f+X*(g-f)},[T,e.vertical,p,f,g,R.start,R.end,e.value&&e.value.start,e.value&&e.value.end]),V=a.useCallback(t=>t<=o.start?"start":t>=o.end?"end":2*t<o.end+o.start?"start":"end",[R.start,R.end,e.value&&e.value.start,e.value&&e.value.end]),q=a.useCallback(t=>{switch(t.keyCode){case i.Keys.right:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.decrease:s.RANGE_ACTION.increase,key:"start",event:t});break;case i.Keys.up:t.preventDefault(),d({type:s.RANGE_ACTION.increase,key:"start",event:t});break;case i.Keys.left:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.increase:s.RANGE_ACTION.decrease,key:"start",event:t});break;case i.Keys.down:t.preventDefault(),d({type:s.RANGE_ACTION.decrease,key:"start",event:t});break;case i.Keys.home:t.preventDefault(),d({type:s.RANGE_ACTION.min,key:"start",event:t});break;case i.Keys.end:t.preventDefault(),d({type:s.RANGE_ACTION.max,key:"start",event:t});break}},[d]),j=a.useCallback(t=>{switch(t.keyCode){case i.Keys.right:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.decrease:s.RANGE_ACTION.increase,key:"end",event:t});break;case i.Keys.up:t.preventDefault(),d({type:s.RANGE_ACTION.increase,key:"end",event:t});break;case i.Keys.left:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.increase:s.RANGE_ACTION.decrease,key:"end",event:t});break;case i.Keys.down:t.preventDefault(),d({type:s.RANGE_ACTION.decrease,key:"end",event:t});break;case i.Keys.home:t.preventDefault(),d({type:s.RANGE_ACTION.min,key:"end",event:t});break;case i.Keys.end:t.preventDefault(),d({type:s.RANGE_ACTION.max,key:"end",event:t});break}},[d,p]),H=a.useCallback(t=>{const u=I(t),v=V(u);w(v),v==="end"?D.current.focus():b.current.focus();const x=v==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:x,payload:u,event:t})},[e.vertical,f,g,d]),L=t=>{const u=I(t),v=O==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:v,payload:u,event:t})},B=t=>{const u=I(t),v=O==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:v,payload:u,event:t}),w("")};return i.useDraggable(T,{onPress:H,onDrag:L,onRelease:B}),a.createElement("div",{id:e.id,style:e.style,ref:m,dir:p,className:i.classNames("k-slider",{"k-rtl":p==="rtl","k-disabled":e.disabled,"k-slider-vertical":e.vertical,"k-slider-horizontal":!e.vertical},e.className)},a.createElement("div",{ref:T,className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...z}},e.children&&a.createElement("ul",{className:"k-reset k-slider-items",style:{...P}},a.Children.map(e.children,(t,u)=>t&&a.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:e.vertical,firstTick:u===0,lastTick:u===a.Children.count(e.children)-1},t.props.children))),a.createElement("div",{ref:M,className:"k-slider-track",style:e.vertical?{bottom:0,height:"100%"}:{[p==="rtl"?"right":"left"]:0,width:"100%"}},k!==null&&A!==null&&a.createElement("div",{"data-selection":!0,ref:y,title:`${o.start} - ${o.end}`,className:"k-slider-selection",style:e.vertical?{height:A-k+"%",bottom:k+"%"}:{[p==="rtl"?"right":"left"]:k+"%",width:A-k+"%"}}),a.createElement("span",{ref:b,role:"slider",tabIndex:i.getTabIndex(e.startTabIndex,e.disabled,void 0),"aria-valuemin":f,"aria-valuemax":Math.max(g,o.end),"aria-valuenow":o.start,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${o.start} - ${o.end}`,className:"k-draghandle k-draghandle-start",title:_.toLanguageString(N.sliderDragTitle,N.messages[N.sliderDragTitle]),style:e.vertical?{bottom:"calc("+k+"%)",zIndex:1}:p==="rtl"?{right:"calc("+k+"% - 13px)",zIndex:1}:{left:"calc("+k+"%)",zIndex:1},onKeyDown:q}),a.createElement("span",{ref:D,role:"slider",tabIndex:i.getTabIndex(e.endTabIndex,e.disabled,void 0),"aria-valuemin":Math.min(f,o.start),"aria-valuemax":g,"aria-valuenow":o.end,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${o.start} - ${o.end}`,className:"k-draghandle k-draghandle-end",title:_.toLanguageString(N.sliderDragTitle,N.messages[N.sliderDragTitle]),style:e.vertical?{bottom:"calc("+A+"%)",zIndex:1}:p==="rtl"?{right:"calc("+A+"% - 13px)",zIndex:1}:{left:"calc("+A+"%)",zIndex:1},onKeyDown:j}))))}),U={value:(r,n,c)=>{if(r.value){const e=r.value.start,l=r.value.end,m=r.min,y=r.max;if(e>l||e>y||e<m||l>y||l<m||l<e)return new Error(`Invalid prop + ${n} supplied to ${c}.
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),C=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("../messages/index.js"),Y=require("@progress/kendo-react-intl"),s=require("./range-raducer.js"),F=require("../package-metadata.js");function J(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const e=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(n,c,e.get?e:{enumerable:!0,get:()=>r[c]})}}return n.default=r,Object.freeze(n)}const a=J(W),Q=(r,n,c)=>{const[e,l]=a.useState(r),m=a.useCallback(y=>{const b=s.rangeReducer(n.state||e,{...y,...n});c&&c(b,y.event),l(b)},[n,c]);return[e,m]},G=i.createPropsContext(),E=a.forwardRef((r,n)=>{i.validatePackage(F.packageMetadata);const c=i.usePropsContext(G,r),e={step:h.step,defaultValue:h.defaultValue,vertical:h.vertical,disabled:h.disabled,...c},l=a.useRef(null),m=a.useRef(null),y=a.useRef(null),b=a.useRef(null),D=a.useRef(null),S=a.useCallback(()=>{b.current&&b.current.focus()},[b]);a.useImperativeHandle(l,()=>({element:m.current,focus:S,props:e})),a.useImperativeHandle(n,()=>l.current);const f=a.useMemo(()=>e.min,[e.min]),g=a.useMemo(()=>e.max,[e.max]),$=a.useMemo(()=>e.step!==void 0?e.step:h.step,[e.step,h.step]),p=i.useDir(m,e.dir),K=(t,u)=>{e.onChange&&l.current&&e.onChange.call(void 0,{value:t,target:l.current,syntheticEvent:u})},[O,w]=a.useState(""),[R,d]=Q(e.defaultValue||h.defaultValue,{min:f,max:g,step:$,state:e.value},K),o=a.useMemo(()=>e.value||R,[e.value,R]),M=a.useRef(null),T=a.useRef(null),k=a.useMemo(()=>(o.start-f)/(g-f)*100,[o.start,f,g]),A=a.useMemo(()=>(o.end-f)/(g-f)*100,[o.end,f,g]),P=a.useMemo(()=>e.vertical?{paddingTop:0,height:"100%"}:{},[e.vertical]),z=a.useMemo(()=>e.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},[e.vertical]),_=Y.useLocalization(),I=a.useCallback(t=>{if(!T.current)return;const u=T.current.getBoundingClientRect(),v=e.vertical?u.bottom-t.clientY:p==="rtl"?u.right-t.clientX:t.clientX-u.left,x=e.vertical?u.height:u.width,X=v/x;return f+X*(g-f)},[T,e.vertical,p,f,g,R.start,R.end,e.value&&e.value.start,e.value&&e.value.end]),V=a.useCallback(t=>t<=o.start?"start":t>=o.end?"end":2*t<o.end+o.start?"start":"end",[R.start,R.end,e.value&&e.value.start,e.value&&e.value.end]),q=a.useCallback(t=>{switch(t.keyCode){case i.Keys.right:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.decrease:s.RANGE_ACTION.increase,key:"start",event:t});break;case i.Keys.up:t.preventDefault(),d({type:s.RANGE_ACTION.increase,key:"start",event:t});break;case i.Keys.left:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.increase:s.RANGE_ACTION.decrease,key:"start",event:t});break;case i.Keys.down:t.preventDefault(),d({type:s.RANGE_ACTION.decrease,key:"start",event:t});break;case i.Keys.home:t.preventDefault(),d({type:s.RANGE_ACTION.min,key:"start",event:t});break;case i.Keys.end:t.preventDefault(),d({type:s.RANGE_ACTION.max,key:"start",event:t});break}},[d]),j=a.useCallback(t=>{switch(t.keyCode){case i.Keys.right:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.decrease:s.RANGE_ACTION.increase,key:"end",event:t});break;case i.Keys.up:t.preventDefault(),d({type:s.RANGE_ACTION.increase,key:"end",event:t});break;case i.Keys.left:t.preventDefault(),d({type:p==="rtl"?s.RANGE_ACTION.increase:s.RANGE_ACTION.decrease,key:"end",event:t});break;case i.Keys.down:t.preventDefault(),d({type:s.RANGE_ACTION.decrease,key:"end",event:t});break;case i.Keys.home:t.preventDefault(),d({type:s.RANGE_ACTION.min,key:"end",event:t});break;case i.Keys.end:t.preventDefault(),d({type:s.RANGE_ACTION.max,key:"end",event:t});break}},[d,p]),H=a.useCallback(t=>{const u=I(t),v=V(u);w(v),v==="end"?D.current.focus():b.current.focus();const x=v==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:x,payload:u,event:t})},[e.vertical,f,g,d]),L=t=>{const u=I(t),v=O==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:v,payload:u,event:t})},B=t=>{const u=I(t),v=O==="end"?s.RANGE_ACTION.end:s.RANGE_ACTION.start;d({type:v,payload:u,event:t}),w("")};return i.useDraggable(T,{onPress:H,onDrag:L,onRelease:B},{autoScroll:!1}),a.createElement("div",{id:e.id,style:e.style,ref:m,dir:p,className:i.classNames("k-slider",{"k-rtl":p==="rtl","k-disabled":e.disabled,"k-slider-vertical":e.vertical,"k-slider-horizontal":!e.vertical},e.className)},a.createElement("div",{ref:T,className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...z}},e.children&&a.createElement("ul",{className:"k-reset k-slider-items",style:{...P}},a.Children.map(e.children,(t,u)=>t&&a.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:e.vertical,firstTick:u===0,lastTick:u===a.Children.count(e.children)-1},t.props.children))),a.createElement("div",{ref:M,className:"k-slider-track",style:e.vertical?{bottom:0,height:"100%"}:{[p==="rtl"?"right":"left"]:0,width:"100%"}},k!==null&&A!==null&&a.createElement("div",{"data-selection":!0,ref:y,title:`${o.start} - ${o.end}`,className:"k-slider-selection",style:e.vertical?{height:A-k+"%",bottom:k+"%"}:{[p==="rtl"?"right":"left"]:k+"%",width:A-k+"%"}}),a.createElement("span",{ref:b,role:"slider",tabIndex:i.getTabIndex(e.startTabIndex,e.disabled,void 0),"aria-valuemin":f,"aria-valuemax":Math.max(g,o.end),"aria-valuenow":o.start,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${o.start} - ${o.end}`,className:"k-draghandle k-draghandle-start",title:_.toLanguageString(N.sliderDragTitle,N.messages[N.sliderDragTitle]),style:e.vertical?{bottom:"calc("+k+"%)",zIndex:1}:p==="rtl"?{right:"calc("+k+"% - 13px)",zIndex:1}:{left:"calc("+k+"%)",zIndex:1},onKeyDown:q}),a.createElement("span",{ref:D,role:"slider",tabIndex:i.getTabIndex(e.endTabIndex,e.disabled,void 0),"aria-valuemin":Math.min(f,o.start),"aria-valuemax":g,"aria-valuenow":o.end,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${o.start} - ${o.end}`,className:"k-draghandle k-draghandle-end",title:_.toLanguageString(N.sliderDragTitle,N.messages[N.sliderDragTitle]),style:e.vertical?{bottom:"calc("+A+"%)",zIndex:1}:p==="rtl"?{right:"calc("+A+"% - 13px)",zIndex:1}:{left:"calc("+A+"%)",zIndex:1},onKeyDown:j}))))}),U={value:(r,n,c)=>{if(r.value){const e=r.value.start,l=r.value.end,m=r.min,y=r.max;if(e>l||e>y||e<m||l>y||l<m||l<e)return new Error(`Invalid prop + ${n} supplied to ${c}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.
                     `)}return null},defaultValue:(r,n,c)=>{if(r.defaultValue){const e=r.defaultValue.start,l=r.defaultValue.end,m=r.min,y=r.max;if(e>l||e>y||e<m||l>y||l<m||l<e)return new Error(`Invalid prop + ${n} supplied to ${c}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.

package/range-slider/RangeSlider.mjs

@@ -163,13 +163,17 @@ const te = (r, l, u) => {
     },
     [e.vertical, m, k, i]
   );
-  return J(w, { onPress: X, onDrag: (t) => {
-    const d = C(t), h = E === "end" ? n.end : n.start;
-    i({ type: h, payload: d, event: t });
-  }, onRelease: (t) => {
-    const d = C(t), h = E === "end" ? n.end : n.start;
-    i({ type: h, payload: d, event: t }), S("");
-  } }), /* @__PURE__ */ a.createElement(
+  return J(w, {
+    onPress: X,
+    onDrag: (t) => {
+      const d = C(t), h = E === "end" ? n.end : n.start;
+      i({ type: h, payload: d, event: t });
+    },
+    onRelease: (t) => {
+      const d = C(t), h = E === "end" ? n.end : n.start;
+      i({ type: h, payload: d, event: t }), S("");
+    }
+  }, { autoScroll: !1 }), /* @__PURE__ */ a.createElement(
     "div",
     {
       id: e.id,

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;