@carbon/react 1.44.0 → 1.45.0-rc.0

package/es/components/MenuButton/index.js

@@ -18,7 +18,7 @@ import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const spacing = 4; // top and bottom spacing between the button and the menu. in px
+const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {

package/es/components/Modal/Modal.d.ts

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { ReactAttr } from '../../types/common';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
@@ -65,7 +66,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify loading status
      */
-    loadingStatus?: string;
+    loadingStatus?: InlineLoadingStatus;
     /**
      * Specify a label to be read by screen readers on the modal root node
      */
@@ -87,7 +88,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify an optional handler to be invoked when loading is
      * successful
      */
-    onLoadingSuccess?: React.ReactEventHandler<HTMLElement>;
+    onLoadingSuccess?: () => void;
     /**
      * Specify a handler for closing modal.
      * The handler should care of closing modal, e.g. changing `open` prop.

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -545,7 +545,7 @@ FilterableMultiSelect.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
    */
   slug: PropTypes.node,
   ...sortingPropTypes,

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -164,7 +164,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/MultiSelect/MultiSelect.js

@@ -507,7 +507,7 @@ MultiSelect.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Notification/Notification.js

@@ -584,6 +584,7 @@ function ActionableNotification(_ref6) {
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
   }, subtitle), children))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--actionable-notification__button-wrapper`,
     ref: innerModal
   }, actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,

package/es/components/NumberInput/NumberInput.d.ts

@@ -109,7 +109,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/NumberInput/NumberInput.js

@@ -360,7 +360,7 @@ NumberInput.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `NumberInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `NumberInput` component
    */
   slug: PropTypes.node,
   /**

package/es/components/RadioButton/RadioButton.d.ts

@@ -56,7 +56,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
     /**
-     * Provide a `Slug` component to be rendered inside the `RadioButton` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/RadioButton/RadioButton.js

@@ -120,7 +120,7 @@ RadioButton.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * Provide a `Slug` component to be rendered inside the `RadioButton` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */
   slug: PropTypes.node,
   /**

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -64,7 +64,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      */
     readOnly?: boolean;
     /**
-     * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -188,7 +188,7 @@ RadioButtonGroup.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */
   slug: PropTypes.node,
   /**

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

@@ -78,7 +78,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Select/Select.js

@@ -245,7 +245,7 @@ Select.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `Select` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Select` component
    */
   slug: PropTypes.node,
   /**

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

@@ -10,7 +10,9 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { LowerHandle, UpperHandle } from './SliderHandles.js';
 
+var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
 const SliderSkeleton = _ref => {
   let {
     hideLabel,
@@ -19,8 +21,10 @@ const SliderSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
+  const isRtl = document?.dir === 'rtl';
   const containerClasses = cx(`${prefix}--slider-container`, `${prefix}--skeleton`, {
-    [`${prefix}--slider-container--two-handles`]: twoHandles
+    [`${prefix}--slider-container--two-handles`]: twoHandles,
+    [`${prefix}--slider-container--rtl`]: isRtl
   });
   const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--lower`]: twoHandles
@@ -28,6 +32,12 @@ const SliderSkeleton = _ref => {
   const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--upper`]: twoHandles
   });
+  const lowerThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+  });
+  const upperThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
@@ -43,10 +53,14 @@ const SliderSkeleton = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--slider__filled-track`
   }), /*#__PURE__*/React__default.createElement("div", {
+    className: lowerThumbWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: lowerThumbClasses
-  }), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+  }, twoHandles && !isRtl ? _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : twoHandles && isRtl ? _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+    className: upperThumbWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: upperThumbClasses
-  }) : undefined), /*#__PURE__*/React__default.createElement("span", {
+  }, twoHandles && !isRtl ? _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : twoHandles && isRtl ? _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : undefined)) : undefined), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };

package/es/components/Slider/Slider.js

@@ -16,62 +16,59 @@ import deprecate from '../../prop-types/deprecate.js';
 import { FeatureFlagContext } from '../FeatureFlags/index.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import '../Text/index.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
 
-var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
-const LowerHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
-}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path2 || (_path2 = /*#__PURE__*/React__default.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
-}, _path3 || (_path3 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path4 || (_path4 = /*#__PURE__*/React__default.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path5 || (_path5 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M15.08 0H16v6.46h-.92z"
-})), _path6 || (_path6 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
-})), _path7 || (_path7 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
-}))));
-const UpperHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
-}, _path8 || (_path8 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path9 || (_path9 = /*#__PURE__*/React__default.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const UpperHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, _path10 || (_path10 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path11 || (_path11 = /*#__PURE__*/React__default.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path12 || (_path12 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M.92 24H0v-6.46h.92z"
-})), _path13 || (_path13 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
-})), _path14 || (_path14 = /*#__PURE__*/React__default.createElement("path", {
-  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
-}))));
+var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
+const ThumbWrapper = _ref => {
+  let {
+    hasTooltip = false,
+    className,
+    style,
+    children,
+    ...rest
+  } = _ref;
+  if (hasTooltip) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-component-props
+      React__default.createElement(Tooltip, _extends({
+        className: className,
+        style: style
+      }, rest), children)
+    );
+  } else {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-dom-props
+      React__default.createElement("div", {
+        className: className,
+        style: style
+      }, children)
+    );
+  }
+};
+ThumbWrapper.propTypes = {
+  /**
+   * The thumb node itself.
+   */
+  children: PropTypes.node,
+  /**
+   * CSS wrapper class names.
+   */
+  className: PropTypes.string,
+  /**
+   * Should the thumb show a tooltip with the current value?
+   */
+  hasTooltip: PropTypes.bool.isRequired,
+  /**
+   * Percentage offset for the select thumb value.
+   */
+  style: PropTypes.object
+};
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
@@ -148,6 +145,12 @@ class Slider extends PureComponent {
         return;
       }
 
