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

package/dist/es/slider/Slider.d.ts

@@ -1,193 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { FormComponentProps, BaseEvent } from '@progress/kendo-react-common';
-import { Direction } from '../interfaces/Direction';
-/**
- * The arguments for the `onChange` Slider event.
- */
-export interface SliderChangeEvent extends BaseEvent<Slider> {
-    /**
-     * The current value of the Slider.
-     */
-    value: number;
-}
-/**
- * Represents the props of the [KendoReact Slider component]({% slug overview_slider %}).
- */
-export interface SliderProps extends FormComponentProps {
-    children?: React.ReactNode;
-    /**
-     * The value of the Slider.
-     */
-    value?: number;
-    /**
-     * The default value of the Slider.
-     */
-    defaultValue?: number;
-    /**
-     * The minimum value of the Slider.
-     */
-    min: number;
-    /**
-     * The maximum value of the Slider.
-     */
-    max: number;
-    /**
-     * Specifies the step of the value increase and decrease.
-     */
-    step?: number;
-    /**
-     * Determines the event handler that will be fired when the user edits the value.
-     */
-    onChange?: (event: SliderChangeEvent) => void;
-    /**
-     * The styles that are applied to the Slider.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets additional classes to the Slider.
-     */
-    className?: string;
-    /**
-     * Renders the arrow side buttons of the Slider if set to true.
-     */
-    buttons?: boolean;
-    /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
-     * of the Slider.
-     */
-    tabIndex?: number;
-    /**
-     * Determines whether the Slider is disabled.
-     *
-     * @example
-     * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <Slider disabled={true} min={0} max={10} defaultValue={5} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
-     * ```
-     */
-    disabled?: boolean;
-    /**
-     * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
-     * ([see example]({% slug orientation_slider %})).
-     */
-    vertical?: boolean;
-    /**
-     * Specifies the id of the component.
-     */
-    id?: 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;
-    /**
-     * The accessible label of the component.
-     */
-    ariaLabel?: string;
-    dir?: Direction;
-}
-/**
- * @hidden
- */
-interface SliderState {
-    value: number;
-    focused: boolean;
-    dir?: Direction;
-}
-/** @hidden */
-export declare class SliderWithoutContext extends React.Component<SliderProps, SliderState> {
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        min: PropTypes.Validator<number>;
-        max: PropTypes.Validator<number>;
-        value: PropTypes.Requireable<number>;
-        vertical: PropTypes.Requireable<boolean>;
-        id: PropTypes.Requireable<string>;
-        ariaLabelledBy: PropTypes.Requireable<string>;
-        ariaDescribedBy: PropTypes.Requireable<string>;
-        ariaLabel: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: SliderProps, state: SliderState): {
-        value: number;
-    } | null;
-    /**
-     * @hidden
-     */
-    state: {
-        value: number;
-        focused: boolean;
-        dir: Direction | undefined;
-    };
-    private _sliderTrack;
-    private _element;
-    constructor(props: SliderProps);
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    buttons: (props: any) => any;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    /**
-     * @hidden
-     */
-    get sliderTrack(): HTMLDivElement | null;
-    private isLabel;
-    private onFocus;
-    private onBlur;
-    private onKeyDown;
-    private decrement;
-    private increment;
-    private dragStart;
-    private dragOver;
-    private drag;
-    private change;
-}
-/**
- * Represents the PropsContext of the `Slider` component.
- * Used for global configuration of all `Slider` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export declare const SliderPropsContext: React.Context<(p: SliderProps) => SliderProps>;
-/**
- * Represent the `ref` of the Slider component.
- */
-export interface SliderHandle extends Pick<SliderWithoutContext, keyof SliderWithoutContext> {
-}
-/** @hidden */
-export declare type Slider = SliderHandle;
-/**
- * Represents the [KendoReact Slider component]({% slug overview_slider %}).
- *
- * Accepts properties of type [SliderProps]({% slug api_inputs_sliderprops %}).
- * Obtaining the `ref` returns an object of type [SliderHandle]({% slug api_inputs_sliderhandle %}).
- */
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<any>>;
-export {};

package/dist/es/slider/Slider.js

