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

package/lib/es/navigation/itemFoundation.js

@@ -1,25 +1,21 @@
 import _get from "lodash/get";
+/* argus-disable unPkgSensitiveInfo */
 import BaseFoundation from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
 export default class ItemFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     this._timer = null;
     this._mounted = true;
   }
-
   destroy() {
     this._mounted = false;
   }
-
   isValidKey(itemKey) {
-    // eslint-disable-next-line eqeqeq
     return itemKey != null && (typeof itemKey === 'string' || typeof itemKey === 'number');
   }
-
   handleClick(e) {
     const {
       isSubNav,
@@ -27,22 +23,18 @@ export default class ItemFoundation extends BaseFoundation {
       text,
       disabled
     } = this.getProps();
-
     if (disabled) {
       return;
     }
-
     if (!isSubNav && this.isValidKey(itemKey) && !this._adapter.getSelectedKeysIsControlled() && !this._adapter.getSelected()) {
       this._adapter.updateSelected(true);
     }
-
-    const selectedKeys = [itemKey]; // If the current item is subNav, there is no need to trigger the global onSelect/onClick event, instead, the SubNav component will trigger the click event
-
+    const selectedKeys = [itemKey];
+    // If the current item is subNav, there is no need to trigger the global onSelect/onClick event, instead, the SubNav component will trigger the click event
     if (!isSubNav) {
       if (!this._adapter.getSelected()) {
         // internal-issues:51
         const selectedItems = [this._adapter.cloneDeep(this.getProps())];
-
         this._adapter.notifyGlobalOnSelect({
           itemKey,
           selectedKeys,
@@ -50,14 +42,12 @@ export default class ItemFoundation extends BaseFoundation {
           domEvent: e
         });
       }
-
       this._adapter.notifyGlobalOnClick({
         itemKey,
         text,
         domEvent: e
       });
     }
-
     this._adapter.notifyClick({
       itemKey,
       text,
@@ -67,23 +57,17 @@ export default class ItemFoundation extends BaseFoundation {
   /**
    * A11y: simulate item click
    */
-
-
   handleKeyPress(e) {
     if (isEnterPress(e)) {
       const {
         link,
         linkOptions
       } = this.getProps();
-
       const target = _get(linkOptions, 'target', '_self');
-
       this.handleClick(e);
-
       if (typeof link === 'string') {
         target === '_blank' ? window.open(link) : window.location.href = link;
       }
     }
   }
-
 }

package/lib/es/navigation/subNavFoundation.js

@@ -1,72 +1,55 @@
 import BaseFoundation from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
-
 const addKeys = function addKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len = arguments.length, willAddKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     willAddKeys[_key - 1] = arguments[_key];
   }
-
   willAddKeys.forEach(key => key && keySet.add(key));
   return Array.from(keySet);
 };
-
 const removeKeys = function removeKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len2 = arguments.length, willRemoveKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     willRemoveKeys[_key2 - 1] = arguments[_key2];
   }
-
   willRemoveKeys.forEach(key => key && keySet.delete(key));
   return Array.from(keySet);
 };
-
 export default class SubNavFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     // this.log('invoke SubNavFoundation init()');
     this._timer = null;
   }
-
-  destroy() {} // eslint-disable-line
-
-
+  destroy() {
+    this.clearDelayTimer();
+  }
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   isValidKey(itemKey) {
-    // eslint-disable-next-line eqeqeq
     return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
   }
