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

package/dist/npm/toolbar/Toolbar.d.ts

@@ -1,171 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
-/**
- * Represents the `resize` event of the Toolbar.
- */
-export interface ToolbarResizeEvent {
-    /**
-     * An event target.
-     */
-    target: Toolbar;
-    /**
-     * The `offsetWidth` event of the Toolbar.
-     */
-    offsetWidth: number;
-    /**
-     * The `offsetHeight` event of the Toolbar.
-     */
-    offsetHeight: number;
-    /**
-     * A native DOM event.
-     */
-    nativeEvent: any;
-}
-/**
- * Represents the props of the [KendoReact Toolbar component]({% slug overview_toolbar %}).
- */
-export interface ToolbarProps extends KendoReactComponentBaseProps {
-    /**
-     * Sets additional classes to the Toolbar.
-     */
-    className?: string;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * The styles that are applied to the Toolbar.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Represents the label of the Toolbar component.
-     */
-    ariaLabel?: string;
-    /**
-     * Specifies the `tabIndex` of the Toolbar.
-     */
-    tabIndex?: number;
-    /**
-     * The `resize` event of the Toolbar.
-     */
-    onResize?: (event: ToolbarResizeEvent) => void;
-    /**
-     * If set to `false`, it will turn off the built-in keyboard navigation.
-     */
-    keyboardNavigation?: boolean;
-    /**
-     * @hidden
-     *
-     * The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
-     * Each selector needs to point to a focusable element.
-     * Defaults to [
-     *  'button',
-     *  '.k-button-group > button',
-     *  '.k-dropdown > .k-dropdown-wrap',
-     *  '.k-colorpicker > .k-picker-wrap'
-     * ].
-     */
-    buttons?: string[];
-    /**
-     * Configures the `size` of the Toolbar.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null—Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * @hidden
-     */
-    role?: string;
-}
-/**
- * Represents the [KendoReact Toolbar component]({% slug overview_toolbar %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    render() {
- *       return (
- *          <Toolbar>
- *              <ToolbarItem>
- *                  <ButtonGroup>
- *                      <Button togglable={true} icon="bold" />
- *                      <Button togglable={true} icon="italic" />
- *                      <Button togglable={true} icon="underline" />
- *                  </ButtonGroup>
- *              </ToolbarItem>
- *              <ToolbarItem>
- *                  <ButtonGroup>
- *                      <Button icon="hyperlink">Insert Link</Button>
- *                      <Button icon="image">Insert Image</Button>
- *                      <Button icon="table">Insert Table</Button>
- *                  </ButtonGroup>
- *              </ToolbarItem>
- *          </Toolbar>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class Toolbar extends React.Component<ToolbarProps> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        tabIndex: PropTypes.Requireable<number>;
-        dir: PropTypes.Requireable<string>;
-        keyboardNavigation: PropTypes.Requireable<boolean>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-        role: PropTypes.Requireable<string>;
-        onResize: PropTypes.Requireable<(...args: any[]) => any>;
-        buttons: PropTypes.Requireable<(string | null | undefined)[]>;
-        size: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        tabIndex: number;
-        size: string;
-    };
-    private _element;
-    private offsetHeight;
-    private offsetWidth;
-    private buttons;
-    private focusedSelector;
-    constructor(props: ToolbarProps);
-    private get selectors();
-    private get focusedIndex();
-    /**
-     * Returns the HTML element of the Toolbar component.
-     */
-    get element(): HTMLDivElement | null;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    private setTabIndex;
-    private onKeyDown;
-    private focusButton;
-    private onWindowResize;
-}

package/dist/npm/toolbar/Toolbar.js

