rsuite 5.53.2 → 5.55.0

package/esm/Pagination/PaginationGroup.js

@@ -1,73 +1,52 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Pagination from './Pagination';
-import SelectPicker from '../SelectPicker';
 import Divider from '../Divider';
 import Input from '../Input';
-import { tplTransform, useClassNames, useCustom, useControlled } from '../utils';
-var LimitPicker = function LimitPicker(props) {
-  var disabled = props.disabled,
-    limitOptions = props.limitOptions,
-    locale = props.locale,
-    limit = props.limit,
-    onChangeLimit = props.onChangeLimit,
-    size = props.size,
-    prefix = props.prefix;
-  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);
-  var formatlimitOptions = limitOptions.map(function (item) {
-    return {
-      value: item,
-      label: locale.limit && tplTransform(locale.limit, item)
-    };
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: prefix('limit')
-  }, /*#__PURE__*/React.createElement(SelectPicker, {
-    size: size,
-    cleanable: false,
-    searchable: false,
-    placement: "topStart",
-    data: formatlimitOptions,
-    value: limit,
-    onChange: onChangeLimit // fixme don't use any
-    ,
-    menuStyle: {
-      minWidth: 'auto'
-    },
-    disabled: disabledPicker
-  }));
-};
+import { tplTransform, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
+import LimitPicker from './LimitPicker';
+
+/**
+ * The layout of the paging component.
+ */
+
 var defaultLayout = ['pager'];
 var defaultLimitOptions = [30, 50, 100];
+
+/**
+ * Pagination component for displaying page numbers.
+ *
+ * @see https://rsuitejs.com/components/pagination
+ */
 var PaginationGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
+    activePageProp = props.activePage,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'pagination-group' : _props$classPrefix,
+    className = props.className,
+    disabled = props.disabled,
     size = props.size,
+    style = props.style,
     total = props.total,
     prev = props.prev,
     next = props.next,
     first = props.first,
     last = props.last,
-    maxButtons = props.maxButtons,
-    className = props.className,
     _props$limitOptions = props.limitOptions,
     limitOptions = _props$limitOptions === void 0 ? defaultLimitOptions : _props$limitOptions,
     limitProp = props.limit,
-    activePageProp = props.activePage,
-    disabled = props.disabled,
-    style = props.style,
     localeProp = props.locale,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? defaultLayout : _props$layout,
+    maxButtons = props.maxButtons,
     onChangePage = props.onChangePage,
     onChangeLimit = props.onChangeLimit,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "size", "total", "prev", "next", "first", "last", "maxButtons", "className", "limitOptions", "limit", "activePage", "disabled", "style", "locale", "layout", "onChangePage", "onChangeLimit"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "activePage", "classPrefix", "className", "disabled", "size", "style", "total", "prev", "next", "first", "last", "limitOptions", "limit", "locale", "layout", "maxButtons", "onChangePage", "onChangeLimit"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -82,80 +61,82 @@ var PaginationGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     locale = _useCustom.locale;
   var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
   var classes = merge(className, withClassPrefix(size));
-  var handleInputBlur = useCallback(function (event) {
+  var handleInputBlur = useEventCallback(function (event) {
     var value = parseInt(event.target.value);
     if (value > 0 && value <= pages) {
       onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(value);
       setActivePage(value);
     }
     event.target.value = '';
-  }, [onChangePage, pages, setActivePage]);
-  var handleInputPressEnter = useCallback(function (event) {
+  });
+  var handleInputPressEnter = useEventCallback(function (event) {
     var _event$target;
     (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();
-  }, []);
-  var handleChangeLimit = useCallback(function (value) {
+  });
+  var handleChangeLimit = useEventCallback(function (value) {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);
-  }, [onChangeLimit, setLimit]);
+  });
   return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     className: classes,
     style: style
   }, layout.map(function (key, index) {
     var onlyKey = "" + key + index;
-    if (key === '-') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: prefix('grow'),
-        key: onlyKey
-      });
-    } else if (key === '|') {
-      return /*#__PURE__*/React.createElement(Divider, {
-        vertical: true,
-        key: onlyKey
-      });
-    } else if (key === 'pager') {
-      return /*#__PURE__*/React.createElement(Pagination, _extends({
-        key: onlyKey,
-        size: size,
-        prev: prev,
-        next: next,
-        first: first,
-        last: last,
-        maxButtons: maxButtons,
-        pages: pages,
-        disabled: disabled,
-        onSelect: onChangePage // fixme don't use any
-        ,
-        activePage: activePage
-      }, rest));
-    } else if (key === 'total') {
-      return /*#__PURE__*/React.createElement("div", {
-        key: onlyKey,
-        className: prefix('total')
-      }, locale.total && tplTransform(locale.total, total));
-    } else if (key === 'skip') {
-      return /*#__PURE__*/React.createElement("div", {
-        key: onlyKey,
-        className: classNames(prefix('skip'))
-      }, locale.skip && tplTransform(locale.skip, /*#__PURE__*/React.createElement(Input, {
-        size: size,
-        onBlur: handleInputBlur,
-        onPressEnter: handleInputPressEnter
-      })));
-    } else if (key === 'limit') {
-      return /*#__PURE__*/React.createElement(LimitPicker, {
-        key: onlyKey,
-        size: size,
-        locale: locale,
-        limit: limit,
-        onChangeLimit: handleChangeLimit,
-        limitOptions: limitOptions,
-        disabled: disabled,
-        prefix: prefix
-      });
+    switch (key) {
+      case '-':
+        return /*#__PURE__*/React.createElement("div", {
+          className: prefix('grow'),
+          key: onlyKey
+        });
+      case '|':
+        return /*#__PURE__*/React.createElement(Divider, {
+          vertical: true,
+          key: onlyKey
+        });
+      case 'pager':
+        return /*#__PURE__*/React.createElement(Pagination, _extends({
+          key: onlyKey,
+          size: size,
+          prev: prev,
+          next: next,
+          first: first,
+          last: last,
+          maxButtons: maxButtons,
+          pages: pages,
+          disabled: disabled,
+          onSelect: onChangePage // fixme don't use any
+          ,
+          activePage: activePage
+        }, rest));
+      case 'total':
+        return /*#__PURE__*/React.createElement("div", {
+          key: onlyKey,
+          className: prefix('total')
+        }, locale.total && tplTransform(locale.total, total));
+      case 'skip':
+        return /*#__PURE__*/React.createElement("div", {
+          key: onlyKey,
+          className: classNames(prefix('skip'))
+        }, locale.skip && tplTransform(locale.skip, /*#__PURE__*/React.createElement(Input, {
+          size: size,
+          onBlur: handleInputBlur,
+          onPressEnter: handleInputPressEnter
+        })));
+      case 'limit':
+        return /*#__PURE__*/React.createElement(LimitPicker, {
+          key: onlyKey,
+          size: size,
+          locale: locale,
+          limit: limit,
+          onChangeLimit: handleChangeLimit,
+          limitOptions: limitOptions,
+          disabled: disabled,
+          prefix: prefix
+        });
+      default:
+        return key;
     }
-    return key;
   }));
 });
 PaginationGroup.displayName = 'PaginationGroup';

