@progress/kendo-react-inputs 7.4.0 → 7.5.0-develop.1

package/index.d.mts

@@ -1071,7 +1071,7 @@ export declare interface FlatColorPickerChangeEvent {
     /**
      * The current value of the FlatColorPicker.
      */
-    value: string;
+    value: string | undefined;
     /**
      * A React Synthetic Event.
      */
@@ -1101,7 +1101,7 @@ export declare interface FlatColorPickerHandle {
     /**
      * The current value of the FlatColorPicker.
      */
-    value: string;
+    value: string | undefined;
 }
 
 /**
@@ -3517,6 +3517,16 @@ export declare interface SliderLabelProps {
      * @hidden
      */
     vertical?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is first.
+     */
+    firstTick?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is last.
+     */
+    lastTick?: boolean;
 }
 
 /**
@@ -4048,6 +4058,8 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
     /**
      * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
      * Defaults to `false`.
+     *
+     * Setting the value of the prop to `true` will make the TextArea component to ignore the resize behavior of the `resizable` prop.
      */
     autoSize?: boolean;
     /**
@@ -4158,6 +4170,24 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
      * Sets a custom suffix to the TextArea component.
      */
     suffix?: CustomComponent<any>;
+    /**
+     * Defines the resize behavior of the TextArea.
+     * The available options are:
+     * - none &mdash; The TextArea cannot be resized.
+     * - vertical &mdash; The TextArea can be resized vertically.
+     * - horizontal &mdash; The TextArea can be resized horizontally.
+     * - both &mdash; The TextArea can be resized both vertically and horizontally.
+     *
+     * @default `both`
+     *
+     * To be able to resize the TextArea, you should not set the `autoSize` property to `true`.
+     * To be able to resize the component horizontally, add the following inline style to the TextArea:
+     *
+     * ```jsx
+     * <TextArea resizable='horizontal' style={{width: 'auto'}}  />
+     * ```
+     */
+    resizable?: 'none' | 'vertical' | 'horizontal' | 'both';
 }
 
 /**

package/index.d.ts

@@ -1071,7 +1071,7 @@ export declare interface FlatColorPickerChangeEvent {
     /**
      * The current value of the FlatColorPicker.
      */
-    value: string;
+    value: string | undefined;
     /**
      * A React Synthetic Event.
      */
@@ -1101,7 +1101,7 @@ export declare interface FlatColorPickerHandle {
     /**
      * The current value of the FlatColorPicker.
      */
-    value: string;
+    value: string | undefined;
 }
 
 /**
@@ -3517,6 +3517,16 @@ export declare interface SliderLabelProps {
      * @hidden
      */
     vertical?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is first.
+     */
+    firstTick?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is last.
+     */
+    lastTick?: boolean;
 }
 
 /**
@@ -4048,6 +4058,8 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
     /**
      * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
      * Defaults to `false`.
+     *
+     * Setting the value of the prop to `true` will make the TextArea component to ignore the resize behavior of the `resizable` prop.
      */
     autoSize?: boolean;
     /**
@@ -4158,6 +4170,24 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
      * Sets a custom suffix to the TextArea component.
      */
     suffix?: CustomComponent<any>;
