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

package/lib/es/calendar/rangeCalendar.js

@@ -15,11 +15,11 @@ import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
 
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
-  return "".concat(res, "%");
+  return `${res}%`;
 };
 
-const prefixCls = "".concat(cssClasses.PREFIX, "-week");
-const allDayCls = "".concat(cssClasses.PREFIX, "-all-day");
+const prefixCls = `${cssClasses.PREFIX}-week`;
+const allDayCls = `${cssClasses.PREFIX}-all-day`;
 export default class RangeCalendar extends BaseComponent {
   constructor(props) {
     super(props);
@@ -49,7 +49,7 @@ export default class RangeCalendar extends BaseComponent {
         const dayEvents = events.has(dateString) ? events.get(dateString) : [];
         const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
         return /*#__PURE__*/React.createElement(DayCol, {
-          key: "".concat(dateString, "-weekday"),
+          key: `${dateString}-weekday`,
           displayValue: day.date,
           scrollHeight: this.state.scrollHeight,
           handleClick: this.handleClick,
@@ -72,14 +72,14 @@ export default class RangeCalendar extends BaseComponent {
         week
       } = this.foundation.getRangeData(range[0], dateFnsLocale);
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: `${prefixCls}-header`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-tag ").concat(prefixCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${cssClasses.PREFIX}-tag ${prefixCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/React.createElement("span", null, month)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: "".concat(prefixCls, "-grid")
+        className: `${prefixCls}-grid`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(prefixCls, "-grid-row")
+        className: `${prefixCls}-grid-row`
       }, week.map(day => {
         const {
           date,
@@ -88,14 +88,14 @@ export default class RangeCalendar extends BaseComponent {
           isToday
         } = day;
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-today")]: isToday,
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+          [`${cssClasses.PREFIX}-today`]: isToday,
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: "".concat(date.toString(), "-weekheader"),
+          key: `${date.toString()}-weekheader`,
           className: listCls
         }, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(cssClasses.PREFIX, "-today-date")
+          className: `${cssClasses.PREFIX}-today-date`
         }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
       }))));
     };
@@ -108,15 +108,15 @@ export default class RangeCalendar extends BaseComponent {
           topInd,
           children
         } = event;
-        const top = "".concat(topInd, "em");
+        const top = `${topInd}em`;
         const style = {
           left: toPercent(leftPos),
           width: toPercent(width),
           top
         };
         return /*#__PURE__*/React.createElement("li", {
-          className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-allday"),
-          key: "allDay-".concat(ind),
+          className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-allday`,
+          key: `allDay-${ind}`,
           style: style
         }, children);
       });
@@ -130,7 +130,7 @@ export default class RangeCalendar extends BaseComponent {
       const parsed = this.foundation.parseRangeAllDayEvents(allDay);
       const maxRowHeight = calcRowHeight(parsed);
       const style = {
-        height: "".concat(maxRowHeight, "em")
+        height: `${maxRowHeight}em`
       };
       const {
         markWeekend
@@ -139,25 +139,25 @@ export default class RangeCalendar extends BaseComponent {
         week
       } = this.RangeData;
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(allDayCls),
+        className: `${allDayCls}`,
         style: style
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-tag ").concat(allDayCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/React.createElement("span", null, locale.allDay)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: "".concat(cssClasses.PREFIX, "-content ").concat(allDayCls, "-content")
+        className: `${cssClasses.PREFIX}-content ${allDayCls}-content`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(allDayCls, "-skeleton")
+        className: `${allDayCls}-skeleton`
       }, Object.keys(week).map((date, ind) => {
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && week[date].isWeekend
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && week[date].isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: "".concat(date, "-weekgrid"),
+          key: `${date}-weekgrid`,
           className: listCls
         });
       })), /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-event-items")
+        className: `${cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(parsed))));
     };
 
@@ -244,14 +244,14 @@ export default class RangeCalendar extends BaseComponent {
       style: weekStyle,
       ref: this.dom
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-sticky-top")
+      className: `${prefixCls}-sticky-top`
     }, header, this.renderHeader(dateFnsLocale), this.renderAllDay(locale)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll-wrapper")
