@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/babel.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                modules: false,
+                targets: {
+                    browsers: [
+                        "> 0.5%",
+                        "last 2 versions",
+                        "Firefox ESR",
+                        "not dead",
+                        "not IE 11"
+                    ]
+                }
+            },
+        ],
+    ],
+    plugins: [
+        [
+            '@babel/plugin-transform-runtime',
+            {
+                corejs: 3
+            },
+        ],
+        [
+            '@babel/plugin-proposal-decorators',
+            {
+                legacy: true,
+            },
+        ],
+    ]
+};

package/calendar/foundation.ts

@@ -83,11 +83,13 @@ export type MonthData = Record<number, DateObj[]>;
 //     cacheEventKeys: (cachedKeys: Array<string>) => void;
 // }
 
+export type ParsedEventsType = ParsedEvents | ParsedEventsWithArray | MonthlyEvent;
+
 export interface CalendarAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     updateCurrPos?: (currPos: number) => void;
     updateShowCurrTime?: () => void;
     updateScrollHeight?: (scrollHeight: number) => void;
-    setParsedEvents?: (parsedEvents: ParsedEvents | ParsedEventsWithArray | MonthlyEvent) => void;
+    setParsedEvents?: (parsedEvents: ParsedEventsType) => void;
     cacheEventKeys?: (cachedKeys: Array<string>) => void;
     setRangeData?: (data: RangeData) => void;
     getRangeData?: () => RangeData;

package/cascader/foundation.ts

@@ -77,7 +77,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string;
+    value?: string | Set<string>;
     /* The input value of the current input box */
     inputValue: string;
     /* Cascader's placeholder */

package/collapse/foundation.ts

@@ -23,7 +23,7 @@ export interface CollapseState{
 }
 
 export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState>{
-    handleChange: (...args: ArgsType<CollapseProps['onChange']>) => ReturnType<CollapseProps['onChange']>;
+    handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
     // getStates: () => CollapseState;
     // getProps: () => CollapseProps;
     addActiveKey: (newSet: CollapseState['activeSet']) => void;

package/gulpfile.js

@@ -6,31 +6,23 @@ const merge2 = require('merge2');
 const gulpTS = require('gulp-typescript');
 const gulpBabel = require('gulp-babel');
 const sass = require('gulp-sass')(require('sass'));
+const replace = require('gulp-replace');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const getBabelConfig = require('./getBabelConfig');
+const babelConfig = require('./babel.config');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-function compileTS(isESM) {
-    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
+gulp.task('compileTS', function compileTSX() {
     const tsStream = gulp.src(['**/*.ts', '!node_modules/**/*.*'])
         .pipe(gulpTS(tsConfig.compilerOptions));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(getBabelConfig({ isESM })))
-        .pipe(gulp.dest(targetDir));
-    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
+        .pipe(gulpBabel(babelConfig))
+        .pipe(gulp.dest('lib/es'));
+    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
     return merge2([jsStream, dtsStream]);
-}
-
-gulp.task('compileTSForESM', function compileTSForESM() {
-    return compileTS(true);
-});
-
-gulp.task('compileTSForCJS', function compileTSForCJS() {
-    return compileTS(false);
 });
 
 const excludeScss = [
@@ -53,25 +45,15 @@ gulp.task('compileScss', function compileScss() {
             }
         ))
         .pipe(sass().on('error', sass.logError))
-        .pipe(gulp.dest('lib/es'))
-        .pipe(gulp.dest('lib/cjs'));
+        .pipe(gulp.dest('lib/es'));
 });
 
 gulp.task('moveScss', function moveScss() {
     return gulp.src(['**/*.scss', '!node_modules/**/*.*'])
-        .pipe(gulp.dest('lib/es'))
-        .pipe(gulp.dest('lib/cjs'));
+        .pipe(gulp.dest('lib/es'));
 });
 
