@progress/kendo-react-layout 14.5.0-develop.8 → 15.0.0-develop.1

package/tilelayout/TileLayout.mjs

@@ -5,76 +5,76 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as o from "react";
-import { useCallback as R, useRef as T, useMemo as F, useState as z, useEffect as Y } from "react";
-import t from "prop-types";
-import { dispatchEvent as Z, classNames as ee, getter as te } from "@progress/kendo-react-common";
-import { InternalTile as oe } from "./InternalTile.mjs";
+import * as t from "react";
+import { useCallback as R, useRef as T, useMemo as F, useState as z, useEffect as Z } from "react";
+import o from "prop-types";
+import { dispatchEvent as ee, classNames as K, getter as oe } from "@progress/kendo-react-common";
+import { InternalTile as te } from "./InternalTile.mjs";
 const re = {
   column: "k-grid-flow-col",
   row: "k-grid-flow-row",
   "column dense": "k-grid-flow-col-dense",
   "row dense": "k-grid-flow-row-dense",
-  unset: "k-grid-flow-unset"
-}, m = {
+  unset: void 0
+}, u = {
   columns: 3,
   columnWidth: "1fr",
   rowHeight: "1fr",
   autoFlow: "column",
   items: []
-}, K = o.forwardRef((U, j) => {
+}, U = t.forwardRef((j, O) => {
   const {
-    className: O,
-    columns: i = m.columns,
-    columnWidth: d = m.columnWidth,
+    className: V,
+    columns: i = u.columns,
+    columnWidth: d = u.columnWidth,
     gap: a,
-    rowHeight: p = m.rowHeight,
+    rowHeight: p = u.rowHeight,
     style: L,
-    autoFlow: V = m.autoFlow,
-    items: l = m.items,
+    autoFlow: _ = u.autoFlow,
+    items: l = u.items,
     positions: f,
     onReposition: b,
     dataItemKey: $,
     id: v,
-    dir: _,
-    ignoreDrag: M
-  } = U, q = R(() => {
+    dir: M,
+    ignoreDrag: q
+  } = j, B = R(() => {
     g.current && g.current.focus();
   }, []), y = T(null), g = T(null);
-  o.useImperativeHandle(
+  t.useImperativeHandle(
     y,
     () => ({
       element: g.current,
-      focus: q
+      focus: B
     })
-  ), o.useImperativeHandle(j, () => y.current);
-  const c = f !== void 0, k = R((e) => e.map((r, s) => ({ order: s, rowSpan: 1, colSpan: 1, ...r.defaultPosition })), []), B = F(() => {
+  ), t.useImperativeHandle(O, () => y.current);
+  const c = f !== void 0, k = R((e) => e.map((r, s) => ({ order: s, rowSpan: 1, colSpan: 1, ...r.defaultPosition })), []), G = F(() => {
     if (f)
       return f.map(
         (e, r) => ({ order: r, rowSpan: 1, colSpan: 1, ...e })
       );
-  }, [f]), [G, W] = z(
+  }, [f]), [J, W] = z(
     () => k(l)
-  ), [J, A] = z(!1), C = T(l.length);
-  Y(() => {
+  ), [Q, A] = z(!1), C = T(l.length);
+  Z(() => {
     !c && l.length !== C.current && (W(k(l)), C.current = l.length);
   }, [l, c, k]);
-  const S = c ? B : G, Q = R(
+  const S = c ? G : J, X = R(
     (e, r, s, h = 0, P = 0) => {
       if (r === 0 && s === 0 && !P && !h)
         return;
-      let u = !1;
+      let m = !1;
       const w = S.map((I) => ({ ...I })), n = w[e], E = w.find((I) => I.order === n.order + r);
-      E && E !== n && (n.order += r, E.order += -r, u = !0);
+      E && E !== n && (n.order += r, E.order += -r, m = !0);
       const x = n.col + s;
-      s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, u = !0);
+      s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, m = !0);
       const H = n.colSpan + P;
-      P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, u = !0);
+      P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, m = !0);
       const D = n.rowSpan + h;
-      h && D >= 1 && (n.rowSpan = D, u = !0), u && (c || W(w), b && Z(b, {}, y.current, { value: w }));
+      h && D >= 1 && (n.rowSpan = D, m = !0), m && (c || W(w), b && ee(b, {}, y.current, { value: w }));
     },
     [S, i, c, b, y]
-  ), N = F(() => a ? `${typeof a.rows == "number" ? a.rows + "px" : a.rows} ${typeof a.columns == "number" ? a.columns + "px" : a.columns}` : 16, [a]), X = F(
+  ), N = F(() => a ? `${typeof a.rows == "number" ? a.rows + "px" : a.rows} ${typeof a.columns == "number" ? a.columns + "px" : a.columns}` : 16, [a]), Y = F(
     () => ({
       gridTemplateColumns: `repeat(${i}, minmax(0px, ${typeof d == "number" ? d + "px" : d}))`,
       gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
@@ -84,22 +84,22 @@ const re = {
     }),
     [i, d, p, N, L]
   );
-  return /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: g,
-      dir: _,
-      className: ee("k-tilelayout k-pos-relative", re[V], O),
-      style: X,
+      dir: M,
+      className: K("k-tilelayout", re[_], V),
+      style: Y,
       id: v,
       role: "list"
     },
     l.map((e, r) => {
       let s;
-      return typeof e.header == "string" ? s = e.header : s = `tilelayout-${v ? `${v}-` : ""}${r}`, /* @__PURE__ */ o.createElement(o.Fragment, { key: $ ? te($)(e) : r }, /* @__PURE__ */ o.createElement(
-        oe,
+      return typeof e.header == "string" ? s = e.header : s = `tilelayout-${v ? `${v}-` : ""}${r}`, /* @__PURE__ */ t.createElement(t.Fragment, { key: $ ? oe($)(e) : r }, /* @__PURE__ */ t.createElement(
+        te,
         {
-          update: Q,
+          update: X,
           defaultPosition: S[r],
           index: r,
           resizable: e.resizable,
@@ -109,33 +109,33 @@ const re = {
           className: e.className,
           hintClassName: e.hintClassName,
           hintStyle: e.hintStyle,
-          ignoreDrag: M,
+          ignoreDrag: q,
           onPress: () => A(!0),
           onRelease: () => A(!1)
         },
-        e.item ? e.item : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, o.isValidElement(e.header) ? e.header : /* @__PURE__ */ o.createElement("div", { id: s, className: "k-card-title" }, e.header)), /* @__PURE__ */ o.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
+        e.item ? e.item : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: K("k-tilelayout-item-header k-card-header", { "k-cursor-move": e.reorderable !== !1 }) }, t.isValidElement(e.header) ? e.header : /* @__PURE__ */ t.createElement("div", { id: s, className: "k-card-title" }, e.header)), /* @__PURE__ */ t.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
       ));
     }),
-    !J && /* @__PURE__ */ o.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
+    !Q && /* @__PURE__ */ t.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
   );
 });
