antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/es/components/scroll-mask/scroll-mask.js

@@ -0,0 +1,70 @@
+import React, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { animated, useSpring } from '@react-spring/web';
+import { useThrottleFn } from 'ahooks';
+var classPrefix = "adm-scroll-mask";
+export var ScrollMask = function ScrollMask(props) {
+  var maskRef = useRef(null);
+
+  var _useSpring = useSpring(function () {
+    return {
+      leftMaskOpacity: 0,
+      rightMaskOpacity: 0,
+      config: {
+        clamp: true
+      }
+    };
+  }),
+      _useSpring$ = _useSpring[0],
+      leftMaskOpacity = _useSpring$.leftMaskOpacity,
+      rightMaskOpacity = _useSpring$.rightMaskOpacity,
+      api = _useSpring[1];
+
+  var _useThrottleFn = useThrottleFn(function (immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+
+    var mask = maskRef.current;
+    if (!mask) return;
+    var scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    var scrollLeft = scrollEl.scrollLeft;
+    var showLeftMask = scrollLeft > 0;
+    var showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
+    api.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate: immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  }),
+      updateMask = _useThrottleFn.run;
+
+  useEffect(function () {
+    updateMask(true);
+  }, []);
+  useEffect(function () {
+    var scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    scrollEl.addEventListener('scroll', updateMask);
+    return function () {
+      return scrollEl.removeEventListener('scroll', updateMask);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
+    ref: maskRef,
+    className: classNames(classPrefix, classPrefix + "-left"),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), /*#__PURE__*/React.createElement(animated.div, {
+    className: classNames(classPrefix, classPrefix + "-right"),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }));
+};

package/es/components/search-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './search-bar.less';
+import { SearchBar } from './search-bar';
+export type { SearchBarProps, SearchBarRef } from './search-bar';
+export default SearchBar;

package/es/components/search-bar/index.js

@@ -0,0 +1,3 @@
+import "./search-bar.css";
+import { SearchBar } from './search-bar';
+export default SearchBar;

package/es/components/{search/search.css → search-bar/search-bar.css}

@@ -1,4 +1,4 @@
-.adm-search {
+.adm-search-bar {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7,7 +7,7 @@
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
 }
-.adm-search .adm-search-input-box {
+.adm-search-bar .adm-search-bar-input-box {
   flex: auto;
   background: var(--background);
   border-radius: var(--border-radius);
@@ -16,28 +16,28 @@
   justify-content: center;
   align-items: center;
 }
-.adm-search .adm-search-input-box .adm-search-input-box-icon {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(---placeholder-color);
   padding-left: 8px;
   font-size: 16px;
 }
-.adm-search .adm-search-input-box .adm-search-input {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
   height: 28px;
 }
-.adm-search .adm-search-input-box .adm-search-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
   --placeholder-color: var(---placeholder-color);
 }
-.adm-search .adm-search-input-box .adm-search-input .adm-input {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
   font-size: 13px;
-  line-height: 20px;
+  line-height: 19px;
 }
-.adm-search .adm-search-suffix {
+.adm-search-bar .adm-search-bar-suffix {
   flex: none;
   margin-left: 16px;
 }
-.adm-search-active .adm-search-input-box {
+.adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
 }

package/{cjs/components/search/search.d.ts → es/components/search-bar/search-bar.d.ts}

@@ -1,32 +1,30 @@
 import React from 'react';
-import { InputRef } from '../input';
+import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
-export declare type SearchRef = InputRef;
-export declare type SearchProps = {
+export declare type SearchBarRef = InputRef;
+export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear'> & {
     value?: string;
     defaultValue?: string;
     maxLength?: number;
     placeholder?: string;
     clearable?: boolean;
-    showCancelButton?: boolean;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
+    cancelText?: string;
+    clearOnCancel?: boolean;
     onSearch?: (val: string) => void;
     onChange?: (val: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onClear?: () => void;
     onCancel?: () => void;
 } & NativeProps<'--background' | '--border-radius' | '--placeholder-color'>;
-export declare const Search: React.ForwardRefExoticComponent<{
+export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     maxLength?: number | undefined;
     placeholder?: string | undefined;
     clearable?: boolean | undefined;
-    showCancelButton?: boolean | undefined;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
+    cancelText?: string | undefined;
+    clearOnCancel?: boolean | undefined;
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
-    onFocus?: (() => void) | undefined;
-    onBlur?: (() => void) | undefined;
-    onClear?: (() => void) | undefined;
     onCancel?: (() => void) | undefined;
 } & NativeProps<"--border-radius" | "--placeholder-color" | "--background"> & React.RefAttributes<InputRef>>;

package/es/components/{search/search.js → search-bar/search-bar.js}

@@ -3,23 +3,29 @@ import classNames from 'classnames';
 import Input from '../input';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-import { SearchOutlined } from '@ant-design/icons';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { SearchOutline } from 'antd-mobile-icons';
+import { usePropsValue } from '../../utils/use-props-value';
 import { useConfig } from '../config-provider';
-var classPrefix = "adm-search";
+var classPrefix = "adm-search-bar";
 var defaultProps = {
   clearable: true,
   showCancelButton: false,
-  defaultValue: ''
+  defaultValue: '',
+  clearOnCancel: true
 };
-export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
+export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
-  var props = mergeProps(defaultProps, p);
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var props = mergeProps(defaultProps, {
+    cancelText: locale.common.cancel
+  }, p);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var _useState = useState(false),
       hasFocus = _useState[0],
@@ -46,25 +52,44 @@ export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
     };
   });
 
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
+  var renderCancelButton = function renderCancelButton() {
+    var isShowCancel = false;
+
+    if (typeof props.showCancelButton === 'function') {
+      isShowCancel = props.showCancelButton(hasFocus, value);
+    } else {
+      isShowCancel = props.showCancelButton && hasFocus;
+    }
+
+    return isShowCancel && /*#__PURE__*/React.createElement("div", {
+      className: classPrefix + "-suffix"
+    }, /*#__PURE__*/React.createElement("a", {
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      },
+      onTouchStart: function onTouchStart(e) {
+        e.preventDefault();
+      },
+      onClick: function onClick() {
+        var _a, _b, _c;
+
+        if (props.clearOnCancel) {
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        }
+
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      }
+    }, props.cancelText));
+  };
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/React.createElement("form", {
-    className: classPrefix + "-input-box",
-    action: '/',
-    onSubmit: function onSubmit(e) {
-      var _a, _b;
-
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
-    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-input-box"
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-input-box-icon"
-  }, /*#__PURE__*/React.createElement(SearchOutlined, null)), /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(SearchOutline, null)), /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
     className: classPrefix + "-input",
     value: value,
