@progress/kendo-react-layout 13.3.0 → 13.4.0-develop.1

package/tilelayout/interfaces/index.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { TileLayout } from '../TileLayout.js';
+/**
+ * The interface for describing items that can be passed to the `items` prop of the TileLayout component.
+ */
+export interface TileLayoutItem {
+    /**
+     * The TileLayoutItem position which is used when the TileLayout is in uncontrolled mode
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-position-and-dimensions)).
+     */
+    defaultPosition?: TilePosition;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayoutItem.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem hint element.
+     */
+    hintStyle?: React.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayoutItem hint element.
+     */
+    hintClassName?: string;
+    /**
+     * Sets the TileLayoutItem title in the header
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles)).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the TileLayoutItem content in the body
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles)).
+     */
+    body?: React.ReactNode;
+    /**
+     * Overrides the default rendering of the TileLayoutItem
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-custom-rendering)).
+     */
+    item?: React.ReactNode;
+    /**
+     * Specifies if the user can resize the TileLayoutItem and in which direction
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-resizing)).
+     * If `resizable` is not specified, the resizing of the TileLayoutItem is enabled for both directions.
+     *
+     * @default true
+     */
+    resizable?: TileResizeMode;
+    /**
+     * Specifies if the user can reorder the TileLayoutItem by dragging and dropping it
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-reordering)).
+     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem is enabled.
+     *
+     * @default true
+     */
+    reorderable?: boolean;
+}
+/**
+ * Specifies the position of each tile.
+ */
+export interface TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order?: number;
+    /**
+     * Defines on which column-line the TileLayoutItem starts.
+     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
+     */
+    col: number;
+    /**
+     * Specifies how many columns the TileLayoutItem spans.
+     *
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * Defines on which row-line the TileLayoutItem starts.
+     */
+    row?: number;
+    /**
+     * Specifies how many rows the TileLayoutItem spans.
+     *
+     * @default 1
+     */
+    rowSpan?: number;
+}
+/**
+ * Specifies the strict position of each tile.
+ * Used in the [TileLayoutRepositionEvent](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayoutrepositionevent).
+ */
+export interface TileStrictPosition extends TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order: number;
+    /**
+     * Specifies how many rows the TileLayoutItem spans.
+     *
+     * @default 1
+     */
+    rowSpan: number;
+    /**
+     * Specifies how many columns the TileLayoutItem spans.
+     *
+     * @default 1
+     */
+    colSpan: number;
+}
+/**
+ * Specifies if the user can resize the TileLayoutItem and in which direction
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-resizing)).
+ * If `resizable` is not specified, the resizing of the TileLayoutItem is enabled for both directions.
+ */
+export type TileResizeMode = 'horizontal' | 'vertical' | boolean;
+/**
+ * Specifies the gaps between the tiles.
+ */
+export interface TileLayoutGap {
+    /**
+     * The rows gap between tiles.
+     *
+     * @default 16px
+     */
+    rows?: number | string;
+    /**
+     * The columns gap between tiles.
+     *
+     * @default 16px
+     */
+    columns?: number | string;
+}
+/**
+ * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
+ * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
+ *
+ * @default column
+ */
+export type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
+/**
+ * The arguments for the `onReposition` TileLayout event.
+ */
+export interface TileLayoutRepositionEvent extends BaseEvent<TileLayout> {
+    /**
+     * The new positions of the TileLayout tiles.
+     */
+    value: Array<TileStrictPosition>;
+}

package/timeline/Timeline.d.ts

