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

package/tagInput/foundation.ts

@@ -27,6 +27,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
     setActive: (active: boolean) => void;
+    setEntering: (entering: boolean) => void;
     getClickOutsideHandler: () => any;
     registerClickOutsideHandler: (cb: any) => void;
     unregisterClickOutsideHandler: () => void;
@@ -49,9 +50,64 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      */
     handleInputChange = (e: TagInputChangeEvent) => {
         const { value } = e.target;
-        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+        const { entering } = this.getStates();
+        if (entering) {
+            // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+            // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+            // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+            // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+            // Because for composition input, what is updated to inputValue at this time is not the final result.
+            // For example, for Chinese, the content in inputValue is pinyin at this time
+            // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+            this._onInputChange(value, e);
+        } else {
+            this._checkInputChangeValid(value) && this._onInputChange(value, e);
+        }
     };
 
+    handleInputCompositionStart = (e: any) => {
+        const { maxLength } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
+        this._adapter.setEntering(true);
+    }
+
+    handleInputCompositionEnd = (e: any) => {
+        const { value } = e.target;
+        const {
+            maxLength, 
+            onInputExceed,
+            separator
+        } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
+        this._adapter.setEntering(false);
+        let allowChange = true;
+        const inputArr = getSplitedArray(value, separator);
+        let index = 0;
+        for (; index < inputArr.length; index++) {
+            if (inputArr[index].length > maxLength) {
+                allowChange = false;
+                isFunction(onInputExceed) && onInputExceed(value);
+                break;
+            }
+        }
+        if (!allowChange) {
+            const newInputArr = inputArr.slice(0, index);
+            if (index < inputArr.length) {
+                newInputArr.push(inputArr[index].slice(0, maxLength));
+            }
+            this._adapter.setInputValue(newInputArr.join(separator));
+        } else {
+            // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+            // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+            // the composition input completes input.
+            this._adapter.setInputValue(value);
+        }
+    }
+
     /**
      * check whether the input change is legal
      */
