@douyinfe/semi-foundation 2.0.7 → 2.0.9-alpha.3

package/autoComplete/autoComplete.scss

@@ -1,7 +1,7 @@
 $module: #{$prefix}-autocomplete;
 
 @import "./variables.scss";
-
+@import "../select/option.scss";
 .#{$module} {
     cursor: text;
     display: inline-flex;

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/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/datePicker/foundation.ts

@@ -282,7 +282,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         if (isValidDate(value)) {
             dateObj = value as Date;
         } else if (isString(value)) {
-            dateObj = compatiableParse(value, this.getProp('format'), undefined, dateFnsLocale);
+            dateObj = compatiableParse(value as string, this.getProp('format'), undefined, dateFnsLocale);
         } else if (isTimestamp(value)) {
             dateObj = new Date(value);
         } else {

package/form/interface.ts

@@ -79,7 +79,7 @@ export interface FieldState {
     status?: 'error' | 'success';
 }
 
-export interface withFieldOption {
+export interface WithFieldOption {
     valueKey?: string;
     onKeyChangeFnName?: string;
     valuePath?: string;

package/form/utils.ts

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import AsyncValidator from 'async-validator';
 import { cloneDeep, toPath } from 'lodash-es';
-import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, withFieldOption } from './interface';
+import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 
 export function getDisplayName(WrappedComponent: React.ComponentType | any) {
     const originName = WrappedComponent.displayName || WrappedComponent.name;
@@ -61,7 +61,7 @@ function transformTrigger(trigger: FieldValidateTriggerType): Array<BasicTrigger
     return result;
 }
 
-export function mergeOptions(opts: withFieldOption, props: ComponentProps) {
+export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
     // Opts: different types of component identification value, value change callback function may be inconsistent, used to adapt 1, input, select 2, radio, checkbox 3, switch
     // valueKey: input, select class component control value props are value, and checkbox, switch is checked
     // eg：checkbox、radio   { valueKey: 'checked', onKeyChangeFnName: 'onChange', valuePath: 'target.value' }

package/lib/es/autoComplete/autoComplete.css

@@ -1,25 +1,99 @@
 /* shadow */
 /* sizing */
 /* spacing */
-.semi-autocomplete {
+.semi-select-option {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--semi-color-text-0);
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.semi-select-option-icon {
+  width: 12px;
+  color: transparent;
+  visibility: hidden;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.semi-select-option-text {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: pre;
+}
+.semi-select-option-keyword {
+  color: var(--semi-color-primary);
+  background-color: inherit;
+  font-weight: 600;
+}
+.semi-select-option:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-select-option-empty {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+  justify-content: center;
+}
+.semi-select-option-empty:hover {
+  background-color: inherit;
+}
+.semi-select-option-empty:active {
+  background-color: inherit;
+}
+.semi-select-option-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-select-option-disabled:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option-selected {
+  font-weight: 600;
+}
+.semi-select-option-selected .semi-select-option-icon {
+  visibility: visible;
+  color: var(--semi-color-text-2);
+}
+.semi-select-option-focused {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option:first-of-type {
+  margin-top: 4px;
+}
+.semi-select-option:last-of-type {
+  margin-bottom: 4px;
+}
+
+.semi-select {
   cursor: text;
   display: inline-flex;
   vertical-align: middle;
   box-sizing: border-box;
 }
-.semi-autocomplete-option-list {
+.semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
 }
-.semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon {
+.semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;
 }
-.semi-autocomplete-loading-wrapper {
+.semi-select-loading-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
 }
-.semi-autocomplete-loading-wrapper .semi-spin {
+.semi-select-loading-wrapper .semi-spin {
   width: 100%;
 }
 

package/lib/es/autoComplete/autoComplete.scss

@@ -1,7 +1,7 @@
 $module: #{$prefix}-autocomplete;
 
 @import "./variables.scss";
-
+@import "../select/option.scss";
 .#{$module} {
     cursor: text;
     display: inline-flex;

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/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/form/interface.d.ts

@@ -75,7 +75,7 @@ export interface FieldState {
     error?: any;
     status?: 'error' | 'success';
 }
-export interface withFieldOption {
+export interface WithFieldOption {
     valueKey?: string;
     onKeyChangeFnName?: string;
     valuePath?: string;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import AsyncValidator from 'async-validator';
-import { ComponentProps, withFieldOption } from './interface';
+import { ComponentProps, WithFieldOption } from './interface';
 export declare function getDisplayName(WrappedComponent: React.ComponentType | any): string;
 export declare function generateValidatesFromRules(field: string, rules?: any[]): AsyncValidator;
 export declare function isRequired(rules?: any[] | Record<string, any>): boolean;
 export declare function isValid(errors: any): boolean;
-export declare function mergeOptions(opts: withFieldOption, props: ComponentProps): {
+export declare function mergeOptions(opts: WithFieldOption, props: ComponentProps): {
     options: {
         valueKey: string;
         onKeyChangeFnName: string;

package/lib/es/modal/modalFoundation.d.ts

@@ -8,7 +8,7 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     notifyCancel: (e: any) => void;
     notifyOk: (e: any) => void;
     notifyClose: () => void;
-    toggleHidden: (hidden: boolean) => void;
+    toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
     getProps: () => ModalProps;
 }
@@ -64,5 +64,5 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     beforeShow(): void;
     afterHide(): void;
     afterClose(): void;
-    toggleHidden: (hidden: boolean) => void;
+    toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => void;
 }

package/lib/es/modal/modalFoundation.js

@@ -4,8 +4,8 @@ export default class ModalFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter));
 
-    this.toggleHidden = hidden => {
-      this._adapter.toggleHidden(hidden);
+    this.toggleHidden = (hidden, callback) => {
+      this._adapter.toggleHidden(hidden, callback);
     };
   }
 

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/radio/variables.scss

@@ -48,7 +48,7 @@ $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态
 
-$height-radio_inner_min: $spacing-base-loose; // 单选按钮高度
+$height-radio_inner_min: 20px; // 单选按钮高度
 $width-radio_inner: $width-icon-medium; // 单选按钮宽度
 $spacing-radio_addon-paddingLeft: $spacing-tight; //单选标题到单选按钮左侧边距
 $spacing-radio_addon-marginLeft: $width-radio_inner; //单选标题左侧整体外边距

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/option.css

@@ -13,7 +13,7 @@
   color: var(--semi-color-text-0);
   position: relative;
   display: flex;
-  flex-wrap: no-wrap;
+  flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;

package/lib/es/select/option.scss

@@ -15,7 +15,7 @@ $multiple: #{$module}-multiple;
     color: $color-select_option_main-text;
     position: relative;
     display: flex;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;

package/lib/es/select/select.css

@@ -1,6 +1,80 @@
 /* shadow */
 /* sizing */
 /* spacing */
+.semi-select-option {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--semi-color-text-0);
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.semi-select-option-icon {
+  width: 12px;
+  color: transparent;
+  visibility: hidden;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.semi-select-option-text {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: pre;
+}
+.semi-select-option-keyword {
+  color: var(--semi-color-primary);
+  background-color: inherit;
+  font-weight: 600;
+}
+.semi-select-option:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-select-option-empty {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+  justify-content: center;
+}
+.semi-select-option-empty:hover {
+  background-color: inherit;
+}
+.semi-select-option-empty:active {
+  background-color: inherit;
+}
+.semi-select-option-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-select-option-disabled:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option-selected {
+  font-weight: 600;
+}
+.semi-select-option-selected .semi-select-option-icon {
+  visibility: visible;
+  color: var(--semi-color-text-2);
+}
+.semi-select-option-focused {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option:first-of-type {
+  margin-top: 4px;
+}
+.semi-select-option:last-of-type {
+  margin-bottom: 4px;
+}
+
 .semi-select {
   box-sizing: border-box;
   border-radius: var(--semi-border-radius-small);

package/lib/es/select/select.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
 @import './mixin.scss';
+@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;
@@ -418,4 +419,4 @@ $multiple: #{$module}-multiple;
     cursor: not-allowed;
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

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

@@ -70,7 +70,7 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>
         current: HTMLElement;
     };
     onHandleDown: (e: any) => any;
-    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void) => boolean | void;
+    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean) => boolean | void;
     setEventDefault: (e: any) => void;
     setStateVal: (state: keyof SliderState, value: any) => void;
     onHandleEnter: (position: SliderState['focusPos']) => void;
@@ -190,7 +190,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      *
      * @memberof SliderFoundation
      */
-    setHandlePos: (position: number, isMin: boolean) => void;
+    setHandlePos: (position: number, isMin: boolean, clickTrack?: boolean) => void;
     /**
      * Determine which slider should be moved currently
      *

package/lib/es/slider/foundation.js

@@ -10,14 +10,17 @@ import BaseFoundation from '../base/foundation';
 import touchEventPolyfill from '../utils/touchPolyfill';
 export default class SliderFoundation extends BaseFoundation {
   constructor(adapter) {
+    var _this;
+
     super(_Object$assign(_Object$assign({}, SliderFoundation.defaultAdapter), adapter));
+    _this = this;
+
     /**
      * Calculate the percentage corresponding to the current value for style calculation
      * @{}
      *
      * @memberof SliderFoundation
      */
-
     this.getMinAndMaxPercent = value => {
       // debugger
       const {
@@ -610,7 +613,7 @@ export default class SliderFoundation extends BaseFoundation {
       const mousePos = this.handleMousePos(e.pageX, e.pageY);
       const position = vertical ? mousePos.y : mousePos.x;
       const isMin = this.checkWhichHandle(position);
-      this.setHandlePos(position, isMin);
+      this.setHandlePos(position, isMin, true);
     };
     /**
      * Move the slider to the current click position
@@ -619,8 +622,10 @@ export default class SliderFoundation extends BaseFoundation {
      */
 
 
-    this.setHandlePos = (position, isMin) => {
-      this._adapter.onHandleMove(position, isMin, () => this._adapter.onHandleUpAfter());
+    this.setHandlePos = function (position, isMin) {
+      let clickTrack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      _this._adapter.onHandleMove(position, isMin, () => _this._adapter.onHandleUpAfter(), clickTrack);
     };
     /**
      * Determine which slider should be moved currently

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
@@ -92,3 +92,4 @@ export interface GetAllDisabledRowKeysProps {
     childrenRecordName?: string;
     rowKey?: string | number | ((record: Record<string, any>) => string | number);
 }
+export declare function warnIfNoDataIndex(column: Record<string, any>): void;

package/lib/es/table/utils.js

@@ -13,9 +13,10 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 /* eslint-disable no-param-reassign */
 
 /* eslint-disable eqeqeq */
-import { cloneDeepWith, isEqualWith, get, filter, find, map, clone as lodashClone, each, findIndex, some, includes, toString } from 'lodash-es';
+import { cloneDeepWith, isEqualWith, get, filter, find, map, clone as lodashClone, each, findIndex, some, includes, toString, isFunction } from 'lodash-es';
 import { strings, numbers } from './constants';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
+import Logger from '../utils/Logger';
 export function cloneDeep(value, customizer) {
   return cloneDeepWith(value, v => {
     if (typeof v === 'function') {
@@ -259,6 +260,7 @@ export function flattenColumns(cols) {
       if (_Array$isArray(col[childrenColumnName]) && col[childrenColumnName].length) {
         list.push(...flattenColumns(col[childrenColumnName], childrenColumnName));
       } else {
+        warnIfNoDataIndex(col);
         list.push(col);
       }
     }
@@ -482,4 +484,18 @@ export function getAllDisabledRowKeys(_ref) {
   }
 
   return disabledRowKeys;
+}
+export function warnIfNoDataIndex(column) {
+  if (typeof column === 'object' && column !== null) {
+    const {
+      filters,
+      sorter,
+      dataIndex
+    } = column;
+    const logger = new Logger('[@douyinfe/semi-ui Table]');
+
+    if ((_Array$isArray(filters) || isFunction(sorter)) && isNullOrUndefined(dataIndex)) {
+      logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
+    }
+  }
 }

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

@@ -10,6 +10,7 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     constructor(adapter: TabsAdapter<P, S>);
     init(): void;
     destroy: (...args: any[]) => void;
+    _notifyChange(activeKey: string): void;
     handleTabClick(activeKey: string, event: any): void;
     handleNewActiveKey(activeKey: string): void;
     getDefaultActiveKey(): string;

package/lib/es/tabs/foundation.js

@@ -12,13 +12,23 @@ class TabsFoundation extends BaseFoundation {
     this._adapter.collectPane();
   }
 
+  _notifyChange(activeKey) {
+    const {
+      activeKey: stateActiveKey
+    } = this.getStates();
+
+    if (stateActiveKey !== activeKey) {
+      this._adapter.notifyChange(activeKey);
+    }
+  }
+
   handleTabClick(activeKey, event) {
     const isControledComponent = this._isInProps('activeKey');
 
     if (isControledComponent) {
-      this._adapter.notifyChange(activeKey);
+      this._notifyChange(activeKey);
     } else {
-      this._adapter.notifyChange(activeKey);
+      this._notifyChange(activeKey);
 
       this.handleNewActiveKey(activeKey);
     }

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

@@ -63,7 +63,6 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     searchRender?: (inputProps: any) => any;
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
-    triggerRender?: (props: BasicTriggerRenderProps) => any;
     onBlur?: (e: any) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;

package/lib/es/utils/log.js

@@ -1,5 +1,7 @@
+import { get } from 'lodash-es';
+
 const log = function (text) {
-  if (process.env.NODE_ENV === 'development') {
+  if (get(process, 'env.NODE_ENV') === 'development') {
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       rest[_key - 1] = arguments[_key];
     }

package/modal/modalFoundation.ts

@@ -1,4 +1,3 @@
-import { get } from 'lodash-es';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Motion } from '../utils/type';
 
@@ -11,7 +10,7 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     notifyCancel: (e: any) => void;
     notifyOk: (e: any) => void;
     notifyClose: () => void;
-    toggleHidden: (hidden: boolean) => void;
+    toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
     getProps: () => ModalProps;
 }
@@ -95,8 +94,8 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     }
 
 
-    toggleHidden = (hidden: boolean) => {
-        this._adapter.toggleHidden(hidden);
+    toggleHidden = (hidden: boolean, callback?: (hidden: boolean) => void) => {
+        this._adapter.toggleHidden(hidden, callback);
     };
 
     // // eslint-disable-next-line max-len

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.0.7",
+    "version": "2.0.9-alpha.3",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.0.7",
+        "@douyinfe/semi-animation": "2.0.8",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "624c0747ef24bdf26b8c478aa474d105adc24285",
+    "gitHead": "a2979aeef086df38907d49174e6071c20cab6ae9",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/pagination/foundation.ts

@@ -12,9 +12,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 type PageRenderText = number | '...';

package/radio/variables.scss

@@ -48,7 +48,7 @@ $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态
 
-$height-radio_inner_min: $spacing-base-loose; // 单选按钮高度
+$height-radio_inner_min: 20px; // 单选按钮高度
 $width-radio_inner: $width-icon-medium; // 单选按钮宽度
 $spacing-radio_addon-paddingLeft: $spacing-tight; //单选标题到单选按钮左侧边距
 $spacing-radio_addon-marginLeft: $width-radio_inner; //单选标题左侧整体外边距

package/scrollList/itemFoundation.ts

@@ -11,16 +11,16 @@ export interface Item {
     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 = null;
 
     selectIndex(index: number, listWrapper: HTMLElement) {

package/select/foundation.ts

@@ -45,8 +45,9 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     updateHovering(isHover: boolean): void;
     updateScrollTop(): void;
 }
-type PropValue = string | number | Record<string, any>;
 
+type LabelValue = string | number;
+type PropValue = LabelValue | Record<string, any>;
 export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     constructor(adapter: SelectAdapter) {
@@ -258,11 +259,11 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
         // When onChangeWithObject is true
         if (onChangeWithObject && propValueIsArray) {
-            selectedValues = propValue.map((item: BasicOptionProps) => item.value) as any;
+            selectedValues = (propValue as BasicOptionProps[]).map(item => item.value);
         }
 
         if (propValueIsArray && selectedValues.length) {
-            selectedValues.forEach((selectedValue: string, i: number) => {
+            (selectedValues as LabelValue[]).forEach((selectedValue, i: number) => {
                 // The current value exists in the current optionList
                 const index = originalOptions.findIndex(option => option.value === selectedValue);
                 if (index !== -1) {

package/select/option.scss

@@ -15,7 +15,7 @@ $multiple: #{$module}-multiple;
     color: $color-select_option_main-text;
     position: relative;
     display: flex;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;

package/select/select.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
 @import './mixin.scss';
+@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;
@@ -418,4 +419,4 @@ $multiple: #{$module}-multiple;
     cursor: not-allowed;
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/slider/foundation.ts

@@ -79,7 +79,7 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
     getMinHandleEl: () => { current: HTMLElement };
     getMaxHandleEl: () => { current: HTMLElement };
     onHandleDown: (e: any) => any;
-    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void) => boolean | void;
+    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean) => boolean | void;
     setEventDefault: (e: any) => void;
     setStateVal: (state: keyof SliderState, value: any) => void;
     onHandleEnter: (position: SliderState['focusPos']) => void;
@@ -568,7 +568,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         const mousePos = this.handleMousePos(e.pageX, e.pageY);
         const position = vertical ? mousePos.y : mousePos.x;
         const isMin = this.checkWhichHandle(position);
-        this.setHandlePos(position, isMin);
+        this.setHandlePos(position, isMin, true);
     };
 
     /**
@@ -576,8 +576,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      *
      * @memberof SliderFoundation
      */
-    setHandlePos = (position: number, isMin: boolean) => {
-        this._adapter.onHandleMove(position, isMin, () => this._adapter.onHandleUpAfter());
+    setHandlePos = (position: number, isMin: boolean, clickTrack = false) => {
+        this._adapter.onHandleMove(position, isMin, () => this._adapter.onHandleUpAfter(), clickTrack);
     };
 
     /**

package/table/utils.ts

@@ -13,10 +13,13 @@ import {
     findIndex,
     some,
     includes,
-    toString
+    toString,
+    isFunction
 } from 'lodash-es';
 import { strings, numbers } from './constants';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
+import Logger from '../utils/Logger';
+
 
 export function cloneDeep(value: any, customizer?: (v: any) => any) {
     return cloneDeepWith(value, v => {
@@ -163,7 +166,7 @@ export function isSelectionColumn(column: Record<string, any>) {
     return get(column, 'key') === strings.DEFAULT_KEY_COLUMN_SELECTION;
 }
 
-export function filterColumns(columns: Record<string, any>[], ignoreKeys = [strings.DEFAULT_KEY_COLUMN_SCROLLBAR]) {
+export function filterColumns(columns: Record<string, any>[], ignoreKeys = [strings.DEFAULT_KEY_COLUMN_SCROLLBAR as string]) {
     return filter(columns, col => !ignoreKeys.includes(col.key));
 }
 
@@ -265,6 +268,7 @@ export function flattenColumns(cols: Record<string, any>[], childrenColumnName =
             if (Array.isArray(col[childrenColumnName]) && col[childrenColumnName].length) {
                 list.push(...flattenColumns(col[childrenColumnName], childrenColumnName));
             } else {
+                warnIfNoDataIndex(col);
                 list.push(col);
             }
         }
@@ -470,4 +474,14 @@ export interface GetAllDisabledRowKeysProps {
     getCheckboxProps: (record?: Record<string, any>) => any;
     childrenRecordName?: string;
     rowKey?: string | number | ((record: Record<string, any>) => string | number);
+}
+
+export function warnIfNoDataIndex(column: Record<string, any>) {
+    if (typeof column === 'object' && column !== null) {
+        const { filters, sorter, dataIndex } = column;
+        const logger = new Logger('[@douyinfe/semi-ui Table]');
+        if ((Array.isArray(filters) || isFunction(sorter)) && isNullOrUndefined(dataIndex) ) {
+            logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
+        }
+    }
 }

package/tabs/foundation.ts

@@ -20,12 +20,19 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
 
     destroy = noop;
 
+    _notifyChange(activeKey: string): void {
+        const { activeKey: stateActiveKey } = this.getStates();
+        if (stateActiveKey !== activeKey) {
+            this._adapter.notifyChange(activeKey);
+        }
+    }
+
     handleTabClick(activeKey: string, event: any): void {
         const isControledComponent = this._isInProps('activeKey');
         if (isControledComponent) {
-            this._adapter.notifyChange(activeKey);
+            this._notifyChange(activeKey);
         } else {
-            this._adapter.notifyChange(activeKey);
+            this._notifyChange(activeKey);
             this.handleNewActiveKey(activeKey);
         }
         this._adapter.notifyTabClick(activeKey, event);

package/treeSelect/foundation.ts

@@ -127,7 +127,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
     searchRender?: (inputProps: any) => any;
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
-    triggerRender?: (props: BasicTriggerRenderProps) => any;
+    // triggerRender?: (props: BasicTriggerRenderProps) => any;
     onBlur?: (e: any) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;

package/utils/log.ts

@@ -1,5 +1,7 @@
+import { get } from 'lodash-es';
+
 const log = (text: any, ...rest: any[]) => {
-    if (process.env.NODE_ENV === 'development') {
+    if (get(process, 'env.NODE_ENV') === 'development') {
         console.log(text, ...rest);
     }
 };