@douyinfe/semi-ui 2.30.0-alpha.0 → 2.30.0

package/lib/cjs/popconfirm/index.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -62,12 +66,74 @@ class Popconfirm extends _baseComponent.default {
 
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
+    this.renderConfirmPopCard = _ref => {
+      let {
+        initialFocusRef
+      } = _ref;
+      const {
+        content,
+        title,
+        className,
+        style,
+        cancelType,
+        icon,
+        prefixCls
+      } = this.props;
+      const {
+        direction
+      } = this.context;
+      const popCardCls = (0, _classnames.default)(prefixCls, className, {
+        [`${prefixCls}-rtl`]: direction === 'rtl'
+      });
+      const showTitle = title !== null && typeof title !== 'undefined';
+      const showContent = !(content === null || typeof content === 'undefined');
+      return (
+        /*#__PURE__*/
+
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
+        _react.default.createElement("div", {
+          className: popCardCls,
+          onClick: this.stopImmediatePropagation,
+          style: style
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-inner`
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-header`
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          className: `${prefixCls}-header-icon`,
+          "x-semi-prop": "icon"
+        }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-header-body`
+        }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-header-title`,
+          "x-semi-prop": "title"
+        }, title) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
+          className: `${prefixCls}-btn-close`,
+          icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+          size: "small",
+          theme: 'borderless',
+          type: cancelType,
+          onClick: this.handleCancel
+        })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-body`,
+          "x-semi-prop": "content"
+        }, (0, _isFunction2.default)(content) ? content({
+          initialFocusRef
+        }) : content) : null, /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixCls}-footer`,
+          ref: this.footerRef
+        }, this.renderControls())))
+      );
+    };
+
     this.state = {
       cancelLoading: false,
       confirmLoading: false,
       visible: props.defaultVisible || false
     };
     this.foundation = new _popconfirmFoundation.default(this.adapter);
+    this.footerRef = /*#__PURE__*/_react.default.createRef();
+    this.popoverRef = /*#__PURE__*/_react.default.createRef();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -97,7 +163,28 @@ class Popconfirm extends _baseComponent.default {
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
       notifyVisibleChange: visible => this.props.onVisibleChange(visible),
-      notifyClickOutSide: e => this.props.onClickOutSide(e)
+      notifyClickOutSide: e => this.props.onClickOutSide(e),
+      focusCancelButton: () => {
+        var _a, _b;
+
+        const buttonNode = (_b = (_a = this.footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-type=cancel]');
+        buttonNode === null || buttonNode === void 0 ? void 0 : buttonNode.focus({
+          preventScroll: true
+        });
+      },
+      focusOkButton: () => {
+        var _a, _b;
+
+        const buttonNode = (_b = (_a = this.footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-type=ok]');
+        buttonNode === null || buttonNode === void 0 ? void 0 : buttonNode.focus({
+          preventScroll: true
+        });
+      },
+      focusPrevFocusElement: () => {
+        var _a;
+
+        (_a = this.popoverRef.current) === null || _a === void 0 ? void 0 : _a.focusTrigger();
+      }
     });
   }
 
@@ -117,68 +204,17 @@ class Popconfirm extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Popconfirm"
     }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+      "data-type": "cancel",
       type: cancelType,
       onClick: this.handleCancel,
       loading: cancelLoading
-    }, cancelButtonProps), cancelText || (0, _get2.default)(locale, 'cancel')), /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+    }, (0, _omit2.default)(cancelButtonProps, 'autoFocus')), cancelText || (0, _get2.default)(locale, 'cancel')), /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+      "data-type": "ok",
       type: okType,
       theme: "solid",
       onClick: this.handleConfirm,
       loading: confirmLoading
