@progress/kendo-react-layout 9.0.0-develop.1 → 9.0.0-develop.3

package/timeline/TimelineCard.mjs

@@ -52,10 +52,7 @@ const x = (e) => {
     "div",
     {
       "data-testid": "k-timeline-card",
-      className: u(
-        "k-timeline-card",
-        { "k-collapsed": e.collapsible && r }
-      )
+      className: u("k-timeline-card", { "k-collapsed": e.collapsible && r })
     },
     /* @__PURE__ */ t.createElement(
       N,

package/timeline/TimelineHorizontal.mjs

@@ -15,11 +15,13 @@ 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"]
-  }));
+  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"]
+    })
+  );
   s.useEffect(() => {
     m.current && g.navigatable && (setTimeout(() => {
       const t = T.current.first;
@@ -52,7 +54,9 @@ const gt = (g) => {
         const o = c.length * n > l * n * ((f * -1 + 100) / 100);
         K(o);
       }
-      (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);
+      (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, b, a]);
   const at = (t, e, n) => {
@@ -147,11 +151,7 @@ const gt = (g) => {
       svgIcon: dt,
       icon: "caret-alt-left",
       onClick: () => _ && x(),
-      className: R(
-        "k-timeline-arrow",
-        "k-timeline-arrow-left",
-        { "k-disabled": !_ }
-      )
+      className: R("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !_ })
     }
   ), /* @__PURE__ */ s.createElement(
     z,
@@ -162,11 +162,7 @@ const gt = (g) => {
       svgIcon: Tt,
       icon: "caret-alt-right",
       onClick: () => y && P(),
-      className: R(
-        "k-timeline-arrow",
-        "k-timeline-arrow-right",
-        { "k-disabled": !y }
-      )
+      className: R("k-timeline-arrow", "k-timeline-arrow-right", { "k-disabled": !y })
     }
   ), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ s.createElement(
     "ul",
@@ -177,63 +173,56 @@ const gt = (g) => {
       tabIndex: 0,
       style: { transform: `translateX(${f}%)` }
     },
-    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 ${D}` },
-        key: e
-      },
-      /* @__PURE__ */ s.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)
-    ) : /* @__PURE__ */ s.createElement(
-      "li",
-      {
-        role: "tab",
-        className: R(
-          "k-timeline-track-item",
-          { "k-focus": e === a }
-        ),
-        "aria-selected": e === a,
-        style: { flex: `1 0 ${D}` },
-        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(
-        "span",
+    c && c.map(
+      (t, e) => t.yearFlag ? /* @__PURE__ */ s.createElement(
+        "li",
         {
-          onClick: (n) => E(e, n),
-          className: "k-timeline-circle"
-        }
+          role: "none",
+          className: "k-timeline-track-item k-timeline-flag-wrap",
+          style: { flex: `1 0 ${D}` },
+          key: e
+        },
+        /* @__PURE__ */ s.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)
+      ) : /* @__PURE__ */ s.createElement(
+        "li",
+        {
+          role: "tab",
+          className: R("k-timeline-track-item", {
+            "k-focus": e === a
+          }),
+          "aria-selected": e === a,
+          style: { flex: `1 0 ${D}` },
+          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("span", { onClick: (n) => E(e, n), className: "k-timeline-circle" })
       )
-    ))
+    )
   ))), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ s.createElement(
     "ul",
     {
       className: "k-timeline-scrollable-wrap",
       style: N === 0 ? { ...$(N) } : { ...$(N), ...lt() }
     },
-    u && u.map(
-      (t, e) => /* @__PURE__ */ s.createElement(
-        "li",
+    u && u.map((t, e) => /* @__PURE__ */ s.createElement(
+      "li",
+      {
+        key: e,
+        className: "k-timeline-event",
+        style: { transform: `translate3d(${w[e]}px, 0px, 0px)` }
+      },
+      t && /* @__PURE__ */ s.createElement(
+        ut,
         {
-          key: e,
-          className: "k-timeline-event",
-          style: { transform: `translate3d(${w[e]}px, 0px, 0px)` }
-        },
-        t && /* @__PURE__ */ s.createElement(
-          ut,
-          {
-            tabindex: w[e] === 0 ? 0 : -1,
-            eventData: t,
-            onActionClick: st,
-            horizontal: !0,
-            collapsible: !1,
-            calloutStyle: { left: `${X}px` }
-          }
-        )
+          tabindex: w[e] === 0 ? 0 : -1,
+          eventData: t,
+          onActionClick: st,
+          horizontal: !0,
+          collapsible: !1,
+          calloutStyle: { left: `${X}px` }
+        }
       )
-    )
+    ))
   )));
 };
 gt.propTypes = {

package/timeline/TimelineVertical.mjs

@@ -22,11 +22,13 @@ const S = (l) => {
     navigatable: m,
     onChange: y,
     onActionClick: b
-  } = l, s = e.useRef(null), a = e.useRef(new T({
-    tabIndex: 0,
-    root: s,
-    selectors: [".k-card-vertical"]
-  }));
+  } = l, s = e.useRef(null), a = e.useRef(
+    new T({
+      tabIndex: 0,
+      root: s,
+      selectors: [".k-card-vertical"]
+    })
+  );
   e.useEffect(() => {
     s.current && l.navigatable && (setTimeout(() => {
       const t = a.current.first;

package/timeline/utils.mjs

@@ -8,7 +8,10 @@
 "use client";
 const a = (r) => r.sort((u, e) => u.date.getTime() - e.date.getTime()), d = (r) => {
   let t;
-  return r.reduce((e, s) => (t !== s.date.getFullYear() ? (t = s.date.getFullYear(), e.push({ yearFlag: t }, s)) : e.push(s), e), []);
+  return r.reduce(
+    (e, s) => (t !== s.date.getFullYear() ? (t = s.date.getFullYear(), e.push({ yearFlag: t }, s)) : e.push(s), e),
+    []
+  );
 };
 export {
   d as addYearsFlags,