@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/cjs/core/Slider/Slider.js

@@ -1,261 +1,377 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Slider = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const Track_js_1 = require("./Track.js");
-const Thumb_js_1 = require("./Thumb.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const Track_js_1 = require('./Track.js');
+const Thumb_js_1 = require('./Thumb.js');
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
-    if (orientation === 'horizontal') {
-        const position = (0, index_js_1.getBoundedValue)(pointerX, rect.left, rect.right);
-        return (position - rect.left) / rect.width;
-    }
-    const position = (0, index_js_1.getBoundedValue)(pointerY, rect.top, rect.bottom);
-    return (rect.bottom - position) / rect.height;
+  if (orientation === 'horizontal') {
+    const position = (0, index_js_1.getBoundedValue)(
+      pointerX,
+      rect.left,
+      rect.right,
+    );
+    return (position - rect.left) / rect.width;
+  }
+  const position = (0, index_js_1.getBoundedValue)(
+    pointerY,
+    rect.top,
+    rect.bottom,
+  );
+  return (rect.bottom - position) / rect.height;
 };
 const getClosestValueIndex = (values, pointerValue) => {
-    if (1 === values.length) {
-        return 0;
-    }
-    const distances = values.map((value) => Math.abs(value - pointerValue));
-    const smallest = Math.min(...distances);
-    return distances.indexOf(smallest);
+  if (1 === values.length) {
+    return 0;
+  }
+  const distances = values.map((value) => Math.abs(value - pointerValue));
+  const smallest = Math.min(...distances);
+  return distances.indexOf(smallest);
 };
 const getDefaultTrackDisplay = (trackDisplayMode, values) => {
-    if ('auto' !== trackDisplayMode) {
-        return trackDisplayMode;
-    }
-    return values.length % 2 ? 'even-segments' : 'odd-segments';
+  if ('auto' !== trackDisplayMode) {
+    return trackDisplayMode;
+  }
+  return values.length % 2 ? 'even-segments' : 'odd-segments';
 };
 const roundValueToClosestStep = (value, step, min) => {
-    return Math.round((value - min) / step) * step + min;
+  return Math.round((value - min) / step) * step + min;
 };
 const formatNumberValue = (value, step, numDecimals) => {
-    if (Number.isInteger(step)) {
-        return value.toFixed(0);
-    }
-    return value.toFixed(numDecimals);
+  if (Number.isInteger(step)) {
+    return value.toFixed(0);
+  }
+  return value.toFixed(numDecimals);
 };
 /**
  * Focus specified thumb on Slider control
  */
 const focusThumb = (sliderContainer, activeIndex) => {
-    const doc = sliderContainer.ownerDocument;
-    if (!sliderContainer.contains(doc.activeElement) ||
-        Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
-        const thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
-        thumbToFocus && thumbToFocus.focus();
-    }
+  const doc = sliderContainer.ownerDocument;
+  if (
+    !sliderContainer.contains(doc.activeElement) ||
+    Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex
+  ) {
+    const thumbToFocus = sliderContainer.querySelector(
+      `[data-index="${activeIndex}"]`,
+    );
+    thumbToFocus && thumbToFocus.focus();
+  }
 };
 /**
  * Slider component that display Thumbs for each value specified along a Rail.
  * @example
  * <Slider values={[10]} min={0} max={60} disabled />
  * <Slider values={[10, 20]} min={0} max={50} step={2} />
- * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
+ * <Slider values={[10, 20, 30, 40]} min={0} max={60}
  *   thumbMode='allow-crossing' />
  */
 exports.Slider = React.forwardRef((props, ref) => {
-    const { min = 0, max = 100, values, step = 1, setFocus = false, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, railContainerProps, orientation = 'horizontal', ...rest } = props;
-    const [currentValues, setCurrentValues] = React.useState(values);
-    React.useEffect(() => {
-        setCurrentValues(values);
-    }, [values]);
-    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel ?? min.toString());
-    React.useEffect(() => {
-        setMinValueLabel(minLabel ?? min.toString());
-    }, [minLabel, min]);
-    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel ?? max.toString());
-    React.useEffect(() => {
-        setMaxValueLabel(maxLabel ?? max.toString());
-    }, [maxLabel, max]);
-    const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
-    React.useEffect(() => {
-        setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
-    }, [trackDisplayMode, currentValues]);
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
-        if (containerRef.current && setFocus) {
-            focusThumb(containerRef.current, 0);
-        }
-    }, [setFocus]);
-    const getNumDecimalPlaces = React.useMemo(() => {
-        const stepString = step.toString();
-        const decimalIndex = stepString.indexOf('.');
-        return stepString.length - (decimalIndex + 1);
-    }, [step]);
-    const getAllowableThumbRange = React.useCallback((index) => {
-        if (thumbMode === 'inhibit-crossing') {
-            const minVal = index === 0 ? min : currentValues[index - 1] + step;
-            const maxVal = index < currentValues.length - 1
-                ? currentValues[index + 1] - step
-                : max;
-            return [minVal, maxVal];
-        }
-        return [min, max];
-    }, [max, min, step, thumbMode, currentValues]);
-    const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
-    const updateThumbValue = React.useCallback((event, callbackType) => {
-        if (containerRef.current && undefined !== activeThumbIndex) {
-            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            let pointerValue = min + (max - min) * percent;
-            pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
-            pointerValue = (0, index_js_1.getBoundedValue)(pointerValue, minVal, maxVal);
-            if (pointerValue !== currentValues[activeThumbIndex]) {
-                const newValues = [...currentValues];
-                newValues[activeThumbIndex] = pointerValue;
-                setCurrentValues(newValues);
-                'onChange' === callbackType
-                    ? onChange?.(newValues)
-                    : onUpdate?.(newValues);
-            }
-            else if ('onChange' === callbackType) {
-                onChange?.(currentValues);
-            }
+  const {
+    min = 0,
+    max = 100,
+    values,
+    step = 1,
+    tooltipProps,
+    disabled = false,
+    tickLabels,
+    minLabel,
+    maxLabel,
+    trackDisplayMode = 'auto',
+    thumbMode = 'inhibit-crossing',
+    onChange,
+    onUpdate,
+    thumbProps,
+    className,
+    railContainerProps,
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  const [currentValues, setCurrentValues] = React.useState(values);
+  React.useEffect(() => {
+    setCurrentValues(values);
+  }, [values]);
+  const [minValueLabel, setMinValueLabel] = React.useState(
+    () => minLabel ?? min.toString(),
+  );
+  React.useEffect(() => {
+    setMinValueLabel(minLabel ?? min.toString());
+  }, [minLabel, min]);
+  const [maxValueLabel, setMaxValueLabel] = React.useState(
+    () => maxLabel ?? max.toString(),
+  );
+  React.useEffect(() => {
+    setMaxValueLabel(maxLabel ?? max.toString());
+  }, [maxLabel, max]);
+  const [trackDisplay, setTrackDisplay] = React.useState(() =>
+    getDefaultTrackDisplay(trackDisplayMode, currentValues),
+  );
+  React.useEffect(() => {
+    setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
+  }, [trackDisplayMode, currentValues]);
+  const containerRef = React.useRef(null);
+  const getNumDecimalPlaces = React.useMemo(() => {
+    const stepString = step.toString();
+    const decimalIndex = stepString.indexOf('.');
+    return stepString.length - (decimalIndex + 1);
+  }, [step]);
+  const getAllowableThumbRange = React.useCallback(
+    (index) => {
+      if (thumbMode === 'inhibit-crossing') {
+        const minVal = index === 0 ? min : currentValues[index - 1] + step;
+        const maxVal =
+          index < currentValues.length - 1
+            ? currentValues[index + 1] - step
+            : max;
+        return [minVal, maxVal];
+      }
+      return [min, max];
+    },
+    [max, min, step, thumbMode, currentValues],
+  );
+  const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
+  const updateThumbValue = React.useCallback(
+    (event, callbackType) => {
+      if (containerRef.current && undefined !== activeThumbIndex) {
+        const percent = getPercentageOfRectangle(
+          containerRef.current.getBoundingClientRect(),
+          event.clientX,
+          event.clientY,
+          orientation,
+        );
+        let pointerValue = min + (max - min) * percent;
+        pointerValue = roundValueToClosestStep(pointerValue, step, min);
+        const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
+        pointerValue = (0, index_js_1.getBoundedValue)(
+          pointerValue,
+          minVal,
+          maxVal,
+        );
+        if (pointerValue !== currentValues[activeThumbIndex]) {
+          const newValues = [...currentValues];
+          newValues[activeThumbIndex] = pointerValue;
+          setCurrentValues(newValues);
+          'onChange' === callbackType
+            ? onChange?.(newValues)
+            : onUpdate?.(newValues);
+        } else if ('onChange' === callbackType) {
+          onChange?.(currentValues);
         }
-    }, [
-        activeThumbIndex,
-        min,
-        max,
-        step,
-        getAllowableThumbRange,
-        currentValues,
-        onUpdate,
-        onChange,
-        orientation,
-    ]);
-    const handlePointerMove = React.useCallback((event) => {
-        if (activeThumbIndex === undefined) {
-            return;
+      }
+    },
+    [
+      activeThumbIndex,
+      min,
+      max,
+      step,
+      getAllowableThumbRange,
+      currentValues,
+      onUpdate,
+      onChange,
+      orientation,
+    ],
+  );
+  const handlePointerMove = React.useCallback(
+    (event) => {
+      if (activeThumbIndex === undefined) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      updateThumbValue(event, 'onUpdate');
+    },
+    [activeThumbIndex, updateThumbValue],
+  );
+  // function called by Thumb keyboard processing
+  const onThumbValueChanged = React.useCallback(
+    (index, value, keyboardReleased) => {
+      if (currentValues[index] === value && !keyboardReleased) {
+        return;
+      }
+      if (keyboardReleased) {
+        onChange?.(currentValues); // currentValues since key up should not change value but only stop continuous value selection
+      } else {
+        const newValues = [...currentValues]; // newValues since key down should change value
+        newValues[index] = value;
+        onUpdate?.(newValues);
+        setCurrentValues(newValues);
+      }
+    },
+    [currentValues, onUpdate, onChange],
+  );
+  const onThumbActivated = React.useCallback((index) => {
+    setActiveThumbIndex(index);
+  }, []);
+  const handlePointerUp = React.useCallback(
+    (event) => {
+      if (activeThumbIndex === undefined) {
+        return;
+      }
+      updateThumbValue(event, 'onChange');
+      setActiveThumbIndex(undefined);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [activeThumbIndex, updateThumbValue],
+  );
+  const handlePointerDownOnSlider = React.useCallback(
+    (event) => {
+      if (containerRef.current) {
+        const percent = getPercentageOfRectangle(
+          containerRef.current.getBoundingClientRect(),
+          event.clientX,
+          event.clientY,
+          orientation,
+        );
+        let pointerValue = min + (max - min) * percent;
+        pointerValue = roundValueToClosestStep(pointerValue, step, min);
+        const closestValueIndex = getClosestValueIndex(
+          currentValues,
+          pointerValue,
+        );
+        const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
+        pointerValue = (0, index_js_1.getBoundedValue)(
+          pointerValue,
+          minVal,
+          maxVal,
+        );
+        if (pointerValue === currentValues[closestValueIndex]) {
+          return;
         }
+        const newValues = [...currentValues];
+        newValues[closestValueIndex] = pointerValue;
+        setCurrentValues(newValues);
+        onChange?.(newValues);
+        onUpdate?.(newValues);
+        focusThumb(containerRef.current, closestValueIndex);
         event.preventDefault();
         event.stopPropagation();
-        updateThumbValue(event, 'onUpdate');
-    }, [activeThumbIndex, updateThumbValue]);
-    // function called by Thumb keyboard processing
-    const onThumbValueChanged = React.useCallback((index, value, keyboardReleased) => {
-        if (currentValues[index] === value && !keyboardReleased) {
-            return;
-        }
-        if (keyboardReleased) {
-            onChange?.(currentValues); // currentValues since key up should not change value but only stop continuous value selection
-        }
-        else {
-            const newValues = [...currentValues]; // newValues since key down should change value
-            newValues[index] = value;
-            onUpdate?.(newValues);
-            setCurrentValues(newValues);
-        }
-    }, [currentValues, onUpdate, onChange]);
-    const onThumbActivated = React.useCallback((index) => {
-        setActiveThumbIndex(index);
-    }, []);
-    const handlePointerUp = React.useCallback((event) => {
-        if (activeThumbIndex === undefined) {
-            return;
-        }
-        updateThumbValue(event, 'onChange');
-        setActiveThumbIndex(undefined);
-        event.preventDefault();
-        event.stopPropagation();
-    }, [activeThumbIndex, updateThumbValue]);
-    const handlePointerDownOnSlider = React.useCallback((event) => {
-        if (containerRef.current) {
-            const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
-            let pointerValue = min + (max - min) * percent;
-            pointerValue = roundValueToClosestStep(pointerValue, step, min);
-            const closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
-            const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
-            pointerValue = (0, index_js_1.getBoundedValue)(pointerValue, minVal, maxVal);
-            if (pointerValue === currentValues[closestValueIndex]) {
-                return;
-            }
-            const newValues = [...currentValues];
-            newValues[closestValueIndex] = pointerValue;
-            setCurrentValues(newValues);
-            onChange?.(newValues);
-            onUpdate?.(newValues);
-            focusThumb(containerRef.current, closestValueIndex);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, [
-        min,
-        max,
-        step,
-        currentValues,
-        getAllowableThumbRange,
-        onChange,
-        onUpdate,
-        orientation,
-    ]);
-    (0, index_js_1.useEventListener)('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
-    (0, index_js_1.useEventListener)('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
-    const tickMarkArea = React.useMemo(() => {
-        if (!tickLabels) {
-            return null;
-        }
-        if (Array.isArray(tickLabels)) {
-            return (React.createElement(index_js_1.Box, { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement(index_js_1.Box, { as: 'span', key: index, className: 'iui-slider-tick' }, label)))));
-        }
-        return tickLabels;
-    }, [tickLabels]);
-    const generateTooltipProps = React.useCallback((index, val) => {
-        const outProps = tooltipProps
-            ? tooltipProps(index, val, step)
-            : {};
-        return {
-            ...outProps,
-            content: outProps.content
-                ? outProps.content
-                : formatNumberValue(val, step, getNumDecimalPlaces),
-        };
-    }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement(index_js_1.Box, { ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
-        minValueLabel && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-slider-min' }, minValueLabel)),
-        React.createElement(index_js_1.Box, { ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
-                'iui-grabbing': undefined !== activeThumbIndex,
-            }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
-            React.createElement(index_js_1.Box, { className: 'iui-slider-rail' }),
-            currentValues.map((thumbValue, index) => {
-                const [minVal, maxVal] = getAllowableThumbRange(index);
-                const thisThumbProps = thumbProps?.(index);
-                return (React.createElement(Thumb_js_1.Thumb, { key: thisThumbProps?.id ?? index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
-            }),
-            React.createElement(Track_js_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
-            tickMarkArea),
-        maxValueLabel && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-slider-max' }, maxValueLabel))));
+      }
+    },
+    [
+      min,
+      max,
+      step,
+      currentValues,
+      getAllowableThumbRange,
+      onChange,
+      onUpdate,
+      orientation,
+    ],
+  );
+  (0, index_js_1.useEventListener)(
+    'pointermove',
+    handlePointerMove,
+    containerRef.current?.ownerDocument,
+  );
+  (0, index_js_1.useEventListener)(
+    'pointerup',
+    handlePointerUp,
+    containerRef.current?.ownerDocument,
+  );
+  const tickMarkArea = React.useMemo(() => {
+    if (!tickLabels) {
+      return null;
+    }
+    if (Array.isArray(tickLabels)) {
+      return React.createElement(
+        index_js_1.Box,
+        { className: 'iui-slider-ticks' },
+        tickLabels.map((label, index) =>
+          React.createElement(
+            index_js_1.Box,
+            { as: 'span', key: index, className: 'iui-slider-tick' },
+            label,
+          ),
+        ),
+      );
+    }
+    return tickLabels;
+  }, [tickLabels]);
+  const generateTooltipProps = React.useCallback(
+    (index, val) => {
+      const outProps = tooltipProps ? tooltipProps(index, val, step) : {};
+      return {
+        ...outProps,
+        content: outProps.content
+          ? outProps.content
+          : formatNumberValue(val, step, getNumDecimalPlaces),
+      };
+    },
+    [getNumDecimalPlaces, step, tooltipProps],
+  );
+  return React.createElement(
+    index_js_1.Box,
+    {
+      ref: ref,
+      className: (0, classnames_1.default)(
+        'iui-slider-component-container',
+        `iui-slider-${orientation}`,
+        { 'iui-disabled': disabled },
+        className,
+      ),
+      ...rest,
+    },
+    minValueLabel &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-slider-min' },
+        minValueLabel,
+      ),
+    React.createElement(
+      index_js_1.Box,
+      {
+        ref: containerRef,
+        className: (0, classnames_1.default)('iui-slider-container', {
+          'iui-grabbing': undefined !== activeThumbIndex,
+        }),
+        onPointerDown: handlePointerDownOnSlider,
+        ...railContainerProps,
+      },
+      React.createElement(index_js_1.Box, { className: 'iui-slider-rail' }),
+      currentValues.map((thumbValue, index) => {
+        const [minVal, maxVal] = getAllowableThumbRange(index);
+        const thisThumbProps = thumbProps?.(index);
+        return React.createElement(Thumb_js_1.Thumb, {
+          key: thisThumbProps?.id ?? index,
+          index: index,
+          disabled: disabled,
+          isActive: activeThumbIndex === index,
+          onThumbActivated: onThumbActivated,
+          onThumbValueChanged: onThumbValueChanged,
+          minVal: minVal,
+          maxVal: maxVal,
+          value: thumbValue,
+          tooltipProps: generateTooltipProps(index, thumbValue),
+          thumbProps: thisThumbProps,
+          step: step,
+          sliderMin: min,
+          sliderMax: max,
+          orientation: orientation,
+        });
+      }),
+      React.createElement(Track_js_1.Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+      }),
+      tickMarkArea,
+    ),
+    maxValueLabel &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-slider-max' },
+        maxValueLabel,
+      ),
+  );
 });
 exports.default = exports.Slider;

package/cjs/core/Slider/Thumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import { Tooltip } from '../Tooltip/index.js';
 import type { SliderProps } from './Slider.js';
-declare type ThumbProps = {
+type ThumbProps = {
     /**
      * Thumb value.
      */
@@ -49,7 +49,7 @@ declare type ThumbProps = {
     /**
      * Additional tooltip props.
      */
-    tooltipProps: Omit<TooltipProps, 'children'>;
+    tooltipProps: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;
     /**
      * Additional props for Thumb.
      */
@@ -60,5 +60,5 @@ declare type ThumbProps = {
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
-export declare const Thumb: (props: ThumbProps) => JSX.Element;
+export declare const Thumb: (props: ThumbProps) => React.JSX.Element;
 export {};