antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/es/components/picker-view/picker-view.css

@@ -1,24 +1,26 @@
 .adm-picker-view {
   --height: 240px;
   --item-height: 34px;
-  --item-font-size: 16px;
+  --item-font-size: var(--adm-font-size-8);
   height: var(--height);
   width: 100%;
   display: flex;
   position: relative;
   overflow: hidden;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 .adm-picker-view-column {
   height: 100%;
   flex: 1;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   touch-action: none;
   position: relative;
   z-index: 0;
 }
 .adm-picker-view-column-wheel {
   width: 100%;
+  cursor: -webkit-grab;
   cursor: grab;
   position: absolute;
   top: calc(50% - var(--item-height) / 2);
@@ -62,6 +64,7 @@
   flex-direction: column;
   position: relative;
   z-index: 0;
+  padding-bottom: 1px;
 }
 .adm-picker-view-column-accessible > * {
   flex: 1;
@@ -95,12 +98,23 @@
   height: var(--item-height);
   box-sizing: border-box;
   flex: none;
-  border-top: solid 1px var(--adm-border-color);
-  border-bottom: solid 1px var(--adm-border-color);
+  border-top: solid 1px var(--adm-color-border);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-picker-view-mask-top {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
 }
 .adm-picker-view-mask-bottom {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+.adm-picker-view-loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/es/components/picker-view/picker-view.d.ts

@@ -17,6 +17,8 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     mouseWheel?: boolean;
+    loading?: boolean;
+    loadingContent?: ReactNode;
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
 } & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/es/components/picker-view/picker-view.js

@@ -5,11 +5,15 @@ import { useColumnsExtend } from './columns-extend';
 import { withNativeProps } from '../../utils/native-props';
 import { useDebounceEffect } from 'ahooks';
 import { defaultRenderLabel } from '../picker/picker-utils';
+import SpinLoading from '../spin-loading';
 const classPrefix = `adm-picker-view`;
 const defaultProps = {
   defaultValue: [],
   renderLabel: defaultRenderLabel,
-  mouseWheel: false
+  mouseWheel: false,
+  loadingContent: React.createElement("div", {
+    className: `${classPrefix}-loading-content`
+  }, React.createElement(SpinLoading, null))
 };
 export const PickerView = memo(p => {
   const props = mergeProps(defaultProps, p);
@@ -53,7 +57,7 @@ export const PickerView = memo(p => {
   }, []);
   return withNativeProps(props, React.createElement("div", {
     className: `${classPrefix}`
-  }, columns.map((column, index) => React.createElement(Wheel, {
+  }, props.loading ? props.loadingContent : React.createElement(React.Fragment, null, columns.map((column, index) => React.createElement(Wheel, {
     key: index,
     index: index,
     column: column,
@@ -69,6 +73,6 @@ export const PickerView = memo(p => {
     className: `${classPrefix}-mask-middle`
   }), React.createElement("div", {
     className: `${classPrefix}-mask-bottom`
-  }))));
+  })))));
 });
 PickerView.displayName = 'PickerView';

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

@@ -40,7 +40,7 @@ export const Wheel = memo(props => {
   });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
-    if (!value) return;
+    if (value === null) return;
     const targetIndex = column.findIndex(item => item.value === value);
     if (targetIndex < 0) return;
     const finalPosition = targetIndex * -itemHeight.current;
@@ -132,27 +132,29 @@ export const Wheel = memo(props => {
       className: 'adm-picker-view-column-accessible-current',
       role: 'button',
       "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
-    }, "-"), React.createElement("div", null, previous && React.createElement("div", {
+    }, "-"), React.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
       onClick: () => {
+        if (!previous) return;
         scrollSelect(previousIndex);
       },
-      role: 'button',
-      "aria-label": `选择上一项：${previous.label}`
-    }, "-")), React.createElement("div", null, next && React.createElement("div", {
+      role: previous ? 'button' : 'text',
+      "aria-label": !previous ? '没有上一项' : `选择上一项：${previous.label}`
+    }, "-"), React.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
       onClick: () => {
+        if (!next) return;
         scrollSelect(nextIndex);
       },
-      role: 'button',
-      "aria-label": `选择下一项：${next.label}`
-    }, "-")));
+      role: next ? 'button' : 'text',
+      "aria-label": !next ? '没有下一项' : `选择下一项：${next.label}`
+    }, "-"));
   }
 
   return React.createElement("div", {
-    ref: rootRef,
     className: `${classPrefix}-column`
   }, React.createElement(animated.div, {
+    ref: rootRef,
     style: {
       translateY: y
     },

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

@@ -17,7 +17,11 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     placement?: DeprecatedPlacement | Placement | undefined;
     stopPropagation?: "click"[] | undefined;
     content: import("react").ReactNode;
-} & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./popover").PopoverRef>> & {
     Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
         actions: import("./popover-menu").Action[];
         onAction?: ((item: import("./popover-menu").Action) => void) | undefined;

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

@@ -1,5 +1,5 @@
 .adm-popover-menu {
-  --border-color: var(--adm-border-color);
+  --border-color: #eeeeee;
 }
 .adm-popover-menu.adm-popover {
   --content-padding: 0;

package/es/components/popover/popover-menu.patch.css

@@ -0,0 +1,24 @@
+.adm-popover-menu.adm-popover .adm-popover-inner-content {
+  padding: 0 !important;
+}
+.adm-popover-menu-item-text {
+  border-top: solid 1px #eeeeee;
+}
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: #eeeeee;
+}
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  border-bottom: solid 1px #eeeeee;
+}
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+  border-color: #333333;
+}
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: #333333;
+}
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  border-color: #333333;
+}
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+  background-color: rgba(0, 0, 0, 0.9);
+}

