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

package/dist/es/timeline/TimelineHorizontal.js

@@ -1,291 +0,0 @@
-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, Navigation } 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 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 Navigation({
-        tabIndex: 0,
-        root: trackWrapRef,
-        selectors: ['.k-timeline-scrollable-wrap']
-    }));
-    React.useEffect(function () {
-        if (trackWrapRef.current) {
-            if (props.navigatable) {
-                setTimeout(function () {
-                    var firstCell = navigation.current.first;
-                    if (firstCell) {
-                        firstCell.setAttribute('tabindex', String(0));
-                    }
-                }, 0);
-                navigation.current.keyboardEvents = {
-                    keydown: {
-                        'ArrowRight': onRight,
-                        'ArrowLeft': onLeft,
-                        'End': onEnd,
-                        'Home': onHome
-                    }
-                };
-            }
-        }
-    }, [props.navigatable, currentEvent, visibleTabs]);
-    React.useEffect(function () {
-        navigation.current.update();
-    });
-    var handleKeyDown = function (e) {
-        if (navigatable && navigation.current) {
-            navigation.current.triggerKeyboardEvent(e);
-        }
-    };
-    React.useEffect(function () {
-        var _a;
-        var observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
-        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 = 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: 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.js

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { TimelineCard } from './TimelineCard';
-import { addYearsFlags } from './utils';
-import { Navigation, classNames, guid } from '@progress/kendo-react-common';
-import { useInternationalization } from '@progress/kendo-react-intl';
-export var TimelineVertical = function (props) {
-    var intl = useInternationalization();
-    var _a = React.useState(), eventsList = _a[0], setEventsList = _a[1];
-    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, navigatable = props.navigatable, onChange = props.onChange, onActionClick = props.onActionClick;
-    var eventAxisRef = React.useRef(null);
-    var navigation = React.useRef(new Navigation({
-        tabIndex: 0,
-        root: eventAxisRef,
-        selectors: ['.k-card-vertical']
-    }));
-    React.useEffect(function () {
-        if (eventAxisRef.current) {
-            if (props.navigatable) {
-                setTimeout(function () {
-                    var firstCell = navigation.current.first;
-                    if (firstCell) {
-                        firstCell.setAttribute('tabindex', String(0));
-                    }
-                }, 0);
-                navigation.current.keyboardEvents = {
-                    keydown: {
-                        'Space': onEnter,
-                        'Enter': onEnter
-                    }
-                };
-            }
-        }
-    }, [props.navigatable]);
-    React.useEffect(function () {
-        setEventsList(addYearsFlags(eventsData));
-    }, []);
-    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 = 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: 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, { id: cardId, tabindex: navigatable ? 0 : -1, eventData: event, alternated: alterMode && oddIndex, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
-    })));
-};
-TimelineVertical.propTypes = {
-    onActionClick: PropTypes.func
-};

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

