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

package/timeline/TimelineHorizontal.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const mt=require("react"),kt=require("prop-types"),bt=require("./TimelineCard.js"),Tt=require("./utils.js"),M=require("@progress/kendo-svg-icons"),gt=require("@progress/kendo-react-intl"),k=require("@progress/kendo-react-common");function vt(l){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const T in l)if(T!=="default"){const N=Object.getOwnPropertyDescriptor(l,T);Object.defineProperty(p,T,N.get?N:{enumerable:!0,get:()=>l[T]})}}return p.default=l,Object.freeze(p)}const n=vt(mt),K=l=>{const N=gt.useInternationalization(),[O,X]=n.useState(!1),[D,Y]=n.useState(!0),[B,G]=n.useState(),[f,L]=n.useState(0),[y,J]=n.useState(),[u,Q]=n.useState(0),[b,Z]=n.useState(0),[a,W]=n.useState(1),[d,S]=n.useState(),[i,tt]=n.useState(),[_,U]=n.useState([0,0,0]),[C,P]=n.useState(0),[et,nt]=n.useState(1),m=n.useRef(null),c=n.useRef(null),F=n.useRef(null),{eventsData:st,dateFormat:rt,navigatable:at,onActionClick:ot}=l,x=y?`${y}%`:"150px",g=n.useRef(new k.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));n.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const t=g.current.first;t&&t.setAttribute("tabindex",String(0))},0),g.current.keyboardEvents={keydown:{ArrowRight:it,ArrowLeft:lt,End:ft,Home:ut}})},[l.navigatable,a,u]),n.useEffect(()=>{g.current.update()});const ct=t=>{at&&g.current&&g.current.triggerKeyboardEvent(t)};n.useEffect(()=>{var r;const t=k.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(I),e=c.current,s=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return t&&e&&t.observe(e),V(),I(),U([s,0,-s]),()=>{t&&t.disconnect()}},[]),n.useEffect(()=>{const t=c.current,e=t&&t.children[a];if(e){const s=e.offsetWidth,r=!(f>=0);if(X(r),i){const o=i.length*s>u*s*((f*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-f/100>=t.children.length*s&&(V(),I(),L((e.offsetLeft-e.offsetWidth)/(u*e.offsetWidth)*100*-1)),z(e)}},[u,y,a]);const it=(t,e,s)=>{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;u+b<=o&&j(),E(o,s)}},lt=(t,e,s)=>{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<b&&$(),E(o,s)}},ut=(t,e,s)=>{if(c.current){if(a<=1)return;const r=1;w(!0,r,0,0),E(r,s)}},ft=(t,e,s)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/u),h=o*-100,R=o*u;w(!0,r,R,h),E(r,s)}},V=()=>{const t=Tt.addYearsFlags(st);tt(t),S([t[a-1],t[a],t[a+1]])},$=()=>{var e;if(c.current&&i){const s=b-u,r=b-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,h=f+100>0?0:f+100;w(!1,o,s,h)}},j=()=>{if(c.current&&i){const e=b+u,s=i[e]&&i[e].yearFlag?e+1:e,r=f-100;w(!0,s,e,r)}},w=(t,e,s,r)=>{A(t,e),I(),Z(s),L(r),W(e)},A=(t,e)=>{if(d&&i){const s=v(t,et),r=Object.assign([],d,{[s]:i[e]});S(r),nt(s),P(t?-100:100),setTimeout(()=>{var q;const o=(q=m.current)==null?void 0:q.offsetWidth,h=Object.assign([],_,{[s]:0,[v(!0,s)]:o,[v(!1,s)]:o&&-o}),R=Object.assign([],r,{[v(!0,s)]:{},[v(!1,s)]:{}});S(R),U(h),P(0)},l.transitionDuration||300)}},v=(t,e)=>{const s=t?e+1:e-1;return d?s<0?d.length-1:s%d.length:0},z=t=>{var s;const e=(a-b)*t.offsetWidth+t.offsetWidth/2+(((s=F.current)==null?void 0:s.offsetWidth)||0);G(e)},E=(t,e)=>{e.preventDefault(),t>a?A(!0,t):t<a&&A(!1,t),W(t)},I=n.useCallback(()=>{const t=c.current,e=t&&t.children[a];if(t instanceof HTMLElement&&e){const s=Math.round(t.offsetWidth/150);z(e),J(100/s),Q(s)}},[]),dt=()=>({transitionDuration:"300ms"}),H=t=>({transform:`translateX(${t}%)`,transformOrigin:"left top"});return n.createElement(n.Fragment,null,n.createElement("div",{className:"k-timeline-track-wrap",ref:m,onKeyDown:ct},n.createElement("button",{ref:F,"aria-hidden":"true",onClick:()=>O&&$(),className:k.classNames("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":!O})},n.createElement(k.SvgIcon,{icon:M.caretAltLeftIcon})),n.createElement("button",{"aria-hidden":"true",onClick:()=>D&&j(),className:k.classNames("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":!D})},n.createElement(k.SvgIcon,{icon:M.caretAltRightIcon})),n.createElement("div",{className:"k-timeline-track"},n.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${f}%)`}},i&&i.map((t,e)=>t.yearFlag?n.createElement("li",{role:"none",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${x}`},key:e},n.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):n.createElement("li",{role:"tab",className:k.classNames("k-timeline-track-item",{"k-focus":e===a}),"aria-selected":e===a,style:{flex:`1 0 ${x}`},key:e},n.createElement("div",{className:"k-timeline-date-wrap"},n.createElement("span",{className:"k-timeline-date"},N.formatDate(t.date,rt))),n.createElement("span",{onClick:s=>E(e,s),className:"k-timeline-circle"})))))),n.createElement("div",{className:"k-timeline-events-list"},n.createElement("ul",{className:"k-timeline-scrollable-wrap",style:C===0?{...H(C)}:{...H(C),...dt()}},d&&d.map((t,e)=>n.createElement("li",{key:e,className:"k-timeline-event",style:{transform:`translate3d(${_[e]}px, 0px, 0px)`}},t&&n.createElement(bt.TimelineCard,{tabindex:_[e]===0?0:-1,eventData:t,onActionClick:ot,horizontal:!0,collapsible:!1,calloutStyle:{left:`${B}px`}}))))))};K.propTypes={onActionClick:kt.func};exports.TimelineHorizontal=K;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const gt=require("react"),Tt=require("prop-types"),kt=require("./TimelineCard.js"),vt=require("./utils.js"),M=require("@progress/kendo-svg-icons"),ht=require("@progress/kendo-react-intl"),b=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons");function Et(l){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const T in l)if(T!=="default"){const I=Object.getOwnPropertyDescriptor(l,T);Object.defineProperty(p,T,I.get?I:{enumerable:!0,get:()=>l[T]})}}return p.default=l,Object.freeze(p)}const s=Et(gt),K=l=>{const I=ht.useInternationalization(),[O,X]=s.useState(!1),[L,Y]=s.useState(!0),[G,J]=s.useState(),[u,D]=s.useState(0),[A,Q]=s.useState(),[f,Z]=s.useState(0),[g,tt]=s.useState(0),[a,F]=s.useState(1),[d,y]=s.useState(),[i,et]=s.useState(),[R,W]=s.useState([0,0,0]),[_,U]=s.useState(0),[nt,st]=s.useState(1),m=s.useRef(null),c=s.useRef(null),P=s.useRef(null),{eventsData:rt,dateFormat:at,navigatable:ot,onActionClick:ct}=l,x=A?`${A}%`:"150px",k=s.useRef(new b.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));s.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const t=k.current.first;t&&t.setAttribute("tabindex",String(0))},0),k.current.keyboardEvents={keydown:{ArrowRight:lt,ArrowLeft:ft,End:dt,Home:ut}})},[l.navigatable,a,f]),s.useEffect(()=>{k.current.update()});const it=t=>{ot&&k.current&&k.current.triggerKeyboardEvent(t)};s.useEffect(()=>{var r;const t=b.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(w),e=c.current,n=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return t&&e&&t.observe(e),V(),w(),W([n,0,-n]),()=>{t&&t.disconnect()}},[]),s.useEffect(()=>{const t=c.current,e=t&&t.children[a];if(e){const n=e.offsetWidth,r=!(u>=0);if(X(r),i){const o=i.length*n>f*n*((u*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-u/100>=t.children.length*n&&(V(),w(),D((e.offsetLeft-e.offsetWidth)/(f*e.offsetWidth)*100*-1)),q(e)}},[f,A,a]);const lt=(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;f+g<=o&&j(),h(o,n)}},ft=(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<g&&$(),h(o,n)}},ut=(t,e,n)=>{if(c.current){if(a<=1)return;const r=1;N(!0,r,0,0),h(r,n)}},dt=(t,e,n)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/f),E=o*-100,S=o*f;N(!0,r,S,E),h(r,n)}},V=()=>{const t=vt.addYearsFlags(rt);et(t),y([t[a-1],t[a],t[a+1]])},$=()=>{var e;if(c.current&&i){const n=g-f,r=g-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,E=u+100>0?0:u+100;N(!1,o,n,E)}},j=()=>{if(c.current&&i){const e=g+f,n=i[e]&&i[e].yearFlag?e+1:e,r=u-100;N(!0,n,e,r)}},N=(t,e,n,r)=>{C(t,e),w(),tt(n),D(r),F(e)},C=(t,e)=>{if(d&&i){const n=v(t,nt),r=Object.assign([],d,{[n]:i[e]});y(r),st(n),U(t?-100:100),setTimeout(()=>{var H;const o=(H=m.current)==null?void 0:H.offsetWidth,E=Object.assign([],R,{[n]:0,[v(!0,n)]:o,[v(!1,n)]:o&&-o}),S=Object.assign([],r,{[v(!0,n)]:{},[v(!1,n)]:{}});y(S),W(E),U(0)},l.transitionDuration||300)}},v=(t,e)=>{const n=t?e+1:e-1;return d?n<0?d.length-1:n%d.length:0},q=t=>{var n;const e=(a-g)*t.offsetWidth+t.offsetWidth/2+(((n=P.current)==null?void 0:n.offsetWidth)||0);J(e)},h=(t,e)=>{e.preventDefault(),t>a?C(!0,t):t<a&&C(!1,t),F(t)},w=s.useCallback(()=>{const t=c.current,e=t&&t.children[a];if(t instanceof HTMLElement&&e){const n=Math.round(t.offsetWidth/150);q(e),Q(100/n),Z(n)}},[]),mt=()=>({transitionDuration:"300ms"}),z=t=>({transform:`translateX(${t}%)`,transformOrigin:"left top"});return s.createElement(s.Fragment,null,s.createElement("div",{className:"k-timeline-track-wrap",ref:m,onKeyDown:it},s.createElement(B.Button,{ref:P,"aria-hidden":"true",fillMode:"solid",rounded:"full",svgIcon:M.caretAltLeftIcon,icon:"caret-alt-left",onClick:()=>O&&$(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-left",{"k-disabled":!O})}),s.createElement(B.Button,{"aria-hidden":"true",fillMode:"solid",rounded:"full",svgIcon:M.caretAltRightIcon,icon:"caret-alt-right",onClick:()=>L&&j(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-right",{"k-disabled":!L})}),s.createElement("div",{className:"k-timeline-track"},s.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${u}%)`}},i&&i.map((t,e)=>t.yearFlag?s.createElement("li",{role:"none",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${x}`},key:e},s.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):s.createElement("li",{role:"tab",className:b.classNames("k-timeline-track-item",{"k-focus":e===a}),"aria-selected":e===a,style:{flex:`1 0 ${x}`},key:e},s.createElement("div",{className:"k-timeline-date-wrap"},s.createElement("span",{className:"k-timeline-date"},I.formatDate(t.date,at))),s.createElement("span",{onClick:n=>h(e,n),className:"k-timeline-circle"})))))),s.createElement("div",{className:"k-timeline-events-list"},s.createElement("ul",{className:"k-timeline-scrollable-wrap",style:_===0?{...z(_)}:{...z(_),...mt()}},d&&d.map((t,e)=>s.createElement("li",{key:e,className:"k-timeline-event",style:{transform:`translate3d(${R[e]}px, 0px, 0px)`}},t&&s.createElement(kt.TimelineCard,{tabindex:R[e]===0?0:-1,eventData:t,onActionClick:ct,horizontal:!0,collapsible:!1,calloutStyle:{left:`${G}px`}}))))))};K.propTypes={onActionClick:Tt.func};exports.TimelineHorizontal=K;

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
 };