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

package/tabstrip/TabStripNavigation.mjs

@@ -8,19 +8,19 @@
 import * as n from "react";
 import r from "prop-types";
 import { TabStripNavigationItem as bt } from "./TabStripNavigationItem.mjs";
-import { classNames as x } from "@progress/kendo-react-common";
+import { classNames as B } from "@progress/kendo-react-common";
 import { Button as pt } from "@progress/kendo-react-buttons";
-import { caretAltLeftIcon as Z, caretAltRightIcon as tt, caretAltDownIcon as ut, caretAltUpIcon as dt } from "@progress/kendo-svg-icons";
+import { chevronLeftIcon as Z, chevronRightIcon as tt, chevronDownIcon as ut, chevronUpIcon as dt } from "@progress/kendo-svg-icons";
 import { useLocalization as vt } from "@progress/kendo-react-intl";
 import { nextArrowTitle as ot, messages as et, prevArrowTitle as nt } from "./messages/index.mjs";
 const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next", lt = (P) => {
   const {
     selected: g,
     tabPosition: m,
-    tabAlignment: B,
+    tabAlignment: O,
     children: k,
-    onSelect: O,
-    onKeyDown: R,
+    onSelect: R,
+    onKeyDown: A,
     onScroll: T,
     navItemId: E,
     contentPanelId: M,
@@ -40,32 +40,32 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
   } = P, st = n.useRef(null), I = rt || st, L = vt(), u = n.useCallback(() => /top|bottom/.test(m || "top"), [m]), v = n.useCallback(() => K === "rtl", [K]), V = n.useCallback(() => {
     const t = I.current, o = t == null ? void 0 : t.children[g || 0];
     if (o instanceof HTMLElement && t instanceof HTMLElement) {
-      const l = u(), i = l ? t.offsetWidth : t.offsetHeight, s = l ? o.offsetWidth : o.offsetHeight, f = l ? "left" : "top";
+      const l = u(), a = l ? t.offsetWidth : t.offsetHeight, s = l ? o.offsetWidth : o.offsetHeight, f = l ? "left" : "top";
       let e = l ? t.scrollLeft : t.scrollTop, c = 0;
       if (v()) {
-        const a = o.offsetLeft;
-        e = e * -1, a < 0 ? (c = a - s + t.offsetLeft, t.scrollTo({ [f]: c, behavior: S })) : a + s > i - e && (c = e + a - s, t.scrollTo({ [f]: c, behavior: S }));
+        const i = o.offsetLeft;
+        e = e * -1, i < 0 ? (c = i - s + t.offsetLeft, t.scrollTo({ [f]: c, behavior: S })) : i + s > a - e && (c = e + i - s, t.scrollTo({ [f]: c, behavior: S }));
       } else {
-        const a = l ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
-        e + i < a + s ? (c = a + s - i, t.scrollTo({ [f]: c, behavior: S })) : e > a && (c = a, t.scrollTo({ [f]: c, behavior: S }));
+        const i = l ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
+        e + a < i + s ? (c = i + s - a, t.scrollTo({ [f]: c, behavior: S })) : e > i && (c = i, t.scrollTo({ [f]: c, behavior: S }));
       }
     }
   }, [I, g, u, v]);
   n.useEffect(() => {
     H && V();
   }, [H, g, V]);
