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

package/dist/npm/tabstrip/TabStrip.d.ts

@@ -1,147 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
-import { ButtonProps } from '@progress/kendo-react-buttons';
-/**
- * @hidden
- */
-export interface TabStripScrollableProps {
-    /**
-     * Determines whether the TabStrip will be scrollable.
-     *
-     * @default false
-     */
-    scrollable?: boolean;
-    /**
-     * Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
-     *
-     * @default 100
-     */
-    buttonScrollSpeed?: number;
-    /**
-     * Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. You can disable the mouse wheel scrolling by setting this prop to `0`.
-     *
-     * @default 10
-     */
-    mouseScrollSpeed?: number;
-    /**
-     * Defines the custom component that will be rendered as a previous button.
-     * To remove the button, set a function which returns null `() => null`.
-     */
-    prevButton?: React.ComponentType<ButtonProps>;
-    /**
-     * Defines the custom component that will be rendered as a next button.
-     * To remove the button, set a function which returns null `() => null`.
-     */
-    nextButton?: React.ComponentType<ButtonProps>;
-}
-/**
- * The arguments that are passed to the `onSelect` callback function of the TabStrip.
- */
-export interface TabStripSelectEventArguments {
-    /**
-     * The index of the selected TabStrip tab.
-     */
-    selected: number;
-}
-/**
- * Represents the props of the [KendoReact TabStrip component]({% slug overview_tabstrip %}).
- */
-export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
-    /**
-     * Enables the tab animation.
-     */
-    animation?: boolean;
-    /**
-     * Sets the index of the selected TabStripTab component ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
-     */
-    selected?: number;
-    /**
-     * @hidden
-     */
-    style?: any;
-    /**
-     * Sets the style of the TabStripContent component.
-     */
-    tabContentStyle?: any;
-    /**
-     * The position in which the TabStripNavigation components will be rendered.
-     *
-     * The available options are:
-     * - `"top"`&mdash;Renders the `TabStripNavigation` components to the top of the TabStrip.
-     * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
-     * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
-     * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
-     */
-    tabPosition?: string;
-    /**
-     * Sets the `tabIndex` of the TabStripNavigation.
-     */
-    tabIndex?: number;
-    /**
-     * Sets the direction of the TabStrip component.
-     */
-    dir?: string;
-    /**
-     * Specifies the CSS class names of the TabStrip component.
-     */
-    className?: string;
-    /**
-     * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
-     */
-    keepTabsMounted?: boolean;
-    /**
-     * Fires each time the user makes a selection.
-     */
-    onSelect?: (e: TabStripSelectEventArguments) => void;
-}
-export declare class TabStrip extends React.Component<TabStripProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        selected: PropTypes.Requireable<number>;
-        style: PropTypes.Requireable<object>;
-        tabContentStyle: PropTypes.Requireable<object>;
-        tabPosition: PropTypes.Requireable<string>;
-        tabIndex: PropTypes.Requireable<number>;
-        className: PropTypes.Requireable<string>;
-        dir: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        animation: boolean;
-        tabPosition: string;
-        keepTabsMounted: boolean;
-        buttonScrollSpeed: number;
-        mouseScrollSpeed: number;
-    };
-    private _element;
-    private showLicenseWatermark;
-    private keyBinding;
-    constructor(props: TabStripProps);
-    /**
-     * @hidden
-     */
-    onSelect: (index: any) => void;
-    /**
-     * @hidden
-     */
-    onKeyDown: (event: any) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    private renderContent;
-    private invertKeys;
-    private firstNavigatableTab;
-    private lastNavigatableTab;
-    private prevNavigatableTab;
-    private nextNavigatableTab;
-    private children;
-}

package/dist/npm/tabstrip/TabStrip.js

