@carbon/react 1.24.0-rc.0 → 1.25.0

package/lib/components/RadioTile/RadioTile.js

@@ -29,8 +29,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _CheckmarkFilled;
 
 var _excluded = ["children", "className", "disabled", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
-
-function RadioTile(_ref) {
+var RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function RadioTile(_ref, ref) {
   var _cx;
 
   var children = _ref.children,
@@ -70,7 +69,8 @@ function RadioTile(_ref) {
     onKeyDown: !disabled ? handleOnKeyDown : null,
     tabIndex: !disabled ? tabIndex : null,
     type: "radio",
-    value: value
+    value: value,
+    ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
     htmlFor: inputId,
     className: className
@@ -79,8 +79,7 @@ function RadioTile(_ref) {
   }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, null))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--tile-content")
   }, children)));
-}
-
+});
 RadioTile.propTypes = {
   /**
    * `true` if this tile should be selected.
@@ -137,5 +136,6 @@ RadioTile.defaultProps = {
   onChange: function onChange() {},
   tabIndex: 0
 };
+var RadioTile$1 = RadioTile;
 
-exports["default"] = RadioTile;
+exports["default"] = RadioTile$1;

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+type ExcludedAttributes = 'size';
+interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline?: boolean;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the control.
+     */
+    labelText?: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     *
+     * @deprecated The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component.
+     * It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Reserved for use with <Pagination> component. Will not render a label for the
+     * select since Pagination renders one for us.
+     */
+    noLabel?: boolean;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of the underlying `<input>` changes.
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Select Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "hideLabel" | "light" | "invalid" | "invalidText" | "warn" | "warnText" | "helperText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/lib/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItem> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the <SelectItem> is hidden
+     */
+    hidden?: boolean;
+    /**
+     * Provide the contents of your <SelectItem>
+     */
+    text: string;
+    /**
+     * Specify the value of the <SelectItem>
+     */
+    value: any;
+}
+declare const SelectItem: {
+    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItem> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the <SelectItem> is hidden
+         */
+        hidden: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the contents of your <SelectItem>
+         */
+        text: PropTypes.Validator<string>;
+        /**
+         * Specify the value of the <SelectItem>
+         */
+        value: PropTypes.Validator<any>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        hidden: boolean;
+        value: string;
+        text: string;
+    };
+};
+export default SelectItem;

package/lib/components/SelectItem/SelectItem.js

