@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.0-alpha.0

package/lib/es/checkbox/checkbox.js

@@ -26,15 +26,11 @@ class Checkbox extends BaseComponent {
 
     const checked = false;
     this.state = {
-      checked: props.checked || props.defaultChecked || checked
+      checked: props.checked || props.defaultChecked || checked,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.checkboxEntity = null;
-    this.addonId = getUuidShort({
-      prefix: 'addon'
-    });
-    this.extraId = getUuidShort({
-      prefix: 'extra'
-    });
     this.foundation = new CheckboxFoundation(this.adapter);
   }
 
@@ -56,7 +52,21 @@ class Checkbox extends BaseComponent {
       notifyGroupChange: cbContent => {
         this.context.checkboxGroup.onChange(cbContent);
       },
-      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
+      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
+      }
     });
   }
 
@@ -99,7 +109,9 @@ class Checkbox extends BaseComponent {
       id
     } = this.props;
     const {
-      checked
+      checked,
+      addonId,
+      extraId
     } = this.state;
     const props = {
       checked,
@@ -147,10 +159,10 @@ class Checkbox extends BaseComponent {
     const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
-      id: this.addonId,
+      id: addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
-      id: this.extraId,
+      id: extraId,
       className: extraCls
     }, extra) : null);
 
@@ -170,8 +182,8 @@ class Checkbox extends BaseComponent {
         onKeyPress: this.handleEnterPress,
         "aria-labelledby": this.props['aria-labelledby']
       }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
