@carbon/react 1.40.0 → 1.41.0

package/es/components/Search/Search.Skeleton.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const SearchSkeleton = _ref => {
   let {
-    small,
+    small = false,
     className,
     ...rest
   } = _ref;
@@ -41,8 +41,5 @@ SearchSkeleton.propTypes = {
    */
   small: PropTypes.bool
 };
-SearchSkeleton.defaultProps = {
-  small: false
-};
 
 export { SearchSkeleton, SearchSkeleton as default };

package/es/components/Select/Select.d.ts

@@ -60,7 +60,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     light?: boolean;
     /**
-     * Reserved for use with <Pagination> component. Will not render a label for the
+     * Reserved for use with Pagination component. Will not render a label for the
      * select since Pagination renders one for us.
      */
     noLabel?: boolean;
@@ -85,5 +85,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "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" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "name" | "role" | "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" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/es/components/Select/Select.js

@@ -16,6 +16,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
 const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
@@ -23,16 +25,16 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     className,
     id,
     inline = false,
-    labelText,
+    labelText = 'Select',
     disabled = false,
     children,
-    // reserved for use with <Pagination> component
+    // reserved for use with Pagination component
     noLabel = false,
     // eslint-disable-next-line no-unused-vars
     hideLabel = false,
     invalid = false,
-    invalidText,
-    helperText,
+    invalidText = '',
+    helperText = '',
     light = false,
     readOnly,
     size,
@@ -78,7 +80,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
       return warnText;
     }
   })();
