@carbon/react 1.85.0-rc.0 → 1.85.1

package/lib/components/Slider/Slider.d.ts

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import PropTypes from 'prop-types';
+import React, { PureComponent, ReactNode, type ChangeEvent, type FocusEvent, type InputHTMLAttributes, type KeyboardEvent, type KeyboardEventHandler, type MouseEvent, type RefObject, type TouchEvent } from 'react';
 import { TranslateWithId } from '../../types/common';
 declare const translationIds: {
     readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
@@ -14,15 +13,12 @@ declare const translationIds: {
  * Message ids that will be passed to translateWithId().
  */
 type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
-/**
- * Distinguish two handles by lower and upper positions.
- */
 declare enum HandlePosition {
     LOWER = "lower",
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
     correctedValue?: string;
 }> {
     /**
@@ -116,14 +112,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     }) => void;
     /**
      * The callback to get notified of change in value.
-     * `({ value: number, valueUpper?: number }) => void`
      */
     onChange?: (data: {
         value: SliderProps['value'];
         valueUpper: SliderProps['unstable_valueUpper'];
     }) => void;
     /**
-     * Provide an optional function to be called when a key is pressed in the number input. When there are two handles, you can obtain the relevant handle position by using `event.target.dataset.handlePosition`.
+     * Provide an optional function to be called when a key is pressed in the number input.
      */
     onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     /**
@@ -166,7 +161,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
 }
 interface CalcLeftPercentProps {
     clientX?: number;
@@ -174,146 +169,8 @@ interface CalcLeftPercentProps {
     range?: number;
 }
 declare class Slider extends PureComponent<SliderProps> {
-    static propTypes: {
-        /**
-         * The `ariaLabel` for the `<input>`.
-         */
-        ariaLabelInput: PropTypes.Requireable<string>;
-        /**
-         * The child nodes.
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The CSS class name for the slider.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * `true` to disable this slider.
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * The callback to format the label associated with the minimum/maximum value.
-         */
-        formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * `true` to hide the number input box.
-         */
-        hideTextInput: PropTypes.Requireable<boolean>;
-        /**
-         * The ID of the `<input>`.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * The `type` attribute of the `<input>`.
-         */
-        inputType: PropTypes.Requireable<string>;
-        /**
-         * `Specify whether the Slider is currently invalid
-         */
-        invalid: PropTypes.Requireable<boolean>;
-        /**
-         * Provide the text that is displayed when the Slider is in an invalid state
-         */
-        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The label for the slider.
-         */
-        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify whether you want the underlying label to be visually hidden
-         */
-        hideLabel: PropTypes.Requireable<boolean>;
-        /**
-         * `true` to use the light version.
-         */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * The maximum value.
-         */
-        max: PropTypes.Validator<number>;
-        /**
-         * The label associated with the maximum value.
-         */
-        maxLabel: PropTypes.Requireable<string>;
-        /**
-         * The minimum value.
-         */
-        min: PropTypes.Validator<number>;
-        /**
-         * The label associated with the minimum value.
-         */
-        minLabel: PropTypes.Requireable<string>;
-        /**
-         * The `name` attribute of the `<input>`.
-         */
-        name: PropTypes.Requireable<string>;
-        /**
-         * Provide an optional function to be called when the input element
-         * loses focus
-         */
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The callback to get notified of change in value.
-         */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional function to be called when a key is pressed in the number input
-         */
-        onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The callback to get notified of value on handle release.
-         */
-        onRelease: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Whether the slider should be read-only
-         */
-        readOnly: PropTypes.Requireable<boolean>;
-        /**
-         * `true` to specify if the control is required.
-         */
-        required: PropTypes.Requireable<boolean>;
-        /**
-         * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
-         */
-        step: PropTypes.Requireable<number>;
-        /**
-         * A value determining how much the value should increase/decrease by Shift+arrow keys,
-         * which will be `(max - min) / stepMultiplier`.
-         */
-        stepMultiplier: PropTypes.Requireable<number>;
-        /**
-         * Supply a method to translate internal strings with your i18n tool of
-         * choice. Translation keys are available on the `translationIds` field for
-         * this component.
-         */
-        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The `ariaLabel` for the upper bound `<input>` when there are two handles.
-         */
-        unstable_ariaLabelInputUpper: PropTypes.Requireable<string>;
-        /**
-         * The `name` attribute of the upper bound `<input>` when there are two handles.
-         */
-        unstable_nameUpper: PropTypes.Requireable<string>;
-        /**
-         * The upper bound when there are two handles.
-         */
-        unstable_valueUpper: PropTypes.Requireable<number>;
-        /**
-         * The value of the slider. When there are two handles, value is the lower
-         * bound.
-         */
-        value: PropTypes.Validator<number>;
-        /**
-         * `Specify whether the Slider is in a warn state
-         */
-        warn: PropTypes.Requireable<boolean>;
-        /**
-         * Provide the text that is displayed when the Slider is in a warn state
-         */
-        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
     static contextType: React.Context<any>;
+    static translationIds: "carbon.slider.auto-correct-announcement"[];
     state: {
         value: number;
         valueUpper: number | undefined;
@@ -322,14 +179,14 @@ declare class Slider extends PureComponent<SliderProps> {
         needsOnRelease: boolean;
         isValid: boolean;
         isValidUpper: boolean;
-        activeHandle: null;
+        activeHandle: undefined;
         correctedValue: null;
         correctedPosition: null;
         isRtl: boolean;
     };
-    thumbRef: React.RefObject<HTMLDivElement | null>;
-    thumbRefUpper: React.RefObject<HTMLDivElement | null>;
-    filledTrackRef: React.RefObject<HTMLDivElement | null>;
+    thumbRef: RefObject<HTMLDivElement | null>;
+    thumbRefUpper: RefObject<HTMLDivElement | null>;
+    filledTrackRef: RefObject<HTMLDivElement | null>;
     element: HTMLDivElement | null;
     inputId: string;
     track: HTMLDivElement | null | undefined;
@@ -355,16 +212,15 @@ declare class Slider extends PureComponent<SliderProps> {
      * @returns The value rounded to the precision determined by the step.
      */
     nearestStepValue(value?: number): number;
+    handleDrag: (event: Event) => void;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"
      * event.
-     *
-     * @param {Event} evt The event.
      */
-    onDragStart: (evt: any) => void;
+    onDragStart: (evt: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
     /**
-     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * Removes "drag" and "drag stop" event handlers and calls sets the flag
      * indicating that the `onRelease` callback should be called.
      */
     onDragStop: () => void;
@@ -372,40 +228,33 @@ declare class Slider extends PureComponent<SliderProps> {
      * Handles a "drag" event by recalculating the value/thumb and setting state
      * accordingly.
      *
-     * @param {Event} evt The event.
-     * @param activeHandle
-     *   The first drag event call, we may have an explicit activeHandle value,
-     *   which is to be used before state is used.
+     * @param evt The event.
+     * @param activeHandle The first drag event call, we may have an explicit
+     * activeHandle value, which is to be used before state is used.
      */
-    _onDrag: (evt: any, activeHandle?: HandlePosition | null) => void;
+    _onDrag: (evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void;
     /**
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: any, activeHandle?: HandlePosition | null) => void>;
+    onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void>;
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.
-     *
-     * @param {Event} evt The event.
      */
-    onKeyDown: (evt: any) => void;
+    onKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
     /**
      * Provides the two-way binding for the input field of the Slider. It also
      * Handles a change to the input field by recalculating the value/thumb and
      * setting state accordingly.
-     *
-     * @param {Event} evt The event.
      */
-    onChange: (evt: any) => void;
+    onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Checks for validity of input value after clicking out of the input. It also
      * Handles state change to isValid state.
-     *
-     * @param {Event} evt The event.
      */
-    onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
-    onInputKeyDown: (evt: any) => void;
+    onBlur: (evt: FocusEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (evt: KeyboardEvent<HTMLInputElement>) => void;
     processNewInputValue: (input: HTMLInputElement) => void;
     calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
     /**
@@ -434,7 +283,7 @@ declare class Slider extends PureComponent<SliderProps> {
         value: number | undefined;
         left: number;
     };
-    calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
+    calcDistanceToHandle: (handle: HandlePosition, clientX: number) => number;
     /**
      * Calculates a new slider value based on the current value, a change delta,
      * and a step.
@@ -452,41 +301,53 @@ declare class Slider extends PureComponent<SliderProps> {
      * Guards against setting either lower or upper values beyond its counterpart.
      */
     setValueLeftForHandle: (handle: HandlePosition, { value: newValue, left: newLeft }: {
-        value: any;
-        left: any;
+        value: number;
+        left: number;
     }) => void;
-    setValueForHandle: (handle: HandlePosition, value: any) => void;
-    isValidValueForPosition: ({ handle, value: newValue, min, max }: {
-        handle: any;
-        value: any;
-        min: any;
-        max: any;
+    setValueForHandle: (handle: HandlePosition, value: number | string) => void;
+    isValidValueForPosition: ({ handle, value: newValue, min, max, }: {
+        handle: HandlePosition;
+        value: number;
+        min: number;
+        max: number;
     }) => boolean;
-    isValidValue: ({ value, min, max }: {
-        value: any;
-        min: any;
-        max: any;
+    isValidValue: ({ value, min, max, }: {
+        value: number;
+        min: number;
+        max: number;
     }) => boolean;
-    getAdjustedValueForPosition: ({ handle, value: newValue, min, max }: {
-        handle: any;
-        value: any;
-        min: any;
-        max: any;
-    }) => any;
-    getAdjustedValue: ({ value, min, max }: {
-        value: any;
-        min: any;
-        max: any;
-    }) => any;
+    getAdjustedValueForPosition: ({ handle, value: newValue, min, max, }: {
+        handle: HandlePosition;
+        value: number;
+        min: number;
+        max: number;
+    }) => number;
+    getAdjustedValue: ({ value, min, max, }: {
+        value: number;
+        min: number;
+        max: number;
+    }) => number;
     /**
      * Get the bounding rect for the requested handles' DOM element.
      *
      * If the bounding rect is not available, a new, empty DOMRect is returned.
      */
     getHandleBoundingRect: (handle: HandlePosition) => DOMRect;
-    getClientXFromEvent(event: MouseEvent | TouchEvent): any;
+    getClientXFromEvent(event: globalThis.MouseEvent | globalThis.TouchEvent): number | undefined;
     hasTwoHandles(): boolean;
-    static getDerivedStateFromProps(props: any, state: any): {} | null;
+    static getDerivedStateFromProps(props: SliderProps, state: Slider['state']): Partial<{
+        value: number;
+        valueUpper: number | undefined;
+        left: number;
+        leftUpper: number;
+        needsOnRelease: boolean;
+        isValid: boolean;
+        isValidUpper: boolean;
+        activeHandle: undefined;
+        correctedValue: null;
+        correctedPosition: null;
+        isRtl: boolean;
+    }> | null;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default Slider;