@progress/kendo-react-layout 5.17.0-dev.202308101804 → 5.17.0-dev.202308141334

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cdn/js/kendo-react-layout.js +1 -1
  2. package/dist/es/package-metadata.js +1 -1
  3. package/dist/es/timeline/Timeline.d.ts +8 -0
  4. package/dist/es/timeline/Timeline.js +6 -5
  5. package/dist/es/timeline/TimelineCard.d.ts +1 -0
  6. package/dist/es/timeline/TimelineCard.js +1 -1
  7. package/dist/es/timeline/TimelineHorizontal.js +100 -14
  8. package/dist/es/timeline/TimelineVertical.js +43 -4
  9. package/dist/npm/package-metadata.js +1 -1
  10. package/dist/npm/timeline/Timeline.d.ts +8 -0
  11. package/dist/npm/timeline/Timeline.js +6 -5
  12. package/dist/npm/timeline/TimelineCard.d.ts +1 -0
  13. package/dist/npm/timeline/TimelineCard.js +1 -1
  14. package/dist/npm/timeline/TimelineHorizontal.js +99 -13
  15. package/dist/npm/timeline/TimelineVertical.js +42 -3
  16. package/dist/systemjs/kendo-react-layout.js +1 -1
  17. package/package.json +13 -13
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-layout',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1691687659,
8
+ publishDate: 1692017811,
9
9
  version: '',
10
10
  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'
11
11
  };
package/dist/es/timeline/Timeline.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { Navigation } from '@progress/kendo-react-common';
2
3
  import { EventDataProps } from './TimelineCard';
