rsuite 5.46.1 → 5.47.0

package/esm/Checkbox/Checkbox.d.ts

@@ -36,6 +36,8 @@ export interface CheckboxProps<V = ValueType> extends WithAsProps {
     onClick?: (event: React.SyntheticEvent) => void;
     /** Called when the checkbox is clicked. */
     onCheckboxClick?: (event: React.SyntheticEvent) => void;
+    /** Called when the user presses down a key. */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const Checkbox: RsRefForwardingComponent<'div', CheckboxProps>;
 export default Checkbox;

package/esm/CloseButton/CloseButton.js

@@ -9,7 +9,7 @@ import { useClassNames, useCustom } from '../utils';
  */
 var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
+    Component = _props$as === void 0 ? 'button' : _props$as,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'btn-close' : _props$classPrefix,
     className = props.className,
@@ -22,13 +22,11 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     locale = _useCustom.locale;
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "button"
-  }, rest, {
+    type: "button",
     ref: ref,
     className: classes,
-    title: locale === null || locale === void 0 ? void 0 : locale.closeLabel,
     "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeLabel
-  }), /*#__PURE__*/React.createElement(Close, null));
+  }, rest), /*#__PURE__*/React.createElement(Close, null));
 });
 CloseButton.displayName = 'CloseButton';
 export default CloseButton;

package/esm/CustomProvider/CustomProvider.d.ts