-gulp.task('compileLib', 
-    gulp.series(
-        [
-            'cleanLib', 'compileScss', 
-            'moveScss', 
-            gulp.parallel('compileTSForESM', 'compileTSForCJS'),
-        ]
-    )
-);
+gulp.task('compileLib', gulp.series(['cleanLib', 'compileScss', 'moveScss', 'compileTS']));
 
 gulp.task('findDupCSSVariables', function findDupCSSVariables() {
     return gulp.src(['**/variable?.scss', '!node_modules/**/*.*'])

package/icons/icons.scss

@@ -0,0 +1,39 @@
+@import './variables.scss';
+@import "../keyframes/rotate.scss";
+
+$module: #{$prefix}-icon;
+
+.#{$module} {
+    display: inline-block;
+    color: inherit;
+    font-style: normal;
+    line-height: 0;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizeLegibility;
+    fill: currentColor;
+
+    &-extra-small {
+        font-size: $width-icon_extra_small;
+    }
+
+    &-small {
+        font-size: $width-icon_small;
+    }
+
+    &-default {
+        font-size: $width-icon_medium;
+    }
+
+    &-large {
+        font-size: $width-icon_large;
+    }
+
+    &-extra-large {
+        font-size: $width-icon_extra_large;
+    }
+}
+
+.#{$module}-spin {
+    animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-animation-rotate;
+}

package/icons/variables.scss

@@ -0,0 +1,7 @@
+
+$width-icon_extra_small: $width-icon-extra-small; // 图标尺寸 - 超小
+$width-icon_small: $width-icon-small; // 图标尺寸 - 小
+$width-icon_medium: $width-icon-medium; // 图标尺寸 - 中
+$width-icon_large: $width-icon-large; // 图标尺寸 - 大
+$width-icon_extra_large: $width-icon-extra-large; // 图标尺寸 - 超大
+$motion-icon_spin-animationDuration: .6s;

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

@@ -36,11 +36,12 @@ export interface WeeklyData {
     week: DateObj[];
 }
 export declare type MonthData = Record<number, DateObj[]>;
+export declare type ParsedEventsType = ParsedEvents | ParsedEventsWithArray | MonthlyEvent;
 export interface CalendarAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     updateCurrPos?: (currPos: number) => void;
     updateShowCurrTime?: () => void;
     updateScrollHeight?: (scrollHeight: number) => void;
-    setParsedEvents?: (parsedEvents: ParsedEvents | ParsedEventsWithArray | MonthlyEvent) => void;
+    setParsedEvents?: (parsedEvents: ParsedEventsType) => void;
     cacheEventKeys?: (cachedKeys: Array<string>) => void;
     setRangeData?: (data: RangeData) => void;
     getRangeData?: () => RangeData;

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