+      // We're going to force focus on one of the handles later on here, b/c we're
+      // firing on a mousedown event, we need to call event.preventDefault() to
+      // keep the focus from leaving the HTMLElement.
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#notes
+      evt.preventDefault();
+
       // Register drag stop handlers
       DRAG_STOP_EVENT_TYPES.forEach(element => {
         this.element?.ownerDocument.addEventListener(element, this.onDragStop);
@@ -160,14 +163,34 @@ class Slider extends PureComponent {
       const clientX = this.getClientXFromEvent(evt);
       let activeHandle;
       if (this.hasTwoHandles()) {
-        const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
-        const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
-        if (distanceToLower <= distanceToUpper) {
+        if (evt.target == this.thumbRef.current) {
           activeHandle = HandlePosition.LOWER;
-        } else {
+        } else if (evt.target == this.thumbRefUpper.current) {
           activeHandle = HandlePosition.UPPER;
+        } else {
+          const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
+          const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
+          if (distanceToLower <= distanceToUpper) {
+            activeHandle = HandlePosition.LOWER;
+          } else {
+            activeHandle = HandlePosition.UPPER;
+          }
         }
       }
+
+      // Force focus to the appropriate handle.
+      const focusOptions = {
+        preventScroll: true
+      };
+      if (this.hasTwoHandles()) {
+        if (this.thumbRef.current && activeHandle === HandlePosition.LOWER) {
+          this.thumbRef.current.focus(focusOptions);
+        } else if (this.thumbRefUpper.current && activeHandle === HandlePosition.UPPER) {
+          this.thumbRefUpper.current.focus(focusOptions);
+        }
+      } else if (this.thumbRef.current) {
+        this.thumbRef.current.focus(focusOptions);
+      }
       this.setState({
         activeHandle
       });
@@ -465,12 +488,12 @@ class Slider extends PureComponent {
         }
       }
     });
-    _defineProperty(this, "calcLeftPercent", _ref => {
+    _defineProperty(this, "calcLeftPercent", _ref2 => {
       let {
         clientX,
         value,
         range
-      } = _ref;
+      } = _ref2;
       const boundingRect = this.element?.getBoundingClientRect?.();
       let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
@@ -492,11 +515,11 @@ class Slider extends PureComponent {
       // re-assure Typescript, return 0.
       return 0;
     });
-    _defineProperty(this, "calcSteppedValuePercent", _ref2 => {
+    _defineProperty(this, "calcSteppedValuePercent", _ref3 => {
       let {
         leftPercent,
         range
-      } = _ref2;
+      } = _ref3;
       const {
         step = 1
       } = this.props;
@@ -525,12 +548,12 @@ class Slider extends PureComponent {
      *   clientX is not provided.
      * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
      */
-    _defineProperty(this, "calcValue", _ref3 => {
+    _defineProperty(this, "calcValue", _ref4 => {
       let {
         clientX,
         value,
         useRawValue = false
-      } = _ref3;
+      } = _ref4;
       const range = this.props.max - this.props.min;
 
       // @todo solve for rtl.
@@ -581,11 +604,11 @@ class Slider extends PureComponent {
      *
      * Guards against setting either lower or upper values beyond its counterpart.
      */
-    _defineProperty(this, "setValueLeftForHandle", (handle, _ref4) => {
+    _defineProperty(this, "setValueLeftForHandle", (handle, _ref5) => {
       let {
         value: newValue,
         left: newLeft
-      } = _ref4;
+      } = _ref5;
       const {
         value,
         valueUpper,
@@ -620,13 +643,13 @@ class Slider extends PureComponent {
         });
       }
     });
-    _defineProperty(this, "isValidValueForPosition", _ref5 => {
+    _defineProperty(this, "isValidValueForPosition", _ref6 => {
       let {
         handle,
         value: newValue,
         min,
         max
-      } = _ref5;
+      } = _ref6;
       const {
         value,
         valueUpper
@@ -645,21 +668,21 @@ class Slider extends PureComponent {
       }
       return false;
     });
-    _defineProperty(this, "isValidValue", _ref6 => {
+    _defineProperty(this, "isValidValue", _ref7 => {
       let {
         value,
         min,
         max
-      } = _ref6;
+      } = _ref7;
       return !(value < min || value > max);
     });
-    _defineProperty(this, "getAdjustedValueForPosition", _ref7 => {
+    _defineProperty(this, "getAdjustedValueForPosition", _ref8 => {
       let {
         handle,
         value: newValue,
         min,
         max
-      } = _ref7;
+      } = _ref8;
       const {
         value,
         valueUpper
@@ -678,12 +701,12 @@ class Slider extends PureComponent {
       }
       return newValue;
     });
-    _defineProperty(this, "getAdjustedValue", _ref8 => {
+    _defineProperty(this, "getAdjustedValue", _ref9 => {
       let {
         value,
         min,
         max
-      } = _ref8;
+      } = _ref9;
       if (value < min) {
         value = min;
       }
@@ -768,22 +791,10 @@ class Slider extends PureComponent {
     // Fire onChange event handler if present, if there's a usable value, and
     // if the value is different from the last one
     if (this.hasTwoHandles()) {
-      if (this.thumbRef.current) {
-        this.thumbRef.current.style.insetInlineStart = `${this.state.left}%`;
-        if (this.state.isRtl) {
-          this.thumbRef.current.style.transform = `translate(100%, -50%)`;
-        }
-      }
-      if (this.thumbRefUpper.current) {
-        this.thumbRefUpper.current.style.insetInlineStart = `${this.state.leftUpper}%`;
-      }
       if (this.filledTrackRef.current) {
         this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
       }
     } else {
-      if (this.thumbRef.current) {
-        this.thumbRef.current.style.insetInlineStart = this.state.isRtl ? `calc(${this.state.left}% - 14px)` : `${this.state.left}%`;
-      }
       if (this.filledTrackRef.current) {
         this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
       }
@@ -977,7 +988,8 @@ class Slider extends PureComponent {
       const containerClasses = cx(`${prefix}--slider-container`, {
         [`${prefix}--slider-container--two-handles`]: twoHandles,
         [`${prefix}--slider-container--disabled`]: disabled,
-        [`${prefix}--slider-container--readonly`]: readOnly
+        [`${prefix}--slider-container--readonly`]: readOnly,
+        [`${prefix}--slider-container--rtl`]: isRtl
       });
       const sliderClasses = cx(`${prefix}--slider`, {
         [`${prefix}--slider--disabled`]: disabled,
@@ -985,8 +997,7 @@ class Slider extends PureComponent {
       });
       const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
       const conditionalInputClasses = {
-        [`${prefix}--text-input--light`]: light,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+        [`${prefix}--text-input--light`]: light
       };
       const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
         [`${prefix}--text-input--invalid`]: !readOnly && !isValid,
@@ -997,10 +1008,12 @@ class Slider extends PureComponent {
         [`${prefix}--slider-text-input--warn`]: showWarningUpper
       }]);
       const lowerInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--lower`, {
-        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
       }]);
       const upperInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--upper`, {
-        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
       }]);
       const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
         [`${prefix}--slider__thumb--lower`]: twoHandles
@@ -1008,6 +1021,22 @@ class Slider extends PureComponent {
       const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
         [`${prefix}--slider__thumb--upper`]: twoHandles
       });
+      const lowerThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+        [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+      }]);
+      const upperThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+        [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+      }]);
+      const lowerThumbWrapperProps = {
+        style: {
+          insetInlineStart: `${this.state.left}%`
+        }
+      };
+      const upperThumbWrapperProps = {
+        style: {
+          insetInlineStart: `${this.state.leftUpper}%`
+        }
+      };
       return /*#__PURE__*/React__default.createElement("div", {
         className: cx(`${prefix}--form-item`, className)
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -1056,7 +1085,12 @@ class Slider extends PureComponent {
         role: "presentation",
         tabIndex: -1,
         "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
-      }, other), /*#__PURE__*/React__default.createElement("div", {
+      }, other), /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
+        hasTooltip: hideTextInput,
+        className: lowerThumbWrapperClasses,
+        label: `${value}`,
+        align: twoHandles ? 'top-right' : 'top'
+      }, lowerThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
@@ -1070,7 +1104,12 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl && (_LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null))), twoHandles && !isRtl && (_LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))), twoHandles && isRtl && (_UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null))), twoHandles && isRtl && (_UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null)))), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
+        hasTooltip: hideTextInput,
+        className: upperThumbWrapperClasses,
+        label: `${valueUpper}`,
+        align: "top-left"
+      }, upperThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: upperThumbClasses,
         role: "slider",
         tabIndex: !readOnly ? 0 : -1,
@@ -1082,7 +1121,7 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl && (_UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null))), twoHandles && !isRtl && (_UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))), twoHandles && isRtl && (_LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null))), twoHandles && isRtl && (_LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null)))) : null, /*#__PURE__*/React__default.createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : undefined)) : null, /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;

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

@@ -0,0 +1,4 @@
+export declare const LowerHandle: () => JSX.Element;
+export declare const LowerHandleFocus: () => JSX.Element;
+export declare const UpperHandle: () => JSX.Element;
+export declare const UpperHandleFocus: () => JSX.Element;