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

package/dist/npm/Button.js

@@ -1,174 +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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./package-metadata");
-/**
- * @hidden
- */
-function iconElement(_a) {
-    var imageUrl = _a.imageUrl, name = _a.name, iconClass = _a.iconClass, svgIcon = _a.svgIcon, imageAlt = _a.imageAlt;
-    if (imageUrl) {
-        return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
-    }
-    else if (name || svgIcon) {
-        return React.createElement(kendo_react_common_1.IconWrap, { className: 'k-button-icon', name: name, icon: svgIcon });
-    }
-    else if (iconClass) {
-        return (React.createElement("span", { role: "presentation", className: (0, kendo_react_common_1.classNames)('k-button-icon', iconClass) }));
-    }
-    return null;
-}
-var Button = /** @class */ (function (_super) {
-    __extends(Button, _super);
-    function Button(props) {
-        var _this = _super.call(this, props) || this;
-        _this._element = null;
-        _this.handleClick = function (event) {
-            _this.toggleIfApplicable();
-            if (_this.props.onClick) {
-                _this.props.onClick.call(undefined, event);
-            }
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        _this.state = { selected: _this.props.togglable === true && _this.props.selected === true };
-        return _this;
-    }
-    Object.defineProperty(Button.prototype, "element", {
-        /**
-         * Gets the DOM element of the Button component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Button.prototype, "selected", {
-        /**
-         * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
-         * Otherwise, returns `false`.
-         */
-        get: function () {
-            return this._selectedTemp !== undefined ? this._selectedTemp : this.state.selected;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    Button.getDerivedStateFromProps = function (props, state) {
-        if (props.togglable && props.selected !== undefined && props.selected !== state.selected) {
-            return { selected: props.selected };
-        }
-        return null;
-    };
-    /**
-     * @hidden
-     */
-    Button.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, svgIcon = _b.svgIcon, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "svgIcon", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
-        var hasIcon = (svgIcon !== undefined || icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
-        var hasChildren = children !== undefined;
-        var iconEl = iconElement({
-            name: icon,
-            svgIcon: svgIcon,
-            iconClass: iconClass,
-            imageUrl: imageUrl,
-            imageAlt: imageAlt
-        });
-        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, "aria-pressed": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: (0, kendo_react_common_1.classNames)('k-button', (_a = {},
-                _a["k-button-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-".concat(fillMode)] = fillMode,
-                _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
-                _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-                _a['k-icon-button'] = !hasChildren && hasIcon,
-                _a['k-disabled'] = this.props.disabled,
-                _a['k-selected'] = this.state.selected,
-                _a['k-rtl'] = this.props.dir === 'rtl',
-                _a), this.props.className) }),
-            iconEl,
-            children && (React.createElement("span", { className: "k-button-text" }, children))));
-    };
-    Button.prototype.toggleIfApplicable = function () {
-        var _this = this;
-        if (this.props.togglable && this.props.selected === undefined) {
-            var selected = !this.state.selected;
-            this._selectedTemp = selected;
-            this.setState({ selected: selected }, function () { return _this._selectedTemp = undefined; });
-        }
-    };
-    /**
-     * @hidden
-     */
-    Button.propTypes = {
-        children: PropTypes.node,
-        selected: PropTypes.bool,
-        togglable: PropTypes.bool,
-        icon: PropTypes.string,
-        svgIcon: kendo_react_common_1.svgIconPropType,
-        iconClass: PropTypes.string,
-        imageUrl: PropTypes.string,
-        imageAlt: PropTypes.string,
-        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-        fillMode: PropTypes.oneOf([null, 'flat', 'link', 'outline', 'solid']),
-        // eslint-disable-next-line max-len
-        themeColor: PropTypes.oneOf([null, 'base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'])
-    };
-    /**
-     * @hidden
-     */
-    Button.defaultProps = {
-        togglable: false,
-        size: 'medium',
-        rounded: 'medium',
-        fillMode: 'solid',
-        themeColor: 'base'
-    };
-    return Button;
-}(React.Component));
-exports.Button = Button;

