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

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

@@ -17,58 +17,58 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  font-size: 18px;
+  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) {
+.adm-passcode-input:not(.adm-passcode-input-seperated) {
   border-radius: var(--border-radius);
   overflow: hidden;
   border: 1px solid var(--border-color);
 }
-.adm-passcode-input:not(.seperated) .adm-passcode-input-cell:not(:last-child) {
+.adm-passcode-input:not(.adm-passcode-input-seperated) .adm-passcode-input-cell:not(:last-child) {
   border-right: 1px solid var(--border-color);
 }
-.adm-passcode-input:not(.seperated).focused {
+.adm-passcode-input:not(.adm-passcode-input-seperated).adm-passcode-input-focused {
   border-color: var(--adm-color-primary);
   box-shadow: 0 0 2px 0 var(--adm-color-primary);
   outline: none;
 }
-.adm-passcode-input:not(.seperated).error {
+.adm-passcode-input:not(.adm-passcode-input-seperated).adm-passcode-input-error {
   border-color: var(--adm-color-danger);
   box-shadow: 0 0 2px 0 var(--adm-color-danger);
   animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
 }
-.adm-passcode-input.seperated .adm-passcode-input-cell {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell {
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
 }
-.adm-passcode-input.seperated .adm-passcode-input-cell:not(:last-child) {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell:not(:last-child) {
   margin-right: var(--cell-gap);
 }
-.adm-passcode-input.seperated .adm-passcode-input-cell.focused {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell-focused {
   border-color: var(--adm-color-primary);
   box-shadow: 0 0 2px 0 var(--adm-color-primary);
 }
-.adm-passcode-input.seperated.focused {
+.adm-passcode-input-seperated.adm-passcode-input-focused {
   outline: none;
 }
-.adm-passcode-input.seperated.error {
+.adm-passcode-input.adm-passcode-input-seperated.adm-passcode-input-error {
   animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
 }
-.adm-passcode-input.seperated.error .adm-passcode-input-cell {
+.adm-passcode-input.adm-passcode-input-seperated.adm-passcode-input-error .adm-passcode-input-cell {
   border-color: var(--adm-color-danger);
   box-shadow: 0 0 2px 0 var(--adm-color-danger);
 }
-.adm-passcode-input-cell.dot::before {
+.adm-passcode-input-cell-dot::before {
   content: '';
   width: var(--dot-size);
   height: var(--dot-size);
   border-radius: 50%;
   background: var(--adm-color-text);
 }
-.adm-passcode-input-cell.caret::after {
+.adm-passcode-input-cell-caret::after {
   content: '';
   width: 2px;
   height: 1.1em;

package/cjs/components/passcode-input/passcode-input.d.ts

@@ -32,4 +32,8 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     onFill?: ((val: string) => void) | undefined;
-} & NativeProps<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PasscodeInputRef>>;

package/cjs/components/passcode-input/passcode-input.js

@@ -17,6 +17,8 @@ var _bound = require("../../utils/bound");
 
 var _usePropsValue = require("../../utils/use-props-value");
 
+var _configProvider = require("../config-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,6 +38,9 @@ const PasscodeInput = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p); // 防止 length 值不合法
 
   const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const [focused, setFocused] = (0, _react.useState)(false);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const rootRef = (0, _react.useRef)(null);
@@ -106,9 +111,9 @@ const PasscodeInput = (0, _react.forwardRef)((p, ref) => {
     for (let i = 0; i < cellLength; i++) {
       cells.push(_react.default.createElement("div", {
         className: (0, _classnames.default)(`${classPrefix}-cell`, {
-          caret: props.caret && caretIndex === i && focused,
-          focused: focusedIndex === i && focused,
-          dot: !props.plain && chars[i]
+          [`${classPrefix}-cell-caret`]: props.caret && caretIndex === i && focused,
+          [`${classPrefix}-cell-focused`]: focusedIndex === i && focused,
+          [`${classPrefix}-cell-dot`]: !props.plain && chars[i]
         }),
         key: i
       }, chars[i] && props.plain ? chars[i] : ''));
@@ -118,16 +123,18 @@ const PasscodeInput = (0, _react.forwardRef)((p, ref) => {
   };
 
   const cls = (0, _classnames.default)(classPrefix, {
-    focused: focused,
-    error: props.error,
-    seperated: props.seperated
+    [`${classPrefix}-focused`]: focused,
+    [`${classPrefix}-error`]: props.error,
+    [`${classPrefix}-seperated`]: props.seperated
   });
   return _react.default.createElement(_react.default.Fragment, null, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: rootRef,
     tabIndex: 0,
     className: cls,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    role: 'button',
+    "aria-label": locale.PasscodeInput.name
   }, _react.default.createElement("div", {
     className: `${classPrefix}-cell-container`
   }, renderCells()), _react.default.createElement("input", {
@@ -139,7 +146,8 @@ const PasscodeInput = (0, _react.forwardRef)((p, ref) => {
     inputMode: 'numeric',
     onChange: e => {
       setValue(e.target.value.slice(0, props.length));
-    }
+    },
+    "aria-hidden": true
   }))), props.keyboard && _react.default.cloneElement(props.keyboard, {
     visible: focused,
     onInput: v => {

package/cjs/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;
@@ -20,13 +22,17 @@ declare const _default: import("react").NamedExoticComponent<{
     mouseWheel?: boolean | undefined;
     popupClassName?: string | undefined;
     popupStyle?: import("react").CSSProperties | undefined;
-    forceRender?: boolean | undefined;
-    destroyOnClose?: boolean | undefined;
-} & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & import("../../utils/native-props").NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & import("react").RefAttributes<import("./picker").PickerActions>> & {
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
     readonly type: import("react").ForwardRefExoticComponent<{
         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;
@@ -41,9 +47,11 @@ declare const _default: import("react").NamedExoticComponent<{
         mouseWheel?: boolean | undefined;
         popupClassName?: string | undefined;
         popupStyle?: import("react").CSSProperties | undefined;
-        forceRender?: boolean | undefined;
-        destroyOnClose?: boolean | undefined;
-    } & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & import("../../utils/native-props").NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & import("react").RefAttributes<import("./picker").PickerActions>>;
+    } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>>;
 } & {
     prompt: typeof prompt;
 };

package/cjs/components/picker/picker.css

@@ -1,7 +1,7 @@
 .adm-picker {
-  --header-button-font-size: 15px;
-  --title-font-size: 15px;
-  --item-font-size: 16px;
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --item-font-size: var(--adm-font-size-8);
   --item-height: 34px;
   width: 100%;
   height: 300px;
@@ -17,8 +17,8 @@
   --item-height: var(---item-height);
 }
 .adm-picker-header {
-  flex: none;
-  border-bottom: solid 1px var(--adm-border-color);
+  flex-shrink: 0;
+  border-bottom: solid 1px var(--adm-color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -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);
@@ -37,8 +42,7 @@
   flex: 1;
 }
 .adm-picker-body {
-  flex: auto;
-  height: 100%;
+  flex: 1;
   width: 100%;
 }
 .adm-picker-body > .adm-picker-view {

package/cjs/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;
@@ -26,13 +28,13 @@ export declare type PickerProps = {
     mouseWheel?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-    forceRender?: boolean;
-    destroyOnClose?: boolean;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     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;
@@ -47,6 +49,8 @@ export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticCom
     mouseWheel?: boolean | undefined;
     popupClassName?: string | undefined;
     popupStyle?: React.CSSProperties | undefined;
-    forceRender?: boolean | undefined;
-    destroyOnClose?: boolean | undefined;
-} & Pick<PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & React.RefAttributes<PickerActions>>>;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>>;

package/cjs/components/picker/picker.js

@@ -29,8 +29,6 @@ var _safeArea = _interopRequireDefault(require("../safe-area"));
 
 var _pickerUtils = require("./picker-utils");
 
-var _shouldRender = require("../../utils/should-render");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,7 +39,9 @@ const classPrefix = `adm-picker`;
 const defaultProps = {
   defaultValue: [],
   closeOnMaskClick: true,
-  renderLabel: _pickerUtils.defaultRenderLabel
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false
 };
 const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
   var _a;
@@ -105,12 +105,12 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
-  const shouldRender = (0, _shouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
   const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement("a", {
+    role: 'button',
     className: `${classPrefix}-header-button`,
     onClick: () => {
       var _a;
@@ -121,14 +121,19 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
   }, props.cancelText), _react.default.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), _react.default.createElement("a", {
-    className: `${classPrefix}-header-button`,
+    role: 'button',
+    className: (0, _classnames.default)(`${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.default.createElement("div", {
     className: `${classPrefix}-body`
   }, _react.default.createElement(_pickerView.default, {
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     columns: props.columns,
     renderLabel: props.renderLabel,
     value: innerValue,
@@ -149,13 +154,13 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
       setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
-    forceRender: true,
+    forceRender: props.forceRender,
     stopPropagation: props.stopPropagation
-  }, shouldRender && pickerElement, _react.default.createElement(_safeArea.default, {
+  }, pickerElement, _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   }));
 

package/cjs/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/cjs/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/cjs/components/picker-view/picker-view.js

@@ -19,6 +19,10 @@ var _ahooks = require("ahooks");
 
 var _pickerUtils = require("../picker/picker-utils");
 
+var _spinLoading = _interopRequireDefault(require("../spin-loading"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,7 +31,10 @@ const classPrefix = `adm-picker-view`;
 const defaultProps = {
   defaultValue: [],
   renderLabel: _pickerUtils.defaultRenderLabel,
-  mouseWheel: false
+  mouseWheel: false,
+  loadingContent: _react.default.createElement("div", {
+    className: `${classPrefix}-loading-content`
+  }, _react.default.createElement(_spinLoading.default, null))
 };
 const PickerView = (0, _react.memo)(p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
@@ -71,7 +78,7 @@ const PickerView = (0, _react.memo)(p => {
   }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: `${classPrefix}`
-  }, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
+  }, props.loading ? props.loadingContent : _react.default.createElement(_react.default.Fragment, null, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
     key: index,
     index: index,
     column: column,
@@ -87,7 +94,7 @@ const PickerView = (0, _react.memo)(p => {
     className: `${classPrefix}-mask-middle`
   }), _react.default.createElement("div", {
     className: `${classPrefix}-mask-bottom`
-  }))));
+  })))));
 });
 exports.PickerView = PickerView;
 PickerView.displayName = 'PickerView';

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

@@ -62,7 +62,7 @@ const Wheel = (0, _react.memo)(props => {
   });
   (0, _ahooks.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;
@@ -154,27 +154,29 @@ const Wheel = (0, _react.memo)(props => {
       className: 'adm-picker-view-column-accessible-current',
       role: 'button',
       "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
-    }, "-"), _react.default.createElement("div", null, previous && _react.default.createElement("div", {
+    }, "-"), _react.default.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
       onClick: () => {
+        if (!previous) return;
         scrollSelect(previousIndex);
       },
-      role: 'button',
-      "aria-label": `选择上一项：${previous.label}`
-    }, "-")), _react.default.createElement("div", null, next && _react.default.createElement("div", {
+      role: previous ? 'button' : 'text',
+      "aria-label": !previous ? '没有上一项' : `选择上一项：${previous.label}`
+    }, "-"), _react.default.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.default.createElement("div", {
-    ref: rootRef,
     className: `${classPrefix}-column`
   }, _react.default.createElement(_web.animated.div, {
+    ref: rootRef,
     style: {
       translateY: y
     },

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/popover/popover.js

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

package/cjs/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;
+}