package/esm/RangeSlider/RangeSlider.js

@@ -11,7 +11,7 @@ import { sliderPropTypes } from '../Slider/Slider';
 import ProgressBar from '../Slider/ProgressBar';
 import Handle from '../Slider/Handle';
 import Graduated from '../Slider/Graduated';
-import { precisionMath, checkValue } from '../Slider/utils';
+import { precisionMath, checkValue, getPosition } from '../Slider/utils';
 import { tupleType } from '../internals/propTypes';
 var defaultDefaultValue = [0, 0];
 
@@ -27,17 +27,17 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     Component = _props$as === void 0 ? 'div' : _props$as,
     barClassName = props.barClassName,
     className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
     constraint = props.constraint,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,
+    disabled = props.disabled,
     graduated = props.graduated,
     _props$progress = props.progress,
     progress = _props$progress === void 0 ? true : _props$progress,
     vertical = props.vertical,
-    disabled = props.disabled,
     readOnly = props.readOnly,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
     _props$min = props.min,
     min = _props$min === void 0 ? 0 : _props$min,
     _props$max = props.max,
@@ -55,7 +55,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMark = props.renderMark,
     onChange = props.onChange,
     onChangeCommitted = props.onChangeCommitted,
-    rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "readOnly", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+    rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "classPrefix", "constraint", "defaultValue", "disabled", "graduated", "progress", "vertical", "readOnly", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = useRef(null);
 
   // Define the parameter position of the handle
@@ -116,7 +116,10 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [count, getBarHeight, getBarWidth, step, vertical]);
   var getValueByPosition = useCallback(function (event) {
     var barOffset = getOffset(barRef.current);
-    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
+    var _getPosition = getPosition(event),
+      pageX = _getPosition.pageX,
+      pageY = _getPosition.pageY;
+    var offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;
     var val = rtl && !vertical ? barOffset.width - offset : offset;
     return getValueByOffset(val) + min;
   }, [getValueByOffset, min, rtl, vertical]);