@@ -55,6 +55,8 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     common?: {
         loading: string;
         emptyMessage: string;
+        remove: string;
+        clear: string;
     } | undefined;
     Plaintext?: {
         unfilled: string;
@@ -134,9 +136,6 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     InputPicker?: {
         newItem: string;
-        /**
-         * A Map of toast containers
-         */
         createOption: string;
     } | undefined;
     Uploader?: {
@@ -146,6 +145,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         complete: string;
         emptyFile: string;
         upload: string;
+        removeFile: string;
     } | undefined;
     CloseButton?: {
         closeLabel: string;

package/esm/InputPicker/InputPicker.d.ts

@@ -1,27 +1,8 @@
 import React from 'react';
-import { InputPickerLocale } from '../locales';
 import { PickerComponent, PickerToggleProps } from '../Picker';
-import { TagProps } from '../Tag';
-import { ItemDataType, FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker';
-export declare type TriggerType = 'Enter' | 'Space' | 'Comma';
-export interface InputPickerContextProps {
-    /** Multiple selections are allowed */
-    multi?: boolean;
-    /** Tag related props. */
-    tagProps: TagProps;
-    /**
-     * Set the trigger for creating tags. only valid when creatable
-     */
-    trigger: TriggerType | TriggerType[];
-    /**
-     * No overlay provides options
-     */
-    disabledOptions?: boolean;
-    /** Callback fired when a tag is removed. */
-    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
-}
-export declare const InputPickerContext: React.Context<InputPickerContextProps>;
+import type { ItemDataType, FormControlPickerProps } from '../@types/common';
+import type { InputPickerLocale } from '../locales';
+import type { SelectProps } from '../SelectPicker';
 interface InputItemDataType extends ItemDataType {
     create?: boolean;
 }

package/esm/InputPicker/InputPicker.js

@@ -23,10 +23,7 @@ import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, Pi
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import InputSearch from './InputSearch';
-export var InputPickerContext = /*#__PURE__*/React.createContext({
-  tagProps: {},
-  trigger: 'Enter'
-});
+import InputPickerContext from './InputPickerContext';
 var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _merge;
   var _props$as = props.as,
@@ -102,7 +99,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     tagProps = _useContext.tagProps,
     trigger = _useContext.trigger,
     disabledOptions = _useContext.disabledOptions,
-    onTagRemove = _useContext.onTagRemove;
+    onTagRemove = _useContext.onTagRemove,
+    renderMenuItemCheckbox = _useContext.renderMenuItemCheckbox;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
@@ -557,6 +555,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       classPrefix: menuClassPrefix,
       dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       dropdownMenuItemAs: multi ? DropdownMenuCheckItem : DropdownMenuItem,
+      dropdownMenuItemProps: {
+        renderMenuItemCheckbox: renderMenuItemCheckbox
+      },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
       maxHeight: menuMaxHeight,

package/esm/InputPicker/InputPickerContext.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { TagProps } from '../Tag';
+import type { CheckboxProps } from '../Checkbox';
+export declare type TriggerType = 'Enter' | 'Space' | 'Comma';
+export interface TagOnlyProps {
+    /**  Tag related props. */
+    tagProps: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger: TriggerType | TriggerType[];
+    /** Callback fired when a tag is removed. */
+    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
+}
+export interface InputPickerContextProps extends TagOnlyProps {
+    /** Multiple selections are allowed */
+    multi?: boolean;
+    /**
+     * No overlay provides options
+     */
+    disabledOptions?: boolean;
+    /** Custom render checkbox on menu item */
+    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+}
+declare const InputPickerContext: React.Context<InputPickerContextProps>;
+export default InputPickerContext;

package/esm/InputPicker/InputPickerContext.js

@@ -0,0 +1,7 @@
+'use client';
+import React from 'react';
+var InputPickerContext = /*#__PURE__*/React.createContext({
+  tagProps: {},
+  trigger: 'Enter'
+});
+export default InputPickerContext;

package/esm/Picker/DropdownMenu.d.ts

@@ -17,6 +17,7 @@ export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit
     style?: React.CSSProperties;
     dropdownMenuItemAs: React.ElementType | string;
     dropdownMenuItemClassPrefix?: string;
+    dropdownMenuItemProps?: any;
     rowHeight?: number;
     rowGroupHeight?: number;
     virtualized?: boolean;

package/esm/Picker/DropdownMenu.js

@@ -9,6 +9,7 @@ import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import findIndex from 'lodash/findIndex';
+import pickBy from 'lodash/pickBy';
 import getPosition from 'dom-lib/getPosition';
 import scrollTop from 'dom-lib/scrollTop';
 import getHeight from 'dom-lib/getHeight';
@@ -43,6 +44,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     focusItemValue = props.focusItemValue,
     dropdownMenuItemClassPrefix = props.dropdownMenuItemClassPrefix,
     DropdownMenuItem = props.dropdownMenuItemAs,
+    dropdownMenuItemProps = props.dropdownMenuItemProps,
     _props$rowHeight = props.rowHeight,
     rowHeight = _props$rowHeight === void 0 ? 36 : _props$rowHeight,
     _props$rowGroupHeight = props.rowGroupHeight,
@@ -51,7 +53,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenuItem = props.renderMenuItem,
     onGroupTitleClick = props.onGroupTitleClick,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["data", "group", "groupBy", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["data", "group", "groupBy", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "dropdownMenuItemProps", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -149,7 +151,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return shallowEqual(v, value);
     });
     var focus = !isUndefined(focusItemValue) && shallowEqual(focusItemValue, value);
-    return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+    return /*#__PURE__*/React.createElement(DropdownMenuItem, _extends({
       style: style,
       key: itemKey,
       disabled: disabled,
@@ -158,7 +160,9 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: value,
       classPrefix: dropdownMenuItemClassPrefix,
       onSelect: handleSelect.bind(null, item)
-    }, renderMenuItem ? renderMenuItem(label, item) : label);
+    }, pickBy(dropdownMenuItemProps, function (v) {
+      return v !== undefined;
+    })), renderMenuItem ? renderMenuItem(label, item) : label);
   };
   var filteredItems = group ? data.filter(function (item) {
     var _item$parent;

package/esm/Picker/DropdownMenuCheckItem.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CheckboxProps } from '../Checkbox';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface DropdownMenuCheckItemProps extends WithAsProps {
     active?: boolean;
@@ -16,6 +17,7 @@ export interface DropdownMenuCheckItemProps extends WithAsProps {
     onCheck?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
     onSelectItem?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
+    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
 declare const DropdownMenuCheckItem: RsRefForwardingComponent<'div', DropdownMenuCheckItemProps>;
 export default DropdownMenuCheckItem;

package/esm/Picker/DropdownMenuCheckItem.js

@@ -26,7 +26,8 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
     onSelect = props.onSelect,
     onCheck = props.onCheck,
     onSelectItem = props.onSelectItem,
-    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem"]);
+    renderMenuItemCheckbox = props.renderMenuItemCheckbox,
+    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
   var handleChange = useCallback(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
   }, [onSelect]);
@@ -45,6 +46,19 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
   var checkboxItemClasses = withClassPrefix({
     focus: focus
   });
+  var checkboxProps = {
+    value: value,
+    disabled: disabled,
+    indeterminate: indeterminate,
+    checkable: checkable,
+    children: children,
+    checked: active,
+    className: checkboxItemClasses,
+    onKeyDown: disabled ? undefined : onKeyDown,
+    onChange: handleChange,
+    onClick: handleSelectItem,
+    onCheckboxClick: handleCheck
+  };
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "option",
     "aria-selected": active,
@@ -54,19 +68,9 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
     ref: ref,
     className: className,
     tabIndex: -1
-  }), /*#__PURE__*/React.createElement(CheckboxItem, {
-    value: value,
-    role: "checkbox",
-    disabled: disabled,
-    checked: active,
-    checkable: checkable,
-    indeterminate: indeterminate,
-    className: checkboxItemClasses,
-    onKeyDown: disabled ? null : onKeyDown,
-    onChange: handleChange,
-    onClick: handleSelectItem,
-    onCheckboxClick: handleCheck
-  }, children));
+  }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+    role: "checkbox"
+  }, checkboxProps)));
 });
 DropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';
 DropdownMenuCheckItem.propTypes = {

package/esm/Picker/PickerToggle.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 import ToggleButton from './ToggleButton';
 import CloseButton from '../CloseButton';
-import { useClassNames, KEY_VALUES, mergeRefs } from '../utils';
+import { useClassNames, useCustom, KEY_VALUES, mergeRefs } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
 import TextMask from '../MaskedInput/TextMask';
@@ -58,6 +58,8 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     label = props.label,
     name = props.name,
     rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
+  var _useCustom = useCustom(),
+    locale = _useCustom.locale;
   var inputRef = useRef(null);
   var comboboxRef = useRef(null);
   var _useState = useState(false),
@@ -218,7 +220,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["clean"]))),
     tabIndex: -1,
     locale: {
-      closeLabel: 'Clear'
+      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
     },
     onClick: handleClean
   }), caret && !showCleanButton && /*#__PURE__*/React.createElement(Caret, {

package/esm/RadioTile/RadioTile.d.ts

@@ -21,5 +21,10 @@ export interface RadioTileProps<T = ValueType> extends WithAsProps, Omit<React.H
     /** Callback function with value changed */
     onChange?: (value?: T, event?: React.ChangeEvent<HTMLInputElement>) => void;
 }
+/**
+ * A series of selectable tile components that behave like Radio.
+ * @version 5.35.0
+ * @see https://rsuitejs.com/components/radio-tile/
+ */
 declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps<ValueType> & React.RefAttributes<unknown>>;
 export default RadioTile;

package/esm/RadioTile/RadioTile.js

@@ -8,6 +8,11 @@ import Stack from '../Stack';
 import { RadioTileContext } from '../RadioTileGroup/RadioTileGroup';
 import { useClassNames, useControlled, partitionHTMLProps } from '../utils';
 import useUniqueId from '../utils/useUniqueId';
+/**
+ * A series of selectable tile components that behave like Radio.
+ * @version 5.35.0
+ * @see https://rsuitejs.com/components/radio-tile/
+ */
 var RadioTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useContext = useContext(RadioTileContext),
     groupValue = _useContext.value,

package/esm/Tag/Tag.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2;
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import { useClassNames, useCustom } from '../utils';
 import CloseButton from '../CloseButton';
 var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -28,6 +28,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix(size, color, {
     closable: closable
   }));
