@douyinfe/semi-ui 2.27.1 → 2.28.0-beta.1

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,
@@ -119,10 +119,11 @@ class Cascader extends BaseComponent {
         topSlot,
         bottomSlot,
         showNext,
-        multiple
+        multiple,
+        filterRender
       } = 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,
@@ -146,7 +147,8 @@ class Cascader extends BaseComponent {
         data: renderData,
         multiple: multiple,
         checkedKeys: checkedKeys,
-        halfCheckedKeys: halfCheckedKeys
+        halfCheckedKeys: halfCheckedKeys,
+        filterRender: filterRender
       }), bottomSlot);
       return content;
     };
@@ -157,8 +159,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 +217,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 +240,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 +248,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 +265,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 +283,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 +376,7 @@ class Cascader extends BaseComponent {
     };
 
     this.renderClearBtn = () => {
-      const clearCls = cls("".concat(prefixcls, "-clearbtn"));
+      const clearCls = cls(`${prefixcls}-clearbtn`);
       const {
         clearIcon
       } = this.props;
@@ -404,7 +406,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 +436,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 +843,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 +876,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 +889,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.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import { CheckboxEvent } from '../checkbox';
@@ -18,6 +18,19 @@ export interface Data extends BasicData {
     data: CascaderData;
     searchText: React.ReactNode[];
 }
+export interface FilterRenderProps {
+    className: string;
+    inputValue: string;
+    disabled: boolean;
+    data: CascaderData[];
+    checkStatus: {
+        checked: boolean;
+        halfChecked: boolean;
+    };
+    selected: boolean;
+    onClick: (e: React.MouseEvent) => void;
+    onCheck: (e: React.MouseEvent) => void;
+}
 export interface CascaderItemProps {
     activeKeys: Set<string>;
     selectedKeys: Set<string>;
@@ -38,6 +51,7 @@ export interface CascaderItemProps {
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
+    filterRender?: (props: FilterRenderProps) => ReactNode;
 }
 export default class Item extends PureComponent<CascaderItemProps> {
     static contextType: React.Context<ContextValue>;

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));
             }
 
@@ -159,38 +159,70 @@ export default class Item extends PureComponent {
     this.renderFlattenOption = data => {
       const {
         multiple,
+        selectedKeys,
         checkedKeys,
-        halfCheckedKeys
+        halfCheckedKeys,
+        keyword,
+        filterRender
       } = this.props;
       const content = /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(prefixcls, "-list"),
+        className: `${prefixcls}-list`,
         key: 'flatten-list'
       }, data.map(item => {
         const {
           searchText,
           key,
-          disabled
+          disabled,
+          pathData
         } = item;
+        const selected = selectedKeys.has(key);
         const className = cls(prefixcls, {
-          ["".concat(prefixcls, "-flatten")]: true,
-          ["".concat(prefixcls, "-disabled")]: disabled
+          [`${prefixcls}-flatten`]: true && !filterRender,
+          [`${prefixcls}-disabled`]: disabled,
+          [`${prefixcls}-select`]: selected && !multiple
         });
+
+        const onClick = e => {
+          this.onClick(e, item);
+        };
+
+        const onKeyPress = e => this.handleItemEnterPress(e, item);
+
+        const onCheck = e => this.onCheckboxChange(e, item);
+
+        if (filterRender) {
+          const props = {
+            className,
+            inputValue: keyword,
+            disabled,
+            data: pathData,
+            checkStatus: {
+              checked: checkedKeys.has(item.key),
+              halfChecked: halfCheckedKeys.has(item.key)
+            },
+            selected,
+            onClick,
+            onCheck
+          };
+          return /*#__PURE__*/React.cloneElement(filterRender(props), {
+            key
+          });
+        }
+
         return /*#__PURE__*/React.createElement("li", {
           role: 'menuitem',
           className: className,
           key: key,
-          onClick: e => {
-            this.onClick(e, item);
-          },
-          onKeyPress: e => this.handleItemEnterPress(e, item)
+          onClick: onClick,
+          onKeyPress: onKeyPress
         }, /*#__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),
+          onChange: onCheck,
           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 +240,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 +268,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 +292,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 +316,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 +335,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);
     }