@@ -40,7 +40,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string;
+    value?: string | Set<string>;
     inputValue: string;
     placeholder?: string;
     /** The function used to update the value of the input box. You

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

@@ -18,7 +18,7 @@ export interface CollapseState {
     activeSet: Set<string>;
 }
 export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState> {
-    handleChange: (...args: ArgsType<CollapseProps['onChange']>) => ReturnType<CollapseProps['onChange']>;
+    handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
     addActiveKey: (newSet: CollapseState['activeSet']) => void;
 }
 export default class CollapseFoundation extends BaseFoundation<CollapseAdapter> {

package/lib/es/icons/icons.css

@@ -0,0 +1,40 @@
+/* shadow */
+/* sizing */
+/* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.semi-icon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  fill: currentColor;
+}
+.semi-icon-extra-small {
+  font-size: 8px;
+}
+.semi-icon-small {
+  font-size: 12px;
+}
+.semi-icon-default {
+  font-size: 16px;
+}
+.semi-icon-large {
+  font-size: 20px;
+}
+.semi-icon-extra-large {
+  font-size: 24px;
+}
+
+.semi-icon-spin {
+  animation: 0.6s linear infinite semi-animation-rotate;
+}

package/lib/es/icons/icons.scss

@@ -0,0 +1,39 @@
+@import './variables.scss';
+@import "../keyframes/rotate.scss";
+
+$module: #{$prefix}-icon;
+
+.#{$module} {
+    display: inline-block;
+    color: inherit;
+    font-style: normal;
+    line-height: 0;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizeLegibility;
+    fill: currentColor;
+
+    &-extra-small {
+        font-size: $width-icon_extra_small;
+    }
+
+    &-small {
+        font-size: $width-icon_small;
+    }
+
+    &-default {
+        font-size: $width-icon_medium;
+    }
+
+    &-large {
+        font-size: $width-icon_large;
+    }
+
+    &-extra-large {
+        font-size: $width-icon_extra_large;
+    }
+}
+
+.#{$module}-spin {
+    animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-animation-rotate;
+}

package/lib/es/icons/variables.scss

@@ -0,0 +1,7 @@
+
+$width-icon_extra_small: $width-icon-extra-small; // 图标尺寸 - 超小
+$width-icon_small: $width-icon-small; // 图标尺寸 - 小
+$width-icon_medium: $width-icon-medium; // 图标尺寸 - 中
+$width-icon_large: $width-icon-large; // 图标尺寸 - 大
+$width-icon_extra_large: $width-icon-extra-large; // 图标尺寸 - 超大
+$motion-icon_spin-animationDuration: .6s;

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

@@ -8,9 +8,9 @@ export interface PaginationAdapter<P = Record<string, any>, S = Record<string, a
     setCurrentPage: (pageIndex: number) => void;
     registerKeyDownHandler: (handler: KeyDownHandler) => void;
     unregisterKeyDownHandler: (handler: KeyDownHandler) => void;
-    notifyPageChange: (pageIndex: number | string) => void;
+    notifyPageChange: (pageIndex: number) => void;
     notifyPageSizeChange: (pageSize: number) => void;
-    notifyChange: (pageIndex: number | string, pageSize: number) => void;
+    notifyChange: (pageIndex: number, pageSize: number) => void;
 }
 export declare type PageRenderText = number | '...';
 export declare type PageList = PageRenderText[];

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -4,11 +4,13 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyConfirm: (e: any) => void;
     notifyCancel: (e: any) => void;
     notifyVisibleChange: (visible: boolean) => void;
+    notifyClickOutSide: (e: any) => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
     destroy(): void;
     handleCancel(e: any): void;
     handleConfirm(e: any): void;
+    handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -17,6 +17,10 @@ export default class PopConfirmFoundation extends BaseFoundation {
     this.handleVisibleChange(false);
   }
 
+  handleClickOutSide(e) {
+    this._adapter.notifyClickOutSide(e);
+  }
+
   handleVisibleChange(visible) {
     if (!this._isControlledComponent('visible')) {
       this._adapter.setVisible(visible);

package/lib/es/scrollList/itemFoundation.d.ts

@@ -6,15 +6,15 @@ export interface Item {
     text?: string;
     disabled?: boolean;
 }
-export interface ScrollItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+export interface ScrollItemAdapter<P = Record<string, any>, S = Record<string, any>, I = Item> extends DefaultAdapter<P, S> {
     setPrependCount: (prependCount: number) => void;
     setAppendCount: (appendCount: number) => void;
     setSelectedNode: (el: HTMLElement) => void;
     isDisabledIndex: (i: number) => boolean;
-    notifySelectItem: (data: Item) => void;
+    notifySelectItem: (data: I) => void;
     scrollToCenter: (selectedNode: Element, scrollWrapper?: Element, duration?: number) => void;
 }
-export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ScrollItemAdapter<P, S>, P, S> {
+export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>, I = Item> extends BaseFoundation<ScrollItemAdapter<P, S, I>, P, S> {
     _cachedSelectedNode: HTMLElement;
     selectIndex(index: number, listWrapper: HTMLElement): void;
     selectNode(node: HTMLElement, listWrapper: HTMLElement): void;

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

@@ -38,7 +38,8 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     updateHovering(isHover: boolean): void;
     updateScrollTop(): void;
 }
-declare type PropValue = string | number | Record<string, any>;
+declare type LabelValue = string | number;
+declare type PropValue = LabelValue | Record<string, any>;
 export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     constructor(adapter: SelectAdapter);
     _keydownHandler: (...arg: any[]) => void | null;

package/lib/es/select/foundation.js

@@ -29,7 +29,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import BaseFoundation from '../base/foundation';
 import KeyCode from '../utils/keyCode';
-import { isNumber, isString, isEqual } from 'lodash-es';
+import { isNumber, isString, isEqual, omit } from 'lodash-es';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 export default class SelectFoundation extends BaseFoundation {
@@ -266,12 +266,14 @@ export default class SelectFoundation extends BaseFoundation {
       let optionNotExist = {
         value: propValue,
         label: propValue,
-        _notExist: true
+        _notExist: true,
+        _scrollIndex: -1
       };
 
       if (onChangeWithObject) {
         optionNotExist = _Object$assign(_Object$assign({}, propValue), {
-          _notExist: true
+          _notExist: true,
+          _scrollIndex: -1
         });
       }
 
@@ -330,7 +332,9 @@ export default class SelectFoundation extends BaseFoundation {
             onChangeWithObject ? optionNotExist = _Object$assign(_Object$assign({}, propValue[i]), {
               _notExist: true
             }) : null;
-            selections.set(optionNotExist.label, optionNotExist);
+            selections.set(optionNotExist.label, _Object$assign(_Object$assign({}, optionNotExist), {
+              _scrollIndex: -1
+            }));
           }
         }
       });
@@ -515,7 +519,7 @@ export default class SelectFoundation extends BaseFoundation {
       this._adapter.notifyMaxLimit(_Object$assign({
         value,
         label
-      }, rest));
+      }, omit(rest, '_scrollIndex')));
 
       return;
     } else {
@@ -1016,6 +1020,7 @@ export default class SelectFoundation extends BaseFoundation {
     delete option._parentGroup;
     delete option._show;
     delete option._selected;
+    delete option._scrollIndex;
 
     if ('_keyInOptionList' in option) {
       option.key = option._keyInOptionList;

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

@@ -21,7 +21,7 @@ export declare function isInnerColumnKey(key: string | number): boolean;
 export declare function isExpandedColumn(column: Record<string, any>): boolean;
 export declare function isScrollbarColumn(column: Record<string, any>): boolean;
 export declare function isSelectionColumn(column: Record<string, any>): boolean;
-export declare function filterColumns(columns: Record<string, any>[], ignoreKeys?: "column-scrollbar"[]): Record<string, any>[];
+export declare function filterColumns(columns: Record<string, any>[], ignoreKeys?: string[]): Record<string, any>[];
 /**
  * get width of scroll bar
  * @param {Array} columns

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

@@ -1,10 +1,12 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     collectPane: () => void;
+    collectActiveKey: () => void;
     notifyTabClick: (activeKey: string, event: any) => void;
     notifyChange: (activeKey: string) => void;
     setNewActiveKey: (activeKey: string) => void;
     getDefaultActiveKeyFromChildren: () => string;
+    notifyTabDelete: (tabKey: string) => void;
 }
 declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TabsAdapter<P, S>, P, S> {
     constructor(adapter: TabsAdapter<P, S>);
@@ -16,5 +18,6 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     getDefaultActiveKey(): string;
     handleTabListChange(): void;
     handleTabPanesChange(): void;
+    handleTabDelete(tabKey: string): void;
 }
 export default TabsFoundation;

package/lib/es/tabs/foundation.js

@@ -68,15 +68,11 @@ class TabsFoundation extends BaseFoundation {
   handleTabPanesChange() {
     this._adapter.collectPane();
 
-    let activeKey = this.getState('activeKey');
-
-    if (typeof activeKey === 'undefined') {
-      activeKey = this._adapter.getDefaultActiveKeyFromChildren();
-    }
+    this._adapter.collectActiveKey();
+  }
 
-    if (typeof activeKey !== 'undefined') {
-      this.handleNewActiveKey(activeKey);
-    }
+  handleTabDelete(tabKey) {
+    this._adapter.notifyTabDelete(tabKey);
   }
 
 }

package/lib/es/tabs/tabs.css

@@ -40,6 +40,13 @@
   top: 3px;
   color: var(--semi-color-text-2);
 }
+.semi-tabs-bar .semi-tabs-tab .semi-icon-close {
+  margin-right: 0;
+  font-size: 14px;
+  color: var(--semi-color-text-2);
+  margin-left: 10px;
+  cursor: pointer;
+}
 .semi-tabs-bar .semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
@@ -53,7 +60,6 @@
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
-  color: var(--semi-color-text-0);
   cursor: default;
   font-weight: 600;
   color: var(--semi-color-text-0);
@@ -61,6 +67,12 @@
 .semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
   color: var(--semi-color-primary);
 }
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon-close {
+  color: var(--semi-color-text-2);
+}
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover {
+  color: var(--semi-color-text-1);
+}
 .semi-tabs-bar .semi-tabs-tab-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);