@douyinfe/semi-ui 2.41.3 → 2.42.0-beta.0

package/lib/cjs/button/splitButtonGroup.d.ts

@@ -6,10 +6,12 @@ export interface SplitButtonGroupProps extends BaseProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
+    containerRef: React.RefObject<HTMLDivElement>;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
+    componentDidMount(): void;
     render(): JSX.Element;
 }

package/lib/cjs/button/splitButtonGroup.js

@@ -13,6 +13,19 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const prefixCls = _constants.cssClasses.PREFIX;
 class SplitButtonGroup extends _baseComponent.default {
+  constructor() {
+    super(...arguments);
+    this.containerRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    if (this.containerRef.current) {
+      const buttons = this.containerRef.current.querySelectorAll('button');
+      const firstButton = buttons[0];
+      const lastButton = buttons[buttons.length - 1];
+      firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
+      lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+    }
+  }
   render() {
     const {
       children,
@@ -21,6 +34,7 @@ class SplitButtonGroup extends _baseComponent.default {
     } = this.props;
     const cls = (0, _classnames.default)(`${prefixCls}-split`, className);
     return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.containerRef,
       className: cls,
       style: style,
       role: "group",

package/lib/cjs/collapse/item.d.ts

@@ -15,6 +15,7 @@ export interface CollapsePanelProps {
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;
     headerExpandIconTriggerRef: React.RefObject<HTMLElement>;
+    private ariaID;
     static propTypes: {
         itemKey: PropTypes.Requireable<string>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -28,8 +29,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         showArrow: boolean;
         disabled: boolean;
     };
-    private ariaID;
     context: CollapseContextType;
+    componentDidMount(): void;
     renderHeader(active: boolean, expandIconEnable?: boolean): JSX.Element;
     handleClick: (itemKey: string, e: React.MouseEvent) => void;
     render(): JSX.Element;

package/lib/cjs/collapse/item.js

@@ -27,7 +27,7 @@ class CollapsePanel extends _react.PureComponent {
   constructor() {
     super(...arguments);
     this.headerExpandIconTriggerRef = /*#__PURE__*/_react.default.createRef();
-    this.ariaID = (0, _uuid.getUuidShort)({});
+    this.ariaID = "";
     this.handleClick = (itemKey, e) => {
       var _a;
       // Judge user click Icon or Header
@@ -37,6 +37,9 @@ class CollapsePanel extends _react.PureComponent {
       }
     };
   }
+  componentDidMount() {
+    this.ariaID = (0, _uuid.getUuidShort)({});
+  }
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {

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

@@ -19,25 +19,27 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onReset: PropTypes.Requireable<(...args: any[]) => any>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        initValues: PropTypes.Requireable<object>;
-        getFormApi: PropTypes.Requireable<(...args: any[]) => any>;
+        autoScrollToError: PropTypes.Requireable<NonNullable<boolean | object>>;
+        allowEmpty: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        render: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        extraTextPosition: PropTypes.Requireable<string>;
+        getFormApi: PropTypes.Requireable<(...args: any[]) => any>;
+        initValues: PropTypes.Requireable<object>;
         validateFields: PropTypes.Requireable<(...args: any[]) => any>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
         layout: PropTypes.Requireable<string>;
         labelPosition: PropTypes.Requireable<string>;
         labelWidth: PropTypes.Requireable<NonNullable<string | number>>;
         labelAlign: PropTypes.Requireable<string>;
         labelCol: PropTypes.Requireable<object>;
-        wrapperCol: PropTypes.Requireable<object>;
-        allowEmpty: PropTypes.Requireable<boolean>;
-        autoScrollToError: PropTypes.Requireable<NonNullable<boolean | object>>;
-        disabled: PropTypes.Requireable<boolean>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
         showValidateIcon: PropTypes.Requireable<boolean>;
-        extraTextPosition: PropTypes.Requireable<string>;
+        stopValidateWithError: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
+        wrapperCol: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<NonNullable<string | string[]>>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/cjs/form/baseForm.js

@@ -171,10 +171,12 @@ class Form extends _baseComponent.default {
         allowEmpty,
         autoScrollToError,
         showValidateIcon,
+        stopValidateWithError,
         extraTextPosition,
-        id
+        id,
+        trigger
       } = _a,
-      rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "extraTextPosition", "id"]);
+      rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "stopValidateWithError", "extraTextPosition", "id", "trigger"]);
     const formCls = (0, _classnames.default)(prefix, className, {
       [prefix + '-vertical']: layout === 'vertical',
       [prefix + '-horizontal']: layout === 'horizontal'
@@ -207,25 +209,27 @@ Form.propTypes = {
   onReset: _propTypes.default.func,
   // Triggered when the value of the form is updated, only when the value of the subfield changes. The entry parameter is formState.values
   onValueChange: _propTypes.default.func,
-  initValues: _propTypes.default.object,
-  getFormApi: _propTypes.default.func,
+  autoScrollToError: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  allowEmpty: _propTypes.default.bool,
+  className: _propTypes.default.string,
   component: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  render: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  extraTextPosition: _propTypes.default.oneOf(_constants.strings.EXTRA_POS),
+  getFormApi: _propTypes.default.func,
+  initValues: _propTypes.default.object,
   validateFields: _propTypes.default.func,
-  style: _propTypes.default.object,
-  className: _propTypes.default.string,
   layout: _propTypes.default.oneOf(_constants.strings.LAYOUT),
   labelPosition: _propTypes.default.oneOf(_constants.strings.LABEL_POS),
   labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   labelAlign: _propTypes.default.oneOf(_constants.strings.LABEL_ALIGN),
   labelCol: _propTypes.default.object,
-  wrapperCol: _propTypes.default.object,
-  allowEmpty: _propTypes.default.bool,
-  autoScrollToError: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
-  disabled: _propTypes.default.bool,
+  render: _propTypes.default.func,
+  style: _propTypes.default.object,
   showValidateIcon: _propTypes.default.bool,
-  extraTextPosition: _propTypes.default.oneOf(_constants.strings.EXTRA_POS),
-  id: _propTypes.default.string
+  stopValidateWithError: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  wrapperCol: _propTypes.default.object,
+  trigger: _propTypes.default.oneOfType([_propTypes.default.oneOf(['blur', 'change', 'custom', 'mount']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['blur', 'change', 'custom', 'mount']))])
 };
 Form.defaultProps = {
   onChange: _noop2.default,

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

@@ -88,6 +88,15 @@ function withField(Component, opts) {
       (0, _warning.default)(true, '[Semi Form]: Field Component must be use inside the Form, please check your dom declaration');
       return null;
     }
+    let formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol', 'disabled', 'showValidateIcon', 'extraTextPosition', 'stopValidateWithError', 'trigger']);
+    let mergeLabelPos = labelPosition || formProps.labelPosition;
+    let mergeLabelWidth = labelWidth || formProps.labelWidth;
+    let mergeLabelAlign = labelAlign || formProps.labelAlign;
+    let mergeLabelCol = labelCol || formProps.labelCol;
+    let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
+    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
+    let mergeStopValidateWithError = (0, _utils.transformDefaultBooleanAPI)(stopValidateWithError, formProps.stopValidateWithError, false);
+    let mergeTrigger = (0, _utils.transformTrigger)(trigger, formProps.trigger);
     // To prevent user forgetting to pass the field, use undefined as the key, and updater.getValue will get the wrong value.
     let initValueInFormOpts = typeof field !== 'undefined' ? updater.getValue(field) : undefined; // Get the init value of form from formP rops.init Values Get the initial value set in the initValues of Form
     let initVal = typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
@@ -101,7 +110,7 @@ function withField(Component, opts) {
     } catch (err) {}
     // FIXME typeof initVal
     const [value, setValue, getVal] = (0, _index.useStateWithGetter)(typeof initVal !== undefined ? initVal : null);
-    const validateOnMount = trigger.includes('mount');
+    const validateOnMount = mergeTrigger.includes('mount');
     allowEmpty = allowEmpty || updater.getFormProps().allowEmpty;
     // Error information: Array, String, undefined
     const [error, setError, getError] = (0, _index.useStateWithGetter)();
@@ -160,7 +169,7 @@ function withField(Component, opts) {
       };
       const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
-          first: stopValidateWithError
+          first: mergeStopValidateWithError
         }, (errors, fields) => {}).then(res => {
           if (validatePromise.current !== rootPromise) {
             return;
@@ -308,7 +317,7 @@ function withField(Component, opts) {
       });
       updateValue(val);
       // only validate when trigger includes change
-      if (trigger.includes('change')) {
+      if (mergeTrigger.includes('change')) {
         fieldValidate(val);
       }
     };
@@ -319,7 +328,7 @@ function withField(Component, opts) {
       if (!touched) {
         updateTouched(true);
       }
-      if (trigger.includes('blur')) {
+      if (mergeTrigger.includes('blur')) {
         let val = getVal();
         fieldValidate(val);
       }
@@ -379,13 +388,6 @@ function withField(Component, opts) {
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field]);
-    let formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol', 'disabled', 'showValidateIcon', 'extraTextPosition']);
-    let mergeLabelPos = labelPosition || formProps.labelPosition;
-    let mergeLabelWidth = labelWidth || formProps.labelWidth;
-    let mergeLabelAlign = labelAlign || formProps.labelAlign;
-    let mergeLabelCol = labelCol || formProps.labelCol;
-    let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
-    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
     // id attribute to improve a11y
     const a11yId = id ? id : field;
     const labelId = `${a11yId}-label`;

package/lib/cjs/form/interface.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
 import type { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
-import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors, FieldValidateTriggerType } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
 import type { SelectProps } from '../select/index';
 import Option from '../select/option';
 import OptGroup from '../select/optionGroup';
@@ -88,6 +88,7 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     onReset?: () => void;
     onValueChange?: (values: Values, changedValue: Partial<Values>) => void;
     onChange?: (formState: FormState<Values>) => void;
+    allowEmpty?: boolean;
     validateFields?: (values: Values) => string | Partial<AllErrors<Values>>;
     /** Use this if you want to populate the form with initial values. */
     initValues?: Values;
@@ -96,18 +97,19 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     getFormApi?: (formApi: FormApi<Values>) => void;
     style?: React.CSSProperties;
     className?: string;
+    extraTextPosition?: 'middle' | 'bottom';
     layout?: 'horizontal' | 'vertical';
     labelPosition?: 'top' | 'left' | 'inset';
     labelWidth?: number | string;
     labelAlign?: 'left' | 'right';
     labelCol?: Record<string, any>;
     wrapperCol?: Record<string, any>;
-    allowEmpty?: boolean;
     render?: (internalProps: FormFCChild) => React.ReactNode;
     component?: React.FC<any> | React.ComponentClass<any>;
     children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
     autoScrollToError?: boolean | ScrollIntoViewOptions;
     disabled?: boolean;
     showValidateIcon?: boolean;
-    extraTextPosition?: 'middle' | 'bottom';
+    stopValidateWithError?: boolean;
+    trigger?: FieldValidateTriggerType;
 }

package/lib/cjs/inputNumber/index.js

@@ -259,7 +259,7 @@ class InputNumber extends _baseComponent.default {
       } else {
         let valueStr = value;
         if (typeof value === 'number') {
-          valueStr = value.toString();
+          valueStr = this.foundation.doFormat(value);
         }
         const parsedNum = this.foundation.doParse(valueStr, false, true, true);
         const toNum = typeof value === 'number' ? value : this.foundation.doParse(valueStr, false, false, false);

package/lib/cjs/modal/confirm.d.ts

@@ -382,6 +382,7 @@ export declare function withError(props: ModalReactProps): {
         formMethod?: string;
         formNoValidate?: boolean;
         formTarget?: string;
+        contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
         lang?: string;
@@ -395,7 +396,6 @@ export declare function withError(props: ModalReactProps): {
         'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
         'aria-controls'?: string;
         'aria-describedby'?: string;
-        contextMenu?: string;
         placeholder?: string;
         spellCheck?: boolean | "true" | "false";
         radioGroup?: string;

package/lib/cjs/table/ResizableHeaderCell.d.ts

@@ -5,6 +5,8 @@ export interface ResizableHeaderCellProps {
     onResizeStart?: ResizeFn;
     onResizeStop?: ResizeFn;
     width?: number | string;
+    /** For compatibility with previous versions, the default value is true. If you don't want to resize, set it to false */
+    resize?: boolean;
 }
 declare class ResizableHeaderCell extends React.PureComponent<ResizableHeaderCellProps> {
     render(): JSX.Element;

package/lib/cjs/table/ResizableHeaderCell.js

@@ -22,10 +22,11 @@ class ResizableHeaderCell extends _react.default.PureComponent {
         onResize,
         onResizeStart,
         onResizeStop,
-        width
+        width,
+        resize
       } = _a,
-      restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width"]);
-    if (typeof width !== 'number') {
+      restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width", "resize"]);
+    if (typeof width !== 'number' || resize === false) {
       return /*#__PURE__*/_react.default.createElement("th", Object.assign({}, restProps));
     }
     let {
@@ -43,7 +44,8 @@ class ResizableHeaderCell extends _react.default.PureComponent {
       onResizeStop: onResizeStop,
       draggableOpts: {
         enableUserSelectHack: false
-      }
+      },
+      axis: 'x'
     }, /*#__PURE__*/_react.default.createElement("th", Object.assign({}, restProps), children));
   }
 }

package/lib/cjs/table/TableHeader.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BaseProps } from '../_base/baseComponent';
-import { Fixed, TableComponents, OnHeaderRow } from './interface';
+import { Fixed, TableComponents, OnHeaderRow, ColumnProps } from './interface';
 export interface TableHeaderProps extends BaseProps {
     columns?: any[];
     components?: TableComponents;
@@ -15,7 +15,7 @@ export interface TableHeaderCell {
     key: string | number;
     className: string;
     children: ReactNode;
-    column: any[];
+    column: ColumnProps;
     colStart: number;
     level: number;
     parents: any[];

package/lib/cjs/table/TableHeaderRow.d.ts

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import { TableContextProps } from './table-context';
 import { TableComponents, OnHeaderRow, Fixed } from './interface';
+import type { TableHeaderCell } from './TableHeader';
 export interface TableHeaderRowProps {
     components?: TableComponents;
-    row?: any[];
+    row?: TableHeaderCell[];
     prefixCls?: string;
     onHeaderRow?: OnHeaderRow<any>;
     index?: number;

package/lib/cjs/table/TableHeaderRow.js

@@ -138,6 +138,9 @@ class TableHeaderRow extends _baseComponent.default {
           }
         }
       }
+      Object.assign(cellProps, {
+        resize: column.resize
+      });
       const props = (0, _omit2.default)(Object.assign(Object.assign({}, cellProps), customProps), ['colStart', 'colEnd', 'hasSubColumns', 'parents', 'level']);
       const {
         rowSpan,

package/lib/cjs/table/interface.d.ts

@@ -90,6 +90,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
+    resize?: boolean;
 }
 export type Align = BaseAlign;
 export type SortOrder = BaseSortOrder;
@@ -103,7 +104,7 @@ export type Fixed = BaseFixed;
 export type OnCell<RecordType> = (record?: RecordType, rowIndex?: number) => OnCellReturnObject;
 export type OnFilter<RecordType> = (filteredValue?: any, record?: RecordType) => boolean;
 export type OnFilterDropdownVisibleChange = (visible?: boolean) => void;
-export type OnHeaderCell<RecordType> = (record?: RecordType, columnIndex?: number) => OnHeaderCellReturnObject;
+export type OnHeaderCell<RecordType> = (record?: RecordType, columnIndex?: number, index?: number) => OnHeaderCellReturnObject;
 export type ColumnRender<RecordType> = (text: any, record: RecordType, index: number, options?: RenderOptions) => ColumnRenderReturnType;
 export type RenderFilterDropdownItem = (itemInfo?: FilterDropdownItem) => ReactNode;
 export type Sorter<RecordType> = BaseSorter<RecordType>;

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

@@ -13,7 +13,11 @@ export interface ToastReactProps extends ToastProps {
 export type { ConfigProps, ToastListProps, ToastListState, ToastState };
 declare const createBaseToast: () => {
     new (props: ToastListProps): {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent) => void;
+        handleMouseLeave: (e: React.MouseEvent) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -47,7 +51,11 @@ declare const createBaseToast: () => {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
     };
     ref: {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent) => void;
+        handleMouseLeave: (e: React.MouseEvent) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -90,6 +98,7 @@ declare const createBaseToast: () => {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         direction: PropTypes.Requireable<string>;
+        stack: PropTypes.Requireable<boolean>;
     };
     defaultProps: {};
     wrapperId: null | string;
@@ -109,7 +118,11 @@ export declare class ToastFactory {
 }
 declare const _default: {
     new (props: ToastListProps): {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent<Element, MouseEvent>) => void;
+        handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -143,7 +156,11 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
     };
     ref: {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent<Element, MouseEvent>) => void;
+        handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -186,6 +203,7 @@ declare const _default: {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         direction: PropTypes.Requireable<string>;
+        stack: PropTypes.Requireable<boolean>;
     };
     defaultProps: {};
     wrapperId: string;

package/lib/cjs/toast/index.js

@@ -22,10 +22,27 @@ const createBaseToast = () => {
   return _a = class ToastList extends _baseComponent.default {
     constructor(props) {
       super(props);
+      this.stack = false;
+      this.innerWrapperRef = /*#__PURE__*/_react.default.createRef();
+      this.handleMouseEnter = e => {
+        if (this.stack) {
+          this.foundation.handleMouseInSideChange(true);
+        }
+      };
+      this.handleMouseLeave = e => {
+        var _a;
+        if (this.stack) {
+          const height = (_a = this.foundation.getInputWrapperRect()) === null || _a === void 0 ? void 0 : _a.height;
+          if (height) {
+            this.foundation.handleMouseInSideChange(false);
+          }
+        }
+      };
       this.state = {
         list: [],
         removedItems: [],
-        updatedItems: []
+        updatedItems: [],
+        mouseInSide: false
       };
       this.foundation = new _toastListFoundation.default(this.adapter);
     }
@@ -37,6 +54,15 @@ const createBaseToast = () => {
             removedItems,
             updatedItems
           });
+        },
+        handleMouseInSideChange: mouseInSide => {
+          this.setState({
+            mouseInSide
+          });
+        },
+        getInputWrapperRect: () => {
+          var _a;
+          return (_a = this.innerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         }
       });
     }
@@ -71,6 +97,7 @@ const createBaseToast = () => {
           ToastList.ref.add(Object.assign(Object.assign({}, opts), {
             id
           }));
+          ToastList.ref.stack = Boolean(opts.stack);
         });
       } else {
         const node = document.querySelector(`#${this.wrapperId}`);
@@ -79,6 +106,9 @@ const createBaseToast = () => {
             node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
           }
         });
+        if (Boolean(opts.stack) !== ToastList.ref.stack) {
+          ToastList.ref.stack = Boolean(opts.stack);
+        }
         if (ToastList.ref.has(id)) {
           ToastList.ref.update(id, Object.assign(Object.assign({}, opts), {
             id
@@ -204,7 +234,15 @@ const createBaseToast = () => {
           toast.foundation.restartCloseTimer();
         }
       };
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((item, index) => {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)({
+          [`${_constants.cssClasses.PREFIX}-innerWrapper`]: true,
+          [`${_constants.cssClasses.PREFIX}-innerWrapper-hover`]: this.state.mouseInSide
+        }),
+        ref: this.innerWrapperRef,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, list.map((item, index) => {
         const isRemoved = removedItems.find(removedItem => removedItem.id === item.id) !== undefined;
         return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
           key: item.id,
@@ -218,6 +256,12 @@ const createBaseToast = () => {
             isAnimating
           } = _ref2;
           return isRemoved && !isAnimating ? null : /*#__PURE__*/_react.default.createElement(_toast.default, Object.assign({}, item, {
+            stack: this.stack,
+            stackExpanded: this.state.mouseInSide,
+            positionInList: {
+              length: list.length,
+              index
+            },
             className: (0, _classnames.default)({
               [item.className]: Boolean(item.className),
               [animationClassName]: true
@@ -228,7 +272,7 @@ const createBaseToast = () => {
             ref: refFn
           }));
         });
-      }));
+      })));
     }
   }, _a.defaultOpts = {
     motion: true,
@@ -239,7 +283,8 @@ const createBaseToast = () => {
     duration: _propTypes.default.number,
     onClose: _propTypes.default.func,
     icon: _propTypes.default.node,
-    direction: _propTypes.default.oneOf(_constants.strings.directions)
+    direction: _propTypes.default.oneOf(_constants.strings.directions),
+    stack: _propTypes.default.bool
   }, _a.defaultProps = {}, _a;
 };
 class ToastFactory {

package/lib/cjs/toast/toast.d.ts

@@ -7,10 +7,17 @@ export interface ToastReactProps extends ToastProps {
     style?: CSSProperties;
     icon?: React.ReactNode;
     content: React.ReactNode;
+    stack?: boolean;
+    stackExpanded?: boolean;
     onAnimationEnd?: (e: React.AnimationEvent) => void;
     onAnimationStart?: (e: React.AnimationEvent) => void;
+    positionInList?: {
+        index: number;
+        length: number;
+    };
 }
 declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
+    toastEle: React.RefObject<HTMLDivElement>;
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
@@ -23,6 +30,8 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         showClose: PropTypes.Requireable<boolean>;
+        stack: PropTypes.Requireable<boolean>;
+        stackExpanded: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         direction: PropTypes.Requireable<string>;
     };
@@ -33,6 +42,8 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         duration: number;
         textMaxWidth: number;
         showClose: boolean;
+        stack: boolean;
+        stackExpanded: boolean;
         theme: string;
     };
     constructor(props: ToastReactProps);