-
   handleDropdownVisibleChange(visible) {
     const itemKey = this.getProp('itemKey');
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     const rawOpenKeys = this._adapter.getOpenKeys();
-
     const openKeys = visible ? addKeys(rawOpenKeys, itemKey) : removeKeys(rawOpenKeys, itemKey);
     this.clearDelayTimer();
-
     if (!openKeysIsControlled) {
       if (canUpdateOpenKeys) {
         this._adapter.updateOpen(visible);
-      } // this._adapter.updateIsHovered(visible);
-
+      }
+      // this._adapter.updateIsHovered(visible);
     }
 
     this._adapter.notifyGlobalOpenChange({
@@ -80,28 +63,22 @@ export default class SubNavFoundation extends BaseFoundation {
    * @param {Event} e
    * @param {HTMLElement} titleRef
    */
-
-
   handleClick(e, titleRef) {
     const {
       itemKey,
       disabled
     } = this.getProps();
-
     if (disabled) {
       return;
-    } // this.log(e, titleRef, titleRef.contains(e.target));
-
-
+    }
+    // this.log(e, titleRef, titleRef.contains(e.target));
     const clickedDomIsTitle = titleRef && titleRef.contains(e.target);
     let isOpen = Boolean(this._adapter.getIsOpen());
-
     if (!clickedDomIsTitle) {
       isOpen = false;
     } else {
       isOpen = !isOpen;
     }
-
     const openKeys = isOpen ? addKeys(this._adapter.getOpenKeys(), itemKey) : removeKeys(this._adapter.getOpenKeys(), itemKey);
     const cbVal = {
       itemKey,
@@ -109,17 +86,12 @@ export default class SubNavFoundation extends BaseFoundation {
       isOpen,
       domEvent: e
     };
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     if (!openKeysIsControlled && canUpdateOpenKeys) {
       this._adapter.updateOpen(isOpen);
     }
-
     this._adapter.notifyGlobalOpenChange(cbVal);
-
     this._adapter.notifyGlobalOnClick(cbVal);
   }
   /**
@@ -127,12 +99,9 @@ export default class SubNavFoundation extends BaseFoundation {
    * @param e
    * @param titleRef
    */
-
-
   handleKeyPress(e, titleRef) {
     if (isEnterPress(e)) {
       this.handleClick(e, titleRef);
     }
   }
-
 }

package/lib/es/notification/constants.js

@@ -1,8 +1,8 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  WRAPPER: "".concat(BASE_CLASS_PREFIX, "-notification-wrapper"),
-  LIST: "".concat(BASE_CLASS_PREFIX, "-notification-list"),
-  NOTICE: "".concat(BASE_CLASS_PREFIX, "-notification-notice")
+  WRAPPER: `${BASE_CLASS_PREFIX}-notification-wrapper`,
+  LIST: `${BASE_CLASS_PREFIX}-notification-list`,
+  NOTICE: `${BASE_CLASS_PREFIX}-notification-notice`
 };
 const strings = {
   types: ['warning', 'success', 'info', 'error', 'default'],
@@ -11,6 +11,6 @@ const strings = {
 };
 const numbers = {
   duration: 3 // default close time, unit: s
-
 };
+
 export { cssClasses, strings, numbers };

package/lib/es/notification/notification.css

@@ -105,14 +105,18 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-inner {
   display: flex;
   width: 100%;
+  min-width: 0;
 }
 .semi-notification-notice-content-wrapper {
   flex: 1 1 auto;
   margin-right: 8px;
+  min-width: 0;
 }
 .semi-notification-notice-content {
   font-size: 14px;
@@ -120,6 +124,8 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: var(--semi-color-text-1);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-icon-close {
   height: 24px;
@@ -264,39 +270,51 @@
 }
 .semi-notification-notice-animation-show_top {
   animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_top {
   animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topLeft {
   animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topLeft {
   animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topRight {
   animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topRight {
   animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottom {
   animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottom {
   animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomLeft {
   animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomLeft {
   animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomRight {
   animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomRight {
   animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-notification-notice.semi-notification-notice-rtl {

package/lib/es/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/lib/es/notification/notificationFoundation.d.ts

@@ -1,20 +1,20 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from '../notification/constants';
-export declare type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export declare type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
-export declare type NoticeTheme = 'light' | 'normal';
+export type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
+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/lib/es/notification/notificationFoundation.js

@@ -9,46 +9,35 @@ export default class NotificationFoundation extends BaseFoundation {
 
   init() {
     this._startCloseTimer();
-
     this._id = this.getProp('id');
   }
-
   destroy() {
     this._clearCloseTimer();
   }
-
   _startCloseTimer() {
     // unit: s
     const duration = this.getProp('duration');
-
     if (duration && _isNumber(duration)) {
       this._timer = setTimeout(() => {
         this.close(); // call parent to remove itself
       }, duration * 1000);
     }
   }
-
   close(e) {
     if (e) {
       e.stopPropagation();
     }
-
     this._adapter.notifyWrapperToRemove(this._id);
-
     this._adapter.notifyClose();
   }
-
   _clearCloseTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   restartCloseTimer() {
     this._clearCloseTimer();
-
     this._startCloseTimer();
   }
-
 }

package/lib/es/notification/notificationListFoundation.d.ts

@@ -6,9 +6,10 @@ export interface NotificationListProps {
 export interface NotificationListState {
     notices: 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[];
 }
 export interface ConfigProps {
@@ -23,6 +24,8 @@ export interface ConfigProps {
 }
 export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
     addNotice(opts: NoticeProps): void;
+    has(id: string): boolean;
+    update(id: string, noticeOpts: NoticeProps): void;
     removeNotice(id: string): void;
     destroyAll(): void;
 }

package/lib/es/notification/notificationListFoundation.js

@@ -1,44 +1,45 @@
-/* eslint-disable no-useless-constructor */
 import BaseFoundation from '../base/foundation';
 export default class NotificationListFoundation extends BaseFoundation {
   addNotice(opts) {
     // let notices = this._adapter.getNotices();
-    const notices = this._adapter.getNotices(); // opts = { ...opts, id };
+    const notices = this._adapter.getNotices();
+    // opts = { ...opts, id };
     // if (opts.duration) {
     //     setTimeout(() => {
     //         this.removeNotice(opts.id);
     //     }, opts.duration * 1000);
     // }
-
-
-    this._adapter.updateNotices([opts, ...notices]); // return id;
-
+    this._adapter.updateNotices([opts, ...notices]);
+    // return id;
   }
 
+  has(id) {
+    return this._adapter.getNotices().some(notice => notice.id === id);
+  }
+  update(id, noticeOpts) {
+    let notices = this._adapter.getNotices();
+    notices = notices.map(notice => notice.id === id ? Object.assign(Object.assign({}, notice), noticeOpts) : notice);
+    const updatedItems = notices.filter(notice => notice.id === id);
+    this._adapter.updateNotices(notices, [], updatedItems);
+  }
   removeNotice(id) {
-    let notices = this._adapter.getNotices(); // let notices = this._adapter.getNotices();
-
-
+    let notices = this._adapter.getNotices();
+    // let notices = this._adapter.getNotices();
     const removedItems = [];
     notices = notices.filter(notice => {
       if (notice.id === id) {
         removedItems.push(notice);
         return false;
       }
-
       return true;
     });
-
     this._adapter.updateNotices(notices, removedItems); // This must be updated at the same time https://github.com/facebook/react/issues/12312
-
   }
 
   destroyAll() {
     const notices = this._adapter.getNotices();
-
     if (notices.length > 0) {
       this._adapter.updateNotices([], notices);
     }
   }
-
 }

package/lib/es/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/es/overflowList/constants.js

@@ -23,5 +23,7 @@ const strings = {
   BOUNDARY_MAP,
   OVERFLOW_DIR
 };
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 export { cssClasses, strings, numbers };

package/lib/es/overflowList/foundation.d.ts

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;