@douyinfe/semi-foundation 2.0.8 → 2.0.9-alpha.0

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/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/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/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/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

@@ -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/tree/treeUtil.d.ts

@@ -74,6 +74,6 @@ export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
 export declare function updateKeys(keySet: Set<string>, keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

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

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("auto" | "custom")[];
+    UPLOAD_TRIGGER: ("custom" | "auto")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.0.8",
+    "version": "2.0.9-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "0a2a5df053d415ee634ae3c5b8aa24915aa2cf9b",
+    "gitHead": "cfbebccbd9c618b43a0eeca339980cea3723453d",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

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/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 => {
@@ -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);