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

package/timeline/TimelineHorizontal.mjs

@@ -6,24 +6,25 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
+import * as s from "react";
 import ft from "prop-types";
 import { TimelineCard as ut } from "./TimelineCard.mjs";
 import { addYearsFlags as mt } from "./utils.mjs";
-import { caretAltLeftIcon as dt, caretAltRightIcon as kt } from "@progress/kendo-svg-icons";
-import { useInternationalization as bt } from "@progress/kendo-react-intl";
-import { Navigation as Et, canUseDOM as Tt, classNames as _, SvgIcon as z } from "@progress/kendo-react-common";
-const vt = (v) => {
-  const M = bt(), [y, j] = n.useState(!1), [R, K] = n.useState(!0), [X, Y] = n.useState(), [f, S] = n.useState(0), [g, q] = n.useState(), [l, B] = n.useState(0), [d, G] = n.useState(0), [a, O] = n.useState(1), [u, w] = n.useState(), [c, J] = n.useState(), [N, L] = n.useState([0, 0, 0]), [I, W] = n.useState(0), [Q, Z] = n.useState(1), m = n.useRef(null), i = n.useRef(null), D = n.useRef(null), { eventsData: tt, dateFormat: et, navigatable: nt, onActionClick: st } = v, U = g ? `${g}%` : "150px", k = n.useRef(new Et({
+import { caretAltLeftIcon as dt, caretAltRightIcon as Tt } from "@progress/kendo-svg-icons";
+import { useInternationalization as ht } from "@progress/kendo-react-intl";
+import { Navigation as Et, canUseDOM as vt, classNames as R } from "@progress/kendo-react-common";
+import { Button as z } from "@progress/kendo-react-buttons";
+const gt = (g) => {
+  const M = ht(), [_, j] = s.useState(!1), [y, K] = s.useState(!0), [X, Y] = s.useState(), [f, S] = s.useState(0), [b, B] = s.useState(), [l, q] = s.useState(0), [d, G] = s.useState(0), [a, L] = s.useState(1), [u, I] = s.useState(), [c, J] = s.useState(), [w, O] = s.useState([0, 0, 0]), [N, F] = s.useState(0), [Q, Z] = s.useState(1), m = s.useRef(null), i = s.useRef(null), W = s.useRef(null), { eventsData: tt, dateFormat: et, navigatable: nt, onActionClick: st } = g, D = b ? `${b}%` : "150px", T = s.useRef(new Et({
     tabIndex: 0,
     root: m,
     selectors: [".k-timeline-scrollable-wrap"]
   }));
-  n.useEffect(() => {
-    m.current && v.navigatable && (setTimeout(() => {
-      const t = k.current.first;
+  s.useEffect(() => {
+    m.current && g.navigatable && (setTimeout(() => {
+      const t = T.current.first;
       t && t.setAttribute("tabindex", String(0));
-    }, 0), k.current.keyboardEvents = {
+    }, 0), T.current.keyboardEvents = {
       keydown: {
         ArrowRight: at,
         ArrowLeft: ot,
@@ -31,104 +32,104 @@ const vt = (v) => {
         Home: it
       }
     });
-  }, [v.navigatable, a, l]), n.useEffect(() => {
-    k.current.update();
+  }, [g.navigatable, a, l]), s.useEffect(() => {
+    T.current.update();
   });
   const rt = (t) => {
-    nt && k.current && k.current.triggerKeyboardEvent(t);
+    nt && T.current && T.current.triggerKeyboardEvent(t);
   };
-  n.useEffect(() => {
+  s.useEffect(() => {
     var r;
-    const t = Tt && window.ResizeObserver && new window.ResizeObserver(p), e = i.current, s = ((r = m == null ? void 0 : m.current) == null ? void 0 : r.offsetWidth) || 0;
-    return t && e && t.observe(e), x(), p(), L([s, 0, -s]), () => {
+    const t = vt && window.ResizeObserver && new window.ResizeObserver(p), e = i.current, n = ((r = m == null ? void 0 : m.current) == null ? void 0 : r.offsetWidth) || 0;
+    return t && e && t.observe(e), U(), p(), O([n, 0, -n]), () => {
       t && t.disconnect();
     };
-  }, []), n.useEffect(() => {
+  }, []), s.useEffect(() => {
     const t = i.current, e = t && t.children[a];
     if (e) {
-      const s = e.offsetWidth, r = !(f >= 0);
+      const n = e.offsetWidth, r = !(f >= 0);
       if (j(r), c) {
-        const o = c.length * s > l * s * ((f * -1 + 100) / 100);
+        const o = c.length * n > l * n * ((f * -1 + 100) / 100);
         K(o);
       }
-      (t == null ? void 0 : t.offsetWidth) * -f / 100 >= t.children.length * s && (x(), p(), S((e.offsetLeft - e.offsetWidth) / (l * e.offsetWidth) * 100 * -1)), V(e);
+      (t == null ? void 0 : t.offsetWidth) * -f / 100 >= t.children.length * n && (U(), p(), S((e.offsetLeft - e.offsetWidth) / (l * e.offsetWidth) * 100 * -1)), V(e);
     }
-  }, [l, g, a]);
-  const at = (t, e, s) => {
+  }, [l, b, a]);
+  const at = (t, e, n) => {
     if (i.current) {
       const r = i.current.children[a + 1], o = r && r.classList.contains("k-timeline-flag-wrap") ? a + 2 : a + 1;
       if (c && c.length <= o)
         return;
-      l + d <= o && P(), E(o, s);
+      l + d <= o && P(), E(o, n);
     }
-  }, ot = (t, e, s) => {
+  }, ot = (t, e, n) => {
     if (i.current) {
       const r = i.current && i.current.children[a - 1], o = r && r.classList.contains("k-timeline-flag-wrap") ? a - 2 : a - 1;
       if (o <= 0)
         return;
-      o < d && F(), E(o, s);
+      o < d && x(), E(o, n);
     }
-  }, it = (t, e, s) => {
+  }, it = (t, e, n) => {
     if (i.current) {
       if (a <= 1)
         return;
       const r = 1;
-      h(!0, r, 0, 0), E(r, s);
+      k(!0, r, 0, 0), E(r, n);
     }
-  }, ct = (t, e, s) => {
+  }, ct = (t, e, n) => {
     if (i.current) {
       const r = i.current && i.current.children.length - 1;
       if (r <= a)
         return;
-      const o = Math.floor(r / l), T = o * -100, C = o * l;
-      h(!0, r, C, T), E(r, s);
+      const o = Math.floor(r / l), v = o * -100, C = o * l;
+      k(!0, r, C, v), E(r, n);
     }
-  }, x = () => {
+  }, U = () => {
     const t = mt(tt);
-    J(t), w([t[a - 1], t[a], t[a + 1]]);
-  }, F = () => {
+    J(t), I([t[a - 1], t[a], t[a + 1]]);
+  }, x = () => {
     var e;
     if (i.current && c) {
-      const s = d - l, r = d - 1, o = c[r] && ((e = c[r]) != null && e.yearFlag) ? r - 1 : r, T = f + 100 > 0 ? 0 : f + 100;
-      h(!1, o, s, T);
+      const n = d - l, r = d - 1, o = c[r] && ((e = c[r]) != null && e.yearFlag) ? r - 1 : r, v = f + 100 > 0 ? 0 : f + 100;
+      k(!1, o, n, v);
     }
   }, P = () => {
     if (i.current && c) {
-      const e = d + l, s = c[e] && c[e].yearFlag ? e + 1 : e, r = f - 100;
-      h(!0, s, e, r);
+      const e = d + l, n = c[e] && c[e].yearFlag ? e + 1 : e, r = f - 100;
+      k(!0, n, e, r);
     }
-  }, h = (t, e, s, r) => {
-    A(t, e), p(), G(s), S(r), O(e);
+  }, k = (t, e, n, r) => {
+    A(t, e), p(), G(n), S(r), L(e);
   }, A = (t, e) => {
     if (u && c) {
-      const s = b(t, Q), r = Object.assign([], u, { [s]: c[e] });
-      w(r), Z(s), W(t ? -100 : 100), setTimeout(() => {
+      const n = h(t, Q), r = Object.assign([], u, { [n]: c[e] });
+      I(r), Z(n), F(t ? -100 : 100), setTimeout(() => {
         var H;
-        const o = (H = m.current) == null ? void 0 : H.offsetWidth, T = Object.assign([], N, {
-          [s]: 0,
-          [b(!0, s)]: o,
-          [b(!1, s)]: o && -o
+        const o = (H = m.current) == null ? void 0 : H.offsetWidth, v = Object.assign([], w, {
+          [n]: 0,
+          [h(!0, n)]: o,
+          [h(!1, n)]: o && -o
         }), C = Object.assign([], r, {
-          [b(!0, s)]: {},
-          [b(!1, s)]: {}
+          [h(!0, n)]: {},
+          [h(!1, n)]: {}
         });
-        w(C), L(T), W(0);
-      }, v.transitionDuration || 300);
+        I(C), O(v), F(0);
+      }, g.transitionDuration || 300);
     }
-  }, b = (t, e) => {
-    const s = t ? e + 1 : e - 1;
-    return u ? s < 0 ? u.length - 1 : s % u.length : 0;
+  }, h = (t, e) => {
+    const n = t ? e + 1 : e - 1;
+    return u ? n < 0 ? u.length - 1 : n % u.length : 0;
   }, V = (t) => {
-    var s;
-    const e = (a - d) * t.offsetWidth + t.offsetWidth / 2 + (((s = D.current) == null ? void 0 : s.offsetWidth) || 0);
+    var n;
+    const e = (a - d) * t.offsetWidth + t.offsetWidth / 2 + (((n = W.current) == null ? void 0 : n.offsetWidth) || 0);
     Y(e);
   }, E = (t, e) => {
-    e.preventDefault(), t > a ? A(!0, t) : t < a && A(!1, t), O(t);
-  }, p = n.useCallback(() => {
+    e.preventDefault(), t > a ? A(!0, t) : t < a && A(!1, t), L(t);
+  }, p = s.useCallback(() => {
     const t = i.current, e = t && t.children[a];
     if (t instanceof HTMLElement && e) {
-      const s = Math.round(t.offsetWidth / 150);
-      V(e), q(100 / s), B(s);
+      const n = Math.round(t.offsetWidth / 150);
+      V(e), B(100 / n), q(n);
     }
   }, []), lt = () => ({
     transitionDuration: "300ms"
@@ -136,34 +137,38 @@ const vt = (v) => {
     transform: `translateX(${t}%)`,
     transformOrigin: "left top"
   });
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-timeline-track-wrap", ref: m, onKeyDown: rt }, /* @__PURE__ */ n.createElement(
-    "button",
+  return /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track-wrap", ref: m, onKeyDown: rt }, /* @__PURE__ */ s.createElement(
+    z,
     {
-      ref: D,
+      ref: W,
       "aria-hidden": "true",
-      onClick: () => y && F(),
-      className: _(
+      fillMode: "solid",
+      rounded: "full",
+      svgIcon: dt,
+      icon: "caret-alt-left",
+      onClick: () => _ && x(),
+      className: R(
         "k-timeline-arrow",
         "k-timeline-arrow-left",
-        "k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button",
-        { "k-disabled": !y }
+        { "k-disabled": !_ }
       )
-    },
-    /* @__PURE__ */ n.createElement(z, { icon: dt })
-  ), /* @__PURE__ */ n.createElement(
-    "button",
+    }
+  ), /* @__PURE__ */ s.createElement(
+    z,
     {
       "aria-hidden": "true",
-      onClick: () => R && P(),
-      className: _(
+      fillMode: "solid",
+      rounded: "full",
+      svgIcon: Tt,
+      icon: "caret-alt-right",
+      onClick: () => y && P(),
+      className: R(
         "k-timeline-arrow",
         "k-timeline-arrow-right",
-        "k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button",
-        { "k-disabled": !R }
+        { "k-disabled": !y }
       )
-    },
-    /* @__PURE__ */ n.createElement(z, { icon: kt })
-  ), /* @__PURE__ */ n.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ n.createElement(
+    }
+  ), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ s.createElement(
     "ul",
     {
       ref: i,
@@ -172,54 +177,54 @@ const vt = (v) => {
       tabIndex: 0,
       style: { transform: `translateX(${f}%)` }
     },
-    c && c.map((t, e) => t.yearFlag ? /* @__PURE__ */ n.createElement(
+    c && c.map((t, e) => t.yearFlag ? /* @__PURE__ */ s.createElement(
       "li",
       {
         role: "none",
         className: "k-timeline-track-item k-timeline-flag-wrap",
-        style: { flex: `1 0 ${U}` },
+        style: { flex: `1 0 ${D}` },
         key: e
       },
-      /* @__PURE__ */ n.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)
-    ) : /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ s.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)
+    ) : /* @__PURE__ */ s.createElement(
       "li",
       {
         role: "tab",
-        className: _(
+        className: R(
           "k-timeline-track-item",
           { "k-focus": e === a }
         ),
         "aria-selected": e === a,
-        style: { flex: `1 0 ${U}` },
+        style: { flex: `1 0 ${D}` },
         key: e
       },
-      /* @__PURE__ */ n.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ n.createElement("span", { className: "k-timeline-date" }, M.formatDate(t.date, et))),
-      /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ s.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ s.createElement("span", { className: "k-timeline-date" }, M.formatDate(t.date, et))),
+      /* @__PURE__ */ s.createElement(
         "span",
         {
-          onClick: (s) => E(e, s),
+          onClick: (n) => E(e, n),
           className: "k-timeline-circle"
         }
       )
     ))
-  ))), /* @__PURE__ */ n.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ n.createElement(
+  ))), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ s.createElement(
     "ul",
     {
       className: "k-timeline-scrollable-wrap",
-      style: I === 0 ? { ...$(I) } : { ...$(I), ...lt() }
+      style: N === 0 ? { ...$(N) } : { ...$(N), ...lt() }
     },
     u && u.map(
-      (t, e) => /* @__PURE__ */ n.createElement(
+      (t, e) => /* @__PURE__ */ s.createElement(
         "li",
         {
           key: e,
           className: "k-timeline-event",
-          style: { transform: `translate3d(${N[e]}px, 0px, 0px)` }
+          style: { transform: `translate3d(${w[e]}px, 0px, 0px)` }
         },
-        t && /* @__PURE__ */ n.createElement(
+        t && /* @__PURE__ */ s.createElement(
           ut,
           {
-            tabindex: N[e] === 0 ? 0 : -1,
+            tabindex: w[e] === 0 ? 0 : -1,
             eventData: t,
             onActionClick: st,
             horizontal: !0,
@@ -231,9 +236,9 @@ const vt = (v) => {
     )
   )));
 };
-vt.propTypes = {
+gt.propTypes = {
   onActionClick: ft.func
 };
 export {
-  vt as TimelineHorizontal
+  gt as TimelineHorizontal
 };