+      className: `${prefixCls}-scroll-wrapper`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll"),
+      className: `${prefixCls}-scroll`,
       ref: this.scrollDom
     }, /*#__PURE__*/React.createElement(TimeCol, {
-      className: "".concat(prefixCls, "-sticky-left"),
+      className: `${prefixCls}-sticky-left`,
       renderTimeDisplay: renderTimeDisplay
     }), this.renderDayGrid()))));
   }

package/lib/es/calendar/timeCol.js

@@ -5,7 +5,7 @@ import LocaleConsumer from '../locale/localeConsumer';
 import localeContext from '../locale/context';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/calendar/constants';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-const prefixCls = "".concat(cssClasses.PREFIX, "-time");
+const prefixCls = `${cssClasses.PREFIX}-time`;
 export default class timeCol extends PureComponent {
   formatTime(item) {
     const {
@@ -19,7 +19,7 @@ export default class timeCol extends PureComponent {
 
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Calendar",
-        key: "locale-".concat(item)
+        key: `locale-${item}`
       }, locale => {
         let time = item < 12 ? replaceTime(locale.AM, item) : replaceTime(locale.PM, item - 12);
 
@@ -36,17 +36,17 @@ export default class timeCol extends PureComponent {
     const {
       className
     } = this.props;
-    const wrapperCls = cls(className, "".concat(prefixCls));
+    const wrapperCls = cls(className, `${prefixCls}`);
     const list = [...Array(24).keys()].map(item => this.formatTime(item));
     list.splice(0, 1, '');
     const inner = list.map((item, index) => /*#__PURE__*/React.createElement("li", {
-      key: "time-".concat(index),
-      className: "".concat(prefixCls, "-item")
+      key: `time-${index}`,
+      className: `${prefixCls}-item`
     }, /*#__PURE__*/React.createElement("span", null, item)));
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls
     }, /*#__PURE__*/React.createElement("ul", {
-      className: "".concat(prefixCls, "-items")
+      className: `${prefixCls}-items`
     }, inner));
   }
 

package/lib/es/calendar/weekCalendar.js

@@ -14,11 +14,11 @@ import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
 
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
-  return "".concat(res, "%");
+  return `${res}%`;
 };
 
-const prefixCls = "".concat(cssClasses.PREFIX, "-week");
-const allDayCls = "".concat(cssClasses.PREFIX, "-all-day");
+const prefixCls = `${cssClasses.PREFIX}-week`;
+const allDayCls = `${cssClasses.PREFIX}-all-day`;
 export default class WeekCalendar extends BaseComponent {
   constructor(props) {
     super(props);
@@ -50,7 +50,7 @@ export default class WeekCalendar extends BaseComponent {
         const dayEvents = events.has(dateString) ? events.get(dateString) : [];
         const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
         return /*#__PURE__*/React.createElement(DayCol, {
-          key: "".concat(dateString, "-weekday"),
+          key: `${dateString}-weekday`,
           displayValue: day.date,
           scrollHeight: this.state.scrollHeight,
           handleClick: this.handleClick,
@@ -73,14 +73,14 @@ export default class WeekCalendar extends BaseComponent {
         week
       } = this.foundation.getWeeklyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: `${prefixCls}-header`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-tag ").concat(prefixCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${cssClasses.PREFIX}-tag ${prefixCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/React.createElement("span", null, month)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: "".concat(prefixCls, "-grid")
+        className: `${prefixCls}-grid`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(prefixCls, "-grid-row")
+        className: `${prefixCls}-grid-row`
       }, week.map(day => {
         const {
           date,
@@ -89,14 +89,14 @@ export default class WeekCalendar extends BaseComponent {
           isToday
         } = day;
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-today")]: isToday,
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+          [`${cssClasses.PREFIX}-today`]: isToday,
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: "".concat(date.toString(), "-weekheader"),
+          key: `${date.toString()}-weekheader`,
           className: listCls
         }, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(cssClasses.PREFIX, "-today-date")
+          className: `${cssClasses.PREFIX}-today-date`
         }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
       }))));
     };
@@ -110,15 +110,15 @@ export default class WeekCalendar extends BaseComponent {
           children,
           key
         } = event;
