antd-mobile 5.0.0-rc.20 → 5.0.0-rc.24

package/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/es/components/radio/radio.css

@@ -13,20 +13,17 @@
 }
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 1px solid #ccc;
+  border: 1px 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 {
   display: flex;
@@ -39,12 +36,12 @@
   cursor: not-allowed;
 }
 .adm-radio.adm-radio-disabled .adm-radio-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 .adm-radio.adm-radio-disabled .adm-radio-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/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/es/components/result/result.css

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 32px 12px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -16,7 +13,7 @@
   font-size: 52px;
 }
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 18px;
   line-height: 1.4;
   text-align: center;

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

@@ -1,13 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --height: 28px;
+  --height: 32px;
   --padding-left: 8px;
   --background: #f5f5f5;
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 .adm-search-bar .adm-search-bar-input-box {
   flex: auto;
@@ -21,20 +22,20 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
+  color: var(--adm-color-light);
   font-size: 16px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
-  height: var(--height);
+  height: calc(var(--height) - 2px);
   box-sizing: border-box;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 15px;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 13px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
@@ -47,6 +48,9 @@
 .adm-search-bar .adm-search-bar-cancel-button.adm-button {
   padding: 3px 12px;
 }
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
   background: var(--adm-color-white);

package/es/components/selector/selector.css

@@ -5,6 +5,9 @@
   font-size: 15px;
   line-height: 1.4;
 }
+.adm-selector .adm-space.adm-space {
+  --gap: 12px;
+}
 .adm-selector-item {
   padding: 8px 16px;
   position: relative;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Corner: React.NamedExoticComponent<NativeProps<never>>;

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

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Corner = memo(props => withNativeProps(props, React.createElement("svg", {
+  viewBox: '0 0 30 30'
+}, React.createElement("g", {
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, React.createElement("path", {
+  d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
+  fill: 'var(--adm-color-white)',
+  transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
+})))));

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

@@ -10,6 +10,18 @@
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
+  background-color: var(--background-color);
+  display: flex;
+  flex-direction: column;
+}
+.adm-side-bar-items {
+  flex: none;
+  overflow: hidden;
+}
+.adm-side-bar-extra-space {
+  flex: auto;
+  overflow: hidden;
+  position: relative;
 }
 .adm-side-bar-item {
   display: flex;
@@ -19,6 +31,7 @@
   position: relative;
   cursor: pointer;
   background-color: var(--background-color);
+  overflow: visible;
 }
 .adm-side-bar-item-highlight {
   position: absolute;
@@ -34,27 +47,21 @@
   background-color: var(--adm-color-white);
   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: '';
+.adm-side-bar-item-corner {
   width: var(--item-border-radius);
   height: var(--item-border-radius);
-  background-color: var(--adm-color-white);
   position: absolute;
-  top: calc(var(--item-border-radius) * -1);
+  z-index: 100;
   right: 0;
+  user-select: none;
+  pointer-events: none;
 }
-.adm-side-bar-item-active::after {
-  content: '';
-  width: var(--item-border-radius);
-  height: var(--item-border-radius);
-  background-color: var(--background-color);
-  border-bottom-right-radius: var(--item-border-radius);
-  position: absolute;
-  top: calc(var(--item-border-radius) * -1);
-  right: 0;
+.adm-side-bar-item-corner-top {
+  top: 0;
+  transform: rotate(-90deg);
+}
+.adm-side-bar-item-corner-bottom {
+  bottom: 0;
 }
 .adm-side-bar-item-disabled {
   cursor: not-allowed;
@@ -62,3 +69,6 @@
 .adm-side-bar-item-disabled .adm-side-bar-item-title {
   opacity: 0.4;
 }
+.adm-side-bar-badge.adm-badge {
+  --right: -4px;
+}

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Badge from '../badge';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
+import { Corner } from './corner';
 const classPrefix = `adm-side-bar`;
 export const SideBarItem = () => {
   return null;
@@ -33,10 +34,16 @@ export const SideBar = props => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
     }
   });
+  const lastItem = items[items.length - 1];
+  const isLastItemActive = lastItem && lastItem.key === activeKey;
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix)
-  }, items.map(item => {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-items`
+  }, items.map((item, index) => {
     const active = item.key === activeKey;
+    const isActiveNextSibling = items[index - 1] && items[index - 1].key === activeKey;
+    const isActivePreviousSibling = items[index + 1] && items[index + 1].key === activeKey;
     return withNativeProps(item.props, React.createElement("div", {
       key: item.key,
       onClick: () => {
@@ -50,12 +57,21 @@ export const SideBar = props => {
         [`${classPrefix}-item-active`]: active,
         [`${classPrefix}-item-disabled`]: item.props.disabled
       })
-    }, React.createElement(Badge, {
-      content: item.props.badge
+    }, React.createElement(React.Fragment, null, isActiveNextSibling && React.createElement(Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+    }), isActivePreviousSibling && React.createElement(Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-bottom`
+    })), React.createElement(Badge, {
+      content: item.props.badge,
+      className: `${classPrefix}-badge`
     }, React.createElement("div", {
       className: `${classPrefix}-item-title`
     }, active && React.createElement("div", {
       className: `${classPrefix}-item-highlight`
     }), item.props.title))));
