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

package/dist/es/rating/Rating.js

@@ -1,283 +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 { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsContext, IconWrap, toIconName, svgIconPropType } from '@progress/kendo-react-common';
-import { starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
-import { RatingItem } from './RatingItem';
-import { ratingReducer, RATING_ACTION } from './rating-reducer';
-import { isSelected, isHalf, calcIsFirstHalf, isCorrectValue, toRound, getRemainder } from './utils';
-import { messages, ratingAriaLabel } from '../messages';
-import { useLocalization } from '@progress/kendo-react-intl';
-/**
- * @hidden
- */
-var useRating = function (defaultValue, args, callback) {
-    var _a = React.useState(defaultValue), state = _a[0], setState = _a[1];
-    var handleDispatchAction = function (action) {
-        var newState = ratingReducer(args.state || state, __assign(__assign({}, action), args));
-        if (callback) {
-            callback(newState, action.event);
-        }
-        setState(newState);
-    };
-    return [state, handleDispatchAction];
-};
-/**
- * Represents the PropsContext of the `Rating` component.
- * Used for global configuration of all `Rating` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export var RatingPropsContext = createPropsContext();
-/**
- * Represents the [KendoReact Rating component]({% slug overview_rating %}).
- *
- * Accepts properties of type [RatingProps]({% slug api_inputs_ratingprops %}).
- * Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
- */
-export var Rating = React.forwardRef(function (directProps, ref) {
-    var props = usePropsContext(RatingPropsContext, directProps);
-    var localization = useLocalization();
-    var target = React.useRef(null);
-    var ratingRef = React.useRef(null);
-    var dir = useDir(ratingRef, props.dir);
-    React.useImperativeHandle(target, function () { return ({
-        element: ratingRef.current,
-        props: props
-    }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var handleChange = React.useCallback(function (newValue, event) {
-        if (props.onChange && target.current) {
-            props.onChange.call(undefined, {
-                value: newValue,
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onChange]);
-    var min = React.useMemo(function () { return props.min !== undefined ? props.min : defaultProps.min; }, [props.min]);
-    var max = React.useMemo(function () { return props.max !== undefined ? props.max : defaultProps.max; }, [props.max]);
-    var precision = React.useMemo(function () { return props.precision || defaultProps.precision; }, [props.precision]);
-    var step = React.useMemo(function () { return props.step !== undefined ? props.step : defaultProps.step; }, [props.step]);
-    var readonly = React.useMemo(function () { return props.readonly || defaultProps.readonly; }, [props.readonly]);
-    var disabled = React.useMemo(function () { return props.disabled || defaultProps.disabled; }, [props.disabled]);
-    var Item = React.useMemo(function () { return props.item || defaultProps.item; }, [props.item]);
-    var _a = useRating(props.defaultValue !== undefined ? props.defaultValue : defaultProps.defaultValue, {
-        state: props.value,
-        min: min,
-        max: max,
-        step: precision === 'half' ? step / 2 : step
-    }, handleChange), stateValue = _a[0], dispatchStateValue = _a[1];
-    var _b = useRating(null, {
-        state: props.value,
-        min: min,
-        max: max,
-        step: precision === 'half' ? step / 2 : step,
-        precision: precision
-    }), stateHover = _b[0], dispatchStateHover = _b[1];
-    var value = React.useMemo(function () { return props.value !== undefined ? props.value : stateValue; }, [props.value, stateValue]);
-    var hoveredValue = React.useMemo(function () { return stateHover; }, [stateHover]);
-    var selection = React.useMemo(function () { return props.selection || defaultProps.selection; }, [props.selection]);
-    var base = React.useMemo(function () { return step / (precision === 'half' ? 2 : 1); }, [step, precision]);
-    var handleItemClick = React.useCallback(function (event) {
-        if (!event.target || !event.target.element || readonly || disabled) {
-            return;
-        }
-        if (precision === 'half') {
-            var rect = event.target.element.getBoundingClientRect();
-            var isFirstHalf = calcIsFirstHalf(dir ? dir : 'ltr', rect, event.syntheticEvent.clientX);
-            var payload = isFirstHalf ? toRound(event.target.value - (step / 2), base) : event.target.value;
-            dispatchStateValue({ type: RATING_ACTION.select, payload: payload, event: event.syntheticEvent });
-        }
-        else {
-            dispatchStateValue({ type: RATING_ACTION.select, payload: event.target.value, event: event.syntheticEvent });
-        }
-        if (props.onClick) {
-            var ev = {
-                value: value,
-                target: target.current,
-                syntheticEvent: event.syntheticEvent
-            };
-            props.onClick.call(undefined, ev);
-        }
-    }, [props.onClick, dispatchStateValue, value]);
-    var handleKeyDown = React.useCallback(function (syntheticEvent) {
-        if (readonly || disabled) {
-            return;
-        }
-        switch (syntheticEvent.keyCode) {
-            case Keys.right:
-                syntheticEvent.preventDefault();
-                dispatchStateValue({
-                    type: dir === 'rtl' ? RATING_ACTION.decrease : RATING_ACTION.increase, event: syntheticEvent
-                });
-                break;
-            case Keys.left:
-                syntheticEvent.preventDefault();
-                dispatchStateValue({
-                    type: dir === 'rtl' ? RATING_ACTION.increase : RATING_ACTION.decrease, event: syntheticEvent
-                });
-                break;
-            case Keys.home:
-                syntheticEvent.preventDefault();
-                dispatchStateValue({
-                    type: dir === 'rtl' ? RATING_ACTION.min : RATING_ACTION.max, event: syntheticEvent
-                });
-                break;
-            case Keys.end:
-                syntheticEvent.preventDefault();
-                dispatchStateValue({
-                    type: dir === 'rtl' ? RATING_ACTION.max : RATING_ACTION.min, event: syntheticEvent
-                });
-                break;
-            case Keys.esc:
-                syntheticEvent.preventDefault();
-                dispatchStateValue({
-                    type: RATING_ACTION.deselect, event: syntheticEvent
-                });
-                break;
-            default:
-                break;
-        }
-        if (props.onKeyDown) {
-            props.onKeyDown.call(undefined, {
-                value: value,
-                target: target.current,
-                syntheticEvent: syntheticEvent
-            });
-        }
-    }, [props.onKeyDown, dispatchStateValue, value]);
-    var handleFocus = React.useCallback(function (syntheticEvent) {
-        if (props.onFocus) {
-            var ev = {
-                target: target.current,
-                syntheticEvent: syntheticEvent
-            };
-            props.onFocus.call(undefined, ev);
-        }
-    }, [props.onFocus]);
-    var handleBlur = React.useCallback(function (syntheticEvent) {
-        if (props.onBlur) {
-            var ev = {
-                target: target.current,
-                syntheticEvent: syntheticEvent
-            };
-            props.onBlur.call(undefined, ev);
-        }
-    }, [props.onBlur]);
-    var handleItemMouseMove = React.useCallback(function (event) {
-        if (!event.target || !event.target.element) {
-            return;
-        }
-        if (precision === 'half') {
-            var rect = event.target.element.getBoundingClientRect();
-            var isFirstHalf = calcIsFirstHalf(dir ? dir : 'ltr', rect, event.syntheticEvent.clientX);
-            var payload = isFirstHalf ? event.target.value - (step / 2) : event.target.value;
-            dispatchStateHover({ type: RATING_ACTION.select, payload: payload, event: event.syntheticEvent });
-        }
-        else {
-            dispatchStateHover({ type: RATING_ACTION.select, payload: event.target.value, event: event.syntheticEvent });
-        }
-    }, [precision, step, dir]);
-    var handleMouseLeave = React.useCallback(function (event) {
-        dispatchStateHover({ type: RATING_ACTION.reset, event: event.syntheticEvent });
-    }, []);
-    var items = [];
-    var remainder = getRemainder(toRound(max - min, base), step);
-    for (var i = min; i <= max; i = toRound(i + step, base)) {
-        var itemValue = toRound(i + remainder, base);
-        var half = precision === 'half'
-            ? isHalf(itemValue, hoveredValue !== null ? hoveredValue : (value !== null ? value : 0), step)
-            : false;
-        var selectedValue = isSelected(itemValue, value, step, selection);
-        var selected = isSelected(itemValue, hoveredValue !== null ? hoveredValue : value, step, selection);
-        var hovered = isSelected(itemValue, hoveredValue, step, selection);
-        items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, svgIcon: props.svgIcon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
-            half && (React.createElement("span", { className: 'k-rating-precision-complement' },
-                !(props.icon || props.svgIconOutline) &&
-                    React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 50% 0 0)' : 'inset(0 0 0 50%)') }, size: 'xlarge' }),
-                (props.icon || props.svgIconOutline) &&
-                    React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))),
-            half && (React.createElement("span", { className: 'k-rating-precision-part' },
-                !(props.icon || props.svgIcon) &&
-                    React.createElement(IconWrap, { name: 'star', icon: starIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)') }, size: 'xlarge' }),
-                (props.icon || props.svgIcon) &&
-                    React.createElement(IconWrap, { name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon, size: 'xlarge' }))),
-            half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
-            !half &&
-                (!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: 'star', icon: starIcon, size: 'xlarge' })) ||
-                (!(props.icon || props.svgIcon) && !hovered && !selected && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon, size: 'xlarge' })) ||
-                ((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: props.icon, icon: props.svgIcon, size: 'xlarge' })) ||
-                ((props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))));
-    }
-    return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating', {
-            'k-rtl': dir === 'rtl',
-            'k-readonly': readonly,
-            'k-disabled': disabled
-        }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": localization.toLanguageString(ratingAriaLabel, messages[ratingAriaLabel]), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
-        React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),
-        React.createElement("span", { className: 'k-rating-container' }, items),
-        props.label &&
-            React.createElement("span", { className: 'k-rating-label' }, props.label)));
-});
-var propTypes = {
-    id: PropTypes.string,
-    dir: PropTypes.oneOf(['ltr', 'rtl']),
-    selection: PropTypes.oneOf(['continues', 'single']),
-    precision: PropTypes.oneOf(['item', 'half']),
-    value: function (props, propName, componentName) {
-        if (props.value && props.min && props.max && props.step) {
-            var correctValue = props.precision === 'half'
-                ? isCorrectValue(props.min, props.max, props.step / 2, props.value)
-                : isCorrectValue(props.min, props.max, props.step, props.value);
-            if (!correctValue && props.precision === 'half') {
-                return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                    The value of the { value } property is not correct, please check your values.\n                    "));
-            }
-        }
-        return null;
-    },
-    defaultValue: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    step: function (props, propName, componentName) {
-        if (props.step !== undefined && props.step <= 0) {
-            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                The value of the { step } property is cannot be equal or less than \"0\", please check your values.\n                "));
-        }
-        return null;
-    },
-    hovered: PropTypes.number,
-    label: PropTypes.string,
-    readonly: PropTypes.bool,
-    disabled: PropTypes.bool,
-    half: PropTypes.bool,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    svgIconOutline: svgIconPropType,
-    ariaDescribedBy: PropTypes.string
-};
-var defaultProps = {
-    dir: 'ltr',
-    min: 1,
-    max: 5,
-    step: 1,
-    item: RatingItem,
-    defaultValue: null,
-    readonly: false,
-    disabled: false,
-    selection: 'continues',
-    precision: 'item'
-};
-Rating.displayName = 'KendoReactRating';
-// TODO: delete casting when @types/react is updated!
-Rating.propTypes = propTypes;
-Rating.defaultProps = defaultProps;

