@douyinfe/semi-ui 2.50.1 → 2.51.0-beta.0

package/lib/cjs/cascader/index.d.ts

@@ -193,7 +193,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     handleInputChange: (value: string) => void;
     handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
     handleRemoveByKey: (key: any) => void;
-    renderTagItem: (value: string | Array<string>, idx: number, type: string) => string | number | boolean | React.ReactFragment | JSX.Element;
+    renderTagItem: (nodeKey: string, idx: number) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
     handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;

package/lib/cjs/cascader/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -52,7 +52,7 @@ class Cascader extends _baseComponent.default {
       } = this.state;
       this.handleTagRemove(null, keyEntities[key].valuePath);
     };
-    this.renderTagItem = (value, idx, type) => {
+    this.renderTagItem = (nodeKey, idx) => {
       const {
         keyEntities,
         disabledKeys
@@ -64,9 +64,8 @@ class Cascader extends _baseComponent.default {
         displayRender,
         disableStrictly
       } = this.props;
-      const nodeKey = type === _constants.strings.IS_VALUE ? (0, _util.findKeysForValues)(value, keyEntities)[0] : value;
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
-      if (!(0, _isEmpty2.default)(keyEntities) && !(0, _isEmpty2.default)(keyEntities[nodeKey])) {
+      if (keyEntities[nodeKey]) {
         const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
           [`${prefixcls}-selection-tag-disabled`]: isDsiabled
         });
@@ -193,7 +192,7 @@ class Cascader extends _baseComponent.default {
       const hiddenTag = [];
       [...realKeys].forEach((checkedKey, idx) => {
         const notExceedMaxTagCount = !(0, _isNumber2.default)(maxTagCount) || maxTagCount >= idx + 1;
-        const item = this.renderTagItem(checkedKey, idx, _constants.strings.IS_KEY);
+        const item = this.renderTagItem(checkedKey, idx);
         if (notExceedMaxTagCount) {
           displayTag.push(item);
         } else {
@@ -236,7 +235,7 @@ class Cascader extends _baseComponent.default {
       const searchable = Boolean(filterTreeNode);
       if (!searchable) {
         if (multiple) {
-          if ((0, _isEmpty2.default)(checkedKeys)) {
+          if (checkedKeys.size === 0) {
             return /*#__PURE__*/_react.default.createElement("span", {
               className: `${prefixcls}-selection-placeholder`
             }, placeholder);
@@ -703,27 +702,23 @@ class Cascader extends _baseComponent.default {
       return firstInProps || treeDataHasChange;
     };
     const getRealKeys = (realValue, keyEntities) => {
-      // normallizedValue is used to save the value in two-dimensional array format
-      let normallizedValue = [];
+      // normalizedValue is used to save the value in two-dimensional array format
+      let normalizedValue = [];
       if (Array.isArray(realValue)) {
-        normallizedValue = Array.isArray(realValue[0]) ? realValue : [realValue];
+        normalizedValue = Array.isArray(realValue[0]) ? realValue : [realValue];
       } else {
         if (realValue !== undefined) {
-          normallizedValue = [[realValue]];
+          normalizedValue = [[realValue]];
         }
       }
       // formatValuePath is used to save value of valuePath
       const formatValuePath = [];
-      normallizedValue.forEach(valueItem => {
-        const formatItem = onChangeWithObject ? valueItem.map(i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+      normalizedValue.forEach(valueItem => {
+        const formatItem = onChangeWithObject && (0, _isObject2.default)(valueItem[0]) ? valueItem.map(i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
         formatValuePath.push(formatItem);
       });
       // formatKeys is used to save key of value
-      const formatKeys = [];
-      formatValuePath.forEach(v => {
-        const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
-        !(0, _isEmpty2.default)(formatKeyItem) && formatKeys.push(formatKeyItem);
-      });
+      const formatKeys = formatValuePath.map(v => (0, _util.getKeyByValuePath)(v));
       return formatKeys;
     };
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
@@ -753,7 +748,7 @@ class Cascader extends _baseComponent.default {
         if ((0, _isSet2.default)(realKeys)) {
           realKeys = [...realKeys];
         }
-        const calRes = (0, _treeUtil.calcCheckedKeys)((0, _flatten2.default)(realKeys), keyEntities);
+        const calRes = (0, _treeUtil.calcCheckedKeys)(realKeys, keyEntities);
         const checkedKeys = new Set(calRes.checkedKeys);
         const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
         // disableStrictly
@@ -777,7 +772,7 @@ class Cascader extends _baseComponent.default {
   }
   componentDidUpdate(prevProps) {
     let isOptionsChanged = false;
-    if (!(0, _isEqual2.default)(prevProps.treeData, this.props.treeData)) {
+    if (!(0, _isEqual2.default)(prevProps.treeData, this.props.treeData) && !this.props.multiple) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }
@@ -801,24 +796,17 @@ class Cascader extends _baseComponent.default {
       resolvedCheckedKeys
     } = this.state;
     const tagInputcls = (0, _classnames.default)(`${prefixcls}-tagInput-wrapper`);
-    const tagValue = [];
     const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
-    [...realKeys].forEach(checkedKey => {
-      if (!(0, _isEmpty2.default)(keyEntities[checkedKey])) {
-        tagValue.push(keyEntities[checkedKey].valuePath);
-      }
-    });
     return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
       className: tagInputcls,
       ref: this.inputRef,
       disabled: disabled,
       size: size,
-      // TODO Modify logic, not modify type
-      value: tagValue,
+      value: [...realKeys],
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: (value, index) => this.renderTagItem(value, index, _constants.strings.IS_VALUE),
+      renderTagItem: (value, index) => this.renderTagItem(value, index),
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type

package/lib/cjs/dropdown/dropdownItem.js

@@ -87,7 +87,7 @@ class DropdownItem extends _baseComponent.default {
       ref: ref => forwardRef(ref),
       className: itemclass,
       style: style
-    }), tick, iconContent, children);
+    }, this.getDataAttr(this.props)), tick, iconContent, children);
   }
 }
 DropdownItem.propTypes = {

package/lib/cjs/image/image.d.ts

@@ -20,6 +20,7 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
         preview: PropTypes.Requireable<NonNullable<boolean | object>>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         crossOrigin: PropTypes.Requireable<string>;
         imageID: PropTypes.Requireable<number>;
     };

package/lib/cjs/image/image.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
@@ -179,7 +180,10 @@ class Image extends _baseComponent.default {
     const canPreview = loadStatus === "success" && preview && !this.isInGroup();
     const showPreviewCursor = preview && loadStatus === "success";
     const previewSrc = (0, _isObject2.default)(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
-    const previewProps = (0, _isObject2.default)(preview) ? preview : {};
+    const previewProps = (0, _isObject2.default)(preview) && canPreview ? Object.assign(Object.assign({}, (0, _omit2.default)(preview, ['className', 'style', 'previewCls', 'previewStyle'])), {
+      className: preview === null || preview === void 0 ? void 0 : preview.previewCls,
+      style: preview === null || preview === void 0 ? void 0 : preview.previewStyle
+    }) : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       style: outerStyle,
       className: outerCls,
@@ -223,6 +227,7 @@ Image.propTypes = {
   preview: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
   onLoad: _propTypes.default.func,
   onError: _propTypes.default.func,
+  onClick: _propTypes.default.func,
   crossOrigin: _propTypes.default.string,
   imageID: _propTypes.default.number
 };

package/lib/cjs/image/interface.d.ts

@@ -18,6 +18,7 @@ export interface ImageProps extends BaseProps {
     preview?: boolean | PreviewProps;
     onError?: (event: Event) => void;
     onLoad?: (event: Event) => void;
+    onClick?: (event: any) => void;
     crossOrigin?: "anonymous" | "use-credentials";
     children?: ReactNode;
     imageID?: number;
@@ -55,6 +56,8 @@ export interface PreviewProps extends BaseProps {
     crossOrigin?: "anonymous" | "use-credentials";
     maxZoom?: number;
     minZoom?: number;
+    previewCls?: string;
+    previewStyle?: React.CSSProperties;
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -70,6 +73,8 @@ export interface PreviewProps extends BaseProps {
     onDownload?: (src: string, index: number) => void;
     setDownloadName?: (src: string) => string;
 }
+export interface PreviewInnerProps extends Omit<PreviewProps, "previewCls" | "previewStyle"> {
+}
 export interface MenuProps {
     min?: number;
     max?: number;
@@ -108,6 +113,7 @@ export interface SliderProps {
     step?: number;
 }
 export interface HeaderProps {
+    closable: boolean;
     renderHeader?: (info: any) => ReactNode;
     title?: string;
     titleStyle?: React.CSSProperties;

package/lib/cjs/image/preview.d.ts

@@ -31,6 +31,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         lazyLoadMargin: PropTypes.Requireable<string>;
         preLoad: PropTypes.Requireable<boolean>;
         preLoadGap: PropTypes.Requireable<number>;
+        previewCls: PropTypes.Requireable<string>;
+        previewStyle: PropTypes.Requireable<object>;
         disableDownload: PropTypes.Requireable<boolean>;
         zIndex: PropTypes.Requireable<number>;
         renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
@@ -51,6 +53,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         src: any[];
         lazyLoad: boolean;
         lazyLoadMargin: string;
+        closable: boolean;
     };
     get adapter(): {
         getContext(key: string): any;

package/lib/cjs/image/preview.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _react = _interopRequireWildcard(require("react"));
@@ -154,6 +155,10 @@ class Preview extends _baseComponent.default {
         setDownloadName
       } = _a,
       restProps = __rest(_a, ["src", "className", "style", "lazyLoad", "setDownloadName"]);
+    const previewInnerProps = Object.assign(Object.assign({}, (0, _omit2.default)(restProps, ['previewCls', 'previewStyle'])), {
+      className: restProps === null || restProps === void 0 ? void 0 : restProps.previewCls,
+      style: restProps === null || restProps === void 0 ? void 0 : restProps.previewStyle
+    });
     const {
       currentIndex,
       visible
@@ -182,7 +187,7 @@ class Preview extends _baseComponent.default {
       id: this.previewGroupId,
       style: style,
       className: (0, _classnames.default)(`${prefixCls}-preview-group`, className)
-    }, newChildren), /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, restProps, {
+    }, newChildren), /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, previewInnerProps, {
       ref: this.previewRef,
       src: finalSrcList,
       currentIndex: currentIndex,
@@ -217,6 +222,8 @@ Preview.propTypes = {
   lazyLoadMargin: _propTypes.default.string,
   preLoad: _propTypes.default.bool,
   preLoadGap: _propTypes.default.number,
+  previewCls: _propTypes.default.string,
+  previewStyle: _propTypes.default.object,
   disableDownload: _propTypes.default.bool,
   zIndex: _propTypes.default.number,
   renderHeader: _propTypes.default.func,
@@ -236,5 +243,6 @@ Preview.propTypes = {
 Preview.defaultProps = {
   src: [],
   lazyLoad: true,
-  lazyLoadMargin: "0px 100px 100px 0px"
+  lazyLoadMargin: "0px 100px 100px 0px",
+  closable: true
 };

package/lib/cjs/image/previewHeader.js

@@ -18,7 +18,8 @@ const Header = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onClose,
     titleStyle,
     className,
-    renderHeader
+    renderHeader,
+    closable
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_previewContext.PreviewContext.Consumer, null, _ref2 => {
     let {
@@ -35,7 +36,7 @@ const Header = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }, /*#__PURE__*/_react.default.createElement("section", {
       className: `${prefixCls}-title`,
       style: titleStyle
-    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/_react.default.createElement("section", {
+    }, renderHeader ? renderHeader(title) : title), closable && /*#__PURE__*/_react.default.createElement("section", {
       className: `${prefixCls}-close`,
       onMouseUp: onClose
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null)));

package/lib/cjs/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
+import { PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter, RatioType } from '@douyinfe/semi-foundation/lib/cjs/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";

package/lib/cjs/image/previewInner.js

@@ -270,6 +270,7 @@ class PreviewInner extends _baseComponent.default {
   render() {
     const {
       getPopupContainer,
+      closable,
       zIndex,
       visible,
       className,
@@ -316,13 +317,10 @@ class PreviewInner extends _baseComponent.default {
     const total = imgSrc.length;
     const showPrev = total !== 1 && (infinite || currentIndex !== 0);
     const showNext = total !== 1 && (infinite || currentIndex !== total - 1);
-    return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    return visible && /*#__PURE__*/_react.default.createElement(_portal.default, {
       getPopupContainer: getPopupContainer,
       style: wrapperStyle
-    }, visible &&
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-static-element-interactions
-    _react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: previewWrapperCls,
       style: style,
       onMouseDown: this.handleMouseDown,
@@ -333,7 +331,8 @@ class PreviewInner extends _baseComponent.default {
       ref: this.headerRef,
       className: (0, _classnames.default)(hideViewerCls),
       onClose: this.handlePreviewClose,
-      renderHeader: renderHeader
+      renderHeader: renderHeader,
+      closable: closable
     }), /*#__PURE__*/_react.default.createElement(_previewImage.default, {
       src: imgSrc[currentIndex],
       onZoom: this.handleZoomImage,

package/lib/es/cascader/index.d.ts

@@ -193,7 +193,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     handleInputChange: (value: string) => void;
     handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
     handleRemoveByKey: (key: any) => void;
-    renderTagItem: (value: string | Array<string>, idx: number, type: string) => string | number | boolean | React.ReactFragment | JSX.Element;
+    renderTagItem: (nodeKey: string, idx: number) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
     handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;

package/lib/es/cascader/index.js

@@ -1,4 +1,4 @@
-import _flatten from "lodash/flatten";
+import _isObject from "lodash/isObject";
 import _noop from "lodash/noop";
 import _isNumber from "lodash/isNumber";
 import _isFunction from "lodash/isFunction";
@@ -15,7 +15,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/cascader/c
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import '@douyinfe/semi-foundation/lib/es/cascader/cascader.css';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
-import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/lib/es/cascader/util';
+import { convertDataToEntities, calcMergeType, getKeyByValuePath } from '@douyinfe/semi-foundation/lib/es/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import ConfigContext from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
@@ -43,7 +43,7 @@ class Cascader extends BaseComponent {
       } = this.state;
       this.handleTagRemove(null, keyEntities[key].valuePath);
     };
-    this.renderTagItem = (value, idx, type) => {
+    this.renderTagItem = (nodeKey, idx) => {
       const {
         keyEntities,
         disabledKeys
@@ -55,9 +55,8 @@ class Cascader extends BaseComponent {
         displayRender,
         disableStrictly
       } = this.props;
-      const nodeKey = type === strings.IS_VALUE ? findKeysForValues(value, keyEntities)[0] : value;
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
-      if (!_isEmpty(keyEntities) && !_isEmpty(keyEntities[nodeKey])) {
+      if (keyEntities[nodeKey]) {
         const tagCls = cls(`${prefixcls}-selection-tag`, {
           [`${prefixcls}-selection-tag-disabled`]: isDsiabled
         });
@@ -184,7 +183,7 @@ class Cascader extends BaseComponent {
       const hiddenTag = [];
       [...realKeys].forEach((checkedKey, idx) => {
         const notExceedMaxTagCount = !_isNumber(maxTagCount) || maxTagCount >= idx + 1;
-        const item = this.renderTagItem(checkedKey, idx, strings.IS_KEY);
+        const item = this.renderTagItem(checkedKey, idx);
         if (notExceedMaxTagCount) {
           displayTag.push(item);
         } else {
@@ -227,7 +226,7 @@ class Cascader extends BaseComponent {
       const searchable = Boolean(filterTreeNode);
       if (!searchable) {
         if (multiple) {
-          if (_isEmpty(checkedKeys)) {
+          if (checkedKeys.size === 0) {
             return /*#__PURE__*/React.createElement("span", {
               className: `${prefixcls}-selection-placeholder`
             }, placeholder);
@@ -694,27 +693,23 @@ class Cascader extends BaseComponent {
       return firstInProps || treeDataHasChange;
     };
     const getRealKeys = (realValue, keyEntities) => {
-      // normallizedValue is used to save the value in two-dimensional array format
-      let normallizedValue = [];
+      // normalizedValue is used to save the value in two-dimensional array format
+      let normalizedValue = [];
       if (Array.isArray(realValue)) {
-        normallizedValue = Array.isArray(realValue[0]) ? realValue : [realValue];
+        normalizedValue = Array.isArray(realValue[0]) ? realValue : [realValue];
       } else {
         if (realValue !== undefined) {
-          normallizedValue = [[realValue]];
+          normalizedValue = [[realValue]];
         }
       }
       // formatValuePath is used to save value of valuePath
       const formatValuePath = [];
-      normallizedValue.forEach(valueItem => {
-        const formatItem = onChangeWithObject ? valueItem.map(i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+      normalizedValue.forEach(valueItem => {
+        const formatItem = onChangeWithObject && _isObject(valueItem[0]) ? valueItem.map(i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
         formatValuePath.push(formatItem);
       });
       // formatKeys is used to save key of value
-      const formatKeys = [];
-      formatValuePath.forEach(v => {
-        const formatKeyItem = findKeysForValues(v, keyEntities);
-        !_isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-      });
+      const formatKeys = formatValuePath.map(v => getKeyByValuePath(v));
       return formatKeys;
     };
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
@@ -744,7 +739,7 @@ class Cascader extends BaseComponent {
         if (_isSet(realKeys)) {
           realKeys = [...realKeys];
         }
-        const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
+        const calRes = calcCheckedKeys(realKeys, keyEntities);
         const checkedKeys = new Set(calRes.checkedKeys);
         const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
         // disableStrictly
@@ -768,7 +763,7 @@ class Cascader extends BaseComponent {
   }
   componentDidUpdate(prevProps) {
     let isOptionsChanged = false;
-    if (!_isEqual(prevProps.treeData, this.props.treeData)) {
+    if (!_isEqual(prevProps.treeData, this.props.treeData) && !this.props.multiple) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }
@@ -792,24 +787,17 @@ class Cascader extends BaseComponent {
       resolvedCheckedKeys
     } = this.state;
     const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
-    const tagValue = [];
     const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
-    [...realKeys].forEach(checkedKey => {
-      if (!_isEmpty(keyEntities[checkedKey])) {
-        tagValue.push(keyEntities[checkedKey].valuePath);
-      }
-    });
     return /*#__PURE__*/React.createElement(TagInput, {
       className: tagInputcls,
       ref: this.inputRef,
       disabled: disabled,
       size: size,
-      // TODO Modify logic, not modify type
-      value: tagValue,
+      value: [...realKeys],
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: (value, index) => this.renderTagItem(value, index, strings.IS_VALUE),
+      renderTagItem: (value, index) => this.renderTagItem(value, index),
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type

package/lib/es/dropdown/dropdownItem.js

@@ -80,7 +80,7 @@ class DropdownItem extends BaseComponent {
       ref: ref => forwardRef(ref),
       className: itemclass,
       style: style
-    }), tick, iconContent, children);
+    }, this.getDataAttr(this.props)), tick, iconContent, children);
   }
 }
 DropdownItem.propTypes = {

package/lib/es/image/image.d.ts

@@ -20,6 +20,7 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
         preview: PropTypes.Requireable<NonNullable<boolean | object>>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         crossOrigin: PropTypes.Requireable<string>;
         imageID: PropTypes.Requireable<number>;
     };

package/lib/es/image/image.js

@@ -1,3 +1,4 @@
+import _omit from "lodash/omit";
 import _isUndefined from "lodash/isUndefined";
 import _isObject from "lodash/isObject";
 import _isBoolean from "lodash/isBoolean";
@@ -172,7 +173,10 @@ export default class Image extends BaseComponent {
     const canPreview = loadStatus === "success" && preview && !this.isInGroup();
     const showPreviewCursor = preview && loadStatus === "success";
     const previewSrc = _isObject(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
-    const previewProps = _isObject(preview) ? preview : {};
+    const previewProps = _isObject(preview) && canPreview ? Object.assign(Object.assign({}, _omit(preview, ['className', 'style', 'previewCls', 'previewStyle'])), {
+      className: preview === null || preview === void 0 ? void 0 : preview.previewCls,
+      style: preview === null || preview === void 0 ? void 0 : preview.previewStyle
+    }) : {};
     return /*#__PURE__*/React.createElement("div", {
       style: outerStyle,
       className: outerCls,
@@ -215,6 +219,7 @@ Image.propTypes = {
   preview: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   onLoad: PropTypes.func,
   onError: PropTypes.func,
+  onClick: PropTypes.func,
   crossOrigin: PropTypes.string,
   imageID: PropTypes.number
 };

package/lib/es/image/interface.d.ts

@@ -18,6 +18,7 @@ export interface ImageProps extends BaseProps {
     preview?: boolean | PreviewProps;
     onError?: (event: Event) => void;
     onLoad?: (event: Event) => void;
+    onClick?: (event: any) => void;
     crossOrigin?: "anonymous" | "use-credentials";
     children?: ReactNode;
     imageID?: number;
@@ -55,6 +56,8 @@ export interface PreviewProps extends BaseProps {
     crossOrigin?: "anonymous" | "use-credentials";
     maxZoom?: number;
     minZoom?: number;
+    previewCls?: string;
+    previewStyle?: React.CSSProperties;
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -70,6 +73,8 @@ export interface PreviewProps extends BaseProps {
     onDownload?: (src: string, index: number) => void;
     setDownloadName?: (src: string) => string;
 }
+export interface PreviewInnerProps extends Omit<PreviewProps, "previewCls" | "previewStyle"> {
+}
 export interface MenuProps {
     min?: number;
     max?: number;
@@ -108,6 +113,7 @@ export interface SliderProps {
     step?: number;
 }
 export interface HeaderProps {
+    closable: boolean;
     renderHeader?: (info: any) => ReactNode;
     title?: string;
     titleStyle?: React.CSSProperties;

package/lib/es/image/preview.d.ts

@@ -31,6 +31,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         lazyLoadMargin: PropTypes.Requireable<string>;
         preLoad: PropTypes.Requireable<boolean>;
         preLoadGap: PropTypes.Requireable<number>;
+        previewCls: PropTypes.Requireable<string>;
+        previewStyle: PropTypes.Requireable<object>;
         disableDownload: PropTypes.Requireable<boolean>;
         zIndex: PropTypes.Requireable<number>;
         renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
@@ -51,6 +53,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         src: any[];
         lazyLoad: boolean;
         lazyLoadMargin: string;
+        closable: boolean;
     };
     get adapter(): {
         getContext(key: string): any;

package/lib/es/image/preview.js

@@ -1,3 +1,4 @@
+import _omit from "lodash/omit";
 import _isEqual from "lodash/isEqual";
 import _isObject from "lodash/isObject";
 var __rest = this && this.__rest || function (s, e) {
@@ -145,6 +146,10 @@ export default class Preview extends BaseComponent {
         setDownloadName
       } = _a,
       restProps = __rest(_a, ["src", "className", "style", "lazyLoad", "setDownloadName"]);
+    const previewInnerProps = Object.assign(Object.assign({}, _omit(restProps, ['previewCls', 'previewStyle'])), {
+      className: restProps === null || restProps === void 0 ? void 0 : restProps.previewCls,
+      style: restProps === null || restProps === void 0 ? void 0 : restProps.previewStyle
+    });
     const {
       currentIndex,
       visible
@@ -173,7 +178,7 @@ export default class Preview extends BaseComponent {
       id: this.previewGroupId,
       style: style,
       className: cls(`${prefixCls}-preview-group`, className)
-    }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
+    }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, previewInnerProps, {
       ref: this.previewRef,
       src: finalSrcList,
       currentIndex: currentIndex,
@@ -207,6 +212,8 @@ Preview.propTypes = {
   lazyLoadMargin: PropTypes.string,
   preLoad: PropTypes.bool,
   preLoadGap: PropTypes.number,
+  previewCls: PropTypes.string,
+  previewStyle: PropTypes.object,
   disableDownload: PropTypes.bool,
   zIndex: PropTypes.number,
   renderHeader: PropTypes.func,
@@ -226,5 +233,6 @@ Preview.propTypes = {
 Preview.defaultProps = {
   src: [],
   lazyLoad: true,
-  lazyLoadMargin: "0px 100px 100px 0px"
+  lazyLoadMargin: "0px 100px 100px 0px",
+  closable: true
 };

package/lib/es/image/previewHeader.js

@@ -9,7 +9,8 @@ const Header = /*#__PURE__*/forwardRef((_ref, ref) => {
     onClose,
     titleStyle,
     className,
-    renderHeader
+    renderHeader,
+    closable
   } = _ref;
   return /*#__PURE__*/React.createElement(PreviewContext.Consumer, null, _ref2 => {
     let {
@@ -26,7 +27,7 @@ const Header = /*#__PURE__*/forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-title`,
       style: titleStyle
-    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/React.createElement("section", {
+    }, renderHeader ? renderHeader(title) : title), closable && /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-close`,
       onMouseUp: onClose
     }, /*#__PURE__*/React.createElement(IconClose, null)));

package/lib/es/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
+import { PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter, RatioType } from '@douyinfe/semi-foundation/lib/es/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";