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

package/typography/formatNumeral.ts

@@ -42,11 +42,8 @@ export default class FormatNumeral {
             return `${this.truncatePrecision(value)} ${units[i]}`;
         },
         percentages: (value: number) => {
-            const cArr = value.toString().split('.');
-            if (Number(cArr[0]) === 0) {
-                return `${this.truncatePrecision(value * 100)}%`;
-            }
-            return `${this.truncatePrecision(value)}%`;
+            // The rules here have been modified in version v2.30.0
+            return `${this.truncatePrecision(value * 100)}%`;
         },
         exponential: (value: number) => {
             const vExponential = value.toExponential(this.precision + 2);

package/typography/typography.scss

@@ -53,6 +53,10 @@ $module: #{$prefix}-typography;
 
     &-small {
         @include font-size-small;
+        font-weight: $font-typography_smallText-regular-fontWeight;
+        &.#{$module}-paragraph{
+            font-weight: $font-typography_smallParagraph-regular-fontWeight;
+        }
     }
 
     code {
@@ -123,12 +127,25 @@ $module: #{$prefix}-typography;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
+
+        &.#{$module}-ellipsis-multiple-line-text {
+            // inline-block only works in the Text component, keeping the original external inline performance
+            display: -webkit-inline-box;
+        }
     }
 
     &-ellipsis-overflow-ellipsis {
         display: block;
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        &.#{$module}-ellipsis-overflow-ellipsis-text {
+            // inline-block only works in the Text component, keeping the original external inline performance
+            display: inline-block;
+            // Ensure that Text component can be limited by the parent's width when no specific width is set
+            max-width: 100%;
+            vertical-align: top;
+        }
     }
 
     &-ellipsis-expand {
@@ -140,7 +157,7 @@ $module: #{$prefix}-typography;
 
     &-action-copy {
         display: inline-flex;
-        vertical-align: text-bottom;
+        vertical-align: middle;
         padding: $spacing-typography_copyIcon-padding;
         margin-left: $spacing-typography_copyIcon-marginLeft;
     }
@@ -156,7 +173,7 @@ $module: #{$prefix}-typography;
         color: $color-typography_copied-text-success;
 
         .#{$prefix}-icon {
-            vertical-align: text-bottom;
+            vertical-align: middle;
             color: $color-typography_copied-icon-success;
         }
     }
@@ -164,55 +181,181 @@ $module: #{$prefix}-typography;
     &-paragraph {
         margin: $spacing-typography_title_paragraph-margin;
     }
+
 }
 
 // ============ Title ============
 h1.#{$module},
 .#{$module}-h1.#{$module} {
     @include font-size-header-1;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title1-fontWeight;
     margin: $spacing-typography_title_h1-margin;
+
+    &.#{$module}-h1-weight-light {
+        font-weight: $font-typography_title1-light-fontWeight;
+    }
+
+    &.#{$module}-h1-weight-regular {
+        font-weight: $font-typography_title1-regular-fontWeight;
+    }
+
+    &.#{$module}-h1-weight-medium {
+        font-weight: $font-typography_title1-medium-fontWeight;
+    }
+
+    &.#{$module}-h1-weight-semibold {
+        font-weight: $font-typography_title1-semibold-fontWeight;
+    }
+
+    &.#{$module}-h1-weight-bold {
+        font-weight: $font-typography_title1-bold-fontWeight;
+    }
+
 }
 
 h2.#{$module},
 .#{$module}-h2.#{$module} {
     @include font-size-header-2;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title2-fontWeight;
     margin: $spacing-typography_title_h2-margin;
+
+    &.#{$module}-h2-weight-light {
+        font-weight: $font-typography_title2-light-fontWeight;
+    }
+
+    &.#{$module}-h2-weight-regular {
+        font-weight: $font-typography_title2-regular-fontWeight;
+    }
+
+    &.#{$module}-h2-weight-medium {
+        font-weight: $font-typography_title2-medium-fontWeight;
+    }
+
+    &.#{$module}-h2-weight-semibold {
+        font-weight: $font-typography_title2-semibold-fontWeight;
+    }
+
+    &.#{$module}-h2-weight-bold {
+        font-weight: $font-typography_title2-bold-fontWeight;
+    }
+
 }
 
 h3.#{$module},
 .#{$module}-h3.#{$module} {
     @include font-size-header-3;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title3-fontWeight;
     margin: $spacing-typography_title_h3-margin;
