@douyinfe/semi-foundation 2.9.0-beta.0 → 2.9.1

package/divider/divider.scss

@@ -58,7 +58,7 @@ $module: #{$prefix}-divider;
 
         &-right {
             &::before {
-              flex: 1;
+                flex: 1;
             }
 
             &::after {

package/form/form.scss

@@ -84,7 +84,6 @@ $rating: #{$prefix}-rating;
         vertical-align: middle;
         @include font-size-regular;
         flex-shrink: 0;
-        user-select: none;
 
         &-disabled {
             color: $color-form_label_disabled-text-default;

package/form/interface.ts

@@ -111,8 +111,8 @@ export interface ArrayFieldStaff {
 export interface FormUpdaterContextType {
     register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
     unRegister: (field: string) => void;
-    updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-    updateStateError: (field: string, error: any, opts: CallOpts) => void;
+    updateStateValue: (field: string, value: any, opts?: CallOpts) => void;
+    updateStateError: (field: string, error: any, opts?: CallOpts) => void;
     updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
     getValue: (field?: string | undefined, opts?: CallOpts) => any;
     getError: (field?: string) => any;

package/lib/cjs/divider/divider.scss

@@ -58,7 +58,7 @@ $module: #{$prefix}-divider;
 
         &-right {
             &::before {
-              flex: 1;
+                flex: 1;
             }
 
             &::after {

package/lib/cjs/form/form.css

@@ -47,7 +47,6 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
-  user-select: none;
 }
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);

package/lib/cjs/form/form.scss

@@ -84,7 +84,6 @@ $rating: #{$prefix}-rating;
         vertical-align: middle;
         @include font-size-regular;
         flex-shrink: 0;
-        user-select: none;
 
         &-disabled {
             color: $color-form_label_disabled-text-default;

package/lib/cjs/form/interface.d.ts

@@ -104,8 +104,8 @@ export interface ArrayFieldStaff {
 export interface FormUpdaterContextType {
     register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
     unRegister: (field: string) => void;
-    updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-    updateStateError: (field: string, error: any, opts: CallOpts) => void;
+    updateStateValue: (field: string, value: any, opts?: CallOpts) => void;
+    updateStateError: (field: string, error: any, opts?: CallOpts) => void;
     updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
     getValue: (field?: string | undefined, opts?: CallOpts) => any;
     getError: (field?: string) => any;

package/lib/cjs/select/select.css

@@ -115,6 +115,7 @@
 }
 .semi-select-open:hover, .semi-select-focus:hover {
   background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select-warning {
   background-color: var(--semi-color-warning-light-default);

package/lib/cjs/select/select.scss

@@ -54,9 +54,10 @@ $multiple: #{$module}-multiple;
 
         &:hover {
             background-color: $color-select-bg-default;
+            border: $border-thickness-control-focus solid $color-select_default-border-focus;
         }
     }
-    
+
     &-warning {
         background-color: $color-select_warning-bg-default;
         border-color: $color-select_warning-border-default;

package/lib/cjs/tagInput/foundation.js

@@ -109,8 +109,12 @@ class TagInputFoundation extends _foundation.default {
 
       const code = e.keyCode;
 
-      if (code === _keyCode.default.ENTER && inputValue !== '') {
-        this._handleAddTags(e);
+      if (code === _keyCode.default.ENTER) {
+        e.preventDefault(); // prevent trigger submit when using in form
+
+        if (inputValue !== '') {
+          this._handleAddTags(e);
+        }
       }
 
       const {

package/lib/cjs/timePicker/foundation.js

@@ -126,6 +126,10 @@ class TimePickerFoundation extends _foundation.default {
         parsedValues.push(this.isValidTimeZone() ? (0, _dateFnsExtra.utcToZonedTime)(pv, timeZone) : pv);
       }
     });
+    const isAM = [true, false];
+    (0, _map.default)(parsedValues).call(parsedValues, (item, idx) => {
+      isAM[idx] = (0, _dateFns.getHours)(item) < 12;
+    });
 
     if (parsedValues.length === value.length) {
       value = parsedValues;
@@ -144,6 +148,7 @@ class TimePickerFoundation extends _foundation.default {
     }
 
     this.setState({
+      isAM,
       value,
       inputValue,
       invalid
@@ -181,6 +186,12 @@ class TimePickerFoundation extends _foundation.default {
       isAM[index] = panelIsAM;
       const inputValue = this.formatValue(value);
 
+      if (this.getState('isAM')[index] !== result.isAM) {
+        this.setState({
+          isAM
+        });
+      }
+
       if (!this._isControlledComponent('value')) {
         const invalid = this.validateDates(value);
         this.setState({

package/lib/cjs/tooltip/tooltip.scss

@@ -88,4 +88,4 @@ $module-icon: #{$module}-icon-arrow;
 }
 
 @import './arrow.scss';
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/cjs/transfer/transfer.css

@@ -103,7 +103,7 @@
 .semi-transfer-left-empty {
   height: 36px;
 }
-.semi-transfer-left .semi-spin {
+.semi-transfer-left > .semi-spin {
   width: 100%;
   flex-grow: 1;
 }

package/lib/cjs/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }

package/lib/cjs/upload/foundation.d.ts

@@ -19,7 +19,7 @@ export interface BaseFileItem {
     percent?: number;
     _sizeInvalid?: boolean;
     preview?: boolean;
-    validateMessage?: unknown;
+    validateMessage?: any;
     shouldUpload?: boolean;
     [key: string]: any;
 }

package/lib/es/divider/divider.scss

@@ -58,7 +58,7 @@ $module: #{$prefix}-divider;
 
         &-right {
             &::before {
-              flex: 1;
+                flex: 1;
             }
 
             &::after {

package/lib/es/form/form.css

@@ -47,7 +47,6 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
-  user-select: none;
 }
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);

package/lib/es/form/form.scss

@@ -84,7 +84,6 @@ $rating: #{$prefix}-rating;
         vertical-align: middle;
         @include font-size-regular;
         flex-shrink: 0;
-        user-select: none;
 
         &-disabled {
             color: $color-form_label_disabled-text-default;

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

@@ -104,8 +104,8 @@ export interface ArrayFieldStaff {
 export interface FormUpdaterContextType {
     register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
     unRegister: (field: string) => void;
-    updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-    updateStateError: (field: string, error: any, opts: CallOpts) => void;
+    updateStateValue: (field: string, value: any, opts?: CallOpts) => void;
+    updateStateError: (field: string, error: any, opts?: CallOpts) => void;
     updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
     getValue: (field?: string | undefined, opts?: CallOpts) => any;
     getError: (field?: string) => any;

package/lib/es/select/select.css

@@ -115,6 +115,7 @@
 }
 .semi-select-open:hover, .semi-select-focus:hover {
   background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select-warning {
   background-color: var(--semi-color-warning-light-default);

package/lib/es/select/select.scss

@@ -54,9 +54,10 @@ $multiple: #{$module}-multiple;
 
         &:hover {
             background-color: $color-select-bg-default;
+            border: $border-thickness-control-focus solid $color-select_default-border-focus;
         }
     }
-    
+
     &-warning {
         background-color: $color-select_warning-bg-default;
         border-color: $color-select_warning-border-default;

package/lib/es/tagInput/foundation.js

@@ -82,8 +82,12 @@ class TagInputFoundation extends BaseFoundation {
 
       const code = e.keyCode;
 
-      if (code === keyCode.ENTER && inputValue !== '') {
-        this._handleAddTags(e);
+      if (code === keyCode.ENTER) {
+        e.preventDefault(); // prevent trigger submit when using in form
+
+        if (inputValue !== '') {
+          this._handleAddTags(e);
+        }
       }
 
       const {

package/lib/es/timePicker/foundation.js

@@ -10,7 +10,7 @@ import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import { strings } from './constants';
 import BaseFoundation from '../base/foundation';
 import { formatToString, parseToDate, hourIsDisabled, minuteIsDisabled, secondIsDisabled, transformToArray, isTimeFormatLike } from './utils';
-import { isValid, format } from 'date-fns';
+import { isValid, format, getHours } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from '../utils/date-fns-extra';
 import isNullOrUndefined from '../utils/isNullOrUndefined'; // TODO: split, timePicker different components cannot share a foundation
 
@@ -102,6 +102,12 @@ class TimePickerFoundation extends BaseFoundation {
       }
     });
 
+    const isAM = [true, false];
+
+    _mapInstanceProperty(parsedValues).call(parsedValues, (item, idx) => {
+      isAM[idx] = getHours(item) < 12;
+    });
+
     if (parsedValues.length === value.length) {
       value = parsedValues;
     } else {
@@ -119,6 +125,7 @@ class TimePickerFoundation extends BaseFoundation {
     }
 
     this.setState({
+      isAM,
       value,
       inputValue,
       invalid
@@ -156,6 +163,12 @@ class TimePickerFoundation extends BaseFoundation {
       isAM[index] = panelIsAM;
       const inputValue = this.formatValue(value);
 
+      if (this.getState('isAM')[index] !== result.isAM) {
+        this.setState({
+          isAM
+        });
+      }
+
       if (!this._isControlledComponent('value')) {
         const invalid = this.validateDates(value);
         this.setState({

package/lib/es/tooltip/tooltip.scss

@@ -88,4 +88,4 @@ $module-icon: #{$module}-icon-arrow;
 }
 
 @import './arrow.scss';
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/es/transfer/transfer.css

@@ -103,7 +103,7 @@
 .semi-transfer-left-empty {
   height: 36px;
 }
-.semi-transfer-left .semi-spin {
+.semi-transfer-left > .semi-spin {
   width: 100%;
   flex-grow: 1;
 }

package/lib/es/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }

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

@@ -19,7 +19,7 @@ export interface BaseFileItem {
     percent?: number;
     _sizeInvalid?: boolean;
     preview?: boolean;
-    validateMessage?: unknown;
+    validateMessage?: any;
     shouldUpload?: boolean;
     [key: string]: any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.9.0-beta.0",
+    "version": "2.9.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.9.0-beta.0",
+        "@douyinfe/semi-animation": "2.9.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "acb1db546e6d3b2a7a40467d83d4b1e1b51e2b21",
+    "gitHead": "9593ab23b59b5a18305627ac402cfd4527072f9c",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/select/select.scss

@@ -54,9 +54,10 @@ $multiple: #{$module}-multiple;
 
         &:hover {
             background-color: $color-select-bg-default;
+            border: $border-thickness-control-focus solid $color-select_default-border-focus;
         }
     }
-    
+
     &-warning {
         background-color: $color-select_warning-bg-default;
         border-color: $color-select_warning-border-default;

package/tagInput/foundation.ts

@@ -83,8 +83,11 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             tagsArray
         } = this._adapter.getStates();
         const code = e.keyCode;
-        if (code === keyCode.ENTER && inputValue !== '') {
-            this._handleAddTags(e);
+        if (code === keyCode.ENTER) {
+            e.preventDefault(); // prevent trigger submit when using in form
+            if (inputValue !== '') {
+                this._handleAddTags(e);
+            }
         }
         const { length } = tagsArray;
         if (code === keyCode.BACKSPACE && inputValue === '' && length > 0) {

package/timePicker/foundation.ts

@@ -11,7 +11,7 @@ import {
     isTimeFormatLike
 } from './utils';
 import { split } from 'lodash';
-import { isValid, format } from 'date-fns';
+import { isValid, format, getHours } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from '../utils/date-fns-extra';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 
@@ -125,6 +125,11 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
             }
         });
 
+        const isAM = [true, false];
+        parsedValues.map((item, idx)=>{
+            isAM[idx]= getHours(item) < 12;
+        });
+
         if (parsedValues.length === value.length) {
             value = parsedValues;
         } else {
@@ -142,6 +147,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         }
 
         this.setState({
+            isAM,
             value,
             inputValue,
             invalid,
@@ -176,6 +182,9 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
             isAM[index] = panelIsAM;
             const inputValue = this.formatValue(value);
 
+            if (this.getState('isAM')[index] !== result.isAM){
+                this.setState({ isAM } as any);
+            }
             if (!this._isControlledComponent('value')) {
                 const invalid = this.validateDates(value);
                 this.setState({
@@ -307,7 +316,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
 
     validateStr(inputValue = '') {
         const dates = this.parseInput(inputValue);
-
+    
         return this.validateDates(dates);
     }
 

package/tooltip/tooltip.scss

@@ -88,4 +88,4 @@ $module-icon: #{$module}-icon-arrow;
 }
 
 @import './arrow.scss';
-@import './rtl.scss';
+@import './rtl.scss';

package/transfer/transfer.scss

@@ -115,7 +115,7 @@ $module: #{$prefix}-transfer;
         &-empty {
             height: $height-transfer_left_empty;
         }
-        .#{$prefix}-spin {
+        >.#{$prefix}-spin {
             width: 100%;
             flex-grow: 1;
         }

package/upload/foundation.ts

@@ -37,7 +37,7 @@ export interface BaseFileItem {
     percent?: number;
     _sizeInvalid?: boolean;
     preview?: boolean;
-    validateMessage?: unknown;
+    validateMessage?: any;
     shouldUpload?: boolean;
     [key: string]: any;
 }