+  var _useCustom = useCustom(),
+    locale = _useCustom.locale;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
@@ -35,7 +37,11 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["text"])))
   }, children), closable && /*#__PURE__*/React.createElement(CloseButton, {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["icon-close"]))),
-    onClick: onClose
+    onClick: onClose,
+    tabIndex: -1,
+    locale: {
+      closeLabel: locale === null || locale === void 0 ? void 0 : locale.remove
+    }
   }));
 });
 Tag.displayName = 'Tag';

package/esm/TagInput/index.d.ts

@@ -1,18 +1,6 @@
-import React from 'react';
-import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
+import { InputPickerProps } from '../InputPicker/InputPicker';
+import { TagOnlyProps } from '../InputPicker/InputPickerContext';
 import type { PickerComponent } from '../Picker/types';
-import type { TagProps } from '../Tag';
-export interface TagInputProps extends Omit<InputPickerProps<readonly string[]>, 'data'> {
-    /**  Tag related props. */
-    tagProps?: TagProps;
-    /**
-     * Set the trigger for creating tags. only valid when creatable
-     *
-     * @todo Declare as readonly array
-     */
-    trigger?: TriggerType | TriggerType[];
-    /** Callback fired when a tag is removed. */
-    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
-}
+export declare type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> & Partial<TagOnlyProps>;
 declare const TagInput: PickerComponent<TagInputProps>;
 export default TagInput;

