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

package/lib/cjs/datePicker/monthsGrid.js

@@ -91,10 +91,10 @@ class MonthsGrid extends _baseComponent.default {
 
 
     this.calcScrollListHeight = () => {
-      const wrapLeft = this.adapter.getCache(`wrap-${_constants.strings.PANEL_TYPE_LEFT}`);
-      const wrapRight = this.adapter.getCache(`wrap-${_constants.strings.PANEL_TYPE_RIGHT}`);
-      const switchLeft = this.adapter.getCache(`switch-${_constants.strings.PANEL_TYPE_LEFT}`);
-      const switchRight = this.adapter.getCache(`switch-${_constants.strings.PANEL_TYPE_RIGHT}`);
+      const wrapLeft = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_LEFT));
+      const wrapRight = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_RIGHT));
+      const switchLeft = this.adapter.getCache("switch-".concat(_constants.strings.PANEL_TYPE_LEFT));
+      const switchRight = this.adapter.getCache("switch-".concat(_constants.strings.PANEL_TYPE_RIGHT));
       const leftRect = wrapLeft && wrapLeft.getBoundingClientRect();
       const rightRect = wrapRight && wrapRight.getBoundingClientRect();
       let leftHeight = leftRect && leftRect.height || 0;
@@ -130,7 +130,7 @@ class MonthsGrid extends _baseComponent.default {
     };
 
     this.reselect = () => {
-      const refKeys = [`timepicker-${_constants.strings.PANEL_TYPE_LEFT}`, `timepicker-${_constants.strings.PANEL_TYPE_RIGHT}`, `yam-${_constants.strings.PANEL_TYPE_LEFT}`, `yam-${_constants.strings.PANEL_TYPE_RIGHT}`];
+      const refKeys = ["timepicker-".concat(_constants.strings.PANEL_TYPE_LEFT), "timepicker-".concat(_constants.strings.PANEL_TYPE_RIGHT), "yam-".concat(_constants.strings.PANEL_TYPE_LEFT), "yam-".concat(_constants.strings.PANEL_TYPE_RIGHT)];
       refKeys.forEach(key => {
         const current = this.adapter.getCache(key);
 
@@ -273,7 +273,7 @@ class MonthsGrid extends _baseComponent.default {
   }
 
   renderPanel(month, panelType) {
-    let monthCls = (0, _classnames.default)(`${prefixCls}-month-grid-${panelType}`);
+    let monthCls = (0, _classnames.default)("".concat(prefixCls, "-month-grid-").concat(panelType));
     const {
       monthLeft,
       monthRight,
@@ -289,14 +289,14 @@ class MonthsGrid extends _baseComponent.default {
     } = panelDetail;
     const panelContent = this.renderMonth(month, panelType);
     const yearAndMonthLayer = isYearPickerOpen ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-yam`
+      className: "".concat(prefixCls, "-yam")
     }, this.renderYearAndMonth(panelType, panelDetail)) : null;
     const timePickerLayer = isTimePickerOpen ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-tpk`
+      className: "".concat(prefixCls, "-tpk")
     }, this.renderTimePicker(panelType, panelDetail)) : null;
     const style = {};
-    const wrapLeft = this.adapter.getCache(`wrap-${_constants.strings.PANEL_TYPE_LEFT}`);
-    const wrapRight = this.adapter.getCache(`wrap-${_constants.strings.PANEL_TYPE_RIGHT}`);
+    const wrapLeft = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_LEFT));
+    const wrapRight = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_RIGHT));
     const wrap = panelType === _constants.strings.PANEL_TYPE_RIGHT ? wrapRight : wrapLeft;
 
     if (this.foundation.isRangeType()) {
@@ -319,7 +319,7 @@ class MonthsGrid extends _baseComponent.default {
         style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
       }
     } else if (this.props.type !== 'year' && this.props.type !== 'month' && (isTimePickerOpen || isYearPickerOpen)) {
-      monthCls = (0, _classnames.default)(monthCls, `${prefixCls}-yam-showing`);
+      monthCls = (0, _classnames.default)(monthCls, "".concat(prefixCls, "-yam-showing"));
     }
 
     const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