-  const error = invalid || warn ? /*#__PURE__*/React__default.createElement("div", {
+  const error = invalid || warn ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--form-requirement`,
     id: errorId
   }, errorText) : null;
@@ -86,7 +89,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
@@ -142,7 +146,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     className: cx(`${prefix}--form-item`, className)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: selectClasses
-  }, !noLabel && /*#__PURE__*/React__default.createElement("label", {
+  }, !noLabel && /*#__PURE__*/React__default.createElement(Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText), inline && /*#__PURE__*/React__default.createElement("div", {
@@ -212,7 +217,7 @@ Select.propTypes = {
    */
   light: deprecate(PropTypes.bool, '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.'),
   /**
-   * Reserved for use with <Pagination> component. Will not render a label for the
+   * Reserved for use with Pagination component. Will not render a label for the
    * select since Pagination renders one for us.
    */
   noLabel: PropTypes.bool,
@@ -238,13 +243,5 @@ Select.propTypes = {
    */
   warnText: PropTypes.node
 };
-Select.defaultProps = {
-  disabled: false,
-  labelText: 'Select',
-  inline: false,
-  invalid: false,
-  invalidText: '',
-  helperText: ''
-};
 
 export { Select as default };

package/es/components/SelectItem/SelectItem.d.ts

@@ -52,11 +52,5 @@ declare const SelectItem: {
          */
         value: PropTypes.Validator<any>;
     };
-    defaultProps: {
-        disabled: boolean;
-        hidden: boolean;
-        value: string;
-        text: string;
-    };
 };
 export default SelectItem;

package/es/components/SelectItem/SelectItem.js

@@ -14,10 +14,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 const SelectItem = _ref => {
   let {
     className,
-    value,
-    disabled,
-    hidden,
-    text,
+    value = '',
+    disabled = false,
+    hidden = false,
+    text = '',
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -56,11 +56,5 @@ SelectItem.propTypes = {
    */
   value: PropTypes.any.isRequired
 };
-SelectItem.defaultProps = {
-  disabled: false,
-  hidden: false,
-  value: '',
-  text: ''
-};
 
 export { SelectItem as default };

package/es/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -44,8 +44,5 @@ declare const SelectItemGroup: {
          */
         label: PropTypes.Validator<string>;
     };
-    defaultProps: {
-        disabled: boolean;
-    };
 };
 export default SelectItemGroup;

package/es/components/SelectItemGroup/SelectItemGroup.js

@@ -15,7 +15,7 @@ const SelectItemGroup = _ref => {
   let {
     children,
     className,
-    disabled,
+    disabled = false,
     label,
     ...other
   } = _ref;
@@ -45,8 +45,5 @@ SelectItemGroup.propTypes = {
    */
   label: PropTypes.string.isRequired
 };
-SelectItemGroup.defaultProps = {
-  disabled: false
-};
 
 export { SelectItemGroup as default };

package/es/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SkeletonIconProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * The CSS styles.
+     */
+    style?: React.CSSProperties;
+}
+declare const SkeletonIcon: React.FC<SkeletonIconProps>;
+export default SkeletonIcon;

package/es/components/SkeletonIcon/SkeletonIcon.js

@@ -17,9 +17,8 @@ const SkeletonIcon = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const skeletonIconClasses = cx({
-    [`${prefix}--icon--skeleton`]: true,
-    [className]: className
+  const skeletonIconClasses = cx(className, {
+    [`${prefix}--icon--skeleton`]: true
   });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: skeletonIconClasses

package/es/components/SkeletonText/SkeletonText.d.ts

@@ -51,11 +51,5 @@ declare const SkeletonText: {
          */
         width: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        paragraph: boolean;
-        width: string;
-        heading: boolean;
-        lineCount: number;
-    };
 };
 export default SkeletonText;

package/es/components/SkeletonText/SkeletonText.js

@@ -91,11 +91,5 @@ SkeletonText.propTypes = {
    */
   width: PropTypes.string
 };
-SkeletonText.defaultProps = {
-  paragraph: false,
-  width: '100%',
-  heading: false,
-  lineCount: 3
-};
 
 export { SkeletonText as default };

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

@@ -15,9 +15,13 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the label should be hidden, or not
      */
     hideLabel?: boolean;
+    /**
+     * Turn the slider into a range slider.
+     */
+    twoHandles?: boolean;
 }
 declare const SliderSkeleton: {
-    ({ hideLabel, className, ...rest }: SliderSkeletonProps): JSX.Element;
+    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add to the form item wrapper.
@@ -27,6 +31,10 @@ declare const SliderSkeleton: {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Turn the slider into a range slider.
+         */
+        twoHandles: PropTypes.Requireable<boolean>;
     };
 };
 export default SliderSkeleton;

package/es/components/Slider/Slider.Skeleton.js

@@ -15,15 +15,25 @@ const SliderSkeleton = _ref => {
   let {
     hideLabel,
     className,
+    twoHandles,
     ...rest
   } = _ref;
   const prefix = usePrefix();
+  const containerClasses = cx(`${prefix}--slider-container`, `${prefix}--skeleton`, {
+    [`${prefix}--slider-container--two-handles`]: twoHandles
+  });
+  const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--lower`]: twoHandles
+  });
+  const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--upper`]: twoHandles
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--slider-container ${prefix}--skeleton`
+    className: containerClasses
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slider__range-label`
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -33,8 +43,10 @@ const SliderSkeleton = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--slider__filled-track`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--slider__thumb`
-  })), /*#__PURE__*/React__default.createElement("span", {
+    className: lowerThumbClasses
+  }), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+    className: upperThumbClasses
+  }) : undefined), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };
@@ -46,7 +58,11 @@ SliderSkeleton.propTypes = {
   /**
    * Specify whether the label should be hidden, or not
    */
-  hideLabel: PropTypes.bool
+  hideLabel: PropTypes.bool,
+  /**
+   * Turn the slider into a range slider.
+   */
+  twoHandles: PropTypes.bool
 };
 var SliderSkeleton$1 = SliderSkeleton;
 

package/es/components/Slider/Slider.d.ts

@@ -6,18 +6,29 @@
  */
 import React, { KeyboardEventHandler, PureComponent } from 'react';
 import PropTypes, { ReactNodeLike } from 'prop-types';
+/**
+ * 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> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
     ariaLabelInput?: string;
+    /**
+     * The `ariaLabel` for the upper bound `<input>` and handle when there are two handles.
+     */
+    unstable_ariaLabelInputUpper?: string;
     /**
      * The child nodes.
      */
     children?: ReactNodeLike;
     /**
-     * The CSS class name for the slider.
+     * The CSS class name for the slider, set on the wrapping div.
      */
     className?: string;
     /**
@@ -77,23 +88,28 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The `name` attribute of the `<input>`.
      */
     name?: string;
+    /**
+     * The `name` attribute of the upper bound `<input>` when there are two handles.
+     */
+    unstable_nameUpper?: string;
     /**
      * Provide an optional function to be called when the input element
      * loses focus
      */
     onBlur?: (data: {
         value: string;
+        handlePosition: HandlePosition | undefined;
     }) => void;
     /**
      * The callback to get notified of change in value.
-     * `({ value}) => void`
-    //  * @param {{ 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
+     * 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`.
      */
     onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     /**
@@ -101,6 +117,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     onRelease?: (data: {
         value: SliderProps['value'];
+        valueUpper: SliderProps['unstable_valueUpper'];
     }) => void;
     /**
      * Whether the slider should be read-only
@@ -111,7 +128,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     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.
+     * 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?: number;
     /**
@@ -120,9 +137,22 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     stepMultiplier?: number;
     /**
-     * The value.
+     * 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?: (translationId: string, translationState: {
+        correctedValue?: string;
+    }) => string;
+    /**
+     * The value of the slider. When there are two handles, value is the lower
+     * bound.
      */
     value: number;
