@progress/kendo-react-inputs 14.3.0-develop.11 → 14.3.0-develop.13

package/slider/Slider.mjs

@@ -8,13 +8,13 @@
 import * as l from "react";
 import { useState as L, useRef as R, useMemo as N, useEffect as q, useCallback as o, useImperativeHandle as me } from "react";
 import i from "prop-types";
-import { withPropsContext as ue, dispatchEvent as fe, Keys as s, classNames as ge, Draggable as ve, getTabIndex as he, createPropsContext as be } from "@progress/kendo-react-common";
+import { withPropsContext as ue, dispatchEvent as fe, Keys as m, classNames as ge, Draggable as ve, getTabIndex as he, createPropsContext as be } from "@progress/kendo-react-common";
 import { LocalizationService as ye, registerForLocalization as ke } from "@progress/kendo-react-intl";
 import { sliderDragTitle as H, messages as A, sliderDecreaseValue as O, sliderIncreaseValue as X } from "../messages/index.mjs";
 import { SLIDER_LABEL_ATTRIBUTE as xe } from "./SliderLabel.mjs";
 import { Button as _ } from "@progress/kendo-react-buttons";
 import { caretAltUpIcon as j, caretAltLeftIcon as G, caretAltDownIcon as W, caretAltRightIcon as Y } from "@progress/kendo-svg-icons";
-const f = {
+const g = {
   step: 1,
   largeStep: 10,
   buttons: !1,
@@ -24,21 +24,21 @@ const f = {
 }, z = l.forwardRef((t, P) => {
   var M, K, U;
   const {
-    step: m = f.step,
-    largeStep: w = f.largeStep,
-    vertical: a = f.vertical,
-    disabled: C = f.disabled,
-    tabIndex: Q = f.tabIndex
-  } = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p, B] = L(!1), [I, ee] = L(t.dir), E = R(null), g = R(null), T = N(() => new ye(), []), V = R(null), D = t.value !== void 0, y = D && t.value !== void 0 ? t.value : Z, r = N(() => {
+    step: u = g.step,
+    largeStep: C = g.largeStep,
+    vertical: a = g.vertical,
+    disabled: d = g.disabled,
+    tabIndex: Q = g.tabIndex
+  } = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p, B] = L(!1), [I, ee] = L(t.dir), E = R(null), v = R(null), T = N(() => new ye(), []), V = R(null), D = t.value !== void 0, k = D && t.value !== void 0 ? t.value : Z, r = N(() => {
     const { min: e, max: n } = t;
-    return y < e ? e : y > n ? n : y;
-  }, [y, t.min, t.max]), v = N(() => {
+    return k < e ? e : k > n ? n : k;
+  }, [k, t.min, t.max]), h = N(() => {
     const { min: e, max: n } = t, c = n - e;
     return c === 0 ? 0 : (r - e) / c * 100;
-  }, [r, t.min, t.max]), u = (K = t.dir) != null ? K : I;
+  }, [r, t.min, t.max]), f = (K = t.dir) != null ? K : I;
   q(() => {
-    if (t.dir === void 0 && g.current) {
-      const n = window.getComputedStyle(g.current).direction;
+    if (t.dir === void 0 && v.current) {
+      const n = window.getComputedStyle(v.current).direction;
       n !== I && ee(n);
     }
   }, [t.dir, I]);
@@ -50,7 +50,7 @@ const f = {
       n = n.parentElement;
     }
     return !1;
-  }, []), d = o(
+  }, []), s = o(
     (e, n) => {
       const c = Math.min(Math.max(n, t.min), t.max);
       D || $(c), fe(t.onChange, e, V.current, { value: c });
@@ -62,52 +62,54 @@ const f = {
     B(!1);
   }, []), ae = o(
     (e) => {
+      if (d)
+        return;
       let n;
-      e.keyCode === s.left || e.keyCode === s.down ? n = r - (m || 0) : e.keyCode === s.right || e.keyCode === s.up ? n = r + (m || 0) : e.keyCode === s.pageDown ? n = r - (w || 0) : e.keyCode === s.pageUp ? n = r + (w || 0) : e.keyCode === s.home ? n = t.min : e.keyCode === s.end && (n = t.max), n !== void 0 && (e.preventDefault(), d(e, n));
+      e.keyCode === m.left || e.keyCode === m.down ? n = r - (u || 0) : e.keyCode === m.right || e.keyCode === m.up ? n = r + (u || 0) : e.keyCode === m.pageDown ? n = r - (C || 0) : e.keyCode === m.pageUp ? n = r + (C || 0) : e.keyCode === m.home ? n = t.min : e.keyCode === m.end && (n = t.max), n !== void 0 && (e.preventDefault(), s(e, n));
     },
-    [r, m, w, t.min, t.max, d]
+    [r, u, C, t.min, t.max, s, d]
   ), ie = o(
     (e) => {
-      e.preventDefault(), d(e, r - (m || 0));
+      e.preventDefault(), !d && s(e, r - (u || 0));
     },
-    [r, m, d]
+    [r, u, s, d]
   ), le = o(
     (e) => {
-      e.preventDefault(), d(e, r + (m || 0));
+      e.preventDefault(), !d && s(e, r + (u || 0));
     },
-    [r, m, d]
-  ), k = o(
+    [r, u, s, d]
+  ), x = o(
     (e) => {
       const n = e.element.getBoundingClientRect();
       let c;
-      a ? c = n.bottom - e.event.clientY : c = u === "rtl" ? n.right - e.event.clientX : e.event.clientX - n.left;
-      const h = a ? n.height : n.width, b = c / h;
-      d(e, t.min + b * (t.max - t.min));
+      a ? c = n.bottom - e.event.clientY : c = f === "rtl" ? n.right - e.event.clientX : e.event.clientX - n.left;
+      const b = a ? n.height : n.width, y = c / b;
+      s(e, t.min + y * (t.max - t.min));
     },
-    [a, t.min, t.max, u, d]
+    [a, t.min, t.max, f, s]
   ), re = o(
     (e) => {
-      F(e.event.originalEvent.target) || (e.event.isTouch && e.event.originalEvent.preventDefault(), k(e));
+      F(e.event.originalEvent.target) || (e.event.isTouch && e.event.originalEvent.preventDefault(), x(e));
     },
-    [F, k]
+    [F, x]
   ), ce = o(
     (e) => {
-      e.event.originalEvent.preventDefault(), k(e);
+      e.event.originalEvent.preventDefault(), x(e);
     },
-    [k]
-  ), x = o(() => {
-    g.current && g.current.focus();
+    [x]
+  ), S = o(() => {
+    v.current && v.current.focus();
   }, []), oe = o(
     (e) => {
       if (!e.enabled)
         return e.children;
-      let n, c, h, b;
-      return u === "rtl" ? (n = a ? j : G, c = a ? W : Y, h = a ? "caret-alt-up" : "caret-alt-left", b = a ? "caret-alt-down" : "caret-alt-right") : (n = a ? j : Y, c = a ? W : G, h = a ? "caret-alt-up" : "caret-alt-right", b = a ? "caret-alt-down" : "caret-alt-left"), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+      let n, c, b, y;
+      return f === "rtl" ? (n = a ? j : G, c = a ? W : Y, b = a ? "caret-alt-up" : "caret-alt-left", y = a ? "caret-alt-down" : "caret-alt-right") : (n = a ? j : Y, c = a ? W : G, b = a ? "caret-alt-up" : "caret-alt-right", y = a ? "caret-alt-down" : "caret-alt-left"), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
         _,
         {
           className: "k-button-decrease",
           rounded: "full",
-          icon: b,
+          icon: y,
           svgIcon: c,
           title: e.decrementTitle,
           onClick: e.decrement
@@ -117,37 +119,37 @@ const f = {
         {
           className: "k-button-increase",
           rounded: "full",
-          icon: h,
+          icon: b,
           svgIcon: n,
           title: e.incrementTitle,
           onClick: e.increment
         }
       ));
     },
-    [u, a]
+    [f, a]
   );
   me(
     P,
     () => ({
       props: t,
       sliderTrack: E.current,
-      focus: x
+      focus: S
     }),
-    [t, x]
+    [t, S]
   ), q(() => {
     V.current = {
       props: t,
       sliderTrack: E.current,
-      focus: x
+      focus: S
     };
-  }, [t, x]);
+  }, [t, S]);
   const de = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, se = a ? { paddingTop: 0, height: "100%" } : {};