@@ -70,10 +126,8 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             const maxLen = Math.max(valueArr.length, inputArr.length);
             for (let i = 0; i < maxLen; i++) {
                 // When the input length is increasing
-                // eslint-disable-next-line max-len
                 if (!isUndefined(valueArr[i]) && (isUndefined(inputArr[i]) || valueArr[i].length > inputArr[i].length)) {
                     // When the input length exceeds maxLength
-                    // eslint-disable-next-line max-depth
                     if (valueArr[i].length > maxLength) {
                         allowChange = false;
                         isFunction(onInputExceed) && onInputExceed(value);

package/tagInput/tagInput.scss

@@ -11,10 +11,19 @@ $module: #{$prefix}-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
     width: 100%;
+    min-height: $height-tagInput-default;
     box-sizing: border-box;
     transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
         border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
 
+    &-small {
+        min-height: $height-tagInput-small;
+    }
+
+    &-large {
+        min-height: $height-tagInput-large;
+    }
+
     &-drag {
 
         &-item {
@@ -33,6 +42,27 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-sortable-item {
+        position: relative;
+        &-over {
+            overflow: visible;
+            &::before {
+                content: "";
+                display: block;
+                height: 100%;
+                width: $width-tagInput_sortable_item_over;
+                background-color: $color-tagInput_sortable_item_over-bg;
+                position: absolute;
+                left: -$width-tagInput_sortable_item_over;
+                top: 0;
+            }
+        }
+
+        &-active {
+            opacity: 0.5;
+        }
+    }
+
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
         border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
@@ -106,18 +136,6 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
-        &-small {
-            min-height: $height-tagInput-small;
-        }
-
-        &-default {
-            min-height: $height-tagInput-default;
-        }
-
-        &-large {
-            min-height: $height-tagInput-large;
-        }
-
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -262,6 +280,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/tagInput/variables.scss

@@ -27,6 +27,7 @@ $color-tagInput_danger-bg-hover: var(--semi-color-danger-light-hover); // 危险
 $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 危险标签输入框描边颜色 - 悬浮
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
+$color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
 
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
@@ -48,6 +49,7 @@ $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
 $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
 $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
+$width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 

package/timePicker/foundation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { strings } from './constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
@@ -10,7 +9,7 @@ import {
     transformToArray,
     isTimeFormatLike
 } from './utils';
-import { split } from 'lodash';
+import { split, isUndefined } from 'lodash';
 import { isValid, format, getHours } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from '../utils/date-fns-extra';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
@@ -84,10 +83,8 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         return hDis || mDis || sDis;
     }
 
-    isValidTimeZone(timeZone?: string | number) {
-        const _timeZone = timeZone === undefined ? this.getProp('timeZone') : timeZone;
-
-        return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
+    isValidTimeZone(timeZone: string | number) {
+        return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
     }
 
     getDefaultFormatIfNeed(): string {
@@ -121,7 +118,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         (value as any[]).forEach(v => {
             const pv = parseToDate(v, formatToken, dateFnsLocale);
             if (!isNaN(pv.getTime())) {
-                parsedValues.push(this.isValidTimeZone() ? utcToZonedTime(pv, timeZone) : pv);
+                parsedValues.push(this.isValidTimeZone(timeZone) ? utcToZonedTime(pv, timeZone) : pv);
             }
         });
 
@@ -182,7 +179,7 @@ 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){
+            if (this.getState('isAM')[index] !== result.isAM) {
                 this.setState({ isAM } as any);
             }
             if (!this._isControlledComponent('value')) {
@@ -205,8 +202,8 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         const { value, timeZone, __prevTimeZone } = props;
         
         let dates = this.parseValue(value);
-        const invalid = this.validateDates(dates);
 
+        let invalid = dates.some(d => isNaN(Number(d)));
         if (!invalid) {
             if (this.isValidTimeZone(timeZone)) {
                 dates = dates.map(date =>
@@ -216,14 +213,17 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
                     )
                 );
             }
-            const inputValue = this.formatValue(dates);
-
-            this.setState({
-                value: dates,
-                invalid,
-                inputValue,
-            } as any);
+            invalid = dates.some(d =>
+                this.isDisabledHMS({ hours: d.getHours(), minutes: d.getMinutes(), seconds: d.getSeconds() })
+            );
         }
+        const inputValue = this.formatValue(dates);
+
+        this.setState({
+            value: dates,
+            invalid,
+            inputValue,
+        } as any);
     }
 
     handleFocus(e: any) {
@@ -369,7 +369,16 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         }
 
         if (_dates && Array.isArray(_dates)) {
-            return _dates.map(date => formatToString(date, validFormat, dateFnsLocale)).join(rangeSeparator);
+            const result = _dates.map(date => {
+                let str;
+                if (isUndefined(date)) {
+                    str = '';
+                } else {
+                    str = formatToString(date, validFormat, dateFnsLocale);
+                }
+                return str;
+            });
+            return result.join(rangeSeparator);
         }
         return undefined;
     }
@@ -413,7 +422,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
             _value = Array.isArray(_value) ? _value[0] : _value;
         }
 
-        if (this.isValidTimeZone() && _value) {
+        if (this.isValidTimeZone(timeZone) && _value) {
             const formatToken = this.getValidFormat();
             if (Array.isArray(_value)) {
                 _value = _value.map(v => zonedTimeToUtc(v, timeZone));

package/timePicker/inputFoundation.ts

@@ -13,10 +13,8 @@ class TimePickerFoundation extends BaseFoundation<TimeInputAdapter> {
         super({ ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
     handleFocus(e: any) {

package/timePicker/timePicker.scss

@@ -20,6 +20,15 @@ $module-list: #{$prefix}-scrolllist;
 
             .#{$module-list}-item,
             .#{$module-list}-item-wheel .#{$module-list}-list-outer {
+                -ms-overflow-style: none; /* Internet Explorer 10+ */
+                scrollbar-width: none; /* Firefox */
+
+                &::-webkit-scrollbar {
+                    display: none;
+                    width: 0;
+                    height: 0;
+                }
+
                 & > ul {
                     padding-bottom: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
                 }
@@ -28,7 +37,7 @@ $module-list: #{$prefix}-scrolllist;
             .#{$module-list}-item {
                 -ms-overflow-style: none; /* Internet Explorer 10+ */
                 scrollbar-width: none; /* Firefox */
-                
+
                 &::-webkit-scrollbar {
                     display: none;
                     width: 0;
@@ -119,4 +128,16 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module} {
+    .#{$prefix}-input-borderless:not(:focus-within):not(:hover){
+        .#{$prefix}-input {
+            &-suffix {
+                opacity: 0;
+            }
+        }
+    }
+
+}
+
+
 @import "./rtl.scss";

package/timePicker/utils/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { format, parse } from 'date-fns';
 import { toNumber } from 'lodash';
 import { strings } from '../constants';
@@ -15,7 +14,7 @@ import { zhCN as defaultLocale } from 'date-fns/locale';
 export const parseToDate = (input: string | Date | number, formatToken = strings.DEFAULT_FORMAT, dateFnsLocale = defaultLocale) => {
     if (input instanceof Date) {
         return input;
-    } else if (typeof input === 'number' || !isNaN(Number(input))) {
+    } else if (typeof input === 'number') {
         return new Date(toNumber(input));
     } else if (typeof input === 'string') {
         let curDate = new Date();
@@ -26,6 +25,8 @@ export const parseToDate = (input: string | Date | number, formatToken = strings
         // console.log(curDate, formatToken);
 
         return curDate;
+    } else if (typeof input === 'undefined') {
+        return undefined;
     }
 
     return new Date();

package/toast/animation.scss

@@ -9,3 +9,6 @@ $animation_opacity-toast-show: 0;
 $animation_opacity-toast-hide: 0;
 $animation_transform_translateY-toast-show: -100%;
 $animation_transform_translateY-toast-hide: -100%;
+
+$animation_duration-toast-stack: 300ms;
+$animation_function-toast-stack: cubic-bezier(.22,.57,.02,1.2)

package/toast/toast.scss

@@ -8,21 +8,44 @@ $icon: #{$prefix}-toast-icon;
     pointer-events: none;
 
     &-wrapper {
-        pointer-events: none;
         position: fixed;
+        height: 0;
         top: $spacing-toast_wrapper-top;
         width: $width-toast_wrapper;
-        text-align: center;
+        display: flex;
+        justify-content: center;
         z-index: $z-toast;
+        .#{$module}-innerWrapper{
+            width: fit-content;
+            height: fit-content;
+            &-hover{
+                .#{$module}-zero-height-wrapper{
+                    perspective: unset;
+                    perspective-origin: center center;
+                }
+            }
+        }
+
+
     }
 
+
+    &-zero-height-wrapper{
+        transition: all $animation_duration-toast-stack $animation_function-toast-stack;
+        perspective-origin: center $spacing-toast-perspective-originY; ;
+        perspective: $spacing-toast-perspective;
+        height: 0;
+        overflow: visible;
+    }
+
+
     &-content {
         pointer-events: all;
         @include shadow-elevated;
         @include font-size-regular;
         background-color: $color-toast-bg-default;
         border-radius: $radius-toast_content;
-        padding: $spacing-toast_content-paddingY $spacing-toast_content-paddingX;
+        padding: $spacing-toast_content-paddingTop $spacing-toast_content-paddingRight $spacing-toast_content-paddingBottom $spacing-toast_content-paddingLeft;
         display: inline-flex;
         align-items: flex-start;
         justify-content: center;
@@ -39,6 +62,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 
@@ -48,6 +74,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_warning_light-bg;
                 border: $width-toast_light-border solid $color-toast_warning_light-border;
             }
+            .#{$icon}-warning {
+                color: $color-toast_warning_light-icon;
+            }
         }
 
         &.#{$module}-success {
@@ -55,6 +84,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_success_light-bg;
                 border: $width-toast_light-border solid $color-toast_success_light-border;
             }
+            .#{$icon}-success {
+                color: $color-toast_success_light-icon;
+            }
         }
 
         &.#{$module}-info {
@@ -62,6 +94,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_info_light-bg;
                 border: $width-toast_light-border solid $color-toast_info_light-border;
             }
+            .#{$icon}-info {
+                color: $color-toast_info_light-icon;
+            }
         }
 
         &.#{$module}-error {
