antd-mobile 5.16.1 → 5.17.2

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

@@ -9,6 +9,7 @@ import { useCascaderValueExtend } from './use-cascader-value-extend';
 import { useConfig } from '../config-provider';
 import { optionSkeleton } from './option-skeleton';
 import Skeleton from '../skeleton';
+import { useUpdateEffect } from 'ahooks';
 const classPrefix = `adm-cascader-view`;
 const defaultProps = {
   defaultValue: []
@@ -28,6 +29,11 @@ export const CascaderView = p => {
     }
   }));
   const [tabActiveIndex, setTabActiveIndex] = useState(0);
+  useUpdateEffect(() => {
+    var _a;
+
+    (_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, tabActiveIndex);
+  }, [tabActiveIndex]);
   const generateValueExtend = useCascaderValueExtend(props.options);
   const levels = useMemo(() => {
     const ret = [];
@@ -84,11 +90,8 @@ export const CascaderView = p => {
   }, React.createElement(Tabs, {
     activeKey: tabActiveIndex.toString(),
     onChange: key => {
-      var _a;
-
       const activeIndex = parseInt(key);
       setTabActiveIndex(activeIndex);
-      (_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, activeIndex);
     },
     stretch: false,
     className: `${classPrefix}-tabs`

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

@@ -3,7 +3,7 @@ import type { PickerProps, PickerRef, PickerActions } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
 export declare type DatePickerRef = PickerRef;
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'loading' | 'loadingContent' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;
@@ -15,7 +15,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
 } & NativeProps;
-export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "confirmText"> & {
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;

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

@@ -33,7 +33,7 @@ export const DatePicker = forwardRef((p, ref) => {
     return convertDateToStringArray(date, props.precision);
   }, [value, props.precision, props.min, props.max]);
   const onConfirm = useCallback(val => {
-    setValue(convertStringArrayToDate(val, props.precision));
+    setValue(convertStringArrayToDate(val, props.precision), true);
   }, [setValue, props.precision]);
   const onSelect = useMemoizedFn(val => {
     var _a;
@@ -55,6 +55,8 @@ export const DatePicker = forwardRef((p, ref) => {
     onConfirm: onConfirm,
     onSelect: onSelect,
     getContainer: props.getContainer,
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,

package/es/components/date-picker/index.d.ts

@@ -3,7 +3,7 @@ import './date-picker.less';
 import { prompt } from './prompt';
 export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "confirmText"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
-export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel'> & {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel' | 'loading' | 'loadingContent'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;

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

@@ -32,6 +32,8 @@ export const DatePickerView = p => {
   }, [props.onChange, props.precision]);
   return withNativeProps(props, React.createElement(PickerView, {
     columns: selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel, props.filter),
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     value: pickerValue,
     mouseWheel: props.mouseWheel,
     onChange: onChange

package/es/components/dialog/dialog.css

@@ -52,7 +52,8 @@
   height: 12px;
 }
 .adm-dialog-footer {
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-dialog-footer .adm-dialog-action-row {
   display: flex;

package/es/components/dropdown/dropdown.css

@@ -1,5 +1,5 @@
 .adm-dropdown {
-  background-color: white;
+  background-color: var(--adm-color-background);
 }
 .adm-dropdown .adm-dropdown-nav {
   display: flex;
@@ -50,7 +50,7 @@
 }
 .adm-dropdown-item-content {
   width: 100%;
-  background: white;
+  background: var(--adm-color-background);
 }
 .adm-dropdown-item-content-hidden {
   display: none;

package/es/components/empty/empty.css

@@ -11,6 +11,7 @@
 }
 .adm-empty-image-container .adm-empty-image {
   width: 64px;
+  height: intrinsic;
 }
 .adm-empty-description {
   margin-top: 8px;

package/es/components/floating-bubble/floating-bubble.css

@@ -39,7 +39,8 @@
   overflow: hidden;
   cursor: pointer;
   transition: opacity ease 0.15s;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   touch-action: none;
   background: var(--background);
   color: var(--adm-color-white);

package/es/components/floating-panel/floating-panel.css

@@ -2,9 +2,6 @@
   --border-radius: 8px;
   --header-height: 28px;
   --z-index: var(--adm-floating-panel-z-index, 900);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  background: var(--adm-color-white);
   position: fixed;
   z-index: var(--z-index);
   bottom: 0;
@@ -30,7 +27,7 @@
   bottom: -100vh;
   height: 100vh;
   width: 100vw;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 .adm-floating-panel .adm-floating-panel-header {
   flex: none;
@@ -38,8 +35,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: -webkit-grab;
   cursor: grab;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: var(--adm-color-background);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
   height: 3px;
@@ -50,4 +52,5 @@
 .adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
+  background: var(--adm-color-background);
 }

package/es/components/form/form-item.css

@@ -15,7 +15,8 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-form-item-label .adm-form-item-required-text {
   margin-left: 4px;

package/es/components/form/index.css

@@ -37,7 +37,8 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-form-item-label .adm-form-item-required-text {
   margin-left: 4px;

package/es/components/grid/grid.css

@@ -4,7 +4,8 @@
   --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 10px;
-  column-gap: var(--gap-horizontal);
+  -webkit-column-gap: var(--gap-horizontal);
+          column-gap: var(--gap-horizontal);
   row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
   align-items: stretch;

package/es/components/image/image.d.ts

@@ -13,5 +13,6 @@ export declare type ImageProps = {
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;

package/es/components/image/image.js

@@ -87,7 +87,8 @@ export const Image = staged(p => {
   return withNativeProps(props, React.createElement("div", {
     ref: ref,
     className: classPrefix,
-    style: style
+    style: style,
+    onClick: props.onContainerClick
   }, props.lazy && !initialized && React.createElement(LazyDetector, {
     onActive: () => {
       setInitialized(true);

package/es/components/image/test/image.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/image/test/image.test.js

@@ -0,0 +1,24 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { fireEvent, render, testA11y } from 'testing';
+import Image from '../index';
+const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
+describe('image', () => {
+  test('a11y', () => __awaiter(void 0, void 0, void 0, function* () {
+    yield testA11y(React.createElement(Image, {
+      src: demoSrc
+    }));
+  }));
+  test('onContainerClick can work', () => {
+    const onContainerClick = jest.fn();
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      onContainerClick: onContainerClick,
+      "data-testid": 'img'
+    }));
+    fireEvent.click(getByTestId('img'));
+    expect(onContainerClick).toBeCalledTimes(1);
+  });
+});

package/es/components/image-viewer/image-viewer.css

@@ -2,7 +2,8 @@
   width: 100vw;
   height: 100vh;
   touch-action: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-image-viewer-footer {
   position: absolute;
@@ -14,6 +15,7 @@
   height: 100%;
   position: relative;
   z-index: 1;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -37,6 +39,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }

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

@@ -33,7 +33,8 @@
   overflow: visible;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-4);
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   touch-action: none;
 }
 .adm-index-bar-sidebar-bubble {
@@ -77,6 +78,7 @@
   width: 100%;
 }
 .adm-index-bar-sticky .adm-index-bar-anchor-title {
+  position: -webkit-sticky;
   position: sticky;
   z-index: 900;
   top: var(--sticky-offset-top);

package/es/components/input/input.css

@@ -32,10 +32,15 @@
   background: transparent;
   border: 0;
   outline: none;
-  appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
   min-height: 1.5em;
   text-align: var(--text-align);
 }
+.adm-input-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
 .adm-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;

package/es/components/jumbo-tabs/jumbo-tabs.css

@@ -30,6 +30,7 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
   padding: 12px 0;
@@ -42,6 +43,7 @@
   padding: 0 4px;
 }
 .adm-jumbo-tabs-tab-description {
+  width: -webkit-min-content;
   width: min-content;
   padding: 0 8px;
   border-radius: 10px;

package/es/components/modal/modal.css

@@ -49,7 +49,8 @@
   color: var(--adm-color-text);
 }
 .adm-modal-footer {
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   padding: 8px 12px 12px;
 }
 .adm-modal-footer-empty {

package/es/components/number-keyboard/number-keyboard.css

@@ -8,7 +8,8 @@
 }
 .adm-number-keyboard-popup.adm-popup {
   width: 100%;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   z-index: 1050;
 }
 .adm-number-keyboard-popup.adm-popup .adm-popup-body {
@@ -26,7 +27,7 @@
   align-items: center;
   padding: 0 12px;
   color: var(--adm-color-weak);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
 }
 .adm-number-keyboard-header-close-button {
   padding: 0 12px;
@@ -93,7 +94,7 @@
 }
 .adm-number-keyboard-key.extra-key,
 .adm-number-keyboard-key.number-key {
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
 }
 .adm-number-keyboard-key.extra-key:active::before,
 .adm-number-keyboard-key.number-key:active::before {

package/es/components/passcode-input/passcode-input.css

@@ -20,7 +20,7 @@
   font-size: var(--adm-font-size-10);
   width: var(--cell-size);
   height: var(--cell-size);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 .adm-passcode-input:not(.seperated) {
   border-radius: var(--border-radius);

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

@@ -6,6 +6,8 @@ declare const _default: import("react").NamedExoticComponent<{
     columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
     value?: import("../picker-view").PickerValue[] | undefined;
     defaultValue?: import("../picker-view").PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: import("react").ReactNode;
     onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
     onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
     onCancel?: (() => void) | undefined;
@@ -29,6 +31,8 @@ declare const _default: import("react").NamedExoticComponent<{
         columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
         value?: import("../picker-view").PickerValue[] | undefined;
         defaultValue?: import("../picker-view").PickerValue[] | undefined;
+        loading?: boolean | undefined;
+        loadingContent?: import("react").ReactNode;
         onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
         onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
         onCancel?: (() => void) | undefined;

package/es/components/picker/picker.css

@@ -29,6 +29,11 @@
   display: inline-block;
   padding: 8px 8px;
 }
+.adm-picker-header-button-disabled,
+.adm-picker-header-button-disabled:active {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
 .adm-picker-header-title {
   padding: 4px 4px;
   font-size: var(--title-font-size);

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

@@ -12,6 +12,8 @@ export declare type PickerProps = {
     columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
     value?: PickerValue[];
     defaultValue?: PickerValue[];
+    loading?: boolean;
+    loadingContent?: ReactNode;
     onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onCancel?: () => void;
@@ -31,6 +33,8 @@ export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticCom
     columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
     value?: PickerValue[] | undefined;
     defaultValue?: PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: ReactNode;
     onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
     onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
     onCancel?: (() => void) | undefined;

package/es/components/picker/picker.js

@@ -97,14 +97,18 @@ export const Picker = memo(forwardRef((p, ref) => {
     className: `${classPrefix}-header-title`
   }, props.title), React.createElement("a", {
     role: 'button',
-    className: `${classPrefix}-header-button`,
+    className: classNames(`${classPrefix}-header-button`, props.loading && `${classPrefix}-header-button-disabled`),
     onClick: () => {
-      setValue(innerValue);
+      if (props.loading) return;
+      setValue(innerValue, true);
       setVisible(false);
-    }
+    },
+    "aria-disabled": props.loading
   }, props.confirmText)), React.createElement("div", {
     className: `${classPrefix}-body`
   }, React.createElement(PickerView, {
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     columns: props.columns,
     renderLabel: props.renderLabel,
     value: innerValue,

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

@@ -7,18 +7,20 @@
   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);
@@ -100,8 +102,19 @@
   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;

package/es/components/popover/popover.css

@@ -11,7 +11,8 @@
   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 {
@@ -36,6 +37,7 @@
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
   font-size: var(--adm-font-size-7);
+  width: -webkit-max-content;
   width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);

package/es/components/result/result.css

@@ -1,6 +1,6 @@
 .adm-result {
   padding: 32px 12px;
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
 }
 .adm-result-icon {
   box-sizing: border-box;

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

@@ -53,7 +53,8 @@
   position: absolute;
   z-index: 100;
   right: 0;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 .adm-side-bar-item-corner-top {

package/es/components/slider/slider.css

@@ -2,7 +2,8 @@
   --fill-color: var(--adm-color-primary);
   padding: 5px 14px;
   list-style: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-track-container {
   padding: 8px 0;
@@ -57,9 +58,11 @@
   width: 12px;
   height: 12px;
   margin: 8px;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-thumb-container {
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
   position: absolute;
@@ -85,7 +88,8 @@
   color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   transform: translateX(-50%);
 }
 .adm-slider-disabled {

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

@@ -1,6 +1,7 @@
 .adm-swipe-action {
   --background: var(--adm-color-background);
   background: var(--background);
+  cursor: -webkit-grab;
   cursor: grab;
   overflow: hidden;
   touch-action: pan-y;