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

package/dist/es/ListButton/DropDownButton.js

@@ -1,325 +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 { Button } from './../main';
-import { classNames, guid, Keys, kendoThemeMaps, svgIconPropType, getActiveElement } from '@progress/kendo-react-common';
-import { dispatchEvent } from '@progress/kendo-react-common';
-import { navigate as navigation } from './utils/navigation';
-import { DropDownButtonItem } from './DropDownButtonItem';
-import { ButtonItem } from './ButtonItem';
-import { Popup } from '@progress/kendo-react-popup';
-import { getAnchorAlign, getPopupAlign } from './utils/popup';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../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 = guid();
-        _this.buttonsData = [];
-        _this.onKeyDown = function (event) {
-            var focusedIndex = _this.state.focusedIndex;
-            if (event.altKey) {
-                if (!_this.opened && event.keyCode === Keys.down) {
-                    _this.setOpen(true);
-                    _this.dispatchPopupEvent(event, true);
-                    _this.setState({ focusedIndex: 0 });
-                }
-                else if (_this.opened && event.keyCode === Keys.up) {
-                    _this.setState({ focusedIndex: -1 });
-                    _this.setOpen(false);
-                }
-                return;
-            }
-            var newState = __assign({}, _this.state);
-            if (event.keyCode === Keys.enter || event.keyCode === 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 === Keys.esc) {
-                _this.setState({ focusedIndex: -1 });
-                _this.setOpen(false);
-                return;
-            }
-            if (_this.opened) {
-                var newFocused = navigation(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
-                newState.focusedIndex = newFocused;
-                var arrowKey = event.keyCode === Keys.up || event.keyCode === Keys.down ||
-                    event.keyCode === Keys.left || event.keyCode === Keys.right;
-                if (!event.altKey && (arrowKey || event.keyCode === Keys.home || event.keyCode === 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 });
-            dispatchEvent(_this.props.onFocus, event, _this, undefined);
-        };
-        _this.handleBlur = function (event) {
-            if (_this.skipFocus) {
-                return;
-            }
-            _this.setState({ focused: false, focusedIndex: -1 });
-            _this.setOpen(false);
-            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 = getActiveElement(document);
-            if (activeElement === _this.list) {
-                event.preventDefault();
-            }
-        };
-        _this.mouseDown = function (event) {
-            event.preventDefault();
-            var activeElement = 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) {
-            dispatchEvent(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
-            _this.openedDuringOnChange = undefined;
-        };
-        validatePackage(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; })
-                .map(function (child) { return child.props; });
-        return (React.createElement("div", { id: id, style: style, className: 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(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)) {
-            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(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || 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: classNames('k-group k-menu-group k-reset', (_a = {},
-                    _a["k-menu-group-".concat(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, { 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: 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));
-export { DropDownButton };

package/dist/es/ListButton/DropDownButtonItem.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ButtonItem } from './models/ButtonItem';
-/**
- * The properties of the KendoReact DropDownButtonItem component.
- */
-export interface DropDownButtonItemProps extends ButtonItem {
-    /**
-     * Determines the selected state of the ButtonItem component.
-     */
-    selected?: boolean;
-}
-export declare class DropDownButtonItem extends React.Component<DropDownButtonItemProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        text: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string>;
-        iconClass: PropTypes.Requireable<string>;
-        imageUrl: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        render: PropTypes.Requireable<any>;
-    };
-    /**
-     * @hidden
-     */
-    render(): null;
-}

package/dist/es/ListButton/DropDownButtonItem.js

@@ -1,43 +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 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));
-export { DropDownButtonItem };

package/dist/es/ListButton/SplitButton.d.ts

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { SplitButtonProps } from './models/ListButtonProps';
-/**
- * @hidden
- */
-export interface SplitButtonState {
-    focusedIndex?: number;
-    focused?: boolean;
-    opened?: boolean;
-}
-/**
- * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    render() {
- *        return (
- *            <SplitButton text="Act">
- *                <SplitButtonItem text="Item1" />
- *                <SplitButtonItem text="Item2" />
- *                <SplitButtonItem text="Item3" />
- *            </SplitButton>
- *        );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        accessKey: PropTypes.Requireable<string>;
-        ariaLabel: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        text: PropTypes.Requireable<string>;
-        items: PropTypes.Requireable<any[]>;
-        textField: PropTypes.Requireable<string>;
-        tabIndex: PropTypes.Requireable<number>;
-        disabled: PropTypes.Requireable<boolean>;
-        icon: PropTypes.Requireable<string>;
-        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
-            name: PropTypes.Validator<string>;
-            content: PropTypes.Validator<string>;
-            viewBox: PropTypes.Validator<string>;
-        }>>;
-        iconClass: PropTypes.Requireable<string>;
-        imageUrl: PropTypes.Requireable<string>;
-        popupSettings: PropTypes.Requireable<object>;
-        itemRender: PropTypes.Requireable<any>;
-        item: PropTypes.Requireable<(...args: any[]) => any>;
-        className: PropTypes.Requireable<string>;
-        buttonClass: PropTypes.Requireable<string>;
-        dir: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        size: string;
-        rounded: string;
-        fillMode: string;
-        themeColor: string;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: {
-        focused: boolean;
-        focusedIndex: number;
-        opened: boolean;
-    };
-    private wrapper;
-    private mainButton;
-    private list;
-    private guid;
-    private skipFocus;
-    private buttonsData;
-    private openedDuringOnChange?;
-    constructor(props: SplitButtonProps);
-    private get opened();
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * The DOM element of main button.
-     */
-    get element(): HTMLButtonElement | null;
-    private onKeyDown;
-    private switchFocus;
-    private onFocus;
-    private setOpen;
-    private onItemClick;
-    private onBlur;
-    private dispatchClickEvent;
-    private renderPopup;
-    private onPopupClose;
-    private listRef;
-    private renderChildItems;
-    private onSplitPartClick;
-    private onDownSplitPart;
-    private onItemDown;
-    private dispatchPopupEvent;
-    private isItemDisabled;
-    private isRtl;
-}