package/dist/npm/ButtonGroup.js

@@ -1,104 +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.ButtonGroup = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./package-metadata");
-var util_1 = require("./util");
-var styles = util_1.default.styles;
-var ButtonGroup = /** @class */ (function (_super) {
-    __extends(ButtonGroup, _super);
-    function ButtonGroup(props) {
-        var _this = _super.call(this, props) || this;
-        _this._element = null;
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    ButtonGroup.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var buttons = this.mapButtons(this.props.children);
-        var groupClasses = (0, kendo_react_common_1.classNames)([styles['button-group']], (_a = {},
-            _a['k-disabled'] = this.props.disabled,
-            _a[styles['button-group-stretched']] = !!this.props.width,
-            _a), this.props.className);
-        var groupProps = {
-            className: groupClasses,
-            style: { 'width': "".concat(this.props.width) },
-            dir: this.props.dir,
-            // Accessibility properties
-            role: 'group',
-            'aria-disabled': this.props.disabled
-        };
-        return (React.createElement("div", __assign({ ref: function (div) { _this._element = div; } }, groupProps, { className: groupClasses }), buttons));
-    };
-    ButtonGroup.prototype.mapButtons = function (children) {
-        var _this = this;
-        var count = React.Children.count(children);
-        var rtl = this.props.dir !== undefined
-            ? this.props.dir === 'rtl'
-            : (this._element && (getComputedStyle(this._element).direction === 'rtl') || false);
-        return React.Children.map(children, function (child, index) {
-            if (React.isValidElement(child)) {
-                return _this.renderButton(child, index, (index === count - 1), rtl);
-            }
-            return child;
-        });
-    };
-    ButtonGroup.prototype.renderButton = function (child, index, isLast, isRtl) {
-        var _a;
-        var className = (0, kendo_react_common_1.classNames)(child.props.className, (_a = {},
-            _a[styles['group-start']] = isRtl ? isLast : index === 0,
-            _a[styles['group-end']] = isRtl ? index === 0 : isLast,
-            _a));
-        var style = __assign(__assign({}, (this.props.width ? { width: this.props.width } : {})), (child.props.style || {}));
-        var disabled = this.props.disabled || child.props.disabled;
-        var buttonProps = __assign(__assign(__assign(__assign({}, child.props), (className ? { className: className } : {})), (Object.keys(style).length ? { style: style } : {})), (disabled !== undefined ? { disabled: disabled } : {}));
-        return React.Children.count(child.props.children) > 0 ?
-            React.cloneElement(child, buttonProps, child.props.children) :
-            React.cloneElement(child, buttonProps);
-    };
-    /**
-     * @hidden
-     */
-    ButtonGroup.propTypes = {
-        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        width: PropTypes.string,
-        dir: PropTypes.string
-    };
-    return ButtonGroup;
-}(React.Component));
-exports.ButtonGroup = ButtonGroup;

package/dist/npm/ButtonGroupInterface.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-/**
- * Represents the properties which can be set to a ButtonGroup.
- */
-export interface ButtonGroupInterface {
-    /**
-     * @hidden
-     */
-    children?: React.ReactNode;
-    /**
-     * By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons, set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
-     *
-     * If you define the `disabled` attribute of the ButtonGroup, it will take precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
-     */
-    disabled?: boolean;
-    /**
-     * Sets the width of the ButtonGroup.
-     *
-     * If the width of the ButtonGroup is set:
-     * - The buttons resize automatically to fill the full width of the group wrapper.
-     * - The buttons acquire the same width.
-     */
-    width?: string;
-    /**
-     * Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
-     *
-     * The available options are:
-     * * `rtl`
-     * * `ltr`
-     * * `auto`
-     */
-    dir?: string;
-}

package/dist/npm/ButtonGroupInterface.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length

package/dist/npm/ButtonInterface.js

