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

package/lib/es/pagination/index.js

@@ -138,9 +138,9 @@ export default class Pagination extends BaseComponent {
       prevDisabled
     } = this.state;
     const preClassName = classNames({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-prev")]: true,
-      ["".concat(prefixCls, "-item-disabled")]: prevDisabled
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-prev`]: true,
+      [`${prefixCls}-item-disabled`]: prevDisabled
     });
     return /*#__PURE__*/React.createElement("li", {
       role: "button",
@@ -162,9 +162,9 @@ export default class Pagination extends BaseComponent {
       nextDisabled
     } = this.state;
     const nextClassName = classNames({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-item-disabled")]: nextDisabled,
-      ["".concat(prefixCls, "-next")]: true
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-disabled`]: nextDisabled,
+      [`${prefixCls}-next`]: true
     });
     return /*#__PURE__*/React.createElement("li", {
       role: "button",
@@ -191,7 +191,7 @@ export default class Pagination extends BaseComponent {
     const {
       pageSize
     } = this.state;
-    const switchCls = classNames("".concat(prefixCls, "-switch"));
+    const switchCls = classNames(`${prefixCls}-switch`);
 
     if (!showSizeChanger) {
       return null;
@@ -213,7 +213,7 @@ export default class Pagination extends BaseComponent {
       key: pageSize,
       position: popoverPosition || 'bottomRight',
       clickToHide: true,
-      dropdownClassName: "".concat(prefixCls, "-select-dropdown")
+      dropdownClassName: `${prefixCls}-select-dropdown`
     }, options));
   }
 
@@ -235,14 +235,14 @@ export default class Pagination extends BaseComponent {
 
     const isDisabled = totalPageNum === 1;
     const quickJumpCls = classNames({
-      ["".concat(prefixCls, "-quickjump")]: true,
-      ["".concat(prefixCls, "-quickjump-disabled")]: isDisabled
+      [`${prefixCls}-quickjump`]: true,
+      [`${prefixCls}-quickjump-disabled`]: isDisabled
     });
     return /*#__PURE__*/React.createElement("div", {
       className: quickJumpCls
     }, /*#__PURE__*/React.createElement("span", null, locale.jumpTo), /*#__PURE__*/React.createElement(InputNumber, {
       value: quickJumpPage,
-      className: "".concat(prefixCls, "-quickjump-input-number"),
+      className: `${prefixCls}-quickjump-input-number`,
       hideButtons: true,
       disabled: isDisabled,
       onBlur: e => this.foundation.handleQuickJumpBlur(),
@@ -263,15 +263,15 @@ export default class Pagination extends BaseComponent {
       popoverZIndex
     } = this.props;
     return pageList.map((page, i) => {
-      const pageListClassName = classNames("".concat(prefixCls, "-item"), {
-        ["".concat(prefixCls, "-item-active")]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
+      const pageListClassName = classNames(`${prefixCls}-item`, {
+        [`${prefixCls}-item-active`]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
 
       });
       const pageEl = /*#__PURE__*/React.createElement("li", {
-        key: "".concat(page).concat(i),
+        key: `${page}${i}`,
         onClick: () => this.foundation.goPage(page, i),
         className: pageListClassName,
-        "aria-label": page === '...' ? 'More' : "Page ".concat(page),
+        "aria-label": page === '...' ? 'More' : `Page ${page}`,
         "aria-current": currentPage === page ? "page" : false
       }, page);
 
@@ -282,7 +282,7 @@ export default class Pagination extends BaseComponent {
           trigger: "hover",
           // onVisibleChange={visible=>this.handleRestHover(visible, i < 3 ? 'left' : 'right')}
           content: this.renderRestPageList(content),
-          key: "".concat(page).concat(i),
+          key: `${page}${i}`,
           position: popoverPosition,
           zIndex: popoverZIndex
         }, pageEl);
@@ -297,7 +297,7 @@ export default class Pagination extends BaseComponent {
     const {
       direction
     } = this.context;
-    const className = classNames("".concat(prefixCls, "-rest-item"));
+    const className = classNames(`${prefixCls}-rest-item`);
     const count = restList.length;
 
     const row = item => {
@@ -308,11 +308,11 @@ export default class Pagination extends BaseComponent {
       const page = restList[index];
       return /*#__PURE__*/React.createElement("div", {
         role: "listitem",
-        key: "".concat(page).concat(index),
+        key: `${page}${index}`,
         className: className,
         onClick: () => this.foundation.goPage(page, index),
         style: style,
-        "aria-label": "".concat(page)
+        "aria-label": `${page}`
       }, page);
     };
 
@@ -322,7 +322,7 @@ export default class Pagination extends BaseComponent {
       /*#__PURE__*/
       // @ts-ignore skip type check cause react-window not update with @types/react 18
       React.createElement(List, {
-        className: "".concat(prefixCls, "-rest-list"),
+        className: `${prefixCls}-rest-list`,
         itemData: restList,
         itemSize: itemHeight,
         width: 78,
@@ -343,7 +343,7 @@ export default class Pagination extends BaseComponent {
       hoverShowPageSelect,
       showSizeChanger
     } = this.props;
-    const paginationCls = classNames("".concat(prefixCls, "-small"), prefixCls, className);
+    const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
     const {
       currentPage,
       total,
@@ -360,7 +360,7 @@ export default class Pagination extends BaseComponent {
     }, (v, i) => i + 1);
     const pageList = this.renderRestPageList(pageNumbers);
     const page = /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-small")
+      className: `${prefixCls}-item ${prefixCls}-item-small`
     }, currentPage, "/", totalPageNum, " ");
     return /*#__PURE__*/React.createElement("div", {
       className: paginationCls,
@@ -382,8 +382,8 @@ export default class Pagination extends BaseComponent {
       hideOnSinglePage,
       showSizeChanger
     } = this.props;
-    const paginationCls = classNames(className, "".concat(prefixCls));
-    const showTotalCls = "".concat(prefixCls, "-total");
+    const paginationCls = classNames(className, `${prefixCls}`);
+    const showTotalCls = `${prefixCls}-total`;
     const totalPageNum = Math.ceil(total / pageSize);
 
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {

package/lib/es/popconfirm/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PopconfirmAdapter } from '@douyinfe/semi-foundation/lib/es/popconfirm/popconfirmFoundation';
+import PopconfirmFoundation, { PopconfirmAdapter } from '@douyinfe/semi-foundation/lib/es/popconfirm/popconfirmFoundation';
 import BaseComponent from '../_base/baseComponent';
-import { PopoverProps } from '../popover';
-import { Position, Trigger } from '../tooltip';
+import Popover, { PopoverProps } from '../popover';
+import { Position, Trigger, RenderContentProps } from '../tooltip';
 import { ButtonProps } from '../button';
 import { Type as ButtonType } from '../button/Button';
 import { ContextValue } from '../configProvider/context';
@@ -12,7 +12,6 @@ export interface PopconfirmProps extends PopoverProps {
     cancelText?: string;
     cancelButtonProps?: ButtonProps;
     cancelType?: ButtonType;
-    content?: React.ReactNode;
     defaultVisible?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
@@ -41,7 +40,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     static propTypes: {
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         disabled: PropTypes.Requireable<boolean>;
-        content: PropTypes.Requireable<any>;
+        content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         title: PropTypes.Requireable<any>;
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
@@ -78,6 +77,9 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         onConfirm: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
     };
+    footerRef: React.RefObject<HTMLDivElement | null>;
+    popoverRef: React.RefObject<Popover | null>;
+    foundation: PopconfirmFoundation;
     constructor(props: PopconfirmProps);
     context: ContextValue;
     static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState): Partial<PopconfirmState>;
@@ -85,9 +87,11 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     handleCancel: (e: React.MouseEvent) => void;
     handleConfirm: (e: React.MouseEvent) => void;
     handleVisibleChange: (visible: boolean) => void;
-    handleClickOutSide: (e: React.MouseEvent) => any;
+    handleClickOutSide: (e: React.MouseEvent) => void;
     stopImmediatePropagation: (e: React.SyntheticEvent) => void;
     renderControls(): JSX.Element;
-    renderConfirmPopCard(): JSX.Element;
+    renderConfirmPopCard: ({ initialFocusRef }: {
+        initialFocusRef?: RenderContentProps<any>['initialFocusRef'];
+    }) => JSX.Element;
     render(): string | number | boolean | React.ReactFragment | JSX.Element;
 }

package/lib/es/popconfirm/index.js

@@ -1,3 +1,5 @@
+import _omit from "lodash/omit";
+import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _noop from "lodash/noop";
 
@@ -40,12 +42,74 @@ export default class Popconfirm extends BaseComponent {
 
     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 = cls(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.createElement("div", {
+          className: popCardCls,
+          onClick: this.stopImmediatePropagation,
+          style: style
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-inner`
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header`
+        }, /*#__PURE__*/React.createElement("i", {
+          className: `${prefixCls}-header-icon`,
+          "x-semi-prop": "icon"
+        }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header-body`
+        }, showTitle ? /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header-title`,
+          "x-semi-prop": "title"
+        }, title) : null), /*#__PURE__*/React.createElement(Button, {
+          className: `${prefixCls}-btn-close`,
+          icon: /*#__PURE__*/React.createElement(IconClose, null),
+          size: "small",
+          theme: 'borderless',
+          type: cancelType,
+          onClick: this.handleCancel
+        })), showContent ? /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-body`,
+          "x-semi-prop": "content"
+        }, _isFunction(content) ? content({
+          initialFocusRef
+        }) : content) : null, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-footer`,
+          ref: this.footerRef
+        }, this.renderControls())))
+      );
+    };
+
     this.state = {
       cancelLoading: false,
       confirmLoading: false,
       visible: props.defaultVisible || false
     };
     this.foundation = new PopconfirmFoundation(this.adapter);
+    this.footerRef = /*#__PURE__*/React.createRef();
+    this.popoverRef = /*#__PURE__*/React.createRef();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -75,7 +139,28 @@ export default class Popconfirm extends BaseComponent {
       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();
+      }
     });
   }
 
@@ -95,68 +180,17 @@ export default class Popconfirm extends BaseComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Popconfirm"
     }, (locale, localeCode) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, Object.assign({
+      "data-type": "cancel",
       type: cancelType,
       onClick: this.handleCancel,
       loading: cancelLoading
-    }, cancelButtonProps), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, Object.assign({
+    }, _omit(cancelButtonProps, 'autoFocus')), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, Object.assign({
+      "data-type": "ok",
       type: okType,
       theme: "solid",
       onClick: this.handleConfirm,
       loading: confirmLoading
-    }, okButtonProps), okText || _get(locale, 'confirm'))));
-  }
-
-  renderConfirmPopCard() {
-    const {
-      content,
-      title,
-      className,
-      style,
-      cancelType,
-      icon,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = cls(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.createElement("div", {
-        className: popCardCls,
-        onClick: this.stopImmediatePropagation,
-        style: style
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-inner")
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "".concat(prefixCls, "-header-icon"),
-        "x-semi-prop": "icon"
-      }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header-body")
-      }, showTitle ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header-title"),
-        "x-semi-prop": "title"
-      }, title) : null), /*#__PURE__*/React.createElement(Button, {
-        className: "".concat(prefixCls, "-btn-close"),
-        icon: /*#__PURE__*/React.createElement(IconClose, null),
-        size: "small",
-        theme: 'borderless',
-        type: cancelType,
-        onClick: this.handleCancel
-      })), showContent ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-body"),
-        "x-semi-prop": "content"
-      }, content) : null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-footer")
-      }, this.renderControls())))
-    );
+    }, _omit(okButtonProps, 'autoFocus')), okText || _get(locale, 'confirm'))));
   }
 
   render() {
@@ -184,7 +218,6 @@ export default class Popconfirm extends BaseComponent {
     const {
       visible
     } = this.state;
-    const popContent = this.renderConfirmPopCard();
     const popProps = {
       onVisibleChange: this.handleVisibleChange,
       className: cssClasses.POPOVER,
@@ -195,8 +228,10 @@ export default class Popconfirm extends BaseComponent {
       popProps.trigger = 'custom';
     }
 
-    return /*#__PURE__*/React.createElement(Popover, Object.assign({}, attrs, {
-      content: popContent,
+    return /*#__PURE__*/React.createElement(Popover, Object.assign({
+      ref: this.popoverRef
+    }, attrs, {
+      content: this.renderConfirmPopCard,
       visible: visible,
       position: position
     }, popProps), children);
@@ -207,7 +242,7 @@ Popconfirm.contextType = ConfigContext;
 Popconfirm.propTypes = {
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
   disabled: PropTypes.bool,
-  content: PropTypes.any,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   title: PropTypes.any,
   prefixCls: PropTypes.string,
   className: PropTypes.string,

package/lib/es/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/es/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/es/popover/index.js

@@ -24,8 +24,17 @@ const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 
 class Popover extends React.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 {
@@ -40,7 +49,7 @@ class Popover extends React.PureComponent {
         direction
       } = this.context;
       const popCardCls = classNames(prefixCls, contentClassName, {
-        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+        [`${prefixCls}-rtl`]: direction === 'rtl'
       });
       const contentNode = this.renderContentNode({
         initialFocusRef,
@@ -49,7 +58,7 @@ class Popover extends React.PureComponent {
       return /*#__PURE__*/React.createElement("div", {
         className: popCardCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: `${prefixCls}-content`
       }, contentNode));
     };
 
@@ -63,6 +72,8 @@ class Popover extends React.PureComponent {
       };
       return !_isFunction(content) ? content : content(contentProps);
     };
+
+    this.tooltipRef = /*#__PURE__*/React.createRef();
   }
 
   render() {
@@ -96,7 +107,8 @@ class Popover extends React.PureComponent {
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
     return /*#__PURE__*/React.createElement(Tooltip, Object.assign({
-      guardFocus: true
+      guardFocus: true,
+      ref: this.tooltipRef
     }, attr, {
       trigger: trigger,
       position: position,

package/lib/es/progress/index.js

@@ -102,9 +102,9 @@ class Progress extends Component {
       percentNumber
     } = this.state;
     const classNames = {
-      wrapper: cls("".concat(prefixCls, "-circle"), className),
-      svg: cls("".concat(prefixCls, "-circle-ring")),
-      circle: cls("".concat(prefixCls, "-circle-ring-inner"))
+      wrapper: cls(`${prefixCls}-circle`, className),
+      svg: cls(`${prefixCls}-circle-ring`),
+      circle: cls(`${prefixCls}-circle-ring-inner`)
     };
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber);
@@ -127,7 +127,7 @@ class Progress extends 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.createElement("div", {
       id: id,
@@ -170,7 +170,7 @@ class Progress extends Component {
       cy: cy,
       "aria-hidden": true
     })), showInfo && size !== 'small' ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-circle-text")
+      className: `${prefixCls}-circle-text`
     }, text) : null);
   }
 
@@ -223,14 +223,14 @@ class Progress extends Component {
       percentNumber
     } = this.state;
     const progressWrapperCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-horizontal")]: direction === strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-vertical")]: direction !== strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-large")]: size === 'large'
+      [`${prefixCls}-horizontal`]: direction === strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-vertical`]: direction !== strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-large`]: size === 'large'
     });
     const progressTrackCls = cls({
-      ["".concat(prefixCls, "-track")]: true
+      [`${prefixCls}-track`]: true
     });
-    const innerCls = cls("".concat(prefixCls, "-track-inner"));
+    const innerCls = cls(`${prefixCls}-track-inner`);
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
 
@@ -241,9 +241,9 @@ class Progress extends Component {
     };
 
     if (direction === strings.DEFAULT_DIRECTION) {
-      innerStyle.width = "".concat(perc, "%");
+      innerStyle.width = `${perc}%`;
     } else {
-      innerStyle.height = "".concat(perc, "%");
+      innerStyle.height = `${perc}%`;
     }
 
     const text = format(percNumber);
@@ -269,7 +269,7 @@ class Progress extends Component {
       style: innerStyle,
       "aria-hidden": true
     })), showInfo ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-line-text")
+      className: `${prefixCls}-line-text`
     }, text) : null);
   }
 
@@ -315,7 +315,7 @@ Progress.propTypes = {
 Progress.defaultProps = {
   className: '',
   direction: strings.DEFAULT_DIRECTION,
-  format: text => "".concat(text, "%"),
+  format: text => `${text}%`,
   motion: true,
   orbitStroke: 'var(--semi-color-fill-0)',
   percent: 0,

package/lib/es/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;
     };