-K.displayName = "KendoTileLayout";
-K.propTypes = {
-  id: t.string,
-  style: t.object,
-  className: t.string,
-  dir: t.string,
-  gap: t.object,
-  columns: t.number,
-  columnWidth: t.oneOfType([t.number, t.string]),
-  rowHeight: t.oneOfType([t.number, t.string]),
-  dataItemKey: t.string,
-  items: t.array,
-  positions: t.array,
-  autoFlow: t.oneOf(["column", "row", "column dense", "row dense", "unset"]),
-  onReposition: t.func,
-  ignoreDrag: t.func
+U.displayName = "KendoTileLayout";
+U.propTypes = {
+  id: o.string,
+  style: o.object,
+  className: o.string,
+  dir: o.string,
+  gap: o.object,
+  columns: o.number,
+  columnWidth: o.oneOfType([o.number, o.string]),
+  rowHeight: o.oneOfType([o.number, o.string]),
+  dataItemKey: o.string,
+  items: o.array,
+  positions: o.array,
+  autoFlow: o.oneOf(["column", "row", "column dense", "row dense", "unset"]),
+  onReposition: o.func,
+  ignoreDrag: o.func
 };
 export {
-  K as TileLayout
+  U as TileLayout
 };

package/timeline/TimelineCard.d.ts

@@ -13,11 +13,13 @@ import * as React from 'react';
 interface TimelineCardProps {
     tabindex?: number;
     id?: string;
+    panelId?: string;
     eventData: TimelineEventProps;
     alternated?: boolean;
     horizontal?: boolean;
     collapsible?: boolean;
     navigatable?: boolean;
+    ariaLabel?: string;
     calloutStyle?: React.CSSProperties;
     transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;

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"),v=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),h=require("../card/CardBody.js"),O=require("../card/CardImage.js"),T=require("../card/CardActions.js"),k=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:b}=e.eventData,[d,C]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=a=>{if(C(!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(h.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,b),o&&o.map((a,n)=>t.createElement(O.CardImage,{key:n,src:a.src})))),r&&t.createElement(T.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:k.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{id:e.panelId,"aria-label":e.ariaLabel,"aria-live":e.horizontal?void 0:"polite","aria-describedby":e.id,tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible?s:void 0,className:"k-card-with-callout",onClick:a=>f(a)},t.createElement("span",{style:e.calloutStyle,className:k.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:v.func,onActionClick:v.func};exports.TimelineCard=E;

package/timeline/TimelineCard.mjs

@@ -7,19 +7,19 @@
  */
 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";
 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) => {
-  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) => {
+import { Button as x } from "@progress/kendo-react-buttons";
+const O = (e) => {
+  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 x = (e) => {
       };
       e.onChange.call(void 0, n);
     }
-  }, C = (a) => {
+  }, b = (a) => {
     if (e.onActionClick) {
       const n = {
         syntheticEvent: a,
@@ -37,13 +37,13 @@ const x = (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 x = (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,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(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",
+          fillMode: "flat",
+          size: "xs",
+          svgIcon: T
+        }
+      )), l && /* @__PURE__ */ t.createElement(A, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
         y,
         {
           transitionEnterDuration: e.transitionDuration || 400,
@@ -91,10 +100,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"),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;