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

package/dist/es/tabstrip/TabStripNavigation.js

@@ -1,257 +0,0 @@
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { TabStripNavigationItem } from './TabStripNavigationItem';
-import { classNames } from '@progress/kendo-react-common';
-import { Button } from '@progress/kendo-react-buttons';
-import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var times = function (count) { return Array.apply(null, Array(count)); };
-var preventDefault = function (e) { return e.preventDefault(); };
-var DEFAULT_SCROLL_BEHAVIOR = 'smooth';
-var PREV = 'prev';
-var NEXT = 'next';
-var TabStripNavigation = /** @class */ (function (_super) {
-    __extends(TabStripNavigation, _super);
-    function TabStripNavigation(props) {
-        var _this = _super.call(this, props) || this;
-        _this.itemsNavRef = React.createRef();
-        _this.isRtl = function () { return _this.props.dir === 'rtl'; };
-        _this.onWheel = function (e) {
-            e.stopPropagation();
-            var direction = e.deltaY < 0 ? PREV : NEXT;
-            _this.setNewScrollPosition(direction, e);
-        };
-        _this.arrowClickPrev = function (e) {
-            _this.handleArrowClick(PREV, e);
-        };
-        _this.arrowClickNext = function (e) {
-            _this.handleArrowClick(NEXT, e);
-        };
-        _this.handleArrowClick = function (direction, e) {
-            _this.setNewScrollPosition(direction, e);
-        };
-        _this.setNewScrollPosition = function (direction, e) {
-            var list = _this.itemsNavRef.current;
-            if (!list) {
-                return;
-            }
-            var horizontal = _this.horizontalScroll();
-            var scrollEnd = horizontal ? list.scrollWidth - list.offsetWidth : list.scrollHeight - list.offsetHeight;
-            var increment = (e.type === 'click' ? _this.props.buttonScrollSpeed : _this.props.mouseScrollSpeed) || 0;
-            var scrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
-            var nextScrollPosition = horizontal ? list.scrollWidth - list.scrollLeft : list.scrollHeight - list.scrollTop;
-            var nextScrollPositionRtl = list.scrollWidth - (list.scrollLeft * -1);
-            if (_this.isRtl() && _this.horizontalScroll()) {
-                if (direction === PREV && scrollPosition < 0) {
-                    scrollPosition += increment;
-                    nextScrollPositionRtl += increment;
-                }
-                if (direction === NEXT && scrollPosition < scrollEnd) {
-                    scrollPosition -= increment;
-                    nextScrollPositionRtl -= increment;
-                }
-                scrollPosition = Math.min(0, Math.min(scrollEnd, scrollPosition));
-            }
-            else {
-                if (direction === PREV && scrollPosition > 0) {
-                    scrollPosition -= increment;
-                    nextScrollPosition += increment;
-                }
-                if (direction === NEXT && scrollPosition < scrollEnd) {
-                    scrollPosition += increment;
-                    nextScrollPosition -= increment;
-                }
-                scrollPosition = Math.max(0, Math.min(scrollEnd, scrollPosition));
-            }
-            var calculatePrev = scrollPosition === 0;
-            var scrollBehavior = e.type === 'click' ? DEFAULT_SCROLL_BEHAVIOR : undefined;
-            if (horizontal) {
-                var calculateNext = _this.isRtl()
-                    ? Math.round(nextScrollPositionRtl) <= list.clientWidth
-                        || Math.floor(nextScrollPositionRtl) <= list.clientWidth
-                    : Math.round(nextScrollPosition) <= list.clientWidth
-                        || Math.floor(nextScrollPosition) <= list.clientWidth;
-                _this.setState({
-                    disabledPrev: calculatePrev,
-                    disabledNext: calculateNext
-                });
-                list.scrollTo({ left: scrollPosition, behavior: scrollBehavior });
-            }
-            else {
-                _this.setState({
-                    disabledPrev: calculatePrev,
-                    disabledNext: Math.round(nextScrollPosition) <= list.clientHeight
-                        || Math.floor(nextScrollPosition) <= list.clientHeight
-                });
-                list.scrollTo({ top: scrollPosition, behavior: scrollBehavior });
-            }
-        };
-        _this.renderArrow = function (type, disabled) {
-            var horizontal = _this.horizontalScroll();
-            var directions = {
-                prev: {
-                    arrowTab: 'k-tabstrip-prev',
-                    fontIcon: horizontal ?
-                        _this.isRtl() ? 'caret-alt-right' : 'caret-alt-left'
-                        : 'caret-alt-up',
-                    svgIcon: horizontal ?
-                        _this.isRtl() ? caretAltRightIcon : caretAltLeftIcon
-                        : caretAltUpIcon
-                },
-                next: {
-                    arrowTab: 'k-tabstrip-next',
-                    fontIcon: horizontal ?
-                        _this.isRtl() ? 'caret-alt-left' : 'caret-alt-right'
-                        : 'caret-alt-down',
-                    svgIcon: horizontal ?
-                        _this.isRtl() ? caretAltLeftIcon : caretAltRightIcon
-                        : caretAltDownIcon
-                }
-            };
-            var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || Button;
-            var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
-            return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].fontIcon, svgIcon: directions[type].svgIcon, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
-        };
-        _this.state = {
-            disabledPrev: _this.props.selected === 0,
-            disabledNext: _this.props.selected === React.Children.count(_this.props.children) - 1
-        };
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    TabStripNavigation.prototype.componentDidMount = function () {
-        if (this.props.scrollable) {
-            this.scrollToSelected();
-        }
-    };
-    /**
-     * @hidden
-     */
-    TabStripNavigation.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, scrollable = _a.scrollable, selected = _a.selected;
-        if (scrollable && prevProps.selected !== selected) {
-            this.scrollToSelected();
-            this.setState({
-                disabledPrev: selected === 0,
-                disabledNext: selected === React.Children.count(this.props.children) - 1
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    TabStripNavigation.prototype.render = function () {
-        var _a = this.props, selected = _a.selected, tabPosition = _a.tabPosition, children = _a.children, onSelect = _a.onSelect, onKeyDown = _a.onKeyDown;
-        var tabsCount = React.Children.count(children);
-        var childElements = React.Children.toArray(children);
-        var tabs;
-        if (children) {
-            tabs = times(tabsCount).map(function (_, index, array) {
-                var tabProps = {
-                    active: selected === index,
-                    disabled: childElements[index].props.disabled,
-                    index: index,
-                    title: childElements[index].props.title,
-                    first: index === 0,
-                    last: index === array.length - 1,
-                    onSelect: onSelect
-                };
-                return React.createElement(TabStripNavigationItem, __assign({ key: index }, tabProps));
-            });
-        }
-        var wrapperClasses = classNames('k-tabstrip-items-wrapper', {
-            'k-hstack': tabPosition === 'top' || tabPosition === 'bottom',
-            'k-vstack': tabPosition === 'left' || tabPosition === 'right'
-        });
-        var navClasses = classNames('k-tabstrip-items', 'k-reset');
-        return (React.createElement("div", { className: wrapperClasses }, this.props.scrollable ? (React.createElement(React.Fragment, null,
-            this.renderArrow(PREV, this.state.disabledPrev),
-            React.createElement("ul", { ref: this.itemsNavRef, className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown, onWheel: this.onWheel }, tabs),
-            this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
-    };
-    TabStripNavigation.prototype.scrollToSelected = function () {
-        var _a, _b, _c, _d;
-        var list = this.itemsNavRef.current;
-        var tab = list && list.children[this.props.selected || 0];
-        if (tab instanceof HTMLElement && list instanceof HTMLElement) {
-            var horizontal = this.horizontalScroll();
-            var listSize = horizontal ? list.offsetWidth : list.offsetHeight;
-            var tabSize = horizontal ? tab.offsetWidth : tab.offsetHeight;
-            var scrollDir = horizontal ? 'left' : 'top';
-            var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
-            var scrollPosition = 0;
-            if (this.isRtl()) {
-                var tabOffset = tab.offsetLeft;
-                currentScrollOffset = currentScrollOffset * -1;
-                if (tabOffset < 0) {
-                    scrollPosition = tabOffset - tabSize + list.offsetLeft;
-                    list.scrollTo((_a = {}, _a[scrollDir] = scrollPosition, _a.behavior = DEFAULT_SCROLL_BEHAVIOR, _a));
-                }
-                else if (tabOffset + tabSize > listSize - currentScrollOffset) {
-                    scrollPosition = currentScrollOffset + tabOffset - tabSize;
-                    list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
-                }
-            }
-            else {
-                var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
-                if (currentScrollOffset + listSize < tabOffset + tabSize) {
-                    scrollPosition = tabOffset + tabSize - listSize;
-                    list.scrollTo((_c = {}, _c[scrollDir] = scrollPosition, _c.behavior = DEFAULT_SCROLL_BEHAVIOR, _c));
-                }
-                else if (currentScrollOffset > tabOffset) {
-                    scrollPosition = tabOffset;
-                    list.scrollTo((_d = {}, _d[scrollDir] = scrollPosition, _d.behavior = DEFAULT_SCROLL_BEHAVIOR, _d));
-                }
-            }
-        }
-    };
-    TabStripNavigation.prototype.horizontalScroll = function () {
-        return /top|bottom/.test(this.props.tabPosition || 'top');
-    };
-    ;
-    /**
-     * @hidden
-     */
-    TabStripNavigation.propTypes = {
-        children: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.arrayOf(PropTypes.element)
-        ]),
-        onSelect: PropTypes.func,
-        onKeyDown: PropTypes.func,
-        selected: PropTypes.number,
-        tabIndex: PropTypes.number
-    };
-    return TabStripNavigation;
-}(React.Component));
-export { TabStripNavigation };

package/dist/es/tabstrip/TabStripNavigationItem.d.ts

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-/**
- * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
- */
-export interface TabStripNavigationItemProps {
-    /**
-     * Sets the `id` property of the top element of the TabStripNavigationItem.
-     */
-    id?: string;
-    /**
-     * Defines whether the current TabStripNavigationItem is selected.
-     */
-    active?: boolean;
-    /**
-     * Defines whether the TabStripNavigationItem is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Sets the index of the TabStripNavigationItem that is used to identify it.
-     */
-    index: number;
-    /**
-     * Sets the title of the TabStripNavigationItem.
-     */
-    title?: React.ReactNode;
-    /**
-     * @hidden
-     */
-    first?: boolean;
-    /**
-     * @hidden
-     */
-    last?: boolean;
-    /**
-     * @hidden
-     */
-    onSelect?(idx: number): void;
-}
-export declare class TabStripNavigationItem extends React.Component<TabStripNavigationItemProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        active: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        index: PropTypes.Requireable<number>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
-        first: PropTypes.Requireable<boolean>;
-        last: PropTypes.Requireable<boolean>;
-    };
-    /**
-     * @hidden
-     */
-    private itemRef;
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    blur: () => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    private onClick;
-}

package/dist/es/tabstrip/TabStripNavigationItem.js

@@ -1,106 +0,0 @@
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-var TabStripNavigationItem = /** @class */ (function (_super) {
-    __extends(TabStripNavigationItem, _super);
-    function TabStripNavigationItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * @hidden
-         */
-        _this.itemRef = null;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this.itemRef) {
-                _this.itemRef.tabIndex = 0;
-                _this.itemRef.focus();
-            }
-        };
-        _this.blur = function () {
-            if (_this.itemRef) {
-                _this.itemRef.tabIndex = -1;
-                _this.itemRef.blur();
-            }
-        };
-        _this.onClick = function () {
-            if (_this.props.onSelect) {
-                _this.props.onSelect(_this.props.index);
-            }
-            if (_this.itemRef) {
-                _this.itemRef.tabIndex = 0;
-                _this.itemRef.focus();
-            }
-        };
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    TabStripNavigationItem.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
-        var props = {
-            'id': id,
-            'aria-selected': active,
-            'aria-controls': id,
-            'aria-disabled': disabled,
-            'aria-hidden': disabled,
-            'role': 'tab',
-            onClick: !disabled ? this.onClick : undefined
-        };
-        var itemClasses = classNames('k-item', (_a = {},
-            _a['k-first'] = first,
-            _a['k-last'] = last,
-            _a['k-disabled'] = disabled,
-            _a['k-active'] = active,
-            _a));
-        return (React.createElement("li", __assign({}, props, { className: itemClasses, ref: function (el) { return _this.itemRef = el; }, onBlur: this.blur }),
-            React.createElement("span", { className: "k-link" }, title)));
-    };
-    /**
-     * @hidden
-     */
-    TabStripNavigationItem.propTypes = {
-        active: PropTypes.bool,
-        disabled: PropTypes.bool,
-        index: PropTypes.number,
-        onSelect: PropTypes.func,
-        title: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element
-        ]),
-        first: PropTypes.bool,
-        last: PropTypes.bool
-    };
-    return TabStripNavigationItem;
-}(React.Component));
-export { TabStripNavigationItem };

package/dist/es/tabstrip/TabStripTab.js

@@ -1,47 +0,0 @@
-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 __());
-    };
-})();
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-var TabStripTab = /** @class */ (function (_super) {
-    __extends(TabStripTab, _super);
-    function TabStripTab() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @hidden
-     */
-    TabStripTab.prototype.render = function () {
-        return null;
-    };
-    /**
-     * @hidden
-     */
-    TabStripTab.propTypes = {
-        disabled: PropTypes.bool,
-        contentClassName: PropTypes.string,
-        children: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.node
-        ]),
-        title: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element,
-            PropTypes.node
-        ])
-    };
-    return TabStripTab;
-}(React.Component));
-export { TabStripTab };