-  const A = n.useCallback(() => {
+  const x = n.useCallback(() => {
     T == null || T();
   }, [T]), X = n.useCallback(
     (t, o) => {
       const l = I.current;
       if (!l)
         return;
-      const i = u(), s = i ? l.scrollWidth - l.offsetWidth : l.scrollHeight - l.offsetHeight, f = (o.type === "click" ? D : W) || 0;
-      let e = i ? l.scrollLeft : l.scrollTop;
+      const a = u(), s = a ? l.scrollWidth - l.offsetWidth : l.scrollHeight - l.offsetHeight, f = (o.type === "click" ? D : W) || 0;
+      let e = a ? l.scrollLeft : l.scrollTop;
       v() && u() ? (t === p && e < 0 && (e += f), t === h && e < s && (e -= f), e = Math.min(0, Math.min(s, e))) : (t === p && e > 0 && (e -= f), t === h && e < s && (e += f), e = Math.max(0, Math.min(s, e)));
       const c = o.type === "click" ? S : void 0;
-      i ? l.scrollTo({ left: e, behavior: c }) : l.scrollTo({ top: e, behavior: c });
+      a ? l.scrollTo({ left: e, behavior: c }) : l.scrollTo({ top: e, behavior: c });
     },
     [I, u, v, D, W]
   ), N = n.useCallback(
@@ -85,7 +85,7 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
     [N]
   ), z = n.useCallback(
     (t) => {
-      const o = u(), l = v(), s = o ? l ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up", e = o ? l ? tt : Z : dt, a = o ? l ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down", at = o ? l ? Z : tt : ut, w = {
+      const o = u(), l = v(), s = o ? l ? "chevron-right" : "chevron-left" : "chevron-up", e = o ? l ? tt : Z : dt, i = o ? l ? "chevron-left" : "chevron-right" : "chevron-down", it = o ? l ? Z : tt : ut, w = {
         prev: {
           arrowTab: "k-tabstrip-prev",
           fontIcon: s,
@@ -94,16 +94,16 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
         },
         next: {
           arrowTab: "k-tabstrip-next",
-          fontIcon: a,
-          svgIcon: at,
+          fontIcon: i,
+          svgIcon: it,
           title: L.toLanguageString(ot, et[ot])
         }
-      }, it = (t === p ? $ : _) || pt, ft = t === p ? j : q, mt = d === null || t === p && (d === "start" || d === "top") || t === h && (d === "end" || d === "bottom");
+      }, at = (t === p ? $ : _) || pt, ft = t === p ? j : q, mt = d === null || t === p && (d === "start" || d === "top") || t === h && (d === "end" || d === "bottom");
       return /* @__PURE__ */ n.createElement(
-        it,
+        at,
         {
           disabled: mt,
-          className: x(`${w[t].arrowTab}`),
+          className: B(`${w[t].arrowTab}`),
           onClick: ft,
           icon: w[t].fontIcon,
           svgIcon: w[t].svgIcon,
@@ -126,7 +126,7 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
       L
     ]
   ), G = n.Children.count(k), J = n.Children.toArray(k), Q = n.useMemo(() => k ? ht(G).map((t, o, l) => {
-    const i = {
+    const a = {
       active: g === o,
       disabled: J[o].props.disabled,
       index: o,
@@ -136,19 +136,19 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
       contentPanelId: M,
       renderAllContent: F,
       id: E,
-      onSelect: O,
-      onScroll: A
+      onSelect: R,
+      onScroll: x
     };
-    return /* @__PURE__ */ n.createElement(bt, { key: `${E}-${o}`, ...i });
-  }) : null, [k, G, g, M, F, E, O, A]), ct = n.useMemo(
-    () => x("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
+    return /* @__PURE__ */ n.createElement(bt, { key: `${E}-${o}`, ...a });
+  }) : null, [k, G, g, M, F, E, R, x]), ct = n.useMemo(
+    () => B("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
       "k-hstack": m === "top" || m === "bottom",
       "k-vstack": m === "left" || m === "right"
     }),
     [m]
   ), Y = n.useMemo(
-    () => x("k-tabstrip-items k-tabstrip-items-scroll k-reset", `k-tabstrip-items-${B}`),
-    [B]
+    () => B("k-tabstrip-items k-tabstrip-items-scroll k-reset", `k-tabstrip-items-${O}`),
+    [O]
   );
   return /* @__PURE__ */ n.createElement("div", { className: ct }, H ? /* @__PURE__ */ n.createElement(n.Fragment, null, C !== "hidden" && b && ["split", "start", "around", "before"].includes(b) && z(p), C !== "hidden" && (b === "start" || b === "before") && z(h), /* @__PURE__ */ n.createElement(
     "ul",
@@ -157,12 +157,12 @@ const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next
       className: Y,
       role: "tablist",
       tabIndex: y,
-      onKeyDown: R,
-      onScroll: A,
+      onKeyDown: A,
+      onScroll: x,
       "aria-orientation": m === "left" || m === "right" ? "vertical" : void 0
     },
     Q
-  ), C !== "hidden" && (b === "end" || b === "after") && z(p), C !== "hidden" && b && ["split", "end", "around", "after"].includes(b) && z(h)) : /* @__PURE__ */ n.createElement("ul", { className: Y, role: "tablist", tabIndex: y, onKeyDown: R }, Q));
+  ), C !== "hidden" && (b === "end" || b === "after") && z(p), C !== "hidden" && b && ["split", "end", "around", "after"].includes(b) && z(h)) : /* @__PURE__ */ n.createElement("ul", { className: Y, role: "tablist", tabIndex: y, onKeyDown: A }, Q));
 };
 lt.propTypes = {
   children: r.oneOfType([r.element, r.arrayOf(r.element)]),

package/timeline/TimelineCard.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 N=require("react"),k=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),v=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:C}=e.eventData,[d,b]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=a=>{if(b(!d),e.onChange){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,n)}},g=a=>{if(e.onActionClick){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,n)}},m=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,C),o&&o.map((a,n)=>t.createElement(T.CardImage,{key:n,src:a.src})))),r&&t.createElement(h.CardActions,null,r.map((a,n)=>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:g},a.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:v.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&s,className:"k-card-with-callout",onClick:a=>f(a)},t.createElement("span",{style:e.calloutStyle,className:v.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:k.func,onActionClick:k.func};exports.TimelineCard=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),k=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),v=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:C}=e.eventData,[d,b]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=a=>{if(b(!d),e.onChange){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,n)}},g=a=>{if(e.onActionClick){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,n)}},m=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,C),o&&o.map((a,n)=>t.createElement(T.CardImage,{key:n,src:a.src})))),r&&t.createElement(h.CardActions,null,r.map((a,n)=>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:g},a.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:v.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&s,className:"k-card-with-callout",onClick:a=>f(a)},t.createElement("span",{style:e.calloutStyle,className:v.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",size:"xs",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:k.func,onActionClick:k.func};exports.TimelineCard=E;

package/timeline/TimelineCard.mjs

@@ -17,8 +17,8 @@ import { CardActions as g } from "../card/CardActions.mjs";
 import { classNames as u } from "@progress/kendo-react-common";
 import { Reveal as y } from "@progress/kendo-react-animation";
 import { chevronRightIcon as T } from "@progress/kendo-svg-icons";
-import { Button as O } from "@progress/kendo-react-buttons";
-const x = (e) => {
+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) => {
     if (k(!c), e.onChange) {
       const n = {
@@ -78,7 +78,15 @@ const x = (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(O, { className: "k-event-collapse", fillMode: "flat", svgIcon: T })), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
+      /* @__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(
+        x,
+        {
+          className: "k-event-collapse",
+          fillMode: "flat",
+          size: "xs",
+          svgIcon: T
+        }
+      )), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
         y,
         {
           transitionEnterDuration: e.transitionDuration || 400,
@@ -91,10 +99,10 @@ const x = (e) => {
     )
   );
 };
-x.propTypes = {
+O.propTypes = {
   onChange: s.func,
   onActionClick: s.func
 };
 export {
-  x as TimelineCard
+  O as TimelineCard
 };

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 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(),[f,D]=s.useState(0),[A,Q]=s.useState(),[u,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:ut,End:dt,Home:ft}})},[l.navigatable,a,u]),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=!(f>=0);if(X(r),i){const o=i.length*n>u*n*((f*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-f/100>=t.children.length*n&&(V(),w(),D((e.offsetLeft-e.offsetWidth)/(u*e.offsetWidth)*100*-1)),q(e)}},[u,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;u+g<=o&&j(),h(o,n)}},ut=(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)}},ft=(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/u),E=o*-100,S=o*u;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-u,r=g-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,E=f+100>0?0:f+100;N(!1,o,n,E)}},j=()=>{if(c.current&&i){const e=g+u,n=i[e]&&i[e].yearFlag?e+1:e,r=f-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,r;const e=(a-g)*t.offsetWidth+t.offsetWidth/2+(((r=(n=P.current)==null?void 0:n.element)==null?void 0:r.clientWidth)||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",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",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(${f}%)`}},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;
+"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;

package/timeline/TimelineHorizontal.mjs

@@ -9,13 +9,13 @@ 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 { 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 = 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({
+  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({
       tabIndex: 0,
       root: m,
       selectors: [".k-timeline-scrollable-wrap"]
@@ -23,9 +23,9 @@ 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,
@@ -34,14 +34,14 @@ const gt = (g) => {
       }
     });
   }, [g.navigatable, a, l]), s.useEffect(() => {
-    T.current.update();
+    h.current.update();
   });
   const rt = (t) => {
-    nt && T.current && T.current.triggerKeyboardEvent(t);
+    nt && 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;
+    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]), () => {
       t && t.disconnect();
     };
@@ -63,29 +63,29 @@ const gt = (g) => {
       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, n);
+      l + d <= o && P(), T(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;
       if (o <= 0)
         return;
-      o < d && x(), E(o, n);
+      o < d && x(), T(o, n);
     }
   }, it = (t, e, n) => {
     if (i.current) {
       if (a <= 1)
         return;
       const r = 1;
-      k(!0, r, 0, 0), E(r, n);
+      k(!0, r, 0, 0), T(r, n);
     }
   }, 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), v = o * -100, C = o * l;
-      k(!0, r, C, v), E(r, n);
+      const o = Math.floor(r / l), E = o * -100, R = o * l;
+      k(!0, r, R, E), T(r, n);
     }
   }, U = () => {
     const t = mt(tt);
@@ -93,8 +93,8 @@ const gt = (g) => {
   }, x = () => {
     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);
+      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);
     }
   }, P = () => {
     if (i.current && c) {
@@ -102,32 +102,32 @@ const gt = (g) => {
       k(!0, n, e, r);
     }
   }, k = (t, e, n, r) => {
-    A(t, e), p(), G(n), S(r), L(e);
-  }, A = (t, e) => {
+    C(t, e), p(), G(n), S(r), L(e);
+  }, C = (t, e) => {
     if (u && c) {
-      const n = h(t, Q), r = Object.assign([], u, { [n]: c[e] });
+      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, v = Object.assign([], w, {
+        const o = (H = m.current) == null ? void 0 : H.offsetWidth, E = Object.assign([], w, {
           [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
+        }), R = Object.assign([], r, {
+          [v(!0, n)]: {},
+          [v(!1, n)]: {}
         });
-        I(C), O(v), F(0);
+        I(R), O(E), F(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) => {
     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);
-  }, E = (t, e) => {
-    e.preventDefault(), t > a ? A(!0, t) : t < a && A(!1, t), L(t);
+  }, 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];
     if (t instanceof HTMLElement && e) {
@@ -147,19 +147,19 @@ const gt = (g) => {
       "aria-hidden": "true",
       rounded: "full",
       svgIcon: dt,
-      icon: "caret-alt-left",
-      onClick: () => _ && x(),
-      className: R("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !_ })
+      icon: "chevron-left",
+      onClick: () => y && x(),
+      className: _("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !y })
     }
   ), /* @__PURE__ */ s.createElement(
     z,
     {
       "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: ht,
+      icon: "chevron-right",
+      onClick: () => A && P(),
+      className: _("k-timeline-arrow", "k-timeline-arrow-right", { "k-disabled": !A })
     }
   ), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ s.createElement(
     "ul",
@@ -184,7 +184,7 @@ const gt = (g) => {
         "li",
         {
           role: "tab",
-          className: R("k-timeline-track-item", {
+          className: _("k-timeline-track-item", {
             "k-focus": e === a
           }),
           "aria-selected": e === a,
@@ -192,7 +192,7 @@ const gt = (g) => {
           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("span", { onClick: (n) => T(e, n), className: "k-timeline-circle" })
       )
     )
   ))), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ s.createElement(