package/es/components/popover/popover.css

@@ -3,6 +3,7 @@
   --background: #ffffff;
   --arrow-size: 8px;
   --content-padding: 8px 12px;
+  color: #333333;
   position: absolute;
   top: 0;
   left: 0;
@@ -10,13 +11,14 @@
   white-space: normal;
   text-align: left;
   cursor: auto;
-  user-select: text;
+  -webkit-user-select: text;
+          user-select: text;
   animation: none;
 }
 .adm-popover.adm-popover-dark {
   --background: rgba(0, 0, 0, 0.75);
   --adm-color-text: #ffffff;
-  color: white;
+  color: #ffffff;
 }
 .adm-popover.adm-popover-dark .adm-popover-inner {
   box-shadow: none;
@@ -34,7 +36,9 @@
   background-clip: padding-box;
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
+  width: -webkit-max-content;
+  width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);
   overflow-y: hidden;

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

@@ -33,4 +33,8 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     placement?: DeprecatedPlacement | Placement | undefined;
     stopPropagation?: "click"[] | undefined;
     content: React.ReactNode;
-} & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PopoverRef>>;

package/es/components/popover/popover.js

@@ -132,7 +132,9 @@ export const Popover = forwardRef((p, ref) => {
   useEffect(() => {
     const floatingElement = floatingRef.current;
     if (!targetElement || !floatingElement) return;
-    return autoUpdate(targetElement, floatingElement, update);
+    return autoUpdate(targetElement, floatingElement, update, {
+      elementResize: typeof ResizeObserver !== 'undefined'
+    });
   }, [targetElement]);
   useClickAway(() => {
     if (!props.trigger) return;

package/es/components/popover/popover.patch.css

@@ -0,0 +1,19 @@
+.adm-popover {
+  z-index: 1030;
+}
+.adm-popover.adm-popover-dark {
+  color: #ffffff;
+}
+.adm-popover.adm-popover-dark .adm-popover-inner {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+.adm-popover-inner {
+  background-color: #ffffff;
+  font-size: 15px;
+}
+.adm-popover-inner-content {
+  padding: 8px 12px;
+}
+.adm-popover-arrow {
+  display: none !important;
+}

package/es/components/popup/popup-base-props.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+export declare type PopupBaseProps = {
+    afterClose?: () => void;
+    afterShow?: () => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    closeOnMaskClick?: boolean;
+    destroyOnClose?: boolean;
+    disableBodyScroll?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
+    maskClassName?: string;
+    maskStyle?: MaskProps['style'];
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClose?: () => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    showCloseButton?: boolean;
+    stopPropagation?: PropagationEvent[];
+    visible?: boolean;
+};
+export declare const defaultPopupBaseProps: {
+    closeOnMaskClick: boolean;
+    destroyOnClose: boolean;
+    disableBodyScroll: boolean;
+    forceRender: boolean;
+    getContainer: () => HTMLElement;
+    mask: boolean;
+    showCloseButton: boolean;
+    stopPropagation: string[];
+    visible: boolean;
+};

package/es/components/popup/popup-base-props.js

@@ -0,0 +1,11 @@
+export const defaultPopupBaseProps = {
+  closeOnMaskClick: false,
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: () => document.body,
+  mask: true,
+  showCloseButton: false,
+  stopPropagation: ['click'],
+  visible: false
+};

package/es/components/popup/popup.css

@@ -5,26 +5,52 @@
 }
 .adm-popup-body {
   position: fixed;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   z-index: calc(var(--z-index) + 10);
 }
+.adm-popup-body .adm-popup-close-icon {
+  position: absolute;
+  z-index: 100;
+}
 .adm-popup-body-position-bottom {
   width: 100%;
   bottom: 0;
   left: 0;
 }
+.adm-popup-body-position-bottom .adm-popup-close-icon {
+  right: 8px;
+  top: 8px;
+}
 .adm-popup-body-position-top {
   width: 100%;
   top: 0;
   left: 0;
 }
+.adm-popup-body-position-top .adm-popup-close-icon {
+  right: 8px;
+  bottom: 8px;
+}
 .adm-popup-body-position-left {
   height: 100%;
   top: 0;
   left: 0;
 }
+.adm-popup-body-position-left .adm-popup-close-icon {
+  right: 8px;
+  top: 8px;
+}
 .adm-popup-body-position-right {
   height: 100%;
   top: 0;
   right: 0;
 }
+.adm-popup-body-position-right .adm-popup-close-icon {
+  left: 8px;
+  top: 8px;
+}
+.adm-popup-close-icon {
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  color: var(--adm-color-weak);
+}

package/es/components/popup/popup.d.ts

@@ -1,23 +1,7 @@
-import React, { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupProps = {
-    visible?: boolean;
-    mask?: boolean;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    afterShow?: () => void;
-    afterClose?: () => void;
+import { PopupBaseProps } from './popup-base-props';
+export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right';
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    maskClassName?: string;
-    maskStyle?: React.CSSProperties;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    stopPropagation?: PropagationEvent[];
-    children?: React.ReactNode;
-} & NativeProps<'--z-index'>;
+}> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

package/es/components/popup/popup.js

@@ -1,29 +1,32 @@
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { useUnmountedRef } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Mask from '../mask';
 import { useLockScroll } from '../../utils/use-lock-scroll';
 import { renderToContainer } from '../../utils/render-to-container';
 import { useSpring, animated } from '@react-spring/web';
-import { useShouldRender } from '../../utils/should-render';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { ShouldRender } from '../../utils/should-render';
+import { CloseOutline } from 'antd-mobile-icons';
+import { defaultPopupBaseProps } from './popup-base-props';
+import { useInnerVisible } from '../../utils/use-inner-visible';
 const classPrefix = `adm-popup`;
-const defaultProps = {
-  position: 'bottom',
-  visible: false,
-  getContainer: () => document.body,
-  mask: true,
-  stopPropagation: ['click']
-};
+const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  position: 'bottom'
+});
 export const Popup = p => {
   const props = mergeProps(defaultProps, p);
   const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
-  const ref = useRef(null);
   const [active, setActive] = useState(props.visible);
-  useLockScroll(ref, active);
-  const shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active);
   const unmountedRef = useUnmountedRef();
   const {
     percent
@@ -35,9 +38,6 @@ export const Popup = p => {
       tension: 300,
       friction: 30
     },
-    onStart: () => {
-      setActive(true);
-    },
     onRest: () => {
       var _a, _b;
 
@@ -51,6 +51,7 @@ export const Popup = p => {
       }
     }
   });
+  const maskVisible = useInnerVisible(active && props.visible);
   const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     onClick: props.onClick,
@@ -58,8 +59,18 @@ export const Popup = p => {
       display: active ? undefined : 'none'
     }
   }, props.mask && React.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.onMaskClick,
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: e => {
+      var _a, _b;
+
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     className: props.maskClassName,
     style: props.maskStyle,
     disableBodyScroll: false,
@@ -88,6 +99,17 @@ export const Popup = p => {
       })
     }),
     ref: ref