-        addonId: children && this.addonId,
-        extraId: extra && this.extraId,
+        addonId: children && addonId,
+        extraId: extra && extraId,
         name: name,
         isPureCardType: props.isPureCardType,
         ref: ref => {

package/lib/es/collapse/item.js

@@ -72,9 +72,11 @@ export default class CollapsePanel extends PureComponent {
       className,
       children,
       itemKey,
-      reCalcKey
+      reCalcKey,
+      header,
+      extra
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
 
     const {
       keepDOM,

package/lib/es/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/es/datePicker/datePicker.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/es/datePicker/insetInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { InputProps } from '../input';
 export interface InsetDateInputProps {

package/lib/es/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/es/dropdown/dropdownMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type DropdownMenuProps = BaseProps;

package/lib/es/form/baseForm.d.ts

@@ -125,7 +125,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/es/form/field.d.ts

@@ -73,7 +73,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;

package/lib/es/modal/Modal.js

@@ -214,6 +214,9 @@ class Modal extends BaseComponent {
         this.props.onOk(e);
       },
       notifyClose: () => {
+        var _a, _b;
+
+        (_b = (_a = this.props.motion) === null || _a === void 0 ? void 0 : _a.didLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.props.afterClose();
       },
       toggleHidden: (hidden, callback) => {

package/lib/es/modal/useModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
 export default function useModal(): (JSX.Element | {

package/lib/es/notification/useNotification/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '@douyinfe/semi-foundation/lib/es/notification/notification.css';
 import { NoticeProps } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
 export default function useNotification(): (JSX.Element | {

package/lib/es/radio/radio.d.ts

@@ -29,9 +29,13 @@ export declare type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,7 +75,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/es/radio/radio.js

@@ -44,16 +44,12 @@ class Radio extends BaseComponent {
     };
 
     this.state = {
-      hover: false
+      hover: false,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.foundation = new RadioFoundation(this.adapter);
     this.radioEntity = null;
-    this.addonId = getUuidShort({
-      prefix: 'addon'
-    });
-    this.extraId = getUuidShort({
-      prefix: 'extra'
-    });
   }
 
   get adapter() {
@@ -62,6 +58,20 @@ class Radio extends BaseComponent {
         this.setState({
           hover
         });
+      },
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
       }
     });
   }
@@ -98,7 +108,11 @@ class Radio extends BaseComponent {
       value: propValue
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
-    const isHover = this.state.hover;
+    const {
+      hover: isHover,
+      addonId,
+      extraId
+    } = this.state;
     let props = {};
 
     if (this.isInGroup()) {
@@ -151,10 +165,10 @@ class Radio extends BaseComponent {
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: this.addonId
+      id: addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: this.extraId
+      id: extraId
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {
@@ -171,8 +185,8 @@ class Radio extends BaseComponent {
       ref: ref => {
         this.radioEntity = ref;
       },
-      addonId: children && this.addonId,
-      extraId: extra && this.extraId
+      addonId: children && addonId,
+      extraId: extra && extraId
     })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

package/lib/es/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/es/scrollList/scrollItem.js

@@ -39,6 +39,8 @@ export default class ScrollItem extends BaseComponent {
     this._cacheSelectorNode = selector => this._cacheNode('selector', selector);
 
     this._cacheWrapperNode = wrapper => this._cacheNode('wrapper', wrapper);
+    /* istanbul ignore next */
+
 
     this._isFirst = node => {
       const {
@@ -55,6 +57,8 @@ export default class ScrollItem extends BaseComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this._isLast = node => {
       const {

package/lib/es/tabs/TabPane.js

@@ -48,6 +48,8 @@ class TabPane extends PureComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this.hideScroll = () => {
       if (this.ref && this.ref.current) {
@@ -55,6 +57,8 @@ class TabPane extends PureComponent {
         this.isAnimating = true;
       }
     };
+    /* istanbul ignore next */
+
 
     this.autoScroll = () => {
       if (this.ref && this.ref.current) {

package/lib/es/tabs/index.js

@@ -49,6 +49,8 @@ class Tabs extends BaseComponent {
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
+    /* istanbul ignore next */
+
 
     this.rePosChildren = (children, activeKey) => {
       const newChildren = [];

package/lib/es/timePicker/Combobox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollItem from '../scrollList/scrollItem';

package/lib/es/timePicker/TimePicker.d.ts

@@ -97,11 +97,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
 export { TimeShape };

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

@@ -18,11 +18,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/es/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     close(e: React.MouseEvent): void;
     clearCloseTimer: () => void;
     startCloseTimer: () => void;
-    renderIcon(): true | React.ReactChild | React.ReactFragment;
+    renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
     render(): JSX.Element;
 }
 export default Toast;

package/lib/es/toast/useToast/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToastProps } from '@douyinfe/semi-foundation/lib/es/toast/toastFoundation';
 export default function useToast(): (JSX.Element | {
     success: (config: ToastProps) => string;

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

@@ -53,6 +53,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;

package/lib/es/tooltip/index.js

@@ -286,7 +286,7 @@ export default class Tooltip extends BaseComponent {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: getUuidShort() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new TooltipFoundation(this.adapter);
@@ -559,6 +559,11 @@ export default class Tooltip extends BaseComponent {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
+      },
+      setId: () => {
+        this.setState({
+          id: getUuidShort()
+        });
       }
     });
   }

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

@@ -39,6 +39,7 @@ export interface SourcePanelProps {
     noMatch: boolean;
     filterData: Array<DataItem>;
     sourceData: Array<DataItem>;
+    propsDataSource: DataSource;
     allChecked: boolean;
     showNumber: number;
     inputValue: string;

package/lib/es/transfer/index.js

@@ -254,7 +254,8 @@ class Transfer extends BaseComponent {
       loading,
       type,
       emptyContent,
-      renderSourcePanel
+      renderSourcePanel,
+      dataSource
     } = this.props;
     const totalToken = locale.total;
     const inSearchMode = inputValue !== '';
@@ -312,6 +313,7 @@ class Transfer extends BaseComponent {
       noMatch,
       filterData,
       sourceData: data,
+      propsDataSource: dataSource,
       allChecked: !leftContainesNotInSelected,
       showNumber,
       inputValue,

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/modal/Modal.tsx

@@ -15,6 +15,7 @@ import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } f
 import { Locale } from '../locale/interface';
 import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
+import { MotionObject } from "@douyinfe/semi-foundation/utils/type";
 
 export const destroyFns: any[] = [];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
@@ -156,6 +157,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                 this.props.onOk(e);
             },
             notifyClose: () => {
+                (this.props.motion as MotionObject)?.didLeave?.();
                 this.props.afterClose();
             },
             toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => {

package/modal/confirm.tsx

@@ -118,4 +118,4 @@ export function withConfirm(props: ModalReactProps) {
         icon: <IconHelpCircle />,
         ...props
     };
-}
+}

package/overflowList/_story/overflowList.stories.js

@@ -352,5 +352,49 @@ const LargeData = () => {
   );
 };
 
+export const OverflowListWithSlide = () =>{
+   const [width, setWidth] = useState(100);
+    const renderOverflow = items => {
+        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
+    };
+    const renderItem = (item, ind) => {
+        return (
+            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
+                {item.icon}
+                {item.key}
+            </Tag>
+        );
+    };
+
+    const items = [
+        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
+        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
+        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
+        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
+        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
+        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
+    ];
+
+    return (
+        <div>
+            <Slider step={1} value={width} onChange={value => setWidth(value)} />
+            <br />
+            <br />
+            <div style={{ width: `${width}%` }}>
+                <OverflowList
+                    items={items}
+                    // minVisibleItems={3}
+                    overflowRenderer={renderOverflow}
+                    visibleItemRenderer={renderItem}
+                />
+            </div>
+        </div>
+    );
+}
+
+OverflowListWithSlide.story = {
+  name: 'overflowList with slide',
+};
+
 // TODO large data will cause memory heap
 // stories.add('large amount of data', () => <LargeData />);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.0-beta.1",
+    "version": "2.10.0-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.9.0-beta.1",
-        "@douyinfe/semi-animation-react": "2.9.0-beta.1",
-        "@douyinfe/semi-foundation": "2.9.0-beta.1",
-        "@douyinfe/semi-icons": "2.9.0-beta.1",
-        "@douyinfe/semi-illustrations": "2.9.0-beta.1",
-        "@douyinfe/semi-theme-default": "2.9.0-beta.1",
+        "@douyinfe/semi-animation": "2.9.0",
+        "@douyinfe/semi-animation-react": "2.9.0",
+        "@douyinfe/semi-foundation": "^2.10.0-alpha.0",
+        "@douyinfe/semi-icons": "2.9.0",
+        "@douyinfe/semi-illustrations": "2.9.0",
+        "@douyinfe/semi-theme-default": "2.9.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b246f204d2f33e5de4155b5d0377eace25b6456f",
+    "gitHead": "5d1bb1d031052d7584ecd5d1bc444cd13f861337",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.9.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.9.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",