@progress/kendo-react-layout 5.17.0-dev.202308101212 → 5.17.0-dev.202308110815

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691666440,
+    publishDate: 1691739447,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the PanelBarItem component.
  */
@@ -42,7 +43,7 @@ export interface PanelBarItemProps {
     /**
      * Defines an SVG icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */
-    svgIcon?: string;
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */

package/dist/es/panelbar/interfaces/PanelBarItemProps.js

@@ -1 +1,2 @@
+/* eslint-disable max-len */
 export {};

package/dist/es/timeline/Timeline.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Navigation } from '@progress/kendo-react-common';
 import { EventDataProps } from './TimelineCard';
 export interface TimelineEventProps {
     /**
@@ -69,6 +70,11 @@ export interface TimelineProps {
      * - `400ms` for vertical
      */
     transitionDuration?: number;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
     /**
      * An event that is called when event card is toggled.
      */
@@ -85,6 +91,8 @@ 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/dist/es/timeline/Timeline.js

@@ -4,20 +4,21 @@ import { classNames } from '@progress/kendo-react-common';
 import { TimelineHorizontal } from './TimelineHorizontal';
 import { TimelineVertical } from './TimelineVertical';
 export var Timeline = function (props) {
-    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
+    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, className = props.className, alterMode = props.alterMode, navigatable = props.navigatable, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
     var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
     var trackWrapRef = React.useRef(null);
     React.useEffect(function () {
-        var _a;
-        setTrackAxisWidth((_a = trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+        if (trackWrapRef.current) {
+            setTrackAxisWidth(trackWrapRef.current.offsetWidth);
+        }
     }, []);
     return (React.createElement("div", { ref: trackWrapRef, className: classNames('k-timeline', {
             'k-timeline-collapsible': collapsibleEvents,
             'k-timeline-vertical': !horizontal,
             'k-timeline-alternating': alterMode,
             'k-timeline-horizontal': horizontal
-        }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal, { eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
-        : React.createElement(TimelineVertical, { eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
+        }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
+        : React.createElement(TimelineVertical, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
 };
 Timeline.defaultProps = {
     alterMode: false,

package/dist/es/timeline/TimelineCard.d.ts

@@ -10,6 +10,7 @@ interface TimelineCardProps {
     alternated?: boolean;
     horizontal?: boolean;
     collapsible?: boolean;
+    navigatable?: boolean;
     calloutStyle?: React.CSSProperties;
     transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;

package/dist/es/timeline/TimelineCard.js

@@ -42,7 +42,7 @@ export var TimelineCard = function (props) {
                 React.createElement("p", null, description),
                 images && images.map(function (image, index) { return (React.createElement(CardImage, { key: index, src: image.src })); }))),
         React.createElement(CardActions, null, actions && actions.map(function (action, index) { return (React.createElement("a", { key: index, href: action.url, className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary", onClick: actionClick }, action.text)); })))); };
-    return (React.createElement("div", { className: classNames('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
+    return (React.createElement("div", { "data-testid": "k-timeline-card", className: classNames('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
         React.createElement(Card, { "aria-live": "polite", "aria-describedby": props.id, "aria-atomic": "true", tabIndex: props.tabindex, role: props.horizontal ? 'tabpanel' : 'button', "aria-expanded": props.collapsible && opened },
             React.createElement("span", { style: props.calloutStyle, className: classNames('k-timeline-card-callout', 'k-card-callout', { 'k-callout-n': props.horizontal }, { 'k-callout-e': props.alternated && !props.horizontal }, { 'k-callout-w': !props.alternated && !props.horizontal }) }),
             React.createElement("div", { className: 'k-card-inner' },

package/dist/es/timeline/TimelineHorizontal.js

@@ -15,7 +15,7 @@ import { TimelineCard } from './TimelineCard';
 import { addYearsFlags } from './utils';
 import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import { useInternationalization } from '@progress/kendo-react-intl';
-import { classNames, canUseDOM, SvgIcon } from '@progress/kendo-react-common';
+import { classNames, canUseDOM, SvgIcon, Navigation } from '@progress/kendo-react-common';
 export var TimelineHorizontal = function (props) {
     var DEFAULT_EVENT_POINT_WITH = 150;
     var EVENT_CARD_TRANSITION_DURATION = 300;
@@ -36,8 +36,41 @@ export var TimelineHorizontal = function (props) {
     var trackWrapRef = React.useRef(null);
     var trackRef = React.useRef(null);
     var arrowLeftRef = React.useRef(null);
+    var eventsData = props.eventsData, dateFormat = props.dateFormat, navigatable = props.navigatable, onActionClick = props.onActionClick;
     var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
-    var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
+    var navigation = React.useRef(new Navigation({
+        tabIndex: 0,
+        root: trackWrapRef,
+        selectors: ['.k-timeline-scrollable-wrap']
+    }));
+    React.useEffect(function () {
+        if (trackWrapRef.current) {
+            if (props.navigatable) {
+                setTimeout(function () {
+                    var firstCell = navigation.current.first;
+                    if (firstCell) {
+                        firstCell.setAttribute('tabindex', String(0));
+                    }
+                }, 0);
+                navigation.current.keyboardEvents = {
+                    keydown: {
+                        'ArrowRight': onRight,
+                        'ArrowLeft': onLeft,
+                        'End': onEnd,
+                        'Home': onHome
+                    }
+                };
+            }
+        }
+    }, [props.navigatable, currentEvent, visibleTabs]);
+    React.useEffect(function () {
+        navigation.current.update();
+    });
+    var handleKeyDown = function (e) {
+        if (navigatable && navigation.current) {
+            navigation.current.triggerKeyboardEvent(e);
+        }
+    };
     React.useEffect(function () {
         var _a;
         var observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
@@ -50,7 +83,7 @@ export var TimelineHorizontal = function (props) {
         repositionEvents();
         setEventsPositions([cardWith, 0, -cardWith]);
         return function () {
-            observerResize.disconnect();
+            observerResize && observerResize.disconnect();
         };
     }, []);
     React.useEffect(function () {
@@ -73,6 +106,60 @@ export var TimelineHorizontal = function (props) {
             positionCallout(currentTab);
         }
     }, [visibleTabs, tabFlexWith, currentEvent]);
+    var onRight = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var nextChildren = trackRef.current.children[currentEvent + 1];
+            var nextPoint = nextChildren && nextChildren.classList.contains('k-timeline-flag-wrap')
+                ? currentEvent + 2
+                : currentEvent + 1;
+            if (eventsOnTrack && eventsOnTrack.length <= nextPoint) {
+                return;
+            }
+            if ((visibleTabs + firstIndexInView) <= nextPoint) {
+                handleNextClick();
+            }
+            onPointClick(nextPoint, ev);
+        }
+    };
+    var onLeft = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var prevChildren = trackRef.current && trackRef.current.children[currentEvent - 1];
+            var prevPoint = prevChildren && prevChildren.classList.contains('k-timeline-flag-wrap')
+                ? currentEvent - 2
+                : currentEvent - 1;
+            if (prevPoint <= 0) {
+                return;
+            }
+            if (prevPoint < firstIndexInView) {
+                handlePrevClick();
+            }
+            onPointClick(prevPoint, ev);
+        }
+    };
+    var onHome = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            if (currentEvent <= 1) {
+                return;
+            }
+            var firstChild = 1;
+            var translateUpdate = 0;
+            moveView(true, firstChild, 0, translateUpdate);
+            onPointClick(firstChild, ev);
+        }
+    };
+    var onEnd = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var lastChild = trackRef.current && trackRef.current.children.length - 1;
+            if (lastChild <= currentEvent) {
+                return;
+            }
+            var scrollViewsCount = Math.floor(lastChild / visibleTabs);
+            var translateUpdate = (scrollViewsCount) * -100;
+            var firstTabToUpdate = scrollViewsCount * visibleTabs;
+            moveView(true, lastChild, firstTabToUpdate, translateUpdate);
+            onPointClick(lastChild, ev);
+        }
+    };
     var setYearsFlags = function () {
         var trackData = addYearsFlags(eventsData);
         setEventsOnTrack(trackData);
@@ -88,11 +175,7 @@ export var TimelineHorizontal = function (props) {
                 ? lastIndexInView - 1
                 : lastIndexInView;
             var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
-            updatePage(false, currentEventToUpdate);
-            repositionEvents();
-            setFirstIndexInView(firstTabToUpdate);
-            setTranslate(translateUpdate);
-            setCurrentEvent(currentEventToUpdate);
+            moveView(false, currentEventToUpdate, firstTabToUpdate, translateUpdate);
         }
     };
     var handleNextClick = function () {
@@ -103,13 +186,16 @@ export var TimelineHorizontal = function (props) {
                 ? firstTabToUpdate + 1
                 : firstTabToUpdate;
             var translateUpdate = translate - 100;
-            updatePage(true, currentEventToUpdate);
-            repositionEvents();
-            setFirstIndexInView(firstTabToUpdate);
-            setTranslate(translateUpdate);
-            setCurrentEvent(currentEventToUpdate);
+            moveView(true, currentEventToUpdate, firstTabToUpdate, translateUpdate);
         }
     };
+    var moveView = function (direction, eventToUpdate, firstTab, translateToUpdate) {
+        updatePage(direction, eventToUpdate);
+        repositionEvents();
+        setFirstIndexInView(firstTab);
+        setTranslate(translateToUpdate);
+        setCurrentEvent(eventToUpdate);
+    };
     var updatePage = function (forward, current) {
         var _a;
         if (eventsToShow && eventsOnTrack) {
@@ -181,7 +267,7 @@ export var TimelineHorizontal = function (props) {
         transform: "translateX(".concat(translation, "%)"), transformOrigin: 'left top'
     }); };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef },
+        React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef, onKeyDown: handleKeyDown },
             React.createElement("a", { ref: arrowLeftRef, "aria-hidden": "true", onClick: function () { return arrowLeft && handlePrevClick(); }, className: classNames('k-timeline-arrow', 'k-timeline-arrow-left', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowLeft }) },
                 React.createElement(SvgIcon, { icon: caretAltLeftIcon })),
             React.createElement("a", { "aria-hidden": "true", onClick: function () { return arrowRight && handleNextClick(); }, className: classNames('k-timeline-arrow', 'k-timeline-arrow-right', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowRight }) },

package/dist/es/timeline/TimelineVertical.js

@@ -2,16 +2,55 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { TimelineCard } from './TimelineCard';
 import { addYearsFlags } from './utils';
-import { classNames, guid } from '@progress/kendo-react-common';
+import { Navigation, classNames, guid } from '@progress/kendo-react-common';
 import { useInternationalization } from '@progress/kendo-react-intl';
 export var TimelineVertical = function (props) {
     var intl = useInternationalization();
     var _a = React.useState(), eventsList = _a[0], setEventsList = _a[1];
-    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, onChange = props.onChange, onActionClick = props.onActionClick;
+    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, navigatable = props.navigatable, onChange = props.onChange, onActionClick = props.onActionClick;
+    var eventAxisRef = React.useRef(null);
+    var navigation = React.useRef(new Navigation({
+        tabIndex: 0,
+        root: eventAxisRef,
+        selectors: ['.k-card-vertical']
+    }));
+    React.useEffect(function () {
+        if (eventAxisRef.current) {
+            if (props.navigatable) {
+                setTimeout(function () {
+                    var firstCell = navigation.current.first;
+                    if (firstCell) {
+                        firstCell.setAttribute('tabindex', String(0));
+                    }
+                }, 0);
+                navigation.current.keyboardEvents = {
+                    keydown: {
+                        'Space': onEnter,
+                        'Enter': onEnter
+                    }
+                };
+            }
+        }
+    }, [props.navigatable]);
     React.useEffect(function () {
         setEventsList(addYearsFlags(eventsData));
     }, []);
-    return (React.createElement("ul", null, eventsList && eventsList.map(function (event, index) {
+    React.useEffect(function () {
+        navigation.current.update();
+    });
+    var handleKeyDown = function (e) {
+        if (navigatable && navigation.current) {
+            navigation.current.triggerKeyboardEvent(e);
+        }
+    };
+    var onEnter = function (target, _nav, ev) {
+        ev.preventDefault();
+        var element = target.querySelector('.k-card-title .k-event-collapse');
+        if (element) {
+            element.click();
+        }
+    };
+    return (React.createElement("ul", { ref: eventAxisRef, onKeyDown: handleKeyDown }, eventsList && eventsList.map(function (event, index) {
         var cardId = guid();
         return (React.createElement(React.Fragment, { key: index }, event.yearFlag
             ? (React.createElement("li", { className: "k-timeline-flag-wrap" },
@@ -20,7 +59,7 @@ export var TimelineVertical = function (props) {
                 React.createElement("div", { className: "k-timeline-date-wrap" },
                     React.createElement("span", { className: "k-timeline-date", id: cardId }, intl.formatDate(event.date, dateFormat))),
                 React.createElement("a", { className: "k-timeline-circle" }),
-                React.createElement(TimelineCard, { id: cardId, tabindex: 0, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
+                React.createElement(TimelineCard, { id: cardId, tabindex: navigatable ? 0 : -1, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
     })));
 };
 TimelineVertical.propTypes = {

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691666440,
+    publishDate: 1691739447,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the PanelBarItem component.
  */
@@ -42,7 +43,7 @@ export interface PanelBarItemProps {
     /**
      * Defines an SVG icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */
-    svgIcon?: string;
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */

package/dist/npm/panelbar/interfaces/PanelBarItemProps.js

@@ -1,2 +1,3 @@
 "use strict";
+/* eslint-disable max-len */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/timeline/Timeline.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Navigation } from '@progress/kendo-react-common';
 import { EventDataProps } from './TimelineCard';
 export interface TimelineEventProps {
     /**
@@ -69,6 +70,11 @@ export interface TimelineProps {
      * - `400ms` for vertical
      */
     transitionDuration?: number;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
     /**
      * An event that is called when event card is toggled.
      */
@@ -85,6 +91,8 @@ 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/dist/npm/timeline/Timeline.js

@@ -7,20 +7,21 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var TimelineHorizontal_1 = require("./TimelineHorizontal");
 var TimelineVertical_1 = require("./TimelineVertical");
 var Timeline = function (props) {
-    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
+    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, className = props.className, alterMode = props.alterMode, navigatable = props.navigatable, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
     var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
     var trackWrapRef = React.useRef(null);
     React.useEffect(function () {
-        var _a;
-        setTrackAxisWidth((_a = trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+        if (trackWrapRef.current) {
+            setTrackAxisWidth(trackWrapRef.current.offsetWidth);
+        }
     }, []);
     return (React.createElement("div", { ref: trackWrapRef, className: (0, kendo_react_common_1.classNames)('k-timeline', {
             'k-timeline-collapsible': collapsibleEvents,
             'k-timeline-vertical': !horizontal,
             'k-timeline-alternating': alterMode,
             'k-timeline-horizontal': horizontal
-        }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal_1.TimelineHorizontal, { eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
-        : React.createElement(TimelineVertical_1.TimelineVertical, { eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
+        }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal_1.TimelineHorizontal, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
+        : React.createElement(TimelineVertical_1.TimelineVertical, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
 };
 exports.Timeline = Timeline;
 exports.Timeline.defaultProps = {

package/dist/npm/timeline/TimelineCard.d.ts

@@ -10,6 +10,7 @@ interface TimelineCardProps {
     alternated?: boolean;
     horizontal?: boolean;
     collapsible?: boolean;
+    navigatable?: boolean;
     calloutStyle?: React.CSSProperties;
     transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;

package/dist/npm/timeline/TimelineCard.js

@@ -45,7 +45,7 @@ var TimelineCard = function (props) {
                 React.createElement("p", null, description),
                 images && images.map(function (image, index) { return (React.createElement(CardImage_1.CardImage, { key: index, src: image.src })); }))),
         React.createElement(CardActions_1.CardActions, null, actions && actions.map(function (action, index) { return (React.createElement("a", { key: index, href: action.url, className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary", onClick: actionClick }, action.text)); })))); };
-    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
+    return (React.createElement("div", { "data-testid": "k-timeline-card", className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
         React.createElement(Card_1.Card, { "aria-live": "polite", "aria-describedby": props.id, "aria-atomic": "true", tabIndex: props.tabindex, role: props.horizontal ? 'tabpanel' : 'button', "aria-expanded": props.collapsible && opened },
             React.createElement("span", { style: props.calloutStyle, className: (0, kendo_react_common_1.classNames)('k-timeline-card-callout', 'k-card-callout', { 'k-callout-n': props.horizontal }, { 'k-callout-e': props.alternated && !props.horizontal }, { 'k-callout-w': !props.alternated && !props.horizontal }) }),
             React.createElement("div", { className: 'k-card-inner' },

package/dist/npm/timeline/TimelineHorizontal.js

@@ -39,8 +39,41 @@ var TimelineHorizontal = function (props) {
     var trackWrapRef = React.useRef(null);
     var trackRef = React.useRef(null);
     var arrowLeftRef = React.useRef(null);
+    var eventsData = props.eventsData, dateFormat = props.dateFormat, navigatable = props.navigatable, onActionClick = props.onActionClick;
     var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
-    var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
+    var navigation = React.useRef(new kendo_react_common_1.Navigation({
+        tabIndex: 0,
+        root: trackWrapRef,
+        selectors: ['.k-timeline-scrollable-wrap']
+    }));
+    React.useEffect(function () {
+        if (trackWrapRef.current) {
+            if (props.navigatable) {
+                setTimeout(function () {
+                    var firstCell = navigation.current.first;
+                    if (firstCell) {
+                        firstCell.setAttribute('tabindex', String(0));
+                    }
+                }, 0);
+                navigation.current.keyboardEvents = {
+                    keydown: {
+                        'ArrowRight': onRight,
+                        'ArrowLeft': onLeft,
+                        'End': onEnd,
+                        'Home': onHome
+                    }
+                };
+            }
+        }
+    }, [props.navigatable, currentEvent, visibleTabs]);
+    React.useEffect(function () {
+        navigation.current.update();
+    });
+    var handleKeyDown = function (e) {
+        if (navigatable && navigation.current) {
+            navigation.current.triggerKeyboardEvent(e);
+        }
+    };
     React.useEffect(function () {
         var _a;
         var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
@@ -53,7 +86,7 @@ var TimelineHorizontal = function (props) {
         repositionEvents();
         setEventsPositions([cardWith, 0, -cardWith]);
         return function () {
-            observerResize.disconnect();
+            observerResize && observerResize.disconnect();
         };
     }, []);
     React.useEffect(function () {
@@ -76,6 +109,60 @@ var TimelineHorizontal = function (props) {
             positionCallout(currentTab);
         }
     }, [visibleTabs, tabFlexWith, currentEvent]);
+    var onRight = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var nextChildren = trackRef.current.children[currentEvent + 1];
+            var nextPoint = nextChildren && nextChildren.classList.contains('k-timeline-flag-wrap')
+                ? currentEvent + 2
+                : currentEvent + 1;
+            if (eventsOnTrack && eventsOnTrack.length <= nextPoint) {
+                return;
+            }
+            if ((visibleTabs + firstIndexInView) <= nextPoint) {
+                handleNextClick();
+            }
+            onPointClick(nextPoint, ev);
+        }
+    };
+    var onLeft = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var prevChildren = trackRef.current && trackRef.current.children[currentEvent - 1];
+            var prevPoint = prevChildren && prevChildren.classList.contains('k-timeline-flag-wrap')
+                ? currentEvent - 2
+                : currentEvent - 1;
+            if (prevPoint <= 0) {
+                return;
+            }
+            if (prevPoint < firstIndexInView) {
+                handlePrevClick();
+            }
+            onPointClick(prevPoint, ev);
+        }
+    };
+    var onHome = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            if (currentEvent <= 1) {
+                return;
+            }
+            var firstChild = 1;
+            var translateUpdate = 0;
+            moveView(true, firstChild, 0, translateUpdate);
+            onPointClick(firstChild, ev);
+        }
+    };
+    var onEnd = function (_target, _nav, ev) {
+        if (trackRef.current) {
+            var lastChild = trackRef.current && trackRef.current.children.length - 1;
+            if (lastChild <= currentEvent) {
+                return;
+            }
+            var scrollViewsCount = Math.floor(lastChild / visibleTabs);
+            var translateUpdate = (scrollViewsCount) * -100;
+            var firstTabToUpdate = scrollViewsCount * visibleTabs;
+            moveView(true, lastChild, firstTabToUpdate, translateUpdate);
+            onPointClick(lastChild, ev);
+        }
+    };
     var setYearsFlags = function () {
         var trackData = (0, utils_1.addYearsFlags)(eventsData);
         setEventsOnTrack(trackData);
@@ -91,11 +178,7 @@ var TimelineHorizontal = function (props) {
                 ? lastIndexInView - 1
                 : lastIndexInView;
             var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
-            updatePage(false, currentEventToUpdate);
-            repositionEvents();
-            setFirstIndexInView(firstTabToUpdate);
-            setTranslate(translateUpdate);
-            setCurrentEvent(currentEventToUpdate);
+            moveView(false, currentEventToUpdate, firstTabToUpdate, translateUpdate);
         }
     };
     var handleNextClick = function () {
@@ -106,13 +189,16 @@ var TimelineHorizontal = function (props) {
                 ? firstTabToUpdate + 1
                 : firstTabToUpdate;
             var translateUpdate = translate - 100;
-            updatePage(true, currentEventToUpdate);
-            repositionEvents();
-            setFirstIndexInView(firstTabToUpdate);
-            setTranslate(translateUpdate);
-            setCurrentEvent(currentEventToUpdate);
+            moveView(true, currentEventToUpdate, firstTabToUpdate, translateUpdate);
         }
     };
+    var moveView = function (direction, eventToUpdate, firstTab, translateToUpdate) {
+        updatePage(direction, eventToUpdate);
+        repositionEvents();
+        setFirstIndexInView(firstTab);
+        setTranslate(translateToUpdate);
+        setCurrentEvent(eventToUpdate);
+    };
     var updatePage = function (forward, current) {
         var _a;
         if (eventsToShow && eventsOnTrack) {
@@ -184,7 +270,7 @@ var TimelineHorizontal = function (props) {
         transform: "translateX(".concat(translation, "%)"), transformOrigin: 'left top'
     }); };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef },
+        React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef, onKeyDown: handleKeyDown },
             React.createElement("a", { ref: arrowLeftRef, "aria-hidden": "true", onClick: function () { return arrowLeft && handlePrevClick(); }, className: (0, kendo_react_common_1.classNames)('k-timeline-arrow', 'k-timeline-arrow-left', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowLeft }) },
                 React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.caretAltLeftIcon })),
             React.createElement("a", { "aria-hidden": "true", onClick: function () { return arrowRight && handleNextClick(); }, className: (0, kendo_react_common_1.classNames)('k-timeline-arrow', 'k-timeline-arrow-right', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowRight }) },