@douyinfe/semi-ui 2.29.0 → 2.30.0-alpha.1

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 ? ` ${prefixcls}-icon-left` : '');
+        return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
       };
 
       switch (type) {
         case 'child':
           return /*#__PURE__*/React.createElement(IconChevronRight, {
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
           });
 
         case 'tick':
           return /*#__PURE__*/React.createElement(IconTick, {
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
           });
 
         case 'loading':
           return /*#__PURE__*/React.createElement(Spin, {
-            wrapperClassName: finalCls(`${prefixcls}-spin-icon`)
+            wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
           });
 
         case 'empty':
           return /*#__PURE__*/React.createElement("span", {
             "aria-hidden": true,
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-empty`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(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: `${prefixcls}-label-highlight`,
-                key: `${index}-${idx}`
+                className: "".concat(prefixcls, "-label-highlight"),
+                key: "".concat(index, "-").concat(idx)
               }, keyword));
             }
 
@@ -166,7 +166,7 @@ export default class Item extends PureComponent {
         filterRender
       } = this.props;
       const content = /*#__PURE__*/React.createElement("ul", {
-        className: `${prefixcls}-list`,
+        className: "".concat(prefixcls, "-list"),
         key: 'flatten-list'
       }, data.map(item => {
         const {
@@ -177,9 +177,9 @@ export default class Item extends PureComponent {
         } = item;
         const selected = selectedKeys.has(key);
         const className = cls(prefixcls, {
-          [`${prefixcls}-flatten`]: true && !filterRender,
-          [`${prefixcls}-disabled`]: disabled,
-          [`${prefixcls}-select`]: selected && !multiple
+          ["".concat(prefixcls, "-flatten")]: true && !filterRender,
+          ["".concat(prefixcls, "-disabled")]: disabled,
+          ["".concat(prefixcls, "-select")]: selected && !multiple
         });
 
         const onClick = e => {
@@ -216,13 +216,13 @@ export default class Item extends PureComponent {
           onClick: onClick,
           onKeyPress: onKeyPress
         }, /*#__PURE__*/React.createElement("span", {
-          className: `${prefixcls}-label`
+          className: "".concat(prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
           onChange: onCheck,
           disabled: disabled,
           indeterminate: halfCheckedKeys.has(item.key),
           checked: checkedKeys.has(item.key),
-          className: `${prefixcls}-label-checkbox`
+          className: "".concat(prefixcls, "-label-checkbox")
         }), this.highlight(searchText)));
       }));
       return content;
@@ -240,7 +240,7 @@ export default class Item extends PureComponent {
     const ind = content.length;
     content.push( /*#__PURE__*/React.createElement("ul", {
       role: 'menu',
-      className: `${prefixcls}-list`,
+      className: "".concat(prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, renderData.map(item => {
@@ -268,16 +268,16 @@ export default class Item extends PureComponent {
       }
 
       const className = cls(prefixcls, {
-        [`${prefixcls}-active`]: active && !selected,
-        [`${prefixcls}-select`]: selected && !multiple,
-        [`${prefixcls}-disabled`]: disabled
+        ["".concat(prefixcls, "-active")]: active && !selected,
+        ["".concat(prefixcls, "-select")]: selected && !multiple,
+        ["".concat(prefixcls, "-disabled")]: disabled
       });
       const otherAriaProps = parentKey ? {
-        ['aria-owns']: `cascaderItem-${parentKey}`
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
       } : {};
       return /*#__PURE__*/React.createElement("li", Object.assign({
         role: 'menuitem',
-        id: `cascaderItem-${key}`,
+        id: "cascaderItem-".concat(key),
         "aria-expanded": active,
         "aria-haspopup": Boolean(showExpand),
         "aria-disabled": disabled
@@ -292,13 +292,13 @@ export default class Item extends PureComponent {
           this.onHover(e, item);
         }
       }), /*#__PURE__*/React.createElement("span", {
-        className: `${prefixcls}-label`
+        className: "".concat(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: `${prefixcls}-label-checkbox`
+        className: "".concat(prefixcls, "-label-checkbox")
       }), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
 
@@ -316,10 +316,10 @@ export default class Item extends PureComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Cascader"
     }, locale => /*#__PURE__*/React.createElement("ul", {
-      className: `${prefixcls} ${prefixcls}-empty`,
+      className: "".concat(prefixcls, " ").concat(prefixcls, "-empty"),
       key: 'empty-list'
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefixcls}-label`,
+      className: "".concat(prefixcls, "-label"),
       "x-semi-prop": "emptyContent"
     }, emptyContent || locale.emptyText)));
   }
