@douyinfe/semi-ui 2.27.0 → 2.27.1-alpha.1

package/lib/es/card/meta.js

@@ -27,18 +27,18 @@ class Meta extends PureComponent {
     } = _a,
           others = __rest(_a, ["avatar", "className", "description", "style", "title"]);
 
-    const metaCls = cls("".concat(prefixcls, "-meta"), className);
+    const metaCls = cls(`${prefixcls}-meta`, className);
     const avatarNode = avatar && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-meta-avatar")
+      className: `${prefixcls}-meta-avatar`
     }, avatar);
     const titleNode = title && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper-title")
+      className: `${prefixcls}-meta-wrapper-title`
     }, title);
     const descriptionNode = description && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper-description")
+      className: `${prefixcls}-meta-wrapper-description`
     }, description);
     const wrapper = title || description ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper")
+      className: `${prefixcls}-meta-wrapper`
     }, titleNode, descriptionNode) : null;
     return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
       className: metaCls,

package/lib/es/carousel/CarouselArrow.js

@@ -36,16 +36,16 @@ class CarouselArrow extends React.PureComponent {
     } = this.props;
     const classNames = cls({
       [cssClasses.CAROUSEL_ARROW]: true,
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme,
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
+      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
+      [`${cssClasses.CAROUSEL_ARROW}-hover`]: type === 'hover'
     });
     const leftClassNames = cls({
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-prev")]: true,
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
+      [`${cssClasses.CAROUSEL_ARROW}-prev`]: true,
+      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
     });
     const rightClassNames = cls({
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-next")]: true,
-      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
+      [`${cssClasses.CAROUSEL_ARROW}-next`]: true,
+      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classNames

package/lib/es/carousel/CarouselIndicator.js

@@ -62,10 +62,10 @@ class CarouselIndicator extends React.PureComponent {
         // role='none' 
         key: i,
         "data-index": i,
-        className: cls(["".concat(cssClasses.CAROUSEL_INDICATOR, "-item")], {
-          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
-          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-").concat(theme)]: theme,
-          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-").concat(size)]: size
+        className: cls([`${cssClasses.CAROUSEL_INDICATOR}-item`], {
+          [`${cssClasses.CAROUSEL_INDICATOR}-item-active`]: i === activeIndex,
+          [`${cssClasses.CAROUSEL_INDICATOR}-item-${theme}`]: theme,
+          [`${cssClasses.CAROUSEL_INDICATOR}-item-${size}`]: size
         }),
         onClick: () => this.handleIndicatorClick(i),
         onMouseEnter: () => this.handleIndicatorHover(i)
@@ -89,8 +89,8 @@ class CarouselIndicator extends React.PureComponent {
 
     const classNames = cls(className, {
       [cssClasses.CAROUSEL_INDICATOR]: true,
-      ["".concat(cssClasses.CAROUSEL_INDICATOR, "-").concat(type)]: type,
-      ["".concat(cssClasses.CAROUSEL_INDICATOR, "-").concat(position)]: position
+      [`${cssClasses.CAROUSEL_INDICATOR}-${type}`]: type,
+      [`${cssClasses.CAROUSEL_INDICATOR}-${position}`]: position
     });
     const indicatorContent = this.renderIndicatorContent();
     return /*#__PURE__*/React.createElement("div", Object.assign({

package/lib/es/carousel/index.js

@@ -96,20 +96,20 @@ class Carousel extends BaseComponent {
         const isNext = index === this.getValidIndex(activeIndex + 1);
         const animateStyle = {
           transitionTimingFunction: 'ease',
-          transitionDuration: "".concat(speed, "ms"),
+          transitionDuration: `${speed}ms`,
           animationTimingFunction: 'ease',
-          animationDuration: "".concat(speed, "ms")
+          animationDuration: `${speed}ms`
         };
         return /*#__PURE__*/React.cloneElement(child, {
           style: Object.assign(Object.assign({}, child.props.style), animateStyle),
           className: cls(child.props.className, {
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item")]: true,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
-            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
+            [`${cssClasses.CAROUSEL_CONTENT}-item-prev`]: isPrev,
+            [`${cssClasses.CAROUSEL_CONTENT}-item-next`]: isNext,
+            [`${cssClasses.CAROUSEL_CONTENT}-item-current`]: isCurrent,
+            [`${cssClasses.CAROUSEL_CONTENT}-item`]: true,
+            [`${cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
+            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]: animation === 'slide' && !isInit && isCurrent,
+            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]: animation === 'slide' && !isInit && index === preIndex
           })
         });
       }));
@@ -252,9 +252,9 @@ class Carousel extends BaseComponent {
       onMouseEnter: _debounce(this.handleMouseEnter, 400),
       onMouseLeave: _debounce(this.handleMouseLeave, 400)
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls(["".concat(cssClasses.CAROUSEL_CONTENT, "-").concat(animation)], {
-        ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
-        ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
+      className: cls([`${cssClasses.CAROUSEL_CONTENT}-${animation}`], {
+        [`${cssClasses.CAROUSEL_CONTENT}`]: true,
+        [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse
       }),
       "x-semi-prop": "children"
     }, this.renderChildren()), this.renderIndicator(), this.renderArrow());

package/lib/es/cascader/index.js

@@ -57,8 +57,8 @@ class Cascader extends BaseComponent {
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
 
       if (!_isEmpty(keyEntities) && !_isEmpty(keyEntities[nodeKey])) {
-        const tagCls = cls("".concat(prefixcls, "-selection-tag"), {
-          ["".concat(prefixcls, "-selection-tag-disabled")]: isDsiabled
+        const tagCls = cls(`${prefixcls}-selection-tag`, {
+          [`${prefixcls}-selection-tag-disabled`]: isDsiabled
         }); // custom render tags
 
         if (_isFunction(displayRender)) {
@@ -66,7 +66,7 @@ class Cascader extends BaseComponent {
         } else {
           return /*#__PURE__*/React.createElement(Tag, {
             size: size === 'default' ? 'large' : size,
-            key: "tag-".concat(nodeKey, "-").concat(idx),
+            key: `tag-${nodeKey}-${idx}`,
             color: "white",
             className: tagCls,
             closable: true,
@@ -122,7 +122,7 @@ class Cascader extends BaseComponent {
         multiple
       } = this.props;
       const searchable = Boolean(filterTreeNode) && isSearching;
-      const popoverCls = cls(dropdownClassName, "".concat(prefixcls, "-popover"));
+      const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
       const renderData = this.foundation.getRenderData();
       const content = /*#__PURE__*/React.createElement("div", {
         className: popoverCls,
@@ -157,8 +157,8 @@ class Cascader extends BaseComponent {
         showRestTagsPopover,
         restTagsPopoverProps
       } = this.props;
-      const plusNCls = cls("".concat(prefixcls, "-selection-n"), {
-        ["".concat(prefixcls, "-selection-n-disabled")]: disabled
+      const plusNCls = cls(`${prefixcls}-selection-n`, {
+        [`${prefixcls}-selection-n-disabled`]: disabled
       });
       const renderPlusNChildren = /*#__PURE__*/React.createElement("span", {
         className: plusNCls
@@ -215,7 +215,7 @@ class Cascader extends BaseComponent {
           displayText = displayRender(displayPath);
         } else {
           displayText = displayPath.map((path, index) => /*#__PURE__*/React.createElement(Fragment, {
-            key: "".concat(path, "-").concat(index)
+            key: `${path}-${index}`
           }, index < displayPath.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, path, separator) : path));
         }
       }
@@ -238,7 +238,7 @@ class Cascader extends BaseComponent {
         if (multiple) {
           if (_isEmpty(checkedKeys)) {
             return /*#__PURE__*/React.createElement("span", {
-              className: "".concat(prefixcls, "-selection-placeholder")
+              className: `${prefixcls}-selection-placeholder`
             }, placeholder);
           }
 
@@ -246,7 +246,7 @@ class Cascader extends BaseComponent {
         } else {
           const displayText = this.renderDisplayText();
           const spanCls = cls({
-            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
+            [`${prefixcls}-selection-placeholder`]: !displayText
           });
           return /*#__PURE__*/React.createElement("span", {
             className: spanCls
@@ -263,9 +263,9 @@ class Cascader extends BaseComponent {
         suffix
       } = this.props;
       const suffixWrapperCls = cls({
-        ["".concat(prefixcls, "-suffix")]: true,
-        ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
-        ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
+        [`${prefixcls}-suffix`]: true,
+        [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
+        [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: suffixWrapperCls,
@@ -281,11 +281,11 @@ class Cascader extends BaseComponent {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = cls({
-        ["".concat(prefixcls, "-prefix")]: true,
+        [`${prefixcls}-prefix`]: true,
         // to be doublechecked
-        ["".concat(prefixcls, "-inset-label")]: insetLabel,
-        ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
-        ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
+        [`${prefixcls}-inset-label`]: insetLabel,
+        [`${prefixcls}-prefix-text`]: labelNode && _isString(labelNode),
+        [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -374,7 +374,7 @@ class Cascader extends BaseComponent {
     };
 
     this.renderClearBtn = () => {
-      const clearCls = cls("".concat(prefixcls, "-clearbtn"));
+      const clearCls = cls(`${prefixcls}-clearbtn`);
       const {
         clearIcon
       } = this.props;
@@ -404,7 +404,7 @@ class Cascader extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls("".concat(prefixcls, "-arrow")),
+        className: cls(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -434,23 +434,23 @@ class Cascader extends BaseComponent {
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
       const classNames = useCustomTrigger ? cls(className) : cls(prefixcls, className, {
-        ["".concat(prefixcls, "-focus")]: isFocus || isOpen && !isInput,
-        ["".concat(prefixcls, "-disabled")]: disabled,
-        ["".concat(prefixcls, "-single")]: true,
-        ["".concat(prefixcls, "-filterable")]: filterable,
-        ["".concat(prefixcls, "-error")]: validateStatus === 'error',
-        ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
-        ["".concat(prefixcls, "-small")]: size === 'small',
-        ["".concat(prefixcls, "-large")]: size === 'large',
-        ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
-        ["".concat(prefixcls, "-with-suffix")]: suffix
+        [`${prefixcls}-focus`]: isFocus || isOpen && !isInput,
+        [`${prefixcls}-disabled`]: disabled,
+        [`${prefixcls}-single`]: true,
+        [`${prefixcls}-filterable`]: filterable,
+        [`${prefixcls}-error`]: validateStatus === 'error',
+        [`${prefixcls}-warning`]: validateStatus === 'warning',
+        [`${prefixcls}-small`]: size === 'small',
+        [`${prefixcls}-large`]: size === 'large',
+        [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+        [`${prefixcls}-with-suffix`]: suffix
       });
       const mouseEvent = showClear ? {
         onMouseEnter: () => this.handleMouseOver(),
         onMouseLeave: () => this.handleMouseLeave()
       } : {};
-      const sectionCls = cls("".concat(prefixcls, "-selection"), {
-        ["".concat(prefixcls, "-selection-multiple")]: multiple && !_isEmpty(checkedKeys)
+      const sectionCls = cls(`${prefixcls}-selection`, {
+        [`${prefixcls}-selection-multiple`]: multiple && !_isEmpty(checkedKeys)
       });
       const inner = useCustomTrigger ? this.renderCustomTrigger() : [/*#__PURE__*/React.createElement(Fragment, {
         key: 'prefix'
@@ -841,7 +841,7 @@ class Cascader extends BaseComponent {
       keyEntities,
       resolvedCheckedKeys
     } = this.state;
-    const tagInputcls = cls("".concat(prefixcls, "-tagInput-wrapper"));
+    const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
     const tagValue = [];
     const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
     [...realKeys].forEach(checkedKey => {
@@ -874,7 +874,7 @@ class Cascader extends BaseComponent {
       size,
       disabled
     } = this.props;
-    const inputcls = cls("".concat(prefixcls, "-input"));
+    const inputcls = cls(`${prefixcls}-input`);
     const {
       inputValue,
       inputPlaceHolder,
@@ -887,13 +887,13 @@ class Cascader extends BaseComponent {
       onChange: this.handleInputChange
     };
     const wrappercls = cls({
-      ["".concat(prefixcls, "-search-wrapper")]: true
+      [`${prefixcls}-search-wrapper`]: true
     });
     const displayText = this.renderDisplayText();
     const spanCls = cls({
-      ["".concat(prefixcls, "-selection-placeholder")]: !displayText,
-      ["".concat(prefixcls, "-selection-text-hide")]: showInput && inputValue,
-      ["".concat(prefixcls, "-selection-text-inactive")]: showInput && !inputValue
+      [`${prefixcls}-selection-placeholder`]: !displayText,
+      [`${prefixcls}-selection-text-hide`]: showInput && inputValue,
+      [`${prefixcls}-selection-text-inactive`]: showInput && !inputValue
     });
     return /*#__PURE__*/React.createElement("div", {
       className: wrappercls

package/lib/es/cascader/item.js

@@ -97,29 +97,29 @@ export default class Item extends PureComponent {
       let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       const finalCls = style => {
-        return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
+        return style + (haveMarginLeft ? ` ${prefixcls}-icon-left` : '');
       };
 
       switch (type) {
         case 'child':
           return /*#__PURE__*/React.createElement(IconChevronRight, {
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)
           });
 
         case 'tick':
           return /*#__PURE__*/React.createElement(IconTick, {
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)
           });
 
         case 'loading':
           return /*#__PURE__*/React.createElement(Spin, {
-            wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
+            wrapperClassName: finalCls(`${prefixcls}-spin-icon`)
           });
 
         case 'empty':
           return /*#__PURE__*/React.createElement("span", {
             "aria-hidden": true,
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-empty`)
           });
 
         default:
@@ -138,8 +138,8 @@ export default class Item extends PureComponent {
           item.split(keyword).forEach((node, index) => {
             if (index > 0) {
               content.push( /*#__PURE__*/React.createElement("span", {
-                className: "".concat(prefixcls, "-label-highlight"),
-                key: "".concat(index, "-").concat(idx)
+                className: `${prefixcls}-label-highlight`,
+                key: `${index}-${idx}`
               }, keyword));
             }
 
@@ -163,7 +163,7 @@ export default class Item extends PureComponent {
         halfCheckedKeys
       } = this.props;
       const content = /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(prefixcls, "-list"),
+        className: `${prefixcls}-list`,
         key: 'flatten-list'
       }, data.map(item => {
         const {
@@ -172,8 +172,8 @@ export default class Item extends PureComponent {
           disabled
         } = item;
         const className = cls(prefixcls, {
-          ["".concat(prefixcls, "-flatten")]: true,
-          ["".concat(prefixcls, "-disabled")]: disabled
+          [`${prefixcls}-flatten`]: true,
+          [`${prefixcls}-disabled`]: disabled
         });
         return /*#__PURE__*/React.createElement("li", {
           role: 'menuitem',
@@ -184,13 +184,13 @@ export default class Item extends PureComponent {
           },
           onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixcls, "-label")
+          className: `${prefixcls}-label`
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
           onChange: e => this.onCheckboxChange(e, item),
           disabled: disabled,
           indeterminate: halfCheckedKeys.has(item.key),
           checked: checkedKeys.has(item.key),
-          className: "".concat(prefixcls, "-label-checkbox")
+          className: `${prefixcls}-label-checkbox`
         }), this.highlight(searchText)));
       }));
       return content;
@@ -208,7 +208,7 @@ export default class Item extends PureComponent {
     const ind = content.length;
     content.push( /*#__PURE__*/React.createElement("ul", {
       role: 'menu',
-      className: "".concat(prefixcls, "-list"),
+      className: `${prefixcls}-list`,
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, renderData.map(item => {
@@ -236,16 +236,16 @@ export default class Item extends PureComponent {
       }
 
       const className = cls(prefixcls, {
-        ["".concat(prefixcls, "-active")]: active && !selected,
-        ["".concat(prefixcls, "-select")]: selected && !multiple,
-        ["".concat(prefixcls, "-disabled")]: disabled
+        [`${prefixcls}-active`]: active && !selected,
+        [`${prefixcls}-select`]: selected && !multiple,
+        [`${prefixcls}-disabled`]: disabled
       });
       const otherAriaProps = parentKey ? {
-        ['aria-owns']: "cascaderItem-".concat(parentKey)
+        ['aria-owns']: `cascaderItem-${parentKey}`
       } : {};
       return /*#__PURE__*/React.createElement("li", Object.assign({
         role: 'menuitem',
-        id: "cascaderItem-".concat(key),
+        id: `cascaderItem-${key}`,
         "aria-expanded": active,
         "aria-haspopup": Boolean(showExpand),
         "aria-disabled": disabled
@@ -260,13 +260,13 @@ export default class Item extends PureComponent {
           this.onHover(e, item);
         }
       }), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixcls, "-label")
+        className: `${prefixcls}-label`
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
         onChange: e => this.onCheckboxChange(e, item),
         disabled: disabled,
         indeterminate: halfCheckedKeys.has(item.key),
         checked: checkedKeys.has(item.key),
-        className: "".concat(prefixcls, "-label-checkbox")
+        className: `${prefixcls}-label-checkbox`
       }), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
 
@@ -284,10 +284,10 @@ export default class Item extends PureComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Cascader"
     }, locale => /*#__PURE__*/React.createElement("ul", {
-      className: "".concat(prefixcls, " ").concat(prefixcls, "-empty"),
+      className: `${prefixcls} ${prefixcls}-empty`,
       key: 'empty-list'
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixcls, "-label"),
+      className: `${prefixcls}-label`,
       "x-semi-prop": "emptyContent"
     }, emptyContent || locale.emptyText)));
   }
@@ -303,9 +303,9 @@ export default class Item extends PureComponent {
     const isEmpty = !data || !data.length;
     let content;
     const listsCls = cls({
-      ["".concat(prefixcls, "-lists")]: true,
-      ["".concat(prefixcls, "-lists-rtl")]: direction === 'rtl',
-      ["".concat(prefixcls, "-lists-empty")]: isEmpty
+      [`${prefixcls}-lists`]: true,
+      [`${prefixcls}-lists-rtl`]: direction === 'rtl',
+      [`${prefixcls}-lists-empty`]: isEmpty
     });
 
     if (isEmpty) {

package/lib/es/checkbox/checkbox.js

@@ -188,20 +188,20 @@ class Checkbox extends BaseComponent {
     const prefix = prefixCls || css.PREFIX;
     const focusOuter = props.isCardType || props.isPureCardType;
     const wrapper = classnames(prefix, {
-      ["".concat(prefix, "-disabled")]: props.disabled,
-      ["".concat(prefix, "-indeterminate")]: indeterminate,
-      ["".concat(prefix, "-checked")]: props.checked,
-      ["".concat(prefix, "-unChecked")]: !props.checked,
-      ["".concat(prefix, "-cardType")]: props.isCardType,
-      ["".concat(prefix, "-cardType_disabled")]: props.disabled && props.isCardType,
-      ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
-      ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
-      ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
+      [`${prefix}-disabled`]: props.disabled,
+      [`${prefix}-indeterminate`]: indeterminate,
+      [`${prefix}-checked`]: props.checked,
+      [`${prefix}-unChecked`]: !props.checked,
+      [`${prefix}-cardType`]: props.isCardType,
+      [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
+      [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
+      [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+      [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
       [className]: Boolean(className),
-      ["".concat(prefix, "-focus")]: focusVisible && focusOuter
+      [`${prefix}-focus`]: focusVisible && focusOuter
     });
-    const extraCls = classnames("".concat(prefix, "-extra"), {
-      ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
+    const extraCls = classnames(`${prefix}-extra`, {
+      [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children
     });
     const name = inGroup && this.context.checkboxGroup.name;
     const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
@@ -212,10 +212,10 @@ class Checkbox extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefix, "-content")
+        className: `${prefix}-content`
       }, children ? /*#__PURE__*/React.createElement("span", {
         id: addonId,
-        className: "".concat(prefix, "-addon"),
+        className: `${prefix}-addon`,
         "x-semi-prop": xSemiPropChildren
       }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
         id: extraId,

package/lib/es/checkbox/checkboxGroup.js

@@ -68,10 +68,10 @@ class CheckboxGroup extends BaseComponent {
     const prefix = prefixCls || css.PREFIX;
     const prefixClsDisplay = classnames({
       [prefix]: true,
-      ["".concat(prefix, "-wrapper")]: true,
-      ["".concat(prefix, "-").concat(direction)]: direction,
-      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType,
-      ["".concat(prefix, "-").concat(direction, "-pureCardType")]: direction && isPureCardType
+      [`${prefix}-wrapper`]: true,
+      [`${prefix}-${direction}`]: direction,
+      [`${prefix}-${direction}-cardType`]: direction && isCardType,
+      [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType
     }, className);
     const realValue = this.state.value.slice();
     let inner;

package/lib/es/checkbox/checkboxInner.js

@@ -38,14 +38,14 @@ class CheckboxInner extends PureComponent {
     } = this.props;
     const prefix = prefixCls || css.PREFIX;
     const wrapper = classnames({
-      ["".concat(prefix, "-inner")]: true,
-      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
-      ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
+      [`${prefix}-inner`]: true,
+      [`${prefix}-inner-checked`]: Boolean(checked),
+      [`${prefix}-inner-pureCardType`]: isPureCardType
     }, css.WRAPPER);
     const inner = classnames({
-      ["".concat(prefix, "-inner-display")]: true,
-      ["".concat(prefix, "-focus")]: focusInner,
-      ["".concat(prefix, "-focus-border")]: focusInner && !checked
+      [`${prefix}-inner-display`]: true,
+      [`${prefix}-focus`]: focusInner,
+      [`${prefix}-focus-border`]: focusInner && !checked
     });
     const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
     const inputProps = {

package/lib/es/collapse/item.js

@@ -48,15 +48,15 @@ export default class CollapsePanel extends PureComponent {
 
     const icon = /*#__PURE__*/React.createElement("span", {
       "aria-hidden": 'true',
-      className: cls(["".concat(cssClasses.PREFIX, "-header-icon"), {
-        ["".concat(cssClasses.PREFIX, "-header-iconDisabled")]: !expandIconEnable
+      className: cls([`${cssClasses.PREFIX}-header-icon`, {
+        [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable
       }])
     }, expandIconEnable ? active ? collapseIcon : expandIcon : expandIcon);
     const iconPosLeft = expandIconPosition === 'left';
 
     if (typeof header === 'string') {
       return /*#__PURE__*/React.createElement(React.Fragment, null, showArrow && (iconPosLeft ? icon : null), /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cssClasses.PREFIX, "-header-right")
+        className: `${cssClasses.PREFIX}-header-right`
       }, /*#__PURE__*/React.createElement("span", null, extra), showArrow && (iconPosLeft ? null : icon)));
     }
 
@@ -86,15 +86,15 @@ export default class CollapsePanel extends PureComponent {
     } = this.context;
     const active = activeSet.has(itemKey);
     const itemCls = cls(className, {
-      ["".concat(cssClasses.PREFIX, "-item")]: true
+      [`${cssClasses.PREFIX}-item`]: true
     });
     const headerCls = cls({
-      ["".concat(cssClasses.PREFIX, "-header")]: true,
-      ["".concat(cssClasses.PREFIX, "-header-disabled")]: disabled,
-      ["".concat(cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
+      [`${cssClasses.PREFIX}-header`]: true,
+      [`${cssClasses.PREFIX}-header-disabled`]: disabled,
+      [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left'
     });
     const contentCls = cls({
-      ["".concat(cssClasses.PREFIX, "-content")]: true
+      [`${cssClasses.PREFIX}-content`]: true
     });
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: itemCls
@@ -116,7 +116,7 @@ export default class CollapsePanel extends PureComponent {
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.PREFIX, "-content-wrapper")
+      className: `${cssClasses.PREFIX}-content-wrapper`
     }, children))));
   }
 

package/lib/es/collapsible/index.js

@@ -117,10 +117,10 @@ class Collapsible extends BaseComponent {
       overflow: 'hidden',
       height: this.props.isOpen ? this.state.domHeight : this.props.collapseHeight,
       opacity: this.props.isOpen || !this.props.fade || this.props.collapseHeight !== 0 ? 1 : 0,
-      transitionDuration: "".concat(this.props.motion && this.state.isTransitioning ? this.props.duration : 0, "ms")
+      transitionDuration: `${this.props.motion && this.state.isTransitioning ? this.props.duration : 0}ms`
     }, this.props.style);
-    const wrapperCls = cls("".concat(cssClasses.PREFIX, "-wrapper"), {
-      ["".concat(cssClasses.PREFIX, "-transition")]: this.props.motion && this.state.isTransitioning
+    const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
+      [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,

package/lib/es/configProvider/index.js

@@ -23,7 +23,7 @@ export default class ConfigProvider extends React.Component {
 
     if (direction === 'rtl') {
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(BASE_CLASS_PREFIX, "-rtl")
+        className: `${BASE_CLASS_PREFIX}-rtl`
       }, children);
     }
 

package/lib/es/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;