package/esm/TagInput/index.js

@@ -2,7 +2,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
-import InputPicker, { InputPickerContext } from '../InputPicker/InputPicker';
+import InputPicker from '../InputPicker/InputPicker';
+import InputPickerContext from '../InputPicker/InputPickerContext';
 var TagInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$tagProps = props.tagProps,
     tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,

package/esm/TagPicker/index.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
-import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
+import { InputPickerProps } from '../InputPicker/InputPicker';
+import { TagOnlyProps } from '../InputPicker/InputPickerContext';
 import type { PickerComponent } from '../Picker/types';
-import type { TagProps } from '../Tag';
-export interface TagPickerProps extends InputPickerProps {
-    /**  Tag related props. */
-    tagProps?: TagProps;
+import type { CheckboxProps } from '../Checkbox';
+export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
     /**
-     * Set the trigger for creating tags. only valid when creatable
-     */
-    trigger?: TriggerType | TriggerType[];
-    /** Callback fired when a tag is removed. */
-    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
+     * Custom render checkbox on menu item
+     * @version 5.47.0
+     **/
+    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
+/**
+ * Multi-select by tag and support new options
+ * @see https://rsuitejs.com/components/tag-picker/
+ */
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/esm/TagPicker/index.js

@@ -2,22 +2,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
-import InputPicker, { InputPickerContext } from '../InputPicker/InputPicker';
+import InputPicker from '../InputPicker/InputPicker';
+import InputPickerContext from '../InputPicker/InputPickerContext';
+/**
+ * Multi-select by tag and support new options
+ * @see https://rsuitejs.com/components/tag-picker/
+ */
 var TagPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$tagProps = props.tagProps,
     tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,
     onTagRemove = props.onTagRemove,
-    rest = _objectWithoutPropertiesLoose(props, ["tagProps", "trigger", "onTagRemove"]);
+    renderMenuItemCheckbox = props.renderMenuItemCheckbox,
+    rest = _objectWithoutPropertiesLoose(props, ["tagProps", "trigger", "onTagRemove", "renderMenuItemCheckbox"]);
   var contextValue = useMemo(function () {
     return {
       multi: true,
       trigger: trigger,
       tagProps: tagProps,
-      onTagRemove: onTagRemove
+      onTagRemove: onTagRemove,
+      renderMenuItemCheckbox: renderMenuItemCheckbox
     };
-  }, [onTagRemove, tagProps, trigger]);
+  }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
   return /*#__PURE__*/React.createElement(InputPickerContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {

package/esm/Uploader/UploadFileItem.js

@@ -132,7 +132,8 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "presentation",
       src: previewImage,
       alt: file.name,
-      onClick: handlePreview
+      onClick: handlePreview,
+      "aria-label": "Preview: " + file.name
     }) : /*#__PURE__*/React.createElement(Attachment, {
       className: prefix('icon')
     });
@@ -153,7 +154,8 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement("div", {
         className: classes
       }, /*#__PURE__*/React.createElement("i", {
-        className: prefix('icon')
+        className: prefix('icon'),
+        "aria-label": "Uploading"
       }));
     }
     if (listType === 'picture' || listType === 'picture-text') {
@@ -173,9 +175,18 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!removable) {
       return null;
     }
+    var closeLabel = 'Remove file';
+    if (locale !== null && locale !== void 0 && locale.removeFile) {
+      closeLabel = (locale === null || locale === void 0 ? void 0 : locale.removeFile) + (file !== null && file !== void 0 && file.name ? ": " + (file === null || file === void 0 ? void 0 : file.name) : '');
+    }
     return /*#__PURE__*/React.createElement(CloseButton, {
       className: prefix('btn-remove'),
-      onClick: handleRemove
+      onClick: handleRemove,
+      tabIndex: -1,
+      locale: {
+        closeLabel: closeLabel
+      },
+      "aria-hidden": disabled
     });
   };
 