-  }, shouldRender && props.children))));
-  return renderToContainer(props.getContainer, node);
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames(`${classPrefix}-close-icon`, 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseOutline, null)), props.children))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
 };

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

@@ -1,17 +1,29 @@
 .adm-progress-bar {
-  --track-width: var(--adm-progress-bar-track-width, 3px);
+  --track-width: var(--adm-progress-bar-track-width, 8px);
   --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
+  --text-width: var(--adm-progress-bar-text-width, 40px);
+  display: flex;
+  align-items: center;
 }
 .adm-progress-bar-trail {
+  flex: auto;
   background: var(--track-color);
   overflow: hidden;
   height: var(--track-width);
-  border-radius: var(--track-width);
 }
 .adm-progress-bar-fill {
   transition: width 0.3s;
   background: var(--fill-color);
-  height: 100%;
+  height: var(--track-width);
+}
+.adm-progress-bar-text {
+  flex: none;
+  width: calc(var(--text-width) + 8px);
+  padding-left: 8px;
+  color: #999999;
+}
+.adm-progress-bar-rounded .adm-progress-bar-trail,
+.adm-progress-bar-rounded .adm-progress-bar-fill {
   border-radius: var(--track-width);
 }

package/es/components/progress-bar/progress-bar.d.ts

@@ -1,6 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
+    rounded?: boolean;
+    text?: boolean | ReactNode | ((percent: number) => ReactNode);
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color' | '--text-width'>;
 export declare const ProgressBar: FC<ProgressBarProps>;

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

