antd-mobile 5.0.0-rc.9 → 5.2.0

package/2x/es/components/popover/arrow.js

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Arrow = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, React.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, React.createElement("path", {
+    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+  }))));
+});

package/2x/es/components/popover/index.d.ts

@@ -1,29 +1,21 @@
 /// <reference types="react" />
 import './popover.less';
-export type { BasePopoverProps, PopoverRef } from './popover';
-export type { PopMenuProps, Action } from './pop-menu';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
+    stopPropagation?: "click"[] | undefined;
     content: import("react").ReactNode;
-} & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: <T extends import("./pop-menu").Action = import("./pop-menu").Action>(props: {
-        getContainer?: (() => HTMLElement) | undefined;
-        destroyOnHide?: boolean | undefined;
-        children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-        mode?: "dark" | "light" | undefined;
-        trigger?: "click" | undefined;
-        placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-    } & 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;
-    } & {
-        ref?: ((instance: import("./popover").PopoverRef | null) => void) | import("react").RefObject<import("./popover").PopoverRef> | null | undefined;
-    }) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+    Menu: import("react").ForwardRefExoticComponent<Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
+        actions: import("./popover-menu").Action[];
+        onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
+    } & import("react").RefAttributes<import("./popover").PopoverRef>>;
 };
 export default _default;

package/2x/es/components/popover/index.js

@@ -1,7 +1,8 @@
 import "./popover.css";
+import "./popover-menu.css";
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
-import { PopMenu } from './pop-menu';
+import { PopoverMenu } from './popover-menu';
 import { Popover } from './popover';
 export default attachPropertiesToComponent(Popover, {
-  Menu: PopMenu
+  Menu: PopoverMenu
 });

package/2x/es/components/popover/popover-menu.css

@@ -0,0 +1,63 @@
+.adm-popover-menu {
+  --border-color: var(--adm-border-color);
+}
+
+.adm-popover-menu.adm-popover {
+  --content-padding: 0;
+}
+
+.adm-popover-menu-list {
+  overflow: hidden;
+  min-width: 240px;
+}
+
+.adm-popover-menu-list-inner {
+  margin-top: -2px;
+}
+
+.adm-popover-menu-item {
+  display: flex;
+  padding-left: 40px;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.adm-popover-menu-item-icon {
+  flex: none;
+  padding-right: 16px;
+  font-size: 40px;
+}
+
+.adm-popover-menu-item-text {
+  flex: auto;
+  padding: 28px 40px 28px 0;
+  border-top: solid 2px var(--border-color);
+}
+
+.adm-popover-menu-item-disabled {
+  cursor: not-allowed;
+}
+
+.adm-popover-menu-item-disabled > * {
+  opacity: 0.4;
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: var(--border-color);
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -2px;
+  left: 0;
+  border-bottom: solid 2px var(--border-color);
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu {
+  --border-color: #333333;
+  --background: rgba(0, 0, 0, 0.9);
+}

package/2x/es/components/popover/popover-menu.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PopoverProps, PopoverRef } from './popover';
+export declare type Action = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    key?: string | number;
+    onClick?: () => void;
+};
+export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
+    actions: Action[];
+    onAction?: (item: Action) => void;
+};
+export declare const PopoverMenu: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
+    actions: Action[];
+    onAction?: ((item: Action) => void) | undefined;
+} & React.RefAttributes<PopoverRef>>;

