@douyinfe/semi-foundation 2.30.0-alpha.0 → 2.30.0

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -7,6 +7,9 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
@@ -15,4 +18,5 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     handleConfirm(e: any): void;
     handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
+    handleFocusOperateButton(): void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
 import isPromise from '../utils/isPromise';
 export default class PopConfirmFoundation extends BaseFoundation {
@@ -51,7 +51,26 @@ export default class PopConfirmFoundation extends BaseFoundation {
       this._adapter.setVisible(visible);
     }
 
+    if (visible) {
+      this.handleFocusOperateButton();
+    } else {
+      this._adapter.focusPrevFocusElement();
+    }
+
     this._adapter.notifyVisibleChange(visible);
   }
 
+  handleFocusOperateButton() {
+    const {
+      cancelButtonProps,
+      okButtonProps
+    } = this._adapter.getProps();
+
+    if (_get(cancelButtonProps, 'autoFocus') && !_get(cancelButtonProps, 'disabled')) {
+      this._adapter.focusCancelButton();
+    } else if (_get(okButtonProps, 'autoFocus') && !_get(okButtonProps, 'disabled')) {
+      this._adapter.focusOkButton();
+    }
+  }
+
 }

package/lib/es/popover/constants.js

@@ -1,8 +1,8 @@
 import { numbers as tooltipNumbers } from '../tooltip/constants';
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-popover"),
-  ARROW: "".concat(BASE_CLASS_PREFIX, "-popover-icon-arrow")
+  PREFIX: `${BASE_CLASS_PREFIX}-popover`,
+  ARROW: `${BASE_CLASS_PREFIX}-popover-icon-arrow`
 };
 const strings = {
   POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],

