@progress/kendo-react-layout 7.0.3-develop.6 → 7.0.3-develop.7

package/index.mjs

@@ -154,7 +154,7 @@ function ms(e, s, n, i, a, o) {
     case C.esc:
       return b();
     default:
-      return S() ? y() : s;
+      return w() ? y() : s;
   }
   function c() {
     return a ? o ? R() : N() : o ? f() : E();
@@ -166,7 +166,7 @@ function ms(e, s, n, i, a, o) {
     return a ? L() : J(s) ? v() : L();
   }
   function m() {
-    return a ? D() : J(s) ? w() : D();
+    return a ? D() : J(s) ? S() : D();
   }
   function h() {
     return l.disabled ? s : A() ? Lt(s) : ge(s);
@@ -189,7 +189,7 @@ function ms(e, s, n, i, a, o) {
     return J(s) ? D() : as(s) ? v(D(ge(s))) : pe(s);
   }
   function N() {
-    return J(s) ? w() : pe(s);
+    return J(s) ? S() : pe(s);
   }
   function f() {
     return J(s) ? L() : v(
@@ -204,10 +204,10 @@ function ms(e, s, n, i, a, o) {
   function v(x) {
     return ee(!0, x);
   }
-  function w(x) {
+  function S(x) {
     return ee(!1, x);
   }
-  function S() {
+  function w() {
     return i.length === 1 && us.test(i);
   }
   function O(x, M) {
@@ -622,7 +622,7 @@ const K = {
   name: "@progress/kendo-react-layout",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1704356994,
+  publishDate: 1704376836,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 }, _t = {
@@ -1409,7 +1409,7 @@ class ce extends t.PureComponent {
           d ? "k-panelbar-collapse" : "k-panelbar-expand"
         )
       }
-    ) : null, w = !o && d || g ? /* @__PURE__ */ t.createElement(
+    ) : null, S = !o && d || g ? /* @__PURE__ */ t.createElement(
       "ul",
       {
         role: "group",
@@ -1419,20 +1419,20 @@ class ce extends t.PureComponent {
         style: { display: g ? this.state.show ? "block" : "none" : "block" }
       },
       n
-    ) : null, S = (p === void 0 || p) && !o && n ? /* @__PURE__ */ t.createElement(
+    ) : null, w = (p === void 0 || p) && !o && n ? /* @__PURE__ */ t.createElement(
       Qt,
       {
         transitionEnterDuration: 200,
         transitionExitDuration: 200,
         key: a + "_animation",
         style: N,
-        children: w,
+        children: S,
         childFactory: g && this.childFactory,
         unmountOnExit: !g,
         onBeforeEnter: () => g && this.setState({ show: !0 }),
         onAfterExited: () => g && this.setState({ show: !1 })
       }
-    ) : w;
+    ) : S;
     return /* @__PURE__ */ t.createElement(
       "li",
       {
@@ -1441,7 +1441,7 @@ class ce extends t.PureComponent {
         ...b
       },
       /* @__PURE__ */ t.createElement("span", { className: E, onClick: this.handleItemClick }, f, /* @__PURE__ */ t.createElement("span", { className: "k-panelbar-item-text" }, i), R),
-      S
+      w
     );
   }
 }
@@ -1978,22 +1978,22 @@ class Ls extends t.Component {
       initialSize: a,
       min: g(m.min) || h - g(u.max) || 0,
       max: g(m.max) || h - g(u.min) || h
-    }, E = (v, w) => {
-      const S = d[v.index], O = this.clamp(v.min, v.max, v.initialSize + w);
-      return this.isPercent(S.size || "") ? 100 * O / p + "%" : O + "px";
+    }, E = (v, S) => {
+      const w = d[v.index], O = this.clamp(v.min, v.max, v.initialSize + S);
+      return this.isPercent(w.size || "") ? 100 * O / p + "%" : O + "px";
     };
     let N, f;
     this.fixedSize(u.size) && this.fixedSize(m.size) ? (N = E(b, o), f = E(y, -o)) : m.collapsible || this.fixedSize(m.size) ? f = E(y, -o) : N = E(b, o);
-    const R = d.map((v, w) => {
-      const S = this.getPaneProps(v);
-      return w === s ? {
-        ...S,
+    const R = d.map((v, S) => {
+      const w = this.getPaneProps(v);
+      return S === s ? {
+        ...w,
         size: N
-      } : w === n ? {
-        ...S,
+      } : S === n ? {
+        ...w,
         size: f
       } : {
-        ...S
+        ...w
       };
     });
     this.panesDuringOnChange = R, this.isControlledState || this.setState({
@@ -2243,7 +2243,7 @@ const Fs = {
       "k-disabled": d
     },
     n
-  ), w = t.useCallback(
+  ), S = t.useCallback(
     (O) => {
       if (m && !d) {
         const A = {
@@ -2255,7 +2255,7 @@ const Fs = {
       }
     },
     [m, h, d]
-  ), S = /* @__PURE__ */ t.createElement(t.Fragment, null, (o || l) && /* @__PURE__ */ t.createElement(Q, { name: o && jt(o), icon: l }), !y && E ? null : /* @__PURE__ */ t.createElement("span", { className: "k-item-text" }, a));
+  ), w = /* @__PURE__ */ t.createElement(t.Fragment, null, (o || l) && /* @__PURE__ */ t.createElement(Q, { name: o && jt(o), icon: l }), !y && E ? null : /* @__PURE__ */ t.createElement("span", { className: "k-item-text" }, a));
   return c ? /* @__PURE__ */ t.createElement("li", { className: "k-drawer-item k-drawer-separator", role: "separator" }) : /* @__PURE__ */ t.createElement(
     "li",
     {
@@ -2265,11 +2265,11 @@ const Fs = {
       role: "menuitem",
       "aria-label": a,
       "aria-disabled": d,
-      onClick: w,
+      onClick: S,
       tabIndex: Oe(p, d),
       ...b
     },
-    N ? g : S
+    N ? g : w
   );
 });
 pt.propTypes = {
@@ -2305,7 +2305,7 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
       f.current && f.current.focus();
     },
     []
-  ), v = typeof l != "boolean" ? l : l === !1 ? _s : Hs, w = g || Bs, S = b || Ks;
+  ), v = typeof l != "boolean" ? l : l === !1 ? _s : Hs, S = g || Bs, w = b || Ks;
   t.useImperativeHandle(s, () => ({
     element: f.current,
     focus: R
@@ -2321,7 +2321,7 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
     [u]
   ), A = {
     opacity: 1,
-    flexBasis: w,
+    flexBasis: S,
     WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
     transition: "all " + (v && v.duration) + "ms"
@@ -2333,7 +2333,7 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
     transition: "all " + (v && v.duration) + "ms"
   }, L = {
     opacity: h ? 1 : 0,
-    flexBasis: h ? S : 0,
+    flexBasis: h ? w : 0,
     WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
     transition: "all " + (v && v.duration) + "ms"
@@ -2383,7 +2383,7 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
       "div",
       {
         className: "k-drawer-wrapper",
-        style: !c && h && d === "overlay" ? { width: S } : { width: w }
+        style: !c && h && d === "overlay" ? { width: w } : { width: S }
       },
       x || n
     ),
@@ -2428,10 +2428,10 @@ const gt = t.forwardRef((e, s) => {
     focus: f
   }));
   const R = t.useCallback(
-    (S, O, A) => {
+    (w, O, A) => {
       if (p && E) {
         const D = {
-          itemTarget: S,
+          itemTarget: w,
           itemIndex: O,
           syntheticEvent: A,
           nativeEvent: A && A.nativeEvent,
@@ -2441,7 +2441,7 @@ const gt = t.forwardRef((e, s) => {
       }
     },
     [p, E]
-  ), v = ve(N, e.dir), w = k(
+  ), v = ve(N, e.dir), S = k(
     {
       "k-drawer-container": !0,
       "k-drawer-expanded": n,
@@ -2472,7 +2472,7 @@ const gt = t.forwardRef((e, s) => {
     /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: w,
+        className: S,
         ref: N,
         dir: v,
         style: c,
@@ -2561,8 +2561,8 @@ const $s = {
     isVertical: f,
     item: R,
     linear: v,
-    mode: w,
-    numOfSteps: S,
+    mode: S,
+    numOfSteps: w,
     value: O,
     onChange: A,
     onFocus: D,
@@ -2583,7 +2583,7 @@ const $s = {
     [x]
   );
   t.useImperativeHandle(s, M);
-  const j = !v || u === O - 1 || u === O || u === O + 1, Y = w === "labels" || !!c && !!h, Z = en(), de = ((ne) => Z.toLanguageString(ne, Pn[ne]))(On), se = typeof N == "number" ? N : N !== !1 ? Rn : Dn, Ie = t.useCallback(
+  const j = !v || u === O - 1 || u === O || u === O + 1, Y = S === "labels" || !!c && !!h, Z = en(), de = ((ne) => Z.toLanguageString(ne, Pn[ne]))(On), se = typeof N == "number" ? N : N !== !1 ? Rn : Dn, Ie = t.useCallback(
     (ne) => {
       A && !o && q(
         A,
@@ -2608,7 +2608,7 @@ const $s = {
       "k-step",
       {
         "k-step-first": u === 0,
-        "k-step-last": S && u === S - 1,
+        "k-step-last": w && u === w - 1,
         "k-step-done": u < O,
         "k-step-current": a,
         "k-step-optional": p,
@@ -2621,15 +2621,15 @@ const $s = {
       },
       i
     ),
-    [u, S, O, a, p, o, l, m, i]
+    [u, w, O, a, p, o, l, m, i]
   ), _ = t.useMemo(
     () => ({
-      maxWidth: f ? void 0 : `calc(100% / ${S})`,
-      maxHeight: f ? `calc(100% / ${S})` : void 0,
+      maxWidth: f ? void 0 : `calc(100% / ${w})`,
+      maxHeight: f ? `calc(100% / ${w})` : void 0,
       pointerEvents: j ? void 0 : "none",
       ...g
     }),
-    [f, S, g, j]
+    [f, w, g, j]
   ), F = m ? L : B, V = F ? /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -2643,7 +2643,7 @@ const $s = {
       name: m ? "check-circle" : "exclamation-circle",
       icon: m ? G || Yn : ee || Zn
     }
-  ), me = /* @__PURE__ */ t.createElement(t.Fragment, null, w !== "labels" ? /* @__PURE__ */ t.createElement(
+  ), me = /* @__PURE__ */ t.createElement(t.Fragment, null, S !== "labels" ? /* @__PURE__ */ t.createElement(
     "span",
     {
       className: "k-step-indicator",
@@ -2715,19 +2715,19 @@ const bt = t.forwardRef((e, s) => {
     successSVGIcon: y,
     onChange: E,
     onFocus: N
-  } = e, R = en().toLanguageString(st, Pn[st]), v = t.useRef(null), w = t.useCallback(
+  } = e, R = en().toLanguageString(st, Pn[st]), v = t.useRef(null), S = t.useCallback(
     () => {
       v.current && ke(v.current);
     },
     []
-  ), S = t.useCallback(
+  ), w = t.useCallback(
     () => ({
       element: v.current,
-      focus: w
+      focus: S
     }),
-    [w]
+    [S]
   );
-  t.useImperativeHandle(s, S);
+  t.useImperativeHandle(s, w);
   const O = e.value || Mn.value, [A, D] = t.useState(O), L = u ? u.length : 0, B = p === "vertical", G = Vt(v, e.dir), ee = typeof n == "number" ? n : n !== !1 ? Rn : Dn;
   t.useEffect(() => {
     D(O);
@@ -2738,7 +2738,7 @@ const bt = t.forwardRef((e, s) => {
       O !== _ && E && !o && (!m || F || V || me) && (q(
         E,
         H,
-        S(),
+        w(),
         { value: _ }
       ), D(_));
     },
@@ -2754,7 +2754,7 @@ const bt = t.forwardRef((e, s) => {
       N && !o && q(
         N,
         H.syntheticEvent,
-        S(),
+        w(),
         void 0
       );
     },
@@ -3460,7 +3460,7 @@ const qs = {
       y && E !== void 0 && !l && y(A, E);
     },
     [y, E, l]
-  ), w = d, S = c, O = /* @__PURE__ */ t.createElement(
+  ), S = d, w = c, O = /* @__PURE__ */ t.createElement(
     "span",
     {
       ref: n,
@@ -3474,9 +3474,9 @@ const qs = {
       "aria-current": o,
       "aria-disabled": l
     },
-    S ? /* @__PURE__ */ t.createElement(S, { itemIndex: E, item: u }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (m || h) && /* @__PURE__ */ t.createElement(Q, { className: "k-bottom-nav-item-icon", name: m, icon: h, size: "xlarge" }), p && /* @__PURE__ */ t.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
+    w ? /* @__PURE__ */ t.createElement(w, { itemIndex: E, item: u }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (m || h) && /* @__PURE__ */ t.createElement(Q, { className: "k-bottom-nav-item-icon", name: m, icon: h, size: "xlarge" }), p && /* @__PURE__ */ t.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
   );
-  return w !== void 0 ? w.call(void 0, O, e) : O;
+  return S !== void 0 ? S.call(void 0, O, e) : O;
 }), Xs = {
   tabIndex: 0
 };
@@ -3527,7 +3527,7 @@ const vt = t.forwardRef((e, s) => {
   ), v = t.useMemo(
     () => e.themeColor || fe.themeColor,
     [e.themeColor]
-  ), w = t.useMemo(
+  ), S = t.useMemo(
     () => k(
       "k-bottom-nav",
       Gs[o],
@@ -3541,7 +3541,7 @@ const vt = t.forwardRef((e, s) => {
       d
     ),
     [o, v, R, l, c, p, d]
-  ), S = t.useCallback(
+  ), w = t.useCallback(
     (D, L) => {
       u && !u[L].disabled && y && q(
         y,
@@ -3556,15 +3556,15 @@ const vt = t.forwardRef((e, s) => {
     [u, y]
   ), O = t.useCallback(
     (D, L) => {
-      S(D, L);
+      w(D, L);
     },
-    [S]
+    [w]
   ), A = t.useCallback(
     (D, L) => {
       switch (D.keyCode) {
         case C.enter:
         case C.space:
-          S(D, L), D.preventDefault();
+          w(D, L), D.preventDefault();
           break;
       }
       q(
@@ -3574,13 +3574,13 @@ const vt = t.forwardRef((e, s) => {
         void 0
       );
     },
-    [S, E]
+    [w, E]
   );
   return /* @__PURE__ */ t.createElement(
     "nav",
     {
       ref: n,
-      className: w,
+      className: S,
       style: g,
       id: b || N,
       dir: f
@@ -4045,12 +4045,12 @@ const wt = t.forwardRef((e, s) => {
       )
     },
     /* @__PURE__ */ t.createElement(a, { rootItem: !0 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, v) => {
-      const w = f[g];
+      const S = f[g];
       if (R === 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
-            key: w,
+            key: S,
             isFirstItem: !0,
             isLastItem: v.length - 1 === R
           },
@@ -4059,7 +4059,7 @@ const wt = t.forwardRef((e, s) => {
             {
               isLast: v.length - 1 === R,
               isFirst: !0,
-              id: String(w),
+              id: String(S),
               icon: f[b] || void 0,
               iconClass: f[y] ? String(f[y]) : void 0,
               text: f[E] ? String(f[E]) : void 0,
@@ -4072,12 +4072,12 @@ const wt = t.forwardRef((e, s) => {
         );
     }))),
     /* @__PURE__ */ t.createElement(a, { rootItem: !1 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, v) => {
-      const w = f[g];
+      const S = f[g];
       if (R !== 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
-            key: w,
+            key: S,
             isFirstItem: !1,
             isLastItem: v.length - 1 === R
           },
@@ -4087,7 +4087,7 @@ const wt = t.forwardRef((e, s) => {
             {
               isLast: v.length - 1 === R,
               isFirst: !1,
-              id: String(w),
+              id: String(S),
               icon: f[b] || void 0,
               iconClass: f[y] ? String(f[y]) : void 0,
               text: f[E] ? String(f[E]) : void 0,
@@ -4431,7 +4431,9 @@ const Dt = (e) => {
         "aria-atomic": "true",
         tabIndex: e.tabindex,
         role: e.horizontal ? "tabpanel" : "button",
-        "aria-expanded": e.collapsible && u
+        "aria-expanded": e.collapsible && u,
+        className: "k-card-with-callout",
+        onClick: (b) => h(b)
       },
       /* @__PURE__ */ t.createElement(
         "span",
@@ -4449,7 +4451,6 @@ const Dt = (e) => {
       /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(In, null, /* @__PURE__ */ t.createElement(En, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, n), e.collapsible && /* @__PURE__ */ t.createElement(
         "span",
         {
-          onClick: (b) => h(b),
           className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"
         },
         /* @__PURE__ */ t.createElement(Xe, { icon: Jt })
@@ -4474,7 +4475,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
   let s;
   return e.reduce((i, a) => (s !== a.date.getFullYear() ? (s = a.date.getFullYear(), i.push({ yearFlag: s }, a)) : i.push(a), i), []);
 }, Wn = (e) => {
-  const i = tn(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, g] = t.useState(), [b, y] = t.useState(0), [E, N] = t.useState(0), [f, R] = t.useState(1), [v, w] = t.useState(), [S, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), $ = t.useRef(null), x = t.useRef(null), M = t.useRef(null), { eventsData: j, dateFormat: Y, navigatable: Z, onActionClick: re } = e, de = p ? `${p}%` : "150px", se = t.useRef(new ct({
+  const i = tn(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, g] = t.useState(), [b, y] = t.useState(0), [E, N] = t.useState(0), [f, R] = t.useState(1), [v, S] = t.useState(), [w, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), $ = t.useRef(null), x = t.useRef(null), M = t.useRef(null), { eventsData: j, dateFormat: Y, navigatable: Z, onActionClick: re } = e, de = p ? `${p}%` : "150px", se = t.useRef(new ct({
     tabIndex: 0,
     root: $,
     selectors: [".k-timeline-scrollable-wrap"]
@@ -4507,8 +4508,8 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
     const I = x.current, T = I && I.children[f];
     if (T) {
       const P = T.offsetWidth, z = !(m >= 0);
-      if (o(z), S) {
-        const U = S.length * P > b * P * ((m * -1 + 100) / 100);
+      if (o(z), w) {
+        const U = w.length * P > b * P * ((m * -1 + 100) / 100);
         c(U);
       }
       (I == null ? void 0 : I.offsetWidth) * -m / 100 >= I.children.length * P && (V(), Me(), h((T.offsetLeft - T.offsetWidth) / (b * T.offsetWidth) * 100 * -1)), Ot(T);
@@ -4517,7 +4518,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
   const ue = (I, T, P) => {
     if (x.current) {
       const z = x.current.children[f + 1], U = z && z.classList.contains("k-timeline-flag-wrap") ? f + 2 : f + 1;
-      if (S && S.length <= U)
+      if (w && w.length <= U)
         return;
       b + E <= U && Ee(), Ne(U, P);
     }
@@ -4545,24 +4546,24 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
     }
   }, V = () => {
     const I = _n(j);
-    O(I), w([I[f - 1], I[f], I[f + 1]]);
+    O(I), S([I[f - 1], I[f], I[f + 1]]);
   }, me = () => {
     var T;
-    if (x.current && S) {
-      const P = E - b, z = E - 1, U = S[z] && ((T = S[z]) != null && T.yearFlag) ? z - 1 : z, we = m + 100 > 0 ? 0 : m + 100;
+    if (x.current && w) {
+      const P = E - b, z = E - 1, U = w[z] && ((T = w[z]) != null && T.yearFlag) ? z - 1 : z, we = m + 100 > 0 ? 0 : m + 100;
       he(!1, U, P, we);
     }
   }, Ee = () => {
-    if (x.current && S) {
-      const T = E + b, P = S[T] && S[T].yearFlag ? T + 1 : T, z = m - 100;
+    if (x.current && w) {
+      const T = E + b, P = w[T] && w[T].yearFlag ? T + 1 : T, z = m - 100;
       he(!0, P, T, z);
     }
   }, he = (I, T, P, z) => {
     ne(I, T), Me(), N(P), h(z), R(T);
   }, ne = (I, T) => {
-    if (v && S) {
-      const P = Ce(I, G), z = Object.assign([], v, { [P]: S[T] });
-      w(z), ee(P), B(I ? -100 : 100), setTimeout(() => {
+    if (v && w) {
+      const P = Ce(I, G), z = Object.assign([], v, { [P]: w[T] });
+      S(z), ee(P), B(I ? -100 : 100), setTimeout(() => {
         var Mt;
         const U = (Mt = $.current) == null ? void 0 : Mt.offsetWidth, we = Object.assign([], A, {
           [P]: 0,
@@ -4572,7 +4573,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
           [Ce(!0, P)]: {},
           [Ce(!1, P)]: {}
         });
-        w(je), D(we), B(0);
+        S(je), D(we), B(0);
       }, e.transitionDuration || 300);
     }
   }, Ce = (I, T) => {
@@ -4597,7 +4598,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
     transformOrigin: "left top"
   });
   return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-track-wrap", ref: $, onKeyDown: Ie }, /* @__PURE__ */ t.createElement(
-    "a",
+    "button",
     {
       ref: M,
       "aria-hidden": "true",
@@ -4611,7 +4612,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
     },
     /* @__PURE__ */ t.createElement(Xe, { icon: ae })
   ), /* @__PURE__ */ t.createElement(
-    "a",
+    "button",
     {
       "aria-hidden": "true",
       onClick: () => l && Ee(),
@@ -4632,7 +4633,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
       tabIndex: 0,
       style: { transform: `translateX(${m}%)` }
     },
-    S && S.map((I, T) => I.yearFlag ? /* @__PURE__ */ t.createElement(
+    w && w.map((I, T) => I.yearFlag ? /* @__PURE__ */ t.createElement(
       "li",
       {
         role: "none",
@@ -4728,19 +4729,19 @@ const $n = (e) => {
     u && g.current && g.current.triggerKeyboardEvent(f);
   }, y = (f, R, v) => {
     v.preventDefault();
-    const w = f.querySelector(".k-card-title .k-event-collapse");
-    w && w.click();
+    const S = f.querySelector(".k-card-title .k-event-collapse");
+    S && S.click();
   };
   let E = 0;
   const N = ye();
   return /* @__PURE__ */ t.createElement("ul", { ref: p, onKeyDown: b }, n && n.map((f, R) => {
     const v = (R + E) % 2 === 0;
     f.yearFlag && (E += 1);
-    const w = N + "-" + R;
-    return /* @__PURE__ */ t.createElement(t.Fragment, { key: R }, f.yearFlag ? /* @__PURE__ */ t.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, f.yearFlag)) : /* @__PURE__ */ t.createElement("li", { className: k("k-timeline-event", { "k-reverse": v }) }, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date", id: w }, s.formatDate(f.date, c))), /* @__PURE__ */ t.createElement("a", { className: "k-timeline-circle" }), /* @__PURE__ */ t.createElement(
+    const S = N + "-" + R, w = d ? { "k-reverse": v } : void 0;
+    return /* @__PURE__ */ t.createElement(t.Fragment, { key: R }, f.yearFlag ? /* @__PURE__ */ t.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, f.yearFlag)) : /* @__PURE__ */ t.createElement("li", { className: k("k-timeline-event", w) }, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date", id: S }, s.formatDate(f.date, c))), /* @__PURE__ */ t.createElement("span", { className: "k-timeline-circle" }), /* @__PURE__ */ t.createElement(
       Dt,
       {
-        id: w,
+        id: S,
         tabindex: u ? 0 : -1,
         eventData: f,
         alternated: d && v,
@@ -4758,7 +4759,7 @@ $n.propTypes = {
 const ti = (e) => {
   const s = {
     alterMode: !1,
-    collapsibleEvents: !0,
+    collapsibleEvents: !1,
     dateFormat: "MMM dd, yyyy",
     ...e
   }, {
@@ -4869,13 +4870,13 @@ const Un = t.forwardRef((e, s) => {
     expandSVGIcon: g,
     collapseSVGIcon: b
   } = e, y = t.useCallback(
-    (w) => {
-      q(m, w, o(), { expanded: l });
+    (S) => {
+      q(m, S, o(), { expanded: l });
     },
     [m, l]
   ), E = t.useCallback(
-    (w) => {
-      (w.keyCode === C.enter || w.keyCode === C.space) && (w.preventDefault(), q(m, w, o(), { expanded: l }));
+    (S) => {
+      (S.keyCode === C.enter || S.keyCode === C.space) && (S.preventDefault(), q(m, S, o(), { expanded: l }));
     },
     [m, l]
   ), N = t.useCallback(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "7.0.3-develop.6",
+  "version": "7.0.3-develop.7",
   "description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,11 +23,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.0.3-develop.6",
-    "@progress/kendo-react-common": "7.0.3-develop.6",
-    "@progress/kendo-react-intl": "7.0.3-develop.6",
-    "@progress/kendo-react-popup": "7.0.3-develop.6",
-    "@progress/kendo-react-progressbars": "7.0.3-develop.6",
+    "@progress/kendo-react-animation": "7.0.3-develop.7",
+    "@progress/kendo-react-common": "7.0.3-develop.7",
+    "@progress/kendo-react-intl": "7.0.3-develop.7",
+    "@progress/kendo-react-popup": "7.0.3-develop.7",
+    "@progress/kendo-react-progressbars": "7.0.3-develop.7",
     "@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"