package/2x/es/components/popover/popover-menu.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { Popover } from './popover';
+const classPrefix = `adm-popover-menu`;
+export const PopoverMenu = forwardRef((props, ref) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const onClick = useCallback(e => {
+    var _a;
+
+    const {
+      onAction
+    } = props;
+
+    if (onAction) {
+      onAction(e);
+    }
+
+    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+  }, [props.onAction]);
+  const overlay = useMemo(() => {
+    return React.createElement("div", {
+      className: `${classPrefix}-list`
+    }, React.createElement("div", {
+      className: `${classPrefix}-list-inner`
+    }, props.actions.map((action, index) => {
+      var _a;
+
+      return React.createElement("a", {
+        key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
+        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        onClick: () => {
+          var _a;
+
+          if (action.disabled) return;
+          onClick(action);
+          (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        }
+      }, action.icon && React.createElement("div", {
+        className: `${classPrefix}-item-icon`
+      }, action.icon), React.createElement("div", {
+        className: `${classPrefix}-item-text`
+      }, action.text));
+    })));
+  }, [props.actions, onClick]);
+  return React.createElement(Popover, Object.assign({
+    ref: innerRef
+  }, props, {
+    className: classNames(classPrefix, props.className),
+    content: overlay
+  }), props.children);
+});

package/2x/es/components/popover/popover.css