+
+    &.#{$module}-h3-weight-light {
+        font-weight: $font-typography_title3-light-fontWeight;
+    }
+
+    &.#{$module}-h3-weight-regular {
+        font-weight: $font-typography_title3-regular-fontWeight;
+    }
+
+    &.#{$module}-h3-weight-medium {
+        font-weight: $font-typography_title3-medium-fontWeight;
+    }
+
+    &.#{$module}-h3-weight-semibold {
+        font-weight: $font-typography_title3-semibold-fontWeight;
+    }
+
+    &.#{$module}-h3-weight-bold {
+        font-weight: $font-typography_title3-bold-fontWeight;
+    }
+
 }
 
 h4.#{$module},
 .#{$module}-h4.#{$module} {
     @include font-size-header-4;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title4-fontWeight;
     margin: $spacing-typography_title_h4-margin;
+
+    &.#{$module}-h4-weight-light {
+        font-weight: $font-typography_title4-light-fontWeight;
+    }
+
+    &.#{$module}-h4-weight-regular {
+        font-weight: $font-typography_title4-regular-fontWeight;
+    }
+
+    &.#{$module}-h4-weight-medium {
+        font-weight: $font-typography_title4-medium-fontWeight;
+    }
+
+    &.#{$module}-h4-weight-semibold {
+        font-weight: $font-typography_title4-semibold-fontWeight;
+    }
+
+    &.#{$module}-h4-weight-bold {
+        font-weight: $font-typography_title4-bold-fontWeight;
+    }
 }
 
 h5.#{$module},
 .#{$module}-h5.#{$module} {
     @include font-size-header-5;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title5-fontWeight;
     margin: $spacing-typography_title_h5-margin;
+
+    &.#{$module}-h5-weight-light {
+        font-weight: $font-typography_title5-light-fontWeight;
+    }
+
+    &.#{$module}-h5-weight-regular {
+        font-weight: $font-typography_title5-regular-fontWeight;
+    }
+
+    &.#{$module}-h5-weight-medium {
+        font-weight: $font-typography_title5-medium-fontWeight;
+    }
+
+    &.#{$module}-h5-weight-semibold {
+        font-weight: $font-typography_title5-semibold-fontWeight;
+    }
+
+    &.#{$module}-h5-weight-bold {
+        font-weight: $font-typography_title5-bold-fontWeight;
+    }
 }
 
 h6.#{$module},
 .#{$module}-h6.#{$module} {
     @include font-size-header-6;
-    font-weight: $font-typography_title-fontWeight;
+    font-weight: $font-typography_title6-fontWeight;
     margin: $spacing-typography_title_h6-margin;
+
+    &.#{$module}-h6-weight-light {
+        font-weight: $font-typography_title6-light-fontWeight;
+    }
+
+    &.#{$module}-h6-weight-regular {
+        font-weight: $font-typography_title6-regular-fontWeight;
+    }
+
+    &.#{$module}-h6-weight-medium {
+        font-weight: $font-typography_title6-medium-fontWeight;
+    }
+
+    &.#{$module}-h6-weight-semibold {
+        font-weight: $font-typography_title6-semibold-fontWeight;
+    }
+
+    &.#{$module}-h6-weight-bold {
+        font-weight: $font-typography_title6-bold-fontWeight;
+    }
+
 }
 
 // ============ Paragraph ============
 p.#{$module}-extended,
 .#{$module}-paragraph.#{$module}-extended {
     line-height: $font-typography_paragraph_extended-lineHeight;
+    font-weight: $font-typography_normalParagraph-regular-fontWeight;
 }
 
 @import "./rtl.scss";

package/typography/variables.scss