-    }, okButtonProps), okText || (0, _get2.default)(locale, 'confirm'))));
-  }
-
-  renderConfirmPopCard() {
-    const {
-      content,
-      title,
-      className,
-      style,
-      cancelType,
-      icon,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
-    });
-    const showTitle = title !== null && typeof title !== 'undefined';
-    const showContent = !(content === null || typeof content === 'undefined');
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      _react.default.createElement("div", {
-        className: popCardCls,
-        onClick: this.stopImmediatePropagation,
-        style: style
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-inner")
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header")
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "".concat(prefixCls, "-header-icon"),
-        "x-semi-prop": "icon"
-      }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header-body")
-      }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header-title"),
-        "x-semi-prop": "title"
-      }, title) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
-        className: "".concat(prefixCls, "-btn-close"),
-        icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-        size: "small",
-        theme: 'borderless',
-        type: cancelType,
-        onClick: this.handleCancel
-      })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-body"),
-        "x-semi-prop": "content"
-      }, content) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-footer")
-      }, this.renderControls())))
-    );
+    }, (0, _omit2.default)(okButtonProps, 'autoFocus')), okText || (0, _get2.default)(locale, 'confirm'))));
   }
 
   render() {
@@ -206,7 +242,6 @@ class Popconfirm extends _baseComponent.default {
     const {
       visible
     } = this.state;
-    const popContent = this.renderConfirmPopCard();
     const popProps = {
       onVisibleChange: this.handleVisibleChange,
       className: _constants.cssClasses.POPOVER,
@@ -217,8 +252,10 @@ class Popconfirm extends _baseComponent.default {
       popProps.trigger = 'custom';
     }
 
-    return /*#__PURE__*/_react.default.createElement(_popover.default, Object.assign({}, attrs, {
-      content: popContent,
+    return /*#__PURE__*/_react.default.createElement(_popover.default, Object.assign({
+      ref: this.popoverRef
+    }, attrs, {
+      content: this.renderConfirmPopCard,
       visible: visible,
       position: position
     }, popProps), children);
@@ -231,7 +268,7 @@ Popconfirm.contextType = _context.default;
 Popconfirm.propTypes = {
   motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
   disabled: _propTypes.default.bool,
-  content: _propTypes.default.any,
+  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   title: _propTypes.default.any,
   prefixCls: _propTypes.default.string,
   className: _propTypes.default.string,

package/lib/cjs/popover/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
-import { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
+import Tooltip, { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/cjs/popover/popover.css';
 import { BaseProps } from '../_base/baseComponent';
 import type { ArrowProps } from './Arrow';
@@ -54,7 +54,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         visible: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
@@ -101,6 +101,12 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         disableFocusListener: boolean;
     };
     context: ContextValue;
+    tooltipRef: React.RefObject<Tooltip | null>;
+    constructor(props: PopoverProps);
+    /**
+     * focus on tooltip trigger
+     */
+    focusTrigger: () => void;
     renderPopCard: ({ initialFocusRef }: {
         initialFocusRef: RenderContentProps['initialFocusRef'];
     }) => JSX.Element;

package/lib/cjs/popover/index.js

@@ -42,8 +42,17 @@ const positionSet = _constants.strings.POSITION_SET;
 const triggerSet = _constants.strings.TRIGGER_SET;
 
 class Popover extends _react.default.PureComponent {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    super(props);
+    /**
+     * focus on tooltip trigger
+     */
+
+    this.focusTrigger = () => {
+      var _a;
+
+      (_a = this.tooltipRef.current) === null || _a === void 0 ? void 0 : _a.focusTrigger();
+    };
 
     this.renderPopCard = _ref => {
       let {
@@ -58,7 +67,7 @@ class Popover extends _react.default.PureComponent {
         direction
       } = this.context;
       const popCardCls = (0, _classnames.default)(prefixCls, contentClassName, {
-        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+        [`${prefixCls}-rtl`]: direction === 'rtl'
       });
       const contentNode = this.renderContentNode({
         initialFocusRef,
@@ -67,7 +76,7 @@ class Popover extends _react.default.PureComponent {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: popCardCls
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: `${prefixCls}-content`
       }, contentNode));
     };
 
@@ -81,6 +90,8 @@ class Popover extends _react.default.PureComponent {
       };
       return !(0, _isFunction2.default)(content) ? content : content(contentProps);
     };
+
+    this.tooltipRef = /*#__PURE__*/_react.default.createRef();
   }
 
   render() {
@@ -114,7 +125,8 @@ class Popover extends _react.default.PureComponent {
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
     return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
-      guardFocus: true
+      guardFocus: true,
+      ref: this.tooltipRef
     }, attr, {
       trigger: trigger,
       position: position,

package/lib/cjs/progress/index.js

@@ -122,9 +122,9 @@ class Progress extends _react.Component {
       percentNumber
     } = this.state;
     const classNames = {
-      wrapper: (0, _classnames.default)("".concat(prefixCls, "-circle"), className),
-      svg: (0, _classnames.default)("".concat(prefixCls, "-circle-ring")),
-      circle: (0, _classnames.default)("".concat(prefixCls, "-circle-ring-inner"))
+      wrapper: (0, _classnames.default)(`${prefixCls}-circle`, className),
+      svg: (0, _classnames.default)(`${prefixCls}-circle-ring`),
+      circle: (0, _classnames.default)(`${prefixCls}-circle-ring-inner`)
     };
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber);
@@ -147,7 +147,7 @@ class Progress extends _react.Component {
     const circumference = radius * 2 * Math.PI;
     const strokeDashoffset = (1 - perc / 100) * circumference; // Offset
 
-    const strokeDasharray = "".concat(circumference, " ").concat(circumference);
+    const strokeDasharray = `${circumference} ${circumference}`;
     const text = format(percNumber);
     return /*#__PURE__*/_react.default.createElement("div", {
       id: id,
@@ -190,7 +190,7 @@ class Progress extends _react.Component {
       cy: cy,
       "aria-hidden": true
     })), showInfo && size !== 'small' ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-circle-text")
+      className: `${prefixCls}-circle-text`
     }, text) : null);
   }
 
@@ -243,14 +243,14 @@ class Progress extends _react.Component {
       percentNumber
     } = this.state;
     const progressWrapperCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-horizontal")]: direction === _constants.strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-vertical")]: direction !== _constants.strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-large")]: size === 'large'
+      [`${prefixCls}-horizontal`]: direction === _constants.strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-vertical`]: direction !== _constants.strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-large`]: size === 'large'
     });
     const progressTrackCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-track")]: true
+      [`${prefixCls}-track`]: true
     });