@@ -0,0 +1,205 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Navigation } from '@progress/kendo-react-common';
+import { EventDataProps } from './TimelineCard.js';
+import * as React from 'react';
+export type { EventDataProps };
+export interface TimelineEventProps {
+    /**
+     * Specifies if the TimelineEvent card is default collapsed.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ opened: true, title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    opened?: boolean;
+    /**
+     * Specifies the text that is rendered as TimelineEvent card body.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ description: 'Event details', title: 'Event 1', date: new Date() }]} />
+     * ```
+     */
+    description: string;
+    /**
+     * Represents the TimelineEvent point on the axis.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ date: new Date(), title: 'Event 1', description: 'Details' }]} />
+     * ```
+     */
+    date: Date;
+    /**
+     * Specifies the text that is rendered as the TimelineEvent card title.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    title: string;
+    /**
+     * Specifies the text that is rendered under the `title`.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ subtitle: 'Subtitle', title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    subtitle?: string;
+    /**
+     * Specifies the images that are rendered under the `description`.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ images: [{ src: 'image.jpg', alt: 'Image' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    images?: {
+        src: string;
+        alt?: string;
+    }[];
+    /**
+     * Specifies the corresponding links that are rendered under the `images`.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ actions: [{ text: 'Learn More', url: 'https://example.com' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    actions?: {
+        text: string;
+        url: string;
+    }[];
+    /**
+     * @hidden
+     */
+    yearFlag?: number;
+}
+export interface TimelineProps {
+    /**
+     * The collection of TimelineEvents to be displayed in the Timeline.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    events: TimelineEventProps[];
+    /**
+     * Specifies the CSS class names which are set to the Timeline.
+     *
+     * @example
+     * ```jsx
+     * <Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    className?: string;
+    /**
+     * Specifies whether the TimelineEvent cards can be expanded or collapsed.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    collapsibleEvents?: boolean;
+    /**
+     * Switches the Timeline to horizontal mode.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    horizontal?: boolean;
+    /**
+     * The date format for displaying the TimelineEvent date.
+     *
+     * @default MMM dd, yyyy
+     *
+     * @example
+     * ```jsx
+     * <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    dateFormat?: string;
+    /**
+     * Renders TimelineEvents alternatingly on both sides of the axis.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    alterMode?: boolean;
+    /**
+     * Specifies the time for sliding to the next TimelineEvent in horizontal mode and collapsing the TimelineEvent in vertical mode.
+     * The default value are:
+     * - `300ms` for horizontal
+     * - `400ms` for vertical
+     *
+     * @example
+     * ```jsx
+     * <Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    transitionDuration?: number;
+    /**
+     * Enables keyboard navigation for the Timeline.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    navigatable?: boolean;
+    /**
+     * Fires when a TimelineEvent card is toggled.
+     *
+     * @example
+     * ```jsx
+     * <Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    onChange?: (event: EventDataProps) => void;
+    /**
+     * Fires when a TimelineEvent card action is clicked.
+     *
+     * @example
+     * ```jsx
+     * <Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
+    onActionClick?: (event: EventDataProps) => void;
+}
+/**
+ * @hidden
+ */
+export interface TimelineDirectionsProps {
+    eventsData: TimelineEventProps[];
+    dateFormat?: string;
+    transitionDuration?: number;
+    navigatable?: boolean;
+    navigation?: React.MutableRefObject<Navigation>;
+    onActionClick?: (event: EventDataProps) => void;
+}
+export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/timeline/TimelineCard.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TimelineEventProps } from './Timeline.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface TimelineCardProps {
+    tabindex?: number;
+    id?: string;
+    eventData: TimelineEventProps;
+    alternated?: boolean;
+    horizontal?: boolean;
+    collapsible?: boolean;
+    navigatable?: boolean;
+    calloutStyle?: React.CSSProperties;
+    transitionDuration?: number;
+    onChange?: (event: EventDataProps) => void;
+    onActionClick?: (event: EventDataProps) => void;
+}
+/**
+ * Represents the event data props.
+ */
+export interface EventDataProps {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent?: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent?: any;
+    /**
+     * The selected TimelineEvent card value.
+     */
+    eventData: TimelineEventProps;
+}
+export declare const TimelineCard: React.FunctionComponent<TimelineCardProps>;
+export {};