@@ -1,256 +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 { dispatchEvent, Keys, classNames, Draggable, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
-import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
-import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages';
-import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { Button } from '@progress/kendo-react-buttons';
-import { caretAltDownIcon, caretAltLeftIcon, caretAltUpIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
-/** @hidden */
-var SliderWithoutContext = /** @class */ (function (_super) {
-    __extends(SliderWithoutContext, _super);
-    function SliderWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {
-            value: _this.props.defaultValue === undefined ? _this.props.min : _this.props.defaultValue,
-            focused: false,
-            dir: _this.props.dir
-        };
-        _this._sliderTrack = null;
-        _this._element = null;
-        /**
-         * @hidden
-         */
-        _this.buttons = function (props) {
-            if (!props.enabled) {
-                return props.children;
-            }
-            var increaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? caretAltUpIcon : caretAltLeftIcon) : (_this.props.vertical ? caretAltUpIcon : caretAltRightIcon);
-            var decreaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? caretAltDownIcon : caretAltRightIcon) : (_this.props.vertical ? caretAltDownIcon : caretAltLeftIcon);
-            var increaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-left') : (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-right');
-            var decreaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-right') : (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-left');
-            return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: decreaseFontArrow, svgIcon: decreaseSvgArrow, title: props.decrementTitle, onClick: props.decrement }),
-                props.children,
-                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: increaseFontArrow, svgIcon: increaseSvgArrow, title: props.incrementTitle, onClick: props.increment })));
-        };
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this._element) {
-                _this._element.focus();
-            }
-        };
-        _this.isLabel = function (target) {
-            var currentTarget = target;
-            while (currentTarget) {
-                if (Boolean(currentTarget.getAttribute(SLIDER_LABEL_ATTRIBUTE))) {
-                    return true;
-                }
-                currentTarget = currentTarget.parentElement;
-            }
-            return false;
-        };
-        _this.onFocus = function () {
-            _this.setState({ focused: true });
-        };
-        _this.onBlur = function () {
-            _this.setState({ focused: false });
-        };
-        _this.onKeyDown = function (e) {
-            var newValue = undefined;
-            if (e.keyCode === Keys.left || e.keyCode === Keys.down) {
-                newValue = _this.state.value - (_this.props.step || 0);
-            }
-            else if (e.keyCode === Keys.right || e.keyCode === Keys.up) {
-                newValue = _this.state.value + (_this.props.step || 0);
-            }
-            else if (e.keyCode === Keys.home) {
-                newValue = _this.props.min;
-            }
-            else if (e.keyCode === Keys.end) {
-                newValue = _this.props.max;
-            }
-            if (newValue !== undefined) {
-                e.preventDefault();
-                _this.change(e, newValue);
-            }
-        };
-        _this.decrement = function (e) {
-            e.preventDefault();
-            _this.change(e, _this.state.value - (_this.props.step || 0));
-        };
-        _this.increment = function (e) {
-            e.preventDefault();
-            _this.change(e, _this.state.value + (_this.props.step || 0));
-        };
-        _this.dragStart = function (e) {
-            if (!_this.isLabel(e.event.originalEvent.target)) {
-                if (e.event.isTouch) {
-                    e.event.originalEvent.preventDefault();
-                }
-                _this.drag(e);
-            }
-        };
-        _this.dragOver = function (e) {
-            e.event.originalEvent.preventDefault();
-            _this.drag(e);
-        };
-        _this.drag = function (e) {
-            var computed = e.element.getBoundingClientRect();
-            var distance = _this.props.vertical
-                ? (computed.bottom - e.event.clientY)
-                : (_this.state.dir === 'rtl'
-                    ? computed.right - e.event.clientX
-                    : e.event.clientX - computed.left);
-            var size = _this.props.vertical ? computed.height : computed.width;
-            var percentage = (distance / size);
-            _this.change(e, _this.props.min + percentage * (_this.props.max - _this.props.min));
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    SliderWithoutContext.getDerivedStateFromProps = function (props, state) {
-        var value = props.value !== undefined ? props.value : state.value;
-        var min = props.min, max = props.max;
-        return value === undefined ? null :
-            { value: Math.min(Math.max(value, min), max) };
-    };
-    /**
-     * @hidden
-     */
-    SliderWithoutContext.prototype.componentDidMount = function () {
-        if (!this.state.dir && window && this._element) {
-            // Note: getComputedStyle forces reflow
-            var direction = window.getComputedStyle(this._element).direction;
-            if (direction) {
-                this.setState({ dir: direction });
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    SliderWithoutContext.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var lS = provideLocalizationService(this);
-        var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
-        var trackStyles = this.props.vertical
-            ? { marginTop: '0.5rem', marginBottom: '0.5rem' }
-            : { marginLeft: '0.5rem', marginRight: '0.5rem' };
-        var sliderItemsStyle = this.props.vertical
-            ? { paddingTop: 0, height: '100%' }
-            : {};
-        return (React.createElement("div", { ref: function (el) { return _this._element = el; }, dir: this.state.dir, id: this.props.id, style: __assign({ gap: 0 }, this.props.style), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider', {
-                'k-focus': this.state.focused,
-                'k-disabled': this.props.disabled,
-                'k-slider-horizontal': !this.props.vertical,
-                'k-slider-vertical': this.props.vertical
-            }, this.props.className) },
-            React.createElement(this.buttons, { enabled: this.props.buttons, decrement: this.decrement, increment: this.increment, incrementTitle: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue]), decrementTitle: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue]) },
-                React.createElement(Draggable, { onDrag: this.dragOver, onPress: this.dragStart },
-                    React.createElement("div", { className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
-                        this.props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(this.props.children, function (child) {
-                            return child && React.cloneElement(child, {
-                                position: 100 * (child.props.position - _this.props.min) /
-                                    (_this.props.max - _this.props.min),
-                                vertical: _this.props.vertical
-                            }, child.props.children);
-                        }))),
-                        React.createElement("div", { className: "k-slider-track", style: this.props.vertical
-                                ? { bottom: 0, height: '100%' }
-                                : (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },
-                            React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
-                                    ? { height: percentValue + '%' }
-                                    : { width: percentValue + '%' } }),
-                            React.createElement("span", { role: "slider", "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-valuetext": String(this.state.value), "aria-orientation": this.props.vertical ? 'vertical' : undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
-                                    ? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
-                                    : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
-                                        : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
-    };
-    Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._sliderTrack;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SliderWithoutContext.prototype.change = function (e, value) {
-        value = Math.min(Math.max(value, this.props.min), this.props.max);
-        this.setState({ value: value });
-        dispatchEvent(this.props.onChange, e, this, { value: value });
-    };
-    SliderWithoutContext.displayName = 'Slider';
-    /**
-     * @hidden
-     */
-    SliderWithoutContext.propTypes = {
-        min: PropTypes.number.isRequired,
-        max: PropTypes.number.isRequired,
-        value: PropTypes.number,
-        vertical: PropTypes.bool,
-        id: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string,
-        ariaLabel: PropTypes.string
-        // TODO: validation when buttons is set to true, but no step is provided
-    };
-    return SliderWithoutContext;
-}(React.Component));
-export { SliderWithoutContext };
-/**
- * Represents the PropsContext of the `Slider` component.
- * Used for global configuration of all `Slider` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export var SliderPropsContext = createPropsContext();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact Slider component]({% slug overview_slider %}).
- *
- * Accepts properties of type [SliderProps]({% slug api_inputs_sliderprops %}).
- * Obtaining the `ref` returns an object of type [SliderHandle]({% slug api_inputs_sliderhandle %}).
- */
-export var Slider = withPropsContext(SliderPropsContext, SliderWithoutContext);
-Slider.displayName = 'KendoReactSlider';
-registerForLocalization(SliderWithoutContext);

package/dist/es/slider/SliderLabel.js

@@ -1,30 +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 { useDir } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var SLIDER_LABEL_ATTRIBUTE = 'data-slider-label';
-/**
- * Represents the KendoReact SliderLabel component.
- */
-export var SliderLabel = function (props) {
-    var _a, _b;
-    var sliderLabelRef = React.useRef(null);
-    var dir = useDir(sliderLabelRef);
-    var style = props.vertical
-        ? { bottom: "".concat(props.position, "%") }
-        : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a);
-    var tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
-    return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) }, props.children && React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
-};