rsuite 5.46.1 → 5.47.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [5.47.0](https://github.com/rsuite/rsuite/compare/v5.46.1...v5.47.0) (2023-12-08)
+
+### Bug Fixes
+
+- **CloseButton:** fix close label translation string ([#3483](https://github.com/rsuite/rsuite/issues/3483)) ([feedbde](https://github.com/rsuite/rsuite/commit/feedbde550d96d207d6be690b89c3d12247b87d9))
+- **CloseButton:** improve CloseButton accessibility ([#3488](https://github.com/rsuite/rsuite/issues/3488)) ([92ed9a5](https://github.com/rsuite/rsuite/commit/92ed9a5080e241f7e4057cbbc6e971240fb464fe))
+
+### Features
+
+- **TagPicker:** add support for renderMenuItemCheckbox ([#3481](https://github.com/rsuite/rsuite/issues/3481)) ([6b044e9](https://github.com/rsuite/rsuite/commit/6b044e9621db421ea75dc549da27d63493a91261))
+
 ## [5.46.1](https://github.com/rsuite/rsuite/compare/v5.46.0...v5.46.1) (2023-12-01)
 
 ### Bug Fixes

package/CloseButton/styles/index.less

@@ -2,18 +2,24 @@
 
 // Close button
 .rs-btn-close {
-  background: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: @message-close-btn-padding;
-  font-size: @message-close-btn-size;
-  line-height: 1;
   border: none;
   outline: none !important;
+  background: transparent;
+  line-height: 1;
+
   cursor: pointer;
 
   .rs-icon {
     vertical-align: bottom;
   }
+
+  &:hover,
+  &:focus {
+    color: var(--rs-close-button-hover-color);
+
+    svg path {
+      stroke: var(--rs-close-button-hover-color);
+      stroke-width: 1;
+    }
+  }
 }

package/Message/styles/mixin.less

@@ -11,6 +11,14 @@
     color: @text-color;
   }
 
+  .rs-btn-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 8px;
+    font-size: 12px;
+  }
+
   .rs-message-icon-wrapper > .rs-icon,
   .rs-btn-close {
     color: @icon-color;

package/Notification/styles/index.less

@@ -79,6 +79,14 @@
       margin-top: 0;
     }
   }
+
+  .rs-btn-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 8px;
+    font-size: 12px;
+  }
 }
 
 // Alternate styles

package/Picker/styles/index.less

@@ -245,15 +245,6 @@
     padding: 4px 0;
   }
 
-  &:hover {
-    color: var(--rs-state-error);
-  }
-
-  &:hover svg path {
-    stroke: var(--rs-state-error);
-    stroke-width: 1;
-  }
-
   .rs-@{date-picker-prefix} &,
   .rs-@{date-range-picker-prefix} & {
     right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);

package/Tag/styles/index.less

@@ -17,11 +17,8 @@
 
   &-icon-close {
     position: absolute;
-    font-size: 12px;
-  }
-
-  &-default &-icon-close:hover {
-    color: var(--rs-tag-close);
+    top: 0;
+    right: 0;
   }
 
   &-group {

package/Uploader/styles/index.less

@@ -109,8 +109,7 @@
 
     &-btn-remove {
       position: absolute;
-      font-size: 12px;
-      // (36px -  font-size)/2
+      font-size: 14px;
       top: 12px;
       right: @padding-x;
       color: var(--rs-text-secondary);

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

@@ -14,7 +14,7 @@ var _utils = require("../utils");
  */
 var CloseButton = /*#__PURE__*/_react.default.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,
@@ -27,13 +27,11 @@ var CloseButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     locale = _useCustom.locale;
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    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.default.createElement(_Close.default, null));
+  }, rest), /*#__PURE__*/_react.default.createElement(_Close.default, null));
 });
 CloseButton.displayName = 'CloseButton';
 var _default = CloseButton;

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

@@ -4,7 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
-exports.default = exports.InputPickerContext = void 0;
+exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -28,12 +28,8 @@ var _Picker = require("../Picker");
 var _Tag = _interopRequireDefault(require("../Tag"));
 var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
 var _InputSearch = _interopRequireDefault(require("./InputSearch"));