package/timeline/TimelineHorizontal.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TimelineDirectionsProps } from './Timeline.js';
+import * as React from 'react';
+export declare const TimelineHorizontal: React.FunctionComponent<TimelineDirectionsProps>;

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(),[u,D]=s.useState(0),[A,Q]=s.useState(),[f,Z]=s.useState(0),[g,tt]=s.useState(0),[a,F]=s.useState(1),[d,y]=s.useState(),[i,et]=s.useState(),[R,W]=s.useState([0,0,0]),[_,U]=s.useState(0),[nt,st]=s.useState(1),m=s.useRef(null),c=s.useRef(null),P=s.useRef(null),{eventsData:rt,dateFormat:at,navigatable:ot,onActionClick:ct}=l,x=A?`${A}%`:"150px",k=s.useRef(new b.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));s.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const t=k.current.first;t&&t.setAttribute("tabindex",String(0))},0),k.current.keyboardEvents={keydown:{ArrowRight:lt,ArrowLeft:ft,End:dt,Home:ut}})},[l.navigatable,a,f]),s.useEffect(()=>{k.current.update()});const it=t=>{ot&&k.current&&k.current.triggerKeyboardEvent(t)};s.useEffect(()=>{var r;const t=b.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(w),e=c.current,n=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return t&&e&&t.observe(e),V(),w(),W([n,0,-n]),()=>{t&&t.disconnect()}},[]),s.useEffect(()=>{const t=c.current,e=t&&t.children[a];if(e){const n=e.offsetWidth,r=!(u>=0);if(X(r),i){const o=i.length*n>f*n*((u*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-u/100>=t.children.length*n&&(V(),w(),D((e.offsetLeft-e.offsetWidth)/(f*e.offsetWidth)*100*-1)),q(e)}},[f,A,a]);const lt=(t,e,n)=>{if(c.current){const r=c.current.children[a+1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a+2:a+1;if(i&&i.length<=o)return;f+g<=o&&j(),h(o,n)}},ft=(t,e,n)=>{if(c.current){const r=c.current&&c.current.children[a-1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a-2:a-1;if(o<=0)return;o<g&&$(),h(o,n)}},ut=(t,e,n)=>{if(c.current){if(a<=1)return;const r=1;N(!0,r,0,0),h(r,n)}},dt=(t,e,n)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/f),E=o*-100,S=o*f;N(!0,r,S,E),h(r,n)}},V=()=>{const t=vt.addYearsFlags(rt);et(t),y([t[a-1],t[a],t[a+1]])},$=()=>{var e;if(c.current&&i){const n=g-f,r=g-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,E=u+100>0?0:u+100;N(!1,o,n,E)}},j=()=>{if(c.current&&i){const e=g+f,n=i[e]&&i[e].yearFlag?e+1:e,r=u-100;N(!0,n,e,r)}},N=(t,e,n,r)=>{C(t,e),w(),tt(n),D(r),F(e)},C=(t,e)=>{if(d&&i){const n=v(t,nt),r=Object.assign([],d,{[n]:i[e]});y(r),st(n),U(t?-100:100),setTimeout(()=>{var H;const o=(H=m.current)==null?void 0:H.offsetWidth,E=Object.assign([],R,{[n]:0,[v(!0,n)]:o,[v(!1,n)]:o&&-o}),S=Object.assign([],r,{[v(!0,n)]:{},[v(!1,n)]:{}});y(S),W(E),U(0)},l.transitionDuration||300)}},v=(t,e)=>{const n=t?e+1:e-1;return d?n<0?d.length-1:n%d.length:0},q=t=>{var n,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",fillMode:"solid",rounded:"full",svgIcon:M.caretAltLeftIcon,icon:"caret-alt-left",onClick:()=>O&&$(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-left",{"k-disabled":!O})}),s.createElement(B.Button,{"aria-hidden":"true",fillMode:"solid",rounded:"full",svgIcon:M.caretAltRightIcon,icon:"caret-alt-right",onClick:()=>L&&j(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-right",{"k-disabled":!L})}),s.createElement("div",{className:"k-timeline-track"},s.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${u}%)`}},i&&i.map((t,e)=>t.yearFlag?s.createElement("li",{role:"none",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${x}`},key:e},s.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):s.createElement("li",{role:"tab",className:b.classNames("k-timeline-track-item",{"k-focus":e===a}),"aria-selected":e===a,style:{flex:`1 0 ${x}`},key:e},s.createElement("div",{className:"k-timeline-date-wrap"},s.createElement("span",{className:"k-timeline-date"},I.formatDate(t.date,at))),s.createElement("span",{onClick:n=>h(e,n),className:"k-timeline-circle"})))))),s.createElement("div",{className:"k-timeline-events-list"},s.createElement("ul",{className:"k-timeline-scrollable-wrap",style:_===0?{...z(_)}:{...z(_),...mt()}},d&&d.map((t,e)=>s.createElement("li",{key:e,className:"k-timeline-event",style:{transform:`translate3d(${R[e]}px, 0px, 0px)`}},t&&s.createElement(kt.TimelineCard,{tabindex:R[e]===0?0:-1,eventData:t,onActionClick:ct,horizontal:!0,collapsible:!1,calloutStyle:{left:`${G}px`}}))))))};K.propTypes={onActionClick:Tt.func};exports.TimelineHorizontal=K;
+"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;

package/timeline/TimelineHorizontal.mjs

@@ -145,7 +145,6 @@ const gt = (g) => {
     {
       ref: W,
       "aria-hidden": "true",
-      fillMode: "solid",
       rounded: "full",
       svgIcon: dt,
       icon: "caret-alt-left",
@@ -156,7 +155,6 @@ const gt = (g) => {
     z,
     {
       "aria-hidden": "true",
-      fillMode: "solid",
       rounded: "full",
       svgIcon: Tt,
       icon: "caret-alt-right",

package/timeline/TimelineVertical.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { EventDataProps } from './TimelineCard.js';
+import { TimelineDirectionsProps } from './Timeline.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface TimelineVerticalProps extends TimelineDirectionsProps {
+    alterMode?: boolean;
+    collapsibleEvents?: boolean;
+    onChange?: (event: EventDataProps) => void;
+}
+export declare const TimelineVertical: React.FunctionComponent<TimelineVerticalProps>;

package/timeline/utils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TimelineEventProps } from './Timeline.js';
+/**
+ * Sort the events list based on event date.
+ */
+export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];
+/**
+ * @hidden
+ */
+export interface yearFlagProps {
+    yearFlag?: number;
+}
+/**
+ * @hidden
+ */
+export declare const addYearsFlags: (eventsData: TimelineEventProps[]) => (TimelineEventProps | yearFlagProps)[];