@@ -1,122 +1,12 @@
-@keyframes amSlideDownIn {
-  0% {
-    transform: scaleY(0.8);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes amSlideDownOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-
-  100% {
-    transform: scaleY(0.8);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
-
-@keyframes amSlideUpIn {
-  0% {
-    transform: scaleY(0.8);
-    transform-origin: 100% 100%;
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleY(1);
-    transform-origin: 100% 100%;
-    opacity: 1;
-  }
-}
-
-@keyframes amSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 100% 100%;
-    opacity: 1;
-  }
-
-  100% {
-    transform: scaleY(0.8);
-    transform-origin: 100% 100%;
-    opacity: 0;
-  }
-}
-
-@keyframes amSlideRightIn {
-  0% {
-    transform: scaleX(0.8);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleX(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes amSlideRightOut {
-  0% {
-    transform: scaleX(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-
-  100% {
-    transform: scaleX(0.8);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
-
-@keyframes amSlideLeftIn {
-  0% {
-    transform: scaleX(0.8);
-    transform-origin: 100% 0%;
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleX(1);
-    transform-origin: 100% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes amSlideLeftOut {
-  0% {
-    transform: scaleX(1);
-    transform-origin: 100% 0%;
-    opacity: 1;
-  }
-
-  100% {
-    transform: scaleX(0.8);
-    transform-origin: 100% 0%;
-    opacity: 0;
-  }
-}
-
 .adm-popover {
   --z-index: var(--adm-popover-z-index, 1030);
+  --background: #ffffff;
+  --arrow-size: 16px;
+  --content-padding: 16px 24px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: var(--z-index);
-  font-weight: normal;
   white-space: normal;
   text-align: left;
   cursor: auto;
@@ -124,16 +14,16 @@
   animation: none;
 }
 
-.adm-popover-light {
-  --popover-bg: #ffffff;
-}
-
-.adm-popover-dark {
-  --popover-bg: rgba(0, 0, 0, 0.75);
+.adm-popover.adm-popover-dark {
+  --background: rgba(0, 0, 0, 0.75);
   --adm-color-text: #ffffff;
   color: white;
 }
 
+.adm-popover.adm-popover-dark .adm-popover-inner {
+  box-shadow: none;
+}
+
 .adm-popover::after {
   position: absolute;
   background: rgba(255, 255, 255, 0.01);
@@ -147,245 +37,140 @@
 .adm-popover-placement-top,
 .adm-popover-placement-topLeft,
 .adm-popover-placement-topRight {
-  padding-bottom: 12px;
+  padding-bottom: var(--arrow-size);
 }
 
-.adm-popover-placement-top.leaving,
-.adm-popover-placement-topLeft.leaving,
-.adm-popover-placement-topRight.leaving {
-  animation-name: amSlideUpOut;
-  animation-duration: 200ms;
+.adm-popover-placement-top .adm-popover-arrow,
+.adm-popover-placement-topLeft .adm-popover-arrow,
+.adm-popover-placement-topRight .adm-popover-arrow {
+  bottom: 0;
+  --arrow-icon-rotate: 0deg;
 }
 
-.adm-popover-placement-top.entering,
-.adm-popover-placement-topLeft.entering,
-.adm-popover-placement-topRight.entering {
-  animation-name: amSlideUpIn;
-  animation-duration: 200ms;
+.adm-popover-placement-top .adm-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.adm-popover-placement-right,
-.adm-popover-placement-rightTop,
-.adm-popover-placement-rightBottom {
-  padding-left: 12px;
+.adm-popover-placement-topLeft .adm-popover-arrow {
+  left: 24px;
 }
 
-.adm-popover-placement-right.leaving,
-.adm-popover-placement-rightTop.leaving,
-.adm-popover-placement-rightBottom.leaving {
-  animation-name: amSlideRightOut;
-  animation-duration: 200ms;
+.adm-popover-placement-topRight .adm-popover-arrow {
+  right: 24px;
 }
 
-.adm-popover-placement-right.entering,
-.adm-popover-placement-rightTop.entering,
-.adm-popover-placement-rightBottom.entering {
-  animation-name: amSlideRightIn;
-  animation-duration: 200ms;
+.adm-popover-placement-right,
+.adm-popover-placement-rightTop,
+.adm-popover-placement-rightBottom {
+  padding-left: var(--arrow-size);
 }
 
-.adm-popover-placement-bottom,
-.adm-popover-placement-bottomLeft,
-.adm-popover-placement-bottomRight {
-  padding-top: 12px;
+.adm-popover-placement-right .adm-popover-arrow,
+.adm-popover-placement-rightTop .adm-popover-arrow,
+.adm-popover-placement-rightBottom .adm-popover-arrow {
+  left: 0;
+  --arrow-icon-rotate: 90deg;
 }
 
-.adm-popover-placement-bottom.leaving,
-.adm-popover-placement-bottomLeft.leaving,
-.adm-popover-placement-bottomRight.leaving {
-  animation-name: amSlideDownOut;
-  animation-duration: 200ms;
+.adm-popover-placement-right .adm-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.adm-popover-placement-bottom.entering,
-.adm-popover-placement-bottomLeft.entering,
-.adm-popover-placement-bottomRight.entering {
-  animation-name: amSlideDownIn;
-  animation-duration: 200ms;
+.adm-popover-placement-rightTop .adm-popover-arrow {
+  top: 24px;
 }
 
-.adm-popover-placement-left,
-.adm-popover-placement-leftTop,
-.adm-popover-placement-leftBottom {
-  padding-right: 12px;
+.adm-popover-placement-rightBottom .adm-popover-arrow {
+  bottom: 24px;
 }
 
-.adm-popover-placement-left.leaving,
-.adm-popover-placement-leftTop.leaving,
-.adm-popover-placement-leftBottom.leaving {
-  animation-name: amSlideLeftOut;
-  animation-duration: 200ms;
+.adm-popover-placement-bottom,
+.adm-popover-placement-bottomLeft,
+.adm-popover-placement-bottomRight {
+  padding-top: var(--arrow-size);
 }
 
-.adm-popover-placement-left.entering,
-.adm-popover-placement-leftTop.entering,
-.adm-popover-placement-leftBottom.entering {
-  animation-name: amSlideLeftIn;
-  animation-duration: 200ms;
+.adm-popover-placement-bottom .adm-popover-arrow,
+.adm-popover-placement-bottomLeft .adm-popover-arrow,
+.adm-popover-placement-bottomRight .adm-popover-arrow {
+  top: 0;
+  --arrow-icon-rotate: 180deg;
 }
 
-.adm-popover-inner {
-  background-color: var(--popover-bg);
-  background-clip: padding-box;
-  border-radius: 8px;
-  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.12), 0 12px 32px 0 rgba(0, 0, 0, 0.08), 0 18px 56px 16px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 16px rgba(0, 0, 0, 0.15) \9;
-  min-width: 64px;
-  min-height: 64px;
-  overflow-y: hidden;
+.adm-popover-placement-bottom .adm-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.adm-popover-inner-content {
-  padding: 24px;
+.adm-popover-placement-bottomLeft .adm-popover-arrow {
+  left: 24px;
 }
 
-.adm-popover-inner-menu {
-  min-width: 240px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  border-bottom: 2px solid var(--adm-border-color);
+.adm-popover-placement-bottomRight .adm-popover-arrow {
+  right: 24px;
 }
 
-.adm-popover-inner-menu-with-icon {
-  min-width: 280px;
+.adm-popover-placement-left,
+.adm-popover-placement-leftTop,
+.adm-popover-placement-leftBottom {
+  padding-right: var(--arrow-size);
 }
 
-.adm-popover-inner-menu-icon {
-  margin-right: 24px;
-  font-size: 40px;
-  line-height: 1;
-  vertical-align: -0.075em;
+.adm-popover-placement-left .adm-popover-arrow,
+.adm-popover-placement-leftTop .adm-popover-arrow,
+.adm-popover-placement-leftBottom .adm-popover-arrow {
+  right: 0;
+  --arrow-icon-rotate: 270deg;
 }
 
-.adm-popover-inner-menu:last-child {
-  border-bottom: none;
+.adm-popover-placement-left .adm-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.adm-popover-inner-menu button {
-  border-radius: 0;
-  padding: 20px 24px;
-  text-align: left;
+.adm-popover-placement-leftTop .adm-popover-arrow {
+  top: 24px;
 }
 
-.adm-popover-menu .adm-popover-inner-content {
-  padding: 0;
+.adm-popover-placement-leftBottom .adm-popover-arrow {
+  bottom: 24px;
 }
 
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .adm-popover {
-    /* IE10+ */
-  }
+.adm-popover-inner {
+  background-color: var(--background);
+  background-clip: padding-box;
+  border-radius: 16px;
+  box-shadow: 0 0 60px 0 rgba(51, 51, 51, 0.2);
+  font-size: 30px;
+  min-width: 64px;
+  overflow-y: hidden;
+}
 
-  .adm-popover-inner {
-    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.12), 0 12px 32px 0 rgba(0, 0, 0, 0.08), 0 18px 56px 16px rgba(0, 0, 0, 0.05);
-  }
+.adm-popover-inner-content {
+  padding: var(--content-padding);
 }
 
 .adm-popover-arrow {
   position: absolute;
   display: block;
-  width: 17px;
-  height: 17px;
+  height: var(--arrow-size);
+  width: var(--arrow-size);
+  overflow: visible;
   background: transparent;
-  border-style: solid;
-  border-width: 8px;
-  transform: rotate(45deg);
-}
-
-.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: 6px;
-  border-top-color: transparent;
-  border-right-color: var(--popover-bg);
-  border-bottom-color: var(--popover-bg);
-  border-left-color: transparent;
-  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.07);
-}
-
-.adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}
-
-.adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow {
-  left: 32px;
-}
-
-.adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow {
-  right: 32px;
-}
-
-.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: 6px;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: var(--popover-bg);
-  border-left-color: var(--popover-bg);
-  box-shadow: -6px 6px 14px rgba(0, 0, 0, 0.07);
 }
 
-.adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow {
+.adm-popover-arrow-icon {
+  display: block;
+  height: var(--arrow-size);
+  width: 30px;
+  position: absolute;
   top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow {
-  top: 24px;
-}
-
-.adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow {
-  bottom: 24px;
-}
-
-.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: 6px;
-  border-top-color: var(--popover-bg);
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: var(--popover-bg);
-  box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.06);
-}
-
-.adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow {
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(var(--arrow-icon-rotate));
 }
 
-.adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow {
-  left: 32px;
-}
-
-.adm-popover-placement-bottomRight > .adm-popover-content > .adm-popover-arrow {
-  right: 32px;
-}
-
-.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: 6px;
-  border-top-color: var(--popover-bg);
-  border-right-color: var(--popover-bg);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  box-shadow: 6px -6px 14px rgba(0, 0, 0, 0.07);
-}
-
-.adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow {
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow {
-  top: 24px;
-}
-
-.adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow {
-  bottom: 24px;
+.adm-popover .adm-popover-arrow {
+  color: var(--background);
 }