@@ -1,217 +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.Toolbar = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var util_1 = require("./../util");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-/**
- * Represents the [KendoReact Toolbar component]({% slug overview_toolbar %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    render() {
- *       return (
- *          <Toolbar>
- *              <ToolbarItem>
- *                  <ButtonGroup>
- *                      <Button togglable={true} icon="bold" />
- *                      <Button togglable={true} icon="italic" />
- *                      <Button togglable={true} icon="underline" />
- *                  </ButtonGroup>
- *              </ToolbarItem>
- *              <ToolbarItem>
- *                  <ButtonGroup>
- *                      <Button icon="hyperlink">Insert Link</Button>
- *                      <Button icon="image">Insert Image</Button>
- *                      <Button icon="table">Insert Table</Button>
- *                  </ButtonGroup>
- *              </ToolbarItem>
- *          </Toolbar>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var Toolbar = /** @class */ (function (_super) {
-    __extends(Toolbar, _super);
-    function Toolbar(props) {
-        var _this = _super.call(this, props) || this;
-        _this._element = null;
-        _this.offsetHeight = 0;
-        _this.offsetWidth = 0;
-        _this.buttons = [];
-        _this.focusedSelector = _this.selectors.map(function (s) { return s + ':focus'; }).join(',');
-        _this.setTabIndex = function (focusedIndex) {
-            var _a = _this.props.tabIndex, tabIndex = _a === void 0 ? Toolbar.defaultProps.tabIndex : _a;
-            _this.buttons.forEach(function (button, index) {
-                button.tabIndex = (index === focusedIndex) ? tabIndex : -1;
-            });
-        };
-        _this.onKeyDown = function (event) {
-            var target = event.target;
-            var arrowKey = event.keyCode === kendo_react_common_1.Keys.left || event.keyCode === kendo_react_common_1.Keys.right;
-            if (!arrowKey || event.defaultPrevented || _this.buttons.findIndex(function (b) { return b === target; }) === -1) {
-                return;
-            }
-            var focusedIndex = _this.focusedIndex;
-            if (event.keyCode === kendo_react_common_1.Keys.left) {
-                _this.focusButton(focusedIndex, focusedIndex - 1);
-            }
-            else {
-                _this.focusButton(focusedIndex, focusedIndex + 1);
-            }
-        };
-        _this.onWindowResize = function (event) {
-            var element = _this.element;
-            if (!element) {
-                return;
-            }
-            var offsetWidth = element.offsetWidth;
-            var offsetHeight = element.offsetHeight;
-            if (_this.offsetWidth !== offsetWidth || _this.offsetHeight !== offsetHeight) {
-                _this.offsetWidth = offsetWidth;
-                _this.offsetHeight = offsetHeight;
-                var newSizes = { offsetWidth: _this.offsetWidth, offsetHeight: _this.offsetHeight };
-                if (_this.props.onResize) {
-                    _this.props.onResize.call(undefined, __assign(__assign({ target: _this }, newSizes), { nativeEvent: event }));
-                }
-            }
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(Toolbar.prototype, "selectors", {
-        get: function () {
-            return this.props.buttons || util_1.toolbarButtons;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Toolbar.prototype, "focusedIndex", {
-        get: function () {
-            var focused = this.element && this.element.querySelector(this.focusedSelector);
-            return Math.max(0, this.buttons.findIndex(function (e) { return e === focused; }));
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Toolbar.prototype, "element", {
-        /**
-         * Returns the HTML element of the Toolbar component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    Toolbar.prototype.componentDidMount = function () {
-        window.addEventListener('resize', this.onWindowResize);
-        var element = this.element;
-        if (element) {
-            this.offsetWidth = element.offsetWidth;
-            this.offsetHeight = element.offsetHeight;
-            if (this.props.keyboardNavigation !== false) {
-                this.buttons = Array.from(element.querySelectorAll(this.selectors.join(',')));
-                this.setTabIndex(0);
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    Toolbar.prototype.componentDidUpdate = function () {
-        var element = this.element;
-        if (!element || this.props.keyboardNavigation === false) {
-            return;
-        }
-        this.buttons = Array.from(element.querySelectorAll(this.selectors.join(',')));
-        this.setTabIndex(this.focusedIndex);
-    };
-    /**
-     * @hidden
-     */
-    Toolbar.prototype.componentWillUnmount = function () {
-        window.removeEventListener('resize', this.onWindowResize);
-        this.buttons.length = 0;
-    };
-    /**
-     * @hidden
-     */
-    Toolbar.prototype.render = function () {
-        var _a;
-        var _this = this;
-        return (React.createElement("div", { id: this.props.id, "aria-label": this.props.ariaLabel, className: (0, kendo_react_common_1.classNames)('k-toolbar', (_a = {},
-                _a["k-toolbar-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                _a), this.props.className), style: this.props.style, role: this.props.role !== undefined ? (this.props.role || undefined) : 'toolbar', dir: this.props.dir, ref: function (element) { return _this._element = element; }, onKeyDown: this.props.keyboardNavigation !== false ? this.onKeyDown : undefined }, this.props.children));
-    };
-    Toolbar.prototype.focusButton = function (prevIndex, index) {
-        var _a = this.props.tabIndex, tabIndex = _a === void 0 ? Toolbar.defaultProps.tabIndex : _a;
-        var button = this.buttons[index];
-        if (button) {
-            button.tabIndex = tabIndex;
-            button.focus();
-            var prevButton = this.buttons[prevIndex];
-            if (prevButton) {
-                prevButton.tabIndex = -1;
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    Toolbar.propTypes = {
-        tabIndex: PropTypes.number,
-        dir: PropTypes.string,
-        keyboardNavigation: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        role: PropTypes.string,
-        onResize: PropTypes.func,
-        buttons: PropTypes.arrayOf(PropTypes.string),
-        size: PropTypes.oneOf([null, 'small', 'medium', 'large'])
-    };
-    /**
-     * @hidden
-     */
-    Toolbar.defaultProps = {
-        tabIndex: 0,
-        size: 'medium'
-    };
-    return Toolbar;
-}(React.Component));
-exports.Toolbar = Toolbar;

package/dist/npm/toolbar/tools/ToolbarItem.d.ts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
-/**
- * Represents the props of KendoReact ToolbarItem component.
- */
-export interface ToolbarItemProps extends KendoReactComponentBaseProps {
-    /**
-     * Sets additional classes to the ToolbarItem component.
-     */
-    className?: string;
-    /**
-     * Sets additional styles to the ToolbarItem component.
-     */
-    style?: React.CSSProperties;
-}
-/**
- * Represents the KendoReact ToolbarItem component.
- * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
- * ([see example]({% slug content_toolbar %})).
- */
-export declare class ToolbarItem extends React.PureComponent<ToolbarItemProps> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-    };
-    private _element;
-    /**
-     * Returns the HTML element of the ToolbarItem component.
-     */
-    get element(): HTMLSpanElement | null;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-}

package/dist/npm/toolbar/tools/ToolbarItem.js

@@ -1,59 +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.ToolbarItem = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/**
- * Represents the KendoReact ToolbarItem component.
- * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
- * ([see example]({% slug content_toolbar %})).
- */
-var ToolbarItem = /** @class */ (function (_super) {
-    __extends(ToolbarItem, _super);
-    function ToolbarItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._element = null;
-        return _this;
-    }
-    Object.defineProperty(ToolbarItem.prototype, "element", {
-        /**
-         * Returns the HTML element of the ToolbarItem component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolbarItem.prototype.render = function () {
-        var _this = this;
-        return (React.createElement("div", { id: this.props.id, className: (0, kendo_react_common_1.classNames)('k-toolbar-item', this.props.className), style: this.props.style, ref: function (e) { return _this._element = e; } }, this.props.children));
-    };
-    /**
-     * @hidden
-     */
-    ToolbarItem.propTypes = {
-        className: PropTypes.string
-    };
-    return ToolbarItem;
-}(React.PureComponent));
-exports.ToolbarItem = ToolbarItem;

package/dist/npm/toolbar/tools/ToolbarSeparator.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the KendoReact Toolbar Separator component.
- */
-export interface ToolbarSeparatorProps {
-    /**
-     * Sets additional classes to the ToolbarSeparator component.
-     */
-    className?: string;
-}
-export declare class ToolbarSeparator extends React.PureComponent<ToolbarSeparatorProps> {
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-}

package/dist/npm/toolbar/tools/ToolbarSeparator.js

@@ -1,34 +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.ToolbarSeparator = void 0;
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var ToolbarSeparator = /** @class */ (function (_super) {
-    __extends(ToolbarSeparator, _super);
-    function ToolbarSeparator() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @hidden
-     */
-    ToolbarSeparator.prototype.render = function () {
-        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-separator', this.props.className) }));
-    };
-    return ToolbarSeparator;
-}(React.PureComponent));
-exports.ToolbarSeparator = ToolbarSeparator;

package/dist/npm/toolbar/tools/ToolbarSpacer.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the props of KendoReact ToolbarSpacer component.
- */
-export interface ToolbarSpacerProps {
-    /**
-     * Sets additional classes to the ToolbarSpacer component.
-     */
-    className?: string;
-}
-/** @hidden */
-export interface ToolbarSpacerHandle {
-    /**
-     * Returns the HTML element of the ToolbarSpacer component.
-     */
-    element: HTMLDivElement | null;
-}
-/**
- * Represents the KendoReact ToolbarSpacer component.
- * To specify an empty space, provide a ToolbarSpacer component
- * ([see example]({% slug content_toolbar %})).
- */
-export declare const ToolbarSpacer: React.ForwardRefExoticComponent<ToolbarSpacerProps & React.RefAttributes<ToolbarSpacerHandle>>;

package/dist/npm/toolbar/tools/ToolbarSpacer.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarSpacer = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/**
- * Represents the KendoReact ToolbarSpacer component.
- * To specify an empty space, provide a ToolbarSpacer component
- * ([see example]({% slug content_toolbar %})).
- */
-exports.ToolbarSpacer = React.forwardRef(function (props, ref) {
-    var element = React.useRef(null);
-    var spacer = React.useRef(null);
-    React.useImperativeHandle(spacer, function () { return ({ element: element.current }); });
-    React.useImperativeHandle(ref, function () { return ({ element: element.current }); });
-    var className = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-spacer', props.className); }, [props.className]);
-    return (React.createElement("span", { ref: element, className: className }));
-});
-exports.ToolbarSpacer.displayName = 'KendoReactToolbarSpacer';
-exports.ToolbarSpacer.propTypes = {
-    className: PropTypes.string
-};

package/dist/npm/util.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toolbarButtons = void 0;
-/**
- * @hidden
- */
-var styles = {
-    button: 'k-button',
-    'flat': 'k-flat',
-    'outline': 'k-outline',
-    'clear': 'k-button-clear',
-    'primary': 'k-primary',
-    'state-selected': 'k-selected',
-    'button-icon': 'k-button-icon',
-    'button-icontext': 'k-button-icontext',
-    'state-disabled': 'k-disabled',
-    'group-start': 'k-group-start',
-    'group-end': 'k-group-end',
-    'button-group': 'k-button-group',
-    'button-group-stretched': 'k-button-group-stretched',
-    'ltr': 'k-ltr',
-    'rtl': 'k-rtl'
-};
-// const notDisabled = ':not(.k-disabled):not([disabled]):not([disabled="true"])';
-var noInnerButton = ':not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)';
-/**
- * @hidden
- */
-exports.toolbarButtons = [
-    'button' + noInnerButton,
-    '.k-button-group > button' + noInnerButton,
-    '.k-colorpicker',
-    '.k-dropdownlist'
-];
-/**
- * @hidden
- */
-exports.default = {
-    styles: styles
-};