@progress/kendo-react-inputs 13.3.0-develop.9 → 13.4.0-develop.1

package/slider/Slider.d.ts

@@ -0,0 +1,288 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { FormComponentProps, BaseEvent } from '@progress/kendo-react-common';
+import { Direction } from '../interfaces/Direction.js';
+import * as React from 'react';
+/**
+ * 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](https://www.telerik.com/kendo-react-ui/components/inputs/slider).
+ */
+export interface SliderProps extends FormComponentProps {
+    /**
+     * The content of the Slider component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies the current value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider value={50} min={0} max={100} />
+     * ```
+     */
+    value?: number;
+    /**
+     * Specifies the default value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider defaultValue={30} min={0} max={100} />
+     * ```
+     */
+    defaultValue?: number;
+    /**
+     * Specifies the minimum value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider min={0} max={100} />
+     * ```
+     */
+    min: number;
+    /**
+     * Specifies the maximum value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider min={0} max={100} />
+     * ```
+     */
+    max: number;
+    /**
+     * Specifies the step by which the Slider's value will be increased or decreased using its buttons or keyboard arrows.
+     *
+     * @example
+     * ```jsx
+     * <Slider step={5} min={0} max={100} />
+     * ```
+     */
+    step?: number;
+    /**
+     * Specifies the step by which the Slider's value will be increased or decreased using `pageUp` or `pageDown` keyboard buttons.
+     *
+     * @example
+     * ```jsx
+     * <Slider largeStep={10} min={0} max={100} />
+     * ```
+     */
+    largeStep?: number;
+    /**
+     * Fires when the value of the Slider changes.
+     *
+     * @example
+     * ```jsx
+     * <Slider onChange={(event) => console.log(event.value)} min={0} max={100} />
+     * ```
+     */
+    onChange?: (event: SliderChangeEvent) => void;
+    /**
+     * Sets additional CSS styles to the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider style={{ margin: '10px' }} min={0} max={100} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Adds custom CSS classes to the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider className="custom-class" min={0} max={100} />
+     * ```
+     */
+    className?: string;
+    /**
+     * Renders the arrow side buttons of the Slider if set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Slider buttons={true} min={0} max={100} />
+     * ```
+     */
+    buttons?: boolean;
+    /**
+     * Specifies the `tabIndex` of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider tabIndex={0} min={0} max={100} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * When `true`, disables the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider disabled={true} min={0} max={100} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Changes the orientation of the Slider to vertical if set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Slider vertical={true} min={0} max={100} />
+     * ```
+     */
+    vertical?: boolean;
+    /**
+     * Specifies the `id` of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider id="slider-component" min={0} max={100} />
+     * ```
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaDescribedBy="description-id" min={0} max={100} />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaLabelledBy="label-id" min={0} max={100} />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies the accessible label of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaLabel="Slider component" min={0} max={100} />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies the direction of the Slider (`ltr` or `rtl`).
+     *
+     * @example
+     * ```jsx
+     * <Slider dir="rtl" min={0} max={100} />
+     * ```
+     */
+    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(): React.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](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const SliderPropsContext: React.Context<(p: SliderProps) => SliderProps>;
+/**
+ * Represent the `ref` of the Slider component.
+ *
+ * @remarks
+ * Supported children components are: {@link SliderLabel}.
+ */
+export interface SliderHandle extends Pick<SliderWithoutContext, keyof SliderWithoutContext> {
+}
+/** @hidden */
+export type Slider = SliderHandle;
+/**
+ * Represents the [KendoReact Slider component](https://www.telerik.com/kendo-react-ui/components/inputs/slider).
+ *
+ * Accepts properties of type [SliderProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/sliderprops).
+ * Obtaining the `ref` returns an object of type [SliderHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/sliderhandle).
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<any>>;
+export {};

package/slider/Slider.mjs

@@ -7,9 +7,9 @@
  */
 import * as i from "react";
 import a from "prop-types";
-import { Keys as n, classNames as y, Draggable as w, getTabIndex as S, dispatchEvent as x, createPropsContext as T, withPropsContext as E } from "@progress/kendo-react-common";
+import { withPropsContext as y, createPropsContext as w, Keys as n, classNames as S, Draggable as x, getTabIndex as T, dispatchEvent as E } from "@progress/kendo-react-common";
 import { provideLocalizationService as D, registerForLocalization as C } from "@progress/kendo-react-intl";
-import { sliderIncreaseValue as d, messages as h, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
+import { sliderDecreaseValue as d, messages as h, sliderIncreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
 import { SLIDER_LABEL_ATTRIBUTE as I } from "./SliderLabel.mjs";
 import { Button as v } from "@progress/kendo-react-buttons";
 import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
@@ -107,7 +107,7 @@ const p = class p extends i.Component {
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
-        className: y(
+        className: S(
           "k-slider",
           {
             "k-focus": this.state.focused,
@@ -124,10 +124,10 @@ const p = class p extends i.Component {
           enabled: this.props.buttons,
           decrement: this.decrement,
           increment: this.increment,
-          incrementTitle: s.toLanguageString(d, h[d]),
-          decrementTitle: s.toLanguageString(m, h[m])
+          incrementTitle: s.toLanguageString(m, h[m]),
+          decrementTitle: s.toLanguageString(d, h[d])
         },
-        /* @__PURE__ */ i.createElement(w, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
+        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
           "div",
           {
             className: "k-slider-track-wrap",
@@ -177,7 +177,7 @@ const p = class p extends i.Component {
                 "aria-labelledby": this.props.ariaLabelledBy,
                 "aria-describedby": this.props.ariaDescribedBy,
                 "aria-label": this.props.ariaLabel,
-                tabIndex: S(this.props.tabIndex, this.props.disabled, void 0),
+                tabIndex: T(this.props.tabIndex, this.props.disabled, void 0),
                 className: "k-draghandle k-draghandle-end",
                 title: s.toLanguageString(u, h[u]),
                 style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
@@ -195,7 +195,7 @@ const p = class p extends i.Component {
     return this._sliderTrack;
   }
   change(s, t) {
-    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), x(this.props.onChange, s, this, { value: t });
+    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), E(this.props.onChange, s, this, { value: t });
   }
 };
 p.displayName = "Slider", p.propTypes = {
@@ -210,7 +210,7 @@ p.displayName = "Slider", p.propTypes = {
   // TODO: validation when buttons is set to true, but no step is provided
 };
 let c = p;
-const L = T(), A = E(L, c);
+const L = w(), A = y(L, c);
 A.displayName = "KendoReactSlider";
 C(c);
 export {

package/slider/SliderLabel.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const SLIDER_LABEL_ATTRIBUTE = "data-slider-label";
+/**
+ * Represents the props of the KendoReact SliderLabel component.
+ */
+export interface SliderLabelProps {
+    /**
+     * The position in relative to the start of the SliderLabel component.
+     */
+    position: number;
+    /**
+     * The onClick event of the SliderLabel component.
+     */
+    onClick?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * The title of the SliderLabel component.
+     */
+    title?: string;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    vertical?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is first.
+     */
+    firstTick?: boolean;
+    /**
+     * @hidden
+     * Used to identify if a tick is last.
+     */
+    lastTick?: boolean;
+}
+/**
+ * Represents the KendoReact SliderLabel component.
+ */
+export declare const SliderLabel: (props: SliderLabelProps) => React.JSX.Element;