+var _InputPickerContext = _interopRequireDefault(require("./InputPickerContext"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var InputPickerContext = /*#__PURE__*/_react.default.createContext({
-  tagProps: {},
-  trigger: 'Enter'
-});
-exports.InputPickerContext = InputPickerContext;
 var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _merge;
   var _props$as = props.as,
@@ -104,12 +100,13 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
-  var _useContext = (0, _react.useContext)(InputPickerContext),
+  var _useContext = (0, _react.useContext)(_InputPickerContext.default),
     multi = _useContext.multi,
     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`');
   }
@@ -564,6 +561,9 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       classPrefix: menuClassPrefix,
       dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,
+      dropdownMenuItemProps: {
+        renderMenuItemCheckbox: renderMenuItemCheckbox
+      },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
       maxHeight: menuMaxHeight,

package/cjs/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/cjs/InputPicker/InputPickerContext.js

@@ -0,0 +1,13 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var InputPickerContext = /*#__PURE__*/_react.default.createContext({
+  tagProps: {},
+  trigger: 'Enter'
+});
+var _default = InputPickerContext;
+exports.default = _default;

package/cjs/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/cjs/Picker/DropdownMenu.js

@@ -14,6 +14,7 @@ var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
 var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
@@ -49,6 +50,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.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,
@@ -57,7 +59,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     renderMenuItem = props.renderMenuItem,
     onGroupTitleClick = props.onGroupTitleClick,
     onSelect = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -155,7 +157,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return (0, _shallowEqual.default)(v, value);
     });
     var focus = !(0, _isUndefined.default)(focusItemValue) && (0, _shallowEqual.default)(focusItemValue, value);
-    return /*#__PURE__*/_react.default.createElement(DropdownMenuItem, {
+    return /*#__PURE__*/_react.default.createElement(DropdownMenuItem, (0, _extends2.default)({
       style: style,
       key: itemKey,
       disabled: disabled,
@@ -164,7 +166,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       value: value,
       classPrefix: dropdownMenuItemClassPrefix,
       onSelect: handleSelect.bind(null, item)
-    }, renderMenuItem ? renderMenuItem(label, item) : label);
+    }, (0, _pickBy.default)(dropdownMenuItemProps, function (v) {
+      return v !== undefined;
+    })), renderMenuItem ? renderMenuItem(label, item) : label);
   };
   var filteredItems = group ? data.filter(function (item) {
     var _item$parent;

package/cjs/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/cjs/Picker/DropdownMenuCheckItem.js

@@ -32,7 +32,8 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     onSelect = props.onSelect,
     onCheck = props.onCheck,
     onSelectItem = props.onSelectItem,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem"]);
+    renderMenuItemCheckbox = props.renderMenuItemCheckbox,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
   var handleChange = (0, _react.useCallback)(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
   }, [onSelect]);
@@ -51,6 +52,19 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
   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.default.createElement(Component, (0, _extends2.default)({
     role: "option",
     "aria-selected": active,
@@ -60,19 +74,9 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     ref: ref,
     className: className,
     tabIndex: -1
-  }), /*#__PURE__*/_react.default.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.default.createElement(CheckboxItem, (0, _extends2.default)({
+    role: "checkbox"
+  }, checkboxProps)));
 });
 DropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';
 DropdownMenuCheckItem.propTypes = {

package/cjs/Picker/PickerToggle.js

@@ -64,6 +64,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     label = props.label,
     name = props.name,
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useCustom)(),
+    locale = _useCustom.locale;
   var inputRef = (0, _react.useRef)(null);
   var comboboxRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -224,7 +226,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,
     locale: {
-      closeLabel: 'Clear'
+      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
     },
     onClick: handleClean
   }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {

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

@@ -14,6 +14,11 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _RadioTileGroup = require("../RadioTileGroup/RadioTileGroup");
 var _utils = require("../utils");
 var _useUniqueId = _interopRequireDefault(require("../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.default.forwardRef(function (props, ref) {
   var _useContext = (0, _react.useContext)(_RadioTileGroup.RadioTileContext),
     groupValue = _useContext.value,

package/cjs/Tag/Tag.js

@@ -33,6 +33,8 @@ var Tag = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix(size, color, {
     closable: closable
   }));
+  var _useCustom = (0, _utils.useCustom)(),
+    locale = _useCustom.locale;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
@@ -40,7 +42,11 @@ var Tag = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["text"])))
   }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["icon-close"]))),
-    onClick: onClose
+    onClick: onClose,
+    tabIndex: -1,
+    locale: {
+      closeLabel: locale === null || locale === void 0 ? void 0 : locale.remove
+    }
   }));
 });
 Tag.displayName = 'Tag';

package/cjs/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/cjs/TagInput/index.js

@@ -8,7 +8,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _InputPicker = _interopRequireWildcard(require("../InputPicker/InputPicker"));
+var _InputPicker = _interopRequireDefault(require("../InputPicker/InputPicker"));
+var _InputPickerContext = _interopRequireDefault(require("../InputPicker/InputPickerContext"));
 var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$tagProps = props.tagProps,
     tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,
@@ -35,7 +36,7 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     });
   }, [defaultValue, value]);
-  return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
     value: value,

package/cjs/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/cjs/TagPicker/index.js

@@ -8,23 +8,30 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _InputPicker = _interopRequireWildcard(require("../InputPicker/InputPicker"));
+var _InputPicker = _interopRequireDefault(require("../InputPicker/InputPicker"));
+var _InputPickerContext = _interopRequireDefault(require("../InputPicker/InputPickerContext"));
+/**
+ * Multi-select by tag and support new options
+ * @see https://rsuitejs.com/components/tag-picker/
+ */
 var TagPicker = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "onTagRemove"]);
+    renderMenuItemCheckbox = props.renderMenuItemCheckbox,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "onTagRemove", "renderMenuItemCheckbox"]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       multi: true,
       trigger: trigger,
       tagProps: tagProps,
-      onTagRemove: onTagRemove
+      onTagRemove: onTagRemove,
+      renderMenuItemCheckbox: renderMenuItemCheckbox
     };
-  }, [onTagRemove, tagProps, trigger]);
-  return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {
+  }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
+  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
     ref: ref