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

package/table/foundation.ts

@@ -1,10 +1,3 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable max-depth */
-/* eslint-disable max-nested-callbacks */
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
-/* eslint-disable eqeqeq */
-/* eslint-disable @typescript-eslint/no-empty-function */
 import {
     get,
     merge,
@@ -58,7 +51,8 @@ export interface BaseColumnProps<RecordType> {
     sorter?: BaseSorter<RecordType>;
     title?: any;
     useFullRender?: boolean;
-    width?: string | number
+    width?: string | number;
+    ellipsis?: BaseEllipsis
 }
 
 export interface TableAdapter<RecordType> extends DefaultAdapter {
@@ -82,6 +76,9 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getCachedFilteredSortedDataSource: () => RecordType[];
     getCachedFilteredSortedRowKeys: () => BaseRowKeyType[];
     getCachedFilteredSortedRowKeysSet: () => Set<BaseRowKeyType>;
+    setAllDisabledRowKeys: (allDisabledRowKeys: BaseRowKeyType[]) => void;
+    getAllDisabledRowKeys: () => BaseRowKeyType[];
+    getAllDisabledRowKeysSet: () => Set<BaseRowKeyType>;
     notifyFilterDropdownVisibleChange: (visible: boolean, dataIndex: string) => void;
     notifyChange: (changeInfo: { pagination: BasePagination; filters: BaseChangeInfoFilter<RecordType>[]; sorter: BaseChangeInfoSorter<RecordType>; extra: any }) => void;
     notifyExpand: (expanded?: boolean, record?: BaseIncludeGroupRecord<RecordType>, mouseEvent?: any) => void;
@@ -100,7 +97,8 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getNormalizeColumns: () => (columns: BaseColumnProps<RecordType>[], children: any) => BaseColumnProps<RecordType>[];
     getHandleColumns: () => (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[]) => BaseColumnProps<RecordType>[];
     getMergePagination: () => (pagination: BasePagination) => BasePagination;
-    setBodyHasScrollbar: (bodyHasScrollBar: boolean) => void
+    setBodyHasScrollbar: (bodyHasScrollBar: boolean) => void;
+    getTableLayout: () => 'fixed' | 'auto'
 }
 
 class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType>> {
@@ -130,9 +128,10 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
      * init filteredValue of filtering column, use defaultFilteredValue or [] when it is undefined
      */
     static initFilteredValue(column: BaseColumnProps<unknown>) {
-        const { defaultFilteredValue, filteredValue, filters } = column;
-        const hasFilter = Array.isArray(filters) && filters.length;
-        if (hasFilter && isUndefined(filteredValue)) {
+        const { defaultFilteredValue, filteredValue } = column;
+        // There may be cases where onFilter is empty, such as server-side filtering
+        // Because filterValue affects the output of filters, it needs to be initialized here
+        if (isUndefined(filteredValue)) {
             if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
                 column.filteredValue = defaultFilteredValue;
             } else {
@@ -174,12 +173,14 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         const dataSource = [...this.getProp('dataSource')];
         const { queries } = this._adapter.getStates();
         const filteredSortedDataSource = this.getFilteredSortedDataSource(dataSource, queries);
+        const allDataDisabledRowKeys = this.getAllDisabledRowKeys(filteredSortedDataSource);
         const pageData = this.getCurrentPageData(filteredSortedDataSource);
         this.setAdapterPageData(pageData);
         this.initExpandedRowKeys(pageData);
         this.initSelectedRowKeys(pageData);
         // cache dataSource after mount, and then calculate it on demand
         this.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+        this.setAllDisabledRowKeys(allDataDisabledRowKeys);
     }
 
     initExpandedRowKeys({ groups }: { groups?: Map<string, RecordType[]> } = {}) {
@@ -203,6 +204,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         } else if (defaultExpandAllGroupRows || expandAllGroupRows) {
             this._addNoDuplicatedItemsToArr(
                 expandedRowKeys,
+                propExpandedRowKeys,
                 groups && isMap(groups) && groups.size ? Array.from(groups.keys()) : []
             );
         } else if (Array.isArray(defaultExpandedRowKeys) && defaultExpandedRowKeys.length) {
@@ -243,18 +245,9 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     getFilteredSortedDataSource(dataSource: RecordType[], queries: BaseColumnProps<RecordType>[]) {
         const filteredDataSource = this.filterDataSource(dataSource, queries.filter(
             query => {
-                /**
-                 * 这里无需判断 filteredValue 是否为数组，初始化时它是 `undefined`，点击选择空时为 `[]`
-                 * 初始化时我们应该用 `defaultFilteredValue`，点击后我们应该用 `filteredValue`
-                 * 
-                 * There is no need to judge whether `filteredValue` is an array here, because it is `undefined` when initialized, and `[]` when you click to select empty
-                 * When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
-                 */
                 const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
                 return (
                     isFunction(query.onFilter) &&
-                    Array.isArray(query.filters) &&
-                    query.filters.length &&
                     Array.isArray(currentFilteredValue) &&
                     currentFilteredValue.length
                 );
@@ -460,6 +453,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
                                             }
                                             return arr;
                                         },
+                                        // @ts-ignore
                                         [...children]
                                     ),
                                 });
@@ -518,8 +512,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
 
             if (!this._pagerIsControlled()) {
                 const total = get(propPagination, 'total', dataSource.length);
-                const pageSize = get(propPagination, 'pageSize', pagination.pageSize);
-                const { currentPage } = pagination;
+                const { currentPage, pageSize } = pagination;
 
                 const realTotalPage = Math.ceil(total / pageSize);
 
@@ -555,6 +548,10 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
 
     destroy() { }
 
+    setAllDisabledRowKeys(disabledRowKeys) {
+        this._adapter.setAllDisabledRowKeys(disabledRowKeys);
+    }
+
     handleClick(e: any) { }
 
     handleMouseEnter(e: any) { }
@@ -567,10 +564,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
 
     /**
      * Add non-repeating elements to the array itself
-     * @param {Array} srcArr
-     * @param {Object} objArrs
      */
-    _addNoDuplicatedItemsToArr(srcArr: any[] = [], ...objArrs: any[]) {
+    _addNoDuplicatedItemsToArr(srcArr: any[] = [], ...objArrs: any[][]) {
         for (const objArr of objArrs) {
             if (Array.isArray(objArr)) {
                 for (const item of objArr) {
@@ -673,6 +668,9 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         return this.getState('pagination') || {};
     }
 
+    /**
+     * Filters are considered valid if filteredValue exists
+     */
     _getAllFilters(queries?: BaseColumnProps<RecordType>[]) {
         queries = queries || this.getState('queries');
         const filters: BaseChangeInfoFilter<RecordType>[] = [];
@@ -786,8 +784,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
             let selectedRowKeys = [...curSelectedRowKeys];
             const selectedRowKeysSet = this._getSelectedRowKeysSet();
             let allRowKeys = [...this._adapter.getCachedFilteredSortedRowKeys()];
-            const disabledRowKeys = this.getAllDisabledRowKeys();
-            const disabledRowKeysSet = new Set(disabledRowKeys);
+            const disabledRowKeys = this._adapter.getAllDisabledRowKeys();
+            const disabledRowKeysSet = this._adapter.getAllDisabledRowKeysSet();
             let changedRowKeys;
 
             // Select all, if not disabled && not in selectedRowKeys
@@ -990,7 +988,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
             }
             return true;
         } else {
-            return false;
+            const isAllSelected = allKeys.every(rowKey => selectedRowKeysSet.has(rowKey));
+            return isAllSelected || false;
         }
     }
 
@@ -1033,7 +1032,6 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         let filterObj: BaseColumnProps<RecordType> = this.getQuery(dataIndex);
         const filterDropdownVisible = visible;
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         filterObj = { ...filterObj, filterDropdownVisible };
 
         if (!this._filterShowIsControlled()) {
@@ -1132,7 +1130,9 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     handleClickFilterOrSorter(queries: BaseColumnProps<RecordType>[]) {
         const dataSource = [...this.getProp('dataSource')];
         const sortedDataSource = this.getFilteredSortedDataSource(dataSource, queries);
+        const allDataDisabledRowKeys = this.getAllDisabledRowKeys(sortedDataSource);
         this.setCachedFilteredSortedDataSource(sortedDataSource);
+        this.setAllDisabledRowKeys(allDataDisabledRowKeys);
         const pageData = this.getCurrentPageData(sortedDataSource);
         this.setAdapterPageData(pageData);
     }
@@ -1201,7 +1201,7 @@ export interface BaseSorterInfo<RecordType> {
     sorter?: BaseSorter<RecordType>
 }
 export type BaseSortOrder = boolean | ArrayElement<typeof strings.SORT_DIRECTIONS>;
-export type BaseSorter<RecordType> = boolean | ((a?: RecordType, b?: RecordType) => number);
+export type BaseSorter<RecordType> = boolean | ((a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number);
 export interface BaseChangeInfoFilter<RecordType> {
     dataIndex?: string;
     value?: any;
@@ -1248,4 +1248,6 @@ export interface BaseChangeInfoSorter<RecordType> {
 
 export type BaseIncludeGroupRecord<RecordType> = RecordType | { groupKey: string };
 
+export type BaseEllipsis = boolean | { showTitle: boolean };
+
 export default TableFoundation;

package/table/rtl.scss

@@ -1,7 +1,6 @@
 $module: #{$prefix}-table;
 
-.#{$prefix}-rtl,
-.#{$prefix}-portal-rtl {
+.#{$module}-wrapper-rtl {
     .#{$module} {
         direction: rtl;
         text-align: right;
@@ -148,6 +147,34 @@ $module: #{$prefix}-table;
                 }
             }
         }
+
+        &-scroll {
+            &-position {
+                &-left {
+                    .#{$module}-tbody,
+                    .#{$module}-thead {
+                        & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
+                            box-shadow: $shadow-table_right;
+                        }
+                        & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
+                            box-shadow: none;
+                        }
+                    }
+                }
+    
+                &-right {
+                    .#{$module}-tbody,
+                    .#{$module}-thead {
+                        & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
+                            box-shadow: none;
+                        }
+                        & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
+                            box-shadow: $shadow-table_left;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .#{$module}-expand-icon {
@@ -155,4 +182,8 @@ $module: #{$prefix}-table;
         margin-left: $spacing-table_expand_icon-marginRight;
         transform: scaleX(-1) translateY(2px);
     }
+
+    .#{$prefix}-spin {
+        direction: rtl;
+    }
 }

package/table/table.scss

@@ -28,6 +28,14 @@ $module: #{$prefix}-table;
         &[data-column-fixed='true'] {
             z-index: 1;
         }
+
+        &-ltr {
+            direction: ltr;
+
+            .#{$prefix}-spin {
+                direction: ltr;
+            }
+        }
     }
 
     &-middle {
@@ -73,6 +81,27 @@ $module: #{$prefix}-table;
                 background-color: $color-table-bg-default;
             }
         }
+
+        &-hidden {
+            height: 0;
+        }
+    }
+
+    &-align-center {
+        .#{$module}-operate-wrapper {
+            justify-content: center;
+        }
+    }
+
+    &-align-right {
+        .#{$module}-operate-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
+    &-operate-wrapper {
+        display: flex;
+        justify-content: flex-start;
     }
 
     &-body {
@@ -107,8 +136,9 @@ $module: #{$prefix}-table;
                 padding-top: $spacing-table_row_head-paddingY;
                 padding-bottom: $spacing-table_row_head-paddingY;
                 vertical-align: middle;
-                word-break: break-all;
-                word-wrap: break-word;
+                overflow-wrap: break-word;
+                // word-break: break-all;
+                // word-wrap: break-word;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
@@ -169,6 +199,14 @@ $module: #{$prefix}-table;
                     display: inline-flex;
                     align-items: center;
                 }
+
+                &-ellipsis {
+                    @include text-overflow-hidden;
+
+                    .#{$module}-row-head-title {
+                        @include text-overflow-hidden;
+                    }
+                }
             }
 
             .react-resizable {
@@ -201,15 +239,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -229,8 +271,9 @@ $module: #{$prefix}-table;
 
             & > .#{$module}-row-cell {
                 display: table-cell;
-                word-wrap: break-word;
-                word-break: break-all;
+                overflow-wrap: break-word;
+                // word-wrap: break-word;
+                // word-break: break-all;
                 border-left: none;
                 border-right: none;
                 border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -242,6 +285,10 @@ $module: #{$prefix}-table;
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
                 }