@@ -335,9 +335,9 @@ export default class Item extends PureComponent {
     const isEmpty = !data || !data.length;
     let content;
     const listsCls = cls({
-      [`${prefixcls}-lists`]: true,
-      [`${prefixcls}-lists-rtl`]: direction === 'rtl',
-      [`${prefixcls}-lists-empty`]: isEmpty
+      ["".concat(prefixcls, "-lists")]: true,
+      ["".concat(prefixcls, "-lists-rtl")]: direction === 'rtl',
+      ["".concat(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, {
-      [`${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,
+      ["".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,
       [className]: Boolean(className),
-      [`${prefix}-focus`]: focusVisible && focusOuter
+      ["".concat(prefix, "-focus")]: focusVisible && focusOuter
     });
-    const extraCls = classnames(`${prefix}-extra`, {
-      [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children
+    const extraCls = classnames("".concat(prefix, "-extra"), {
+      ["".concat(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: `${prefix}-content`
+        className: "".concat(prefix, "-content")
       }, children ? /*#__PURE__*/React.createElement("span", {
         id: addonId,
-        className: `${prefix}-addon`,
+        className: "".concat(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,
-      [`${prefix}-wrapper`]: true,
-      [`${prefix}-${direction}`]: direction,
-      [`${prefix}-${direction}-cardType`]: direction && isCardType,
-      [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType
+      ["".concat(prefix, "-wrapper")]: true,
+      ["".concat(prefix, "-").concat(direction)]: direction,
+      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType,
+      ["".concat(prefix, "-").concat(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({
-      [`${prefix}-inner`]: true,
-      [`${prefix}-inner-checked`]: Boolean(checked),
-      [`${prefix}-inner-pureCardType`]: isPureCardType
+      ["".concat(prefix, "-inner")]: true,
+      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
+      ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
     }, css.WRAPPER);
     const inner = classnames({
-      [`${prefix}-inner-display`]: true,
-      [`${prefix}-focus`]: focusInner,
-      [`${prefix}-focus-border`]: focusInner && !checked
+      ["".concat(prefix, "-inner-display")]: true,
+      ["".concat(prefix, "-focus")]: focusInner,
+      ["".concat(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([`${cssClasses.PREFIX}-header-icon`, {
-        [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable
+      className: cls(["".concat(cssClasses.PREFIX, "-header-icon"), {
+        ["".concat(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: `${cssClasses.PREFIX}-header-right`
+        className: "".concat(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, {
-      [`${cssClasses.PREFIX}-item`]: true
+      ["".concat(cssClasses.PREFIX, "-item")]: true
     });
     const headerCls = cls({
-      [`${cssClasses.PREFIX}-header`]: true,
-      [`${cssClasses.PREFIX}-header-disabled`]: disabled,
-      [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left'
+      ["".concat(cssClasses.PREFIX, "-header")]: true,
+      ["".concat(cssClasses.PREFIX, "-header-disabled")]: disabled,
+      ["".concat(cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
     });
     const contentCls = cls({
-      [`${cssClasses.PREFIX}-content`]: true
+      ["".concat(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: `${cssClasses.PREFIX}-content-wrapper`
+      className: "".concat(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: `${this.props.motion && this.state.isTransitioning ? this.props.duration : 0}ms`
+      transitionDuration: "".concat(this.props.motion && this.state.isTransitioning ? this.props.duration : 0, "ms")
     }, this.props.style);
-    const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
-      [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
+    const wrapperCls = cls("".concat(cssClasses.PREFIX, "-wrapper"), {
+      ["".concat(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: `${BASE_CLASS_PREFIX}-rtl`
+        className: "".concat(BASE_CLASS_PREFIX, "-rtl")
       }, children);
     }
 

package/lib/es/datePicker/dateInput.js

@@ -75,7 +75,7 @@ export default class DateInput extends BaseComponent {
       const {
         rangeSeparator
       } = this.props;
-      const rangeInputValue = `${rangeStart}${rangeSeparator}${rangeEnd}`;
+      const rangeInputValue = "".concat(rangeStart).concat(rangeSeparator).concat(rangeEnd);
       return rangeInputValue;
     };
 
@@ -143,7 +143,7 @@ export default class DateInput extends BaseComponent {
     } = this.props;
     const labelNode = prefix || insetLabel;
     return labelNode ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-range-input-prefix`,
+      className: "".concat(prefixCls, "-range-input-prefix"),
       onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e),
       "x-semi-prop": "prefix,insetLabel"
     }, labelNode) : null;
@@ -155,8 +155,8 @@ export default class DateInput extends BaseComponent {
       rangeSeparator
     } = this.props;
     const separatorCls = cls({
-      [`${cssClasses.PREFIX}-range-input-separator`]: true,
-      [`${cssClasses.PREFIX}-range-input-separator-active`]: (rangeStart || rangeEnd) && !disabled
+      ["".concat(cssClasses.PREFIX, "-range-input-separator")]: true,
+      ["".concat(cssClasses.PREFIX, "-range-input-separator-active")]: (rangeStart || rangeEnd) && !disabled
     });
     return /*#__PURE__*/React.createElement("span", {
       onClick: e => !disabled && this.handleRangeStartFocus(e),
@@ -176,7 +176,7 @@ export default class DateInput extends BaseComponent {
       role: "button",
       tabIndex: 0,
       "aria-label": "Clear range input value",
-      className: `${prefixCls}-range-input-clearbtn`,
+      className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
     }, clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, {
       "aria-hidden": true
@@ -190,7 +190,7 @@ export default class DateInput extends BaseComponent {
       rangeInputFocus
     } = this.props;
     const rangeSuffix = suffix ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-range-input-suffix`,
+      className: "".concat(prefixCls, "-range-input-suffix"),
       onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
     }, suffix) : null;
     return rangeSuffix;
@@ -220,16 +220,16 @@ export default class DateInput extends BaseComponent {
     const rangeSize = size === 'large' ? 'default' : 'small';
     const rangePlaceholder = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
-    const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
-      [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
-      [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel
+    const inputLeftWrapperCls = cls("".concat(prefixCls, "-range-input-wrapper-start"), "".concat(prefixCls, "-range-input-wrapper"), {
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart' && !disabled,
+      ["".concat(prefixCls, "-range-input-wrapper-start-with-prefix")]: this.props.prefix || this.props.insetLabel
     });
-    const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
-      [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled
+    const inputRightWrapperCls = cls("".concat(prefixCls, "-range-input-wrapper-end"), "".concat(prefixCls, "-range-input-wrapper"), {
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd' && !disabled
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderRangePrefix(), /*#__PURE__*/React.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
-      className: `${inputCls} ${inputLeftWrapperCls}`
+      className: "".concat(inputCls, " ").concat(inputLeftWrapperCls)
     }, /*#__PURE__*/React.createElement(Input, {
       size: rangeSize,
       style: inputStyle,
@@ -245,7 +245,7 @@ export default class DateInput extends BaseComponent {
       autofocus: autofocus,
       ref: rangeInputStartRef
     })), this.renderRangeSeparator(rangeStart, rangeEnd), /*#__PURE__*/React.createElement("div", {
-      className: `${inputCls} ${inputRightWrapperCls}`,
+      className: "".concat(inputCls, " ").concat(inputRightWrapperCls),
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeEnd')
     }, /*#__PURE__*/React.createElement(Input, {
       size: rangeSize,
@@ -296,8 +296,8 @@ export default class DateInput extends BaseComponent {
       datePlaceholder,
       timePlaceholder
     } = this.foundation.getInsetInputPlaceholder();
-    const insetInputWrapperCls = `${prefixCls}-inset-input-wrapper`;
-    const separatorCls = `${prefixCls}-inset-input-separator`;
+    const insetInputWrapperCls = "".concat(prefixCls, "-inset-input-wrapper");
+    const separatorCls = "".concat(prefixCls, "-inset-input-separator");
     return /*#__PURE__*/React.createElement("div", {
       className: insetInputWrapperCls,
       "x-type": type
@@ -391,7 +391,7 @@ export default class DateInput extends BaseComponent {
     }
 
     const inputCls = cls({
-      [`${prefixCls}-input-readonly`]: inputReadOnly
+      ["".concat(prefixCls, "-input-readonly")]: inputReadOnly
     });
     const isRangeType = /range/i.test(type);
     const rangeProps = Object.assign(Object.assign({}, this.props), {

package/lib/es/datePicker/datePicker.js

@@ -147,17 +147,17 @@ export default class DatePicker extends BaseComponent {
       } = this.props;
       const wrapCls = classnames(cssClasses.PREFIX, {
         [cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
-        [`${cssClasses.PREFIX}-compact`]: density === 'compact'
+        ["".concat(cssClasses.PREFIX, "-compact")]: density === 'compact'
       }, dropdownClassName);
       return /*#__PURE__*/React.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/React.createElement("div", {
-        className: `${cssClasses.PREFIX}-topSlot`,
+        className: "".concat(cssClasses.PREFIX, "-topSlot"),
         "x-semi-prop": "topSlot"
       }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
-        className: `${cssClasses.PREFIX}-bottomSlot`,
+        className: "".concat(cssClasses.PREFIX, "-bottomSlot"),
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -655,12 +655,12 @@ export default class DatePicker extends BaseComponent {
 
     const isRangeType = this.isRangeType(type, triggerRender);
     const inputDisabled = disabled || insetInput && triggerDisabled;
-    const inputCls = classnames(`${cssClasses.PREFIX}-input`, {
-      [`${cssClasses.PREFIX}-range-input`]: isRangeType,
-      [`${cssClasses.PREFIX}-range-input-${size}`]: isRangeType && size,
-      [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
-      [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
-      [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus
+    const inputCls = classnames("".concat(cssClasses.PREFIX, "-input"), {
+      ["".concat(cssClasses.PREFIX, "-range-input")]: isRangeType,
+      ["".concat(cssClasses.PREFIX, "-range-input-").concat(size)]: isRangeType && size,
+      ["".concat(cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
+      ["".concat(cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
+      ["".concat(cssClasses.PREFIX, "-range-input-").concat(validateStatus)]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary

package/lib/es/datePicker/footer.js

@@ -10,7 +10,7 @@ export default function Footer() {
     onCancelClick,
     onConfirmClick
   } = props;
-  const wrapCls = classnames(`${prefixCls}-footer`);
+  const wrapCls = classnames("".concat(prefixCls, "-footer"));
   return /*#__PURE__*/React.createElement("div", {
     className: wrapCls
   }, /*#__PURE__*/React.createElement(Button, {

package/lib/es/datePicker/index.js

@@ -24,7 +24,7 @@ export default forwardStatics( /*#__PURE__*/React.forwardRef((props, ref) => {
 
 
   if (rangeSeparator && typeof rangeSeparator === 'string') {
-    propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
+    propsObj.rangeSeparator = " ".concat(rangeSeparator.trim(), " ");
   }
 
   if (propsObj.insetInput) {

package/lib/es/datePicker/month.js

@@ -321,7 +321,7 @@ export default class Month extends BaseComponent {
       locale
     } = this.props;
     const weekdayCls = classNames(cssClasses.WEEKDAY);
-    const weekdayItemCls = classNames(`${prefixCls}-weekday-item`);
+    const weekdayItemCls = classNames("".concat(prefixCls, "-weekday-item"));
     const {
       weekdays
     } = this.state; // i18n
@@ -419,7 +419,7 @@ export default class Month extends BaseComponent {
       [cssClasses.DAY_HOVER_DAY_AROUND_SINGLE_SELECTED]: dayStatus.isHoverDayAroundOneSelected
     });
     const dayMainCls = classNames({
-      [`${cssClasses.DAY}-main`]: true
+      ["".concat(cssClasses.DAY, "-main")]: true
     });
     const fullDateArgs = [dayNumber, fullDate, dayStatus];