@progress/kendo-react-layout 6.1.1-dev.202311151536 → 7.0.0-develop.1

package/dist/npm/tilelayout/interfaces/main.d.ts

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

package/dist/npm/tilelayout/interfaces/main.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/timeline/Timeline.js

@@ -1,41 +0,0 @@
-"use strict";
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-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 combinedProps = __assign({ alterMode: false, collapsibleEvents: true, dateFormat: 'MMM dd, yyyy' }, props);
-    var collapsibleEvents = combinedProps.collapsibleEvents, transitionDuration = combinedProps.transitionDuration, className = combinedProps.className, alterMode = combinedProps.alterMode, navigatable = combinedProps.navigatable, horizontal = combinedProps.horizontal, events = combinedProps.events, dateFormat = combinedProps.dateFormat, onChange = combinedProps.onChange, onActionClick = combinedProps.onActionClick;
-    var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
-    var trackWrapRef = React.useRef(null);
-    React.useEffect(function () {
-        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, { 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.propTypes = {
-    className: PropTypes.string
-};

package/dist/npm/timeline/TimelineCard.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineCard = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var Card_1 = require("../card/Card");
-var CardHeader_1 = require("../card/CardHeader");
-var CardTitle_1 = require("../card/CardTitle");
-var CardSubtitle_1 = require("../card/CardSubtitle");
-var CardBody_1 = require("../card/CardBody");
-var CardImage_1 = require("../card/CardImage");
-var CardActions_1 = require("../card/CardActions");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_animation_1 = require("@progress/kendo-react-animation");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var TimelineCard = function (props) {
-    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(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) {
-        setOpen(!open);
-        if (props.onChange) {
-            var toggleEvent = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                eventData: props.eventData
-            };
-            props.onChange.call(undefined, toggleEvent);
-        }
-    };
-    var actionClick = function (event) {
-        if (props.onActionClick) {
-            var actionClickEvent = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                eventData: props.eventData
-            };
-            props.onActionClick.call(undefined, actionClickEvent);
-        }
-    };
-    var cardBody = function () { return (React.createElement(React.Fragment, null,
-        React.createElement(CardBody_1.CardBody, null,
-            React.createElement("div", { className: "k-card-description" },
-                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", { "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' },
-                React.createElement(CardHeader_1.CardHeader, null,
-                    React.createElement(CardTitle_1.CardTitle, null,
-                        React.createElement("span", { className: "k-event-title" }, title),
-                        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(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.chevronRightIcon }))),
-                    subtitle && React.createElement(CardSubtitle_1.CardSubtitle, null, subtitle)),
-                props.collapsible
-                    ? React.createElement(kendo_react_animation_1.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()))));
-};
-exports.TimelineCard = TimelineCard;
-exports.TimelineCard.propTypes = {
-    onChange: PropTypes.func,
-    onActionClick: PropTypes.func
-};

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

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

package/dist/npm/timeline/TimelineHorizontal.js

@@ -1,295 +0,0 @@
-"use strict";
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineHorizontal = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var TimelineCard_1 = require("./TimelineCard");
-var utils_1 = require("./utils");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var TimelineHorizontal = function (props) {
-    var DEFAULT_EVENT_POINT_WITH = 150;
-    var EVENT_CARD_TRANSITION_DURATION = 300;
-    var intl = (0, kendo_react_intl_1.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 eventsData = props.eventsData, dateFormat = props.dateFormat, navigatable = props.navigatable, onActionClick = props.onActionClick;
-    var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
-    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);
-        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 && 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 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);
-        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;
-            moveView(false, currentEventToUpdate, firstTabToUpdate, translateUpdate);
-        }
-    };
-    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;
-            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) {
-            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, 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 }) },
-                React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.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: (0, kendo_react_common_1.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_1.TimelineCard, { tabindex: eventsPositions[index] === 0 ? 0 : -1, eventData: eventData, onActionClick: onActionClick, horizontal: true, collapsible: false, calloutStyle: { left: "".concat(calloutOffset, "px") } })));
-            })))));
-};
-exports.TimelineHorizontal = TimelineHorizontal;
-exports.TimelineHorizontal.propTypes = {
-    onActionClick: PropTypes.func
-};

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

@@ -1,12 +0,0 @@
-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/npm/timeline/TimelineVertical.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineVertical = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var TimelineCard_1 = require("./TimelineCard");
-var utils_1 = require("./utils");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-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, 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));
-    }, []);
-    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();
-        }
-    };
-    var _alterIncreaser = 0;
-    return (React.createElement("ul", { ref: eventAxisRef, onKeyDown: handleKeyDown }, eventsList && eventsList.map(function (event, index) {
-        var cardId = (0, kendo_react_common_1.guid)();
-        var oddIndex = (index + _alterIncreaser) % 2 === 0;
-        if (event.yearFlag) {
-            _alterIncreaser += 1;
-        }
-        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: (0, kendo_react_common_1.classNames)('k-timeline-event', { 'k-reverse': oddIndex }) },
-                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: navigatable ? 0 : -1, eventData: event, alternated: alterMode && oddIndex, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
-    })));
-};
-exports.TimelineVertical = TimelineVertical;
-exports.TimelineVertical.propTypes = {
-    onActionClick: PropTypes.func
-};