+
+                &-ellipsis {
+                    @include text-overflow-hidden;
+                }
             }
             &.#{$module}-row {
                 &-expand {
@@ -249,6 +296,9 @@ $module: #{$prefix}-table;
                         background-color: $color-table_row_expanded-bg-default;
                     }
                 }
+                &-hidden {
+                    display: none;
+                }
             }
 
             & > .#{$module}-cell-fixed {
@@ -381,7 +431,6 @@ $module: #{$prefix}-table;
         }
 
         &-sorter {
-            margin-left: $spacing-table_column_sorter-marginLeft;
             display: inline-block;
             width: $width-table_column_sorter-icon;
             height: $height-table_column_sorter-icon;
@@ -389,9 +438,11 @@ $module: #{$prefix}-table;
             text-align: center;
 
             &-wrapper {
-                display: inline-flex;
+                display: flex;
+                gap: $spacing-table_column_sorter-marginLeft;
                 align-items: center;
                 cursor: pointer;
+                overflow: hidden;
             }
 
             &-up,
@@ -576,4 +627,11 @@ $module: #{$prefix}-table;
     }
 }
 
+.#{$module}-column-filter-dropdown {
+    .#{$prefix}-dropdown-menu {
+        max-height: $height-table_column_filter_dropdown;
+        overflow-y: auto;
+    }
+}
+
 @import './rtl.scss';