@@ -72,35 +97,26 @@ export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
       var _a;
 
       setHasFocus(true);
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(e) {
       var _a;
 
       setHasFocus(false);
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     onClear: props.onClear,
-    type: 'search'
-  })), props.showCancelButton && hasFocus && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-suffix"
-  }, /*#__PURE__*/React.createElement("a", {
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-    },
-    onTouchStart: function onTouchStart(e) {
-      e.preventDefault();
-    },
-    onClick: function onClick() {
-      var _a, _b, _c;
+    type: 'search',
+    enterKeyHint: 'search',
+    onEnterPress: function onEnterPress() {
+      var _a, _b;
 
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
-      (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
     }
-  }, locale.common.cancel))));
+  })), renderCancelButton()));
 });

package/es/components/selector/selector.d.ts

@@ -12,6 +12,8 @@ export declare type SelectorProps<V> = {
     disabled?: boolean;
     defaultValue?: V[];
     value?: V[];
-    onChange?: (v: V[]) => void;
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
 } & NativeProps<'--checked-color'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/es/components/selector/selector.js

@@ -6,7 +6,7 @@ import Space from '../space';
 import Grid from '../grid';
 import { convertPx } from '../../utils/convert-px';
 import selectorCheckMarkImg from '../../assets/selector-check-mark.svg';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = "adm-selector";
 var defaultProps = {
   multiple: false,
@@ -15,9 +15,25 @@ var defaultProps = {
 export var Selector = function Selector(p) {
   var props = mergeProps(defaultProps, p);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: function onChange(val) {
+      var _a;
+
+      var extend = {
+        get items() {
+          return props.options.filter(function (option) {
+            return val.includes(option.value);
+          });
+        }
+
+      };
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  }),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var items = props.options.map(function (option) {
     var _classNames;
@@ -34,11 +50,14 @@ export var Selector = function Selector(p) {
         }
 
         if (props.multiple) {
-          setValue(active ? value.filter(function (v) {
+          var val = active ? value.filter(function (v) {
             return v !== option.value;
-          }) : [].concat(value, [option.value]));
+          }) : [].concat(value, [option.value]);
+          setValue(val);
         } else {
-          setValue(active ? [] : [option.value]);
+          var _val = active ? [] : [option.value];
+
+          setValue(_val);
         }
       }
     }, option.label, active && props.multiple && /*#__PURE__*/React.createElement("div", {

package/es/components/side-bar/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './side-bar.less';
+export type { SideBarProps, SideBarItemProps } from './side-bar';
+declare const _default: import("react").FC<import("./side-bar").SideBarProps> & {
+    Item: import("react").FC<import("./side-bar").SideBarItemProps>;
+};
+export default _default;

package/es/components/side-bar/index.js

@@ -0,0 +1,6 @@
+import "./side-bar.css";
+import { SideBar, SideBarItem } from './side-bar';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(SideBar, {
+  Item: SideBarItem
+});

package/es/components/side-bar/side-bar.css

@@ -0,0 +1,52 @@
+.adm-side-bar {
+  --height: 100%;
+  --width: 96px;
+  --item-border-radius: 8px;
+  width: var(--width);
+  height: var(--height);
+  font-size: 15px;
+  overflow-y: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+.adm-side-bar-item {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 6px 22px;
+  position: relative;
+  cursor: pointer;
+  background-color: #f5f5f5;
+}
+.adm-side-bar-item-active {
+  color: var(--adm-color-primary);
+  background-color: white;
+  font-weight: bold;
+  position: relative;
+}
+.adm-side-bar-item-active + .adm-side-bar-item {
+  border-top-right-radius: var(--item-border-radius);
+}
+.adm-side-bar-item-active::before {
+  content: '';
+  width: var(--item-border-radius);
+  height: var(--item-border-radius);
+  background-color: white;
+  position: absolute;
+  top: calc(var(--item-border-radius) * -1);
+  right: 0;
+}
+.adm-side-bar-item-active::after {
+  content: '';
+  width: var(--item-border-radius);
+  height: var(--item-border-radius);
+  background-color: #f5f5f5;
+  border-bottom-right-radius: var(--item-border-radius);
+  position: absolute;
+  top: calc(var(--item-border-radius) * -1);
+  right: 0;
+}
+.adm-side-bar-item-disabled {
+  cursor: not-allowed;
+  color: var(--adm-color-light);
+}

package/es/components/side-bar/side-bar.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SideBarItemProps = {
+    title?: string;
+    disabled?: boolean;
+    badge?: ReactNode;
+} & NativeProps;
+export declare const SideBarItem: FC<SideBarItemProps>;
+export declare type SideBarProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onChange?: (key: string) => void;
+} & NativeProps<'--width' | '--height' | '--item-border-radius'>;
+export declare const SideBar: FC<SideBarProps>;

package/es/components/side-bar/side-bar.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import Badge from '../badge';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+var classPrefix = "adm-side-bar";
+export var SideBarItem = function SideBarItem() {
+  return null;
+};
+export var SideBar = function SideBar(props) {
+  var _a;
+
+  var firstActiveKey = null;
+  var items = [];
+  React.Children.forEach(props.children, function (child, index) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    items.push(child);
+  });
+
+  var _usePropsValue = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: props.onChange
+  }),
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix)
+  }, items.map(function (item) {
+    var _classNames;
+
+    var active = item.key === activeKey;
+    return withNativeProps(item.props, /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      onClick: function onClick() {
+        var key = item.key;
+        if (key === undefined || key === null || item.props.disabled) return;
+        setActiveKey(key.toString());
+      },
+      className: classNames(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames[classPrefix + "-item-disabled"] = item.props.disabled, _classNames))
+    }, /*#__PURE__*/React.createElement(Badge, {
+      content: item.props.badge
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classPrefix + "-item-title"
+    }, item.props.title))));
+  })));
+};