@@ -189,7 +200,8 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, /*#__PURE__*/React.createElement("span", null, locale === null || locale === void 0 ? void 0 : locale.error), allowReupload && /*#__PURE__*/React.createElement("a", {
         role: "button",
         tabIndex: -1,
-        onClick: handleReupload
+        onClick: handleReupload,
+        "aria-label": "Retry"
       }, /*#__PURE__*/React.createElement(Reload, {
         className: prefix('icon-reupload')
       })));
@@ -216,7 +228,9 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var renderFilePanel = function renderFilePanel() {
     var fileElement = /*#__PURE__*/React.createElement("div", {
       className: prefix('title'),
-      onClick: handlePreview
+      tabIndex: -1,
+      onClick: handlePreview,
+      "aria-label": "Preview: " + file.name
     }, file.name);
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('panel')

package/esm/locales/ar_EG.d.ts

@@ -2,6 +2,8 @@ declare const _default: {
     common: {
         loading: string;
         emptyMessage: string;
+        remove: string;
+        clear: string;
     };
     Plaintext: {
         unfilled: string;
@@ -90,6 +92,7 @@ declare const _default: {
         complete: string;
         emptyFile: string;
         upload: string;
+        removeFile: string;
     };
     CloseButton: {
         closeLabel: string;

package/esm/locales/ar_EG.js

@@ -22,7 +22,9 @@ var Calendar = {
 export default {
   common: {
     loading: 'جاري التحميل...',
-    emptyMessage: 'لا يوجد المزيد من البيانات'
+    emptyMessage: 'لا يوجد المزيد من البيانات',
+    remove: 'حذف',
+    clear: 'يزيل'
   },
   Plaintext: {
     unfilled: 'شاغرة',
@@ -60,7 +62,8 @@ export default {
     error: 'خطأ',
     complete: 'تم الإنتهاء',
     emptyFile: 'فارغ',
-    upload: 'رفع'
+    upload: 'رفع',
+    removeFile: 'حذف الملف'
   },
   CloseButton: {
     closeLabel: 'اغلق'

package/esm/locales/da_DK.d.ts

@@ -2,6 +2,8 @@ declare const _default: {
     common: {
         loading: string;
         emptyMessage: string;
+        remove: string;
+        clear: string;
     };
     Plaintext: {
         unfilled: string;
@@ -102,6 +104,7 @@ declare const _default: {
         complete: string;
         emptyFile: string;
         upload: string;
+        removeFile: string;
     };
     CloseButton: {
         closeLabel: string;

package/esm/locales/da_DK.js

@@ -26,7 +26,9 @@ var Calendar = {
 export default {
   common: {
     loading: 'Indlæser...',
-    emptyMessage: 'Ingen data fundet'
+    emptyMessage: 'Ingen data fundet',
+    remove: 'Fjerne',
+    clear: 'Ryd'
   },
   Plaintext: {
     unfilled: 'ubesatte',
@@ -64,7 +66,8 @@ export default {
     error: 'Fejl',
     complete: 'Færdig',
     emptyFile: 'Tom',
-    upload: 'Upload'
+    upload: 'Upload',
+    removeFile: 'Fjern fil'
   },
   CloseButton: {
     closeLabel: 'lukke ned'

package/esm/locales/de_DE.d.ts

@@ -2,6 +2,8 @@ declare const _default: {
     common: {
         loading: string;
         emptyMessage: string;
+        remove: string;
+        clear: string;
     };
     Plaintext: {
         unfilled: string;
@@ -102,6 +104,7 @@ declare const _default: {
         complete: string;
         emptyFile: string;
         upload: string;
+        removeFile: string;
     };
     CloseButton: {
         closeLabel: string;

package/esm/locales/de_DE.js

@@ -26,7 +26,9 @@ var Calendar = {
 export default {
   common: {
     loading: 'am laden...',
-    emptyMessage: 'Keine Daten gefunden'
+    emptyMessage: 'Keine Daten gefunden',
+    remove: 'Entfernen',
+    clear: 'Entfernen'
   },
   Plaintext: {
     unfilled: 'Unausgefüllt',
@@ -64,7 +66,8 @@ export default {
     error: 'Fehler',
     complete: 'Beendet',
     emptyFile: 'Leer',
-    upload: 'Hochladen'
+    upload: 'Hochladen',
+    removeFile: 'Dateien löschen'
   },
   CloseButton: {
     closeLabel: 'Schließen'