@@ -398,10 +398,10 @@ class MonthsGrid extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      ref: current => this.cacheRefCurrent(`wrap-${panelType}`, current),
+      ref: current => this.cacheRefCurrent("wrap-".concat(panelType), current),
       style: style
     }, /*#__PURE__*/_react.default.createElement(_navigation.default, {
-      forwardRef: current => this.cacheRefCurrent(`nav-${panelType}`, current),
+      forwardRef: current => this.cacheRefCurrent("nav-".concat(panelType), current),
       monthText: monthText,
       density: density,
       onMonthClick: e => this.showYearPicker(panelType, e),
@@ -414,7 +414,7 @@ class MonthsGrid extends _baseComponent.default {
     }), /*#__PURE__*/_react.default.createElement(_month.default, {
       locale: locale,
       localeCode: localeCode,
-      forwardRef: current => this.cacheRefCurrent(`month-${panelType}`, current),
+      forwardRef: current => this.cacheRefCurrent("month-".concat(panelType), current),
       disabledDate: disabledDate,
       weekStartsOn: weekStartsOn,
       month: month,
@@ -450,7 +450,7 @@ class MonthsGrid extends _baseComponent.default {
     const {
       pickerDate
     } = panelDetail;
-    const timePanelCls = (0, _classnames.default)(`${prefixCls}-time`);
+    const timePanelCls = (0, _classnames.default)("".concat(prefixCls, "-time"));
     const restProps = Object.assign(Object.assign({}, timePickerOpts), {
       hideDisabledOptions
     });
@@ -484,7 +484,7 @@ class MonthsGrid extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: timePanelCls
     }, /*#__PURE__*/_react.default.createElement(_Combobox.default, Object.assign({
-      ref: current => this.cacheRefCurrent(`timepicker-${panelType}`, current),
+      ref: current => this.cacheRefCurrent("timepicker-".concat(panelType), current),
       panelHeader: placeholder,
       format: format || _constants.strings.FORMAT_TIME_PICKER,
       timeStampValue: pickerDate,
@@ -505,7 +505,7 @@ class MonthsGrid extends _baseComponent.default {
     const y = pickerDate.getFullYear();
     const m = pickerDate.getMonth() + 1;
     return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
-      ref: current => this.cacheRefCurrent(`yam-${panelType}`, current),
+      ref: current => this.cacheRefCurrent("yam-".concat(panelType), current),
       locale: locale,
       localeCode: localeCode,
       currentYear: y,
@@ -513,7 +513,7 @@ class MonthsGrid extends _baseComponent.default {
       onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear, item.currentMonth - 1)),
       onBackToMain: () => {
         this.foundation.showDatePanel(panelType);
-        const wrapCurrent = this.adapter.getCache(`wrap-${panelType}`);
+        const wrapCurrent = this.adapter.getCache("wrap-".concat(panelType));
 
         if (wrapCurrent) {
           wrapCurrent.style.height = 'auto';
@@ -570,20 +570,20 @@ class MonthsGrid extends _baseComponent.default {
     const monthText = showDate ? (0, _dateFns.format)(showDate, FORMAT_SWITCH_DATE) : '';
     const timeText = showDate ? (0, _dateFns.format)(showDate, formatTimePicker) : '';
     const showSwitchIcon = ['default'].includes(density);
-    const switchCls = (0, _classnames.default)(`${prefixCls}-switch`);
+    const switchCls = (0, _classnames.default)("".concat(prefixCls, "-switch"));
     const dateCls = (0, _classnames.default)({
-      [`${prefixCls}-switch-date`]: true,
-      [`${prefixCls}-switch-date-active`]: !isTimePickerOpen
+      ["".concat(prefixCls, "-switch-date")]: true,
+      ["".concat(prefixCls, "-switch-date-active")]: !isTimePickerOpen
     });
     const timeCls = (0, _classnames.default)({
-      [`${prefixCls}-switch-time`]: true,
-      [`${prefixCls}-switch-time-disabled`]: disabledTimePicker,
-      [`${prefixCls}-switch-date-active`]: isTimePickerOpen
+      ["".concat(prefixCls, "-switch-time")]: true,
+      ["".concat(prefixCls, "-switch-time-disabled")]: disabledTimePicker,
+      ["".concat(prefixCls, "-switch-date-active")]: isTimePickerOpen
     });
-    const textCls = (0, _classnames.default)(`${prefixCls}-switch-text`);
+    const textCls = (0, _classnames.default)("".concat(prefixCls, "-switch-text"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: switchCls,
-      ref: current => this.adapter.setCache(`switch-${panelType}`, current)
+      ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/_react.default.createElement("div", {
       role: "button",
       "aria-label": "Switch to date panel",
@@ -618,7 +618,7 @@ class MonthsGrid extends _baseComponent.default {
       renderDateInput
     } = this.props;
     const monthGridCls = (0, _classnames.default)({
-      [`${prefixCls}-month-grid`]: true
+      ["".concat(prefixCls, "-month-grid")]: true
     });
     const panelTypeLeft = _constants.strings.PANEL_TYPE_LEFT;
     const panelTypeRight = _constants.strings.PANEL_TYPE_RIGHT;

package/lib/cjs/datePicker/navigation.js

@@ -98,7 +98,7 @@ class Navigation extends _react.PureComponent {
       noHorizontalPadding: btnNoHorizontalPadding,
       style: leftButtonStyle
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-month`
+      className: "".concat(prefixCls, "-month")
     }, /*#__PURE__*/_react.default.createElement(_button.default, {
       onClick: onMonthClick,
       theme: btnTheme,

package/lib/cjs/datePicker/quickControl.js

@@ -45,30 +45,30 @@ class QuickControl extends _react.PureComponent {
     const isMonth = type === 'month';
     const isTopAndBottomRange = isPanelTopAndBottom && isTypeRange;
     const isTopAndBottomMonth = isPanelTopAndBottom && isMonth;
-    const wrapperCls = (0, _classnames.default)(`${prefixCls}-quick-control`, {
-      [`${prefixCls}-quick-control-${type}`]: type,
-      [`${prefixCls}-quick-control-${presetPosition}`]: true
+    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-quick-control"), {
+      ["".concat(prefixCls, "-quick-control-").concat(type)]: type,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition)]: true
     });
     const headerCls = (0, _classnames.default)({
-      [`${prefixCls}-quick-control-header`]: true
+      ["".concat(prefixCls, "-quick-control-header")]: true
     });
     const contentWrapperCls = (0, _classnames.default)({
-      [`${prefixCls}-quick-control-${presetPosition}-content-wrapper`]: true
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-content-wrapper")]: true
     });
     const contentCls = (0, _classnames.default)({
-      [`${prefixCls}-quick-control-${presetPosition}-content`]: !isTopAndBottomRange && !isTopAndBottomMonth,
-      [`${prefixCls}-quick-control-${presetPosition}-range-content`]: isTopAndBottomRange,
-      [`${prefixCls}-quick-control-${presetPosition}-month-content`]: isTopAndBottomMonth
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-content")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-range-content")]: isTopAndBottomRange,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-month-content")]: isTopAndBottomMonth
     });
     const itemCls = (0, _classnames.default)({
-      [`${prefixCls}-quick-control-${presetPosition}-content-item`]: !isTopAndBottomRange && !isTopAndBottomMonth,
-      [`${prefixCls}-quick-control-${presetPosition}-range-content-item`]: isTopAndBottomRange,
-      [`${prefixCls}-quick-control-${presetPosition}-month-content-item`]: isTopAndBottomMonth
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-content-item")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-range-content-item")]: isTopAndBottomRange,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-month-content-item")]: isTopAndBottomMonth
     });
     const ellipsisCls = (0, _classnames.default)({
-      [`${prefixCls}-quick-control-${presetPosition}-content-item-ellipsis`]: !isTopAndBottomRange && !isTopAndBottomMonth,
-      [`${prefixCls}-quick-control-${presetPosition}-range-content-item-ellipsis`]: isTopAndBottomRange,
-      [`${prefixCls}-quick-control-${presetPosition}-month-content-item-ellipsis`]: isTopAndBottomMonth
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-content-item-ellipsis")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-range-content-item-ellipsis")]: isTopAndBottomRange,
+      ["".concat(prefixCls, "-quick-control-").concat(presetPosition, "-month-content-item-ellipsis")]: isTopAndBottomMonth
     });
 
     if (!presets.length) {

package/lib/cjs/datePicker/yearAndMonth.js

@@ -38,7 +38,7 @@ var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constant
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable max-len */
-const prefixCls = `${_constants.BASE_CLASS_PREFIX}-datepicker`;
+const prefixCls = "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker");
 
 class YearAndMonth extends _baseComponent.default {
   constructor(props) {
@@ -168,7 +168,7 @@ class YearAndMonth extends _baseComponent.default {
 
     if (localeCode === 'zh-CN' || localeCode === 'zh-TW') {
       // Only Chinese needs to add [year] after the selected year
-      transform = val => `${val}年`;
+      transform = val => "".concat(val, "\u5E74");
     }
 
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
@@ -203,7 +203,7 @@ class YearAndMonth extends _baseComponent.default {
 
     if (localeCode === 'zh-CN' || localeCode === 'zh-TW') {
       // Only Chinese needs to add [month] after the selected month
-      transform = val => `${val}月`;
+      transform = val => "".concat(val, "\u6708");
     } // i18n
 
 
@@ -241,7 +241,7 @@ class YearAndMonth extends _baseComponent.default {
       renderQuickControls,
       renderDateInput
     } = this.props;
-    const prefix = `${prefixCls}-yearmonth-header`; // i18n
+    const prefix = "".concat(prefixCls, "-yearmonth-header"); // i18n
 
     const selectDateText = locale.selectDate;
     const iconSize = density === 'compact' ? 'default' : 'large';

package/lib/cjs/descriptions/index.js

@@ -41,9 +41,9 @@ class Descriptions extends _react.PureComponent {
       data
     } = this.props;
     const classNames = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-${align}`]: !row,
-      [`${prefixCls}-double`]: row,
-      [`${prefixCls}-double-${size}`]: row
+      ["".concat(prefixCls, "-").concat(align)]: !row,
+      ["".concat(prefixCls, "-double")]: row,
+      ["".concat(prefixCls, "-double-").concat(size)]: row
     });
     const childrenList = data && data.length ? data.map((item, index) => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({
       itemKey: item.key

package/lib/cjs/descriptions/item.js

@@ -22,8 +22,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const prefixCls = _constants.cssClasses.PREFIX;
-const keyCls = `${prefixCls}-key`;
-const valCls = `${prefixCls}-value`;
+const keyCls = "".concat(prefixCls, "-key");
+const valCls = "".concat(prefixCls, "-value");
 
 class Item extends _react.PureComponent {
   render() {
@@ -46,7 +46,7 @@ class Item extends _react.PureComponent {
       className: className,
       style: style
     }, /*#__PURE__*/_react.default.createElement("td", {
-      className: `${prefixCls}-item`
+      className: "".concat(prefixCls, "-item")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/_react.default.createElement("span", {
@@ -55,11 +55,11 @@ class Item extends _react.PureComponent {
       className: className,
       style: style
     }, /*#__PURE__*/_react.default.createElement("th", {
-      className: `${prefixCls}-item ${prefixCls}-item-th`
+      className: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-th")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: keyCls
     }, itemKey)), /*#__PURE__*/_react.default.createElement("td", {
-      className: `${prefixCls}-item ${prefixCls}-item-td`
+      className: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-td")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));

package/lib/cjs/divider/index.js

@@ -40,12 +40,12 @@ const Divider = props => {
   } = props,
         rest = __rest(props, ["layout", "dashed", "align", "className", "margin", "style", "children"]);
 
-  const dividerClassNames = (0, _classnames.default)(`${prefixCls}-divider`, className, {
-    [`${prefixCls}-divider-horizontal`]: layout === 'horizontal',
-    [`${prefixCls}-divider-vertical`]: layout === 'vertical',
-    [`${prefixCls}-divider-dashed`]: !!dashed,
-    [`${prefixCls}-divider-with-text`]: children && layout === 'horizontal',
-    [`${prefixCls}-divider-with-text-${align}`]: children && layout === 'horizontal'
+  const dividerClassNames = (0, _classnames.default)("".concat(prefixCls, "-divider"), className, {
+    ["".concat(prefixCls, "-divider-horizontal")]: layout === 'horizontal',
+    ["".concat(prefixCls, "-divider-vertical")]: layout === 'vertical',
+    ["".concat(prefixCls, "-divider-dashed")]: !!dashed,
+    ["".concat(prefixCls, "-divider-with-text")]: children && layout === 'horizontal',
+    ["".concat(prefixCls, "-divider-with-text-").concat(align)]: children && layout === 'horizontal'
   });
   let overrideDefaultStyle = {};
 
@@ -67,7 +67,7 @@ const Divider = props => {
     className: dividerClassNames,
     style: Object.assign(Object.assign({}, overrideDefaultStyle), style)
   }), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: `${prefixCls}-divider_inner-text`,
+    className: "".concat(prefixCls, "-divider_inner-text"),
     "x-semi-prop": "children"
   }, children) : children : null);
 };

package/lib/cjs/dropdown/dropdownDivider.js

@@ -24,7 +24,7 @@ const DropdownDivider = function () {
     className
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}-divider`, className),
+    className: (0, _classnames.default)("".concat(prefixCls, "-divider"), className),
     style: style
   });
 };

package/lib/cjs/dropdown/dropdownItem.js

@@ -44,12 +44,12 @@ class DropdownItem extends _baseComponent.default {
       showTick: contextShowTick
     } = this.context;
     const itemclass = (0, _classnames.default)(className, {
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-disabled`]: disabled,
-      [`${prefixCls}-item-hover`]: hover,
-      [`${prefixCls}-item-withTick`]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
-      [`${prefixCls}-item-${type}`]: type,
-      [`${prefixCls}-item-active`]: active
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-item-disabled")]: disabled,
+      ["".concat(prefixCls, "-item-hover")]: hover,
+      ["".concat(prefixCls, "-item-withTick")]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
+      ["".concat(prefixCls, "-item-").concat(type)]: type,
+      ["".concat(prefixCls, "-item-active")]: active
     });
     const events = {};
 
@@ -83,7 +83,7 @@ class DropdownItem extends _baseComponent.default {
 
     if (icon) {
       iconContent = /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixCls}-item-icon`
+        className: "".concat(prefixCls, "-item-icon")
       }, icon);
     }
 

package/lib/cjs/dropdown/dropdownMenu.js

@@ -57,7 +57,7 @@ class DropdownMenu extends _baseComponent.default {
       role: "menu",
       "aria-orientation": "vertical"
     }, rest, {
-      className: (0, _classnames.default)(`${prefixCls}-menu`, className),
+      className: (0, _classnames.default)("".concat(prefixCls, "-menu"), className),
       style: style,
       onKeyDown: e => this.foundation.onMenuKeydown(e)
     }), children);

package/lib/cjs/dropdown/dropdownTitle.js

@@ -34,8 +34,8 @@ class DropdownTitle extends _react.PureComponent {
       showTick
     } = this.context;
     const titleCls = (0, _classnames.default)({
-      [`${prefixCls}-title`]: true,
-      [`${prefixCls}-title-withTick`]: showTick
+      ["".concat(prefixCls, "-title")]: true,
+      ["".concat(prefixCls, "-title-withTick")]: showTick
     }, className);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: titleCls,

package/lib/cjs/dropdown/index.js

@@ -109,7 +109,7 @@ class Dropdown extends _baseComponent.default {
       className: className,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`,
+      className: "".concat(prefixCls, "-content"),
       "x-semi-prop": "render"
     }, content)));
   }
@@ -182,7 +182,7 @@ class Dropdown extends _baseComponent.default {
       className: className,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, render)));
   }
 
@@ -236,7 +236,7 @@ class Dropdown extends _baseComponent.default {
     }, attr), /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
       //@ts-ignore
       className: (0, _classnames.default)((0, _get2.default)(children, 'props.className'), {
-        [`${prefixCls}-showing`]: popVisible
+        ["".concat(prefixCls, "-showing")]: popVisible
       }),
       'aria-haspopup': true,
       'aria-expanded': popVisible,

package/lib/cjs/empty/index.js

@@ -91,14 +91,14 @@ class Empty extends _baseComponent.default {
       imageNode = /*#__PURE__*/_react.default.createElement("svg", {
         "aria-hidden": "true"
       }, /*#__PURE__*/_react.default.createElement("use", {
-        xlinkHref: `#${imgSrc.id}`
+        xlinkHref: "#".concat(imgSrc.id)
       }));
     } else {
       imageNode = imgSrc;
     }
 
     const wrapperCls = (0, _classnames.default)(className, prefixCls, {
-      [`${prefixCls}-${layout}`]: layout
+      ["".concat(prefixCls, "-").concat(layout)]: layout
     });
     const titleProps = imageNode ? {
       heading: 4
@@ -112,19 +112,19 @@ class Empty extends _baseComponent.default {
       className: wrapperCls,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-image`,
+      className: "".concat(prefixCls, "-image"),
       style: imageStyle,
       "x-semi-prop": "image,darkModeImage"
     }, imageNode), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, title ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, Object.assign({}, titleProps, {
-      className: `${prefixCls}-title`,
+      className: "".concat(prefixCls, "-title"),
       "x-semi-prop": "title"
     }), title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-description`,
+      className: "".concat(prefixCls, "-description"),
       "x-semi-prop": "description"
     }, description) : null, children ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-footer`,
+      className: "".concat(prefixCls, "-footer"),
       "x-semi-prop": "children"
     }, children) : null));
   }

package/lib/cjs/form/arrayField.js

@@ -210,7 +210,7 @@ class ArrayFieldComponent extends _react.Component {
     const arrayFields = keys.map((key, i) => ({
       // key: i,
       key,
-      field: `${field}[${i}]`,
+      field: "".concat(field, "[").concat(i, "]"),
       remove: () => this.remove(i)
     }));
     const {

package/lib/cjs/form/baseForm.js

@@ -133,9 +133,9 @@ class Form extends _baseComponent.default {
         const {
           formId
         } = this.state;
-        return document.querySelectorAll(`form[x-form-id="${formId}"] .${_constants.cssClasses.PREFIX}-field-error-message`);
+        return document.querySelectorAll("form[x-form-id=\"".concat(formId, "\"] .").concat(_constants.cssClasses.PREFIX, "-field-error-message"));
       },
-      getFieldDOM: field => document.querySelector(`.${_constants.cssClasses.PREFIX}-field[x-field-id="${field}"]`)
+      getFieldDOM: field => document.querySelector(".".concat(_constants.cssClasses.PREFIX, "-field[x-field-id=\"").concat(field, "\"]"))
     });
   }
 

package/lib/cjs/form/errorMessage.js

@@ -77,7 +77,7 @@ class ErrorMessage extends _react.PureComponent {
       error: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, null)
     };
     const text = error ? this.generatorText(error) : this.generatorText(helpText);
-    const iconCls = `${prefix}-field-validate-status-icon`;
+    const iconCls = "".concat(prefix, "-field-validate-status-icon");
     let icon = null;
 
     if (isInInputGroup) {

package/lib/cjs/form/group.js

@@ -117,13 +117,13 @@ class FormInputGroup extends _react.Component {
     });
 
     const groupCls = (0, _classnames.default)({
-      [`${prefix}-field-group`]: true
+      ["".concat(prefix, "-field-group")]: true
     });
     const labelCol = formProps.labelCol;
     const wrapperCol = formProps.wrapperCol;
     const labelAlign = formProps.labelAlign;
     const appendCol = labelCol && wrapperCol;
-    const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
+    const labelColCls = labelCol ? "".concat(prefix, "-col-").concat(labelAlign) : '';
     const labelContent = this.renderLabel(label, formProps);
 
     const inputGroupContent = /*#__PURE__*/_react.default.createElement(_inputGroup.default, Object.assign({}, rest), inner);
@@ -134,10 +134,10 @@ class FormInputGroup extends _react.Component {
       isInInputGroup: true
     });
 
-    const extraCls = (0, _classnames.default)(`${prefix}-field-extra`, {
-      [`${prefix}-field-extra-string`]: typeof extraText === 'string',
-      [`${prefix}-field-extra-middle`]: extraTextPosition === 'middle',
-      [`${prefix}-field-extra-bottom`]: extraTextPosition === 'bottom'
+    const extraCls = (0, _classnames.default)("".concat(prefix, "-field-extra"), {
+      ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
+      ["".concat(prefix, "-field-extra-middle")]: extraTextPosition === 'middle',
+      ["".concat(prefix, "-field-extra-bottom")]: extraTextPosition === 'bottom'
     });
     const extraContent = extraText ? /*#__PURE__*/_react.default.createElement("div", {
       className: extraCls,

package/lib/cjs/form/hoc/withField.js

@@ -447,18 +447,18 @@ function withField(Component, opts) {
     let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom'; // id attribute to improve a11y
 
     const a11yId = id ? id : field;
-    const labelId = `${a11yId}-label`;
-    const helpTextId = `${a11yId}-helpText`;
-    const extraTextId = `${a11yId}-extraText`;
-    const errorMessageId = `${a11yId}-errormessage`;
+    const labelId = "".concat(a11yId, "-label");
+    const helpTextId = "".concat(a11yId, "-helpText");
+    const extraTextId = "".concat(a11yId, "-extraText");
+    const errorMessageId = "".concat(a11yId, "-errormessage");
 
     const FieldComponent = () => {
       // prefer to use validateStatus which pass by user throught props
       let blockStatus = validateStatus ? validateStatus : status;
-      const extraCls = (0, _classnames.default)(`${prefix}-field-extra`, {
-        [`${prefix}-field-extra-string`]: typeof extraText === 'string',
-        [`${prefix}-field-extra-middle`]: mergeExtraPos === 'middle',
-        [`${prefix}-field-extra-bottom`]: mergeExtraPos === 'bottom'
+      const extraCls = (0, _classnames.default)("".concat(prefix, "-field-extra"), {
+        ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
+        ["".concat(prefix, "-field-extra-middle")]: mergeExtraPos === 'middle',
+        ["".concat(prefix, "-field-extra-bottom")]: mergeExtraPos === 'bottom'
       });
       const extraContent = extraText ? /*#__PURE__*/_react.default.createElement("div", {
         className: extraCls,
@@ -483,11 +483,11 @@ function withField(Component, opts) {
       }
 
       if (helpText) {
-        newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
+        newProps['aria-describedby'] = extraText ? "".concat(helpTextId, " ").concat(extraTextId) : helpTextId;
       }
 
       if (extraText) {
-        newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
+        newProps['aria-describedby'] = helpText ? "".concat(helpTextId, " ").concat(extraTextId) : extraTextId;
       }
 
       if (status === 'error') {
@@ -496,12 +496,12 @@ function withField(Component, opts) {
       }
 
       const fieldCls = (0, _classnames.default)({
-        [`${prefix}-field`]: true,
-        [`${prefix}-field-${name}`]: Boolean(name),
+        ["".concat(prefix, "-field")]: true,
+        ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
         [fieldClassName]: Boolean(fieldClassName)
       });
       const fieldMaincls = (0, _classnames.default)({
-        [`${prefix}-field-main`]: true
+        ["".concat(prefix, "-field-main")]: true
       });
 
       if (mergeLabelPos === 'inset' && !noLabel) {
@@ -523,8 +523,8 @@ function withField(Component, opts) {
 
       if (pure) {
         let pureCls = (0, _classnames.default)(rest.className, {
-          [`${prefix}-field-pure`]: true,
-          [`${prefix}-field-${name}`]: Boolean(name),
+          ["".concat(prefix, "-field-pure")]: true,
+          ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
           [fieldClassName]: Boolean(fieldClassName)
         });
         newProps.className = pureCls;
@@ -532,7 +532,7 @@ function withField(Component, opts) {
       }
 
       let withCol = mergeLabelCol && mergeWrapperCol;
-      const labelColCls = mergeLabelAlign ? `${prefix}-col-${mergeLabelAlign}` : ''; // get label
+      const labelColCls = mergeLabelAlign ? "".concat(prefix, "-col-").concat(mergeLabelAlign) : ''; // get label
 
       let labelContent = null;