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

package/dist/es/toolbar/Toolbar.js

@@ -1,214 +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, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
-import { toolbarButtons } from './../util';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../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 === Keys.left || event.keyCode === Keys.right;
-            if (!arrowKey || event.defaultPrevented || _this.buttons.findIndex(function (b) { return b === target; }) === -1) {
-                return;
-            }
-            var focusedIndex = _this.focusedIndex;
-            if (event.keyCode === 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 }));
-                }
-            }
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(Toolbar.prototype, "selectors", {
-        get: function () {
-            return this.props.buttons || 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: classNames('k-toolbar', (_a = {},
-                _a["k-toolbar-".concat(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));
-export { Toolbar };

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

@@ -1,56 +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';
-import { classNames } from '@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: 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));
-export { ToolbarItem };

package/dist/es/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/es/toolbar/tools/ToolbarSeparator.js

@@ -1,31 +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 { classNames } from '@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: classNames('k-separator', this.props.className) }));
-    };
-    return ToolbarSeparator;
-}(React.PureComponent));
-export { ToolbarSeparator };

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-/**
- * Represents the KendoReact ToolbarSpacer component.
- * To specify an empty space, provide a ToolbarSpacer component
- * ([see example]({% slug content_toolbar %})).
- */
-export var 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 classNames('k-spacer', props.className); }, [props.className]);
-    return (React.createElement("span", { ref: element, className: className }));
-});
-ToolbarSpacer.displayName = 'KendoReactToolbarSpacer';
-ToolbarSpacer.propTypes = {
-    className: PropTypes.string
-};

package/dist/es/util.d.ts

@@ -1,27 +0,0 @@
-/**
- * @hidden
- */
-export declare const toolbarButtons: string[];
-/**
- * @hidden
- */
-declare const _default: {
-    styles: {
-        button: string;
-        flat: string;
-        outline: string;
-        clear: string;
-        primary: string;
-        'state-selected': string;
-        'button-icon': string;
-        'button-icontext': string;
-        'state-disabled': string;
-        'group-start': string;
-        'group-end': string;
-        'button-group': string;
-        'button-group-stretched': string;
-        ltr: string;
-        rtl: string;
-    };
-};
-export default _default;

package/dist/es/util.js

@@ -1,37 +0,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
- */
-export var toolbarButtons = [
-    'button' + noInnerButton,
-    '.k-button-group > button' + noInnerButton,
-    '.k-colorpicker',
-    '.k-dropdownlist'
-];
-/**
- * @hidden
- */
-export default {
-    styles: styles
-};

package/dist/npm/Button.d.ts

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ButtonInterface } from './ButtonInterface';
-/**
- * Represents the props of the [KendoReact Button component]({% slug overview_button %}).
- * Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement).
- */
-export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * @hidden
-     */
-    children?: React.ReactNode;
-    /**
-     * Configures the `size` of the Button.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `roundness` of the Button.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null&mdash;Does not set a rounded `className`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Configures the `fillMode` of the Button.
-     *
-     * The available options are:
-     * - solid
-     * - outline
-     * - flat
-     * - link
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
-    /**
-     * Configures the `themeColor` of the Button.
-     *
-     * The available options are:
-     * - base
-     * - primary
-     * - secondary
-     * - tertiary
-     * - info
-     * - success
-     * - warning
-     * - error
-     * - dark
-     * - light
-     * - inverse
-     * - null&mdash;Does not set a themeColor `className`.
-     *
-     * @default `base`
-     */
-    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
-}
-/**
- * @hidden
- */
-export interface ButtonState {
-    selected: boolean;
-}
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        selected: PropTypes.Requireable<boolean>;
-        togglable: 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>;
-        imageAlt: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | null>;
-        rounded: PropTypes.Requireable<string | null>;
-        fillMode: PropTypes.Requireable<string | null>;
-        themeColor: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        togglable: boolean;
-        size: string;
-        rounded: string;
-        fillMode: string;
-        themeColor: string;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: ButtonState;
-    private _selectedTemp?;
-    private _element;
-    /**
-     * Gets the DOM element of the Button component.
-     */
-    get element(): HTMLButtonElement | null;
-    /**
-     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
-     * Otherwise, returns `false`.
-     */
-    get selected(): boolean;
-    constructor(props: ButtonProps);
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: ButtonProps, state: ButtonState): {
-        selected: boolean;
-    } | null;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    private toggleIfApplicable;
-    private handleClick;
-}