package/dist/es/rating/RatingItem.js

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, useDir } from '@progress/kendo-react-common';
-/**
- * Represents the RatingItem component.
- */
-export var RatingItem = React.forwardRef(function (props, ref) {
-    var target = React.useRef(null);
-    var element = React.useRef(null);
-    var dir = useDir(element, props.dir);
-    React.useImperativeHandle(target, function () { return ({
-        element: element.current,
-        props: props,
-        value: props.value
-    }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var handleClick = React.useCallback(function (event) {
-        if (props.onClick) {
-            props.onClick.call(undefined, {
-                value: props.value,
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onClick, props.value]);
-    var handleKeyDown = React.useCallback(function (event) {
-        if (props.onKeyDown) {
-            props.onKeyDown.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onKeyDown]);
-    var handleFocus = React.useCallback(function (event) {
-        if (props.onFocus) {
-            props.onFocus.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onFocus]);
-    var handleBlur = React.useCallback(function (event) {
-        if (props.onBlur) {
-            props.onBlur.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onBlur]);
-    var handleMouseMove = React.useCallback(function (event) {
-        if (props.onMouseMove) {
-            props.onMouseMove.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onMouseMove]);
-    var handleMouseEnter = React.useCallback(function (event) {
-        if (props.onMouseEnter) {
-            props.onMouseEnter.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onMouseEnter]);
-    var handleMouseLeave = React.useCallback(function (event) {
-        if (props.onMouseLeave) {
-            props.onMouseLeave.call(undefined, {
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [props.onMouseLeave]);
-    return (React.createElement("span", { id: props.id, ref: element, dir: dir, "data-half": props.half, tabIndex: props.tabIndex, title: props.title, style: props.style, className: classNames('k-rating-item', {
-            'k-rtl': dir === 'rtl',
-            'k-selected': props.selected,
-            'k-hover': props.hovered
-        }, props.className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }, props.children));
-});
-var propTypes = {
-    id: PropTypes.string,
-    icon: PropTypes.any,
-    dir: PropTypes.oneOf(['ltr', 'rtl']),
-    title: PropTypes.string,
-    value: PropTypes.number,
-    half: PropTypes.bool,
-    selected: PropTypes.bool,
-    hovered: PropTypes.bool
-};
-var defaultProps = {
-    dir: 'ltr'
-};
-RatingItem.displayName = 'KendoReactRatingItem';
-// TODO: delete casting when @types/react is updated!
-RatingItem.propTypes = propTypes;
-RatingItem.defaultProps = defaultProps;

package/dist/es/rating/models/index.js

@@ -1 +0,0 @@
-export {};

package/dist/es/rating/rating-reducer.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-/**
- * @hidden
- */
-export declare enum RATING_ACTION {
-    select = "select",
-    deselect = "deselect",
-    increase = "increase",
-    decrease = "decrease",
-    min = "min",
-    max = "max",
-    reset = "reset"
-}
-/**
- * @hidden
- */
-export declare type RatingActionDispatch = {
-    type: RATING_ACTION;
-    payload?: number;
-    event?: React.SyntheticEvent<any>;
-};
-/**
- * @hidden
- */
-export declare type RatingAction = {
-    min: number;
-    max: number;
-    step?: number;
-};
-/**
- * @hidden
- */
-export declare const ratingReducer: (state: any, action: RatingAction & RatingActionDispatch) => any;

package/dist/es/rating/rating-reducer.js

@@ -1,63 +0,0 @@
-import { toRound } from './utils';
-/**
- * @hidden
- */
-export var RATING_ACTION;
-(function (RATING_ACTION) {
-    RATING_ACTION["select"] = "select";
-    RATING_ACTION["deselect"] = "deselect";
-    RATING_ACTION["increase"] = "increase";
-    RATING_ACTION["decrease"] = "decrease";
-    RATING_ACTION["min"] = "min";
-    RATING_ACTION["max"] = "max";
-    RATING_ACTION["reset"] = "reset";
-})(RATING_ACTION || (RATING_ACTION = {}));
-/**
- * @hidden
- */
-export var ratingReducer = function (state, action) {
-    switch (action.type) {
-        case RATING_ACTION.select:
-            if (action.payload === undefined || action.step === undefined) {
-                return state;
-            }
-            if (action.payload === state) {
-                return null;
-            }
-            return action.payload >= action.min
-                ? action.payload < action.max
-                    ? toRound(action.payload, action.step)
-                    : action.max
-                : action.min;
-        case RATING_ACTION.deselect:
-            return null;
-        case RATING_ACTION.increase:
-            if (action.step === undefined) {
-                return state;
-            }
-            if (state < action.min) {
-                return action.min;
-            }
-            return state + action.step < action.max
-                ? toRound(state + action.step, action.step)
-                : action.max;
-        case RATING_ACTION.decrease:
-            if (action.step === undefined) {
-                return state;
-            }
-            return toRound(state - action.step, action.step) >= action.min
-                ? toRound(state - action.step, action.step)
-                : action.min;
-        case RATING_ACTION.min:
-            if (action.step === undefined) {
-                return state;
-            }
-            return action.min;
-        case RATING_ACTION.max:
-            return action.max;
-        case RATING_ACTION.reset:
-            return null;
-        default:
-            return state;
-    }
-};

package/dist/es/rating/utils/index.d.ts

@@ -1,24 +0,0 @@
-/**
- * @hidden
- */
-export declare const toRound: (num: number, base: number) => number;
-/**
- * @hidden
- */
-export declare const getRemainder: (x: number, y: number) => number;
-/**
- * @hidden
- */
-export declare const isHalf: (index: number, value: number, step: number) => boolean;
-/**
- * @hidden
- */
-export declare const isSelected: (index: number, value: number | null, step: number, selection: 'single' | 'continues') => boolean;
-/**
- * @hidden
- */
-export declare const calcIsFirstHalf: (dir: string, rect: any, clientX: number) => boolean;
-/**
- * @hidden
- */
-export declare const isCorrectValue: (min: number, max: number, step: number, value: number) => boolean;

package/dist/es/rating/utils/index.js

@@ -1,64 +0,0 @@
-/**
- * @hidden
- */
-export var toRound = function (num, base) {
-    if (num % 1) {
-        var percent = Math.pow(10, (base.toString().split('.')[1] || base.toString().split('.')[0]).length);
-        return Math.round(num * percent) / percent;
-    }
-    return num;
-};
-// Opting out of JS `modulo` calculation due to floating-point problems in JS
-// We're looking for the reminder - R.
-// x / y = a + R
-// R = (x / y) - a | *y
-// R = x - (y * a)
-// : a = Math.floor(x /y );
-/**
- * @hidden
- */
-export var getRemainder = function (x, y) { return x - (y * Math.floor(x / y)); };
-/**
- * @hidden
- */
-export var isHalf = function (index, value, step) {
-    return (toRound(index - step, step) < value) && (value < index);
-};
-/**
- * @hidden
- */
-export var isSelected = function (index, value, step, selection) {
-    if (value === null) {
-        return false;
-    }
-    if (selection === 'continues') {
-        return isHalf(index, value, step)
-            ? toRound(index - step / 2, step / 2) <= value
-            : index <= value;
-    }
-    if (selection === 'single') {
-        return isHalf(index, value, step)
-            ? toRound(index - step / 2, step / 2) === value
-            : index === value;
-    }
-    return false;
-};
-/**
- * @hidden
- */
-export var calcIsFirstHalf = function (dir, rect, clientX) {
-    return dir === 'ltr'
-        ? clientX < (rect.x + (rect.width / 2))
-        : clientX > (rect.x + (rect.width / 2));
-};
-/**
- * @hidden
- */
-export var isCorrectValue = function (min, max, step, value) {
-    for (var i = min; i <= max; i += step) {
-        if (value === i) {
-            return true;
-        }
-    }
-    return false;
-};