@progress/kendo-react-buttons 6.1.1 → 7.0.0-develop.2

package/dist/npm/ListButton/DropDownButton.js

@@ -1,328 +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.DropDownButton = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var main_1 = require("./../main");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var navigation_1 = require("./utils/navigation");
-var DropDownButtonItem_1 = require("./DropDownButtonItem");
-var ButtonItem_1 = require("./ButtonItem");
-var kendo_react_popup_1 = require("@progress/kendo-react-popup");
-var popup_1 = require("./utils/popup");
-var kendo_react_common_3 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-/**
- * Represents the [KendoReact DropDownButton component]({% slug overview_dropdownbutton %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    render() {
- *        return (
- *            <DropDownButton text="Act">
- *                <DropDownButtonItem text="Item1" />
- *                <DropDownButtonItem text="Item2" />
- *                <DropDownButtonItem text="Item3" />
- *            </DropDownButton>
- *        );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var DropDownButton = /** @class */ (function (_super) {
-    __extends(DropDownButton, _super);
-    function DropDownButton(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {
-            opened: false,
-            focused: false,
-            focusedIndex: -1
-        };
-        _this.wrapper = null;
-        _this.mainButton = null;
-        _this.list = null;
-        _this.skipFocus = false;
-        _this.guid = (0, kendo_react_common_1.guid)();
-        _this.buttonsData = [];
-        _this.onKeyDown = function (event) {
-            var focusedIndex = _this.state.focusedIndex;
-            if (event.altKey) {
-                if (!_this.opened && event.keyCode === kendo_react_common_1.Keys.down) {
-                    _this.setOpen(true);
-                    _this.dispatchPopupEvent(event, true);
-                    _this.setState({ focusedIndex: 0 });
-                }
-                else if (_this.opened && event.keyCode === kendo_react_common_1.Keys.up) {
-                    _this.setState({ focusedIndex: -1 });
-                    _this.setOpen(false);
-                }
-                return;
-            }
-            var newState = __assign({}, _this.state);
-            if (event.keyCode === kendo_react_common_1.Keys.enter || event.keyCode === kendo_react_common_1.Keys.space) {
-                if (focusedIndex >= 0) {
-                    _this.dispatchClickEvent(event, focusedIndex);
-                }
-                // Prevent default because otherwise when an item is selected
-                // click on the default button gets emitted which opens the popup again.
-                event.preventDefault();
-                var notOpened = !_this.opened;
-                _this.setOpen(notOpened);
-                if (notOpened) {
-                    _this.dispatchPopupEvent(event, true);
-                    _this.setState({ focusedIndex: _this.opened ? -1 : 0 });
-                }
-                return;
-            }
-            else if (_this.opened && event.keyCode === kendo_react_common_1.Keys.esc) {
-                _this.setState({ focusedIndex: -1 });
-                _this.setOpen(false);
-                return;
-            }
-            if (_this.opened) {
-                var newFocused = (0, navigation_1.navigate)(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
-                newState.focusedIndex = newFocused;
-                var arrowKey = event.keyCode === kendo_react_common_1.Keys.up || event.keyCode === kendo_react_common_1.Keys.down ||
-                    event.keyCode === kendo_react_common_1.Keys.left || event.keyCode === kendo_react_common_1.Keys.right;
-                if (!event.altKey && (arrowKey || event.keyCode === kendo_react_common_1.Keys.home || event.keyCode === kendo_react_common_1.Keys.end)) {
-                    // Needed to notify the parent listeners that event is handled.
-                    event.preventDefault();
-                }
-            }
-            _this.setState(newState);
-        };
-        _this.switchFocus = function (focusFn) {
-            _this.skipFocus = true;
-            focusFn();
-            window.setTimeout(function () { return _this.skipFocus = false; }, 0);
-        };
-        _this.handleFocus = function (event) {
-            if (_this.skipFocus) {
-                return;
-            }
-            _this.setState({ focused: true, focusedIndex: _this.opened ? 0 : -1 });
-            (0, kendo_react_common_2.dispatchEvent)(_this.props.onFocus, event, _this, undefined);
-        };
-        _this.handleBlur = function (event) {
-            if (_this.skipFocus) {
-                return;
-            }
-            _this.setState({ focused: false, focusedIndex: -1 });
-            _this.setOpen(false);
-            (0, kendo_react_common_2.dispatchEvent)(_this.props.onBlur, event, _this, undefined);
-        };
-        _this.setOpen = function (value) {
-            _this.openedDuringOnChange = value;
-            _this.setState({ opened: value });
-        };
-        _this.onItemClick = function (event, clickedItemIndex) {
-            _this.setState({ focusedIndex: -1 });
-            _this.setOpen(false);
-            _this.dispatchClickEvent(event, clickedItemIndex);
-        };
-        _this.onItemDown = function (event) {
-            var activeElement = (0, kendo_react_common_1.getActiveElement)(document);
-            if (activeElement === _this.list) {
-                event.preventDefault();
-            }
-        };
-        _this.mouseDown = function (event) {
-            event.preventDefault();
-            var activeElement = (0, kendo_react_common_1.getActiveElement)(document);
-            if (_this.element && activeElement !== _this.element && activeElement !== _this.list) {
-                _this.element.focus();
-            }
-        };
-        _this.onPopupClose = function () {
-            if (_this.state.focused) {
-                _this.switchFocus(function () {
-                    if (_this.element) {
-                        _this.element.removeAttribute('tabindex');
-                        _this.element.focus({ preventScroll: true });
-                    }
-                });
-            }
-            _this.dispatchPopupEvent({}, false);
-        };
-        _this.listRef = function (list) {
-            _this.list = list;
-            if (list && _this.state.focused) {
-                _this.switchFocus(function () {
-                    list.focus({ preventScroll: true });
-                    if (_this.element) {
-                        _this.element.tabIndex = -1;
-                    }
-                });
-            }
-        };
-        _this.onClickMainButton = function (event) {
-            if (!_this.buttonsData.length) {
-                return;
-            }
-            var toOpen = !_this.opened;
-            _this.setState({
-                focused: true,
-                focusedIndex: toOpen ? 0 : -1
-            });
-            _this.setOpen(toOpen);
-            if (toOpen) {
-                _this.dispatchPopupEvent(event, toOpen);
-            }
-        };
-        _this.dispatchPopupEvent = function (dispatchedEvent, open) {
-            (0, kendo_react_common_2.dispatchEvent)(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
-            _this.openedDuringOnChange = undefined;
-        };
-        (0, kendo_react_common_3.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(DropDownButton.prototype, "opened", {
-        get: function () {
-            return this.openedDuringOnChange !== undefined
-                ? this.openedDuringOnChange
-                : this.props.opened === undefined
-                    ? this.state.opened
-                    : this.props.opened;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    DropDownButton.prototype.render = function () {
-        var _this = this;
-        var rtl = this.isRtl();
-        var dir = rtl ? 'rtl' : undefined;
-        var _a = this.props, id = _a.id, style = _a.style, tabIndex = _a.tabIndex, disabled = _a.disabled;
-        this.buttonsData = this.props.items ||
-            React.Children.toArray(this.props.children)
-                .filter(function (child) { return child && child.type === DropDownButtonItem_1.DropDownButtonItem; })
-                .map(function (child) { return child.props; });
-        return (React.createElement("div", { id: id, style: style, className: (0, kendo_react_common_1.classNames)('k-dropdown-button', {
-                'k-focus': this.state.focused
-            }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(main_1.Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, svgIcon: this.props.svgIcon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
-            this.renderPopup(rtl)));
-    };
-    /**
-     * @hidden
-     */
-    DropDownButton.prototype.componentDidMount = function () {
-        // If this.props.opened is true during the initial render, the popup is not aligned.
-        if ((this.props.dir === undefined && this.isRtl()) || this.opened) {
-            this.forceUpdate();
-        }
-    };
-    Object.defineProperty(DropDownButton.prototype, "element", {
-        /**
-         * The DOM element of main button.
-         */
-        get: function () {
-            return this.mainButton;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DropDownButton.prototype.dispatchClickEvent = function (dispatchedEvent, index) {
-        if (!this.isItemDisabled(index)) {
-            (0, kendo_react_common_2.dispatchEvent)(this.props.onItemClick, dispatchedEvent, this, {
-                item: this.buttonsData[index],
-                itemIndex: index
-            });
-        }
-    };
-    DropDownButton.prototype.renderPopup = function (rtl) {
-        var _a;
-        var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
-        var focusedIndex = this.state.focusedIndex;
-        return (React.createElement(kendo_react_popup_1.Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: (0, kendo_react_common_1.classNames)('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || (0, popup_1.getAnchorAlign)(rtl), popupAlign: popupSettings.popupAlign || (0, popup_1.getPopupAlign)(rtl), style: rtl ? { direction: 'rtl' } : undefined, onClose: this.onPopupClose },
-            React.createElement("ul", { role: "menu", id: this.guid, "aria-labelledby": 'button-' + this.guid, tabIndex: -1, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, ref: this.listRef, className: (0, kendo_react_common_1.classNames)('k-group k-menu-group k-reset', (_a = {},
-                    _a["k-menu-group-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                    _a)) }, this.renderChildItems())));
-    };
-    DropDownButton.prototype.renderChildItems = function () {
-        var _this = this;
-        var _a = this.props, item = _a.item, itemRender = _a.itemRender, textField = _a.textField;
-        return this.buttonsData.length > 0 ? (this.buttonsData.map(function (dataItem, index) {
-            return (React.createElement(ButtonItem_1.ButtonItem, { className: "k-menu-item", dataItem: dataItem, textField: textField, focused: _this.state.focusedIndex === index, onClick: _this.onItemClick, onDown: _this.onItemDown, render: itemRender, item: item, index: index, key: index, id: "".concat(_this.guid, "-").concat(index) }));
-        })) : null;
-    };
-    DropDownButton.prototype.isItemDisabled = function (index) {
-        return this.buttonsData[index] ? this.buttonsData[index].disabled : this.props.disabled;
-    };
-    DropDownButton.prototype.isRtl = function () {
-        return this.props.dir !== undefined ? this.props.dir === 'rtl' :
-            !!this.wrapper && getComputedStyle(this.wrapper).direction === 'rtl';
-    };
-    /**
-     * @hidden
-     */
-    DropDownButton.propTypes = {
-        accessKey: PropTypes.string,
-        ariaLabel: PropTypes.string,
-        title: PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onItemClick: PropTypes.func,
-        onOpen: PropTypes.func,
-        onClose: PropTypes.func,
-        items: PropTypes.arrayOf(PropTypes.any),
-        textField: PropTypes.string,
-        tabIndex: PropTypes.number,
-        disabled: PropTypes.bool,
-        icon: PropTypes.string,
-        svgIcon: kendo_react_common_1.svgIconPropType,
-        iconClass: PropTypes.string,
-        imageUrl: PropTypes.string,
-        popupSettings: PropTypes.object,
-        itemRender: PropTypes.func,
-        item: PropTypes.func,
-        className: PropTypes.string,
-        buttonClass: PropTypes.string,
-        dir: PropTypes.string
-    };
-    /**
-     * @hidden
-     */
-    DropDownButton.defaultProps = {
-        size: 'medium',
-        rounded: 'medium',
-        fillMode: 'solid',
-        themeColor: 'base'
-    };
-    return DropDownButton;
-}(React.Component));
-exports.DropDownButton = DropDownButton;

package/dist/npm/ListButton/DropDownButtonItem.js

@@ -1,46 +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 __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropDownButtonItem = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var DropDownButtonItem = /** @class */ (function (_super) {
-    __extends(DropDownButtonItem, _super);
-    function DropDownButtonItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @hidden
-     */
-    DropDownButtonItem.prototype.render = function () {
-        return null;
-    };
-    /**
-     * @hidden
-     */
-    DropDownButtonItem.propTypes = {
-        text: PropTypes.string,
-        icon: PropTypes.string,
-        iconClass: PropTypes.string,
-        imageUrl: PropTypes.string,
-        selected: PropTypes.bool,
-        disabled: PropTypes.bool,
-        render: PropTypes.any
-    };
-    return DropDownButtonItem;
-}(React.Component));
-exports.DropDownButtonItem = DropDownButtonItem;