-  })));
+  })), React.createElement("div", {
+    className: classNames(`${classPrefix}-extra-space`, isLastItemActive && `${classPrefix}-item-active-next-sibling`)
+  }, isLastItemActive && React.createElement(Corner, {
+    className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+  }))));
 };

package/es/components/spin-loading/spin-loading.css

@@ -1,9 +1,8 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --track-width: calc(var(--size) / 16);
   --pi: 3.14159265;
-  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
+  --radius: 15;
   --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
@@ -15,13 +14,6 @@
 }
 .adm-spin-loading-svg > .adm-spin-loading-fill {
   stroke: var(--color);
-  stroke-width: var(--track-width);
-  stroke-dasharray: var(--circumference);
-  stroke-linecap: square;
-  animation: adm-spin-loading-fill 1s infinite alternate-reverse linear;
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
 }
 @keyframes adm-spin-loading-rotate {
   from {
@@ -31,11 +23,3 @@
     transform: rotate(360deg);
   }
 }
-@keyframes adm-spin-loading-fill {
-  from {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.4));
-  }
-  to {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.8));
-  }
-}

package/es/components/spin-loading/spin-loading.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpinLoadingProps = {
     color?: 'default' | 'primary' | 'white' | (string & {});
-} & NativeProps<'--color' | '--size' | '--track-width'>;
+} & NativeProps<'--color' | '--size'>;
 export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;