@@ -181,7 +184,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback function that is fired when the mouseup is triggered
    */
-  var handleChangeCommitted = useCallback(function (event, dataset) {
+  var handleChangeCommitted = useEventCallback(function (event, dataset) {
     if (disabled || readOnly) {
       return;
     }
@@ -190,8 +193,8 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setValue(nextValue);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
     }
-  }, [disabled, readOnly, getNextValue, isRangeMatchingConstraint, setValue, onChangeCommitted]);
-  var handleKeyDown = useCallback(function (event) {
+  });
+  var handleKeyDown = useEventCallback(function (event) {
     var _event$target;
     var _event$target$dataset = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['dataset'],
       key = _event$target$dataset.key;
@@ -230,8 +233,8 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     }
-  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);
-  var handleBarClick = useCallback(function (event) {
+  });
+  var handleBarClick = useEventCallback(function (event) {
     if (disabled || readOnly) {
       return;
     }
@@ -253,7 +256,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
     }
-  }, [disabled, readOnly, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, onChangeCommitted, setValue, value]);
+  });
   var handleProps = useMemo(function () {
     return [{
       value: value[0],

package/esm/Slider/Handle.js

@@ -1,14 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import DOMMouseMoveTracker from 'dom-lib/DOMMouseMoveTracker';
-import addStyle from 'dom-lib/addStyle';
-import getWidth from 'dom-lib/getWidth';
 import Tooltip from '../Tooltip';
 import { useClassNames, mergeRefs } from '../utils';
 import Input from './Input';
+import useDrag from './useDrag';
 var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _extends2;
   var _props$as = props.as,
@@ -34,80 +32,40 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dataRange = props['data-range'],
     dateKey = props['data-key'],
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "disabled", "style", "children", "position", "vertical", "tooltip", "rtl", "value", "role", "tabIndex", "renderTooltip", "onDragStart", "onDragMove", "onDragEnd", "onKeyDown", "data-range", "data-key"]);
-  var _useState = useState(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var rootRef = useRef(null);
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
   var styles = _extends({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var _useDrag = useDrag({
+      tooltip: tooltip,
+      disabled: disabled,
+      onDragStart: onDragStart,
+      onDragMove: onDragMove,
+      onDragEnd: onDragEnd
+    }),
+    active = _useDrag.active,
+    onMoveStart = _useDrag.onMoveStart,
+    onMouseEnter = _useDrag.onMouseEnter,
+    rootRef = _useDrag.rootRef,
+    tooltipRef = _useDrag.tooltipRef;
   var handleClasses = merge(className, prefix('handle'), {
     active: active
   });
-  var tooltipRef = useRef(null);
-  var mouseMoveTracker = useRef();
-  var releaseMouseMoves = useCallback(function () {
-    var _mouseMoveTracker$cur;
-    (_mouseMoveTracker$cur = mouseMoveTracker.current) === null || _mouseMoveTracker$cur === void 0 ? void 0 : _mouseMoveTracker$cur.releaseMouseMoves();
-    mouseMoveTracker.current = null;
-  }, []);
-  var setTooltipPosition = useCallback(function () {
-    var tooltipElement = tooltipRef.current;
-    if (tooltip && tooltipElement) {
-      var width = getWidth(tooltipElement);
-      addStyle(tooltipElement, 'left', "-" + width / 2 + "px");
-    }
-  }, [tooltip]);
-  var handleDragMove = useCallback(function (_deltaX, _deltaY, event) {
-    var _mouseMoveTracker$cur2;
-    if ((_mouseMoveTracker$cur2 = mouseMoveTracker.current) !== null && _mouseMoveTracker$cur2 !== void 0 && _mouseMoveTracker$cur2.isDragging()) {
-      var _rootRef$current;
-      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
-      setTooltipPosition();
-    }
-  }, [onDragMove, setTooltipPosition]);
-  var handleDragEnd = useCallback(function (event) {
-    var _rootRef$current2;
-    setActive(false);
-    releaseMouseMoves();
-    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
-  }, [onDragEnd, releaseMouseMoves]);
-  var getMouseMoveTracker = useCallback(function () {
-    return mouseMoveTracker.current || new DOMMouseMoveTracker(handleDragMove, handleDragEnd, document.body);
-  }, [handleDragEnd, handleDragMove]);
-  var handleMouseDown = useCallback(function (event) {
-    var _mouseMoveTracker$cur3, _rootRef$current3;
-    if (disabled) {
-      return;
-    }
-    mouseMoveTracker.current = getMouseMoveTracker();
-    (_mouseMoveTracker$cur3 = mouseMoveTracker.current) === null || _mouseMoveTracker$cur3 === void 0 ? void 0 : _mouseMoveTracker$cur3.captureMouseMoves(event);
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
-    setActive(true);
-    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
-  }, [disabled, getMouseMoveTracker, onDragStart]);
-  var handleMouseEnter = useCallback(function () {
-    setTooltipPosition();
-  }, [setTooltipPosition]);
-  useEffect(function () {
-    return function () {
-      releaseMouseMoves();
-    };
-  }, [releaseMouseMoves]);
   return /*#__PURE__*/React.createElement(Component, {
     role: role,
     tabIndex: tabIndex,
     ref: mergeRefs(ref, rootRef),
     className: handleClasses,
-    onMouseDown: handleMouseDown,
-    onMouseEnter: handleMouseEnter,
+    onMouseDown: onMoveStart,
+    onMouseEnter: onMouseEnter,
+    onTouchStart: onMoveStart,
     onKeyDown: onKeyDown,
     style: styles,
     "data-range": dataRange,
-    "data-key": dateKey
+    "data-key": dateKey,
+    "data-testid": "slider-handle"
   }, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
     "aria-hidden": "true",
     ref: tooltipRef,

package/esm/Slider/ProgressBar.js

@@ -28,7 +28,8 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     style: styles,
-    className: classes
+    className: classes,
+    "data-testid": "slider-progress-bar"
   });
 });
 ProgressBar.displayName = 'ProgressBar';

package/esm/Slider/Slider.d.ts

@@ -40,6 +40,8 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     tooltip?: boolean;
     /** Show sliding progress bar */
     progress?: boolean;
+    /** Placeholder text */
+    placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
     /** Customize labels on the render ruler */

package/esm/Slider/Slider.js

@@ -9,8 +9,8 @@ import getOffset from 'dom-lib/getOffset';
 import ProgressBar from './ProgressBar';
 import Handle from './Handle';
 import Graduated from './Graduated';
-import { useClassNames, useControlled, useCustom } from '../utils';
-import { precisionMath, checkValue } from './utils';
+import { useClassNames, useControlled, useCustom, useEventCallback } from '../utils';
+import { precisionMath, checkValue, getPosition } from './utils';
 import Plaintext from '../internals/Plaintext';
 export var sliderPropTypes = {
   min: PropTypes.number,
@@ -73,12 +73,13 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     valueProp = props.value,
     _props$max = props.max,
     maxProp = _props$max === void 0 ? 100 : _props$max,
+    placeholder = props.placeholder,
     getAriaValueText = props.getAriaValueText,
     renderTooltip = props.renderTooltip,
     renderMark = props.renderMark,
     onChange = props.onChange,
     onChangeCommitted = props.onChangeCommitted,
-    rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+    rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "placeholder", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
@@ -138,7 +139,10 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var getValueByPosition = useCallback(function (event) {
     var barOffset = getOffset(barRef.current);
-    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
+    var _getPosition = getPosition(event),
+      pageX = _getPosition.pageX,
+      pageY = _getPosition.pageY;
+    var offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;
     var offsetValue = rtl && !vertical ? barOffset.width - offset : offset;
     return getValueByOffset(offsetValue) + min;
   }, [getValueByOffset, min, rtl, vertical]);
@@ -146,30 +150,30 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback function that is fired when the mousemove is triggered
    */
-  var handleChangeValue = useCallback(function (event) {
+  var handleChangeValue = useEventCallback(function (event) {
     if (disabled || readOnly) {
       return;
     }
     var nextValue = getValidValue(getValueByPosition(event));
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [disabled, getValidValue, getValueByPosition, onChange, readOnly, setValue]);
+  });
 
   /**
    * Callback function that is fired when the mouseup is triggered
    */
-  var handleChangeCommitted = useCallback(function (event) {
+  var handleChangeCommitted = useEventCallback(function (event) {
     if (disabled || readOnly) {
       return;
     }
     var nextValue = getValidValue(getValueByPosition(event));
     onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
-  }, [disabled, getValidValue, getValueByPosition, onChangeCommitted, readOnly]);
-  var handleClickBar = useCallback(function (event) {
+  });
+  var handleClickBar = useEventCallback(function (event) {
     handleChangeValue(event);
     handleChangeCommitted(event);
-  }, [handleChangeCommitted, handleChangeValue]);
-  var handleKeyDown = useCallback(function (event) {
+  });
+  var handleKeyDown = useEventCallback(function (event) {
     var nextValue;
     var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';
     var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';
@@ -196,11 +200,12 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     event.preventDefault();
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [max, min, onChange, rtl, setValue, step, value]);
+  });
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       localeKey: "notSelected",
-      ref: ref
+      ref: ref,
+      placeholder: placeholder
     }, value);
   }
   return /*#__PURE__*/React.createElement(Componnet, _extends({}, rest, {
@@ -210,7 +215,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
-    onClick: handleClickBar
+    onClick: handleClickBar,
+    "data-testid": "slider-bar"
   }, progress && /*#__PURE__*/React.createElement(ProgressBar, {
     rtl: rtl,
     vertical: vertical,

package/esm/Slider/useDrag.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface DragProps {
+    tooltip?: boolean;
+    disabled?: boolean;
+    onDragStart?: (event: React.MouseEvent) => void;
+    onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
+    onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+}
+declare const useDrag: (props: DragProps) => {
+    active: boolean;
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    tooltipRef: import("react").RefObject<HTMLDivElement>;
+    onMoveStart: (...args: any[]) => any;
+    onMouseEnter: (...args: any[]) => any;
+};
+export default useDrag;

package/esm/Slider/useDrag.js

@@ -0,0 +1,82 @@
+'use client';
+import { useRef, useEffect, useCallback, useState } from 'react';
+import PointerMoveTracker from 'dom-lib/PointerMoveTracker';
+import addStyle from 'dom-lib/addStyle';
+import getWidth from 'dom-lib/getWidth';
+import { useEventCallback } from '../utils';
+var useDrag = function useDrag(props) {
+  var rootRef = useRef(null);
+  var tooltipRef = useRef(null);
+  var tooltip = props.tooltip,
+    disabled = props.disabled,
+    onDragMove = props.onDragMove,
+    onDragEnd = props.onDragEnd,
+    onDragStart = props.onDragStart;
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var moveTracker = useRef();
+
+  // Release the move event
+  var releaseMoves = useCallback(function () {
+    var _moveTracker$current;
+    (_moveTracker$current = moveTracker.current) === null || _moveTracker$current === void 0 ? void 0 : _moveTracker$current.releaseMoves();
+    moveTracker.current = null;
+  }, []);
+  var setTooltipPosition = useCallback(function () {
+    var tooltipElement = tooltipRef.current;
+    if (tooltip && tooltipElement) {
+      var width = getWidth(tooltipElement);
+      // Set the position of the tooltip
+      addStyle(tooltipElement, 'left', "-" + width / 2 + "px");
+    }
+  }, [tooltip]);
+  var handleDragMove = useEventCallback(function (_deltaX, _deltaY, event) {
+    var _moveTracker$current2;
+    if ((_moveTracker$current2 = moveTracker.current) !== null && _moveTracker$current2 !== void 0 && _moveTracker$current2.isDragging()) {
+      var _rootRef$current;
+      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
+      setTooltipPosition();
+    }
+  });
+  var handleDragEnd = useEventCallback(function (event) {
+    var _rootRef$current2;
+    setActive(false);
+    releaseMoves();
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
+  });
+  var getMouseMoveTracker = useCallback(function () {
+    return moveTracker.current || new PointerMoveTracker(document.body, {
+      onMove: handleDragMove,
+      onMoveEnd: handleDragEnd,
+      useTouchEvent: true
+    });
+  }, [handleDragEnd, handleDragMove]);
+  var onMoveStart = useEventCallback(function (event) {
+    var _moveTracker$current3, _rootRef$current3;
+    if (disabled) {
+      return;
+    }
+    moveTracker.current = getMouseMoveTracker();
+    (_moveTracker$current3 = moveTracker.current) === null || _moveTracker$current3 === void 0 ? void 0 : _moveTracker$current3.captureMoves(event);
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
+    setActive(true);
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+  });
+  var onMouseEnter = useEventCallback(function () {
+    setTooltipPosition();
+  });
+  useEffect(function () {
+    return function () {
+      releaseMoves();
+    };
+  }, [releaseMoves]);
+  return {
+    active: active,
+    rootRef: rootRef,
+    tooltipRef: tooltipRef,
+    onMoveStart: onMoveStart,
+    onMouseEnter: onMouseEnter
+  };
+};
+export default useDrag;