@@ -1,15 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/**
- * Sort the events list based on event date.
- */
-export var sortEventList = function (eventList) {
-    var sortedEvents = eventList.sort(function (a, b) {
-        return a.date.getTime() - b.date.getTime();
-    });
-    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/actionsheet/ActionSheet.js

@@ -1,270 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionSheet = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_animation_1 = require("@progress/kendo-react-animation");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var ActionSheetItem_1 = require("./ActionSheetItem");
-var ActionSheetHeader_1 = require("./ActionSheetHeader");
-var ActionSheetFooter_1 = require("./ActionSheetFooter");
-var ActionSheetContent_1 = require("./ActionSheetContent");
-/**
- * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
- */
-var ActionSheet = /** @class */ (function (_super) {
-    __extends(ActionSheet, _super);
-    /** @hidden */
-    function ActionSheet(props) {
-        var _this = _super.call(this, props) || this;
-        _this.actionSheetRef = React.createRef();
-        _this.actionSheetTitleClass = 'k-actionsheet-title';
-        _this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
-        _this.animationDuration = 300;
-        _this.bottomPosition = { bottom: '0', width: '100%' };
-        _this.handleKeyDown = function (e) {
-            if (_this.props.navigatable) {
-                _this.navigation.triggerKeyboardEvent(e);
-            }
-        };
-        _this.onTab = function (target, nav, ev) {
-            ev.preventDefault();
-            if (ev.shiftKey) {
-                nav.focusPrevious(target);
-            }
-            else {
-                nav.focusNext(target);
-            }
-        };
-        _this.handleOverlayClick = function (ev) {
-            /** Deprecated */
-            if (_this.props.onOverlayClick) {
-                _this.props.onOverlayClick.call(undefined, ev);
-            }
-            if (_this.props.onClose) {
-                _this.props.onClose.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.handleItemClick = function (ev) {
-            /** Deprecated */
-            if (_this.props.onItemClick) {
-                _this.props.onItemClick.call(undefined, ev);
-            }
-            if (_this.props.onItemSelect) {
-                _this.props.onItemSelect.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.onEnter = function (target, nav, ev) {
-            if (target.ariaDisabled) {
-                return;
-            }
-            var isItem = target.className && target.className.indexOf
-                ? target.className.indexOf('k-actionsheet-item') !== -1
-                : false;
-            var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
-            /** Deprecated */
-            if (isItem && _this.props.onItemClick) {
-                ev.preventDefault();
-                var item = _this.props.items[allItems.indexOf(target)];
-                _this.props.onItemClick.call(undefined, {
-                    syntheticEvent: ev,
-                    item: item,
-                    title: item && item.title
-                });
-            }
-            if (isItem && _this.props.onItemSelect) {
-                ev.preventDefault();
-                var item = _this.props.items[allItems.indexOf(target)];
-                _this.props.onItemSelect.call(undefined, {
-                    syntheticEvent: ev,
-                    item: item,
-                    title: item && item.title
-                });
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.onEscape = function (_target, _nav, ev) {
-            /** Deprecated */
-            if (_this.props.onOverlayClick) {
-                ev.preventDefault();
-                _this.props.onOverlayClick.call(undefined, ev);
-            }
-            if (_this.props.onClose) {
-                ev.preventDefault();
-                _this.props.onClose.call(undefined, ev);
-            }
-            if (!_this.props.animation) {
-                _this.hideActionSheet();
-            }
-        };
-        _this.hideActionSheet = function () {
-            _this.setState({ show: false });
-        };
-        _this.children = function (children) {
-            var components = {};
-            React.Children.forEach(children, function (child) {
-                if (child) {
-                    components[child.type.displayName] = child;
-                }
-                ;
-            });
-            return components;
-        };
-        _this.state = {
-            show: false,
-            slide: false
-        };
-        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    /** @hidden */
-    ActionSheet.prototype.componentDidMount = function () {
-        if (this.props.expand && !this.state.show) {
-            this.setState({ show: true });
-        }
-    };
-    /** @hidden */
-    ActionSheet.prototype.componentDidUpdate = function (_prevProps, prevState) {
-        var _this = this;
-        var currentRef = this.actionSheetRef.current;
-        if (this.props.expand && !this.state.show) {
-            this.setState({ show: true });
-        }
-        if (this.props.expand && this.state.show && !this.state.slide) {
-            this.setState({ slide: true });
-        }
-        if (!this.props.expand && this.state.show && this.state.slide) {
-            this.setState({ slide: false });
-        }
-        if (prevState !== this.state && this.state.slide && currentRef && !this.props.className) {
-            currentRef.style.setProperty('--kendo-actionsheet-height', 'auto');
-            currentRef.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
-        if (currentRef) {
-            if (this.props.navigatable) {
-                var innerElements = [
-                    '.k-actionsheet-footer',
-                    '.k-actionsheet-content',
-                    '.k-actionsheet-titlebar'
-                ].map(function (selector) {
-                    return kendo_react_common_1.FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
-                });
-                var selectors = __spreadArray([
-                    '.k-actionsheet-item'
-                ], innerElements.flat(), true);
-                this.navigation = new kendo_react_common_1.Navigation({
-                    tabIndex: this.props.tabIndex || 0,
-                    root: this.actionSheetRef,
-                    rovingTabIndex: false,
-                    selectors: selectors,
-                    keyboardEvents: {
-                        keydown: {
-                            'Tab': this.onTab,
-                            'Enter': this.onEnter,
-                            'Escape': this.onEscape
-                        }
-                    }
-                });
-                this.navigation.focusElement(this.navigation.first, null);
-            }
-        }
-    };
-    ;
-    /** @hidden */
-    ActionSheet.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
-        var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
-        var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
-        var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
-        var children = this.children(this.props.children);
-        var animationDuration = this.props.animationDuration || this.animationDuration;
-        var actionSheetPanel = this.state.slide && React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet', this.props.className, {
-                'k-actionsheet-bottom': !this.props.className
-            }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
-            (children[ActionSheetHeader_1.headerDisplayName] && !title && !subTitle) && children[ActionSheetHeader_1.headerDisplayName],
-            (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
-                React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
-                        title && React.createElement("div", null, title),
-                        subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
-            children[ActionSheetContent_1.contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
-                React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
-                })),
-                shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
-                React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
-                }))),
-            children[ActionSheetFooter_1.footerDisplayName]);
-        return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "k-actionsheet-container" },
-                React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
-                animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
-                    : actionSheetPanel)))
-            : null));
-    };
-    ;
-    /** @hidden */
-    ActionSheet.displayName = 'KendoReactActionSheet';
-    /** @hidden */
-    ActionSheet.propTypes = {
-        items: PropTypes.array,
-        subTitle: PropTypes.string,
-        title: PropTypes.string,
-        navigatable: PropTypes.bool,
-        navigatableElements: PropTypes.array
-    };
-    /** @hidden */
-    ActionSheet.defaultProps = {
-        navigatable: true,
-        navigatableElements: []
-    };
-    return ActionSheet;
-}(React.Component));
-exports.ActionSheet = ActionSheet;
-;