@@ -26,6 +26,58 @@ $font-typography_title-fontWeight: $font-weight-bold; // 标题文本字重
 $font-typography_link-fontWeight: $font-weight-bold; // 链接文本字重
 $font-typography_strong-fontWeight: $font-weight-bold; // 强调文本字重
 $font-typography_paragraph_extended-lineHeight: 24px; // 宽松行距段落文本行高
+$font-typography_normalText-regular-fontWeight: $font-weight-regular; // normal text 字重 - 正常
+$font-typography_smallText-regular-fontWeight: $font-weight-regular; // small text 字重 - 正常
+$font-typography_normalParagraph-regular-fontWeight: $font-weight-regular; // normal paragraph 字重 - 正常
+$font-typography_smallParagraph-regular-fontWeight: $font-weight-regular; // small paragraph 字重 - 正常
+
+$font-typography_title1-fontWeight: $font-typography_title-fontWeight; // 一级标题文本字重
+$font-typography_title2-fontWeight: $font-typography_title-fontWeight; // 二级标题文本字重
+$font-typography_title3-fontWeight: $font-typography_title-fontWeight; // 三级标题文本字重
+$font-typography_title4-fontWeight: $font-typography_title-fontWeight; // 四级标题文本字重
+$font-typography_title5-fontWeight: $font-typography_title-fontWeight; // 五级标题文本字重
+$font-typography_title6-fontWeight: $font-typography_title-fontWeight; // 六级标题文本字重
+
+
+
+
+$font-typography_title1-light-fontWeight: 200; // 一级标题文本字重 - 细
+$font-typography_title2-light-fontWeight: 200; // 二级标题文本字重 - 细
+$font-typography_title3-light-fontWeight: 200; // 三级标题文本字重 - 细
+$font-typography_title4-light-fontWeight: 200; // 四级标题文本字重 - 细
+$font-typography_title5-light-fontWeight: 200; // 五级标题文本字重 - 细
+$font-typography_title6-light-fontWeight: 200; // 六级标题文本字重 - 细
+
+$font-typography_title1-regular-fontWeight: 400; // 一级标题文本字重 - 正常
+$font-typography_title2-regular-fontWeight: 400; // 二级标题文本字重 - 正常
+$font-typography_title3-regular-fontWeight: 400; // 三级标题文本字重 - 正常
+$font-typography_title4-regular-fontWeight: 400; // 四级标题文本字重 - 正常
+$font-typography_title5-regular-fontWeight: 400; // 五级标题文本字重 - 正常
+$font-typography_title6-regular-fontWeight: 400; // 六级标题文本字重 - 正常
+
+$font-typography_title1-medium-fontWeight: 500; // 一级标题文本字重 - 中等
+$font-typography_title2-medium-fontWeight: 500; // 二级标题文本字重 - 中等
+$font-typography_title3-medium-fontWeight: 500; // 三级标题文本字重 - 中等
+$font-typography_title4-medium-fontWeight: 500; // 四级标题文本字重 - 中等
+$font-typography_title5-medium-fontWeight: 500; // 五级标题文本字重 - 中等
+$font-typography_title6-medium-fontWeight: 500; // 六级标题文本字重 - 中等
+
+$font-typography_title1-semibold-fontWeight: 600; // 一级标题文本字重 - 半粗
+$font-typography_title2-semibold-fontWeight: 600; // 二级标题文本字重 - 半粗
+$font-typography_title3-semibold-fontWeight: 600; // 三级标题文本字重 - 半粗
+$font-typography_title4-semibold-fontWeight: 600; // 三级标题文本字重 - 半粗
+$font-typography_title5-semibold-fontWeight: 600; // 三级标题文本字重 - 半粗
+$font-typography_title6-semibold-fontWeight: 600; // 三级标题文本字重 - 半粗
+
+$font-typography_title1-bold-fontWeight: 700; // 一级标题文本字重 - 粗
+$font-typography_title2-bold-fontWeight: 700; // 二级标题文本字重 - 粗
+$font-typography_title3-bold-fontWeight: 700; // 三级标题文本字重 - 粗
+$font-typography_title4-bold-fontWeight: 700; // 三级标题文本字重 - 粗
+$font-typography_title5-bold-fontWeight: 700; // 三级标题文本字重 - 粗
+$font-typography_title6-bold-fontWeight: 700; // 三级标题文本字重 - 粗
+
+
+
 
 $spacing-typography_iconPrefix-marginRight: 4px; // 带前缀文本图标右侧外边距
 $spacing-typography_expandText-marginLeft: 8px; // 支持展开文本展开按钮左侧外边距