package/lib/es/progress/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-progress")
+  PREFIX: `${BASE_CLASS_PREFIX}-progress`
 };
 const strings = {
   types: ['line', 'circle'],

package/lib/es/progress/generates.js

@@ -54,10 +54,10 @@ function generateGradients(g, index) {
   } = g;
   const sA = startColor.split('');
   const eA = endColor.split('');
-  const rC = [parseInt("".concat(sA[1]).concat(sA[2]), 16), parseInt("".concat(eA[1]).concat(eA[2]), 16)];
-  const gC = [parseInt("".concat(sA[3]).concat(sA[4]), 16), parseInt("".concat(eA[3]).concat(eA[4]), 16)];
-  const bC = [parseInt("".concat(sA[5]).concat(sA[6]), 16), parseInt("".concat(eA[5]).concat(eA[6]), 16)];
-  const aC = [parseInt("".concat(sA[7]).concat(sA[8]), 16), parseInt("".concat(eA[7]).concat(eA[8]), 16)];
+  const rC = [parseInt(`${sA[1]}${sA[2]}`, 16), parseInt(`${eA[1]}${eA[2]}`, 16)];
+  const gC = [parseInt(`${sA[3]}${sA[4]}`, 16), parseInt(`${eA[3]}${eA[4]}`, 16)];
+  const bC = [parseInt(`${sA[5]}${sA[6]}`, 16), parseInt(`${eA[5]}${eA[6]}`, 16)];
+  const aC = [parseInt(`${sA[7]}${sA[8]}`, 16), parseInt(`${eA[7]}${eA[8]}`, 16)];
   const rStep = (rC[0] - rC[1]) / (size + 1);
   const gStep = (gC[0] - gC[1]) / (size + 1);
   const bStep = (bC[0] - bC[1]) / (size + 1);
@@ -67,14 +67,14 @@ function generateGradients(g, index) {
     const rS = Math.round(rC[0] - rStep * (i + 1)).toString(16);
     const gS = Math.round(gC[0] - gStep * (i + 1)).toString(16);
     const bS = Math.round(bC[0] - bStep * (i + 1)).toString(16);
-    const h = "".concat(padTwo(rS)).concat(padTwo(gS)).concat(padTwo(bS));
+    const h = `${padTwo(rS)}${padTwo(gS)}${padTwo(bS)}`;
     const t = Math.floor(aStep * (i + 1) + aC[1]).toString(16);
-    return toHex.Hex("#".concat(h), t);
+    return toHex.Hex(`#${h}`, t);
   }
 
   function padTwo(s) {
     if (s.length === 1) {
-      return "0".concat(s);
+      return `0${s}`;
     }
 
     if (s.length === 0) {
@@ -122,10 +122,10 @@ function formatToHex(color) {
     }
 
     if (SEMI_DESIGN_TOKENS.SEQUENCE.indexOf(color) !== -1) {
-      return toHex.SemiDesignToken("".concat(color, "-5"));
+      return toHex.SemiDesignToken(`${color}-5`);
     }
 
-    return toHex.SemiDesignToken("".concat(color));
+    return toHex.SemiDesignToken(`${color}`);
   }
 
   return undefined;
@@ -134,14 +134,14 @@ function formatToHex(color) {
 const toHex = {
   Hex(color, transparency) {
     color = color.replace('#', '');
-    if (color.length === 8) return "#".concat(color);
-    if (color.length === 6) return "#".concat(color).concat(transparency || 'ff');
+    if (color.length === 8) return `#${color}`;
+    if (color.length === 6) return `#${color}${transparency || 'ff'}`;
 
     if (color.length === 3) {
       color = color.split('').map(c => c + c).join('');
     }
 
-    return "#".concat(color).concat(transparency || 'ff');
+    return `#${color}${transparency || 'ff'}`;
   },
 
   SemiDesignToken(color) {
@@ -150,9 +150,9 @@ const toHex = {
       return undefined;
     }
 
-    const variable = getComputedStyle(document.body).getPropertyValue("--semi-".concat(color));
+    const variable = getComputedStyle(document.body).getPropertyValue(`--semi-${color}`);
     if (variable === '') return undefined;
-    const rgba = "rgba(".concat(variable, ", 1)");
+    const rgba = `rgba(${variable}, 1)`;
     return toHex.RgbA(rgba);
   },
 

package/lib/es/radio/constants.js

@@ -1,20 +1,20 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const radioClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-radio"),
-  INNER: "".concat(BASE_CLASS_PREFIX, "-radio-inner"),
-  TEXT: "".concat(BASE_CLASS_PREFIX, "-radio-text"),
-  INPUT: "".concat(BASE_CLASS_PREFIX, "-radio-input"),
-  CHECKED: "".concat(BASE_CLASS_PREFIX, "-radio-checked"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-radio-disabled"),
-  BUTTON: "".concat(BASE_CLASS_PREFIX, "-radio-button")
+  PREFIX: `${BASE_CLASS_PREFIX}-radio`,
+  INNER: `${BASE_CLASS_PREFIX}-radio-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radio-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radio-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radio-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radio-disabled`,
+  BUTTON: `${BASE_CLASS_PREFIX}-radio-button`
 };
 const radioGroupClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-radioGroup"),
-  INNER: "".concat(BASE_CLASS_PREFIX, "-radioGroup-inner"),
-  TEXT: "".concat(BASE_CLASS_PREFIX, "-radioGroup-text"),
-  INPUT: "".concat(BASE_CLASS_PREFIX, "-radioGroup-input"),
-  CHECKED: "".concat(BASE_CLASS_PREFIX, "-radioGroup-checked"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-radioGroup-disabled")
+  PREFIX: `${BASE_CLASS_PREFIX}-radioGroup`,
+  INNER: `${BASE_CLASS_PREFIX}-radioGroup-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radioGroup-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radioGroup-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radioGroup-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radioGroup-disabled`
 };
 const strings = {
   DIRECTION_SET: ['horizontal', 'vertical'],

package/lib/es/rating/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-rating")
+  PREFIX: `${BASE_CLASS_PREFIX}-rating`
 };
 const strings = {
   SIZE_SET: ['default', 'small']

package/lib/es/scrollList/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-scrolllist"),
-  SELECTED: "".concat(BASE_CLASS_PREFIX, "-scrolllist-item-selected")
+  PREFIX: `${BASE_CLASS_PREFIX}-scrolllist`,
+  SELECTED: `${BASE_CLASS_PREFIX}-scrolllist-item-selected`
 };
 const strings = {
   MODE: ['normal', 'wheel']

package/lib/es/select/constants.js

@@ -1,9 +1,9 @@
 import { VALIDATE_STATUS, BASE_CLASS_PREFIX } from '../base/constants';
 import { strings as tooltipStrings } from '../tooltip/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-select"),
-  PREFIX_OPTION: "".concat(BASE_CLASS_PREFIX, "-select-option"),
-  PREFIX_GROUP: "".concat(BASE_CLASS_PREFIX, "-select-group")
+  PREFIX: `${BASE_CLASS_PREFIX}-select`,
+  PREFIX_OPTION: `${BASE_CLASS_PREFIX}-select-option`,
+  PREFIX_GROUP: `${BASE_CLASS_PREFIX}-select-group`
 };
 const strings = {
   SIZE_SET: ['small', 'large', 'default'],

package/lib/es/select/foundation.js

@@ -1345,7 +1345,8 @@ export default class SelectFoundation extends BaseFoundation {
     const isMultiple = this._isMultiple();
 
     if (!isMultiple) {
-      console.warn("[Semi Select]: It seems that you have called the selectAll method in the single-selection Select.\n                Please note that this is not a legal way to use it");
+      console.warn(`[Semi Select]: It seems that you have called the selectAll method in the single-selection Select.
+                Please note that this is not a legal way to use it`);
       return;
     }
 

package/lib/es/select/select.css

@@ -92,6 +92,7 @@
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
   outline: 0;
 }
 .semi-select-small {

package/lib/es/select/select.scss

@@ -36,6 +36,7 @@ $overflowList: #{$prefix}-overflow-list;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 

package/lib/es/select/variables.scss

@@ -2,6 +2,7 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色 - 聚焦态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态

package/lib/es/sideSheet/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-sidesheet"),
-  DIALOG: "".concat(BASE_CLASS_PREFIX, "-modal")
+  PREFIX: `${BASE_CLASS_PREFIX}-sidesheet`,
+  DIALOG: `${BASE_CLASS_PREFIX}-modal`
 };
 const strings = {
   PLACEMENT: ['top', 'right', 'bottom', 'left'],

package/lib/es/skeleton/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-skeleton")
+  PREFIX: `${BASE_CLASS_PREFIX}-skeleton`
 };
 const strings = {};
 export { cssClasses, strings };

package/lib/es/slider/constants.js

@@ -1,12 +1,12 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-slider"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-slider-disabled"),
-  VERTICAL: "".concat(BASE_CLASS_PREFIX, "-slider-vertical"),
-  TRACK: "".concat(BASE_CLASS_PREFIX, "-slider-track"),
-  DOTS: "".concat(BASE_CLASS_PREFIX, "-slider-dots"),
-  MARKS: "".concat(BASE_CLASS_PREFIX, "-slider-marks"),
-  HANDLE: "".concat(BASE_CLASS_PREFIX, "-slider-handle")
+  PREFIX: `${BASE_CLASS_PREFIX}-slider`,
+  DISABLED: `${BASE_CLASS_PREFIX}-slider-disabled`,
+  VERTICAL: `${BASE_CLASS_PREFIX}-slider-vertical`,
+  TRACK: `${BASE_CLASS_PREFIX}-slider-track`,
+  DOTS: `${BASE_CLASS_PREFIX}-slider-dots`,
+  MARKS: `${BASE_CLASS_PREFIX}-slider-marks`,
+  HANDLE: `${BASE_CLASS_PREFIX}-slider-handle`
 };
 const strings = {
   SIZE: ['small', 'large', 'default'],

package/lib/es/space/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-space")
+  PREFIX: `${BASE_CLASS_PREFIX}-space`
 };
 const strings = {
   ALIGN_SET: ['start', 'end', 'center', 'baseline'],

package/lib/es/spin/constants.js

@@ -1,5 +1,5 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
-const PREFIX = "".concat(BASE_CLASS_PREFIX, "-spin");
+const PREFIX = `${BASE_CLASS_PREFIX}-spin`;
 const cssClasses = {
   PREFIX
 };