package/table/tableRowFoundation.ts

@@ -8,7 +8,6 @@ export interface TableRowAdapter<P = Record<string, any>, S = Record<string, any
     notifyMouseLeave: (record: Record<string, any>, e: any) => void
 }
 
-// eslint-disable-next-line max-len
 export default class TableRowFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TableRowAdapter<P, S>, P, S> {
     handleClick(e: any) {
         const { expanded, rowKey } = this.getProps();

package/table/utils.ts

@@ -1,8 +1,4 @@
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
-/* eslint-disable eqeqeq */
 import {
-    cloneDeepWith,
     isEqualWith,
     get,
     filter,
@@ -19,19 +15,9 @@ import {
 import { strings, numbers } from './constants';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import Logger from '../utils/Logger';
+import type { BaseEllipsis } from './foundation';
 
 
-export function cloneDeep(value: any, customizer?: (v: any) => any) {
-    return cloneDeepWith(value, v => {
-        if (typeof v === 'function') {
-            return v;
-        } else if (typeof customizer === 'function') {
-            return customizer(v);
-        }
-        return undefined;
-    });
-}
-
 export function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean) {
     return isEqualWith(value, other, (objVal, othVal, ...rest) => {
         if (typeof objVal === 'function' && typeof othVal === 'function') {
@@ -61,31 +47,6 @@ export function getColumnKey(column: any, keyPropNames: any[]): any {
     return key;
 }
 
-export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], keyPropNames: any[] = null, deep = true) {
-    const finalColumns: any[] = [];
-    const clone = deep ? cloneDeep : lodashClone;
-
-    map(newColumns, newColumn => {
-        newColumn = { ...newColumn };
-        const key = getColumnKey(newColumn, keyPropNames);
-
-        const oldColumn = key != null && find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
-
-        if (oldColumn) {
-            finalColumns.push(
-                clone({
-                    ...oldColumn,
-                    ...newColumn,
-                })
-            );
-        } else {
-            finalColumns.push(clone(newColumn));
-        }
-    });
-
-    return finalColumns;
-}
-
 /**
  *
  * @param {Array<number>} arr
@@ -432,7 +393,7 @@ export function mergeQueries(query: Record<string, any>, queries: Record<string,
  * @param {Object[]} newColumns
  */
 export function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]) {
-    const _newColumns = cloneDeep(newColumns);
+    const _newColumns = [ ...newColumns ];
     for (const column of columns) {
         if (!isNullOrUndefined(column.width)) {
             const currentColumn = column.key;
@@ -480,9 +441,9 @@ export interface GetAllDisabledRowKeysProps {
 
 export function warnIfNoDataIndex(column: Record<string, any>) {
     if (typeof column === 'object' && column !== null) {
-        const { filters, sorter, dataIndex } = column;
+        const { filters, sorter, dataIndex, onFilter } = column;
         const logger = new Logger('[@douyinfe/semi-ui Table]');
-        if ((Array.isArray(filters) || isFunction(sorter)) && isNullOrUndefined(dataIndex) ) {
+        if ((Array.isArray(filters) || isFunction(onFilter) || isFunction(sorter)) && isNullOrUndefined(dataIndex) ) {
             logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
         }
     }
@@ -502,4 +463,23 @@ export function isTreeTable({ dataSource, childrenRecordName = 'children' }: { d
         }
     }
     return flag;
+}
+
+export function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number] {
+    if (direction === 'rtl') {
+        switch (align) {
+            case 'left':
+                return 'right';
+            case 'right':
+                return 'left';
+            default:
+                return align;
+        }
+    }
+    return align;
+}
+
+export function shouldShowEllipsisTitle(ellipsis: BaseEllipsis) {
+    const shouldShowTitle = ellipsis === true || get(ellipsis, 'showTitle', true);
+    return shouldShowTitle;
 }

package/table/variables.scss

@@ -42,23 +42,24 @@ $width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边
 $width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
 $width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度
 $height-table_pagination_outer_min: 60px; // 表格分页器高度
+$height-table_column_filter_dropdown: 290px; // 表格过滤筛选列表最大高度
 
 
 // Color no need to change
 $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
 $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
-$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
 $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
 
 $color-table-border-default: var(--semi-color-border); // 表格描边颜色
 $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
 $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
-$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
 
 $color-table_pl-bg-default: transparent;
-$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
 $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
 $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
 $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
@@ -75,6 +76,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

package/tabs/foundation.ts

@@ -128,14 +128,14 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
         }
     }
 
-    handleDeleteKeyDown(event:any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
+    handleDeleteKeyDown(event: any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
         const { preventScroll } = this.getProps();
         if (closable) {
             this.handleTabDelete(itemKey);
             const index = tabs.indexOf(event.target);
             // Move focus to next element after deletion
             // If the element is the last removable tab, focus to its previous tab
-            if (tabs.length !== 1 ){
+            if (tabs.length !== 1 ) {
                 tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({ preventScroll });
             }
         }