package/upload/fileCardFoundation.ts

@@ -0,0 +1,17 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+export interface FileCardAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    updateFallbackPreview: (fallback: boolean) => void
+}
+
+class FileCardFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<FileCardAdapter<P, S>, P, S> {
+    constructor(adapter: FileCardAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    handleImageError(error: any) {
+        this._adapter.updateFallbackPreview(true);
+    }
+}
+
+export default FileCardFoundation;

package/upload/foundation.ts

@@ -84,7 +84,12 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyClear: () => void;
     notifyPreviewClick: (file: any) => void;
     notifyDrop: (e: any, files: Array<File>, fileList: Array<BaseFileItem>) => void;
-    notifyAcceptInvalid: (invalidFiles: Array<File>) => void
+    notifyAcceptInvalid: (invalidFiles: Array<File>) => void;
+    registerPastingHandler: (cb?: (params?: any) => void) => void;
+    unRegisterPastingHandler: () => void;
+    isMac: () => boolean;
+    notifyPastingError: (error: Error | PermissionStatus) => void
+    // notifyPasting: () => void; 
 }
 
 class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
@@ -92,8 +97,19 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         super({ ...adapter });
     }
 
+    init(): void {
+        const { disabled, addOnPasting } = this.getProps();
+        if (addOnPasting && !disabled) {
+            this.bindPastingHandler();
+        }
+    }
+
     destroy() {
+        const { disabled, addOnPasting } = this.getProps();
         this.releaseMemory();
+        if (addOnPasting && !disabled) {
+            this.unbindPastingHandler();
+        }
     }
 
     getError({ action, xhr, message, fileName }: { action: string;xhr: XMLHttpRequest;message?: string;fileName: string }): XhrError {
@@ -255,7 +271,9 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         this._adapter.notifyChange({ currentFile: newFileItem, fileList: newFileList });
         this._adapter.updateFileList(newFileList, () => {
             this._adapter.resetReplaceInput();
-            this.upload(newFileItem);
+            if (!newFileItem._sizeInvalid) {
+                this.upload(newFileItem);
+            }
         });
     }
 
@@ -322,7 +340,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
 
     // 插入多个文件到指定位置
     // Insert files to the specified location
-    insertFileToList(files: Array<CustomFile>, index:number): void {
+    insertFileToList(files: Array<CustomFile>, index: number): void {
         const { limit, transformFile, accept, uploadTrigger } = this.getProps();
         const { fileList } = this.getStates();
 
@@ -487,6 +505,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 newFileList[index].fileInstance = fileInstance;
                 newFileList[index].size = getFileSize(fileInstance.size);
                 newFileList[index].name = fileInstance.name;
+                newFileList[index].url = this._createURL(fileInstance);
             }
             newFileList[index].shouldUpload = shouldUpload;
         }
@@ -533,9 +552,9 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 data,
                 file,
                 fileInstance,
-                onProgress: (e: ProgressEvent) => this.handleProgress({ e, fileInstance }),
-                onError: (userXhr: XMLHttpRequest, e: ProgressEvent) => this.handleError({ e, xhr: userXhr, fileInstance }),
-                onSuccess: (response: any, e: ProgressEvent) => this.handleSuccess({ response, fileInstance, e, isCustomRequest: true }),
+                onProgress: (e?: ProgressEvent) => this.handleProgress({ e, fileInstance }),
+                onError: (userXhr: XMLHttpRequest, e?: ProgressEvent) => this.handleError({ e, xhr: userXhr, fileInstance }),
+                onSuccess: (response: any, e?: ProgressEvent) => this.handleSuccess({ response, fileInstance, e, isCustomRequest: true }),
                 withCredentials: option.withCredentials,
                 action: option.action,
             });
