rsuite 5.53.2 → 5.55.0

package/cjs/Pagination/PaginationGroup.js

@@ -1,79 +1,56 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
-var _SelectPicker = _interopRequireDefault(require("../SelectPicker"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../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 && (0, _utils.tplTransform)(locale.limit, item)
-    };
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('limit')
-  }, /*#__PURE__*/_react.default.createElement(_SelectPicker.default, {
-    size: size,
-    cleanable: false,
-    searchable: false,
-    placement: "topStart",
-    data: formatlimitOptions,
-    value: limit,
-    onChange: onChangeLimit // fixme don't use any
-    ,
-    menuStyle: {
-      minWidth: 'auto'
-    },
-    disabled: disabledPicker
-  }));
-};
+var _LimitPicker = _interopRequireDefault(require("./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.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "size", "total", "prev", "next", "first", "last", "maxButtons", "className", "limitOptions", "limit", "activePage", "disabled", "style", "locale", "layout", "onChangePage", "onChangeLimit"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activePage", "classPrefix", "className", "disabled", "size", "style", "total", "prev", "next", "first", "last", "limitOptions", "limit", "locale", "layout", "maxButtons", "onChangePage", "onChangeLimit"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -88,80 +65,82 @@ var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, re
     locale = _useCustom.locale;
   var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
   var classes = merge(className, withClassPrefix(size));
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputBlur = (0, _utils.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 = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputPressEnter = (0, _utils.useEventCallback)(function (event) {
     var _event$target;
     (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();
-  }, []);
-  var handleChangeLimit = (0, _react.useCallback)(function (value) {
+  });
+  var handleChangeLimit = (0, _utils.useEventCallback)(function (value) {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);
-  }, [onChangeLimit, setLimit]);
+  });
   return /*#__PURE__*/_react.default.createElement(Component, {
     ref: ref,
     className: classes,
     style: style
   }, layout.map(function (key, index) {
     var onlyKey = "" + key + index;
-    if (key === '-') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('grow'),
-        key: onlyKey
-      });
-    } else if (key === '|') {
-      return /*#__PURE__*/_react.default.createElement(_Divider.default, {
-        vertical: true,
-        key: onlyKey
-      });
-    } else if (key === 'pager') {
-      return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({
-        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.default.createElement("div", {
-        key: onlyKey,
-        className: prefix('total')
-      }, locale.total && (0, _utils.tplTransform)(locale.total, total));
-    } else if (key === 'skip') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: onlyKey,
-        className: (0, _classnames.default)(prefix('skip'))
-      }, locale.skip && (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {
-        size: size,
-        onBlur: handleInputBlur,
-        onPressEnter: handleInputPressEnter
-      })));
-    } else if (key === 'limit') {
-      return /*#__PURE__*/_react.default.createElement(LimitPicker, {
-        key: onlyKey,
-        size: size,
-        locale: locale,
-        limit: limit,
-        onChangeLimit: handleChangeLimit,
-        limitOptions: limitOptions,
-        disabled: disabled,
-        prefix: prefix
-      });
+    switch (key) {
+      case '-':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefix('grow'),
+          key: onlyKey
+        });
+      case '|':
+        return /*#__PURE__*/_react.default.createElement(_Divider.default, {
+          vertical: true,
+          key: onlyKey
+        });
+      case 'pager':
+        return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({
+          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.default.createElement("div", {
+          key: onlyKey,
+          className: prefix('total')
+        }, locale.total && (0, _utils.tplTransform)(locale.total, total));
+      case 'skip':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: onlyKey,
+          className: (0, _classnames.default)(prefix('skip'))
+        }, locale.skip && (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          size: size,
+          onBlur: handleInputBlur,
+          onPressEnter: handleInputPressEnter
+        })));
+      case 'limit':
+        return /*#__PURE__*/_react.default.createElement(_LimitPicker.default, {
+          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/cjs/RangeSlider/RangeSlider.js

@@ -33,17 +33,17 @@ var RangeSlider = /*#__PURE__*/_react.default.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,
@@ -61,7 +61,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     renderMark = props.renderMark,
     onChange = props.onChange,
     onChangeCommitted = props.onChangeCommitted,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
 
   // Define the parameter position of the handle
@@ -122,7 +122,10 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [count, getBarHeight, getBarWidth, step, vertical]);
   var getValueByPosition = (0, _react.useCallback)(function (event) {
     var barOffset = (0, _getOffset.default)(barRef.current);
-    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
+    var _getPosition = (0, _utils2.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]);
@@ -187,7 +190,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Callback function that is fired when the mouseup is triggered
    */
-  var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {
+  var handleChangeCommitted = (0, _utils.useEventCallback)(function (event, dataset) {
     if (disabled || readOnly) {
       return;
     }
@@ -196,8 +199,8 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setValue(nextValue);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
     }
-  }, [disabled, readOnly, getNextValue, isRangeMatchingConstraint, setValue, onChangeCommitted]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
+  });
+  var handleKeyDown = (0, _utils.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;
@@ -236,8 +239,8 @@ var RangeSlider = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (event) {
+  });
+  var handleBarClick = (0, _utils.useEventCallback)(function (event) {
     if (disabled || readOnly) {
       return;
     }
@@ -259,7 +262,7 @@ var RangeSlider = /*#__PURE__*/_react.default.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 = (0, _react.useMemo)(function () {
     return [{
       value: value[0],

package/cjs/Slider/Handle.js

@@ -1,20 +1,17 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DOMMouseMoveTracker = _interopRequireDefault(require("dom-lib/DOMMouseMoveTracker"));
-var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
-var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _utils = require("../utils");
 var _Input = _interopRequireDefault(require("./Input"));
+var _useDrag2 = _interopRequireDefault(require("./useDrag"));
 var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _extends2;
   var _props$as = props.as,
@@ -40,80 +37,40 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     dataRange = props['data-range'],
     dateKey = props['data-key'],
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useState)(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var rootRef = (0, _react.useRef)(null);
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
   var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var _useDrag = (0, _useDrag2.default)({
+      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 = (0, _react.useRef)(null);
-  var mouseMoveTracker = (0, _react.useRef)();
-  var releaseMouseMoves = (0, _react.useCallback)(function () {
-    var _mouseMoveTracker$cur;
-    (_mouseMoveTracker$cur = mouseMoveTracker.current) === null || _mouseMoveTracker$cur === void 0 ? void 0 : _mouseMoveTracker$cur.releaseMouseMoves();
-    mouseMoveTracker.current = null;
-  }, []);
-  var setTooltipPosition = (0, _react.useCallback)(function () {
-    var tooltipElement = tooltipRef.current;
-    if (tooltip && tooltipElement) {
-      var width = (0, _getWidth.default)(tooltipElement);
-      (0, _addStyle.default)(tooltipElement, 'left', "-" + width / 2 + "px");
-    }
-  }, [tooltip]);
-  var handleDragMove = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function () {
-    return mouseMoveTracker.current || new _DOMMouseMoveTracker.default(handleDragMove, handleDragEnd, document.body);
-  }, [handleDragEnd, handleDragMove]);
-  var handleMouseDown = (0, _react.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 = (0, _react.useCallback)(function () {
-    setTooltipPosition();
-  }, [setTooltipPosition]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      releaseMouseMoves();
-    };
-  }, [releaseMouseMoves]);
   return /*#__PURE__*/_react.default.createElement(Component, {
     role: role,
     tabIndex: tabIndex,
     ref: (0, _utils.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.default.createElement(_Tooltip.default, {
     "aria-hidden": "true",
     ref: tooltipRef,

package/cjs/Slider/ProgressBar.js

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

package/cjs/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/cjs/Slider/Slider.js

@@ -80,12 +80,13 @@ var Slider = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
@@ -145,7 +146,10 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
   var getValueByPosition = (0, _react.useCallback)(function (event) {
     var barOffset = (0, _getOffset.default)(barRef.current);
-    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
+    var _getPosition = (0, _utils2.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]);
@@ -153,30 +157,30 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Callback function that is fired when the mousemove is triggered
    */
-  var handleChangeValue = (0, _react.useCallback)(function (event) {
+  var handleChangeValue = (0, _utils.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 = (0, _react.useCallback)(function (event) {
+  var handleChangeCommitted = (0, _utils.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 = (0, _react.useCallback)(function (event) {
+  });
+  var handleClickBar = (0, _utils.useEventCallback)(function (event) {
     handleChangeValue(event);
     handleChangeCommitted(event);
-  }, [handleChangeCommitted, handleChangeValue]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
+  });
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
     var nextValue;
     var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';
     var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';
@@ -203,11 +207,12 @@ var Slider = /*#__PURE__*/_react.default.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.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
-      ref: ref
+      ref: ref,
+      placeholder: placeholder
     }, value);
   }
   return /*#__PURE__*/_react.default.createElement(Componnet, (0, _extends2.default)({}, rest, {
@@ -217,7 +222,8 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
-    onClick: handleClickBar
+    onClick: handleClickBar,
+    "data-testid": "slider-bar"
   }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     rtl: rtl,
     vertical: vertical,

package/cjs/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;