@@ -1,4 +0,0 @@
-"use strict";
-/* eslint-disable max-len */
-Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length

package/dist/npm/Chip/Chip.js

@@ -1,176 +0,0 @@
-"use strict";
-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.Chip = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var ChipList_1 = require("./ChipList");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var focus_reducer_1 = require("./focus-reducer");
-var data_reducer_1 = require("./data-reducer");
-var selection_reducer_1 = require("./selection-reducer");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var kendo_react_common_3 = require("@progress/kendo-react-common");
-/**
- * Represents the Chip component.
- */
-exports.Chip = React.forwardRef(function (props, ref) {
-    var _a;
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var target = React.useRef(null);
-    var chipRef = React.useRef(null);
-    var dir = (0, kendo_react_common_1.useDir)(chipRef, props.dir);
-    React.useImperativeHandle(target, function () { return ({
-        element: chipRef.current,
-        props: props
-    }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var _b = React.useContext(ChipList_1.ChipListSelectionContext), selection = _b[0], dispatchSelection = _b[1];
-    var _c = React.useContext(ChipList_1.ChipListFocusContext), focus = _c[0], dispatchFocus = _c[1];
-    var _d = React.useContext(ChipList_1.ChipListDataContext), dispatchData = _d[1];
-    var selected = React.useMemo(function () {
-        return (props.selected || (Array.isArray(selection)
-            ? selection.some(function (i) { return i === props.value; })
-            : selection === props.value));
-    }, [props.selected, props.value, selection]);
-    var focused = React.useMemo(function () { return focus === props.value; }, [props.value, focus]);
-    React.useEffect(function () {
-        if (focused && chipRef.current) {
-            chipRef.current.focus();
-        }
-    }, [focused]);
-    var handleClick = React.useCallback(function (event) {
-        dispatchSelection({ type: selection_reducer_1.SELECTION_ACTION.toggle, payload: props.value, event: event });
-    }, [dispatchSelection, props.value]);
-    var handleRemove = React.useCallback(function (event) {
-        if (!props.removable) {
-            return;
-        }
-        dispatchData({ type: data_reducer_1.CHIP_DATA_ACTION.remove, payload: props.value, event: event });
-        dispatchFocus({ type: focus_reducer_1.FOCUS_ACTION.reset, payload: props.value, event: event });
-        dispatchSelection({ type: selection_reducer_1.SELECTION_ACTION.remove, payload: props.value, event: event });
-        if (props.onRemove) {
-            props.onRemove.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onRemove, props.value, props.removable, dispatchData, dispatchFocus, dispatchSelection]);
-    var handleKeyDown = React.useCallback(function (event) {
-        switch (event.keyCode) {
-            case kendo_react_common_1.Keys.left:
-                dispatchFocus({ type: focus_reducer_1.FOCUS_ACTION.prev, payload: props.value, event: event });
-                break;
-            case kendo_react_common_1.Keys.right:
-                dispatchFocus({ type: focus_reducer_1.FOCUS_ACTION.next, payload: props.value, event: event });
-                break;
-            case kendo_react_common_1.Keys.enter:
-                dispatchSelection({ type: selection_reducer_1.SELECTION_ACTION.toggle, payload: props.value, event: event });
-                break;
-            case kendo_react_common_1.Keys.delete:
-                handleRemove(event);
-                break;
-            default:
-                break;
-        }
-        if (props.onKeyDown) {
-            props.onKeyDown.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onKeyDown, props.value, dispatchFocus, dispatchSelection, handleRemove]);
-    var handleFocus = React.useCallback(function (event) {
-        dispatchFocus({ payload: props.value, type: focus_reducer_1.FOCUS_ACTION.current, event: event });
-        if (props.onFocus) {
-            props.onFocus.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onFocus, props.value, dispatchFocus]);
-    var handleBlur = React.useCallback(function (event) {
-        if (props.onBlur) {
-            props.onBlur.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onBlur]);
-    var mouseProps = (0, kendo_react_common_3.useMouse)(props, target, { onClick: handleClick });
-    return (React.createElement("div", __assign({}, mouseProps, { role: props.role, id: props.value, style: props.style, ref: chipRef, dir: dir, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled, undefined), className: (0, kendo_react_common_1.classNames)('k-chip', (_a = {
-                'k-rtl': dir === 'rtl',
-                'k-disabled': props.disabled,
-                'k-selected': selected,
-                'k-focus': focused
-            },
-            _a["k-chip-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
-            _a["k-chip-".concat(props.fillMode)] = props.fillMode,
-            _a["k-chip-".concat(props.fillMode, "-").concat(props.themeColor)] = Boolean(props.fillMode && props.themeColor),
-            _a), props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        (selected && (props.selectedIcon || props.selectedSvgIcon)) &&
-            React.createElement(kendo_react_common_1.IconWrap, { className: 'k-chip-icon', name: props.selectedIcon ? (0, kendo_react_common_1.toIconName)(props.selectedIcon) : undefined, icon: props.selectedSvgIcon, size: 'small' }),
-        (props.icon || props.svgIcon) &&
-            React.createElement(kendo_react_common_1.IconWrap, { className: 'k-chip-icon', name: props.icon ? (0, kendo_react_common_1.toIconName)(props.icon) : undefined, icon: props.svgIcon, size: 'small' }),
-        (props.avatar) &&
-            React.createElement("div", { className: "k-chip-avatar k-avatar k-rounded-".concat(props.avatar.rounded, " k-avatar-md k-avatar-solid k-avatar-solid-primary"), style: props.avatar.style },
-                React.createElement("span", { className: "k-avatar-image" },
-                    React.createElement("img", { src: props.avatar.image, alt: props.avatar.imageAlt }))),
-        React.createElement("span", { className: 'k-chip-content' }, props.children !== undefined
-            ? props.children
-            : props.text &&
-                React.createElement("span", { "aria-label": props.ariaLabel || props.text, className: 'k-chip-label' }, props.text)),
-        props.removable && (React.createElement("span", { className: "k-chip-actions" },
-            React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-action', 'k-chip-remove-action'), onClick: handleRemove },
-                React.createElement(kendo_react_common_1.IconWrap, { name: props.removeIcon ? (0, kendo_react_common_1.toIconName)(props.removeIcon) : undefined, icon: props.removeSvgIcon || kendo_svg_icons_1.xCircleIcon, size: 'small' }))))));
-});
-var propTypes = {
-    id: PropTypes.string,
-    text: PropTypes.string,
-    value: PropTypes.any,
-    dir: PropTypes.oneOf(['ltr', 'rtl']),
-    removable: PropTypes.bool,
-    removeIcon: PropTypes.string,
-    removeIconSvg: kendo_react_common_1.svgIconPropType,
-    disabled: PropTypes.bool,
-    icon: PropTypes.string,
-    svgIcon: kendo_react_common_1.svgIconPropType,
-    selectedIcon: PropTypes.string,
-    selectedIconSvg: kendo_react_common_1.svgIconPropType,
-    onRemove: PropTypes.func,
-    dataItem: PropTypes.any,
-    selected: PropTypes.bool,
-    ariaDescribedBy: PropTypes.string,
-    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-    fillMode: PropTypes.oneOf([null, 'outline', 'solid']),
-    // eslint-disable-next-line max-len
-    themeColor: PropTypes.oneOf([null, 'base', 'info', 'success', 'warning', 'error'])
-};
-var defaultProps = {
-    disabled: false,
-    removable: false,
-    removeIcon: 'k-i-x-circle',
-    dir: 'ltr',
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid',
-    themeColor: 'base'
-};
-exports.Chip.displayName = 'KendoReactChip';
-// TODO: delete casting when @types/react is updated!
-exports.Chip.propTypes = propTypes;
-exports.Chip.defaultProps = defaultProps;