package/es/components/spin-loading/spin-loading.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import { useSpring, animated } from '@react-spring/web';
 const classPrefix = 'adm-spin-loading';
 const colorRecord = {
   default: 'var(--adm-color-weak)',
@@ -10,19 +11,45 @@ const colorRecord = {
 const defaultProps = {
   color: 'default'
 };
+const circumference = 15 * 3.14159265358979 * 2;
 export const SpinLoading = memo(p => {
   var _a;
 
   const props = mergeProps(defaultProps, p);
-  return withNativeProps(props, React.createElement("div", {
+  const {
+    percent
+  } = useSpring({
+    loop: {
+      reverse: true
+    },
+    from: {
+      percent: 30
+    },
+    to: {
+      percent: 80
+    },
+    config: {
+      duration: 1200
+    }
+  });
+  return withNativeProps(props, React.createElement(animated.div, {
     className: classPrefix,
     style: {
-      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color,
+      '--percent': percent
     }
   }, React.createElement("svg", {
-    className: `${classPrefix}-svg`
-  }, React.createElement("circle", {
+    className: `${classPrefix}-svg`,
+    viewBox: '0 0 32 32'
+  }, React.createElement(animated.circle, {
     className: `${classPrefix}-fill`,
-    fill: 'transparent'
+    fill: 'transparent',
+    strokeWidth: '2',
+    strokeDasharray: circumference,
+    strokeDashoffset: percent,
+    strokeLinecap: 'square',
+    r: 15,
+    cx: 16,
+    cy: 16
   }))));
 });

package/es/components/stepper/stepper.css

@@ -31,12 +31,10 @@
 }
 .adm-stepper .adm-stepper-input {
   height: var(--height);
-  background-color: var(--input-background-color);
-}
-.adm-stepper .adm-stepper-input > input {
-  text-align: center;
-  font-size: var(--input-font-size);
-  color: var(--input-font-color);
+  --background-color: var(--input-background-color);
+  --font-size: var(--input-font-size);
+  --color: var(--input-font-color);
+  --text-align: center;
 }
 .adm-stepper-minus,
 .adm-stepper-plus {

package/es/components/stepper/stepper.js

@@ -79,7 +79,6 @@ export const Stepper = p => {
 
   return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix, {
-      [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-active`]: hasFocus
     })
   }, React.createElement(Button, {
@@ -87,6 +86,7 @@ export const Stepper = p => {
     onClick: handleMinus,
     disabled: minusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
   }, React.createElement(MinusOutline, null)), React.createElement("div", {
     className: `${classPrefix}-middle`
@@ -115,6 +115,7 @@ export const Stepper = p => {
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
+    shape: 'rectangular',
     color: 'primary'
   }, React.createElement(AddOutline, null))));
 };

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

@@ -14,7 +14,7 @@ export declare type Action = {
 export declare type SwipeActionProps = {
     rightActions?: Action[];
     leftActions?: Action[];
-    onAction?: (action: Action) => void;
+    onAction?: (action: Action, e: React.MouseEvent) => void;
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
@@ -22,7 +22,7 @@ export declare type SwipeActionProps = {
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
     leftActions?: Action[] | undefined;
-    onAction?: ((action: Action) => void) | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;

package/es/components/swipe-action/swipe-action.js

@@ -147,7 +147,7 @@ export const SwipeAction = forwardRef((p, ref) => {
         }
 
         (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action);
+        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, e);
       }
     }, action.text);
   }

package/es/components/swiper/swiper.js

@@ -10,6 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
+import { useUpdateEffect } from 'ahooks';
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -71,6 +72,11 @@ export const Swiper = forwardRef(staged((p, ref) => {
     }
 
     const [current, setCurrent] = useState(props.defaultIndex);
+    useUpdateEffect(() => {
+      var _a;
+
+      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
+    }, [current]);
     const [dragging, setDragging, draggingRef] = useRefState(false);
 
     function boundIndex(current) {
@@ -156,25 +162,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
     });
 
     function swipeTo(index, immediate = false) {
-      var _a, _b;
-
-      if (loop) {
-        const i = modulus(index, count);
-        setCurrent(i);
-        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
-        api.start({
-          position: index * 100,
-          immediate
-        });
-      } else {
-        const i = bound(index, 0, count - 1);
-        setCurrent(i);
-        (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, i);
-        api.start({
-          position: boundIndex(i) * 100,
-          immediate
-        });
-      }
+      const roundedIndex = Math.round(index);
+      const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
+      setCurrent(targetIndex);
+      api.start({
+        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+        immediate
+      });
     }
 
     function swipeNext() {

package/es/components/switch/switch.css

@@ -5,8 +5,8 @@
 }
 .adm-switch {
   --checked-color: var(--adm-color-primary);
-  --height: 30px;
-  --width: 50px;
+  --height: 31px;
+  --width: 51px;
   --border-width: 2px;
   display: inline-block;
   vertical-align: middle;
@@ -63,9 +63,14 @@
 .adm-switch-inner {
   position: relative;
   z-index: 1;
-  margin: 0 10px 0 calc(var(--height) - var(--border-width) + 5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 4px);
+  height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
+  font-size: 15px;
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);

package/es/components/tabs/tabs.css

@@ -2,7 +2,7 @@
   --title-font-size: 17px;
   --content-padding: 12px;
   --active-line-height: 2px;
-  --active-line-border-radius: 0;
+  --active-line-border-radius: var(--active-line-height);
   position: relative;
 }
 .adm-tabs-header {

package/es/components/tag/tag.css

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 2px);
-  padding: 3px 5px;
-  font-size: 12px;
+  padding: 2px 4px;
+  font-size: 11px;
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);
@@ -9,7 +9,7 @@
   display: inline-block;
   white-space: nowrap;
   border-radius: var(--border-radius);
-  border: 0.5px solid var(--border-color);
+  border: 1px solid var(--border-color);
   box-sizing: border-box;
 }
 .adm-tag-round {

package/es/components/text-area/text-area.css

@@ -1,4 +1,4 @@
-.adm-text-area-wrapper {
+.adm-text-area {
   --font-size: 17px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
@@ -7,7 +7,7 @@
   max-width: 100%;
   max-height: 100%;
 }
-.adm-text-area {
+.adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
   flex: auto;
@@ -27,29 +27,29 @@
   appearance: none;
   min-height: 1.5em;
 }
-.adm-text-area::placeholder {
+.adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-text-area:-webkit-autofill {
+.adm-text-area-element:-webkit-autofill {
   background-color: transparent;
 }
-.adm-text-area:disabled {
+.adm-text-area-element:disabled {
   color: var(--disabled-color);
   cursor: not-allowed;
   opacity: 1;
   -webkit-text-fill-color: var(--disabled-color);
 }
-.adm-text-area:read-only {
+.adm-text-area-element:read-only {
   cursor: default;
 }
-.adm-text-area:invalid {
+.adm-text-area-element:invalid {
   box-shadow: none;
 }
-.adm-text-area::-ms-clear {
+.adm-text-area-element::-ms-clear {
   display: none;
 }
-.adm-text-area[readonly] {
+.adm-text-area-element[readonly] {
   pointer-events: none;
 }
 .adm-text-area-count {