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

package/lib/cjs/select/foundation.js

@@ -58,6 +58,8 @@ var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefi
 
 var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
 
+var _a11y = require("../utils/a11y");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -107,14 +109,22 @@ class SelectFoundation extends _foundation.default {
   }
 
   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();
     }
   }
 
@@ -124,9 +134,8 @@ class SelectFoundation extends _foundation.default {
   }
 
   destroy() {
-    this._adapter.unregisterClickOutsideHandler();
+    this._adapter.unregisterClickOutsideHandler(); // this.unBindKeyBoardEvent();
 
-    this.unBindKeyBoardEvent();
   }
 
   _setDropdownWidth() {
@@ -445,6 +454,10 @@ class SelectFoundation extends _foundation.default {
 
     this._adapter.registerClickOutsideHandler(e => {
       this.close(e);
+
+      this._notifyBlur(e);
+
+      this._adapter.updateFocusState(false);
     });
   }
 
@@ -452,15 +465,17 @@ class SelectFoundation extends _foundation.default {
     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);
     }
@@ -469,13 +484,12 @@ class SelectFoundation extends _foundation.default {
 
     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) {
@@ -494,6 +508,8 @@ class SelectFoundation extends _foundation.default {
 
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
+
+      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }
@@ -717,6 +733,8 @@ class SelectFoundation extends _foundation.default {
     this._adapter.focusInput();
 
     this._adapter.updateFocusState(true);
+
+    this._adapter.setIsFocusInContainer(false);
   }
 
   handleInputChange(sugInput) {
@@ -852,14 +870,17 @@ class SelectFoundation extends _foundation.default {
 
   _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;
     }
 
@@ -890,16 +911,38 @@ class SelectFoundation extends _foundation.default {
       case _keyCode.default.ENTER:
         // internal-issues:302
         // prevent trigger form’s submit when use in form
-        event.preventDefault();
-        event.stopPropagation();
+        (0, _a11y.handlePrevent)(event);
 
         this._handleEnterKeyDown(event);
 
         break;
 
       case _keyCode.default.ESC:
+        isOpen && this.close(event);
+        filter && !multiple && this._focusTrigger();
+        break;
+
       case _keyCode.default.TAB:
-        this.close(event);
+        // 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.default.TAB:
+        isOpen && this._handleTabKeyDown(event);
         break;
 
       default:
@@ -967,7 +1010,84 @@ class SelectFoundation extends _foundation.default {
   }
 
   _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);
+
+      (0, _a11y.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();
+      (0, _a11y.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);
+
+      (0, _a11y.handlePrevent)(event);
+    }
   }
 
   _handleEnterKeyDown(event) {
@@ -977,26 +1097,32 @@ class SelectFoundation extends _foundation.default {
       focusIndex
     } = this.getStates();
 
-    if (focusIndex !== -1) {
-      const visibleOptions = (0, _filter.default)(options).call(options, item => item._show);
-      const {
-        length
-      } = visibleOptions; // fix issue 1201
-
-      if (length <= focusIndex) {
-        return;
-      }
-
-      if (visibleOptions && length) {
-        const selectedOption = visibleOptions[focusIndex];
+    if (!isOpen) {
+      this.open();
+    } else {
+      if (focusIndex !== -1) {
+        const visibleOptions = (0, _filter.default)(options).call(options, item => item._show);
+        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() {
@@ -1139,15 +1265,16 @@ class SelectFoundation extends _foundation.default {
       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) {
@@ -1200,11 +1327,15 @@ class SelectFoundation extends _foundation.default {
 
   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);
@@ -1216,15 +1347,28 @@ class SelectFoundation extends _foundation.default {
     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/cjs/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/cjs/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/cjs/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/cjs/tagInput/foundation.js

@@ -42,6 +42,8 @@ var _getSplitedArray = _interopRequireDefault(require("./utils/getSplitedArray")
 
 var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
 
+var _arrayMove = _interopRequireDefault(require("../utils/arrayMove"));
+
 class TagInputFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -218,7 +220,10 @@ class TagInputFoundation extends _foundation.default {
 
     if (inputValue.length > 0) {
       this._onInputChange('', e);
-    }
+    } // Prevent event propagate to TagInput outermost div
+
+
+    e.stopPropagation();
   }
 
   handleTagClose(index) {
@@ -241,6 +246,30 @@ class TagInputFoundation extends _foundation.default {
     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
@@ -299,6 +328,23 @@ class TagInputFoundation extends _foundation.default {
     this._adapter.notifyInputChange(value, e);
   }
 
+  handleSortEnd(callbackProps) {
+    const {
+      oldIndex,
+      newIndex
+    } = callbackProps;
+    const {
+      tagsArray
+    } = this.getStates();
+    const newTagsArray = (0, _arrayMove.default)(tagsArray, oldIndex, newIndex);
+
+    if (!this._isControlledComponent()) {
+      this._adapter.setTagsArray(newTagsArray);
+    }
+
+    this._adapter.notifyTagChange(newTagsArray);
+  }
+
 }
 
 var _default = TagInputFoundation;

package/lib/cjs/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/cjs/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/cjs/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/cjs/tooltip/foundation.js

@@ -384,11 +384,17 @@ class Tooltip extends _foundation.default {
 
 
         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 = (0, _assign.default)({}, triggerEventSet);
@@ -943,7 +949,8 @@ class Tooltip extends _foundation.default {
 
   _handleTriggerKeydown(event) {
     const {
-      closeOnEsc
+      closeOnEsc,
+      disableArrowKeyDown
     } = this.getProps();
 
     const container = this._adapter.getContainer();
@@ -959,11 +966,12 @@ class Tooltip extends _foundation.default {
         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/cjs/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[];
 }