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

package/dist/npm/timeline/TimelineVertical.js

@@ -10,11 +10,50 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var TimelineVertical = function (props) {
     var intl = (0, kendo_react_intl_1.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 kendo_react_common_1.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((0, utils_1.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 = (0, kendo_react_common_1.guid)();
         return (React.createElement(React.Fragment, { key: index }, event.yearFlag
             ? (React.createElement("li", { className: "k-timeline-flag-wrap" },
@@ -23,7 +62,7 @@ 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_1.TimelineCard, { id: cardId, tabindex: 0, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
+                React.createElement(TimelineCard_1.TimelineCard, { id: cardId, tabindex: navigatable ? 0 : -1, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
     })));
 };
 exports.TimelineVertical = TimelineVertical;