@douyinfe/semi-foundation 2.15.0 → 2.16.0-beta.0

package/lib/es/slider/foundation.js

@@ -1,5 +1,6 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
 /* eslint-disable no-param-reassign */
 
@@ -8,6 +9,8 @@ import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array
 /* eslint-disable no-nested-ternary */
 import BaseFoundation from '../base/foundation';
 import touchEventPolyfill from '../utils/touchPolyfill';
+import warning from '../utils/warning';
+import { handlePrevent } from '../utils/a11y';
 export default class SliderFoundation extends BaseFoundation {
   constructor(adapter) {
     var _this;
@@ -532,8 +535,7 @@ export default class SliderFoundation extends BaseFoundation {
       const handleMaxDom = this._adapter.getMaxHandleEl().current;
 
       if (e.target === handleMinDom || e.target === handleMaxDom) {
-        e.preventDefault();
-        e.stopPropagation();
+        handlePrevent(e);
         const touch = touchEventPolyfill(e.touches[0], e);
         this.onHandleDown(touch, handler);
       }
@@ -597,18 +599,203 @@ export default class SliderFoundation extends BaseFoundation {
         this._adapter.setDragging([dragging[0], false]);
       }
 
-      this._adapter.setStateVal('isDrag', false); // this._adapter.setStateVal('chooseMovePos', '');
-
+      this._adapter.setStateVal('isDrag', false);
 
       this._adapter.onHandleLeave();
 
       this._adapter.onHandleUpAfter();
 
       return true;
+    };
+
+    this._handleValueDecreaseWithKeyBoard = (step, handler) => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] - step;
+        newMaxValue = newMaxValue < currentValue[0] ? currentValue[0] : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleValueIncreaseWithKeyBoard = (step, handler) => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] + step;
+          newMinValue = newMinValue > currentValue[1] ? currentValue[1] : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue + step;
+          newMinValue = newMinValue > max ? max : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] + step;
+        newMaxValue = newMaxValue > max ? max : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleHomeKey = handler => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [min, currentValue[1]];
+        } else {
+          return min;
+        }
+      } else {
+        return [currentValue[0], currentValue[0]];
+      }
+    };
+
+    this._handleEndKey = handler => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [currentValue[1], currentValue[1]];
+        } else {
+          return max;
+        }
+      } else {
+        return [currentValue[0], max];
+      }
+    };
+
+    this.handleKeyDown = (event, handler) => {
+      var _context;
+
+      const {
+        min,
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        step,
+        range
+      } = this.getProps();
+      let outputValue;
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+          break;
+
+        case "ArrowRight":
+        case "ArrowUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+          break;
+
+        case "PageUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "PageDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "Home":
+          outputValue = this._handleHomeKey(handler);
+          break;
+
+        case "End":
+          outputValue = this._handleEndKey(handler);
+          break;
+
+        case 'default':
+          break;
+      }
+
+      if (_includesInstanceProperty(_context = ["ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp", "PageUp", "PageDown", "Home", "End"]).call(_context, event.key)) {
+        let update = true;
+
+        if (_Array$isArray(currentValue)) {
+          update = !(currentValue[0] === outputValue[0] && currentValue[1] === outputValue[1]);
+        } else {
+          update = currentValue !== outputValue;
+        }
+
+        if (update) {
+          this._adapter.updateCurrentValue(outputValue);
+
+          this._adapter.notifyChange(outputValue);
+        }
+
+        handlePrevent(event);
+      }
     }; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    this.onFocus = (e, handler) => {};
+    this.onFocus = (e, handler) => {
+      handlePrevent(e);
+      const {
+        target
+      } = e;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          if (handler === 'min') {
+            this._adapter.setStateVal('firstDotFocusVisible', true);
+          } else {
+            this._adapter.setStateVal('secondDotFocusVisible', true);
+          }
+        }
+      } catch (error) {
+        warning(true, 'Warning: [Semi Slider] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.onBlur = (e, handler) => {
+      const {
+        firstDotFocusVisible,
+        secondDotFocusVisible
+      } = this.getStates();
+
+      if (handler === 'min') {
+        firstDotFocusVisible && this._adapter.setStateVal('firstDotFocusVisible', false);
+      } else {
+        secondDotFocusVisible && this._adapter.setStateVal('secondDotFocusVisible', false);
+      }
+    };
 
     this.handleWrapClick = e => {
       const {

package/lib/es/slider/slider.css

@@ -46,6 +46,9 @@
   cursor: pointer;
   transition: #fff 0.3s;
 }
+.semi-slider-handle:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }

package/lib/es/slider/slider.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-slider;
 
@@ -29,7 +29,7 @@ $module: #{$prefix}-slider;
         font-variant: tabular-nums;
         line-height: $font-slider_rail-lineHeight;
         list-style: none;
-        font-feature-settings: "tnum";
+        font-feature-settings: 'tnum';
         position: absolute;
         height: $height-slider_rail;
         cursor: pointer;
@@ -54,7 +54,11 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff .3s;
+        transition: #fff 0.3s;
+
+        &:focus-visible {
+            outline: $width-slider_handle-focus solid $color-slider_handle-focus;
+        }
     }
 
     &-handle:hover {
@@ -133,10 +137,8 @@ $module: #{$prefix}-slider;
         text-align: center;
         cursor: pointer;
         transform: translate(-50%, 0) rotate(-180deg);
-
     }
 