@@ -572,7 +591,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         xhr.send(formData);
     }
 
-    handleProgress({ e, fileInstance }: { e: ProgressEvent; fileInstance: File }): void {
+    handleProgress({ e, fileInstance }: { e?: ProgressEvent; fileInstance: File }): void {
         const { fileList } = this.getStates();
         const newFileList = fileList.slice();
         let percent = 0;
@@ -591,7 +610,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         this._adapter.notifyChange({ fileList: newFileList, currentFile: newFileList[index] });
     }
 
-    handleOnLoad({ e, xhr, fileInstance }: { e: ProgressEvent; xhr: XMLHttpRequest; fileInstance: File }): void {
+    handleOnLoad({ e, xhr, fileInstance }: { e?: ProgressEvent; xhr: XMLHttpRequest; fileInstance: File }): void {
         const { fileList } = this.getStates();
         const index = this._getFileIndex(fileInstance, fileList);
         if (index < 0) {
@@ -604,7 +623,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         }
     }
 
-    handleSuccess({ e, fileInstance, isCustomRequest = false, xhr, response }: { e: ProgressEvent; fileInstance: CustomFile; isCustomRequest?: boolean; xhr?: XMLHttpRequest; response?: any }): void {
+    handleSuccess({ e, fileInstance, isCustomRequest = false, xhr, response }: { e?: ProgressEvent; fileInstance: CustomFile; isCustomRequest?: boolean; xhr?: XMLHttpRequest; response?: any }): void {
         const { fileList } = this.getStates();
         let body: any = null;
         const index = this._getFileIndex(fileInstance, fileList);
@@ -673,7 +692,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         });
     }
 
-    handleError({ e, xhr, fileInstance }: { e: ProgressEvent;xhr: XMLHttpRequest;fileInstance: CustomFile }): void {
+    handleError({ e, xhr, fileInstance }: { e?: ProgressEvent;xhr: XMLHttpRequest;fileInstance: CustomFile }): void {
         const { fileList } = this.getStates();
         const index = this._getFileIndex(fileInstance, fileList);
         if (index < 0) {
@@ -844,6 +863,62 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     handlePreviewClick(fileItem: BaseFileItem): void {
         this._adapter.notifyPreviewClick(fileItem);
     }
+
+    readFileFromClipboard(clipboardItems) {
+        for (const clipboardItem of clipboardItems) {
+            for (const type of clipboardItem.types) {
+                // types maybe: text/plain, image/png, text/html
+                if (type.startsWith('image')) {
+                    clipboardItem.getType(type).then(blob => {
+                        return blob.arrayBuffer();
+                    }).then((buffer) => {
+                        const format = type.split('/')[1];
+                        const file = new File([buffer], `upload.${format}`, { type });
+                        this.handleChange([file]);
+                    });
+                }
+            }
+        }
+    }
+
+    handlePasting(e: any) {
+        const isMac = this._adapter.isMac();
+        const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
+
+        if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+            // https://github.com/microsoft/TypeScript/issues/33923
+            const permissionName = "clipboard-read" as PermissionName;
+            // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+            navigator.permissions
+                .query({ name: permissionName })
+                .then(result => {
+                    console.log(result);
+                    if (result.state === 'granted' || result.state === 'prompt') {
+                        // user has authorized or will authorize
+                        navigator.clipboard
+                            .read()
+                            .then(clipboardItems => {
+                                // Process the data read from the pasteboard
+                                // Check the returned data type to determine if it is image data, and process accordingly
+                                this.readFileFromClipboard(clipboardItems);
+                            });
+                    } else {
+                        this._adapter.notifyPastingError(result);
+                    }
+                })
+                .catch(error => {
+                    this._adapter.notifyPastingError(error);
+                });
+        }
+    }
+
+    bindPastingHandler(): void {
+        this._adapter.registerPastingHandler((event) => this.handlePasting(event));
+    }
+
+    unbindPastingHandler() {
+        this._adapter.unRegisterPastingHandler();
+    }
 }
 
 export default UploadFoundation;

package/upload/upload.scss

@@ -258,6 +258,7 @@ $module: #{$prefix}-upload;
             }
 
             &-loading {
+                line-height: 0; // make the spin icon in the center
                 .#{$prefix}-spin-wrapper svg {
                     height: $width-upload_file_card-icon;
                     width: $width-upload_file_card-icon;
@@ -424,6 +425,13 @@ $module: #{$prefix}-upload;
                 transform: translate3D(-50%, -50%, 0);
             }
 
+            &-preview-fallback {
+                background-color: $color-upload_pic_add-bg;
+                border: $width-upload_picture_add-border $color-upload-border;
+                color: $color-upload-icon;
+                border-radius: $radius-upload_picture_add;
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;

package/utils/Event.ts

@@ -29,7 +29,6 @@ export default class Event {
                 const callbacks = this._eventMap.get(event);
                 if (Array.isArray(callbacks) && callbacks.length) {
                     let index = -1;
-                    // eslint-disable-next-line max-depth
                     while ((index = callbacks.findIndex(cb => cb === callback)) > -1) {
                         callbacks.splice(index, 1);
                     }

package/utils/a11y.ts

@@ -35,7 +35,7 @@ export function setFocusToLastItem(itemNodes: HTMLElement[]): void {
 export function setFocusToPreviousMenuItem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
     let newMenuItem: HTMLElement, index: number;
 
-    if (itemNodes.length > 0){
+    if (itemNodes.length > 0) {
         if (currentItem === itemNodes[0]) {
             newMenuItem = itemNodes[itemNodes.length-1];
         } else {
@@ -50,7 +50,7 @@ export function setFocusToPreviousMenuItem (itemNodes: HTMLElement[], currentIte
 export function setFocusToNextMenuitem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
     let newMenuItem: HTMLElement, index: number;
 
-    if (itemNodes.length > 0){
+    if (itemNodes.length > 0) {
         if (currentItem === itemNodes[itemNodes.length-1]) {
             newMenuItem = itemNodes[0];
         } else {
@@ -91,17 +91,17 @@ export function getAncestorNodeByRole(curElement: Element, role: string): Elemen
     if (!curElement) {
         return null;
     }
-    while (curElement.parentElement && get(curElement.parentElement, 'attributes.role.value', '') !== role){
+    while (curElement.parentElement && get(curElement.parentElement, 'attributes.role.value', '') !== role) {
         curElement = curElement.parentElement;
     }
     return curElement.parentElement;
 }
 
 // According to the Id, find the corresponding data-popupid element
-export function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement{
-    for (let i = 0; i < focusableEle.length; i++){
+export function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement {
+    for (let i = 0; i < focusableEle.length; i++) {
         const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
-        if (curAriDescribedby && curAriDescribedby.value === Id){
+        if (curAriDescribedby && curAriDescribedby.value === Id) {
             return focusableEle[i];
         }
     }

package/utils/array.ts

@@ -21,24 +21,24 @@ export function pullAll(arrayA: any[], arrayB: any[]) {
     }
     return arrayA;
 }
-type CompareFn<T> = (a: T, b: T) => number;
+type CompareFn<T> = (a: T, b: T, sortOrder: 'ascend' | 'descend') => number;
 /**
  * Adapt the descending order
  * @param {Function} fn
  * @param {String} order
  * @returns
  */
-export function withOrderSort<T = any>(fn: CompareFn<T>, order = 'ascend'): CompareFn<T> {
+export function withOrderSort<T = any>(fn: CompareFn<T>, order: 'ascend' | 'descend' = 'ascend'): (a: T, b: T) => number {
     switch (order) {
         case 'descend':
             return (
                 (a: any, b: any) => {
-                    const result = Number(fn(a, b));
+                    const result = Number(fn(a, b, order));
                     return result !== 0 ? -result : result;
                 }
             );
         case 'ascend':
         default:
-            return fn;
+            return (a: any, b: any) => fn(a, b, order);
     }
 }