antd-mobile 5.10.4 → 5.11.2

package/cjs/global/index.js

@@ -5,5 +5,7 @@ require("./global.css");
 var _canUseDom = require("../utils/can-use-dom");
 
 if (_canUseDom.canUseDom) {
+  // Make sure the `:active` CSS selector of `button` and `a` take effect
+  // See: https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
   document.addEventListener('touchstart', () => {}, true);
 }

package/cjs/locales/base.d.ts

@@ -86,6 +86,7 @@ export declare const base: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/base.js

@@ -92,7 +92,8 @@ const base = {
     }
   },
   ImageUploader: {
-    uploading: 'Uploading...'
+    uploading: 'Uploading...',
+    upload: 'Upload'
   },
   InfiniteScroll: {
     noMore: 'No more'

package/cjs/locales/en-US.d.ts

@@ -86,6 +86,7 @@ declare const enUS: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/es-ES.d.ts

@@ -86,6 +86,7 @@ declare const esES: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/fa-IR.d.ts

@@ -86,6 +86,7 @@ declare const faIR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/ko-KR.d.ts

@@ -86,6 +86,7 @@ declare const koKR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/zh-CN.d.ts

@@ -86,6 +86,7 @@ declare const zhCN: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/zh-CN.js

@@ -97,7 +97,8 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
     }
   },
   ImageUploader: {
-    uploading: '上传中...'
+    uploading: '上传中...',
+    upload: '上传'
   },
   InfiniteScroll: {
     noMore: '没有更多了'

package/cjs/locales/zh-HK.d.ts

@@ -86,6 +86,7 @@ declare const zhHK: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/locales/zh-TW.d.ts

@@ -86,6 +86,7 @@ declare const zhTW: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/cjs/utils/is-node-with-content.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+declare type Regulated<T> = T extends null | undefined | false ? never : T;
+export declare function isNodeWithContent(node: ReactNode): node is Regulated<ReactNode>;
+export {};

package/cjs/utils/is-node-with-content.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNodeWithContent = isNodeWithContent;
+
+function isNodeWithContent(node) {
+  return node !== undefined && node !== null && node !== false;
+}

package/es/components/button/button.d.ts

@@ -5,10 +5,11 @@ export declare type ButtonProps = {
     fill?: 'solid' | 'outline' | 'none';
     size?: 'mini' | 'small' | 'middle' | 'large';
     block?: boolean;
-    loading?: boolean;
+    loading?: boolean | 'auto';
     loadingText?: string;
+    loadingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
     children?: React.ReactNode;
@@ -21,10 +22,11 @@ export declare const Button: React.ForwardRefExoticComponent<{
     fill?: "none" | "solid" | "outline" | undefined;
     size?: "small" | "large" | "middle" | "mini" | undefined;
     block?: boolean | undefined;
-    loading?: boolean | undefined;
+    loading?: boolean | "auto" | undefined;
     loadingText?: string | undefined;
+    loadingIcon?: React.ReactNode;
     disabled?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;

package/es/components/button/button.js

@@ -1,32 +1,56 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { __awaiter } from "tslib";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import classNames from 'classnames';
 import DotLoading from '../dot-loading';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
+import { isPromise } from '../../utils/validate';
 const classPrefix = `adm-button`;
 const defaultProps = {
   color: 'default',
   fill: 'solid',
   block: false,
   loading: false,
+  loadingIcon: React.createElement(DotLoading, {
+    color: 'currentColor'
+  }),
   type: 'button',
   shape: 'default',
   size: 'middle'
 };
 export const Button = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-  const disabled = props.disabled || props.loading;
+  const [innerLoading, setInnerLoading] = useState(false);
   const nativeButtonRef = useRef(null);
+  const loading = props.loading === 'auto' ? innerLoading : props.loading;
+  const disabled = props.disabled || loading;
   useImperativeHandle(ref, () => ({
     get nativeElement() {
       return nativeButtonRef.current;
     }
 
   }));
+
+  const handleClick = e => __awaiter(void 0, void 0, void 0, function* () {
+    if (!props.onClick) return;
+    const promise = props.onClick(e);
+
+    if (isPromise(promise)) {
+      try {
+        setInnerLoading(true);
+        yield promise;
+        setInnerLoading(false);
+      } catch (e) {
+        setInnerLoading(false);
+        throw e;
+      }
+    }
+  });
+
   return withNativeProps(props, React.createElement("button", {
     ref: nativeButtonRef,
     type: props.type,
-    onClick: props.onClick,
+    onClick: handleClick,
     className: classNames(classPrefix, props.color ? `${classPrefix}-${props.color}` : null, {
       [`${classPrefix}-block`]: props.block,
       [`${classPrefix}-disabled`]: disabled,
@@ -35,12 +59,10 @@ export const Button = forwardRef((p, ref) => {
       [`${classPrefix}-mini`]: props.size === 'mini',
       [`${classPrefix}-small`]: props.size === 'small',
       [`${classPrefix}-large`]: props.size === 'large',
-      [`${classPrefix}-loading`]: props.loading
+      [`${classPrefix}-loading`]: loading
     }, `${classPrefix}-shape-${props.shape}`),
     disabled: disabled
-  }, props.loading ? React.createElement("div", {
+  }, loading ? React.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, React.createElement(DotLoading, {
-    color: 'currentColor'
-  }), props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : props.children));
 });

package/es/components/calendar/calendar.css

@@ -50,10 +50,10 @@
 .adm-calendar-cell.adm-calendar-cell-today {
   color: var(--adm-color-primary);
 }
-.adm-calendar-cell.adm-calendar-cell-out {
+.adm-calendar-cell.adm-calendar-cell-disabled {
   color: var(--adm-color-light);
 }
-.adm-calendar-cell.adm-calendar-cell-out .adm-calendar-cell-bottom {
+.adm-calendar-cell.adm-calendar-cell-disabled .adm-calendar-cell-bottom {
   color: var(--adm-color-light);
 }
 .adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected {

package/es/components/calendar/calendar.d.ts

@@ -13,6 +13,8 @@ export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
     allowClear?: boolean;
+    max?: Date;
+    min?: Date;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

package/es/components/calendar/calendar.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useImperativeHandle, useMemo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
@@ -94,6 +94,8 @@ export const Calendar = forwardRef((p, ref) => {
       setCurrent(current.add(1, 'year'));
     }
   }, React.createElement(ArrowLeftDouble, null)));
+  const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max]);
+  const minDay = useMemo(() => props.min && dayjs(props.min), [props.min]);
 
   function renderCells() {
     var _a;
@@ -119,9 +121,10 @@ export const Calendar = forwardRef((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
+      const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(React.createElement("div", {
         key: d.valueOf(),
-        className: classNames(`${classPrefix}-cell`, inThisMonth ? `${classPrefix}-cell-in` : `${classPrefix}-cell-out`, inThisMonth && {
+        className: classNames(`${classPrefix}-cell`, disabled && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
           [`${classPrefix}-cell-selected-begin`]: isBegin,
@@ -129,6 +132,7 @@ export const Calendar = forwardRef((p, ref) => {
         }),
         onClick: () => {
           if (!props.selectionMode) return;
+          if (disabled) return;
           const date = d.toDate();
 
           if (!inThisMonth) {

package/es/components/cascade-picker/cascade-picker-utils.d.ts

@@ -1,3 +1,3 @@
-import { PickerColumn } from '../picker-view';
+import { PickerColumn, PickerValue } from '../picker-view';
 import { CascadePickerOption } from './cascade-picker';
-export declare function generateCascadePickerColumns(value: string[], options: CascadePickerOption[], depth: number, subOptionsRecord: Record<string, CascadePickerOption[]>): PickerColumn[];
+export declare function useColumnsFn(options: CascadePickerOption[]): (selected: PickerValue[]) => PickerColumn[];

package/es/components/cascade-picker/cascade-picker-utils.js

@@ -1,23 +1,43 @@
-export function generateCascadePickerColumns(value, options, depth, subOptionsRecord) {
-  const columns = [];
-  columns.push(options.map(option => ({
-    label: option.label,
-    value: option.value
-  })));
+import { useMemo } from 'react';
+export function useColumnsFn(options) {
+  const depth = useMemo(() => {
+    let depth = 0;
 
-  for (let i = 0; i < depth - 1; i++) {
-    const x = value[i];
-    const subOptions = subOptionsRecord[x];
+    function traverse(options, currentDepth) {
+      if (currentDepth > depth) depth = currentDepth;
+      const nextDepth = currentDepth + 1;
+      options.forEach(option => {
+        if (option.children) {
+          traverse(option.children, nextDepth);
+        }
+      });
+    }
 
-    if (!subOptions) {
-      columns.push([]);
-    } else {
-      columns.push(subOptions.map(option => ({
+    traverse(options, 1);
+    return depth;
+  }, [options]);
+  return selected => {
+    const columns = [];
+    let currentOptions = options;
+    let i = 0;
+
+    while (true) {
+      columns.push(currentOptions.map(option => ({
         label: option.label,
         value: option.value
       })));
+      const x = selected[i];
+      const targetOptions = currentOptions.find(option => option.value === x);
+      if (!targetOptions || !targetOptions.children) break;
+      currentOptions = targetOptions.children;
+      i++;
+    }
+
+    while (i < depth - 1) {
+      columns.push([]);
+      i++;
     }
-  }
 
-  return columns;
+    return columns;
+  };
 }

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

@@ -1,19 +1,15 @@
 import { __rest } from "tslib";
 import React from 'react';
 import Picker from '../picker';
-import { useCascadePickerOptions } from './use-cascade-picker-options';
-import { generateCascadePickerColumns } from './cascade-picker-utils';
+import { useColumnsFn } from './cascade-picker-utils';
 export const CascadePicker = props => {
   const {
     options
   } = props,
         pickerProps = __rest(props, ["options"]);
 
-  const {
-    depth,
-    subOptionsRecord
-  } = useCascadePickerOptions(options);
+  const columnsFn = useColumnsFn(options);
   return React.createElement(Picker, Object.assign({}, pickerProps, {
-    columns: selected => generateCascadePickerColumns(selected, options, depth, subOptionsRecord)
+    columns: columnsFn
   }));
 };

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

@@ -1,19 +1,15 @@
 import { __rest } from "tslib";
 import React from 'react';
 import PickerView from '../picker-view';
-import { useCascadePickerOptions } from '../cascade-picker/use-cascade-picker-options';
-import { generateCascadePickerColumns } from '../cascade-picker/cascade-picker-utils';
+import { useColumnsFn } from '../cascade-picker/cascade-picker-utils';
 export const CascadePickerView = props => {
   const {
     options
   } = props,
         pickerProps = __rest(props, ["options"]);
 
-  const {
-    depth,
-    subOptionsRecord
-  } = useCascadePickerOptions(options);
+  const columnsFn = useColumnsFn(options);
   return React.createElement(PickerView, Object.assign({}, pickerProps, {
-    columns: selected => generateCascadePickerColumns(selected, options, depth, subOptionsRecord)
+    columns: columnsFn
   }));
 };

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

@@ -47,6 +47,7 @@ export const DatePicker = p => {
     value: pickerValue,
     onCancel: props.onCancel,
     onClose: props.onClose,
+    closeOnMaskClick: props.closeOnMaskClick,
     visible: props.visible,
     confirmText: props.confirmText,
     cancelText: props.cancelText,

package/es/components/dialog/dialog-action-button.js

@@ -1,5 +1,4 @@
-import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import Button from '../button';
 import { withNativeProps } from '../../utils/native-props';
@@ -7,26 +6,9 @@ export const DialogActionButton = props => {
   const {
     action
   } = props;
-  const [loading, setLoading] = useState(false);
-
-  function handleClick() {
-    return __awaiter(this, void 0, void 0, function* () {
-      setLoading(true);
-
-      try {
-        const promise = props.onAction();
-        yield promise;
-        setLoading(false);
-      } catch (e) {
-        setLoading(false);
-        throw e;
-      }
-    });
-  }
-
   return withNativeProps(props.action, React.createElement(Button, {
     key: action.key,
-    onClick: handleClick,
+    onClick: props.onAction,
     className: classNames('adm-dialog-button', {
       'adm-dialog-button-bold': action.bold
     }),
@@ -34,7 +16,7 @@ export const DialogActionButton = props => {
     shape: 'rectangular',
     block: true,
     color: action.danger ? 'danger' : 'primary',
-    loading: loading,
+    loading: 'auto',
     disabled: action.disabled
   }, action.text));
 };

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

@@ -37,7 +37,7 @@ export const FloatingPanel = forwardRef((p, ref) => {
       tension: 300
     },
     onChange: result => {
-      onHeightChange(result.value.y, y.isAnimating);
+      onHeightChange(-result.value.y, y.isAnimating);
     }
   }));
   useDrag(state => {

package/es/components/form/context.d.ts

@@ -6,6 +6,7 @@ export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
     requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;

package/es/components/form/context.js

@@ -3,7 +3,8 @@ export const defaultFormContext = {
   name: undefined,
   hasFeedback: true,
   layout: 'vertical',
-  requiredMarkStyle: 'asterisk'
+  requiredMarkStyle: 'asterisk',
+  disabled: false
 };
 export const FormContext = React.createContext(defaultFormContext);
 export const NoStyleItemContext = React.createContext(null);

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

@@ -53,7 +53,7 @@
 }
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6em;
+  --prefix-width: 6.8em;
 }
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;

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

@@ -18,6 +18,8 @@ const MemoInput = React.memo(({
 }) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
 
 const FormItemLayout = props => {
+  var _a;
+
   const {
     className,
     style,
@@ -25,7 +27,6 @@ const FormItemLayout = props => {
     label,
     help,
     required,
-    disabled,
     children,
     htmlFor,
     hidden,
@@ -38,6 +39,7 @@ const FormItemLayout = props => {
   } = useConfig();
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   const layout = props.layout || context.layout;
+  const disabled = (_a = props.disabled) !== null && _a !== void 0 ? _a : context.disabled;
 
   const requiredMark = (() => {
     const {

package/es/components/form/form.d.ts

@@ -3,15 +3,12 @@ import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
-import type { FormLayout } from '.';
 export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
 export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
     footer?: ReactNode;
-    layout?: FormLayout;
     mode?: ListProps['mode'];
 };
 export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
     footer?: ReactNode;
-    layout?: FormLayout | undefined;
     mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance>>;

package/es/components/form/form.js

@@ -23,9 +23,10 @@ export const Form = forwardRef((p, ref) => {
     layout,
     footer,
     mode,
+    disabled,
     requiredMarkStyle
   } = props,
-        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
 
   const {
     locale
@@ -76,7 +77,8 @@ export const Form = forwardRef((p, ref) => {
       name: formProps.name,
       hasFeedback,
       layout,
-      requiredMarkStyle
+      requiredMarkStyle,
+      disabled: disabled
     }
   }, lists), footer && React.createElement("div", {
     className: `${classPrefix}-footer`

package/es/components/form/index.css

@@ -75,7 +75,7 @@
 }
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6em;
+  --prefix-width: 6.8em;
 }
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './index.less';
-import { useForm } from 'rc-field-form';
+import { useWatch, useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
@@ -9,7 +9,6 @@ export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/in
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
-    layout?: FormLayout | undefined;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
@@ -19,5 +18,6 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import("r
     }>;
     Array: import("react").FC<import("./form-array").FormArrayProps>;
     useForm: typeof useForm;
+    useWatch: typeof useWatch;
 };
 export default _default;

package/es/components/form/index.js

@@ -3,7 +3,7 @@ import { Form } from './form';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { FormItem } from './form-item';
 import { Header } from './header';
-import { useForm } from 'rc-field-form';
+import { useWatch, useForm } from 'rc-field-form';
 import { FormSubscribe } from './form-subscribe';
 import { FormArray } from './form-array';
 export default attachPropertiesToComponent(Form, {
@@ -11,5 +11,6 @@ export default attachPropertiesToComponent(Form, {
   Subscribe: FormSubscribe,
   Header,
   Array: FormArray,
-  useForm
+  useForm,
+  useWatch
 });

package/es/components/image-uploader/image-uploader.js

@@ -8,6 +8,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-image-uploader`;
 const defaultProps = {
   disableUpload: false,
@@ -22,6 +23,9 @@ const defaultProps = {
   imageFit: 'cover'
 };
 export const ImageUploader = p => {
+  const {
+    locale
+  } = useConfig();
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
   const updateValue = useMemoizedFn(updater => {
@@ -194,7 +198,8 @@ export const ImageUploader = p => {
     className: `${classPrefix}-upload-button-wrap`
   }, props.children ? props.children : React.createElement("span", {
     className: `${classPrefix}-cell ${classPrefix}-upload-button`,
-    role: 'button'
+    role: 'button',
+    "aria-label": locale.ImageUploader.upload
   }, React.createElement("span", {
     className: `${classPrefix}-upload-button-icon`
   }, React.createElement(AddOutline, null))), !props.disableUpload && React.createElement("input", {
@@ -203,6 +208,7 @@ export const ImageUploader = p => {
     multiple: props.multiple,
     type: 'file',
     className: `${classPrefix}-input`,
-    onChange: onChange
+    onChange: onChange,
+    "aria-hidden": true
   })))));
 };