@@ -24,8 +24,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["className", "value", "disabled", "hidden", "text"];
 
 var SelectItem = function SelectItem(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       value = _ref.value,
       disabled = _ref.disabled,
@@ -34,7 +32,7 @@ var SelectItem = function SelectItem(_ref) {
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var selectItemClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select-option"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
+  var selectItemClasses = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--select-option"), true), className && _rollupPluginBabelHelpers.defineProperty({}, className, className)));
   return /*#__PURE__*/React__default["default"].createElement("option", _rollupPluginBabelHelpers["extends"]({}, other, {
     className: selectItemClasses,
     value: value,

package/lib/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SelectItemGroupProps extends HTMLAttributes<HTMLOptGroupElement> {
+    /**
+     * Provide the contents of your <SelectItemGroup>
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItemGroup> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the label to be displayed
+     */
+    label: string;
+}
+declare const SelectItemGroup: {
+    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of your <SelectItemGroup>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItemGroup> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the label to be displayed
+         */
+        label: PropTypes.Validator<string>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        label: string | undefined;
+    };
+};
+export default SelectItemGroup;

package/lib/components/SkeletonText/SkeletonText.js

@@ -56,7 +56,7 @@ var SkeletonText = function SkeletonText(_ref) {
   useIsomorphicEffect["default"](function () {
     refs.current.map(function (item, j) {
       var randomPercentWidth = getRandomInt(0, 75, j) + 'px';
-      var randomPxWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
+      var randomPxWidth = getRandomInt(Math.max(widthNum - 75, 0), widthNum, j) + 'px';
 
       if (item) {
         if (widthPercent && paragraph) {

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

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
-      * Specify an optional className to add to the form item wrapper.
-      */
+     * Specify an optional className to add to the form item wrapper.
+     */
     className?: string;
     /**
      * Specify whether the label should be hidden, or not

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

@@ -0,0 +1,355 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { KeyboardEventHandler, PureComponent } from 'react';
+import PropTypes, { ReactNodeLike } from 'prop-types';
+type ExcludedAttributes = 'onChange' | 'onBlur';
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * The `ariaLabel` for the `<input>`.
+     */
+    ariaLabelInput?: string;
+    /**
+     * The child nodes.
+     */
+    children?: ReactNodeLike;
+    /**
+     * The CSS class name for the slider.
+     */
+    className?: string;
+    /**
+     * `true` to disable this slider.
+     */
+    disabled?: boolean;
+    /**
+     * The callback to format the label associated with the minimum/maximum value.
+     */
+    formatLabel?: (value: number, label: string | undefined) => string;
+    /**
+     * `true` to hide the number input box.
+     */
+    hideTextInput?: boolean;
+    /**
+     * The ID of the `<input>`.
+     */
+    id?: string;
+    /**
+     * The `type` attribute of the `<input>`.
+     */
+    inputType?: string;
+    /**
+     * `true` to specify if the control is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * The label for the slider.
+     */
+    labelText?: ReactNodeLike;
+    /**
+     * @deprecated
+     * `true` to use the light version.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max: number;
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * The minimum value.
+     */
+    min: number;
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * The `name` attribute of the `<input>`.
+     */
+    name?: string;
+    /**
+     * Provide an optional function to be called when the input element
+     * loses focus
+     */
+    onBlur?: (data: {
+        value: string;
+    }) => void;
+    /**
+     * The callback to get notified of change in value.
+     * `({ value}) => void`
+    //  * @param {{ value }}
+     */
+    onChange?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * The callback to get notified of value on handle release.
+     */
+    onRelease?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Whether the slider should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * `true` to specify if the control is required.
+     */
+    required?: 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 of the `step` increment will be considered invalid.
+     */
+    step?: number;
+    /**
+     * A value determining how much the value should increase/decrease by Shift+arrow keys,
+     * which will be `(max - min) / stepMultiplier`.
+     */
+    stepMultiplier?: number;
+    /**
+     * The value.
+     */
+    value: number;
+}
+interface CalcValueProps {
+    clientX?: number;
+    value?: number;
+    useRawValue?: boolean;
+}
+export default 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>;
+        /**
+         * `true` to specify if the control is invalid.
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * The label for the slider.
+         */
+        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * `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 of 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>;
+        /**
+         * The value.
+         */
+        value: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        hideTextInput: boolean;
+        step: number;
+        stepMultiplier: number;
+        disabled: boolean;
+        minLabel: string;
+        maxLabel: string;
+        inputType: string;
+        ariaLabelInput: string | undefined;
+        readOnly: boolean;
+    };
+    static contextType: React.Context<any>;
+    state: {
+        value: number;
+        left: number;
+        needsOnRelease: boolean;
+        isValid: boolean;
+    };
+    thumbRef: React.RefObject<HTMLDivElement>;
+    filledTrackRef: React.RefObject<HTMLDivElement>;
+    element: HTMLDivElement | null;
+    inputId: string;
+    track: HTMLDivElement | null | undefined;
+    constructor(props: any);
+    /**
+     * Sets up initial slider position and value in response to component mount.
+     */
+    componentDidMount(): void;
+    /**
+     * Handles firing of `onChange` and `onRelease` callbacks to parent in
+     * response to state changes.
+     *
+     * @param {*} prevProps prevProps
+     * @param {*} prevState The previous Slider state, used to see if callbacks
+     * should be called.
+     */
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    /**
+     * Synonymous to ECMA2017+ `Math.clamp`.
+     *
+     * @param {number} val
+     * @param {number} min
+     * @param {number} max
+     *
+     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
+     */
+    clamp(val: any, min: any, max: any): number;
+    /**
+     * 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;
+    /**
+     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * indicating that the `onRelease` callback should be called.
+     */
+    onDragStop: () => void;
+    /**
+     * Handles a "drag" event by recalculating the value/thumb and setting state
+     * accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    _onDrag: (evt: any) => void;
+    /**
+     * Throttles calls to `this._onDrag` by limiting events to being processed at
+     * most once every `EVENT_THROTTLE` milliseconds.
+     */
+    onDrag: any;
+    /**
+     * Handles a `keydown` event by recalculating the value/thumb and setting
+     * state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    onKeyDown: (evt: any) => 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;
+    /**
+     * 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;
+    /**
+     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
+     * `value`, or neither of those.
+     * - If `clientX` is specified, it will be used in
+     *   conjunction with the Slider's bounding rectangle to calculate the new
+     *   values.
+     * - If `clientX` is not specified and `value` is, it will be used to
+     *   calculate new values as though it were the current value of the Slider.
+     * - If neither `clientX` nor `value` are specified, `this.props.value` will
+     *   be used to calculate the new values as though it were the current value
+     *   of the Slider.
+     *
+     * @param {object} params
+     * @param {number} [params.clientX] Optional clientX value expected to be from
+     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
+     * @param {number} [params.value] Optional value use during calculations if
+     *   clientX is not provided.
+     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     */
+    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
+        value: number | undefined;
+        left: number;
+    };
+    static getDerivedStateFromProps(props: any, state: any): {
+        isValid: boolean;
+    } | null;
+    render(): JSX.Element;
+}
+export {};