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

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideBarItem = exports.SideBar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _badge = _interopRequireDefault(require("../badge"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _usePropsValue2 = require("../../utils/use-props-value");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var classPrefix = "adm-side-bar";
+
+var SideBarItem = function SideBarItem() {
+  return null;
+};
+
+exports.SideBarItem = SideBarItem;
+
+var SideBar = function SideBar(props) {
+  var _a;
+
+  var firstActiveKey = null;
+  var items = [];
+
+  _react["default"].Children.forEach(props.children, function (child, index) {
+    if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    items.push(child);
+  });
+
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: props.onChange
+  }),
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classPrefix)
+  }, items.map(function (item) {
+    var _classNames;
+
+    var active = item.key === activeKey;
+    return (0, _nativeProps.withNativeProps)(item.props, /*#__PURE__*/_react["default"].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: (0, _classnames["default"])(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames[classPrefix + "-item-disabled"] = item.props.disabled, _classNames))
+    }, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
+      content: item.props.badge
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classPrefix + "-item-title"
+    }, item.props.title))));
+  })));
+};
+
+exports.SideBar = SideBar;

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

@@ -21,7 +21,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nearest = require("../../utils/nearest");
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -38,11 +38,13 @@ var defaultProps = {
   range: false,
   disabled: false
 };
-var Slider = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
+
+var Slider = function Slider(p) {
   var _classNames;
 
   var _a;
 
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var min = props.min,
       max = props.max,
       disabled = props.disabled,
@@ -70,13 +72,13 @@ var Slider = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pro
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)({
+  var _usePropsValue = (0, _usePropsValue2.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));
 
@@ -128,8 +130,10 @@ var Slider = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pro
     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;
 
@@ -209,5 +213,6 @@ var Slider = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pro
     lowerBound: sliderValue[0],
     upperBound: sliderValue[1]
   })));
-});
+};
+
 exports.Slider = Slider;

package/cjs/components/slider/thumb.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactUseGesture = require("react-use-gesture");
+var _react2 = require("@use-gesture/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -30,7 +30,7 @@ var Thumb = function Thumb(props) {
     };
   };
 
