antd-mobile 5.0.0-rc.22 → 5.0.0-rc.26

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);
+.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,258 +37,140 @@
 .adm-popover-placement-top,
 .adm-popover-placement-topLeft,
 .adm-popover-placement-topRight {
-  padding-bottom: 24px;
+  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-right,
-.adm-popover-placement-rightTop,
-.adm-popover-placement-rightBottom {
-  padding-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-right.entering,
-.adm-popover-placement-rightTop.entering,
-.adm-popover-placement-rightBottom.entering {
-  animation-name: amSlideRightIn;
-  animation-duration: 200ms;
-}
-
-.adm-popover-placement-bottom,
-.adm-popover-placement-bottomLeft,
-.adm-popover-placement-bottomRight {
-  padding-top: 24px;
-}
-
-.adm-popover-placement-bottom.leaving,
-.adm-popover-placement-bottomLeft.leaving,
-.adm-popover-placement-bottomRight.leaving {
-  animation-name: amSlideDownOut;
-  animation-duration: 200ms;
-}
-
-.adm-popover-placement-bottom.entering,
-.adm-popover-placement-bottomLeft.entering,
-.adm-popover-placement-bottomRight.entering {
-  animation-name: amSlideDownIn;
-  animation-duration: 200ms;
-}
-
-.adm-popover-placement-left,
-.adm-popover-placement-leftTop,
-.adm-popover-placement-leftBottom {
-  padding-right: 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-left.entering,
-.adm-popover-placement-leftTop.entering,
-.adm-popover-placement-leftBottom.entering {
-  animation-name: amSlideLeftIn;
-  animation-duration: 200ms;
-}
-
-.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-inner-content {
-  padding: 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-inner-menu-with-icon {
-  min-width: 280px;
+.adm-popover-placement-top .adm-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.adm-popover-inner-menu-icon {
-  margin-right: 24px;
-  font-size: 40px;
-  line-height: 1;
-  vertical-align: -0.075em;
+.adm-popover-placement-topLeft .adm-popover-arrow {
+  left: 24px;
 }
 
-.adm-popover-inner-menu:last-child {
-  border-bottom: none;
+.adm-popover-placement-topRight .adm-popover-arrow {
+  right: 24px;
 }
 
-.adm-popover-inner-menu button {
-  border-radius: 0;
-  padding: 20px 24px;
-  text-align: left;
+.adm-popover-placement-right,
+.adm-popover-placement-rightTop,
+.adm-popover-placement-rightBottom {
+  padding-left: var(--arrow-size);
 }
 
-.adm-popover-menu .adm-popover-inner-content {
-  padding: 0;
+.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;
 }
 
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .adm-popover {
-    /* IE10+ */
-  }
-
-  .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-placement-right .adm-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.adm-popover-arrow {
-  position: absolute;
-  display: block;
-  width: 34px;
-  height: 34px;
-  background: transparent;
+.adm-popover-placement-rightTop .adm-popover-arrow {
+  top: 24px;
 }
 
-.adm-popover-arrow-content {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  inset: 0;
-  display: block;
-  margin: auto;
-  background-color: var(--popover-bg);
-  content: '';
-  pointer-events: auto;
+.adm-popover-placement-rightBottom .adm-popover-arrow {
+  bottom: 24px;
 }
 
-.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: 2px;
+.adm-popover-placement-bottom,
+.adm-popover-placement-bottomLeft,
+.adm-popover-placement-bottomRight {
+  padding-top: var(--arrow-size);
 }
 
-.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(-8px) rotate(45deg);
+.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-placement-top > .adm-popover-content > .adm-popover-arrow {
+.adm-popover-placement-bottom .adm-popover-arrow {
   left: 50%;
   transform: translateX(-50%);
 }
 
-.adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow {
-  left: 32px;
+.adm-popover-placement-bottomLeft .adm-popover-arrow {
+  left: 24px;
 }
 
-.adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow {
-  right: 32px;
+.adm-popover-placement-bottomRight .adm-popover-arrow {
+  right: 24px;
 }
 
-.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: 2px;
+.adm-popover-placement-left,
+.adm-popover-placement-leftTop,
+.adm-popover-placement-leftBottom {
+  padding-right: var(--arrow-size);
 }
 
-.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(8px) rotate(45deg);
+.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-placement-right > .adm-popover-content > .adm-popover-arrow {
+.adm-popover-placement-left .adm-popover-arrow {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow {
+.adm-popover-placement-leftTop .adm-popover-arrow {
   top: 24px;
 }
 
-.adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow {
+.adm-popover-placement-leftBottom .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: 2px;
-}
-
-.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(8px) rotate(45deg);
-}
-
-.adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.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-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-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: 2px;
+.adm-popover-inner-content {
+  padding: var(--content-padding);
 }
 
-.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(-8px) rotate(45deg);
+.adm-popover-arrow {
+  position: absolute;
+  display: block;
+  height: var(--arrow-size);
+  width: var(--arrow-size);
+  overflow: visible;
+  background: transparent;
 }
 
-.adm-popover-placement-left > .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%);
-}
-
-.adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow {
-  top: 24px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(var(--arrow-icon-rotate));
 }
 
-.adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow {
-  bottom: 24px;
+.adm-popover .adm-popover-arrow {
+  color: var(--background);
 }

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

@@ -2,28 +2,29 @@ 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;
+import { GetContainer } from '../../utils/render-to-container';
+export declare type PopoverProps = {
+    getContainer?: GetContainer;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
     trigger?: 'click';
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    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'>;
+    content: React.ReactNode;
+} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
-} & React.RefAttributes<PopoverRef>>;
+} & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;

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

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { Arrow } from './arrow';
 const classPrefix = `adm-popover`;
-const enterClassName = 'entering';
-const leaveClassName = 'leaving';
 const defaultProps = {
+  placement: 'top',
   defaultVisible: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: () => document.body
 };
 export const Popover = forwardRef((p, ref) => {
   var _a;
@@ -34,27 +35,19 @@ export const Popover = forwardRef((p, ref) => {
     className: `${classPrefix}-inner-content`
   }, props.content));
   return React.createElement(Tooltip, Object.assign({}, props, {
-    overlayClassName: classNames(`${classPrefix}-${mode}`, props.overlayClassName),
+    placement: props.placement,
+    align: props.align,
+    overlayClassName: classNames(`${classPrefix}-${mode}`, props.className),
+    overlayStyle: props.style,
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
     getTooltipContainer: props.getContainer || (() => document.body),
     visible: visible,
-    arrowContent: React.createElement("span", {
-      className: `${classPrefix}-arrow-content`
+    arrowContent: React.createElement(Arrow, {
+      className: `${classPrefix}-arrow-icon`
     }),
     onVisibleChange: setVisible,
     trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    motion: {
-      motionName: {
-        appear: enterClassName,
-        appearActive: enterClassName,
-        enter: enterClassName,
-        enterActive: enterClassName,
-        leaveActive: leaveClassName,
-        leave: leaveClassName
-      },
-      motionDeadline: 200
-    },
     overlay: overlay
   }), props.children);
 });

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

@@ -18,18 +18,15 @@
   border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-radio .adm-radio-icon-checked {
+.adm-radio .adm-radio-icon > svg {
   display: block;
-  width: 65%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-radio.adm-radio-block {

package/2x/es/components/radio/radio.js

@@ -49,9 +49,7 @@ export const Radio = p => {
 
     return React.createElement("div", {
       className: `${classPrefix}-icon`
-    }, checked && React.createElement(CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, checked && React.createElement(CheckIcon, null));
   };
 
   return withNativeProps(props, React.createElement("label", {

package/2x/es/components/search-bar/search-bar.css

@@ -57,7 +57,7 @@
   padding: 6px 24px;
 }
 
-.adm-search-bar-active .adm-input.adm-input {
+.adm-search-bar-active .adm-input.adm-input.adm-input {
   --placeholder-color: var(--adm-color-light);
 }
 

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

@@ -1,6 +1,12 @@
 .adm-selector {
-  --color: var(--adm-color-text);
+  --color: #f5f5f5;
   --checked-color: #e7f1ff;
+  --text-color: var(--adm-color-text);
+  --checked-text-color: var(--adm-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 4px;
+  --padding: 16px 32px;
   overflow: hidden;
   font-size: 30px;
   line-height: 1.4;
@@ -11,11 +17,12 @@
 }
 
 .adm-selector-item {
-  padding: 16px 32px;
+  padding: var(--padding);
   position: relative;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  color: #333;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
   opacity: 1;
   cursor: pointer;
   display: inline-block;
@@ -31,8 +38,9 @@
 
 .adm-selector-item-active,
 .adm-selector-item-multiple-active {
-  color: var(--adm-color-primary);
+  color: var(--checked-text-color);
   background-color: var(--checked-color);
+  border: var(--checked-border);
 }
 
 .adm-selector-item .adm-selector-check-mark-wrapper {

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

@@ -16,5 +16,6 @@ export declare type SelectorProps<V> = {
     onChange?: (v: V[], extend: {
         items: SelectorOption<V>[];
     }) => void;
-} & NativeProps<'--checked-color'>;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
 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>)>;