@progress/kendo-react-layout 14.5.0-develop.9 → 15.0.0-develop.2

package/timeline/TimelineCard.mjs

@@ -7,11 +7,11 @@
  */
 import * as t from "react";
 import s from "prop-types";
-import { Card as N } from "../card/Card.mjs";
-import { CardHeader as b } from "../card/CardHeader.mjs";
-import { CardTitle as A } from "../card/CardTitle.mjs";
-import { CardSubtitle as D } from "../card/CardSubtitle.mjs";
-import { CardBody as h } from "../card/CardBody.mjs";
+import { Card as C } from "../card/Card.mjs";
+import { CardHeader as N } from "../card/CardHeader.mjs";
+import { CardTitle as h } from "../card/CardTitle.mjs";
+import { CardSubtitle as A } from "../card/CardSubtitle.mjs";
+import { CardBody as D } from "../card/CardBody.mjs";
 import { CardImage as I } from "../card/CardImage.mjs";
 import { CardActions as g } from "../card/CardActions.mjs";
 import { classNames as u } from "@progress/kendo-react-common";
@@ -19,7 +19,7 @@ import { Reveal as y } from "@progress/kendo-react-animation";
 import { chevronRightIcon as T } from "@progress/kendo-svg-icons";
 import { Button as x } from "@progress/kendo-react-buttons";
 const O = (e) => {
-  const { title: E, subtitle: l, actions: i, images: o, description: v } = e.eventData, [c, k] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
+  const { title: v, subtitle: l, actions: i, images: o, description: E } = e.eventData, [c, k] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
     if (k(!c), e.onChange) {
       const n = {
         syntheticEvent: a,
@@ -28,7 +28,7 @@ const O = (e) => {
       };
       e.onChange.call(void 0, n);
     }
-  }, C = (a) => {
+  }, b = (a) => {
     if (e.onActionClick) {
       const n = {
         syntheticEvent: a,
@@ -37,13 +37,13 @@ const O = (e) => {
       };
       e.onActionClick.call(void 0, n);
     }
-  }, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, v), o && o.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), i && /* @__PURE__ */ t.createElement(g, null, i.map((a, n) => /* @__PURE__ */ t.createElement(
+  }, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, E), o && o.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), i && /* @__PURE__ */ t.createElement(g, null, i.map((a, n) => /* @__PURE__ */ t.createElement(
     "a",
     {
       key: n,
       href: a.url,
       className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
-      onClick: C
+      onClick: b
     },
     a.text
   ))));
@@ -54,14 +54,15 @@ const O = (e) => {
       className: u("k-timeline-card", { "k-collapsed": e.collapsible && r })
     },
     /* @__PURE__ */ t.createElement(
-      N,
+      C,
       {
-        "aria-live": "polite",
+        id: e.panelId,
+        "aria-label": e.ariaLabel,
+        "aria-live": e.horizontal ? void 0 : "polite",
         "aria-describedby": e.id,
-        "aria-atomic": "true",
         tabIndex: e.tabindex,
         role: e.horizontal ? "tabpanel" : "button",
-        "aria-expanded": e.collapsible && r,
+        "aria-expanded": e.collapsible ? r : void 0,
         className: "k-card-with-callout",
         onClick: (a) => f(a)
       },
@@ -78,7 +79,7 @@ const O = (e) => {
           )
         }
       ),
-      /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, E), e.collapsible && /* @__PURE__ */ t.createElement(
+      /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, v), e.collapsible && /* @__PURE__ */ t.createElement(
         x,
         {
           className: "k-event-collapse",
@@ -86,7 +87,7 @@ const O = (e) => {
           size: "xs",
           svgIcon: T
         }
-      )), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
+      )), l && /* @__PURE__ */ t.createElement(A, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
         y,
         {
           transitionEnterDuration: e.transitionDuration || 400,

package/timeline/TimelineHorizontal.js

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

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 { chevronLeftIcon as dt, chevronRightIcon as ht } from "@progress/kendo-svg-icons";
-import { useInternationalization as vt } from "@progress/kendo-react-intl";
-import { Navigation as Tt, canUseDOM as Et, classNames as _ } from "@progress/kendo-react-common";
-import { Button as z } from "@progress/kendo-react-buttons";
-const gt = (g) => {
-  const M = vt(), [y, j] = s.useState(!1), [A, 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", h = s.useRef(
-    new Tt({
+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"]
@@ -27,156 +27,157 @@ const gt = (g) => {
       t && t.setAttribute("tabindex", String(0));
     }, 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(() => {
     h.current.update();
   });
-  const rt = (t) => {
-    nt && h.current && h.current.triggerKeyboardEvent(t);
+  const at = (t) => {
+    st && h.current && h.current.triggerKeyboardEvent(t);
   };
   s.useEffect(() => {
     var r;
-    const t = Et && 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(), T(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(), T(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), T(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), E = o * -100, R = o * l;
-      k(!0, r, R, E), T(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, E = f + 100 > 0 ? 0 : f + 100;
-      k(!1, o, n, E);
+    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) => {
-    C(t, e), p(), G(n), S(r), L(e);
-  }, C = (t, e) => {
-    if (u && c) {
-      const n = v(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, E = 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,
           [v(!0, n)]: o,
           [v(!1, n)]: o && -o
-        }), R = Object.assign([], r, {
+        }), y = Object.assign([], r, {
           [v(!0, n)]: {},
           [v(!1, n)]: {}
         });
-        I(R), O(E), F(0);
+        I(y), O(T), W(0);
       }, g.transitionDuration || 300);
     }
   }, 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);
-  }, T = (t, e) => {
-    e.preventDefault(), t > a ? C(!0, t) : t < a && C(!1, t), L(t);
-  }, p = s.useCallback(() => {
-    const t = i.current, e = t && t.children[a];
+    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 ? 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,
+      svgIcon: ht,
       icon: "chevron-left",
-      onClick: () => y && x(),
-      className: _("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !y })
+      onClick: () => _ && H(),
+      className: C("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !_ })
     }
   ), /* @__PURE__ */ s.createElement(
-    z,
+    X,
     {
       "aria-hidden": "true",
       rounded: "full",
-      svgIcon: ht,
+      svgIcon: vt,
       icon: "chevron-right",
-      onClick: () => A && P(),
-      className: _("k-timeline-arrow", "k-timeline-arrow-right", { "k-disabled": !A })
+      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,47 +185,50 @@ const gt = (g) => {
         "li",
         {
           role: "tab",
-          className: _("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("span", { onClick: (n) => T(e, n), className: "k-timeline-circle" })
+        /* @__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" })
       )
     )
   ))), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ s.createElement(
     "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
 };