@@ -1,20 +1,40 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import classNames from 'classnames';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
 const classPrefix = `adm-progress-bar`;
+const defaultProps = {
+  percent: 0,
+  rounded: true,
+  text: false
+};
 export const ProgressBar = p => {
-  const props = mergeProps({
-    percent: 0
-  }, p);
+  const props = mergeProps(defaultProps, p);
   const fillStyle = {
     width: `${props.percent}%`
   };
+
+  const textElement = function () {
+    if (props.text === true) {
+      return `${props.percent}%`;
+    }
+
+    if (typeof props.text === 'function') {
+      return props.text(props.percent);
+    }
+
+    return props.text;
+  }();
+
   return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
+    className: classNames(classPrefix, props.rounded && `${classPrefix}-rounded`)
   }, React.createElement("div", {
     className: `${classPrefix}-trail`
   }, React.createElement("div", {
     className: `${classPrefix}-fill`,
     style: fillStyle
-  }))));
+  })), isNodeWithContent(textElement) && React.createElement("div", {
+    className: `${classPrefix}-text`
+  }, textElement)));
 };

package/es/components/radio/radio.css

@@ -1,6 +1,6 @@
 .adm-radio {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,7 +41,7 @@
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/es/components/radio/radio.js

@@ -38,16 +38,16 @@ export const Radio = p => {
 
     checked = groupContext.value.includes(value);
 
-    setChecked = checked => {
+    setChecked = innerChecked => {
       var _a;
 
-      if (checked) {
+      if (innerChecked) {
         groupContext.check(value);
       } else {
         groupContext.uncheck(value);
       }
 
-      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
     };
 
     disabled = disabled || groupContext.disabled;

package/es/components/rate/rate.css

@@ -1,14 +1,15 @@
 .adm-rate {
   --star-size: 24px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-light);
+  --inactive-color: var(--adm-color-border);
   display: inline-flex;
+  touch-action: pan-y;
 }
 .adm-rate-box {
   position: relative;
 }
 .adm-rate-star {
-  padding: calc(var(--star-size) / 8);
+  padding: 0.125em;
   line-height: var(--star-size);
   font-size: var(--star-size);
   color: var(--inactive-color);