antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

package/cjs/components/picker-view/use-columns.js

@@ -8,15 +8,11 @@ exports.useColumns = useColumns;
 var _react = require("react");
 
 function useColumns(rawColumns, value) {
-  return (0, _react.useMemo)(function () {
-    var columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
-    return columns.map(function (column) {
-      return column.map(function (item) {
-        return typeof item === 'string' ? {
-          label: item,
-          value: item
-        } : item;
-      });
-    });
+  return (0, _react.useMemo)(() => {
+    const columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
+    return columns.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
   }, [rawColumns, value]);
 }

package/cjs/components/picker-view/use-picker-value-extend.js

@@ -9,23 +9,19 @@ var _react = require("react");
 
 var _memoize = _interopRequireDefault(require("lodash/memoize"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function usePickerValueExtend(columns) {
-  var generateItems = (0, _react.useMemo)(function () {
-    return (0, _memoize["default"])(function (val) {
-      return val.map(function (v, index) {
+  const generateItems = (0, _react.useMemo)(() => {
+    return (0, _memoize.default)(val => {
+      return val.map((v, index) => {
         var _a;
 
-        var column = columns[index];
+        const column = columns[index];
         if (!column) return null;
-        return (_a = column.find(function (item) {
-          return item.value === v;
-        })) !== null && _a !== void 0 ? _a : null;
+        return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
       });
-    }, function (val) {
-      return JSON.stringify(val);
-    });
+    }, val => JSON.stringify(val));
   }, [columns]);
 
   function generateValueExtend(val) {

package/cjs/components/picker-view/wheel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+interface Props {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+}
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};

package/cjs/components/picker-view/wheel.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wheel = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _web = require("@react-spring/web");
+
+var _react2 = require("@use-gesture/react");
+
+var _convertPx = require("../../utils/convert-px");
+
+var _rubberband = require("../../utils/rubberband");
+
+var _bound = require("../../utils/bound");
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-picker-view`;
+const Wheel = (0, _react.memo)(props => {
+  const itemHeight = (0, _convertPx.convertPx)(34);
+  const {
+    value,
+    column
+  } = props;
+
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
+  const [{
+    y
+  }, api] = (0, _web.useSpring)(() => ({
+    from: {
+      y: 0
+    },
+    config: {
+      tension: 400,
+      mass: 0.8
+    }
+  }));
+  const draggingRef = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(() => {
+    if (draggingRef.current) return;
+    if (!value) return;
+    const targetIndex = column.findIndex(item => item.value === value);
+    if (targetIndex < 0) return;
+    const finalPosition = targetIndex * -itemHeight;
+    api.start({
+      y: finalPosition,
+      immediate: y.goal !== finalPosition
+    });
+  }, [value, column]);
+  (0, _react.useLayoutEffect)(() => {
+    if (column.length === 0) {
+      if (value !== null) {
+        onSelect(null);
+      }
+    } else {
+      if (!column.some(item => item.value === value)) {
+        const firstItem = column[0];
+        onSelect(firstItem.value);
+      }
+    }
+  }, [column, value]);
+
+  function scrollSelect(index) {
+    const finalPosition = index * -itemHeight;
+    api.start({
+      y: finalPosition
+    });
+    const item = column[index];
+    if (!item) return;
+    onSelect(item.value);
+  }
+
+  const bind = (0, _react2.useDrag)(state => {
+    draggingRef.current = true;
+    const min = -((column.length - 1) * itemHeight);
+    const max = 0;
+
+    if (state.last) {
+      draggingRef.current = false;
+      const position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
+      const targetIndex = min < max ? -Math.round((0, _bound.bound)(position, min, max) / itemHeight) : 0;
+      scrollSelect(targetIndex);
+    } else {
+      const position = state.offset[1];
+      api.start({
+        y: (0, _rubberband.rubberbandIfOutOfBounds)(position, min, max, itemHeight * 50, 0.2)
+      });
+    }
+  }, {
+    axis: 'y',
+    from: () => [0, y.get()],
+    filterTaps: true,
+    pointer: {
+      touch: true
+    }
+  });
+  let selectedIndex = null;
+
+  function renderAccessible() {
+    if (selectedIndex === null) {
+      return null;
+    }
+
+    const current = column[selectedIndex];
+    const previousIndex = selectedIndex - 1;
+    const nextIndex = selectedIndex + 1;
+    const previous = column[previousIndex];
+    const next = column[nextIndex];
+    return _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible'
+    }, _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-current',
+      role: 'button',
+      "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
+    }, "-"), _react.default.createElement("div", null, previous && _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: () => {
+        scrollSelect(previousIndex);
+      },
+      role: 'button',
+      "aria-label": `选择上一项：${previous.label}`
+    }, "-")), _react.default.createElement("div", null, next && _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: () => {
+        scrollSelect(nextIndex);
+      },
+      role: 'button',
+      "aria-label": `选择下一项：${next.label}`
+    }, "-")));
+  }
+
+  return _react.default.createElement("div", Object.assign({
+    className: `${classPrefix}-column`
+  }, bind()), _react.default.createElement(_web.animated.div, {
+    style: {
+      translateY: y
+    },
+    className: `${classPrefix}-column-wheel`,
+    "aria-hidden": true
+  }, column.map((item, index) => {
+    const selected = props.value === item.value;
+    if (selected) selectedIndex = index;
+
+    function handleClick() {
+      draggingRef.current = false;
+      scrollSelect(index);
+    }
+
+    return _react.default.createElement("div", {
+      key: item.value,
+      "data-selected": item.value === value,
+      className: `${classPrefix}-column-item`,
+      onClick: handleClick,
+      "aria-hidden": !selected,
+      "aria-label": selected ? 'active' : ''
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-column-item-label`
+    }, item.label));
+  })), renderAccessible());
+}, (prev, next) => {
+  if (prev.index !== next.index) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!(0, _isEqual.default)(prev.column, next.column)) {
+    return false;
+  }
+
+  return true;
+});
+exports.Wheel = Wheel;
+Wheel.displayName = 'Wheel';

