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

package/dist/es/Chip/Chip.d.ts

@@ -1,234 +0,0 @@
-import * as React from 'react';
-import { SVGIcon } from '@progress/kendo-react-common';
-import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
-/**
- * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
- */
-export interface ChipProps {
-    /**
-     * Sets the `id` property of the top div element of the Chip.
-     */
-    id?: string;
-    /**
-     * Sets additional classes to the Chip.
-     */
-    className?: string;
-    /**
-     * The React elements that will be rendered as custom content inside the Chip.
-     */
-    children?: React.ReactNode;
-    /**
-     * Sets the `tabIndex` attribute.
-     */
-    tabIndex?: number;
-    /**
-     * Sets additional CSS styles to the Chip.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the label text of the Chip.
-     */
-    text?: string;
-    /**
-     * Sets the `id` value of the Chip.
-     */
-    value?: any;
-    /**
-     * The Chip direction 'ltr' as default or 'rtl'.
-     */
-    dir?: string;
-    /**
-     * Determines if the Chip could be removed.
-     */
-    removable?: boolean;
-    /**
-     * Determines if the Chip has custom font `removeIcon`.
-     */
-    removeIcon?: string;
-    /**
-     * Determines if the Chip has custom SVG `removeIcon`.
-     */
-    removeSvgIcon?: SVGIcon;
-    /**
-     * Determines if the Chip is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Determines if the Chip has a font `icon`.
-     */
-    icon?: string;
-    /**
-     * Determines if the Chip has an SVG `icon`.
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * Determines if the Chip has an avatar.
-     */
-    avatar?: ChipAvatarProps;
-    /**
-     * Determines if the Chip has custom selection font `icon`.
-     */
-    selectedIcon?: string;
-    /**
-     * Determines if the Chip has custom selection SVG `icon`.
-     */
-    selectedSvgIcon?: SVGIcon;
-    /**
-     * Triggered on Chip removing.
-     */
-    onRemove?: (event: ChipRemoveEvent) => void;
-    /**
-     * Triggered on `onClick` event.
-     */
-    onClick?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseDown` event.
-     */
-    onMouseDown?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseUp` event.
-     */
-    onMouseUp?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onDoubleClick` event.
-     */
-    onDoubleClick?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseEnter` event.
-     */
-    onMouseEnter?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseLeave` event.
-     */
-    onMouseLeave?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseMove` event.
-     */
-    onMouseMove?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseOut` event.
-     */
-    onMouseOut?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onMouseOver` event.
-     */
-    onMouseOver?: (event: ChipMouseEvent) => void;
-    /**
-     * Triggered on `onKeyDown` event.
-     */
-    onKeyDown?: (event: ChipKeyboardEvent) => void;
-    /**
-     * Triggered on `onFocus` event.
-     */
-    onFocus?: (event: ChipFocusEvent) => void;
-    /**
-     * Triggered on `onBlur` event.
-     */
-    onBlur?: (event: ChipFocusEvent) => void;
-    /**
-     * Represents the item data, coming from the `ChipList` component.
-     */
-    dataItem?: any;
-    /**
-     * Determines if the Chip is selected.
-     */
-    selected?: boolean;
-    /**
-     * Identifies the element(s) which will describe the component, similar to an [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example, these elements could contain an error or a hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * @hidden
-     */
-    role?: string;
-    /**
-     * Configures the `size` of the Chip.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null—Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `roundness` of the Chip.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null—Does not set a rounded `className`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Configures the `fillMode` of the Chip.
-     *
-     * The available options are:
-     * - solid
-     * - outline
-     * - null—Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'outline';
-    /**
-     * Configures the `themeColor` of the Chip.
-     *
-     * The available options are:
-     * - base
-     * - info
-     * - success
-     * - warning
-     * - error
-     * - null—Does not set a themeColor `className`.
-     *
-     * @default `base`
-     */
-    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error';
-    /**
-     * Represents the label of the Chip component.
-     */
-    ariaLabel?: string;
-}
-/**
- * Represents the target(element and props) of the ChipRemoveEvent.
- */
-export interface ChipHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props values of the Chip.
-     */
-    props: ChipProps;
-}
-export interface ChipAvatarProps {
-    /**
-     * Sets the image of the avatar.
-     */
-    image: string;
-    /**
-     * Defines the alternative text of the avatar image.
-     */
-    imageAlt: string;
-    /**
-     * Configures the `roundness` of the avatar
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Sets additional CSS styles to the avatar
-     */
-    style?: React.CSSProperties;
-}
-/**
- * Represents the Chip component.
- */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle | null>>;

package/dist/es/Chip/Chip.js

