@douyinfe/semi-foundation 2.16.1 → 2.17.0-beta.0

package/lib/es/select/foundation.js

@@ -36,6 +36,7 @@ import KeyCode, { ENTER_KEY } from '../utils/keyCode';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import isEnterPress from '../utils/isEnterPress';
+import { handlePrevent } from '../utils/a11y';
 export default class SelectFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter)); // keyboard event listner
@@ -66,14 +67,22 @@ export default class SelectFoundation extends BaseFoundation {
   }
 
   focus() {
-    this._focusTrigger();
-
     const isFilterable = this._isFilterable();
 
+    const isMultiple = this._isMultiple();
+
     this._adapter.updateFocusState(true);
 
-    if (isFilterable) {
+    this._adapter.setIsFocusInContainer(false);
+
+    if (isFilterable && isMultiple) {
+      // when filter and multiple, only focus input
+      this.focusInput();
+    } else if (isFilterable && !isMultiple) {
+      // when filter and not multiple, only show input and focus input
       this.toggle2SearchInput(true);
+    } else {
+      this._focusTrigger();
     }
   }
 
@@ -83,9 +92,8 @@ export default class SelectFoundation extends BaseFoundation {
   }
 
   destroy() {
-    this._adapter.unregisterClickOutsideHandler();
+    this._adapter.unregisterClickOutsideHandler(); // this.unBindKeyBoardEvent();
 
-    this.unBindKeyBoardEvent();
   }
 
   _setDropdownWidth() {
@@ -411,6 +419,10 @@ export default class SelectFoundation extends BaseFoundation {
 
     this._adapter.registerClickOutsideHandler(e => {
       this.close(e);
+
+      this._notifyBlur(e);
+
+      this._adapter.updateFocusState(false);
     });
   }
 
@@ -418,15 +430,17 @@ export default class SelectFoundation extends BaseFoundation {
     if (isShow) {
       this._adapter.toggleInputShow(isShow, () => this.focusInput());
     } else {
+      // only when choose the option and close the panel, the input can be hide
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
 
   close(e) {
+    // to support A11y, closing the panel trigger does not necessarily lose focus
     const isFilterable = this._isFilterable();
 
     if (isFilterable) {
-      this.unBindKeyBoardEvent();
+      // this.unBindKeyBoardEvent();
       this.clearInput();
       this.toggle2SearchInput(false);
     }
@@ -435,13 +449,12 @@ export default class SelectFoundation extends BaseFoundation {
 
     this._adapter.notifyDropdownVisibleChange(false);
 
-    this.unBindKeyBoardEvent();
+    this._adapter.setIsFocusInContainer(false); // this.unBindKeyBoardEvent();
+    // this._notifyBlur(e);
 
-    this._notifyBlur(e);
 
-    this._adapter.unregisterClickOutsideHandler();
+    this._adapter.unregisterClickOutsideHandler(); // this._adapter.updateFocusState(false);
 
-    this._adapter.updateFocusState(false);
   }
 
   onSelect(option, optionIndex, event) {
@@ -460,6 +473,8 @@ export default class SelectFoundation extends BaseFoundation {
 
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
+
+      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }
@@ -684,6 +699,8 @@ export default class SelectFoundation extends BaseFoundation {
     this._adapter.focusInput();
 
     this._adapter.updateFocusState(true);
+
+    this._adapter.setIsFocusInContainer(false);
   }
 
   handleInputChange(sugInput) {
@@ -822,14 +839,17 @@ export default class SelectFoundation extends BaseFoundation {
 
   _handleKeyDown(event) {
     const key = event.keyCode;
+    const {
+      loading,
+      filter,
+      multiple,
+      disabled
+    } = this.getProps();
     const {
       isOpen
     } = this.getStates();
-    const {
-      loading
-    } = this.getProps();
 
-    if (!isOpen || loading) {
+    if (loading || disabled) {
       return;
     }
 
@@ -860,16 +880,38 @@ export default class SelectFoundation extends BaseFoundation {
       case KeyCode.ENTER:
         // internal-issues:302
         // prevent trigger form’s submit when use in form
-        event.preventDefault();
-        event.stopPropagation();
+        handlePrevent(event);
 
         this._handleEnterKeyDown(event);
 
         break;
 
       case KeyCode.ESC:
+        isOpen && this.close(event);
+        filter && !multiple && this._focusTrigger();
+        break;
+
+      case KeyCode.TAB:
+        // check if slot have focusable element
+        this._handleTabKeyDown(event);
+
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  handleContainerKeyDown(event) {
+    // when focus in contanier, handle the key down
+    const key = event.keyCode;
+    const {
+      isOpen
+    } = this.getStates();
+
+    switch (key) {
       case KeyCode.TAB:
-        this.close(event);
+        isOpen && this._handleTabKeyDown(event);
         break;
 
       default:
@@ -939,7 +981,84 @@ export default class SelectFoundation extends BaseFoundation {
   }
 
   _handleArrowKeyDown(offset) {
-    this._getEnableFocusIndex(offset);
+    const {
+      isOpen
+    } = this.getStates();
+    isOpen ? this._getEnableFocusIndex(offset) : this.open();
+  }
+
+  _handleTabKeyDown(event) {
+    const {
+      isOpen
+    } = this.getStates();
+
+    this._adapter.updateFocusState(false);
+
+    if (isOpen) {
+      const container = this._adapter.getContainer();
+
+      const focusableElements = this._adapter.getFocusableElements(container);
+
+      const focusableNum = focusableElements.length;
+
+      if (focusableNum > 0) {
+        // Shift + Tab will move focus backward
+        if (event.shiftKey) {
+          this._handlePanelOpenShiftTabKeyDown(focusableElements, event);
+        } else {
+          this._handlePanelOpenTabKeyDown(focusableElements, event);
+        }
+      } else {
+        // there are no focusable elements inside the container, tab to next element and trigger blur
+        this.close();
+
+        this._notifyBlur(event);
+      }
+    } else {
+      // tab or shift tab to next element and trigger blur
+      this._notifyBlur(event);
+    }
+  }
+
+  _handlePanelOpenTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isFocusInContainer = this._adapter.getIsFocusInContainer();
+
+    if (!isFocusInContainer) {
+      // focus in trigger, set next focus to the first element in container
+      focusableElements[0].focus();
+
+      this._adapter.setIsFocusInContainer(true);
+
+      handlePrevent(event);
+    } else if (activeElement === focusableElements[focusableElements.length - 1]) {
+      // focus in the last element in container, focus back to trigger and close panel
+      this._focusTrigger();
+
+      this.close();
+      handlePrevent(event);
+    }
+  }
+
+  _handlePanelOpenShiftTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isFocusInContainer = this._adapter.getIsFocusInContainer();
+
+    if (!isFocusInContainer) {
+      // focus in trigger, close the panel, shift tab to previe element and trigger blur
+      this.close();
+
+      this._notifyBlur(event);
+    } else if (activeElement === focusableElements[0]) {
+      // focus in the first element in container, focus back to trigger
+      this._focusTrigger();
+
+      this._adapter.setIsFocusInContainer(false);
+
+      handlePrevent(event);
+    }
   }
 
   _handleEnterKeyDown(event) {
@@ -949,27 +1068,33 @@ export default class SelectFoundation extends BaseFoundation {
       focusIndex
     } = this.getStates();
 
-    if (focusIndex !== -1) {
-      const visibleOptions = _filterInstanceProperty(options).call(options, item => item._show);
-
-      const {
-        length
-      } = visibleOptions; // fix issue 1201
-
-      if (length <= focusIndex) {
-        return;
-      }
+    if (!isOpen) {
+      this.open();
+    } else {
+      if (focusIndex !== -1) {
+        const visibleOptions = _filterInstanceProperty(options).call(options, item => item._show);
 
-      if (visibleOptions && length) {
-        const selectedOption = visibleOptions[focusIndex];
+        const {
+          length
+        } = visibleOptions; // fix issue 1201
 
-        if (selectedOption.disabled) {
+        if (length <= focusIndex) {
           return;
         }
 
-        this.onSelect(selectedOption, focusIndex, event);
+        if (visibleOptions && length) {
+          const selectedOption = visibleOptions[focusIndex];
+
+          if (selectedOption.disabled) {
+            return;
+          }
+
+          this.onSelect(selectedOption, focusIndex, event);
+        }
+      } else {
+        this.close();
       }
-    } else if (isOpen) {}
+    }
   }
 
   _handleBackspaceKeyDown() {
@@ -1114,15 +1239,16 @@ export default class SelectFoundation extends BaseFoundation {
       this._adapter.notifyChange(values);
     }
   } // Scenes that may trigger blur：
-  //  1、clickOutSide
-  //  2、click option / press enter, and then select complete（when multiple is false
-  //  3、press esc when dropdown list open
+  // 1、clickOutSide
+  // 2、 tab to next element/ shift tab to previous element
+  // 3、[remove when add a11y] click option / press enter, and then select complete（when multiple is false 
+  // 4、[remove when add a11y] press esc when dropdown list open 
 
 
   _notifyBlur(e) {
     this._adapter.notifyBlur(e);
   } // Scenes that may trigger focus:
-  //  1、click selection
+  // 1、click selection
 
 
   _notifyFocus(e) {
@@ -1175,11 +1301,15 @@ export default class SelectFoundation extends BaseFoundation {
 
   handleListScroll(e) {
     this._adapter.notifyListScroll(e);
-  } // handleTriggerFocus(e) {
-  //     console.log('handleTriggerFocus');
-  //     this._adapter.updateFocusState(true);
-  // }
+  }
+
+  handleTriggerFocus(e) {
+    this.bindKeyBoardEvent();
+
+    this._adapter.updateFocusState(true);
 
+    this._adapter.setIsFocusInContainer(false);
+  }
 
   handleTriggerBlur(e) {
     this._adapter.updateFocusState(false);
@@ -1191,15 +1321,28 @@ export default class SelectFoundation extends BaseFoundation {
     const {
       isOpen,
       isFocus
-    } = this.getStates(); // Under normal circumstances, blur will be accompanied by dropdown close, so the notify of blur can be called uniformly in close
-    // But when autoFocus, because dropdown is not expanded, you need to listen for the trigger's blur and trigger the notify callback
+    } = this.getStates(); // Under normal circumstances, blur will be accompanied by clickOutsideHandler, so the notify of blur can be called uniformly in clickOutsideHandler
+    // But when autoFocus, because clickOutsideHandler is not register, you need to listen for the trigger's blur and trigger the notify callback
 
     if (autoFocus && isFocus && !isOpen) {
-      // blur when autoFocus & not open dropdown yet
       this._notifyBlur(e);
     }
   }
 
+  handleInputBlur(e) {
+    const {
+      filter,
+      autoFocus
+    } = this.getProps();
+
+    const isMultiple = this._isMultiple();
+
+    if (autoFocus && filter && !isMultiple) {
+      // under this condition, when input blur, hide the input
+      this.toggle2SearchInput(false);
+    }
+  }
+
   selectAll() {
     const {
       options

package/lib/es/select/select.css

@@ -93,10 +93,6 @@
   background-color: var(--semi-color-fill-1);
   border: 1px solid transparent;
 }
-.semi-select:active {
-  background-color: var(--semi-color-fill-2);
-  border: 1px solid var(--semi-color-focus-border);
-}
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
@@ -122,6 +118,10 @@
   background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
 }
+.semi-select-open:active, .semi-select-focus:active {
+  background-color: var(--semi-color-fill-2);
+  border: 1px solid var(--semi-color-focus-border);
+}
 .semi-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -162,7 +162,7 @@
   background-color: var(--semi-color-disabled-fill);
 }
 .semi-select-disabled:focus {
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid transparent;
 }
 .semi-select-disabled .semi-select-selection,
 .semi-select-disabled .semi-select-selection-placeholder {

package/lib/es/select/select.scss

@@ -27,11 +27,6 @@ $multiple: #{$module}-multiple;
         border: $width-select-border-hover solid $color-select-border-hover;
     }
 
-    &:active {
-        background-color: $color-select-bg-active;
-        border: $width-select-border-active solid $color-select-border-active;
-    }
-
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
@@ -59,6 +54,12 @@ $multiple: #{$module}-multiple;
             background-color: $color-select-bg-default;
             border: $border-thickness-control-focus solid $color-select_default-border-focus;
         }
+
+        // when click the trigger, trigger get the focus state, active style should take effect
+        &:active {
+            background-color: $color-select-bg-active;
+            border: $width-select-border-active solid $color-select-border-active;
+        }
     }
 
     &-warning {
@@ -111,7 +112,9 @@ $multiple: #{$module}-multiple;
         }
 
         &:focus {
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            // when select is disabled, the border should not have active color
+            border: $border-thickness-control-focus solid transparent;
         }
 
         .#{$module}-selection,

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

@@ -3,12 +3,20 @@ export declare type TagInputChangeEvent = any;
 export declare type TagInputCursorEvent = any;
 export declare type TagInputKeyboardEvent = any;
 export declare type TagInputMouseEvent = any;
+export interface OnSortEndProps {
+    oldIndex: number;
+    newIndex: number;
+}
 export interface TagInputAdapter extends DefaultAdapter {
     setInputValue: (inputValue: string) => void;
     setTagsArray: (tagsArray: string[]) => void;
     setFocusing: (focusing: boolean) => void;
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
+    setActive: (active: boolean) => void;
+    getClickOutsideHandler: () => any;
+    registerClickOutsideHandler: (cb: any) => void;
+    unregisterClickOutsideHandler: () => void;
     notifyBlur: (e: TagInputCursorEvent) => void;
     notifyFocus: (e: TagInputCursorEvent) => void;
     notifyInputChange: (v: string, e: TagInputChangeEvent) => void;
@@ -42,6 +50,8 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     handleTagClose(index: number): void;
     handleInputMouseEnter(): void;
     handleInputMouseLeave(): void;
+    handleClick(e?: any): void;
+    clickOutsideCallBack(): void;
     handleClickPrefixOrSuffix(e: any): void;
     handlePreventMouseDown(e: any): void;
     /**
@@ -56,5 +66,6 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      * handler of input change
      */
     _onInputChange(value: string, e: TagInputChangeEvent): void;
+    handleSortEnd(callbackProps: OnSortEndProps): void;
 }
 export default TagInputFoundation;

package/lib/es/tagInput/foundation.js

@@ -14,6 +14,7 @@ import BaseFoundation from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import getSplitedArray from './utils/getSplitedArray';
 import isEnterPress from '../utils/isEnterPress';
+import arrayMove from '../utils/arrayMove';
 
 class TagInputFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -193,7 +194,10 @@ class TagInputFoundation extends BaseFoundation {
 
     if (inputValue.length > 0) {
       this._onInputChange('', e);
-    }
+    } // Prevent event propagate to TagInput outermost div
+
+
+    e.stopPropagation();
   }
 
   handleTagClose(index) {
@@ -218,6 +222,30 @@ class TagInputFoundation extends BaseFoundation {
     this._adapter.setHovering(false);
   }
 
+  handleClick(e) {
+    const {
+      disabled
+    } = this.getProps();
+
+    if (disabled) {
+      return;
+    }
+
+    const clickOutsideHandler = this._adapter.getClickOutsideHandler();
+
+    if (!clickOutsideHandler) {
+      this._adapter.setActive(true);
+
+      this._adapter.registerClickOutsideHandler(e => this.clickOutsideCallBack());
+    }
+  }
+
+  clickOutsideCallBack() {
+    this._adapter.unregisterClickOutsideHandler();
+
+    this._adapter.setActive(false);
+  }
+
   handleClickPrefixOrSuffix(e) {
     const {
       disabled
@@ -276,6 +304,23 @@ class TagInputFoundation extends BaseFoundation {
     this._adapter.notifyInputChange(value, e);
   }
 
+  handleSortEnd(callbackProps) {
+    const {
+      oldIndex,
+      newIndex
+    } = callbackProps;
+    const {
+      tagsArray
+    } = this.getStates();
+    const newTagsArray = arrayMove(tagsArray, oldIndex, newIndex);
+
+    if (!this._isControlledComponent()) {
+      this._adapter.setTagsArray(newTagsArray);
+    }
+
+    this._adapter.notifyTagChange(newTagsArray);
+  }
+
 }
 
 export default TagInputFoundation;

package/lib/es/tagInput/tagInput.css

@@ -10,6 +10,14 @@
   width: 100%;
   box-sizing: border-box;
 }
+.semi-tagInput-drag-item {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-drag-handler {
+  margin-right: 4px;
+  cursor: move;
+}
 .semi-tagInput-hover {
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
@@ -88,6 +96,9 @@
   margin-top: 3px;
   margin-bottom: 3px;
 }
+.semi-tagInput-wrapper-tag-icon {
+  padding-left: 4px;
+}
 .semi-tagInput-wrapper-typo {
   font-size: 12px;
 }

package/lib/es/tagInput/tagInput.scss

@@ -11,6 +11,19 @@ $module: #{$prefix}-tagInput;
     width: 100%;
     box-sizing: border-box;
     
+    &-drag {
+
+        &-item {
+            display: flex;
+            align-items: center;
+        }
+
+        &-handler {
+            margin-right: $spacing-tagInput_drag_handler-marginRight;
+            cursor: move;
+        }
+    }
+
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
         border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
@@ -104,6 +117,10 @@ $module: #{$prefix}-tagInput;
                     margin-bottom: $spacing-tagInput_large-Y;
                 }
             }
+            
+            &-icon {
+                padding-left: $spacing-tagInput_tag_icon_paddingLeft;
+            }
         }
 
         &-typo {

package/lib/es/tagInput/variables.scss

@@ -32,6 +32,8 @@ $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
 $spacing-tagInput_default-Y: $spacing-super-tight; // 默认尺寸标签输入框标签顶部外边距
 $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
+$spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
+$spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度

package/lib/es/tooltip/foundation.js

@@ -361,11 +361,17 @@ export default class Tooltip extends BaseFoundation {
 
 
         triggerEventSet[eventNames.focus] = () => {
-          this.delayShow();
+          const {
+            disableFocusListener
+          } = this.getProps();
+          !disableFocusListener && this.delayShow();
         };
 
         triggerEventSet[eventNames.blur] = () => {
-          this.delayHide();
+          const {
+            disableFocusListener
+          } = this.getProps();
+          !disableFocusListener && this.delayHide();
         };
 
         portalEventSet = _Object$assign({}, triggerEventSet);
@@ -926,7 +932,8 @@ export default class Tooltip extends BaseFoundation {
 
   _handleTriggerKeydown(event) {
     const {
-      closeOnEsc
+      closeOnEsc,
+      disableArrowKeyDown
     } = this.getProps();
 
     const container = this._adapter.getContainer();
@@ -942,11 +949,12 @@ export default class Tooltip extends BaseFoundation {
         break;
 
       case "ArrowUp":
-        focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
+        // when disableArrowKeyDown is true, disable tooltip's arrow keyboard event action
+        !disableArrowKeyDown && focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
         break;
 
       case "ArrowDown":
-        focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
+        !disableArrowKeyDown && focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
         break;
 
       default:

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

@@ -47,5 +47,4 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
     };
     _notifyChange(selectedItems: DataItemMap): void;
     handleSortEnd(callbackProps: OnSortEndProps): void;
-    _arrayMove(array: Array<BasicDataItem>, from: number, to: number): BasicDataItem[];
 }