-    const innerCls = (0, _classnames.default)("".concat(prefixCls, "-track-inner"));
+    const innerCls = (0, _classnames.default)(`${prefixCls}-track-inner`);
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
 
@@ -261,9 +261,9 @@ class Progress extends _react.Component {
     };
 
     if (direction === _constants.strings.DEFAULT_DIRECTION) {
-      innerStyle.width = "".concat(perc, "%");
+      innerStyle.width = `${perc}%`;
     } else {
-      innerStyle.height = "".concat(perc, "%");
+      innerStyle.height = `${perc}%`;
     }
 
     const text = format(percNumber);
@@ -289,7 +289,7 @@ class Progress extends _react.Component {
       style: innerStyle,
       "aria-hidden": true
     })), showInfo ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-line-text")
+      className: `${prefixCls}-line-text`
     }, text) : null);
   }
 
@@ -335,7 +335,7 @@ Progress.propTypes = {
 Progress.defaultProps = {
   className: '',
   direction: _constants.strings.DEFAULT_DIRECTION,
-  format: text => "".concat(text, "%"),
+  format: text => `${text}%`,
   motion: true,
   orbitStroke: 'var(--semi-color-fill-0)',
   percent: 0,

package/lib/cjs/radio/radio.d.ts

@@ -82,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/cjs/radio/radio.js

@@ -194,29 +194,29 @@ class Radio extends _baseComponent.default {
     const prefix = realPrefixCls || _constants.radioClasses.PREFIX;
     const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
     const wrapper = (0, _classnames.default)(prefix, {
-      ["".concat(prefix, "-disabled")]: isDisabled,
-      ["".concat(prefix, "-checked")]: realChecked,
-      ["".concat(prefix, "-").concat(displayMode)]: Boolean(displayMode),
-      ["".concat(prefix, "-buttonRadioComponent")]: isButtonRadioComponent,
-      ["".concat(prefix, "-buttonRadioGroup")]: isButtonRadioGroup,
-      ["".concat(prefix, "-buttonRadioGroup-").concat(buttonSize)]: isButtonRadioGroup && buttonSize,
-      ["".concat(prefix, "-cardRadioGroup")]: isCardRadioGroup,
-      ["".concat(prefix, "-cardRadioGroup_disabled")]: isDisabled && isCardRadioGroup,
-      ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
-      ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
-      ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
+      [`${prefix}-disabled`]: isDisabled,
+      [`${prefix}-checked`]: realChecked,
+      [`${prefix}-${displayMode}`]: Boolean(displayMode),
+      [`${prefix}-buttonRadioComponent`]: isButtonRadioComponent,
+      [`${prefix}-buttonRadioGroup`]: isButtonRadioGroup,
+      [`${prefix}-buttonRadioGroup-${buttonSize}`]: isButtonRadioGroup && buttonSize,
+      [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
+      [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
+      [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
+      [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
+      [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
       [className]: Boolean(className),
-      ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
+      [`${prefix}-focus`]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
     });
     const groupName = this.isInGroup() && this.context.radioGroup.name;
     const addonCls = (0, _classnames.default)({
-      ["".concat(prefix, "-addon")]: !isButtonRadio,
-      ["".concat(prefix, "-addon-buttonRadio")]: isButtonRadio,
-      ["".concat(prefix, "-addon-buttonRadio-checked")]: isButtonRadio && realChecked,
-      ["".concat(prefix, "-addon-buttonRadio-disabled")]: isButtonRadio && isDisabled,
-      ["".concat(prefix, "-addon-buttonRadio-hover")]: isButtonRadio && !realChecked && !isDisabled && isHover,
-      ["".concat(prefix, "-addon-buttonRadio-").concat(buttonSize)]: isButtonRadio && buttonSize,
-      ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
+      [`${prefix}-addon`]: !isButtonRadio,
+      [`${prefix}-addon-buttonRadio`]: isButtonRadio,
+      [`${prefix}-addon-buttonRadio-checked`]: isButtonRadio && realChecked,
+      [`${prefix}-addon-buttonRadio-disabled`]: isButtonRadio && isDisabled,
+      [`${prefix}-addon-buttonRadio-hover`]: isButtonRadio && !realChecked && !isDisabled && isHover,
+      [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
+      [`${prefix}-focus`]: focusVisible && isButtonRadio
     }, addonClassName);
 
     const renderContent = () => {
@@ -225,8 +225,8 @@ class Radio extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(prefix, "-content"), {
-          ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+        className: (0, _classnames.default)([`${prefix}-content`, {
+          [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup
         }])
       }, children ? /*#__PURE__*/_react.default.createElement("span", {
         className: addonCls,
@@ -234,7 +234,7 @@ class Radio extends _baseComponent.default {
         id: addonId,
         "x-semi-prop": "children"
       }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefix, "-extra"),
+        className: `${prefix}-extra`,
         id: extraId,
         "x-semi-prop": "extra"
       }, extra) : null);

package/lib/cjs/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/radio/radioGroup.js

@@ -96,11 +96,11 @@ class RadioGroup extends _baseComponent.default {
     const prefix = prefixCls || _constants.radioGroupClasses.PREFIX;
     const prefixClsDisplay = (0, _classnames.default)(className, {
       [prefix]: true,
-      ["".concat(prefix, "-wrapper")]: true,
-      ["".concat(prefix, "-").concat(direction)]: direction && !isButtonRadio,
-      ["".concat(prefix, "-").concat(direction, "-default")]: direction && isDefaultRadio,
-      ["".concat(prefix, "-").concat(direction, "-card")]: direction && isCardRadio,
-      ["".concat(prefix, "-buttonRadio")]: isButtonRadio
+      [`${prefix}-wrapper`]: true,
+      [`${prefix}-${direction}`]: direction && !isButtonRadio,
+      [`${prefix}-${direction}-default`]: direction && isDefaultRadio,
+      [`${prefix}-${direction}-card`]: direction && isCardRadio,
+      [`${prefix}-buttonRadio`]: isButtonRadio
     });
     const realValue = this.state.value;
     let inner;

package/lib/cjs/radio/radioInner.js

@@ -99,15 +99,15 @@ class RadioInner extends _baseComponent.default {
     } = this.state;
     const prefix = this.props.prefixCls || _constants.radioClasses.PREFIX;
     const wrapper = (0, _classnames.default)({
-      ["".concat(prefix, "-inner")]: true,
-      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
-      ["".concat(prefix, "-inner-buttonRadio")]: isButtonRadio,
-      ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
+      [`${prefix}-inner`]: true,
+      [`${prefix}-inner-checked`]: Boolean(checked),
+      [`${prefix}-inner-buttonRadio`]: isButtonRadio,
+      [`${prefix}-inner-pureCardRadio`]: isPureCardRadioGroup
     });
     const inner = (0, _classnames.default)({
-      ["".concat(prefix, "-focus")]: focusInner,
-      ["".concat(prefix, "-focus-border")]: focusInner && !checked,
-      ["".concat(prefix, "-inner-display")]: !isButtonRadio
+      [`${prefix}-focus`]: focusInner,
+      [`${prefix}-focus-border`]: focusInner && !checked,
+      [`${prefix}-inner-display`]: !isButtonRadio
     });
     return /*#__PURE__*/_react.default.createElement("span", {
       className: wrapper

package/lib/cjs/rating/index.js

@@ -140,7 +140,7 @@ class Rating extends _baseComponent.default {
           ref: this.saveRef(ind),
           index: ind,
           count: count,
-          prefixCls: "".concat(prefixCls, "-star"),
+          prefixCls: `${prefixCls}-star`,
           allowHalf: allowHalf,
           value: hoverValue === undefined ? value : hoverValue,
           onClick: disabled ? _function.noop : this.onClick,
@@ -162,7 +162,7 @@ class Rating extends _baseComponent.default {
             visible: showTips,
             trigger: "custom",
             content: text,
-            key: "".concat(ind, "-").concat(showTips)
+            key: `${ind}-${showTips}`
           }, content);
         }
 
@@ -300,11 +300,11 @@ class Rating extends _baseComponent.default {
       emptyStarFocusVisible
     } = this.state;
     const ariaLabelPrefix = this.getAriaLabelPrefix();
-    const ariaLabel = "Rating: ".concat(value, " of ").concat(count, " ").concat(ariaLabelPrefix).concat(value === 1 ? '' : 's', ",");
+    const ariaLabel = `Rating: ${value} of ${count} ${ariaLabelPrefix}${value === 1 ? '' : 's'},`;
     const itemList = this.getItemList(ariaLabelPrefix);
     const listCls = (0, _classnames.default)(prefixCls, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-focus")]: emptyStarFocusVisible
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-focus`]: emptyStarFocusVisible
     }, className);
     return (
       /*#__PURE__*/

package/lib/cjs/rating/item.js

@@ -145,9 +145,9 @@ class Item extends _baseComponent.default {
     const isFull = starValue <= value;
     const isCustomSize = typeof size === 'number';
     const starCls = (0, _classnames.default)(prefixCls, {
-      ["".concat(prefixCls, "-half")]: isHalf,
-      ["".concat(prefixCls, "-full")]: isFull,
-      ["".concat(prefixCls, "-").concat(size)]: !isCustomSize
+      [`${prefixCls}-half`]: isHalf,
+      [`${prefixCls}-full`]: isFull,
+      [`${prefixCls}-${size}`]: !isCustomSize
     });
     const sizeStyle = isCustomSize ? {
       width: size,
@@ -162,9 +162,9 @@ class Item extends _baseComponent.default {
       }
     });
     const isEmpty = index === count;
-    const starWrapCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
+    const starWrapCls = (0, _classnames.default)(`${prefixCls}-wrapper`, {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${_constants.cssClasses.PREFIX}-focus`]: (firstStarFocus || secondStarFocus) && value !== 0
     });
     const starWrapProps = {
       onClick: disabled ? null : this.onClick,
@@ -180,10 +180,10 @@ class Item extends _baseComponent.default {
       'aria-posinset': 2 * index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(index + 0.5, " ").concat(ariaLabelPrefix, "s"),
+      'aria-label': `${index + 0.5} ${ariaLabelPrefix}s`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: (0, _classnames.default)("".concat(prefixCls, "-first"), "".concat(_constants.cssClasses.PREFIX, "-no-focus")),
+      className: (0, _classnames.default)(`${prefixCls}-first`, `${_constants.cssClasses.PREFIX}-no-focus`),
       tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
       onFocus: e => {
         this.onFocus(e, 'first');
@@ -200,10 +200,10 @@ class Item extends _baseComponent.default {
       'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(isEmpty ? 0 : index + 1, " ").concat(ariaLabelPrefix).concat(index === 0 ? '' : 's'),
+      'aria-label': `${isEmpty ? 0 : index + 1} ${ariaLabelPrefix}${index === 0 ? '' : 's'}`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: (0, _classnames.default)("".concat(prefixCls, "-second"), "".concat(_constants.cssClasses.PREFIX, "-no-focus")),
+      className: (0, _classnames.default)(`${prefixCls}-second`, `${_constants.cssClasses.PREFIX}-no-focus`),
       tabIndex: secondStarTabIndex,
       onFocus: e => {
         this.onFocus(e, 'second');
@@ -218,7 +218,7 @@ class Item extends _baseComponent.default {
       key: index
     }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/_react.default.createElement("div", Object.assign({}, firstStarProps, {
       style: {
-        width: "".concat(firstWidth * 100, "%")
+        width: `${firstWidth * 100}%`
       }
     }), content), /*#__PURE__*/_react.default.createElement("div", Object.assign({}, secondStarProps, {
       "x-semi-prop": "character"

package/lib/cjs/scrollList/index.js

@@ -44,7 +44,7 @@ class ScrollList extends _baseComponent.default {
       [prefixCls || _constants.cssClasses.PREFIX]: true
     });
     const clsHeader = (0, _classnames.default)({
-      ["".concat(prefixCls || _constants.cssClasses.PREFIX, "-header")]: true
+      [`${prefixCls || _constants.cssClasses.PREFIX}-header`]: true
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: clsWrapper,
@@ -52,18 +52,18 @@ class ScrollList extends _baseComponent.default {
     }, header ? /*#__PURE__*/_react.default.createElement("div", {
       className: clsHeader
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(clsHeader, "-title"),
+      className: `${clsHeader}-title`,
       "x-semi-prop": this.props['x-semi-header-alias'] || "header"
     }, header), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(clsWrapper, "-line")
+      className: `${clsWrapper}-line`
     })) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(clsWrapper, "-body"),
+      className: `${clsWrapper}-body`,
       style: {
         height: bodyHeight ? bodyHeight : ''
       },
       "x-semi-prop": "children"
     }, children), footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(clsWrapper, "-footer"),
+      className: `${clsWrapper}-footer`,
       "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
     }, footer) : null);
   }