@@ -1,221 +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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabStrip = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var TabStripNavigation_1 = require("./TabStripNavigation");
-var TabStripContent_1 = require("./TabStripContent");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var TabStrip = /** @class */ (function (_super) {
-    __extends(TabStrip, _super);
-    function TabStrip(props) {
-        var _a;
-        var _this = _super.call(this, props) || this;
-        _this._element = null;
-        _this.showLicenseWatermark = false;
-        _this.keyBinding = (_a = {},
-            _a[kendo_react_common_1.Keys.left] = function () { return _this.prevNavigatableTab(); },
-            _a[kendo_react_common_1.Keys.right] = function () { return _this.nextNavigatableTab(); },
-            _a[kendo_react_common_1.Keys.down] = function () { return _this.nextNavigatableTab(); },
-            _a[kendo_react_common_1.Keys.up] = function () { return _this.prevNavigatableTab(); },
-            _a[kendo_react_common_1.Keys.home] = function () { return 0; },
-            _a[kendo_react_common_1.Keys.end] = function () { return (React.Children.count(_this.props.children) - 1); },
-            _a);
-        /**
-         * @hidden
-         */
-        _this.onSelect = function (index) {
-            if (_this.props.selected !== index) {
-                if (_this.props.onSelect) {
-                    _this.props.onSelect({
-                        selected: index
-                    });
-                }
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onKeyDown = function (event) {
-            var handler;
-            switch (event.keyCode) {
-                case kendo_react_common_1.Keys.left:
-                    handler = _this.keyBinding[_this.invertKeys(kendo_react_common_1.Keys.left, kendo_react_common_1.Keys.right)];
-                    break;
-                case kendo_react_common_1.Keys.right:
-                    handler = _this.keyBinding[_this.invertKeys(kendo_react_common_1.Keys.right, kendo_react_common_1.Keys.left)];
-                    break;
-                case kendo_react_common_1.Keys.up:
-                    handler = _this.keyBinding[kendo_react_common_1.Keys.up];
-                    break;
-                case kendo_react_common_1.Keys.down:
-                    handler = _this.keyBinding[kendo_react_common_1.Keys.down];
-                    break;
-                case kendo_react_common_1.Keys.home:
-                    handler = _this.keyBinding[kendo_react_common_1.Keys.home];
-                    break;
-                case kendo_react_common_1.Keys.end:
-                    handler = _this.keyBinding[kendo_react_common_1.Keys.end];
-                    break;
-                default:
-                    break;
-            }
-            if (handler) {
-                event.preventDefault();
-                _this.onSelect(handler());
-            }
-        };
-        _this.renderContent = function (tabProps) {
-            var selected = tabProps.selected, children = tabProps.children, tabContentStyle = tabProps.tabContentStyle;
-            var childrenCount = React.Children.count(children);
-            if (selected < childrenCount && selected > -1) {
-                return (React.createElement(TabStripContent_1.TabStripContent, __assign({ index: selected }, tabProps, { style: tabContentStyle })));
-            }
-            return null;
-        };
-        _this.firstNavigatableTab = function () {
-            var children = _this.children();
-            var length = React.Children.count(children);
-            if (children) {
-                for (var i = 0; i < length; i++) {
-                    if (!children[i].props.disabled) {
-                        return i;
-                    }
-                }
-            }
-        };
-        _this.lastNavigatableTab = function () {
-            var children = _this.children();
-            var length = React.Children.count(children);
-            if (children) {
-                for (var i = length - 1; i > 0; i--) {
-                    if (!children[i].props.disabled) {
-                        return i;
-                    }
-                }
-            }
-        };
-        _this.prevNavigatableTab = function () {
-            var children = _this.children();
-            var selected = _this.props.selected;
-            var index = selected ? selected - 1 : -1;
-            if (index < 0) {
-                return _this.lastNavigatableTab();
-            }
-            if (children) {
-                for (var i = index; i > -1; i--) {
-                    if (!children[i].props.disabled) {
-                        return i;
-                    }
-                    if (i === 0) {
-                        return _this.lastNavigatableTab();
-                    }
-                }
-            }
-        };
-        _this.nextNavigatableTab = function () {
-            var children = _this.children();
-            var selected = _this.props.selected;
-            var index = selected ? selected + 1 : 1;
-            var childrenCount = React.Children.count(children);
-            if (index >= childrenCount) {
-                return _this.firstNavigatableTab();
-            }
-            if (children) {
-                for (var i = index; i < childrenCount; i++) {
-                    if (!children[i].props.disabled) {
-                        return i;
-                    }
-                    if (i + 1 === childrenCount) {
-                        return _this.firstNavigatableTab();
-                    }
-                }
-            }
-        };
-        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-        _this.showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    TabStrip.prototype.render = function () {
-        var _this = this;
-        var tabProps = __assign(__assign({}, this.props), { children: this.children(), onKeyDown: this.onKeyDown, onSelect: this.onSelect });
-        var tabPosition = tabProps.tabPosition, _a = tabProps.tabIndex, tabIndex = _a === void 0 ? 0 : _a;
-        var bottom = tabPosition === 'bottom';
-        var componentClasses = (0, kendo_react_common_1.classNames)('k-tabstrip k-pos-relative', {
-            'k-tabstrip-left': tabPosition === 'left',
-            'k-tabstrip-right': tabPosition === 'right',
-            'k-tabstrip-bottom': tabPosition === 'bottom',
-            'k-tabstrip-top': tabPosition === 'top',
-            'k-tabstrip-scrollable': this.props.scrollable
-        }, this.props.className);
-        return (React.createElement("div", { id: this.props.id, ref: function (div) { return _this._element = div; }, dir: this.props.dir, className: componentClasses, style: this.props.style },
-            !bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
-            this.renderContent(tabProps),
-            bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
-            this.showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
-    };
-    TabStrip.prototype.invertKeys = function (original, inverted) {
-        var rtl = this._element && (getComputedStyle(this._element).direction === 'rtl') || false;
-        return rtl ? inverted : original;
-    };
-    TabStrip.prototype.children = function () {
-        return React.Children.toArray(this.props.children).filter(function (c) { return c; });
-    };
-    /**
-     * @hidden
-     */
-    TabStrip.propTypes = {
-        animation: PropTypes.bool,
-        children: PropTypes.node,
-        onSelect: PropTypes.func,
-        selected: PropTypes.number,
-        style: PropTypes.object,
-        tabContentStyle: PropTypes.object,
-        tabPosition: PropTypes.string,
-        tabIndex: PropTypes.number,
-        className: PropTypes.string,
-        dir: PropTypes.string
-    };
-    /**
-     * @hidden
-     */
-    TabStrip.defaultProps = {
-        animation: true,
-        tabPosition: 'top',
-        keepTabsMounted: false,
-        buttonScrollSpeed: 100,
-        mouseScrollSpeed: 10
-    };
-    return TabStrip;
-}(React.Component));
-exports.TabStrip = TabStrip;

package/dist/npm/tabstrip/TabStripContent.js

@@ -1,98 +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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabStripContent = 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 TabStripContent = /** @class */ (function (_super) {
-    __extends(TabStripContent, _super);
-    function TabStripContent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.contentId = (0, kendo_react_common_1.guid)();
-        _this.childFactory = function (child) {
-            return React.cloneElement(child, __assign(__assign({}, child.props), { in: child.props.children.props.id === String(_this.contentId + _this.props.selected) }));
-        };
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    TabStripContent.prototype.render = function () {
-        var _a = this.props, children = _a.children, selected = _a.selected;
-        var selectedTab = children && typeof selected === 'number' &&
-            React.Children.toArray(children)[selected];
-        var contentClasses = (0, kendo_react_common_1.classNames)('k-tabstrip-content', 'k-active', selectedTab && selectedTab.props.contentClassName);
-        return (React.createElement("div", { className: contentClasses, style: this.props.style }, this.renderContent(children)));
-    };
-    TabStripContent.prototype.renderContent = function (children) {
-        var _this = this;
-        return !this.props.keepTabsMounted
-            ? this.renderChild(React.Children.toArray(children)[this.props.selected], this.props.selected)
-            : React.Children.map(this.props.children, function (tab, idx) {
-                return _this.renderChild(tab, idx);
-            });
-    };
-    TabStripContent.prototype.renderChild = function (tab, idx) {
-        var visible = idx === this.props.selected;
-        var contentProps = {
-            'role': 'tabpanel',
-            'aria-expanded': true,
-            'aria-labelledby': idx.toString(),
-            'style': {
-                'display': visible ? undefined : 'none'
-            }
-        };
-        var animationStyle = {
-            position: 'initial',
-            display: visible ? undefined : 'none'
-        };
-        if (tab.props.disabled) {
-            return null;
-        }
-        return this.props.animation
-            ? (React.createElement(kendo_react_animation_1.Fade, { appear: true, exit: this.props.keepTabsMounted, style: animationStyle, childFactory: this.props.keepTabsMounted ? this.childFactory : undefined },
-                React.createElement("div", __assign({}, contentProps, { id: String(this.contentId + idx), key: idx }), tab.props.children)))
-            : (React.createElement("div", __assign({}, contentProps, { key: idx }), tab.props.children));
-    };
-    /**
-     * @hidden
-     */
-    TabStripContent.propTypes = {
-        animation: PropTypes.bool,
-        children: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.arrayOf(PropTypes.element)
-        ]),
-        selected: PropTypes.number,
-        style: PropTypes.object
-    };
-    return TabStripContent;
-}(React.Component));
-exports.TabStripContent = TabStripContent;

package/dist/npm/tabstrip/TabStripNavigation.d.ts

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ButtonProps } from '@progress/kendo-react-buttons';
-/**
- * @hidden
- */
-export interface TabStripNavigationStateProps {
-    disabledPrev: boolean;
-    disabledNext: boolean;
-}
-/**
- * The props that are passed to the TabStripNavigation by the TabStrip.
- */
-export interface TabStripNavigationProps {
-    /**
-     * Sets the index of the selected tab. Controlled by the TabStrip component.
-     */
-    selected?: number;
-    /**
-     * @hidden
-     */
-    tabIndex?: number;
-    /**
-     * @hidden
-     */
-    onKeyDown?: any;
-    /**
-     * @hidden
-     */
-    tabPosition?: string;
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * @hidden
-     */
-    onSelect?(idx: number): void;
-    /**
-     * @hidden
-     */
-    scrollable?: boolean;
-    /**
-     * @hidden
-     */
-    buttonScrollSpeed?: number;
-    /**
-     * @hidden
-     */
-    mouseScrollSpeed?: number;
-    /**
-     * @hidden
-     */
-    prevButton?: React.ComponentType<ButtonProps>;
-    /**
-     * @hidden
-     */
-    nextButton?: React.ComponentType<ButtonProps>;
-    /**
-     * @hidden
-     */
-    dir?: 'ltr' | 'rtl';
-}
-export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        selected: PropTypes.Requireable<number>;
-        tabIndex: PropTypes.Requireable<number>;
-    };
-    private itemsNavRef;
-    constructor(props: TabStripNavigationProps);
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    private scrollToSelected;
-    private horizontalScroll;
-    private isRtl;
-    private onWheel;
-    private arrowClickPrev;
-    private arrowClickNext;
-    private handleArrowClick;
-    private setNewScrollPosition;
-    private renderArrow;
-}