-  var bind = (0, _reactUseGesture.useDrag)(function (state) {
+  var bind = (0, _react2.useDrag)(function (state) {
     var _a;
 
     if (disabled) return;
@@ -39,15 +39,16 @@ var Thumb = function Thumb(props) {
       prevValue.current = value;
     }
 
-    var _subV = (0, _reactUseGesture.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["default"].createElement("div", Object.assign({
     className: classPrefix + "-thumb-container",

package/cjs/components/space/space.css

@@ -3,14 +3,15 @@
 }
 .adm-space {
   display: inline-flex;
-  --vertical-size: 8px;
-  --horizontal-size: 8px;
+  --gap: 8px;
+  --gap-vertical: var(--gap);
+  --gap-horizontal: var(--gap);
 }
 .adm-space-vertical {
   flex-direction: column;
 }
 .adm-space-vertical > .adm-space-item {
-  margin-bottom: var(--vertical-size);
+  margin-bottom: var(--gap-vertical);
 }
 .adm-space-vertical > .adm-space-item:last-child {
   margin-bottom: 0;
@@ -19,17 +20,17 @@
   flex-direction: row;
 }
 .adm-space-horizontal > .adm-space-item {
-  margin-right: var(--horizontal-size);
+  margin-right: var(--gap-horizontal);
 }
 .adm-space-horizontal > .adm-space-item:last-child {
   margin-right: 0;
 }
 .adm-space-horizontal.adm-space-wrap {
   flex-wrap: wrap;
-  margin-bottom: calc(var(--vertical-size) * -1);
+  margin-bottom: calc(var(--gap-vertical) * -1);
 }
 .adm-space-horizontal.adm-space-wrap > .adm-space-item {
-  padding-bottom: var(--vertical-size);
+  padding-bottom: var(--gap-vertical);
 }
 .adm-space.adm-space-block {
   display: flex;
@@ -55,9 +56,6 @@
 .adm-space-justify-end {
   justify-content: flex-end;
 }
-.adm-space-justify-baseline {
-  justify-content: baseline;
-}
 .adm-space-justify-between {
   justify-content: space-between;
 }

package/cjs/components/space/space.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpaceProps = {
-    size?: number | number[] | string | string[];
     direction?: 'horizontal' | 'vertical';
     align?: 'start' | 'end' | 'center' | 'baseline';
-    justify?: 'start' | 'end' | 'center' | 'baseline' | 'between' | 'around' | 'evenly' | 'stretch';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
     wrap?: boolean;
     block?: boolean;
-} & NativeProps;
-export declare const Space: React.FC<SpaceProps>;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Space: FC<SpaceProps>;

package/cjs/components/space/space.js

@@ -16,33 +16,24 @@ var _withDefaultProps = require("../../utils/with-default-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-space";
-var Space = (0, _withDefaultProps.withDefaultProps)({
+var defaultProps = {
   direction: 'horizontal'
-})(function (props) {
-  var _classNames;
-
-  var size = props.size,
-      direction = props.direction;
-  var sizeStyle = {};
-
-  if (size) {
-    var _ref = Array.isArray(size) ? size : [size, size],
-        horizontalSize = _ref[0],
-        verticalSize = _ref[1];
+};
 
-    sizeStyle = {
-      '--vertical-size': typeof verticalSize === 'number' ? verticalSize + "px" : verticalSize,
-      '--horizontal-size': typeof horizontalSize === 'number' ? horizontalSize + "px" : horizontalSize
-    };
-  }
+var Space = function Space(p) {
+  var _classNames;
 
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var direction = props.direction,
+      onClick = props.onClick;
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-wrap"] = props.wrap, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-" + direction] = true, _classNames[classPrefix + "-align-" + props.align] = !!props.align, _classNames[classPrefix + "-justify-" + props.justify] = !!props.justify, _classNames)),
-    style: sizeStyle
+    onClick: onClick
   }, _react["default"].Children.map(props.children, function (child) {
     return child !== null && child !== undefined && /*#__PURE__*/_react["default"].createElement("div", {
       className: classPrefix + "-item"
     }, child);
   })));
-});
+};
+
 exports.Space = Space;

package/cjs/components/stepper/stepper.css

@@ -1,38 +1,63 @@
 .adm-stepper {
+  --height: 22px;
+  --input-width: 40px;
+  --input-font-size: var(--adm-font-size-main);
+  --input-font-color: var(--adm-color-text);
+  --border-radius: 2px;
+  --border: 1px solid #e5e5e5;
+  --border-inner: var(--border);
+  --active-border: var(--border);
+  --button-font-size: 10px;
+  --button-text-color: var(--adm-color-primary);
+  --button-background-color: transparent;
+  --button-width: var(--height);
   display: flex;
   align-items: center;
   box-sizing: border-box;
   position: relative;
-  width: 80px;
+  overflow: hidden;
+  width: calc(var(--input-width) + 2 * var(--button-width));
+  border: var(--border);
+  border-radius: var(--border-radius);
+}
+.adm-stepper-active {
+  border: var(--active-border);
 }
 .adm-stepper .adm-stepper-input {
-  position: relative;
   flex: 1;
-  height: 22px;
-  border-top: 1px solid #e5e5e5;
-  border-bottom: 1px solid #e5e5e5;
-  --font-size: var(--adm-font-size-main);
+  height: var(--height);
+  border-left: var(--border-inner);
+  border-right: var(--border-inner);
 }
 .adm-stepper .adm-stepper-input > input {
   text-align: center;
+  font-size: var(--input-font-size);
+  color: var(--input-font-color);
 }
 .adm-stepper-minus,
 .adm-stepper-plus {
-  width: 22px;
-  height: 22px;
+  width: var(--button-width);
+  height: var(--height);
   padding: 0;
-  border: 1px solid #e5e5e5;
-  border-radius: 2px;
-  font-size: 10px;
+  color: var(--button-text-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-font-size);
 }
 .adm-stepper-minus:disabled,
 .adm-stepper-plus:disabled {
   color: var(--adm-color-weak);
   opacity: 1;
 }
+.adm-stepper-minus svg,
+.adm-stepper-plus svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .adm-stepper-minus {
-  left: 1px;
+  border-radius: 0;
 }
 .adm-stepper-plus {
-  left: -1px;
+  border-radius: 0;
 }

package/cjs/components/stepper/stepper.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type StepperProps = {
+import { InputProps } from '../input';
+export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
     value?: number;
     defaultValue?: number;
     min?: number;
@@ -9,5 +10,5 @@ export declare type StepperProps = {
     digits?: number;
     disabled?: boolean;
     onChange?: (value: number) => void;
-} & NativeProps;
-export declare const Stepper: React.FC<StepperProps>;
+} & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
+export declare const Stepper: FC<StepperProps>;

package/cjs/components/stepper/stepper.js

@@ -9,11 +9,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -35,17 +35,19 @@ var defaultProps = {
   step: 1,
   disabled: false
 };
-var Stepper = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
+
+var Stepper = function Stepper(p) {
   var _classNames;
 
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var disabled = props.disabled,
       step = props.step,
       max = props.max,
       min = props.min;
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var _useState = (0, _react.useState)(function () {
     return value.toString();
@@ -62,10 +64,6 @@ var Stepper = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pr
     }
 
     setValue(target);
-
-    if (!hasFocus) {
-      setInputValue(target.toString());
-    }
   }
 
   var _useState2 = (0, _react.useState)(false),
@@ -77,6 +75,11 @@ var Stepper = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pr
       setInputValue(value.toString());
     }
   }, [hasFocus]);
+  (0, _react.useEffect)(function () {
+    if (!hasFocus) {
+      setInputValue(value.toString());
+    }
+  }, [value]);
 
   var handleInputChange = function handleInputChange(v) {
     setInputValue(v);
@@ -108,25 +111,31 @@ var Stepper = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pr
   };
 
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = disabled, _classNames))
+    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
   }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: classPrefix + "-minus",
     onClick: handleMinus,
     disabled: minusDisabled(),
     fill: 'none',
     color: 'primary'