-        const top = "".concat(topInd, "em");
+        const top = `${topInd}em`;
         const style = {
           left: toPercent(leftPos),
           width: toPercent(width),
           top
         };
         return /*#__PURE__*/React.createElement("li", {
-          className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-allday"),
-          key: "allDay-".concat(ind),
+          className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-allday`,
+          key: `allDay-${ind}`,
           style: style
         }, children);
       });
@@ -132,7 +132,7 @@ export default class WeekCalendar extends BaseComponent {
       const parsed = this.foundation.parseWeeklyAllDayEvents(allDay);
       const maxRowHeight = calcRowHeight(parsed);
       const style = {
-        height: "".concat(maxRowHeight, "em")
+        height: `${maxRowHeight}em`
       };
       const {
         markWeekend
@@ -141,25 +141,25 @@ export default class WeekCalendar extends BaseComponent {
         week
       } = this.weeklyData;
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(allDayCls),
+        className: `${allDayCls}`,
         style: style
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-tag ").concat(allDayCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/React.createElement("span", null, locale.allDay)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: "".concat(cssClasses.PREFIX, "-content ").concat(allDayCls, "-content")
+        className: `${cssClasses.PREFIX}-content ${allDayCls}-content`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(allDayCls, "-skeleton")
+        className: `${allDayCls}-skeleton`
       }, Object.keys(week).map((date, ind) => {
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && week[date].isWeekend
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && week[date].isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: "".concat(date, "-weekgrid"),
+          key: `${date}-weekgrid`,
           className: listCls
         });
       })), /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-event-items")
+        className: `${cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(parsed))));
     };
 
@@ -246,14 +246,14 @@ export default class WeekCalendar extends BaseComponent {
       style: weekStyle,
       ref: this.dom
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-sticky-top")
+      className: `${prefixCls}-sticky-top`
     }, header, this.renderHeader(dateFnsLocale), this.renderAllDay(locale)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll-wrapper")
+      className: `${prefixCls}-scroll-wrapper`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll"),
+      className: `${prefixCls}-scroll`,
       ref: this.scrollDom
     }, /*#__PURE__*/React.createElement(TimeCol, {
-      className: "".concat(prefixCls, "-sticky-left"),
+      className: `${prefixCls}-sticky-left`,
       renderTimeDisplay: renderTimeDisplay
     }), this.renderDayGrid()))));
   }

package/lib/es/card/cardGroup.js