-  let S;
-  return a ? S = { bottom: "calc(" + v + "%)", zIndex: 1 } : u === "rtl" ? S = { right: "calc(" + v + "% - 13px)", zIndex: 1 } : S = { left: "calc(" + v + "%)", zIndex: 1 }, /* @__PURE__ */ l.createElement(
+  let w;
+  return a ? w = { bottom: "calc(" + h + "%)", zIndex: 1 } : f === "rtl" ? w = { right: "calc(" + h + "% - 13px)", zIndex: 1 } : w = { left: "calc(" + h + "%)", zIndex: 1 }, /* @__PURE__ */ l.createElement(
     "div",
     {
-      ref: g,
-      dir: u,
+      ref: v,
+      dir: f,
       id: t.id,
       style: { gap: 0, ...t.style },
       onFocus: te,
@@ -157,7 +159,7 @@ const f = {
         "k-slider",
         {
           "k-focus": p,
-          "k-disabled": C,
+          "k-disabled": d,
           "k-slider-horizontal": !a,
           "k-slider-vertical": a
         },
@@ -165,7 +167,7 @@ const f = {
       )
     },
     oe({
-      enabled: (U = t.buttons) != null ? U : f.buttons,
+      enabled: (U = t.buttons) != null ? U : g.buttons,
       decrement: ie,
       increment: le,
       incrementTitle: T.toLanguageString(
@@ -201,14 +203,14 @@ const f = {
           "div",
           {
             className: "k-slider-track",
-            style: a ? { bottom: 0, height: "100%" } : { [u === "rtl" ? "right" : "left"]: 0, width: "100%" },
+            style: a ? { bottom: 0, height: "100%" } : { [f === "rtl" ? "right" : "left"]: 0, width: "100%" },
             ref: E
           },
           /* @__PURE__ */ l.createElement(
             "div",
             {
               className: "k-slider-selection",
-              style: a ? { height: v + "%" } : { width: v + "%" }
+              style: a ? { height: h + "%" } : { width: h + "%" }
             }
           ),
           /* @__PURE__ */ l.createElement(
@@ -220,17 +222,17 @@ const f = {
               "aria-valuenow": r,
               "aria-valuetext": String(r),
               "aria-orientation": a ? "vertical" : void 0,
-              "aria-disabled": C ? "true" : void 0,
+              "aria-disabled": d ? "true" : void 0,
               "aria-labelledby": t.ariaLabelledBy,
               "aria-describedby": t.ariaDescribedBy,
               "aria-label": t.ariaLabel,
-              tabIndex: he(Q, C, void 0),
+              tabIndex: he(Q, d, void 0),
               className: "k-draghandle k-draghandle-end",
               title: T.toLanguageString(
                 H,
                 A[H]
               ),
-              style: S
+              style: w
             }
           )
         )