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

package/dist/npm/radiobutton/RadioButton.js

@@ -1,111 +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);
-};
-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.RadioButton = exports.RadioButtonPropsContext = 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");
-/**
- * Represents the PropsContext of the `RadioButton` component.
- * Used for global configuration of all `RadioButton` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-exports.RadioButtonPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/**
- * Represents the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
- *
- * Accepts properties of type [RadioButtonProps]({% slug api_inputs_radiobuttonprops %}).
- * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
- */
-exports.RadioButton = React.forwardRef(function (directProps, target) {
-    var _a;
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var props = (0, kendo_react_common_1.usePropsContext)(exports.RadioButtonPropsContext, directProps);
-    var ariaDescribedBy = props.ariaDescribedBy, checked = props.checked, children = props.children, className = props.className, disabled = props.disabled, id = props.id, size = props.size, label = props.label, labelPlacement = props.labelPlacement, name = props.name, style = props.style, tabIndex = props.tabIndex, value = props.value, valid = props.valid, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, others = __rest(props, ["ariaDescribedBy", "checked", "children", "className", "disabled", "id", "size", "label", "labelPlacement", "name", "style", "tabIndex", "value", "valid", "onChange", "onFocus", "onBlur"]);
-    var elementRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            elementRef.current.focus();
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
-    var handleChange = React.useCallback(function (event) {
-        (0, kendo_react_common_1.dispatchEvent)(onChange, event, getImperativeHandle(), { value: value });
-    }, [onChange, value, disabled]);
-    var handleFocus = React.useCallback(function (event) {
-        if (onFocus && !disabled) {
-            (0, kendo_react_common_1.dispatchEvent)(onFocus, event, getImperativeHandle(), undefined);
-        }
-    }, [onFocus, disabled]);
-    var handleBlur = React.useCallback(function (event) {
-        if (onBlur && !disabled) {
-            (0, kendo_react_common_1.dispatchEvent)(onBlur, event, getImperativeHandle(), undefined);
-        }
-    }, [onBlur, disabled]);
-    var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: (0, kendo_react_common_1.classNames)('k-radio', (_a = {},
-            _a["k-radio-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a['k-invalid'] = valid === false,
-            _a), className), ref: elementRef, disabled: disabled, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
-    var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement("label", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, "aria-label": label }, label)) : null));
-    var radio = React.createElement("input", __assign({}, inputProps));
-    return (labelPlacement === 'before'
-        ? (React.createElement(React.Fragment, null,
-            radioButtonLabel,
-            radio,
-            children)) : (React.createElement(React.Fragment, null,
-        radio,
-        radioButtonLabel,
-        children)));
-});
-exports.RadioButton.propTypes = {
-    ariaDescribedBy: PropTypes.string,
-    checked: PropTypes.bool,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    label: PropTypes.string,
-    labelPlacement: PropTypes.string,
-    name: PropTypes.string,
-    style: PropTypes.object,
-    tabIndex: PropTypes.number,
-    value: PropTypes.any,
-    valid: PropTypes.bool,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func
-};
-var defaultProps = {
-    size: 'medium'
-};
-exports.RadioButton.displayName = 'KendoRadioButton';
-exports.RadioButton.defaultProps = defaultProps;

package/dist/npm/radiobutton/RadioGroup.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { RadioGroupProps } from './interfaces/RadioGroupProps';
-/**
- * The RadioGroup ref.
- */
-export interface RadioGroupHandle {
-    element: HTMLUListElement | null;
-    focus: any;
-}
-/**
- * Represents the PropsContext of the `RadioGroup` component.
- * Used for global configuration of all `RadioGroup` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export declare const RadioGroupPropsContext: React.Context<(p: RadioGroupProps) => RadioGroupProps>;
-/**
- * Represents the [KendoReact RadioGroup component]({% slug overview_radiogroup %}).
- *
- * Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).
- * Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).
- */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<RadioGroupHandle | null>>;

package/dist/npm/radiobutton/RadioGroup.js