package/cjs/components/popover/index.d.ts

@@ -9,6 +9,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
     placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    stopPropagation?: "click"[] | undefined;
 } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     content: import("react").ReactNode;
 } & import("react").RefAttributes<import("./popover").PopoverRef>> & {
@@ -19,6 +20,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
         mode?: "dark" | "light" | undefined;
         trigger?: "click" | undefined;
         placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+        stopPropagation?: "click"[] | undefined;
     } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
         actions: T[];
         onAction?: ((text: T) => void) | undefined;

package/cjs/components/popover/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./popover.css");
 
@@ -17,4 +17,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_po
   Menu: _popMenu.PopMenu
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/popover/pop-menu.d.ts

@@ -19,6 +19,7 @@ export declare const PopMenu: <T extends Action = Action>(props: {
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
     placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    stopPropagation?: "click"[] | undefined;
 } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     actions: T[];
     onAction?: ((text: T) => void) | undefined;

package/cjs/components/popover/pop-menu.js

@@ -13,23 +13,22 @@ var _button = _interopRequireDefault(require("../button"));
 
 var _popover = require("./popover");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-popover";
-var PopMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var innerRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return innerRef.current;
-  }, []);
-
-  var _onClick = (0, _react.useCallback)(function (e) {
+const classPrefix = `adm-popover`;
+const PopMenu = (0, _react.forwardRef)((props, ref) => {
+  const innerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => innerRef.current, []);
+  const onClick = (0, _react.useCallback)(e => {
     var _a;
 
-    var onAction = props.onAction;
+    const {
+      onAction
+    } = props;
 
     if (onAction) {
       onAction(e);
@@ -37,38 +36,36 @@ var PopMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
   }, [props.onAction]);
-
-  var overlay = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (props.actions || []).map(function (ele, index) {
-      var _classNames;
-
+  const overlay = (0, _react.useMemo)(() => {
+    return _react.default.createElement(_react.default.Fragment, null, (props.actions || []).map((ele, index) => {
       var _a;
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classPrefix + "-inner-menu", (_classNames = {}, _classNames[classPrefix + "-inner-menu-with-icon"] = !!ele.icon, _classNames)),
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(`${classPrefix}-inner-menu`, {
+          [`${classPrefix}-inner-menu-with-icon`]: !!ele.icon
+        }),
         key: (_a = ele.key) !== null && _a !== void 0 ? _a : index
-      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      }, _react.default.createElement(_button.default, {
         disabled: ele.disabled,
-        onClick: function onClick() {
+        onClick: () => {
           var _a;
 
           if (!ele.disabled) {
-            _onClick(ele);
-
+            onClick(ele);
             (_a = ele.onClick) === null || _a === void 0 ? void 0 : _a.call(ele);
           }
         },
         fill: 'none',
         block: true
-      }, ele.icon && /*#__PURE__*/_react["default"].createElement("span", {
-        className: classPrefix + "-inner-menu-icon"
+      }, ele.icon && _react.default.createElement("span", {
+        className: `${classPrefix}-inner-menu-icon`
       }, ele.icon), ele.text));
     }));
-  }, [props.actions, _onClick]);
-  return /*#__PURE__*/_react["default"].createElement(_popover.Popover, Object.assign({
+  }, [props.actions, onClick]);
+  return _react.default.createElement(_popover.Popover, Object.assign({
     ref: innerRef
   }, props, {
-    overlayClassName: (0, _classnames["default"])(classPrefix + "-menu", props.overlayClassName),
+    overlayClassName: (0, _classnames.default)(`${classPrefix}-menu`, props.overlayClassName),
     content: overlay
   }), props.children);
 });

package/cjs/components/popover/popover.css

@@ -111,7 +111,7 @@
   --popover-bg: #ffffff;
 }
 .adm-popover-dark {
-  --popover-bg: rgba(0, 0, 0, 0.75);
+  --popover-bg: rgba(0, 0, 0);
   --adm-color-text: #ffffff;
   color: white;
 }
@@ -126,7 +126,7 @@
 .adm-popover-placement-top,
 .adm-popover-placement-topLeft,
 .adm-popover-placement-topRight {
-  padding-bottom: 6px;
+  padding-bottom: 12px;
 }
 .adm-popover-placement-top.leaving,
 .adm-popover-placement-topLeft.leaving,
@@ -143,7 +143,7 @@
 .adm-popover-placement-right,
 .adm-popover-placement-rightTop,
 .adm-popover-placement-rightBottom {
-  padding-left: 6px;
+  padding-left: 12px;
 }
 .adm-popover-placement-right.leaving,
 .adm-popover-placement-rightTop.leaving,
@@ -160,7 +160,7 @@
 .adm-popover-placement-bottom,
 .adm-popover-placement-bottomLeft,
 .adm-popover-placement-bottomRight {
-  padding-top: 6px;
+  padding-top: 12px;
 }
 .adm-popover-placement-bottom.leaving,
 .adm-popover-placement-bottomLeft.leaving,
@@ -177,7 +177,7 @@
 .adm-popover-placement-left,
 .adm-popover-placement-leftTop,
 .adm-popover-placement-leftBottom {
-  padding-right: 6px;
+  padding-right: 12px;
 }
 .adm-popover-placement-left.leaving,
 .adm-popover-placement-leftTop.leaving,
@@ -243,26 +243,34 @@
 .adm-popover-arrow {
   position: absolute;
   display: block;
-  width: 8.48528137px;
-  height: 8.48528137px;
+  width: 16.97056275px;
+  height: 16.97056275px;
   background: transparent;
-  border-style: solid;
-  border-width: 4.24264069px;
-  transform: rotate(45deg);
+}
+.adm-popover-arrow-content {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  inset: 0;
+  display: block;
+  margin: auto;
+  background-color: var(--popover-bg);
+  content: '';
+  pointer-events: auto;
 }
 .adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow {
-  bottom: 3px;
-  border-top-color: transparent;
-  border-right-color: var(--popover-bg);
-  border-bottom-color: var(--popover-bg);
-  border-left-color: transparent;
-  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+  bottom: 1px;
+}
+.adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translateY(-4.24264069px) rotate(45deg);
 }
 .adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow {
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translateX(-50%);
 }
 .adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow {
   left: 16px;
@@ -273,16 +281,16 @@
 .adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow {
-  left: 3px;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: var(--popover-bg);
-  border-left-color: var(--popover-bg);
-  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+  left: 1px;
+}
+.adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translate(4.24264069px) rotate(45deg);
 }
 .adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow {
   top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+  transform: translateY(-50%);
 }
 .adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow {
   top: 12px;
@@ -293,16 +301,16 @@
 .adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-bottomRight > .adm-popover-content > .adm-popover-arrow {
-  top: 3px;
-  border-top-color: var(--popover-bg);
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: var(--popover-bg);
-  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+  top: 1px;
+}
+.adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-bottomRight > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translateY(4.24264069px) rotate(45deg);
 }
 .adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow {
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translateX(-50%);
 }
 .adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow {
   left: 16px;
@@ -313,16 +321,16 @@
 .adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow {
-  right: 3px;
-  border-top-color: var(--popover-bg);
-  border-right-color: var(--popover-bg);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+  right: 1px;
+}
+.adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translate(-4.24264069px) rotate(45deg);
 }
 .adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow {
   top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+  transform: translateY(-50%);
 }
 .adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow {
   top: 12px;

package/cjs/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type BasePopoverProps = {
     getContainer?: () => HTMLElement;
     destroyOnHide?: boolean;
@@ -8,6 +9,7 @@ export declare type BasePopoverProps = {
     mode?: 'light' | 'dark';
     trigger?: 'click';
     placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    stopPropagation?: PropagationEvent[];
 } & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
@@ -21,6 +23,7 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
     placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    stopPropagation?: "click"[] | undefined;
 } & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
 } & React.RefAttributes<PopoverRef>>;