@progress/kendo-react-layout 5.15.0-dev.202307061400 → 5.15.0-dev.202307131533

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1688649586,
+    publishDate: 1689260358,
     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/timeline/Timeline.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { EventDataProps } from './TimelineCard';
 export interface TimelineEventProps {
+    /**
+     * Specifies if the event card is default collapsed.
+     */
+    opened?: boolean;
     /**
      * Specifies the text that is rendered as body of the event card.
      */
@@ -31,6 +35,10 @@ export interface TimelineEventProps {
         text: string;
         url: string;
     }[];
+    /**
+     * @Hidden
+     */
+    yearFlag?: number;
 }
 export interface TimelineProps {
     events: TimelineEventProps[];
@@ -54,6 +62,13 @@ export interface TimelineProps {
      * Render events alternatingly on both sides of the axis.
      */
     alterMode?: boolean;
+    /**
+     * Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
+     * The default value are:
+     * - `300ms` for horizontal
+     * - `400ms` for vertical
+     */
+    transitionDuration?: number;
     /**
      * An event that is called when event card is toggled.
      */
@@ -63,4 +78,13 @@ export interface TimelineProps {
      */
     onActionClick?: (event: EventDataProps) => void;
 }
+/**
+ * @hidden
+ */
+export interface TimelineDirectionsProps {
+    eventsData: TimelineEventProps[];
+    dateFormat?: string;
+    transitionDuration?: number;
+    onActionClick?: (event: EventDataProps) => void;
+}
 export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/dist/es/timeline/Timeline.js

@@ -1,36 +1,27 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { TimelineCard } from './TimelineCard';
 import { classNames } from '@progress/kendo-react-common';
-import { useInternationalization } from '@progress/kendo-react-intl';
+import { TimelineHorizontal } from './TimelineHorizontal';
+import { TimelineVertical } from './TimelineVertical';
 export var Timeline = function (props) {
-    var collapsibleEvents = props.collapsibleEvents, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
-    var intl = useInternationalization();
-    var yearPoint = undefined;
-    var setYearPoint = function (year) {
-        yearPoint = year;
-        return (React.createElement("li", { className: "k-timeline-flag-wrap" },
-            React.createElement("span", { className: "k-timeline-flag" }, year)));
-    };
-    var timelineVertical = function () { return (React.createElement("ul", null, events.map(function (eventData, index) {
-        return (React.createElement(React.Fragment, { key: index },
-            yearPoint !== eventData.date.getFullYear() && setYearPoint(eventData.date.getFullYear()),
-            React.createElement("li", { className: classNames('k-timeline-event', { 'k-reverse': index % 2 === 0 }) },
-                React.createElement("div", { className: "k-timeline-date-wrap" },
-                    React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(eventData.date, dateFormat))),
-                React.createElement("a", { className: "k-timeline-circle" }),
-                React.createElement(TimelineCard, { eventData: eventData, alternated: alterMode && index % 2 === 0, collapsible: collapsibleEvents, onChange: onChange, onActionClick: onActionClick }))));
-    }))); };
-    return (React.createElement("div", { className: classNames('k-timeline', 'k-timeline-collapsible', {
+    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 _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);
+    }, []);
+    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) }, timelineVertical()));
+        }, 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 })));
 };
 Timeline.defaultProps = {
     alterMode: false,
-    collapsibleEvents: false,
+    collapsibleEvents: true,
     dateFormat: 'MMM dd, yyyy'
 };
 Timeline.propTypes = {

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

@@ -4,9 +4,14 @@ import { TimelineEventProps } from './Timeline';
  * @hidden
  */
 interface TimelineCardProps {
+    tabindex?: number;
+    id?: string;
     eventData: TimelineEventProps;
     alternated?: boolean;
+    horizontal?: boolean;
     collapsible?: boolean;
+    calloutStyle?: React.CSSProperties;
+    transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;
     onActionClick?: (event: EventDataProps) => void;
 }

package/dist/es/timeline/TimelineCard.js

@@ -7,17 +7,16 @@ import { CardSubtitle } from '../card/CardSubtitle';
 import { CardBody } from '../card/CardBody';
 import { CardImage } from '../card/CardImage';
 import { CardActions } from '../card/CardActions';
-import { Button } from '@progress/kendo-react-buttons';
-import { classNames } from '@progress/kendo-react-common';
+import { SvgIcon, classNames } from '@progress/kendo-react-common';
 import { Reveal } from '@progress/kendo-react-animation';
 import { chevronRightIcon } from '@progress/kendo-svg-icons';
 export var TimelineCard = function (props) {
-    var animationDuration = 400;
+    var ANIMATION_DURATION = 400;
     var _a = props.eventData, title = _a.title, subtitle = _a.subtitle, actions = _a.actions, images = _a.images, description = _a.description;
-    var _b = React.useState(true), collapse = _b[0], setCollapse = _b[1];
-    var _c = React.useState(true), collapsed = _c[0], setCollapsed = _c[1];
+    var _b = React.useState(props.eventData.opened || false), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(props.eventData.opened || !!props.collapsible), opened = _c[0], setOpened = _c[1];
     var toggleCard = function (event) {
-        setCollapse(!collapse);
+        setOpen(!open);
         if (props.onChange) {
             var toggleEvent = {
                 syntheticEvent: event,
@@ -37,22 +36,24 @@ export var TimelineCard = function (props) {
             props.onActionClick.call(undefined, actionClickEvent);
         }
     };
-    var cardBody = function () { return (React.createElement(CardBody, null,
-        React.createElement("div", { className: "k-card-description" },
-            React.createElement("p", null, description),
-            images && images.map(function (image, index) { return (React.createElement(CardImage, { key: index, src: image.src })); })),
+    var cardBody = function () { return (React.createElement(React.Fragment, null,
+        React.createElement(CardBody, null,
+            React.createElement("div", { className: "k-card-description" },
+                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 && collapsed }) },
-        React.createElement(Card, { className: "k-card-with-callout" },
-            React.createElement("span", { className: classNames('k-timeline-card-callout', 'k-card-callout', { 'k-callout-e': props.alternated }, { 'k-callout-w': !props.alternated }) }),
-            React.createElement("div", { className: "k-card-inner" },
+    return (React.createElement("div", { 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' },
                 React.createElement(CardHeader, null,
                     React.createElement(CardTitle, null,
                         React.createElement("span", { className: "k-event-title" }, title),
-                        props.collapsible && React.createElement(Button, { fillMode: 'flat', icon: 'chevron-right', svgIcon: chevronRightIcon, onClick: function (event) { return toggleCard(event); }, className: 'k-event-collapse' })),
+                        props.collapsible && React.createElement("span", { onClick: function (event) { return toggleCard(event); }, className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button" },
+                            React.createElement(SvgIcon, { icon: chevronRightIcon }))),
                     subtitle && React.createElement(CardSubtitle, null, subtitle)),
-                props.collapsible ?
-                    React.createElement(Reveal, { transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, onBeforeEnter: function () { return setCollapsed(false); }, onAfterExited: function () { return setCollapsed(true); } }, !collapse ? cardBody() : null)
+                props.collapsible
+                    ? React.createElement(Reveal, { transitionEnterDuration: props.transitionDuration || ANIMATION_DURATION, transitionExitDuration: props.transitionDuration || ANIMATION_DURATION, onBeforeEnter: function () { return setOpened(false); }, onAfterExited: function () { return setOpened(true); } }, open ? cardBody() : null)
                     : cardBody()))));
 };
 TimelineCard.propTypes = {

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TimelineDirectionsProps } from './Timeline';
+export declare const TimelineHorizontal: React.FunctionComponent<TimelineDirectionsProps>;

package/dist/es/timeline/TimelineHorizontal.js

@@ -0,0 +1,205 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+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';
+export var TimelineHorizontal = function (props) {
+    var DEFAULT_EVENT_POINT_WITH = 150;
+    var EVENT_CARD_TRANSITION_DURATION = 300;
+    var intl = useInternationalization();
+    var _a = React.useState(false), arrowLeft = _a[0], setArrowLeft = _a[1];
+    var _b = React.useState(true), arrowRight = _b[0], setArrowRight = _b[1];
+    var _c = React.useState(), calloutOffset = _c[0], setCalloutOffset = _c[1];
+    var _d = React.useState(0), translate = _d[0], setTranslate = _d[1];
+    var _e = React.useState(), tabFlexWith = _e[0], setTabFlexWith = _e[1];
+    var _f = React.useState(0), visibleTabs = _f[0], setVisibleTabs = _f[1];
+    var _g = React.useState(0), firstIndexInView = _g[0], setFirstIndexInView = _g[1];
+    var _h = React.useState(1), currentEvent = _h[0], setCurrentEvent = _h[1];
+    var _j = React.useState(), eventsToShow = _j[0], setEventsToShow = _j[1];
+    var _k = React.useState(), eventsOnTrack = _k[0], setEventsOnTrack = _k[1];
+    var _l = React.useState([0, 0, 0]), eventsPositions = _l[0], setEventsPositions = _l[1];
+    var _m = React.useState(0), eventsTranslate = _m[0], setEventsTranslate = _m[1];
+    var _o = React.useState(1), pivotEvent = _o[0], setPivotEvent = _o[1];
+    var trackWrapRef = React.useRef(null);
+    var trackRef = React.useRef(null);
+    var arrowLeftRef = React.useRef(null);
+    var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
+    var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
+    React.useEffect(function () {
+        var _a;
+        var observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
+        var trackList = trackRef.current;
+        var cardWith = ((_a = trackWrapRef === null || trackWrapRef === void 0 ? void 0 : trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        if (observerResize && trackList) {
+            observerResize.observe(trackList);
+        }
+        setYearsFlags();
+        repositionEvents();
+        setEventsPositions([cardWith, 0, -cardWith]);
+        return function () {
+            observerResize.disconnect();
+        };
+    }, []);
+    React.useEffect(function () {
+        var trackList = trackRef.current;
+        var currentTab = trackList && trackList.children[currentEvent];
+        if (currentTab) {
+            var tabWidth = currentTab.offsetWidth;
+            var leftArrow = !(translate >= 0);
+            setArrowLeft(leftArrow);
+            if (eventsOnTrack) {
+                var rightArrow = eventsOnTrack.length * tabWidth > (visibleTabs * tabWidth) * (((translate * -1) + 100) / 100);
+                setArrowRight(rightArrow);
+            }
+            if (((trackList === null || trackList === void 0 ? void 0 : trackList.offsetWidth) * -translate) / 100 >= trackList.children.length * tabWidth) {
+                // TODO: on resize window reposition
+                setYearsFlags();
+                repositionEvents();
+                setTranslate((((currentTab.offsetLeft - currentTab.offsetWidth) / (visibleTabs * currentTab.offsetWidth)) * 100) * -1);
+            }
+            positionCallout(currentTab);
+        }
+    }, [visibleTabs, tabFlexWith, currentEvent]);
+    var setYearsFlags = function () {
+        var trackData = addYearsFlags(eventsData);
+        setEventsOnTrack(trackData);
+        setEventsToShow([trackData[currentEvent - 1], trackData[currentEvent], trackData[currentEvent + 1]]);
+    };
+    var handlePrevClick = function () {
+        var _a;
+        var trackList = trackRef.current;
+        if (trackList && eventsOnTrack) {
+            var firstTabToUpdate = firstIndexInView - visibleTabs;
+            var lastIndexInView = firstIndexInView - 1;
+            var currentEventToUpdate = eventsOnTrack[lastIndexInView] && ((_a = eventsOnTrack[lastIndexInView]) === null || _a === void 0 ? void 0 : _a.yearFlag)
+                ? lastIndexInView - 1
+                : lastIndexInView;
+            var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
+            updatePage(false, currentEventToUpdate);
+            repositionEvents();
+            setFirstIndexInView(firstTabToUpdate);
+            setTranslate(translateUpdate);
+            setCurrentEvent(currentEventToUpdate);
+        }
+    };
+    var handleNextClick = function () {
+        var trackList = trackRef.current;
+        if (trackList && eventsOnTrack) {
+            var firstTabToUpdate = firstIndexInView + visibleTabs;
+            var currentEventToUpdate = eventsOnTrack[firstTabToUpdate] && eventsOnTrack[firstTabToUpdate].yearFlag
+                ? firstTabToUpdate + 1
+                : firstTabToUpdate;
+            var translateUpdate = translate - 100;
+            updatePage(true, currentEventToUpdate);
+            repositionEvents();
+            setFirstIndexInView(firstTabToUpdate);
+            setTranslate(translateUpdate);
+            setCurrentEvent(currentEventToUpdate);
+        }
+    };
+    var updatePage = function (forward, current) {
+        var _a;
+        if (eventsToShow && eventsOnTrack) {
+            var pageToUpdateIndex_1 = getPivotIndex(forward, pivotEvent);
+            var eventCardsArray_1 = Object.assign([], eventsToShow, (_a = {}, _a[pageToUpdateIndex_1] = eventsOnTrack[current], _a));
+            setEventsToShow(eventCardsArray_1);
+            setPivotEvent(pageToUpdateIndex_1);
+            setEventsTranslate(forward ? -100 : 100);
+            setTimeout(function () {
+                var _a, _b;
+                var _c;
+                var cardWith = (_c = trackWrapRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+                var repositionArray = Object.assign([], eventsPositions, (_a = {},
+                    _a[pageToUpdateIndex_1] = 0,
+                    _a[getPivotIndex(true, pageToUpdateIndex_1)] = cardWith,
+                    _a[getPivotIndex(false, pageToUpdateIndex_1)] = cardWith && -cardWith,
+                    _a));
+                var clearEventsArray = Object.assign([], eventCardsArray_1, (_b = {},
+                    _b[getPivotIndex(true, pageToUpdateIndex_1)] = {},
+                    _b[getPivotIndex(false, pageToUpdateIndex_1)] = {},
+                    _b));
+                setEventsToShow(clearEventsArray);
+                setEventsPositions(repositionArray);
+                setEventsTranslate(0);
+            }, props.transitionDuration || EVENT_CARD_TRANSITION_DURATION);
+        }
+    };
+    var getPivotIndex = function (forward, index) {
+        var pageIndex = forward ? index + 1 : index - 1;
+        if (eventsToShow) {
+            var validIndex = pageIndex < 0
+                ? eventsToShow.length - 1
+                : pageIndex % eventsToShow.length;
+            return validIndex;
+        }
+        return 0;
+    };
+    var positionCallout = function (element) {
+        var _a;
+        var offsetToSet = ((currentEvent - firstIndexInView) * element.offsetWidth) +
+            (element.offsetWidth / 2) +
+            (((_a = arrowLeftRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+        setCalloutOffset(offsetToSet);
+    };
+    var onPointClick = function (index, event) {
+        event.preventDefault();
+        if (index > currentEvent) {
+            updatePage(true, index);
+        }
+        else if (index < currentEvent) {
+            updatePage(false, index);
+        }
+        setCurrentEvent(index);
+    };
+    var repositionEvents = React.useCallback(function () {
+        var trackList = trackRef.current;
+        var currentTab = trackList && trackList.children[currentEvent];
+        if (trackList instanceof HTMLElement && currentTab) {
+            var visibleTabsCount = Math.round(trackList.offsetWidth / DEFAULT_EVENT_POINT_WITH);
+            positionCallout(currentTab);
+            setTabFlexWith(100 / visibleTabsCount);
+            setVisibleTabs(visibleTabsCount);
+        }
+    }, []);
+    var eventCardAnimationStyle = function () { return ({
+        transitionDuration: "".concat(EVENT_CARD_TRANSITION_DURATION, "ms")
+    }); };
+    var eventCardReorderStyle = function (translation) { return ({
+        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("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 }) },
+                React.createElement(SvgIcon, { icon: caretAltRightIcon })),
+            React.createElement("div", { className: "k-timeline-track" },
+                React.createElement("ul", { ref: trackRef, className: "k-timeline-scrollable-wrap", role: "tablist", tabIndex: 0, style: { transform: "translateX(".concat(translate, "%)") } }, eventsOnTrack && eventsOnTrack.map(function (event, index) { return (event.yearFlag
+                    ? (React.createElement("li", { role: "none", className: "k-timeline-track-item k-timeline-flag-wrap", style: { flex: "1 0 ".concat(tabWith) }, key: index },
+                        React.createElement("span", { className: "k-timeline-flag" }, event.yearFlag)))
+                    : (React.createElement("li", { role: "tab", className: classNames('k-timeline-track-item', { 'k-focus': index === currentEvent }), "aria-selected": index === currentEvent, style: { flex: "1 0 ".concat(tabWith) }, key: index },
+                        React.createElement("div", { className: "k-timeline-date-wrap" },
+                            React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(event.date, dateFormat))),
+                        React.createElement("span", { onClick: function (e) { return onPointClick(index, e); }, className: "k-timeline-circle" })))); })))),
+        React.createElement("div", { className: "k-timeline-events-list" },
+            React.createElement("ul", { className: "k-timeline-scrollable-wrap", style: eventsTranslate === 0
+                    ? __assign({}, eventCardReorderStyle(eventsTranslate)) : __assign(__assign({}, eventCardReorderStyle(eventsTranslate)), eventCardAnimationStyle()) }, eventsToShow && eventsToShow.map(function (eventData, index) {
+                return (React.createElement("li", { key: index, className: "k-timeline-event", style: { transform: "translate3d(".concat(eventsPositions[index], "px, 0px, 0px)") } }, eventData && React.createElement(TimelineCard, { tabindex: eventsPositions[index] === 0 ? 0 : -1, eventData: eventData, onActionClick: onActionClick, horizontal: true, collapsible: false, calloutStyle: { left: "".concat(calloutOffset, "px") } })));
+            })))));
+};
+TimelineHorizontal.propTypes = {
+    onActionClick: PropTypes.func
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { EventDataProps } from './TimelineCard';
+import { TimelineDirectionsProps } from './Timeline';
+/**
+ * @hidden
+ */
+export interface TimelineVerticalProps extends TimelineDirectionsProps {
+    alterMode?: boolean;
+    collapsibleEvents?: boolean;
+    onChange?: (event: EventDataProps) => void;
+}
+export declare const TimelineVertical: React.FunctionComponent<TimelineVerticalProps>;

package/dist/es/timeline/TimelineVertical.js

@@ -0,0 +1,28 @@
+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 { 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;
+    React.useEffect(function () {
+        setEventsList(addYearsFlags(eventsData));
+    }, []);
+    return (React.createElement("ul", null, 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" },
+                React.createElement("span", { className: "k-timeline-flag" }, event.yearFlag)))
+            : (React.createElement("li", { className: classNames('k-timeline-event', { 'k-reverse': index % 2 !== 0 }) },
+                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 })))));
+    })));
+};
+TimelineVertical.propTypes = {
+    onActionClick: PropTypes.func
+};

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

@@ -3,3 +3,13 @@ import { TimelineEventProps } from './Timeline';
  * 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)[];

package/dist/es/timeline/utils.js

@@ -7,3 +7,20 @@ export var sortEventList = function (eventList) {
     });
     return sortedEvents;
 };
+/**
+ * @hidden
+ */
+export var addYearsFlags = function (eventsData) {
+    var yearFlag;
+    var trackData = eventsData.reduce(function (arr, eventData) {
+        if (yearFlag !== eventData.date.getFullYear()) {
+            yearFlag = eventData.date.getFullYear();
+            arr.push({ yearFlag: yearFlag }, eventData);
+        }
+        else {
+            arr.push(eventData);
+        }
+        return arr;
+    }, []);
+    return trackData;
+};

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1688649586,
+    publishDate: 1689260358,
     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/timeline/Timeline.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { EventDataProps } from './TimelineCard';
 export interface TimelineEventProps {
+    /**
+     * Specifies if the event card is default collapsed.
+     */
+    opened?: boolean;
     /**
      * Specifies the text that is rendered as body of the event card.
      */
@@ -31,6 +35,10 @@ export interface TimelineEventProps {
         text: string;
         url: string;
     }[];
+    /**
+     * @Hidden
+     */
+    yearFlag?: number;
 }
 export interface TimelineProps {
     events: TimelineEventProps[];
@@ -54,6 +62,13 @@ export interface TimelineProps {
      * Render events alternatingly on both sides of the axis.
      */
     alterMode?: boolean;
+    /**
+     * Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
+     * The default value are:
+     * - `300ms` for horizontal
+     * - `400ms` for vertical
+     */
+    transitionDuration?: number;
     /**
      * An event that is called when event card is toggled.
      */
@@ -63,4 +78,13 @@ export interface TimelineProps {
      */
     onActionClick?: (event: EventDataProps) => void;
 }
+/**
+ * @hidden
+ */
+export interface TimelineDirectionsProps {
+    eventsData: TimelineEventProps[];
+    dateFormat?: string;
+    transitionDuration?: number;
+    onActionClick?: (event: EventDataProps) => void;
+}
 export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/dist/npm/timeline/Timeline.js

@@ -3,38 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Timeline = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
-var TimelineCard_1 = require("./TimelineCard");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var TimelineHorizontal_1 = require("./TimelineHorizontal");
+var TimelineVertical_1 = require("./TimelineVertical");
 var Timeline = function (props) {
-    var collapsibleEvents = props.collapsibleEvents, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
-    var intl = (0, kendo_react_intl_1.useInternationalization)();
-    var yearPoint = undefined;
-    var setYearPoint = function (year) {
-        yearPoint = year;
-        return (React.createElement("li", { className: "k-timeline-flag-wrap" },
-            React.createElement("span", { className: "k-timeline-flag" }, year)));
-    };
-    var timelineVertical = function () { return (React.createElement("ul", null, events.map(function (eventData, index) {
-        return (React.createElement(React.Fragment, { key: index },
-            yearPoint !== eventData.date.getFullYear() && setYearPoint(eventData.date.getFullYear()),
-            React.createElement("li", { className: (0, kendo_react_common_1.classNames)('k-timeline-event', { 'k-reverse': index % 2 === 0 }) },
-                React.createElement("div", { className: "k-timeline-date-wrap" },
-                    React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(eventData.date, dateFormat))),
-                React.createElement("a", { className: "k-timeline-circle" }),
-                React.createElement(TimelineCard_1.TimelineCard, { eventData: eventData, alternated: alterMode && index % 2 === 0, collapsible: collapsibleEvents, onChange: onChange, onActionClick: onActionClick }))));
-    }))); };
-    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline', 'k-timeline-collapsible', {
+    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 _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);
+    }, []);
+    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) }, timelineVertical()));
+        }, 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 })));
 };
 exports.Timeline = Timeline;
 exports.Timeline.defaultProps = {
     alterMode: false,
-    collapsibleEvents: false,
+    collapsibleEvents: true,
     dateFormat: 'MMM dd, yyyy'
 };
 exports.Timeline.propTypes = {

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

@@ -4,9 +4,14 @@ import { TimelineEventProps } from './Timeline';
  * @hidden
  */
 interface TimelineCardProps {
+    tabindex?: number;
+    id?: string;
     eventData: TimelineEventProps;
     alternated?: boolean;
+    horizontal?: boolean;
     collapsible?: boolean;
+    calloutStyle?: React.CSSProperties;
+    transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;
     onActionClick?: (event: EventDataProps) => void;
 }