@@ -1,105 +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.RadioGroup = exports.RadioGroupPropsContext = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var RadioButton_1 = require("./RadioButton");
-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");
-/**
- * Represents the PropsContext of the `RadioGroup` component.
- * Used for global configuration of all `RadioGroup` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-exports.RadioGroupPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/**
- * Represents the [KendoReact RadioGroup component]({% slug overview_radiogroup %}).
- *
- * Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).
- * Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).
- */
-exports.RadioGroup = React.forwardRef(function (directProps, target) {
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var props = (0, kendo_react_common_1.usePropsContext)(exports.RadioGroupPropsContext, directProps);
-    var ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, className = props.className, data = props.data, defaultValue = props.defaultValue, disabled = props.disabled, name = props.name, labelPlacement = props.labelPlacement, layout = props.layout, style = props.style, value = props.value, valid = props.valid, _a = props.item, Item = _a === void 0 ? defaultProps.item : _a, onChange = props.onChange, onFocus = props.onFocus;
-    var elementRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    var _b = React.useState(defaultValue), stateChecked = _b[0], setStateChecked = _b[1];
-    var isControlled = value !== undefined;
-    var checkedRadioValue = isControlled ? value : stateChecked;
-    var handleChange = React.useCallback(function (event) {
-        var currentValue = event.value;
-        if (!isControlled && !disabled) {
-            setStateChecked(currentValue);
-        }
-        if (onChange && !disabled) {
-            (0, kendo_react_common_1.dispatchEvent)(onChange, event.syntheticEvent, getImperativeHandle(), { value: currentValue });
-        }
-    }, [setStateChecked, onChange, disabled]);
-    var handleFocus = React.useCallback(function (event) {
-        if (onFocus && !disabled) {
-            (0, kendo_react_common_1.dispatchEvent)(onFocus, event.syntheticEvent, getImperativeHandle(), undefined);
-        }
-    }, [onFocus, disabled]);
-    var radioGroupName = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
-    var radioGroupClasses = (0, kendo_react_common_1.classNames)('k-radio-list', {
-        'k-list-horizontal': layout === 'horizontal',
-        'k-list-vertical': layout === 'vertical' || layout === undefined
-    }, className);
-    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
-    var radioOptions = (data && data.map(function (option, index) {
-        var isCurrentlyChecked = checkedRadioValue === option.value;
-        var noOptionChecked = checkedRadioValue === null || checkedRadioValue === undefined;
-        var radioButtonProps = __assign(__assign({}, option), { valid: valid, checked: isCurrentlyChecked, disabled: (option.disabled || disabled) ? true : false, labelPlacement: option.labelPlacement ? option.labelPlacement : labelPlacement, tabIndex: option.tabIndex
-                ? option.tabIndex
-                : (noOptionChecked && index === 0) || isCurrentlyChecked
-                    ? 0
-                    : -1, index: index, name: name || radioGroupName, onChange: handleChange, onFocus: handleFocus });
-        return (React.createElement(Item, { className: (0, kendo_react_common_1.classNames)('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'none' },
-            React.createElement(RadioButton_1.RadioButton, __assign({}, radioButtonProps))));
-    }));
-    return (React.createElement("ul", { role: "radiogroup", className: radioGroupClasses, ref: elementRef, dir: dir, style: style, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, radioOptions));
-});
-var defaultProps = {
-    item: function (props) { return React.createElement("li", __assign({}, props)); }
-};
-exports.RadioGroup.propTypes = {
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    className: PropTypes.string,
-    data: PropTypes.arrayOf(PropTypes.object),
-    defaultValue: PropTypes.any,
-    dir: PropTypes.string,
-    disabled: PropTypes.bool,
-    labelPlacement: PropTypes.string,
-    layout: PropTypes.string,
-    name: PropTypes.string,
-    style: PropTypes.object,
-    value: PropTypes.any,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func
-};
-exports.RadioGroup.defaultProps = defaultProps;
-exports.RadioGroup.displayName = 'KendoRadioGroup';

package/dist/npm/radiobutton/interfaces/RadioButtonBlurEvent.d.ts

@@ -1,7 +0,0 @@
-import { RadioButtonHandle } from './../RadioButton';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onBlur` RadioButton event.
- */
-export interface RadioButtonBlurEvent extends BaseEvent<RadioButtonHandle> {
-}

package/dist/npm/radiobutton/interfaces/RadioButtonBlurEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioButtonChangeEvent.d.ts

@@ -1,11 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { RadioButtonHandle } from '../RadioButton';
-/**
- * The arguments for the `onChange` RadioButton event.
- */
-export interface RadioButtonChangeEvent extends BaseEvent<RadioButtonHandle> {
-    /**
-     * The value of the selected RadioButton.
-     */
-    value: any;
-}

package/dist/npm/radiobutton/interfaces/RadioButtonChangeEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioButtonFocusEvent.d.ts

@@ -1,7 +0,0 @@
-import { RadioButtonHandle } from './../RadioButton';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onFocus` RadioButton event.
- */
-export interface RadioButtonFocusEvent extends BaseEvent<RadioButtonHandle> {
-}

package/dist/npm/radiobutton/interfaces/RadioButtonFocusEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioButtonProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioGroupChangeEvent.d.ts

@@ -1,11 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { RadioGroupHandle } from '../RadioGroup';
-/**
- * The arguments for the `onChange` RadioGroup event.
- */
-export interface RadioGroupChangeEvent extends BaseEvent<RadioGroupHandle> {
-    /**
-     * The value of the selected RadioButton.
-     */
-    value: any;
-}

package/dist/npm/radiobutton/interfaces/RadioGroupChangeEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioGroupFocusEvent.d.ts

@@ -1,7 +0,0 @@
-import { RadioGroupHandle } from '../RadioGroup';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onFocus` RadioGroup event.
- */
-export interface RadioGroupFocusEvent extends BaseEvent<RadioGroupHandle> {
-}

package/dist/npm/radiobutton/interfaces/RadioGroupFocusEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/radiobutton/interfaces/RadioGroupProps.d.ts

@@ -1,82 +0,0 @@
-import { RadioButtonProps } from './RadioButtonProps';
-import { RadioGroupFocusEvent } from './RadioGroupFocusEvent';
-import { RadioGroupChangeEvent } from './RadioGroupChangeEvent';
-import { HTMLAttributes } from 'react';
-/**
- * Represents the props of the [KendoReact RadioGroup component]({% slug overview_radiobutton %}).
- */
-export interface RadioGroupProps {
-    /**
-     * 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;
-    /**
-     * Specifies a list of CSS classes that will be added to the RadioGroup element.
-     */
-    className?: string;
-    /**
-     * The collection of radio buttons that will be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})).
-     */
-    data?: Array<RadioButtonProps>;
-    /**
-     * Sets the default checked state of a radio button when used in uncontrolled mode ([see example]({% slug overview_radiobutton %})).
-     * The `checked` property is passed to the underlying `input` element.
-     */
-    defaultValue?: any;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Disable all radio buttons ([see example]({% slug disabled_radiobutton %})).
-     */
-    disabled?: boolean;
-    /**
-     * Overrides the default component responsible for visualizing a single item.
-     *
-     * The default element is `li` with a [RadioButton]({% slug api_inputs_radiobutton %}) as `children`.
-     */
-    item?: React.ComponentType<HTMLAttributes<HTMLLIElement>>;
-    /**
-     * Sets the label position of the radio buttons.
-     * Accepts two options: `before` or `after`. Defaults to `after`.
-     */
-    labelPlacement?: string;
-    /**
-     * Specifies the radio group layout.
-     */
-    layout?: 'horizontal' | 'vertical';
-    /**
-     * Specifies the `name` property of the `input` DOM elements.
-     */
-    name?: string;
-    /**
-     * The event handler that will be fired when the changes the selected value.
-     */
-    onChange?: (event: RadioGroupChangeEvent) => void;
-    /**
-     * The event handler that will be fired when Radio button is focused.
-     */
-    onFocus?: (event: RadioGroupFocusEvent) => void;
-    /**
-     * Sets additional CSS styles to the radio group.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the default checked state of a radio button when used in controlled mode ([see example]({% slug controlled_radiogroup %})).
-     * The `checked` property is passed to the underlying `input` element.
-     */
-    value?: string | number | null;
-    /**
-     * Overrides the validity state of the component.
-     * If `valid` is set, the `required` property will be ignored.
-     *
-     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
-     */
-    valid?: boolean;
-}

package/dist/npm/radiobutton/interfaces/RadioGroupProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/range-slider/RangeSlider.d.ts

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { FormComponentProps, DraggableDragEvent } from '@progress/kendo-react-common';
-import { Direction } from '../interfaces/Direction';
-/**
- * The range object representing the value of the RangeSlider.
- */
-export declare type Range = {
-    /**
-     * The start of the range.
-     */
-    start: number;
-    /**
-     * The end of the range.
-     */
-    end: number;
-};
-/**
- * Represents the properties of [RangeSlider](% slug api_inputs_rangeslider %) component.
- */
-export interface RangeSliderProps extends FormComponentProps {
-    /**
-     * Sets the `id` property of the top div element of the RangeSlider.
-     */
-    id?: string;
-    /**
-     * Sets additional CSS styles to the RangeSlider.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets additional classes to the RangeSlider.
-     */
-    className?: string;
-    /**
-     * The flexible values of type Range - `start and `end`.
-     */
-    value?: Range;
-    /**
-     * The default set values of type Range - `start` and `end`.
-     */
-    defaultValue?: Range;
-    /**
-     * Triggered after value change - gets outside access to the element, new values and the event type.
-     */
-    onChange?: (event: RangeSliderChangeEvent) => void;
-    /**
-     * Determines the children nodes.
-     */
-    children?: React.ReactNode;
-    /**
-     * The step by which the value is increment/decrement.
-     */
-    step?: number;
-    /**
-     * The minimum possible value of the RangeSlider.
-     */
-    min: number;
-    /**
-     * The maximum possible value of the RangeSlider.
-     */
-    max: number;
-    /**
-     * The RangeSlider orientation if true - vertical, else - horizontal.
-     */
-    vertical?: boolean;
-    /**
-     * Determines the disabled mode of the RangeSlider, if true - disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The RangeSlider direction `ltr` or `rtl`.
-     */
-    dir?: Direction;
-    /**
-     * Sets the `tabIndex` attribute to the `start` drag handle.
-     */
-    startTabIndex?: number;
-    /**
-     * Sets the `tabIndex` attribute to the `end` drag handle.
-     */
-    endTabIndex?: number;
-    /**
-     * 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;
-}
-/**
- * Represents the target(element and props) of the RangeSliderChangeEvent.
- */
-export interface RangeSliderHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props values of the RangeSlider.
-     */
-    props: RangeSliderProps;
-    /**
-     * The focus event callback.
-     */
-    focus: () => void;
-}
-/**
- * Represent the return type of RangeSliderChangeEvent.
- */
-export interface RangeSliderChangeEvent {
-    /**
-     * The value from type Range - `start` and `end`.
-     */
-    value: Range;
-    /**
-     * The target of the RangeSliderChangeEvent from RangeSliderHandle.
-     */
-    target: RangeSliderHandle;
-    /**
-     * The event of the RangeSliderChangeEvent.
-     */
-    syntheticEvent: React.SyntheticEvent<any> | DraggableDragEvent;
-}
-/**
- * Represents the PropsContext of the `RangeSlider` component.
- * Used for global configuration of all `RangeSlider` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export declare const RangeSliderPropsContext: React.Context<(p: RangeSliderProps) => RangeSliderProps>;
-/**
- * Represents the [KendoReact RangeSlider component]({% slug overview_rangeslider %}).
- *
- * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
- * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
- */
-export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<RangeSliderHandle | null>>;