3
4
  export interface TimelineEventProps {
4
5
  /**
@@ -69,6 +70,11 @@ export interface TimelineProps {
69
70
  * - `400ms` for vertical
70
71
  */
71
72
  transitionDuration?: number;
73
+ /**
74
+ * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
75
+ * By default, navigation is disabled.
76
+ */
77
+ navigatable?: boolean;
72
78
  /**
73
79
  * An event that is called when event card is toggled.
74
80
  */
@@ -85,6 +91,8 @@ export interface TimelineDirectionsProps {
85
91
  eventsData: TimelineEventProps[];
86
92
  dateFormat?: string;
87
93
  transitionDuration?: number;
94
+ navigatable?: boolean;
95
+ navigation?: React.MutableRefObject<Navigation>;
88
96
  onActionClick?: (event: EventDataProps) => void;
89
97
  }
90
98
  export declare const Timeline: React.FunctionComponent<TimelineProps>;
package/dist/es/timeline/Timeline.js CHANGED
@@ -4,20 +4,21 @@ import { classNames } from '@progress/kendo-react-common';
4
4
  import { TimelineHorizontal } from './TimelineHorizontal';
5
5
  import { TimelineVertical } from './TimelineVertical';
6
6
  export var Timeline = function (props) {
7
- 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;
7
+ 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;
8
8
  var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
9
9
  var trackWrapRef = React.useRef(null);
10
10
  React.useEffect(function () {
11
- var _a;
12
- setTrackAxisWidth((_a = trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
11
+ if (trackWrapRef.current) {
12
+ setTrackAxisWidth(trackWrapRef.current.offsetWidth);
13
+ }
13
14
  }, []);
14
15
  return (React.createElement("div", { ref: trackWrapRef, className: classNames('k-timeline', {
15
16
  'k-timeline-collapsible': collapsibleEvents,
16
17
  'k-timeline-vertical': !horizontal,
17
18
  'k-timeline-alternating': alterMode,
18
19
  'k-timeline-horizontal': horizontal
19
- }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal, { eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
20
- : React.createElement(TimelineVertical, { eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
20
+ }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
21
+ : React.createElement(TimelineVertical, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
21
22
  };
22
23
  Timeline.defaultProps = {
23
24
  alterMode: false,
package/dist/es/timeline/TimelineCard.d.ts CHANGED
@@ -10,6 +10,7 @@ interface TimelineCardProps {
10
10
  alternated?: boolean;
11
11
  horizontal?: boolean;
12
12
  collapsible?: boolean;
13
+ navigatable?: boolean;
13
14
  calloutStyle?: React.CSSProperties;
14
15
  transitionDuration?: number;
15
16
  onChange?: (event: EventDataProps) => void;
package/dist/es/timeline/TimelineCard.js CHANGED
@@ -42,7 +42,7 @@ export var TimelineCard = function (props) {
42
42
  React.createElement("p", null, description),
43
43
  images && images.map(function (image, index) { return (React.createElement(CardImage, { key: index, src: image.src })); }))),
44
44
  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)); })))); };
45
- return (React.createElement("div", { className: classNames('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
45
+ return (React.createElement("div", { "data-testid": "k-timeline-card", className: classNames('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
46
46
  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 },
47
47
  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 }) }),
48
48
  React.createElement("div", { className: 'k-card-inner' },
package/dist/es/timeline/TimelineHorizontal.js CHANGED
@@ -15,7 +15,7 @@ import { TimelineCard } from './TimelineCard';
15
15
  import { addYearsFlags } from './utils';
16
16
  import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
17
17
  import { useInternationalization } from '@progress/kendo-react-intl';
18
- import { classNames, canUseDOM, SvgIcon } from '@progress/kendo-react-common';
18
+ import { classNames, canUseDOM, SvgIcon, Navigation } from '@progress/kendo-react-common';
19
19
  export var TimelineHorizontal = function (props) {
20
20
  var DEFAULT_EVENT_POINT_WITH = 150;
21
21
  var EVENT_CARD_TRANSITION_DURATION = 300;
@@ -36,8 +36,41 @@ export var TimelineHorizontal = function (props) {
36
36
  var trackWrapRef = React.useRef(null);
37
37
  var trackRef = React.useRef(null);
38
38
  var arrowLeftRef = React.useRef(null);
39
+ var eventsData = props.eventsData, dateFormat = props.dateFormat, navigatable = props.navigatable, onActionClick = props.onActionClick;
39
40
  var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
40
- var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
41
+ var navigation = React.useRef(new Navigation({
42
+ tabIndex: 0,
43
+ root: trackWrapRef,
44
+ selectors: ['.k-timeline-scrollable-wrap']
45
+ }));
46
+ React.useEffect(function () {
47
+ if (trackWrapRef.current) {
48
+ if (props.navigatable) {
49
+ setTimeout(function () {
50
+ var firstCell = navigation.current.first;
51
+ if (firstCell) {
52
+ firstCell.setAttribute('tabindex', String(0));
53
+ }
54
+ }, 0);
55
+ navigation.current.keyboardEvents = {
56
+ keydown: {
57
+ 'ArrowRight': onRight,
58
+ 'ArrowLeft': onLeft,
59
+ 'End': onEnd,
60
+ 'Home': onHome
61
+ }
62
+ };
63
+ }
64
+ }
65
+ }, [props.navigatable, currentEvent, visibleTabs]);
66
+ React.useEffect(function () {
67
+ navigation.current.update();
68
+ });
69
+ var handleKeyDown = function (e) {
70
+ if (navigatable && navigation.current) {
71
+ navigation.current.triggerKeyboardEvent(e);
72
+ }
73
+ };
41
74
  React.useEffect(function () {
42
75
  var _a;
43
76
  var observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
@@ -50,7 +83,7 @@ export var TimelineHorizontal = function (props) {
50
83
  repositionEvents();
51
84
  setEventsPositions([cardWith, 0, -cardWith]);
52
85
  return function () {
53
- observerResize.disconnect();
86
+ observerResize && observerResize.disconnect();
54
87
  };
55
88
  }, []);
56
89
  React.useEffect(function () {
@@ -73,6 +106,60 @@ export var TimelineHorizontal = function (props) {
73
106
  positionCallout(currentTab);
74
107
  }
75
108
  }, [visibleTabs, tabFlexWith, currentEvent]);
109
+ var onRight = function (_target, _nav, ev) {
110
+ if (trackRef.current) {
111
+ var nextChildren = trackRef.current.children[currentEvent + 1];
112
+ var nextPoint = nextChildren && nextChildren.classList.contains('k-timeline-flag-wrap')
113
+ ? currentEvent + 2
114
+ : currentEvent + 1;
115
+ if (eventsOnTrack && eventsOnTrack.length <= nextPoint) {
116
+ return;
117
+ }
118
+ if ((visibleTabs + firstIndexInView) <= nextPoint) {
119
+ handleNextClick();
120
+ }
121
+ onPointClick(nextPoint, ev);
122
+ }
123
+ };
124
+ var onLeft = function (_target, _nav, ev) {
125
+ if (trackRef.current) {
126
+ var prevChildren = trackRef.current && trackRef.current.children[currentEvent - 1];
127
+ var prevPoint = prevChildren && prevChildren.classList.contains('k-timeline-flag-wrap')
128
+ ? currentEvent - 2
129
+ : currentEvent - 1;
130
+ if (prevPoint <= 0) {
131
+ return;
132
+ }
133
+ if (prevPoint < firstIndexInView) {
134
+ handlePrevClick();
135
+ }
136
+ onPointClick(prevPoint, ev);
137
+ }
138
+ };
139
+ var onHome = function (_target, _nav, ev) {
140
+ if (trackRef.current) {
141
+ if (currentEvent <= 1) {
142
+ return;
143
+ }
144
+ var firstChild = 1;
145
+ var translateUpdate = 0;
146
+ moveView(true, firstChild, 0, translateUpdate);
147
+ onPointClick(firstChild, ev);
148
+ }
149
+ };
150
+ var onEnd = function (_target, _nav, ev) {
151
+ if (trackRef.current) {
152
+ var lastChild = trackRef.current && trackRef.current.children.length - 1;
153
+ if (lastChild <= currentEvent) {
154
+ return;
155
+ }
156
+ var scrollViewsCount = Math.floor(lastChild / visibleTabs);
157
+ var translateUpdate = (scrollViewsCount) * -100;
158
+ var firstTabToUpdate = scrollViewsCount * visibleTabs;
159
+ moveView(true, lastChild, firstTabToUpdate, translateUpdate);
160
+ onPointClick(lastChild, ev);
161
+ }
162
+ };
76
163
  var setYearsFlags = function () {
77
164
  var trackData = addYearsFlags(eventsData);
78
165
  setEventsOnTrack(trackData);
@@ -88,11 +175,7 @@ export var TimelineHorizontal = function (props) {
88
175
  ? lastIndexInView - 1
89
176
  : lastIndexInView;
90
177
  var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
91
- updatePage(false, currentEventToUpdate);
92
- repositionEvents();
93
- setFirstIndexInView(firstTabToUpdate);
94
- setTranslate(translateUpdate);
95
- setCurrentEvent(currentEventToUpdate);
178
+ moveView(false, currentEventToUpdate, firstTabToUpdate, translateUpdate);
96
179
  }
97
180
  };
98
181
  var handleNextClick = function () {
@@ -103,13 +186,16 @@ export var TimelineHorizontal = function (props) {
103
186
  ? firstTabToUpdate + 1
104
187
  : firstTabToUpdate;
105
188
  var translateUpdate = translate - 100;
106
- updatePage(true, currentEventToUpdate);
107
- repositionEvents();
108
- setFirstIndexInView(firstTabToUpdate);
109
- setTranslate(translateUpdate);
110
- setCurrentEvent(currentEventToUpdate);
189
+ moveView(true, currentEventToUpdate, firstTabToUpdate, translateUpdate);
111
190
  }
112
191
  };
192
+ var moveView = function (direction, eventToUpdate, firstTab, translateToUpdate) {
193
+ updatePage(direction, eventToUpdate);
194
+ repositionEvents();
195
+ setFirstIndexInView(firstTab);
196
+ setTranslate(translateToUpdate);
197
+ setCurrentEvent(eventToUpdate);
198
+ };
113
199
  var updatePage = function (forward, current) {
114
200
  var _a;
115
201
  if (eventsToShow && eventsOnTrack) {
@@ -181,7 +267,7 @@ export var TimelineHorizontal = function (props) {
181
267
  transform: "translateX(".concat(translation, "%)"), transformOrigin: 'left top'
182
268
  }); };
183
269
  return (React.createElement(React.Fragment, null,
184
- React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef },
270
+ React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef, onKeyDown: handleKeyDown },
185
271
  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 }) },
186
272
  React.createElement(SvgIcon, { icon: caretAltLeftIcon })),
187
273
  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 CHANGED
@@ -2,16 +2,55 @@ import * as React from 'react';
2
2
  import * as PropTypes from 'prop-types';
3
3
  import { TimelineCard } from './TimelineCard';
4
4
  import { addYearsFlags } from './utils';
5
- import { classNames, guid } from '@progress/kendo-react-common';
5
+ import { Navigation, classNames, guid } from '@progress/kendo-react-common';
6
6
  import { useInternationalization } from '@progress/kendo-react-intl';
7
7
  export var TimelineVertical = function (props) {
8
8
  var intl = useInternationalization();
9
9
  var _a = React.useState(), eventsList = _a[0], setEventsList = _a[1];
10
- var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, onChange = props.onChange, onActionClick = props.onActionClick;
10
+ 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;
11
+ var eventAxisRef = React.useRef(null);
12
+ var navigation = React.useRef(new Navigation({
13
+ tabIndex: 0,
14
+ root: eventAxisRef,
15
+ selectors: ['.k-card-vertical']
16
+ }));
17
+ React.useEffect(function () {
18
+ if (eventAxisRef.current) {
19
+ if (props.navigatable) {
20
+ setTimeout(function () {
21
+ var firstCell = navigation.current.first;
22
+ if (firstCell) {
23
+ firstCell.setAttribute('tabindex', String(0));
24
+ }
25
+ }, 0);
26
+ navigation.current.keyboardEvents = {
27
+ keydown: {
28
+ 'Space': onEnter,
29
+ 'Enter': onEnter
30
+ }
31
+ };
32
+ }
33
+ }
34
+ }, [props.navigatable]);
11
35
  React.useEffect(function () {
12
36
  setEventsList(addYearsFlags(eventsData));
13
37
  }, []);
14
- return (React.createElement("ul", null, eventsList && eventsList.map(function (event, index) {
38
+ React.useEffect(function () {
39
+ navigation.current.update();
40
+ });
41
+ var handleKeyDown = function (e) {
42
+ if (navigatable && navigation.current) {
43
+ navigation.current.triggerKeyboardEvent(e);
44
+ }
45
+ };
46
+ var onEnter = function (target, _nav, ev) {
47
+ ev.preventDefault();
48
+ var element = target.querySelector('.k-card-title .k-event-collapse');
49
+ if (element) {
50
+ element.click();
51
+ }
52
+ };
53
+ return (React.createElement("ul", { ref: eventAxisRef, onKeyDown: handleKeyDown }, eventsList && eventsList.map(function (event, index) {
15
54
  var cardId = guid();
16
55
  return (React.createElement(React.Fragment, { key: index }, event.yearFlag
17
56
  ? (React.createElement("li", { className: "k-timeline-flag-wrap" },
@@ -20,7 +59,7 @@ export var TimelineVertical = function (props) {
20
59
  React.createElement("div", { className: "k-timeline-date-wrap" },
21
60
  React.createElement("span", { className: "k-timeline-date", id: cardId }, intl.formatDate(event.date, dateFormat))),
22
61
  React.createElement("a", { className: "k-timeline-circle" }),
23
- React.createElement(TimelineCard, { id: cardId, tabindex: 0, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
62
+ React.createElement(TimelineCard, { id: cardId, tabindex: navigatable ? 0 : -1, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
24
63
  })));
25
64
  };
26
65
  TimelineVertical.propTypes = {
package/dist/npm/package-metadata.js CHANGED
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-layout',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1691687659,
11
+ publishDate: 1692017811,
12
12
  version: '',
13
13
  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'
14
14
  };
package/dist/npm/timeline/Timeline.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { Navigation } from '@progress/kendo-react-common';
2
3
  import { EventDataProps } from './TimelineCard';
3
4
  export interface TimelineEventProps {
4
5
  /**
@@ -69,6 +70,11 @@ export interface TimelineProps {
69
70
  * - `400ms` for vertical
70
71
  */
71
72
  transitionDuration?: number;
73
+ /**
74
+ * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
75
+ * By default, navigation is disabled.
76
+ */
77
+ navigatable?: boolean;
72
78
  /**
73
79
  * An event that is called when event card is toggled.
74
80
  */
@@ -85,6 +91,8 @@ export interface TimelineDirectionsProps {
85
91
  eventsData: TimelineEventProps[];
86
92
  dateFormat?: string;
87
93
  transitionDuration?: number;
94
+ navigatable?: boolean;
95
+ navigation?: React.MutableRefObject<Navigation>;
88
96
  onActionClick?: (event: EventDataProps) => void;
89
97
  }
90
98
  export declare const Timeline: React.FunctionComponent<TimelineProps>;
package/dist/npm/timeline/Timeline.js CHANGED
@@ -7,20 +7,21 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
7
7
  var TimelineHorizontal_1 = require("./TimelineHorizontal");
8
8
  var TimelineVertical_1 = require("./TimelineVertical");
9
9
  var Timeline = function (props) {
10
- 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;
10
+ 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;
11
11
  var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
12
12
  var trackWrapRef = React.useRef(null);
13
13
  React.useEffect(function () {
14
- var _a;
15
- setTrackAxisWidth((_a = trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
14
+ if (trackWrapRef.current) {
15
+ setTrackAxisWidth(trackWrapRef.current.offsetWidth);
16
+ }
16
17
  }, []);
17
18
  return (React.createElement("div", { ref: trackWrapRef, className: (0, kendo_react_common_1.classNames)('k-timeline', {
18
19
  'k-timeline-collapsible': collapsibleEvents,
19
20
  'k-timeline-vertical': !horizontal,
20
21
  'k-timeline-alternating': alterMode,
21
22
  'k-timeline-horizontal': horizontal
22
- }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal_1.TimelineHorizontal, { eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
23
- : React.createElement(TimelineVertical_1.TimelineVertical, { eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
23
+ }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal_1.TimelineHorizontal, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
24
+ : React.createElement(TimelineVertical_1.TimelineVertical, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
24
25
  };
25
26
  exports.Timeline = Timeline;
26
27
  exports.Timeline.defaultProps = {
package/dist/npm/timeline/TimelineCard.d.ts CHANGED
@@ -10,6 +10,7 @@ interface TimelineCardProps {
10
10
  alternated?: boolean;
11
11
  horizontal?: boolean;
12
12
  collapsible?: boolean;
13
+ navigatable?: boolean;
13
14
  calloutStyle?: React.CSSProperties;
14
15
  transitionDuration?: number;
15
16
  onChange?: (event: EventDataProps) => void;
package/dist/npm/timeline/TimelineCard.js CHANGED
@@ -45,7 +45,7 @@ var TimelineCard = function (props) {
45
45
  React.createElement("p", null, description),
46
46
  images && images.map(function (image, index) { return (React.createElement(CardImage_1.CardImage, { key: index, src: image.src })); }))),
47
47
  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)); })))); };
48
- return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
48
+ return (React.createElement("div", { "data-testid": "k-timeline-card", className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
49
49
  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 },
50
50
  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 }) }),
51
51
  React.createElement("div", { className: 'k-card-inner' },
package/dist/npm/timeline/TimelineHorizontal.js CHANGED
@@ -39,8 +39,41 @@ var TimelineHorizontal = function (props) {
39
39
  var trackWrapRef = React.useRef(null);
40
40
  var trackRef = React.useRef(null);
41
41
  var arrowLeftRef = React.useRef(null);
42
+ var eventsData = props.eventsData, dateFormat = props.dateFormat, navigatable = props.navigatable, onActionClick = props.onActionClick;
42
43
  var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
43
- var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
44
+ var navigation = React.useRef(new kendo_react_common_1.Navigation({
45
+ tabIndex: 0,
46
+ root: trackWrapRef,
47
+ selectors: ['.k-timeline-scrollable-wrap']
48
+ }));
49
+ React.useEffect(function () {
50
+ if (trackWrapRef.current) {
51
+ if (props.navigatable) {
52
+ setTimeout(function () {
53
+ var firstCell = navigation.current.first;
54
+ if (firstCell) {
55
+ firstCell.setAttribute('tabindex', String(0));
56
+ }
57
+ }, 0);
58
+ navigation.current.keyboardEvents = {
59
+ keydown: {
60
+ 'ArrowRight': onRight,
61
+ 'ArrowLeft': onLeft,
62
+ 'End': onEnd,
63
+ 'Home': onHome
64
+ }
65
+ };
66
+ }
67
+ }
68
+ }, [props.navigatable, currentEvent, visibleTabs]);
69
+ React.useEffect(function () {
70
+ navigation.current.update();
71
+ });
72
+ var handleKeyDown = function (e) {
73
+ if (navigatable && navigation.current) {
74
+ navigation.current.triggerKeyboardEvent(e);
75
+ }
76
+ };
44
77
  React.useEffect(function () {
45
78
  var _a;
46
79
  var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
@@ -53,7 +86,7 @@ var TimelineHorizontal = function (props) {
53
86
  repositionEvents();
54
87
  setEventsPositions([cardWith, 0, -cardWith]);
55
88
  return function () {
56
- observerResize.disconnect();
89
+ observerResize && observerResize.disconnect();
57
90
  };
58
91
  }, []);
59
92
  React.useEffect(function () {
@@ -76,6 +109,60 @@ var TimelineHorizontal = function (props) {
76
109
  positionCallout(currentTab);
77
110
  }
78
111
  }, [visibleTabs, tabFlexWith, currentEvent]);
112
+ var onRight = function (_target, _nav, ev) {
113
+ if (trackRef.current) {
114
+ var nextChildren = trackRef.current.children[currentEvent + 1];
115
+ var nextPoint = nextChildren && nextChildren.classList.contains('k-timeline-flag-wrap')
116
+ ? currentEvent + 2
117
+ : currentEvent + 1;
118
+ if (eventsOnTrack && eventsOnTrack.length <= nextPoint) {
119
+ return;
120
+ }
121
+ if ((visibleTabs + firstIndexInView) <= nextPoint) {
122
+ handleNextClick();
123
+ }
124
+ onPointClick(nextPoint, ev);
125
+ }
126
+ };
127
+ var onLeft = function (_target, _nav, ev) {
128
+ if (trackRef.current) {
129
+ var prevChildren = trackRef.current && trackRef.current.children[currentEvent - 1];
130
+ var prevPoint = prevChildren && prevChildren.classList.contains('k-timeline-flag-wrap')
131
+ ? currentEvent - 2
132
+ : currentEvent - 1;
133
+ if (prevPoint <= 0) {
134
+ return;
135
+ }
136
+ if (prevPoint < firstIndexInView) {
137
+ handlePrevClick();
138
+ }
139
+ onPointClick(prevPoint, ev);
140
+ }
141
+ };
142
+ var onHome = function (_target, _nav, ev) {
143
+ if (trackRef.current) {
144
+ if (currentEvent <= 1) {
145
+ return;
146
+ }
147
+ var firstChild = 1;
148
+ var translateUpdate = 0;
149
+ moveView(true, firstChild, 0, translateUpdate);
150
+ onPointClick(firstChild, ev);
151
+ }
152
+ };
153
+ var onEnd = function (_target, _nav, ev) {
154
+ if (trackRef.current) {
155
+ var lastChild = trackRef.current && trackRef.current.children.length - 1;
156
+ if (lastChild <= currentEvent) {
157
+ return;
158
+ }
159
+ var scrollViewsCount = Math.floor(lastChild / visibleTabs);
160
+ var translateUpdate = (scrollViewsCount) * -100;
161
+ var firstTabToUpdate = scrollViewsCount * visibleTabs;
162
+ moveView(true, lastChild, firstTabToUpdate, translateUpdate);
163
+ onPointClick(lastChild, ev);
164
+ }
165
+ };
79
166
  var setYearsFlags = function () {
80
167
  var trackData = (0, utils_1.addYearsFlags)(eventsData);
81
168
  setEventsOnTrack(trackData);
@@ -91,11 +178,7 @@ var TimelineHorizontal = function (props) {
91
178
  ? lastIndexInView - 1
92
179
  : lastIndexInView;
93
180
  var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
94
- updatePage(false, currentEventToUpdate);
95
- repositionEvents();
96
- setFirstIndexInView(firstTabToUpdate);
97
- setTranslate(translateUpdate);
98
- setCurrentEvent(currentEventToUpdate);
181
+ moveView(false, currentEventToUpdate, firstTabToUpdate, translateUpdate);
99
182
  }
100
183
  };
101
184
  var handleNextClick = function () {
@@ -106,13 +189,16 @@ var TimelineHorizontal = function (props) {
106
189
  ? firstTabToUpdate + 1
107
190
  : firstTabToUpdate;
108
191
  var translateUpdate = translate - 100;
109
- updatePage(true, currentEventToUpdate);
110
- repositionEvents();
111
- setFirstIndexInView(firstTabToUpdate);
112
- setTranslate(translateUpdate);
113
- setCurrentEvent(currentEventToUpdate);
192
+ moveView(true, currentEventToUpdate, firstTabToUpdate, translateUpdate);
114
193
  }
115
194
  };
195
+ var moveView = function (direction, eventToUpdate, firstTab, translateToUpdate) {
196
+ updatePage(direction, eventToUpdate);
197
+ repositionEvents();
198
+ setFirstIndexInView(firstTab);
199
+ setTranslate(translateToUpdate);
200
+ setCurrentEvent(eventToUpdate);
201
+ };
116
202
  var updatePage = function (forward, current) {
117
203
  var _a;
118
204
  if (eventsToShow && eventsOnTrack) {
@@ -184,7 +270,7 @@ var TimelineHorizontal = function (props) {
184
270
  transform: "translateX(".concat(translation, "%)"), transformOrigin: 'left top'
185
271
  }); };
186
272
  return (React.createElement(React.Fragment, null,
187
- React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef },
273
+ React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef, onKeyDown: handleKeyDown },
188
274
  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 }) },
189
275
  React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.caretAltLeftIcon })),
190
276
  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 }) },
package/dist/npm/timeline/TimelineVertical.js CHANGED
@@ -10,11 +10,50 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
10
10
  var TimelineVertical = function (props) {
11
11
  var intl = (0, kendo_react_intl_1.useInternationalization)();
12
12
  var _a = React.useState(), eventsList = _a[0], setEventsList = _a[1];
13
- var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, onChange = props.onChange, onActionClick = props.onActionClick;
13
+ 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;
14
+ var eventAxisRef = React.useRef(null);
15
+ var navigation = React.useRef(new kendo_react_common_1.Navigation({
16
+ tabIndex: 0,
17
+ root: eventAxisRef,
18
+ selectors: ['.k-card-vertical']
19
+ }));
20
+ React.useEffect(function () {
21
+ if (eventAxisRef.current) {
22
+ if (props.navigatable) {
23
+ setTimeout(function () {
24
+ var firstCell = navigation.current.first;
25
+ if (firstCell) {
26
+ firstCell.setAttribute('tabindex', String(0));
27
+ }
28
+ }, 0);
29
+ navigation.current.keyboardEvents = {
30
+ keydown: {
31
+ 'Space': onEnter,
32
+ 'Enter': onEnter
33
+ }
34
+ };
35
+ }
36
+ }
37
+ }, [props.navigatable]);
14
38
  React.useEffect(function () {
15
39
  setEventsList((0, utils_1.addYearsFlags)(eventsData));
16
40
  }, []);
17
- return (React.createElement("ul", null, eventsList && eventsList.map(function (event, index) {
41
+ React.useEffect(function () {
42
+ navigation.current.update();
43
+ });
44
+ var handleKeyDown = function (e) {
45
+ if (navigatable && navigation.current) {
46
+ navigation.current.triggerKeyboardEvent(e);
47
+ }
48
+ };
49
+ var onEnter = function (target, _nav, ev) {
50
+ ev.preventDefault();
51
+ var element = target.querySelector('.k-card-title .k-event-collapse');
52
+ if (element) {
53
+ element.click();
54
+ }
55
+ };
56
+ return (React.createElement("ul", { ref: eventAxisRef, onKeyDown: handleKeyDown }, eventsList && eventsList.map(function (event, index) {
18
57
  var cardId = (0, kendo_react_common_1.guid)();
19
58
  return (React.createElement(React.Fragment, { key: index }, event.yearFlag
20
59
  ? (React.createElement("li", { className: "k-timeline-flag-wrap" },
@@ -23,7 +62,7 @@ var TimelineVertical = function (props) {
23
62
  React.createElement("div", { className: "k-timeline-date-wrap" },
24
63
  React.createElement("span", { className: "k-timeline-date", id: cardId }, intl.formatDate(event.date, dateFormat))),
25
64
  React.createElement("a", { className: "k-timeline-circle" }),
26
- React.createElement(TimelineCard_1.TimelineCard, { id: cardId, tabindex: 0, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
65
+ 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 })))));
27
66
  })));
28
67
  };
29
68
  exports.TimelineVertical = TimelineVertical;