@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/utils/touchPolyfill.js

@@ -1,5 +1,4 @@
 import warning from './warning';
-
 const touchEventPolyfill = (touch, touchEvent) => {
   /* Touch is the first point of multi-touch. In order to minimize the change of slider code to support touch,
   some methods that will be used on touchEvent are mounted on the multi-touch Touch object.*/
@@ -7,11 +6,9 @@ const touchEventPolyfill = (touch, touchEvent) => {
   if (!globalThis.Touch || !(touch instanceof Touch)) {
     return touch;
   }
-
   const keysNeedPolyfill = ['stopPropagation', 'preventDefault'];
   keysNeedPolyfill.forEach(key => {
     let value = touchEvent[key];
-
     if (value) {
       if (typeof value === 'function') {
         // bind 'this' for function of touchEvent running in Touch Point Object
@@ -19,9 +16,8 @@ const touchEventPolyfill = (touch, touchEvent) => {
           return touchEvent[key](...arguments);
         };
       }
-
       if (touch[key]) {
-        warning(true, "\"The key ".concat(key, "\" exist in Touch."));
+        warning(true, `"The key ${key}" exist in Touch.`);
       } else {
         touch[key] = value;
       }
@@ -29,5 +25,4 @@ const touchEventPolyfill = (touch, touchEvent) => {
   });
   return touch;
 };
-
 export default touchEventPolyfill;

package/lib/es/utils/type.d.ts

@@ -1,6 +1,6 @@
-export declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-export declare type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
-export declare type MotionFunction<P> = (props: P) => MotionObject;
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+export type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
+export type MotionFunction<P> = (props: P) => MotionObject;
 export interface MotionObject {
     [x: string]: any;
     children?: any | ((props: MotionChildrenProps) => any);

package/lib/es/utils/uuid.js

@@ -1,10 +1,9 @@
 export default function getUuid(prefix) {
-  return "".concat(prefix, "-").concat(new Date().getTime(), "-").concat(Math.random());
-} // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
-
+  return `${prefix}-${new Date().getTime()}-${Math.random()}`;
+}
+// https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 function getUuidv4() {
   var _a, _b;
-
   try {
     // @ts-ignore
     return (_b = (_a = crypto === null || crypto === void 0 ? void 0 : crypto.randomUUID) === null || _a === void 0 ? void 0 : _a.call(crypto)) !== null && _b !== void 0 ? _b : String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (Number(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number(c) / 4).toString(16));
@@ -22,8 +21,6 @@ function getUuidv4() {
  * getUuidShort({ prefix: '' }) => '0eer2i0'
  * getUuidShort({ prefix: 'semi', length: 4 }) => 'semi-8jts'
  */
-
-
 function getUuidShort() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
@@ -33,13 +30,10 @@ function getUuidShort() {
   const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
   const total = characters.length;
   let randomId = '';
-
   for (let i = 0; i < length; i++) {
     const random = Math.floor(Math.random() * total);
     randomId += characters.charAt(random);
   }
-
-  return prefix ? "".concat(prefix, "-").concat(randomId) : randomId;
+  return prefix ? `${prefix}-${randomId}` : randomId;
 }
-
 export { getUuid, getUuidv4, getUuidShort };

package/lib/es/utils/warning.js

@@ -1,5 +1,5 @@
 export default function warning(flag, info) {
   if (flag) {
-    console.warn("Warning: ".concat(info));
+    console.warn(`Warning: ${info}`);
   }
 }

package/modal/modal.scss

@@ -70,12 +70,17 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        top: $spacing-modal_content_fullscreen-top;
     }
 
     // &-close {
@@ -209,18 +214,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

package/modal/modalContentFoundation.ts

@@ -8,9 +8,9 @@ export interface ModalContentProps extends ModalProps {
     isFullScreen?: boolean;
     contentClassName?: string;
     maskClassName?: string;
-    onAnimationEnd?: (e:any) => void;
-    maskExtraProps?:Record<string, any>;
-    contentExtraProps?:Record<string, any>
+    onAnimationEnd?: (e: any) => void;
+    maskExtraProps?: Record<string, any>;
+    contentExtraProps?: Record<string, any>
 }
 
 export interface ModalContentState {

package/modal/modalFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isPromise from "../utils/isPromise";
 
 export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export type Size = 'small' | 'medium' | 'large' | 'full-width';
@@ -6,8 +7,8 @@ export type Size = 'small' | 'medium' | 'large' | 'full-width';
 export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
-    notifyCancel: (e: any) => void;
-    notifyOk: (e: any) => void;
+    notifyCancel: (e: any) => void | Promise<any>;
+    notifyOk: (e: any) => void | Promise<any>;
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
@@ -53,12 +54,15 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
-    preventScroll?: boolean
+    preventScroll?: boolean;
+    footerFill?: boolean
 }
 
 export interface ModalState {
     displayNone: boolean;
-    isFullScreen: boolean
+    isFullScreen: boolean;
+    onOKReturnPromiseStatus?: "pending"|"fulfilled"|"rejected";
+    onCancelReturnPromiseStatus?: "pending"|"fulfilled"|"rejected"
 }
 
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
@@ -74,11 +78,29 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     }
 
     handleCancel(e: any) {
-        this._adapter.notifyCancel(e);
+        const result = this._adapter.notifyCancel(e);
+        if (isPromise(result)) {
+            this._adapter.setState({ onCancelReturnPromiseStatus: "pending" });
+            (result as Promise<any>)?.then(()=>{
+                this._adapter.setState({ onCancelReturnPromiseStatus: "fulfilled" });
+            })?.catch(e=>{
+                this._adapter.setState({ onCancelReturnPromiseStatus: "rejected" });
+                throw e;
+            });
+        }
     }
 
     handleOk(e: any) {
-        this._adapter.notifyOk(e);
+        const result = this._adapter.notifyOk(e);
+        if (isPromise(result)) {
+            this._adapter.setState({ onOKReturnPromiseStatus: "pending" });
+            (result as Promise<any>)?.then(()=>{
+                this._adapter.setState({ onOKReturnPromiseStatus: "fulfilled" });
+            })?.catch(e=>{
+                this._adapter.setState({ onOKReturnPromiseStatus: "rejected" });
+                throw e;
+            });
+        }
     }
 
     beforeShow() {
@@ -90,6 +112,10 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
         this._adapter.notifyClose();
     }
 
+    enabledBodyScroll() {
+        this._adapter.enabledBodyScroll();
+    }
+
     // afterClose() {
     //     this._adapter.notifyClose();
     // }
@@ -100,7 +126,6 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     };
 
 
-    // // eslint-disable-next-line max-len
     // mergeMotionProp = (motion: Motion, prop: string, cb: () => void) => {
     //     const mergedMotion = typeof (motion) === 'undefined' || motion ? {
     //         ...(motion as { [key: string]: (() => void) | boolean }),

package/modal/variables.scss

@@ -34,7 +34,7 @@ $spacing-modal_header-paddingX: 0;
 $spacing-modal_body_wrapper-marginY: 24px;
 $spacing-modal_body_wrapper-marginX: 0;
 $spacing-modal_body-margin: 0; // 模态框 body 外边距
-$spacing-modal_body-padding: 0; // 模态框 footer 垂直外边距
+$spacing-modal_body-padding: 0; // 模态框 内容外Padding
 $spacing-modal_footer-marginY: 24px; // 模态框 footer 垂直外边距
 $spacing-modal_footer-marginX: 0; // 模态框 footer 水平外边距
 $spacing-modal_footer-paddingY:0;
@@ -43,6 +43,7 @@ $spacing-modal_footer_button-marginLeft: $spacing-base-tight; // 模态框 foote
 $spacing-modal_footer_button-marginRight: 0; // 模态框 footer 按钮右侧外边距
 $spacing-modal_confirm_header-marginBottom: 8px; // 命令式调用模态框 header 底部外边距
 $spacing-modal_confirm_icon_wrapper-marginRight: $spacing-base-tight; // 命令式调用模态框图标右侧外边距
+$spacing-modal_content_fullscreen-top: 0px; // 模态框内容全屏顶部位置
 
 // Width/Height
 $width-modal_title: 100%; // 模态框标题宽度
@@ -70,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated);
+
+

package/navigation/NavItem.ts

@@ -9,9 +9,7 @@ export default class NavItem {
     items: any[];
     toggleIcon: any;
     constructor(options: any = {}) {
-        // eslint-disable-next-line eqeqeq
         if (options == null || typeof options !== 'object') {
-            // eslint-disable-next-line no-param-reassign
             options = {
                 text: options,
                 itemKey: options,

package/navigation/foundation.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-depth */
-/* eslint-disable max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import NavItem from './NavItem';
 import { ItemProps } from './itemFoundation';
@@ -199,7 +197,7 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
         return [...willOpenKeySet];
     }
 
-    destroy() {} // eslint-disable-line
+    destroy() {}
 
     selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, ...itemKeys: (string | number)[]) {
         const _itemKeysMap = isNullOrUndefined(itemKeysMap) ? this.getState('itemKeysMap') : itemKeysMap;

package/navigation/itemFoundation.ts

@@ -60,7 +60,6 @@ export default class ItemFoundation<P = Record<string, any>, S = Record<string,
     }
 
     isValidKey(itemKey: string) {
-        // eslint-disable-next-line eqeqeq
         return itemKey != null && (typeof itemKey === 'string' || typeof itemKey === 'number');
     }
 

package/navigation/subNavFoundation.ts

@@ -52,7 +52,9 @@ export default class SubNavFoundation<P = Record<string, any>, S = Record<string
         this._timer = null;
     }
 
-    destroy() {} // eslint-disable-line
+    destroy() {
+        this.clearDelayTimer();
+    }
 
     clearDelayTimer() {
         if (this._timer) {
@@ -62,7 +64,6 @@ export default class SubNavFoundation<P = Record<string, any>, S = Record<string
     }
 
     isValidKey(itemKey: string | number) {
-        // eslint-disable-next-line eqeqeq
         return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
     }
 

package/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {
@@ -299,53 +307,65 @@ $module: #{$prefix}-notification;
             }
         }
 
-  
+
 
         &-animation-show_top{
             animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_top{
             animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topLeft{
             animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topLeft{
             animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topRight{
             animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topRight{
             animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottom{
             animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottom{
             animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottomLeft{
             animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomLeft{
             animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
         &-animation-show_bottomRight{
             animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomRight{
             animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
     }
 }

package/notification/notificationFoundation.ts

@@ -10,16 +10,16 @@ export type NoticeTheme = 'light' | 'normal';
 
 export interface NoticeProps {
     duration?: number;
-    id?: string | number;
+    id?: string;
     title?: any;
     content?: any;
     position?: NoticePosition;
     type?: NoticeType;
     onClick?: (e: any) => void;
     onClose?: () => void;
-    onCloseClick?: (id: string | number) => void;
+    onCloseClick?: (id: string) => void;
     showClose?: boolean;
-    close?: (id: string | number) => void;
+    close?: (id: string) => void;
     zIndex?: number;
     icon?: any;
     getPopupContainer?: () => HTMLElement;

package/notification/notificationListFoundation.ts

@@ -1,21 +1,20 @@
-/* eslint-disable no-useless-constructor */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { NoticeInstance, NoticePosition, NoticeProps } from '../notification/notificationFoundation';
 import { strings } from './constants';
 
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface NotificationListProps {
 
 }
 
 export interface NotificationListState {
     notices: NoticeInstance[];
-    removedItems: NoticeInstance[]
+    removedItems: NoticeInstance[];
+    updatedItems: NoticeInstance[]
 }
 
 export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
-    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
+    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => void;
     getNotices: () => NoticeInstance[]
 }
 
@@ -48,6 +47,17 @@ export default class NotificationListFoundation extends BaseFoundation<Notificat
         // return id;
     }
 
+    has(id: string) {
+        return this._adapter.getNotices().some(notice=>notice.id===id);
+    }
+
+    update(id: string, noticeOpts: NoticeProps) {
+        let notices = this._adapter.getNotices();
+        notices = notices.map((notice) => notice.id === id ? { ...notice, ...noticeOpts }: notice);
+        const updatedItems = notices.filter(notice=>notice.id === id);
+        this._adapter.updateNotices(notices, [], updatedItems);
+    }
+
     removeNotice(id: string) {
         let notices = this._adapter.getNotices();
         // let notices = this._adapter.getNotices();

package/overflowList/constants.ts

@@ -14,7 +14,7 @@ const MODE_MAP = {
 const BOUNDARY_MAP = {
     START: 'start',
     END: 'end',
-};
+} as const;
 
 const OVERFLOW_DIR = {
     NONE: 0,
@@ -31,7 +31,9 @@ const strings = {
     OVERFLOW_DIR
 };
 
-const numbers = {};
+const numbers = {
+    MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 
 export {
     cssClasses,

package/overflowList/foundation.ts

@@ -1,13 +1,16 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
-import { noop, get, cloneDeep } from 'lodash';
+import { noop, get } from 'lodash';
+import copy from 'fast-copy';
+
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
 
 export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
-    notifyIntersect: (res: any) => void
+    notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>
 }
 
 class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
@@ -29,6 +32,7 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         if (!this.isScrollMode()) {
             return overflow;
         }
+
         const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
@@ -40,11 +44,11 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     }
 
     handleIntersect(entries: Array<IntersectionObserverEntry>): void {
-        const visibleState = cloneDeep(this.getState('visibleState'));
+        const visibleState = copy(this.getState('visibleState'));
 
         const res = {};
         entries.forEach(entry => {
-            const itemKey = get(entry, 'target.dataset.scrollkey');
+            const itemKey: string = get(entry, 'target.dataset.scrollkey');
             const visible = entry.isIntersecting;
             res[itemKey] = entry;
             visibleState.set(itemKey, visible);
@@ -71,38 +75,52 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         this._adapter.notifyIntersect(res);
     }
 
-    handlePartition(growing: number): void {
-        const { direction, overflow, lastOverflowCount, visible } = this.getStates();
-        const { minVisibleItems, collapseFrom, items } = this.getProps();
-        let updateState = {};
-        if (growing === OverflowDirection.NONE) {
-            updateState = { direction: OverflowDirection.NONE };
-        }
-        if (growing === OverflowDirection.GROW) {
-            const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-            updateState = {
-                direction: OverflowDirection.GROW,
-                lastOverflowCount: updatedOverflowCount,
-                overflow: [],
-                visible: items,
-            };
+    getReversedItems = ()=>{
+        const { items } = this.getProps();
+        return copy(items).reverse();
+    }
+    handleCollapseOverflow() {
+        const { minVisibleItems, collapseFrom } = this.getProps();
+        const { overflowWidth, containerWidth, pivot: statePivot, overflowStatus } = this.getStates();
+        const { items, onOverflow } = this.getProps();
+        let itemWidths = overflowWidth, _pivot = 0;
+        let overflowed = false;
+        for (const size of this._adapter.getItemSizeMap().values()) {
+            itemWidths += size;
+            // 触发overflow
+            if (itemWidths > containerWidth) {
+                overflowed = true;
+                break;
+            }
+            // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
+            if (_pivot === items.length - 1) {
+                this._adapter.updateStates({
+                    overflowStatus: "normal",
+                    pivot: items.length - 1,
+                    visible: items,
+                    overflow: []
+                });
+                break;
+            }
+            _pivot++;
         }
-        if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-            const collapseFromStart = collapseFrom === Boundary.START;
-            const newVisible = visible.slice();
-            const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-            if (next !== undefined) {
-                updateState = {
-                    // set SHRINK mode unless a GROW is already in progress.
-                    // GROW shows all items then shrinks until it settles, so we
-                    // preserve the fact that the original trigger was a GROW.
-                    direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-                    overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-                    visible: newVisible
-                };
+        if (overflowed) {
+            const pivot = Math.max(minVisibleItems, _pivot);
+            const isCollapseFromStart = collapseFrom === Boundary.START;
+            const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+            const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+            this._adapter.updateStates({
+                overflowStatus: "overflowed",
+                pivot: pivot,
+                visible,
+                overflow,
+            });
+            // trigger onOverflow
+            if (statePivot !== pivot) {
+                onOverflow(overflow);
             }
+            return;
         }
-        this._adapter.updateStates(updateState);
     }
 
 }

package/package.json

@@ -1,17 +1,18 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.24.2",
+    "version": "2.25.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.12.0",
+        "@douyinfe/semi-animation": "2.25.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
-        "date-fns": "^2.9.0",
-        "date-fns-tz": "^1.0.10",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "fast-copy": "^3.0.1 ",
         "lodash": "^4.17.21",
         "memoize-one": "^5.2.1",
         "scroll-into-view-if-needed": "^2.2.24"
@@ -23,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "41831fb74dbc194221e9be7034dbcf93e4a35aa5",
+    "gitHead": "a2d9b9c6d2bf2464f8bccdbfa56e2e07429013cf",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",