@@ -29,8 +29,8 @@ class CardGroup extends PureComponent {
           others = __rest(_a, ["children", "className", "spacing", "style", "type"]);
 
     const isGrid = type === 'grid';
-    const cardGroupCls = cls("".concat(prefixcls, "-group"), className, {
-      ["".concat(prefixcls, "-group-grid")]: isGrid
+    const cardGroupCls = cls(`${prefixcls}-group`, className, {
+      [`${prefixcls}-group-grid`]: isGrid
     });
     return /*#__PURE__*/React.createElement(Space, Object.assign({
       spacing: isGrid ? 0 : spacing,

package/lib/es/card/index.js

@@ -35,12 +35,12 @@ class Card extends PureComponent {
         headerLine,
         headerStyle
       } = this.props;
-      const headerCls = cls("".concat(prefixcls, "-header"), {
-        ["".concat(prefixcls, "-header-bordered")]: Boolean(headerLine)
+      const headerCls = cls(`${prefixcls}-header`, {
+        [`${prefixcls}-header-bordered`]: Boolean(headerLine)
       });
-      const headerWrapperCls = cls("".concat(prefixcls, "-header-wrapper"));
-      const titleCls = cls("".concat(prefixcls, "-header-wrapper-title"), {
-        ["".concat(prefixcls, "-header-wrapper-spacing")]: Boolean(headerExtraContent)
+      const headerWrapperCls = cls(`${prefixcls}-header-wrapper`);
+      const titleCls = cls(`${prefixcls}-header-wrapper-title`, {
+        [`${prefixcls}-header-wrapper-spacing`]: Boolean(headerExtraContent)
       });
 
       if (header || headerExtraContent || title) {
@@ -53,7 +53,7 @@ class Card extends PureComponent {
         React.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixcls, "-header-wrapper-extra"),
+          className: `${prefixcls}-header-wrapper-extra`,
           "x-semi-prop": "headerExtraContent"
         }, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
           className: titleCls
@@ -74,7 +74,7 @@ class Card extends PureComponent {
       const {
         cover
       } = this.props;
-      const coverCls = cls("".concat(prefixcls, "-cover"));
+      const coverCls = cls(`${prefixcls}-cover`);
       return cover && /*#__PURE__*/React.createElement("div", {
         className: coverCls,
         "x-semi-prop": "cover"
@@ -88,9 +88,9 @@ class Card extends PureComponent {
         actions,
         loading
       } = this.props;
-      const bodyCls = cls("".concat(prefixcls, "-body"));
-      const actionsCls = cls("".concat(prefixcls, "-body-actions"));
-      const actionsItemCls = cls("".concat(prefixcls, "-body-actions-item"));
+      const bodyCls = cls(`${prefixcls}-body`);
+      const actionsCls = cls(`${prefixcls}-body-actions`);
+      const actionsItemCls = cls(`${prefixcls}-body-actions-item`);
       const placeholder = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton.Title, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Skeleton.Paragraph, {
         rows: 3
       }));
@@ -108,7 +108,7 @@ class Card extends PureComponent {
       }, actions.map((item, idx) => /*#__PURE__*/React.createElement("div", {
         key: idx,
         className: actionsItemCls,
-        "x-semi-prop": "actions.".concat(idx)
+        "x-semi-prop": `actions.${idx}`
       }, item)))));
     };
 
@@ -118,8 +118,8 @@ class Card extends PureComponent {
         footerLine,
         footerStyle
       } = this.props;
-      const footerCls = cls("".concat(prefixcls, "-footer"), {
-        ["".concat(prefixcls, "-footer-bordered")]: footerLine
+      const footerCls = cls(`${prefixcls}-footer`, {
+        [`${prefixcls}-footer-bordered`]: footerLine
       });
       return footer && /*#__PURE__*/React.createElement("div", {
         style: footerStyle,
@@ -142,9 +142,9 @@ class Card extends PureComponent {
     const others = _omit(otherProps, ['actions', 'bodyStyle', 'cover', 'headerExtraContent', 'footer', 'footerLine', 'footerStyle', 'header', 'headerLine', 'headerStyle', 'loading', 'title']);
 
     const cardCls = cls(prefixcls, className, {
-      ["".concat(prefixcls, "-bordered")]: bordered,
-      ["".concat(prefixcls, "-shadows")]: shadows,
-      ["".concat(prefixcls, "-shadows-").concat(shadows)]: shadows
+      [`${prefixcls}-bordered`]: bordered,
+      [`${prefixcls}-shadows`]: shadows,
+      [`${prefixcls}-shadows-${shadows}`]: shadows
     });
     return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
       "aria-busy": this.props.loading,

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.d.ts

@@ -6,10 +6,10 @@ import { ContextValue } from '../configProvider/context';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import Input from '../input/index';
 import { PopoverProps } from '../popover/index';
-import { CascaderData, Entities, Entity, Data } from './item';
+import { CascaderData, Entities, Entity, Data, FilterRenderProps } from './item';
 import { Position } from '../tooltip/index';
 export type { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
-export type { CascaderData, Entity, Data, CascaderItemProps } from './item';
+export type { CascaderData, Entity, Data, CascaderItemProps, FilterRenderProps } from './item';
 export interface ScrollPanelProps extends BasicScrollPanelProps {
     activeNode: CascaderData;
 }
@@ -33,6 +33,9 @@ export interface CascaderProps extends BasicCascaderProps {
     dropdownMargin?: PopoverProps['margin'];
     emptyContent?: ReactNode;
     motion?: boolean;
+    filterTreeNode?: ((inputValue: string, treeNodeString: string, data?: CascaderData) => boolean) | boolean;
+    filterSorter?: (first: CascaderData, second: CascaderData, inputValue: string) => number;
+    filterRender?: (props: FilterRenderProps) => ReactNode;
     treeData?: Array<CascaderData>;
     restTagsPopoverProps?: PopoverProps;
     children?: React.ReactNode;