@@ -1,173 +0,0 @@
-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 { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList';
-import { classNames, useDir, getTabIndex, Keys, IconWrap, kendoThemeMaps, toIconName, svgIconPropType } from '@progress/kendo-react-common';
-import { xCircleIcon } from '@progress/kendo-svg-icons';
-import { FOCUS_ACTION } from './focus-reducer';
-import { CHIP_DATA_ACTION } from './data-reducer';
-import { SELECTION_ACTION } from './selection-reducer';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { useMouse } from '@progress/kendo-react-common';
-/**
- * Represents the Chip component.
- */
-export var Chip = React.forwardRef(function (props, ref) {
-    var _a;
-    validatePackage(packageMetadata);
-    var target = React.useRef(null);
-    var chipRef = React.useRef(null);
-    var dir = 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(ChipListSelectionContext), selection = _b[0], dispatchSelection = _b[1];
-    var _c = React.useContext(ChipListFocusContext), focus = _c[0], dispatchFocus = _c[1];
-    var _d = React.useContext(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_ACTION.toggle, payload: props.value, event: event });
-    }, [dispatchSelection, props.value]);
-    var handleRemove = React.useCallback(function (event) {
-        if (!props.removable) {
-            return;
-        }
-        dispatchData({ type: CHIP_DATA_ACTION.remove, payload: props.value, event: event });
-        dispatchFocus({ type: FOCUS_ACTION.reset, payload: props.value, event: event });
-        dispatchSelection({ type: 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 Keys.left:
-                dispatchFocus({ type: FOCUS_ACTION.prev, payload: props.value, event: event });
-                break;
-            case Keys.right:
-                dispatchFocus({ type: FOCUS_ACTION.next, payload: props.value, event: event });
-                break;
-            case Keys.enter:
-                dispatchSelection({ type: SELECTION_ACTION.toggle, payload: props.value, event: event });
-                break;
-            case 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_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 = 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: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-chip', (_a = {
-                'k-rtl': dir === 'rtl',
-                'k-disabled': props.disabled,
-                'k-selected': selected,
-                'k-focus': focused
-            },
-            _a["k-chip-".concat(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-rounded-".concat(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(IconWrap, { className: 'k-chip-icon', name: props.selectedIcon ? toIconName(props.selectedIcon) : undefined, icon: props.selectedSvgIcon, size: 'small' }),
-        (props.icon || props.svgIcon) &&
-            React.createElement(IconWrap, { className: 'k-chip-icon', name: props.icon ? 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: classNames('k-chip-action', 'k-chip-remove-action'), onClick: handleRemove },
-                React.createElement(IconWrap, { name: props.removeIcon ? toIconName(props.removeIcon) : undefined, icon: props.removeSvgIcon || 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: svgIconPropType,
-    disabled: PropTypes.bool,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    selectedIcon: PropTypes.string,
-    selectedIconSvg: 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'
-};
-Chip.displayName = 'KendoReactChip';
-// TODO: delete casting when @types/react is updated!
-Chip.propTypes = propTypes;
-Chip.defaultProps = defaultProps;

package/dist/es/Chip/ChipList.d.ts

@@ -1,123 +0,0 @@
-import * as React from 'react';
-import { FormComponentProps, KendoMouse } from '@progress/kendo-react-common';
-import { ChipProps } from './Chip';
-import { ChipListChangeEvent, ChipListDataChangeEvent } from './../models/index';
-/**
- * Represents the properties of [ChipList]({% slug api_buttons_chiplist %}) component.
- */
-export interface ChipListProps extends FormComponentProps, KendoMouse<ChipListHandle, HTMLDivElement> {
-    /**
-     * Sets the `id` property of the top div element of the ChipList.
-     */
-    id?: string;
-    /**
-     * Sets additional classes to the ChipList.
-     */
-    className?: string;
-    /**
-     * Sets the `tabIndex` attribute.
-     */
-    tabIndex?: number;
-    /**
-     * Sets additional CSS styles to the ChipList.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Represents Chip component.
-     */
-    chip?: React.ComponentType<ChipProps>;
-    /**
-     * Represents the data about the child Chips.
-     */
-    data?: any;
-    /**
-     * Represents the default data about the child Chips.
-     */
-    defaultData?: any[];
-    /**
-     * Triggered after Chip data change.
-     */
-    onDataChange?: (event: ChipListDataChangeEvent) => void;
-    /**
-     * Represents the selection state of Chip component.
-     */
-    value?: any | any[];
-    /**
-     * Represents the default value of the selection state of Chip component.
-     */
-    defaultValue?: any | any[];
-    /**
-     * Triggered after value change.
-     */
-    onChange?: (event: ChipListChangeEvent) => void;
-    /**
-     * Represents the selection state of Chip component.
-     */
-    selection?: string;
-    /**
-     * Represents the `text` field of Chip, used for the `label`.
-     */
-    textField?: string;
-    /**
-     * Represents the `value` field of Chip, used for setting the Chip `id`.
-     */
-    valueField?: string;
-    /**
-     * Determines of ChipList is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The ChipList direction 'ltr' as default or 'rtl'.
-     */
-    dir?: string;
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Configures the `size` of the ChipList.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-}
-/**
- * Represents the target(element and props) of the ChipListChangeEvent.
- */
-export interface ChipListHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props values of the ChipList.
-     */
-    props: ChipListProps;
-}
-/**
- * @hidden
- */
-export declare const ChipListSelectionContext: React.Context<[string | string[] | null, Function]>;
-/**
- * @hidden
- */
-export declare const ChipListFocusContext: React.Context<[string | string[] | null, Function]>;
-/**
- * @hidden
- */
-export declare const ChipListDataContext: React.Context<[string | null, Function]>;
-/**
- * Represents the ChipList component.
- */
-export declare const ChipList: React.ForwardRefExoticComponent<ChipListProps & React.RefAttributes<ChipListHandle | null>>;