+    /**
+     * Defines the resize behavior of the TextArea.
+     * The available options are:
+     * - none &mdash; The TextArea cannot be resized.
+     * - vertical &mdash; The TextArea can be resized vertically.
+     * - horizontal &mdash; The TextArea can be resized horizontally.
+     * - both &mdash; The TextArea can be resized both vertically and horizontally.
+     *
+     * @default `both`
+     *
+     * To be able to resize the TextArea, you should not set the `autoSize` property to `true`.
+     * To be able to resize the component horizontally, add the following inline style to the TextArea:
+     *
+     * ```jsx
+     * <TextArea resizable='horizontal' style={{width: 'auto'}}  />
+     * ```
+     */
+    resizable?: 'none' | 'vertical' | 'horizontal' | 'both';
 }
 
 /**

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1712846610,
+  publishDate: 1712850629,
   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": "7.4.0",
+  "version": "7.5.0-develop.1",
   "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.19.0",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.4.0",
-    "@progress/kendo-react-buttons": "7.4.0",
-    "@progress/kendo-react-common": "7.4.0",
-    "@progress/kendo-react-dialogs": "7.4.0",
-    "@progress/kendo-react-intl": "7.4.0",
-    "@progress/kendo-react-labels": "7.4.0",
-    "@progress/kendo-react-popup": "7.4.0",
+    "@progress/kendo-react-animation": "7.5.0-develop.1",
+    "@progress/kendo-react-buttons": "7.5.0-develop.1",
+    "@progress/kendo-react-common": "7.5.0-develop.1",
+    "@progress/kendo-react-dialogs": "7.5.0-develop.1",
+    "@progress/kendo-react-intl": "7.5.0-develop.1",
+    "@progress/kendo-react-labels": "7.5.0-develop.1",
+    "@progress/kendo-react-popup": "7.5.0-develop.1",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/radiobutton/RadioButton.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 D=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common"),_=require("../package-metadata.js");function w(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(s,l,c.get?c:{enumerable:!0,get:()=>n[l]})}}return s.default=n,Object.freeze(s)}const t=w(D),R=a.createPropsContext(),d=t.forwardRef((n,s)=>{a.validatePackage(_.packageMetadata);const l=a.usePropsContext(R,n),{ariaDescribedBy:c,checked:E,children:k,className:x,disabled:o,id:h,size:m,label:b,labelPlacement:F,name:I,style:N,tabIndex:O,value:p,valid:j,onChange:v,onFocus:f,onBlur:g,...M}=l,i=t.useRef(null),y=t.useCallback(()=>{i.current&&i.current.focus()},[]),u=t.useCallback(()=>({element:i.current,focus:y}),[y]);t.useImperativeHandle(s,u);const C=a.useId(),T=t.useCallback(r=>{a.dispatchEvent(v,r,u(),{value:p})},[v,p,o]),z=t.useCallback(r=>{f&&!o&&a.dispatchEvent(f,r,u(),void 0)},[f,o]),S=t.useCallback(r=>{g&&!o&&a.dispatchEvent(g,r,u(),void 0)},[g,o]),q={type:"radio",id:h||C,name:I,className:a.classNames("k-radio",{[`k-radio-${a.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-invalid":j===!1},x),ref:i,disabled:o,tabIndex:a.getTabIndex(O,o),checked:E,style:N,"aria-describedby":c,value:p,onChange:T,onFocus:z,onBlur:S,...M},P=t.createElement(t.Fragment,null,b!==void 0?t.createElement("label",{className:"k-radio-label",htmlFor:h||C,style:{userSelect:"none"},"aria-label":b},b):null),B=t.createElement("input",{...q});return F==="before"?t.createElement(t.Fragment,null,P,B,k):t.createElement(t.Fragment,null,B,P,k)});d.propTypes={ariaDescribedBy:e.string,checked:e.bool,className:e.string,disabled:e.bool,id:e.string,size:e.oneOf([null,"small","medium","large"]),label:e.string,labelPlacement:e.string,name:e.string,style:e.object,tabIndex:e.number,value:e.any,valid:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const H={size:"medium"};d.displayName="KendoRadioButton";d.defaultProps=H;exports.RadioButton=d;exports.RadioButtonPropsContext=R;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),t=require("prop-types"),a=require("@progress/kendo-react-common"),w=require("../package-metadata.js");function _(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(s,l,c.get?c:{enumerable:!0,get:()=>n[l]})}}return s.default=n,Object.freeze(s)}const e=_(D),E=a.createPropsContext(),d=e.forwardRef((n,s)=>{a.validatePackage(w.packageMetadata);const l=a.usePropsContext(E,n),{ariaDescribedBy:c,checked:k,children:h,className:x,disabled:o,id:v,size:m,label:b,labelPlacement:F,name:I,style:N,tabIndex:O,value:p,valid:j,onChange:y,onFocus:f,onBlur:g,...M}=l,i=e.useRef(null),C=e.useCallback(()=>{i.current&&i.current.focus()},[]),u=e.useCallback(()=>({element:i.current,focus:C}),[C]);e.useImperativeHandle(s,u);const P=a.useId(),T=e.useCallback(r=>{a.dispatchEvent(y,r,u(),{value:p})},[y,p,o]),z=e.useCallback(r=>{f&&!o&&a.dispatchEvent(f,r,u(),void 0)},[f,o]),S=e.useCallback(r=>{g&&!o&&a.dispatchEvent(g,r,u(),void 0)},[g,o]),q={type:"radio",id:v||P,name:I,className:a.classNames("k-radio",{[`k-radio-${a.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-invalid":j===!1,"k-checked":k},x),ref:i,disabled:o,tabIndex:a.getTabIndex(O,o),checked:k,style:N,"aria-describedby":c,value:p,onChange:T,onFocus:z,onBlur:S,...M},B=e.createElement(e.Fragment,null,b!==void 0?e.createElement("label",{className:"k-radio-label",htmlFor:v||P,style:{userSelect:"none"},"aria-label":b},b):null),R=e.createElement("span",{className:"k-radio-wrap"},e.createElement("input",{...q}));return F==="before"?e.createElement(e.Fragment,null,B,R,h):e.createElement(e.Fragment,null,R,B,h)});d.propTypes={ariaDescribedBy:t.string,checked:t.bool,className:t.string,disabled:t.bool,id:t.string,size:t.oneOf([null,"small","medium","large"]),label:t.string,labelPlacement:t.string,name:t.string,style:t.object,tabIndex:t.number,value:t.any,valid:t.bool,onChange:t.func,onFocus:t.func,onBlur:t.func};const H={size:"medium"};d.displayName="KendoRadioButton";d.defaultProps=H;exports.RadioButton=d;exports.RadioButtonPropsContext=E;

package/radiobutton/RadioButton.mjs

@@ -8,30 +8,30 @@
 "use client";
 import * as e from "react";
 import a from "prop-types";
-import { createPropsContext as w, validatePackage as K, usePropsContext as L, useId as O, dispatchEvent as u, classNames as S, kendoThemeMaps as $, getTabIndex as q } from "@progress/kendo-react-common";
+import { createPropsContext as j, validatePackage as K, usePropsContext as L, useId as O, dispatchEvent as u, classNames as S, kendoThemeMaps as $, getTabIndex as q } from "@progress/kendo-react-common";
 import { packageMetadata as A } from "../package-metadata.mjs";
-const G = w(), m = e.forwardRef((C, y) => {
+const G = j(), m = e.forwardRef((y, B) => {
   K(A);
-  const B = L(G, C), {
-    ariaDescribedBy: P,
-    checked: x,
+  const P = L(G, y), {
+    ariaDescribedBy: x,
+    checked: p,
     children: b,
-    className: F,
+    className: E,
     disabled: n,
-    id: p,
+    id: f,
     size: s,
     label: r,
-    labelPlacement: I,
-    name: E,
-    style: R,
-    tabIndex: N,
+    labelPlacement: F,
+    name: I,
+    style: N,
+    tabIndex: R,
     value: c,
     valid: z,
-    onChange: f,
+    onChange: g,
     onFocus: i,
     onBlur: d,
     ...T
-  } = B, l = e.useRef(null), g = e.useCallback(
+  } = P, l = e.useRef(null), k = e.useCallback(
     () => {
       l.current && l.current.focus();
     },
@@ -39,22 +39,22 @@ const G = w(), m = e.forwardRef((C, y) => {
   ), o = e.useCallback(
     () => ({
       element: l.current,
-      focus: g
+      focus: k
     }),
-    [g]
+    [k]
   );
-  e.useImperativeHandle(y, o);
+  e.useImperativeHandle(B, o);
   const h = O(), M = e.useCallback(
     (t) => {
       u(
-        f,
+        g,
         t,
         o(),
         { value: c }
       );
     },
-    [f, c, n]
-  ), D = e.useCallback(
+    [g, c, n]
+  ), w = e.useCallback(
     (t) => {
       i && !n && u(
         i,
@@ -64,7 +64,7 @@ const G = w(), m = e.forwardRef((C, y) => {
       );
     },
     [i, n]
-  ), H = e.useCallback(
+  ), D = e.useCallback(
     (t) => {
       d && !n && u(
         d,
@@ -74,40 +74,41 @@ const G = w(), m = e.forwardRef((C, y) => {
       );
     },
     [d, n]
-  ), j = {
+  ), H = {
     type: "radio",
-    id: p || h,
-    name: E,
+    id: f || h,
+    name: I,
     className: S(
       "k-radio",
       {
         [`k-radio-${$.sizeMap[s] || s}`]: s,
-        "k-invalid": z === !1
+        "k-invalid": z === !1,
+        "k-checked": p
       },
-      F
+      E
     ),
     ref: l,
     disabled: n,
-    tabIndex: q(N, n),
-    checked: x,
-    style: R,
-    "aria-describedby": P,
+    tabIndex: q(R, n),
+    checked: p,
+    style: N,
+    "aria-describedby": x,
     value: c,
     onChange: M,
-    onFocus: D,
-    onBlur: H,
+    onFocus: w,
+    onBlur: D,
     ...T
-  }, k = /* @__PURE__ */ e.createElement(e.Fragment, null, r !== void 0 ? /* @__PURE__ */ e.createElement(
+  }, v = /* @__PURE__ */ e.createElement(e.Fragment, null, r !== void 0 ? /* @__PURE__ */ e.createElement(
     "label",
     {
       className: "k-radio-label",
-      htmlFor: p || h,
+      htmlFor: f || h,
       style: { userSelect: "none" },
       "aria-label": r
     },
     r
-  ) : null), v = /* @__PURE__ */ e.createElement("input", { ...j });
-  return I === "before" ? /* @__PURE__ */ e.createElement(e.Fragment, null, k, v, b) : /* @__PURE__ */ e.createElement(e.Fragment, null, v, k, b);
+  ) : null), C = /* @__PURE__ */ e.createElement("span", { className: "k-radio-wrap" }, /* @__PURE__ */ e.createElement("input", { ...H }));
+  return F === "before" ? /* @__PURE__ */ e.createElement(e.Fragment, null, v, C, b) : /* @__PURE__ */ e.createElement(e.Fragment, null, C, v, b);
 });
 m.propTypes = {
   ariaDescribedBy: a.string,

package/radiobutton/RadioGroup.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 L=require("react"),e=require("prop-types"),K=require("./RadioButton.js"),s=require("@progress/kendo-react-common"),A=require("../package-metadata.js");function J(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const n in l)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(l,n);Object.defineProperty(c,n,d.get?d:{enumerable:!0,get:()=>l[n]})}}return c.default=l,Object.freeze(c)}const t=J(L),E=s.createPropsContext(),u=t.forwardRef((l,c)=>{s.validatePackage(A.packageMetadata);const n=s.usePropsContext(E,l),{id:d,ariaLabelledBy:O,ariaDescribedBy:j,className:B,data:g,defaultValue:G,disabled:o,name:I,labelPlacement:F,layout:b,style:S,value:k,valid:q,item:x=N.item,onChange:m,onFocus:p}=n,i=t.useRef(null),C=t.useCallback(()=>{i.current&&s.focusFirstFocusableChild(i.current)},[]),f=t.useCallback(()=>({element:i.current,focus:C}),[C]);t.useImperativeHandle(c,f);const[D,v]=t.useState(G),h=k!==void 0,y=h?k:D,M=t.useCallback(a=>{let r=a.value;!h&&!o&&v(r),m&&!o&&s.dispatchEvent(m,a.syntheticEvent,f(),{value:r})},[v,m,o]),T=t.useCallback(a=>{p&&!o&&s.dispatchEvent(p,a.syntheticEvent,f(),void 0)},[p,o]),V=s.useId(),z=s.classNames("k-radio-list",{"k-list-horizontal":b==="horizontal","k-list-vertical":b==="vertical"||b===void 0},B),_=s.useRtl(i,n.dir),w=g&&g.map((a,r)=>{const P=y===a.value,H=y==null,R={...a,valid:q,checked:P,disabled:!!(a.disabled||o),labelPlacement:a.labelPlacement?a.labelPlacement:F,tabIndex:a.tabIndex?a.tabIndex:H&&r===0||P?0:-1,index:r,name:I||V,onChange:M,onFocus:T};return t.createElement(x,{className:s.classNames("k-radio-item",{"k-disabled":R.disabled||o}),key:r,role:"none"},t.createElement(K.RadioButton,{...R}))});return t.createElement("ul",{id:d,role:"radiogroup",className:z,ref:i,dir:_,style:S,"aria-labelledby":O,"aria-describedby":j},w)}),N={item:l=>t.createElement("li",{...l})};u.propTypes={ariaLabelledBy:e.string,ariaDescribedBy:e.string,className:e.string,data:e.arrayOf(e.object),defaultValue:e.any,dir:e.string,disabled:e.bool,labelPlacement:e.string,layout:e.string,name:e.string,style:e.object,value:e.any,onChange:e.func,onFocus:e.func};u.defaultProps=N;u.displayName="KendoRadioGroup";exports.RadioGroup=u;exports.RadioGroupPropsContext=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),e=require("prop-types"),K=require("./RadioButton.js"),s=require("@progress/kendo-react-common"),A=require("../package-metadata.js");function J(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const n in l)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(l,n);Object.defineProperty(c,n,d.get?d:{enumerable:!0,get:()=>l[n]})}}return c.default=l,Object.freeze(c)}const t=J(L),E=s.createPropsContext(),u=t.forwardRef((l,c)=>{s.validatePackage(A.packageMetadata);const n=s.usePropsContext(E,l),{id:d,ariaLabelledBy:O,ariaDescribedBy:j,className:B,data:g,defaultValue:G,disabled:o,name:I,labelPlacement:F,layout:b,style:S,value:k,valid:q,item:x=N.item,onChange:m,onFocus:p}=n,i=t.useRef(null),C=t.useCallback(()=>{i.current&&s.focusFirstFocusableChild(i.current)},[]),f=t.useCallback(()=>({element:i.current,focus:C}),[C]);t.useImperativeHandle(c,f);const[D,v]=t.useState(G),h=k!==void 0,y=h?k:D,M=t.useCallback(a=>{let r=a.value;!h&&!o&&v(r),m&&!o&&s.dispatchEvent(m,a.syntheticEvent,f(),{value:r})},[v,m,o]),T=t.useCallback(a=>{p&&!o&&s.dispatchEvent(p,a.syntheticEvent,f(),void 0)},[p,o]),V=s.useId(),z=s.classNames("k-radio-list",{"k-list-horizontal":b==="horizontal","k-list-vertical":b==="vertical"||b===void 0},B),_=s.useRtl(i,n.dir),w=g&&g.map((a,r)=>{const P=y===a.value,H=y==null,R={...a,valid:q,checked:P,disabled:!!(a.disabled||o),labelPlacement:a.labelPlacement?a.labelPlacement:F,tabIndex:a.tabIndex?a.tabIndex:H&&r===0||P?0:-1,index:r,name:I||V,onChange:M,onFocus:T};return t.createElement(x,{className:s.classNames("k-radio-list-item",{"k-disabled":R.disabled||o}),key:r,role:"none"},t.createElement(K.RadioButton,{...R}))});return t.createElement("ul",{id:d,role:"radiogroup",className:z,ref:i,dir:_,style:S,"aria-labelledby":O,"aria-describedby":j},w)}),N={item:l=>t.createElement("li",{...l})};u.propTypes={ariaLabelledBy:e.string,ariaDescribedBy:e.string,className:e.string,data:e.arrayOf(e.object),defaultValue:e.any,dir:e.string,disabled:e.bool,labelPlacement:e.string,layout:e.string,name:e.string,style:e.object,value:e.any,onChange:e.func,onFocus:e.func};u.defaultProps=N;u.displayName="KendoRadioGroup";exports.RadioGroup=u;exports.RadioGroupPropsContext=E;

package/radiobutton/RadioGroup.mjs

@@ -87,7 +87,7 @@ const Z = A(), m = t.forwardRef((r, E) => {
     return /* @__PURE__ */ t.createElement(
       z,
       {
-        className: P("k-radio-item", { "k-disabled": v.disabled || l }),
+        className: P("k-radio-list-item", { "k-disabled": v.disabled || l }),
         key: s,
         role: "none"
       },

package/range-slider/RangeSlider.js

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