+    /**
+     * The upper bound when there are two handles.
+     */
+    unstable_valueUpper?: number;
     /**
      * Specify whether the control is currently in warning state
      */
@@ -137,7 +167,12 @@ interface CalcValueProps {
     value?: number;
     useRawValue?: boolean;
 }
-export default class Slider extends PureComponent<SliderProps> {
+interface CalcLeftPercentProps {
+    clientX?: number;
+    value?: number;
+    range?: number;
+}
+declare class Slider extends PureComponent<SliderProps> {
     static propTypes: {
         /**
          * The `ariaLabel` for the `<input>`.
@@ -233,7 +268,7 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         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.
+         * 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>;
         /**
@@ -242,7 +277,26 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         stepMultiplier: PropTypes.Requireable<number>;
         /**
-         * The value.
+         * 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>;
         /**
@@ -250,29 +304,26 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         warn: PropTypes.Requireable<boolean>;
         /**
-         * Provide the text that is displayed when the Slider is in an warn state
+         * Provide the text that is displayed when the Slider is in a warn state
          */
         warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    static defaultProps: {
-        hideTextInput: boolean;
-        step: number;
-        stepMultiplier: number;
-        disabled: boolean;
-        minLabel: string;
-        maxLabel: string;
-        inputType: string;
-        readOnly: boolean;
-    };
     static contextType: React.Context<any>;
     state: {
         value: number;
+        valueUpper: number | undefined;
         left: number;
+        leftUpper: number;
         needsOnRelease: boolean;
         isValid: boolean;
+        isValidUpper: boolean;
+        activeHandle: null;
+        correctedValue: null;
+        correctedPosition: null;
         isRtl: boolean;
     };
     thumbRef: React.RefObject<HTMLDivElement>;
+    thumbRefUpper: React.RefObject<HTMLDivElement>;
     filledTrackRef: React.RefObject<HTMLDivElement>;
     element: HTMLDivElement | null;
     inputId: string;
@@ -325,8 +376,11 @@ export default class Slider extends PureComponent<SliderProps> {
      * 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.
      */
-    _onDrag: (evt: any) => void;
+    _onDrag: (evt: any, activeHandle?: HandlePosition | null) => void;
     /**
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
@@ -354,6 +408,13 @@ export default class Slider extends PureComponent<SliderProps> {
      * @param {Event} evt The event.
      */
     onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (evt: any) => void;
+    processNewInputValue: (input: HTMLInputElement) => void;
+    calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
+    calcSteppedValuePercent: ({ leftPercent, range }: {
+        leftPercent: any;
+        range: any;
+    }) => number[];
     /**
      * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
      * `value`, or neither of those.
@@ -377,9 +438,60 @@ export default class Slider extends PureComponent<SliderProps> {
         value: number | undefined;
         left: number;
     };
-    static getDerivedStateFromProps(props: any, state: any): {
-        isValid: boolean;
-    } | null;
+    calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
+    /**
+     * Given the current value, delta and step, calculate the new value.
+     *
+     * @param {number} currentValue
+     *   Current value user is moving from.
+     * @param {number} delta
+     *   Movement from the current value. Can be positive or negative.
+     * @param {number} step
+     *   A value determining how much the value should increase/decrease by moving
+     *   the thumb by mouse.
+     */
+    calcValueForDelta: (currentValue: any, delta: any, step?: number) => any;
+    /**
+     * Sets state relevant to the given handle position.
+     *
+     * Guards against setting either lower or upper values beyond its counterpart.
+     */
+    setValueLeftForHandle: (handle: HandlePosition, { value: newValue, left: newLeft }: {
+        value: any;
+        left: any;
+    }) => void;
+    setValueForHandle: (handle: HandlePosition, value: any) => void;
+    isValidValueForPosition: ({ handle, value: newValue, min, max }: {
+        handle: any;
+        value: any;
+        min: any;
+        max: any;
+    }) => boolean;
+    isValidValue: ({ value, min, max }: {
+        value: any;
+        min: any;
+        max: any;
+    }) => 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;
+    /**
+     * 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;
+    hasTwoHandles(): boolean;
+    static getDerivedStateFromProps(props: any, state: any): {} | null;
     render(): JSX.Element;
 }
-export {};
+export default Slider;