-
     &-boundary {
         position: relative;
         font-size: $font-size-small;

package/lib/es/slider/variables.scss

@@ -11,9 +11,10 @@ $color-slider_handle_disabled-border-hover: var(--semi-color-white); // 禁用
 $color-slider_handle_disabled-border: var(--semi-color-border); // 禁用滑动条圆形描边颜色 - 默认态
 $color-slider_mark-text-default: var(--semi-color-text-2); // 滑动条刻度文字颜色
 $color-slider_rail-bg-default: var(--semi-color-fill-0); // 滑动条轨道颜色 - 未填充
-$color-slider_rail: rgba(0, 0, 0, .65);
+$color-slider_rail: rgba(0, 0, 0, 0.65);
 $color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
 $color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
+$color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按钮轮廓 - 聚焦
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
@@ -33,7 +34,7 @@ $spacing-slider_boundary_min-left: 0;
 $spacing-slider_boundary_max-right: 0;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
-$spacing-slider_vertical_marks-reverse-marginLeft: -26px;// 垂直滑动条刻度标签左侧外边距（标签在左侧时）
+$spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
 $spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
 $spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
@@ -42,7 +43,6 @@ $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角
 $radius-slider_track: var(--semi-border-radius-small); // 滚动条已填充轨道圆角
 
-
 // Width/Height
 $height-slider_wrapper: 32px; // 滚动条容器整体高度
 $height-slider_vertical_wrapper: 4px; // 垂直滚动条整体宽度
@@ -52,7 +52,7 @@ $width-slider_handle_clicked: 1px; // 滚动条圆形按钮按下后描边宽度
 $height-slider_track: 4px; // 滚动条已填充轨道高度
 $width-slider_dot: 4px; // 滚动条圆形刻度点宽度
 $width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
-
+$width-slider_handle-focus: 2px; // 圆形按钮轮廓 - 聚焦
 
 // Font
 $font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号

package/lib/es/tooltip/variables.scss

@@ -19,7 +19,7 @@ $spacing-tooltip_content-paddingBottom: $spacing-tight; // 工具提示内容底
 
 $font-tooltip-fontSize: $font-size-regular; // 工具提示文本字号
 $width-tooltip: 240px; // 工具提示宽度 - 默认
-$width-tooltip_arrow: 24px; // 工具提示小三角箭头宽度 - 水平
+$width-tooltip_arrow: 24px; // 工具提示小三角箭头宽度 - 水平 ignore-semi-css-trans
 $height-tooltip_arrow: 7px; // 工具提示小三角箭头高度 - 水平
 
 $height-tooltip_arrow_vertical: 24px; // 工具提示小三角箭头高度 - 垂直

package/lib/es/treeSelect/treeSelect.css

@@ -188,6 +188,7 @@
 .semi-tree-select-arrow {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   height: 100%;
   justify-content: center;
   width: 32px;
@@ -212,6 +213,7 @@
   display: inline-flex;
   align-items: center;
   height: 100%;
+  flex-shrink: 0;
   justify-content: center;
   width: 32px;
   color: var(--semi-color-text-2);

package/lib/es/treeSelect/treeSelect.scss

@@ -239,6 +239,7 @@ $module: #{$prefix}-tree-select;
         // right: 0;
         display: inline-flex;
         align-items: center;
+        flex-shrink: 0;
         height: 100%;
         justify-content: center;
         width: $width-treeSelect_arrow;
@@ -265,6 +266,7 @@ $module: #{$prefix}-tree-select;
         display: inline-flex;
         align-items: center;
         height: 100%;
+        flex-shrink: 0;
         justify-content: center;
         width: $width-treeSelect_arrow;
         color: $color-treeSelect_default-icon-default;

package/lib/es/typography/typography.css

@@ -7,6 +7,12 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.semi-typography-text {
+  display: inline-block;
+}
+.semi-typography-text-icon {
+  display: inline-flex;
+}
 .semi-typography.semi-typography-secondary {
   color: var(--semi-color-text-1);
 }
@@ -38,6 +44,7 @@
   color: var(--semi-color-link);
 }
 .semi-typography-icon {
+  display: inline-flex;
   margin-right: 4px;
   vertical-align: middle;
   color: inherit;

package/lib/es/typography/typography.scss

@@ -6,6 +6,14 @@ $module: #{$prefix}-typography;
     color: $color-typography_default-text-default;
     @include font-size-regular;
 
+    &-text {
+        display: inline-block;
+
+        &-icon {
+            display: inline-flex;
+        }
+    }
+
     &.#{$module}-secondary {
         color: $color-typography_secondary-text-default;
     }
@@ -45,7 +53,7 @@ $module: #{$prefix}-typography;
     }
 
     &-icon {
-        // display: inline-flex;
+        display: inline-flex;
         margin-right: $spacing-typography_iconPrefix-marginRight;
         vertical-align: middle;
         color: inherit;

package/lib/es/utils/a11y.js

@@ -90,11 +90,11 @@ export function getAncestorNodeByRole(curElement, role) {
   }
 
   return curElement.parentElement;
-} // According to the Id, find the corresponding data-popupId element
+} // According to the Id, find the corresponding data-popupid element
 
 export function getMenuButton(focusableEle, Id) {
   for (let i = 0; i < focusableEle.length; i++) {
-    const curAriDescribedby = focusableEle[i].attributes['data-popupId'];
+    const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
 
     if (curAriDescribedby && curAriDescribedby.value === Id) {
       return focusableEle[i];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.15.0",
+    "version": "2.16.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
+    "gitHead": "e2cb837fd9d77bd14f32f8bee74c16bcdf0d9196",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/slider/foundation.ts

@@ -3,7 +3,8 @@
 /* eslint-disable no-nested-ternary */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import touchEventPolyfill from '../utils/touchPolyfill';
-
+import warning from '../utils/warning';
+import { handlePrevent } from '../utils/a11y';
 
 export interface Marks{
     [key: number]: string;
@@ -34,7 +35,7 @@ export interface SliderProps{
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
-    getAriaValueText?: (value: number) => string;
+    getAriaValueText?: (value: number, index?: number) => string;
 }
 
 export interface SliderState {
@@ -49,6 +50,8 @@ export interface SliderState {
     clickValue: 0;
     showBoundary: boolean;
     isInRenderTree: boolean;
+    firstDotFocusVisible: boolean;
+    secondDotFocusVisible: boolean;
 }
 
 export interface SliderLengths{
@@ -65,7 +68,6 @@ export interface ScrollParentVal{
 
 export interface OverallVars{
     dragging: boolean[];
-    chooseMovePos: 'min' | 'max';
 }
 
 export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
@@ -514,8 +516,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         const handleMinDom = this._adapter.getMinHandleEl().current;
         const handleMaxDom = this._adapter.getMaxHandleEl().current;
         if (e.target === handleMinDom || e.target === handleMaxDom) {
-            e.preventDefault();
-            e.stopPropagation();
+            handlePrevent(e);
             const touch = touchEventPolyfill(e.touches[0], e);
             this.onHandleDown(touch, handler);
         }
@@ -564,14 +565,147 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
             this._adapter.setDragging([dragging[0], false]);
         }
         this._adapter.setStateVal('isDrag', false);
-        // this._adapter.setStateVal('chooseMovePos', '');
         this._adapter.onHandleLeave();
         this._adapter.onHandleUpAfter();
         return true;
     };
 
+    _handleValueDecreaseWithKeyBoard = (step: number, handler: 'min'| 'max') => {
+        const { min, currentValue } = this.getStates();
+        const { range } = this.getProps();
+        if (handler === 'min') {
+            if (range) {
+                let newMinValue = currentValue[0] - step;
+                newMinValue = newMinValue < min ? min : newMinValue;
+                return [newMinValue, currentValue[1]];
+            } else {
+                let newMinValue = currentValue - step;
+                newMinValue = newMinValue < min ? min : newMinValue;
+                return newMinValue;
+            }
+        } else {
+            let newMaxValue = currentValue[1] - step;
+            newMaxValue = newMaxValue < currentValue[0] ? currentValue[0] : newMaxValue;
+            return [currentValue[0], newMaxValue];
+        }
+    }
+
+    _handleValueIncreaseWithKeyBoard = (step: number, handler: 'min'| 'max') => {
+        const { max, currentValue } = this.getStates();
+        const { range } = this.getProps();
+        if (handler === 'min') {
+            if (range) {
+                let newMinValue = currentValue[0] + step;
+                newMinValue = newMinValue > currentValue[1] ? currentValue[1] : newMinValue;
+                return [newMinValue, currentValue[1]];
+            } else {
+                let newMinValue = currentValue + step;
+                newMinValue = newMinValue > max ? max : newMinValue;
+                return newMinValue;
+            }
+        } else {
+            let newMaxValue = currentValue[1] + step;
+            newMaxValue = newMaxValue > max ? max : newMaxValue;
+            return [currentValue[0], newMaxValue];
+        }
+    }
+
+    _handleHomeKey = (handler: 'min'| 'max') => {
+        const { min, currentValue } = this.getStates();
+        const { range } = this.getProps();
+        if (handler === 'min') {
+            if (range) {
+                return [min, currentValue[1]];
+            } else {
+                return min;
+            }
+        } else {
+            return [currentValue[0], currentValue[0]];
+        }
+    }
+
+    _handleEndKey = (handler: 'min'| 'max') => {
+        const { max, currentValue } = this.getStates();
+        const { range } = this.getProps();
+        if (handler === 'min') {
+            if (range) {
+                return [currentValue[1], currentValue[1]];
+            } else {
+                return max;
+            }
+        } else {
+            return [currentValue[0], max];
+        }
+    }
+
+    handleKeyDown = (event: any, handler: 'min'| 'max') => {
+        const { min, max, currentValue } = this.getStates();
+        const { step, range } = this.getProps();
+        let outputValue;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+                break;
+            case "PageUp":
+                outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+                break;
+            case "PageDown":
+                outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+                break;
+            case "Home":
+                outputValue = this._handleHomeKey(handler);
+                break;
+            case "End":
+                outputValue = this._handleEndKey(handler);
+                break;
+            case 'default':
+                break;
+        }
+        if (["ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp", "PageUp", "PageDown", "Home", "End"].includes(event.key)) {
+            let update = true;
+            if (Array.isArray(currentValue)) {
+                update = !(currentValue[0] === outputValue[0] && currentValue[1] === outputValue[1]);
+            } else {
+                update = currentValue !== outputValue;
+            }
+            if (update) {
+                this._adapter.updateCurrentValue(outputValue);
+                this._adapter.notifyChange(outputValue);
+            }
+            handlePrevent(event);
+        }
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onFocus = (e:any, handler: 'min'| 'max') => {}
+    onFocus = (e: any, handler: 'min'| 'max') => {
+        handlePrevent(e);
+        const { target } = e;
+        try {
+            if (target.matches(':focus-visible')) {
+                if (handler === 'min') {
+                    this._adapter.setStateVal('firstDotFocusVisible', true);
+                } else {
+                    this._adapter.setStateVal('secondDotFocusVisible', true);
+                }
+            }
+        } catch (error) {
+            warning(true, 'Warning: [Semi Slider] The current browser does not support the focus-visible'); 
+        }
+    }
+
+    onBlur = (e: any, handler: 'min'| 'max') => {
+        const { firstDotFocusVisible, secondDotFocusVisible } = this.getStates();
+        if (handler === 'min') {
+            firstDotFocusVisible && this._adapter.setStateVal('firstDotFocusVisible', false);
+        } else {
+            secondDotFocusVisible && this._adapter.setStateVal('secondDotFocusVisible', false);
+        }
+    }
 
     handleWrapClick = (e: any) => {
         const { disabled, isDrag } = this._adapter.getStates();
@@ -648,6 +782,4 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         return vertical ? y : x;
     }
 
-
-
 }

package/slider/slider.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-slider;
 
@@ -29,7 +29,7 @@ $module: #{$prefix}-slider;
         font-variant: tabular-nums;
         line-height: $font-slider_rail-lineHeight;
         list-style: none;
-        font-feature-settings: "tnum";
+        font-feature-settings: 'tnum';
         position: absolute;
         height: $height-slider_rail;
         cursor: pointer;
@@ -54,7 +54,11 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff .3s;
+        transition: #fff 0.3s;
+
+        &:focus-visible {
+            outline: $width-slider_handle-focus solid $color-slider_handle-focus;
+        }
     }
 
     &-handle:hover {
@@ -133,10 +137,8 @@ $module: #{$prefix}-slider;
         text-align: center;
         cursor: pointer;
         transform: translate(-50%, 0) rotate(-180deg);
-
     }
 
-
     &-boundary {
         position: relative;
         font-size: $font-size-small;