@@ -69,6 +104,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_danger_light-bg;
                 border: $width-toast_light-border solid $color-toast_danger_light-border;
             }
+            .#{$icon}-error {
+                color: $color-toast_danger_light-icon;
+            }
         }
     }
 
@@ -90,10 +128,12 @@ $icon: #{$prefix}-toast-icon;
 
     &-animation-show{
         animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
+        animation-fill-mode: forwards;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

package/toast/toastFoundation.ts

@@ -13,6 +13,7 @@ export interface ConfigProps {
     right?: number | string;
     duration?: number;
     zIndex?: number;
+    theme?: ToastTheme;
     getPopupContainer?: () => HTMLElement | null
 }
 export interface ToastProps extends ConfigProps {
@@ -24,9 +25,9 @@ export interface ToastProps extends ConfigProps {
     className?: string;
     showClose?: boolean;
     icon?: any;
-    theme?: ToastTheme;
     direction?: Directions;
-    close?: (id: string) => void
+    close?: (id: string) => void;
+    stack?: boolean
 }
 
 
@@ -35,10 +36,7 @@ export interface ToastInstance extends ToastProps{
     motion?: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ToastState{
-
-}
+export interface ToastState{}
 
 
 export interface ToastAdapter extends DefaultAdapter<ToastProps, ToastState>{

package/toast/toastListFoundation.ts

@@ -1,7 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { ToastInstance, ToastProps } from '../toast/toastFoundation';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ToastListProps{
 
 }
@@ -9,11 +8,14 @@ export interface ToastListProps{
 export interface ToastListState{
     list: ToastInstance[];
     removedItems: ToastInstance[];
-    updatedItems: ToastInstance[]
+    updatedItems: ToastInstance[];
+    mouseInSide: boolean
 }
 
 export interface ToastListAdapter extends DefaultAdapter<ToastListProps, ToastListState>{
-    updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems'], updatedItems: ToastListState['updatedItems']) => void
+    updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems'], updatedItems: ToastListState['updatedItems']) => void;
+    handleMouseInSideChange: (mouseInSideChange: boolean) => void;
+    getInputWrapperRect: () => DOMRect | null
 }
 
 export default class ToastListFoundation extends BaseFoundation<ToastListAdapter> {
@@ -28,6 +30,14 @@ export default class ToastListFoundation extends BaseFoundation<ToastListAdapter
         return toastList.map(({ id }) =>id).includes(id);
     }
 
+    handleMouseInSideChange = (mouseInSideChange: boolean)=>{
+        this._adapter.handleMouseInSideChange(mouseInSideChange);
+    }
+
+    getInputWrapperRect = () => {
+        return this._adapter.getInputWrapperRect();
+    }
+
     addToast(toastOpts: ToastProps) {
         const toastList = this._adapter.getState('list') as ToastListState['list'];
         // const id = getUuid('toast');

package/toast/variables.scss

@@ -5,23 +5,37 @@ $color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜
 $color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
 $color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
 $color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
+
 $color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
+$color-toast_warning_light-icon: $color-toast_warning-icon; // 多色样式 警告提示图标颜色
 $color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
+
 $color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
+$color-toast_success_light-icon: $color-toast_success-icon; // 多色样式 成功提示图标颜色
 $color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
+
 $color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
+$color-toast_info_light-icon: $color-toast_info-icon; // 多色样式 通知提示图标颜色
 $color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
+
 $color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
+$color-toast_danger_light-icon: $color-toast_danger-icon; // 多色样式 错误提示图标颜色
 $color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
 
 // Spacing
 $spacing-toast_wrapper-top: 0; // 通知容器顶部位置
 $spacing-toast_content-paddingY: $spacing-base-tight; // 通知内容垂直内边距
 $spacing-toast_content-paddingX: $spacing-tight; // 通知内容水平内边距
+$spacing-toast_content-paddingTop: $spacing-toast_content-paddingY; // 通知内容 top 内边距
+$spacing-toast_content-paddingBottom: $spacing-toast_content-paddingY; // 通知内容 bottom 内边距
+$spacing-toast_content-paddingLeft: $spacing-toast_content-paddingX; // 通知内容 left 内边距
+$spacing-toast_content-paddingRight: $spacing-toast_content-paddingX; // 通知内容 right 内边距
 $spacing-toast_content-margin: $spacing-base-tight; // 通知内容外边距
 $spacing-toast_content_close_btn-marginTop: -2px; // 通知关闭按钮顶部外边距
 $spacing-toast_content_text-marginLeft: $spacing-base-tight; // 通知文本左侧外边距
 $spacing-toast_content_text-marginRight: $spacing-base-tight; // 通知文本右侧外边距
+$spacing-toast-perspective-originY: 280px; // 通知透视原点 Y 轴位置
+$spacing-toast-perspective: 280px; // 通知透视距离
 
 // Width/Height
 $width-toast_wrapper: 100%; // 通知容器整体宽度

package/tooltip/constants.ts

@@ -23,7 +23,7 @@ const strings = {
         'leftBottomOver',
         'rightBottomOver',
     ],
-    TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+    TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
     STATUS_DISABLED: 'disabled',
     STATUS_LOADING: 'loading',
 } as const;