package/es/components/slider/slider.css

@@ -53,6 +53,7 @@
   outline: none;
 }
 .adm-slider-thumb-container {
+  touch-action: none;
   position: absolute;
   width: 32px;
   height: 32px;
@@ -62,8 +63,8 @@
 }
 .adm-slider-mark {
   position: relative;
-  overflow: visible;
   width: 100%;
+  overflow: visible;
   font-size: 12px;
   height: 12px;
   margin-top: 4px;

package/es/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];
@@ -15,4 +15,4 @@ export declare type SliderProps = {
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;
-export declare const Slider: React.FC<SliderProps>;
+export declare const Slider: FC<SliderProps>;

package/es/components/slider/slider.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import Ticks from './ticks';
 import Marks from './marks';
 import Thumb from './thumb';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 import { nearest } from '../../utils/nearest';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = "adm-slider";
 var defaultProps = {
   min: 0,
@@ -16,11 +16,12 @@ var defaultProps = {
   range: false,
   disabled: false
 };
-export var Slider = withDefaultProps(defaultProps)(function (props) {
+export var Slider = function Slider(p) {
   var _classNames;
 
   var _a;
 
+  var props = mergeProps(defaultProps, p);
   var min = props.min,
       max = props.max,
       disabled = props.disabled,
@@ -48,13 +49,13 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.value,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
     onChange: props.onChange
   }),
-      rawValue = _useNewControllableVa[0],
-      setRawValue = _useNewControllableVa[1];
+      rawValue = _usePropsValue[0],
+      setRawValue = _usePropsValue[1];
 
   var sliderValue = sortValue(convertValue(rawValue));
 
@@ -106,8 +107,10 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     if (dragLockRef.current > 0) return;
     event.stopPropagation();
     if (disabled) return;
-    var sliderOffsetLeft = trackRef.current.getBoundingClientRect().left;
-    var position = (event.clientX - sliderOffsetLeft) / Math.ceil(trackRef.current.offsetWidth) * (max - min) + min;
+    var track = trackRef.current;
+    if (!track) return;
+    var sliderOffsetLeft = track.getBoundingClientRect().left;
+    var position = (event.clientX - sliderOffsetLeft) / Math.ceil(track.offsetWidth) * (max - min) + min;
     var targetValue = getValueByPosition(position);
     var nextSliderValue;
 
@@ -187,4 +190,4 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     lowerBound: sliderValue[0],
     upperBound: sliderValue[1]
   })));
-});
+};

package/es/components/slider/thumb.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDrag, subV } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 var classPrefix = "adm-slider";
 
 var Thumb = function Thumb(props) {
@@ -26,15 +26,16 @@ var Thumb = function Thumb(props) {
       prevValue.current = value;
     }
 
-    var _subV = subV(state.xy, state.initial),
-        x = _subV[0];
-
+    var x = state.xy[0] - state.initial[0];
     var sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     if (!sliderOffsetWith) return;
     var diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
   }, {
-    axis: 'x'
+    axis: 'x',
+    pointer: {
+      touch: true
+    }
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classPrefix + "-thumb-container",