-  }, /*#__PURE__*/_react["default"].createElement(_icons.MinusOutlined, null)), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.MinusOutline, null)), /*#__PURE__*/_react["default"].createElement(_input["default"], {
     className: classPrefix + "-input",
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
+      var _a;
+
       setHasFocus(true);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     value: inputValue,
     onChange: function onChange(val) {
       disabled || handleInputChange(val);
     },
     disabled: disabled,
-    onBlur: function onBlur() {
+    onBlur: function onBlur(e) {
+      var _a;
+
       setHasFocus(false);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }
   }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: classPrefix + "-plus",
@@ -134,6 +143,7 @@ var Stepper = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (pr
     disabled: plusDisabled(),
     fill: 'none',
     color: 'primary'
-  }, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null))));
-});
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.AddOutline, null))));
+};
+
 exports.Stepper = Stepper;

package/cjs/components/steps/step.d.ts

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
-export interface StepProps {
+import { NativeProps } from '../../utils/native-props';
+export declare type StepProps = {
     title?: React.ReactNode;
     description?: React.ReactNode;
     icon?: React.ReactNode;
     status?: 'wait' | 'process' | 'finish' | 'error';
-}
+} & NativeProps;
 export declare const Step: FC<StepProps>;

package/cjs/components/steps/step.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _nativeProps = require("../../utils/native-props");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-step";
@@ -19,7 +21,7 @@ var Step = function Step(props) {
       icon = props.icon,
       _props$status = props.status,
       status = _props$status === void 0 ? 'wait' : _props$status;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("" + classPrefix, classPrefix + "-status-" + status)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-indicator"
@@ -31,7 +33,7 @@ var Step = function Step(props) {
     className: classPrefix + "-title"
   }, title), !!description && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-description"
-  }, description)));
+  }, description))));
 };
 
 exports.Step = Step;

package/cjs/components/steps/steps.css

@@ -17,7 +17,7 @@
   background: var(--adm-color-white);
   color: var(--icon-color);
 }
-.adm-step .adm-step-indicator .adm-step-icon-container > .anticon {
+.adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {
   display: block;
 }
 .adm-step:last-child .adm-step-indicator::after {

package/cjs/components/steps/steps.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
 declare type Direction = 'horizontal' | 'vertical';
-export interface StepsProps {
+export declare type StepsProps = {
     current?: number;
     direction?: Direction;
-}
-export declare const Steps: React.FC<StepsProps>;
+} & NativeProps;
+export declare const Steps: FC<StepsProps>;
 export {};

package/cjs/components/steps/steps.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _nativeProps = require("../../utils/native-props");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-steps";
@@ -24,11 +26,13 @@ var defaultProps = {
   current: 0,
   direction: 'horizontal'
 };
-var Steps = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
+
+var Steps = function Steps(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var direction = props.direction,
       current = props.current;
   var classString = (0, _classnames["default"])(classPrefix, classPrefix + "-" + direction);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classString
   }, _react["default"].Children.map(props.children, function (child, index) {
     var _a;
@@ -51,6 +55,7 @@ var Steps = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (prop
       status: status,
       icon: icon
     });
-  }));
-});
+  })));
+};
+
 exports.Steps = Steps;

package/cjs/components/swipe-action/swipe-action.css

@@ -3,6 +3,7 @@
   background: var(--background);
   cursor: grab;
   overflow: hidden;
+  touch-action: pan-y;
 }
 .adm-swipe-action-track {
   position: relative;

package/cjs/components/swipe-action/swipe-action.d.ts

@@ -9,13 +9,13 @@ export declare type Action = {
     key: string | number;
     text: ReactNode;
     color?: ActionColor | string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
 };
 export declare type SwipeActionProps = {
     rightActions?: Action[];
     leftActions?: Action[];
     onAction?: (action: Action) => void;
-    closeOnTouchAway?: boolean;
+    closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
 } & NativeProps<'--background'>;
@@ -23,7 +23,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
     leftActions?: Action[] | undefined;
     onAction?: ((action: Action) => void) | undefined;
-    closeOnTouchAway?: boolean | undefined;
+    closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;
 } & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;