@progress/kendo-react-layout 14.5.0-develop.8 → 15.0.0-develop.1

package/timeline/TimelineHorizontal.mjs

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