@douyinfe/semi-foundation 2.9.1 → 2.10.0

package/switch/foundation.ts

@@ -3,6 +3,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface SwitchAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setNativeControlChecked: (nativeControlChecked: boolean | undefined) => void;
     setNativeControlDisabled: (nativeControlDisabled: boolean | undefined) => void;
+    setFocusVisible: (focusVisible: boolean) => void;
     notifyChange: (checked: boolean, e: any) => void;
 }
 
@@ -37,6 +38,21 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
         }
     }
 
+    handleFocusVisible = (event: any) => {
+        const { target } = event;
+        try {
+            if (target.matches(':focus-visible')) {
+                this._adapter.setFocusVisible(true);
+            }
+        } catch (error){
+            console.warn('The current browser does not support the focus-visible');
+        }
+    }
+
+    handleBlur = () => {
+        this._adapter.setFocusVisible(false);
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy(): void {}
 }

package/switch/switch.scss

@@ -28,6 +28,10 @@ $module: #{$prefix}-switch;
         }
     }
 
+    &-focus {
+        outline: $width-switch-outline solid $color-switch_primary-outline-focus;
+    }
+
     &-checked {
         background-color: $color-switch_checked-bg-default;
 

package/switch/variables.scss

@@ -37,6 +37,7 @@ $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开
 $color-switch_loading_spin-default: var(--semi-color-white); // 加载态开关loading图标颜色
 $color-switch_spin_checked-bg-default: var(--semi-color-success-hover); // 已开启开关加载态loading背景颜色
 $color-switch_spin_unchecked-bg-default: var(--semi-color-fill-1); // 已关闭开关加载态loading背景颜色
+$color-switch_primary-outline-focus: var(--semi-color-primary-light-active); // 开关轮廓 - 聚焦
 
 // Width/Height
 $width-switch: 40px; // 开关宽度
@@ -57,6 +58,7 @@ $width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
 $width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度
 $width-switch_spin-default: 18px; // 默认尺寸开关加载 spin 宽度
 $width-switch_spin-large: 28px; // 大尺寸开关加载 spin 宽度
+$width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing

package/tabs/foundation.ts

@@ -30,8 +30,8 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     }
 
     handleTabClick(activeKey: string, event: any): void {
-        const isControledComponent = this._isInProps('activeKey');
-        if (isControledComponent) {
+        const isControlledComponent = this._isInProps('activeKey');
+        if (isControlledComponent) {
             this._notifyChange(activeKey);
         } else {
             this._notifyChange(activeKey);

package/timePicker/ComboxFoundation.ts

@@ -89,7 +89,7 @@ class ComboboxFoundation extends BaseFoundation<DefaultAdapter> {
         if (this._isInProps('format')) {
             return this.getProp('format');
         } else if (this.getProp('use12Hours')) {
-            return strings.DEFAULT_FROMAT_A;
+            return strings.DEFAULT_FORMAT_A;
         } else {
             return strings.DEFAULT_FORMAT;
         }

package/timePicker/constants.ts

@@ -21,7 +21,7 @@ const strings = {
     DEFAULT_MULTIPLE_SEPARATOR,
     SIZE: inputStrings.SIZE,
     DEFAULT_FORMAT: 'HH:mm:ss',
-    DEFAULT_FROMAT_A: 'a h:mm:ss',
+    DEFAULT_FORMAT_A: 'a h:mm:ss',
     STATUS: VALIDATE_STATUS,
     DEFAULT_POSITION: {
         [TYPE_TIME_PICKER]: 'bottomLeft',

package/timePicker/foundation.ts

@@ -94,7 +94,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         if (this._isInProps('format')) {
             return this.getProp('format');
         } else if (this.getProp('use12Hours')) {
-            return strings.DEFAULT_FROMAT_A;
+            return strings.DEFAULT_FORMAT_A;
         } else {
             return strings.DEFAULT_FORMAT;
         }

package/transfer/foundation.ts

@@ -2,7 +2,7 @@ import { omit } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BasicValue as BasicTreeValue } from '../tree/foundation';
 import { strings } from './constants';
-import { _generateGroupedData, _generateTreeData } from './transferUtlls';
+import { _generateGroupedData, _generateTreeData } from './transferUtils';
 
 export interface BasicDataItem {
     [x: string]: any;

package/tree/foundation.ts

@@ -544,7 +544,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     /*
     * Compute the checked state of the node
     */
-    calcChekcedStatus(targetStatus: boolean, eventKey: string) {
+    calcCheckedStatus(targetStatus: boolean, eventKey: string) {
         // From checked to unchecked, you can change it directly
         if (!targetStatus) {
             return targetStatus;
@@ -566,7 +566,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     /*
     * In strict disable mode, calculate the nodes of checked and halfCheckedKeys and return their corresponding keys
     */
-    calcNonDisabedCheckedKeys(eventKey: string, targetStatus: boolean) {
+    calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean) {
         const { keyEntities, disabledKeys } = this.getStates();
         const { checkedKeys } = this.getCopyFromState(['checkedKeys']);
         const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
@@ -592,9 +592,9 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         const { checked, eventKey, data } = treeNode;
         if (checkRelation === 'related') {
             // Find the checked state of the current node
-            const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+            const targetStatus = disableStrictly ? this.calcCheckedStatus(!checked, eventKey) : !checked;
             const { checkedKeys, halfCheckedKeys } = disableStrictly ?
-                this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
+                this.calcNonDisabledCheckedKeys(eventKey, targetStatus) :
                 this.calcCheckedKeys(eventKey, targetStatus);
             this._adapter.notifySelect(eventKey, targetStatus, data);
             this.notifyChange([...checkedKeys], e);

package/tree/treeUtil.ts

@@ -87,11 +87,11 @@ export function convertJsonToData(treeJson: TreeDataSimpleJson) {
             value: children,
         };
         if (isObject(children)) {
-            const childres: any[] = [];
+            const newChildren: any[] = [];
             Object.entries(children).forEach(c => {
-                traverseNode(c[0], c[1], currPath, childres);
+                traverseNode(c[0], c[1], currPath, newChildren);
             });
-            newNode.children = childres;
+            newNode.children = newChildren;
         }
         res.push(newNode);
     };
@@ -327,8 +327,8 @@ export function calcCheckedKeys(values: any, keyEntities: KeyEntities) {
         visited = [...visited, ...siblingKeys];
         const allChecked = siblingKeys.every((siblingKey: string) => checkedKeys.has(siblingKey));
         if (!allChecked) {
-            const ancesterKeys = findAncestorKeys([key], keyEntities, false);
-            halfCheckedKeys = new Set([...halfCheckedKeys, ...ancesterKeys]);
+            const ancestorKeys = findAncestorKeys([key], keyEntities, false);
+            halfCheckedKeys = new Set([...halfCheckedKeys, ...ancestorKeys]);
         } else {
             checkedKeys.add(parent.key);
             // IMPORTANT! parent level may not exist in original level map; if add to the end directly may destroy the hierarchical order
@@ -358,8 +358,8 @@ export function calcExpandedKeys(keyList: any[] = [], keyEntities: KeyEntities,
         keyList = [keyList];
     }
     if (autoExpandParent) {
-        const ancesterKeys = findAncestorKeys(keyList, keyEntities, true);
-        return new Set(ancesterKeys);
+        const ancestorKeys = findAncestorKeys(keyList, keyEntities, true);
+        return new Set(ancestorKeys);
     }
     return new Set(keyList);
 }
@@ -482,8 +482,8 @@ export function calcCheckedKeysForChecked(key: string, keyEntities: KeyEntities,
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const allChecked = siblingKeys.every(key => checkedKeys.has(key));
         if (!allChecked) {
-            const ancesterKeys = findAncestorKeys([key], keyEntities, false);
-            halfCheckedKeys = new Set([...halfCheckedKeys, ...ancesterKeys]);
+            const ancestorKeys = findAncestorKeys([key], keyEntities, false);
+            halfCheckedKeys = new Set([...halfCheckedKeys, ...ancestorKeys]);
         } else {
             const par = node.parent;
             checkedKeys.add(par.key);
@@ -525,10 +525,10 @@ export function calcCheckedKeysForUnchecked(key: string, keyEntities: KeyEntitie
         const siblingKeys = findSiblingKeys([key], keyEntities);
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const anyChecked = siblingKeys.some(key => checkedKeys.has(key) || halfCheckedKeys.has(key));
-        const ancesterKeys = findAncestorKeys([key], keyEntities, false);
+        const ancestorKeys = findAncestorKeys([key], keyEntities, false);
         // If there is checked or halfChecked in the sibling node, you need to change the parent node to halfChecked
         if (anyChecked) {
-            ancesterKeys.forEach(itemKey => {
+            ancestorKeys.forEach(itemKey => {
                 if (checkedKeys.has(itemKey)) {
                     checkedKeys.delete(itemKey);
                     halfCheckedKeys.add(itemKey);

package/treeSelect/constants.ts

@@ -5,7 +5,7 @@ import {
 
 const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-tree-select`,
-    PREFIXTREE: `${BASE_CLASS_PREFIX}-tree`,
+    PREFIX_TREE: `${BASE_CLASS_PREFIX}-tree`,
     PREFIX_OPTION: `${BASE_CLASS_PREFIX}-tree-select-option`
 };
 

package/treeSelect/foundation.ts

@@ -622,11 +622,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const { checked, eventKey, data } = treeNode;
         if (checkRelation === 'related') {
             const targetStatus = disableStrictly ?
-                this.calcChekcedStatus(!checked, eventKey) :
+                this.calcCheckedStatus(!checked, eventKey) :
                 !checked;
 
             const { checkedKeys, halfCheckedKeys } = disableStrictly ?
-                this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
+                this.calcNonDisabledCheckedKeys(eventKey, targetStatus) :
                 this.calcCheckedKeys(eventKey, targetStatus);
             this._adapter.notifySelect(eventKey, targetStatus, data);
             this._notifyChange([...checkedKeys], e);
@@ -656,7 +656,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
-    calcNonDisabedCheckedKeys(eventKey: string, targetStatus: boolean) {
+    calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean) {
         const { keyEntities, disabledKeys } = this.getStates();
         const { checkedKeys } = this.getCopyFromState(['checkedKeys']);
         const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
@@ -671,7 +671,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return calcCheckedKeys(newCheckedKeys, keyEntities);
     }
 
-    calcChekcedStatus(targetStatus: boolean, eventKey: string) {
+    calcCheckedStatus(targetStatus: boolean, eventKey: string) {
         if (!targetStatus) {
             return targetStatus;
         }

package/upload/foundation.ts

@@ -124,11 +124,11 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     checkFileSize(file: File): boolean {
         const { size } = file;
         const { maxSize, minSize } = this.getProps();
-        let isIlligal = false;
+        let isIllegal = false;
         if (size > maxSize * byteKB || size < minSize * byteKB) {
-            isIlligal = true;
+            isIllegal = true;
         }
-        return isIlligal;
+        return isIllegal;
     }
 
     /**
@@ -425,7 +425,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
             const { fileList } = this.getStates();
             const buResult = this._adapter.notifyBeforeUpload({ file, fileList });
             switch (true) {
-                // sync valiate - boolean
+                // sync validate - boolean
                 case buResult === true: {
                     this.post(file);
                     break;
@@ -438,11 +438,11 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 // async validate
                 case buResult && isPromise(buResult): {
                     Promise.resolve(buResult as Promise<BeforeUploadObjectResult>).then(
-                        resloveData => {
+                        resolveData => {
                             let newResult = { shouldUpload: true };
-                            const typeOfResloveData = Object.prototype.toString.call(resloveData).slice(8, -1);
-                            if (typeOfResloveData === 'Object') {
-                                newResult = { ...newResult, ...resloveData };
+                            const typeOfResolveData = Object.prototype.toString.call(resolveData).slice(8, -1);
+                            if (typeOfResolveData === 'Object') {
+                                newResult = { ...newResult, ...resolveData };
                             }
                             this.handleBeforeUploadResultInObject(newResult, file);
                         },

package/upload/utils.ts

@@ -86,7 +86,7 @@ export async function mapFileTree(items: Array<DataTransferItem>): Promise<Array
         const result = await Promise.all(promises);
         return result;
     } catch (error) {
-        console.warn('Catched error while loop directory.');
+        console.warn('Captured error while loop directory.');
         console.error(error);
         return [];
     }

package/utils/isNullOrUndefined.ts

@@ -1,5 +1,5 @@
 /**
- * Whether null or undenfined
+ * Whether null or undefined
  * @param {*} value
  * @returns  {boolean}
  */

package/utils/object.ts

@@ -16,7 +16,7 @@ type Many<T> = T | ReadonlyArray<T>;
 type PropertyName = string | number | symbol;
 type PropertyPath = Many<PropertyName>;
 
-type ObjctType = Record<string, any>;
+type ObjectType = Record<string, any>;
 
 const pathToArrayElem = (path: any) => {
     const pathArray = lodashToPath(path);
@@ -25,7 +25,7 @@ const pathToArrayElem = (path: any) => {
     return justNumber ? false : Number.isInteger(+pathArray[pathArray.length - 1]);
 };
 
-function isEmptyObject(target: ObjctType) {
+function isEmptyObject(target: ObjectType) {
 /**
  *  var a = {};
  *  var b = { c: undefined }
@@ -35,8 +35,8 @@ function isEmptyObject(target: ObjctType) {
  *  }
  *  the result of JSON.stringify(a/b/d) are same: '{}'
  *  We can use the above features to remove keys with empty values in Form
- *  But we cannot use JSON.stringify() directly, because if the input parameter of JSON.stringify includes fiberNode, it will cause an TypeError: 'Convering circular structure to JSON'
- *  So we have to mock it's behavihor, also, the form value cannot have Symbol or function type, it can be ignored
+ *  But we cannot use JSON.stringify() directly, because if the input parameter of JSON.stringify includes fiberNode, it will cause an TypeError: 'Converting circular structure to JSON'
+ *  So we have to mock it's behavior, also, the form value cannot have Symbol or function type, it can be ignored
  */
     if (!isObject(target)) {
         return false;
@@ -52,7 +52,7 @@ function isEmptyObject(target: ObjctType) {
     }
 }
 
-function cleanup(obj: ObjctType, path: string[], pull = true) {
+function cleanup(obj: ObjectType, path: string[], pull = true) {
     if (path.length === 0) {
         return;
     }
@@ -79,15 +79,15 @@ function cleanup(obj: ObjctType, path: string[], pull = true) {
     cleanup(obj, path.slice(0, path.length - 1), pull);
 }
 
-export function empty(object: ObjctType) {
+export function empty(object: ObjectType) {
     return lodashValues(object).length === 0;
 }
 
-export function get(object: ObjctType, path: PropertyPath) {
+export function get(object: ObjectType, path: PropertyPath) {
     return lodashGet(object, path);
 }
 
-export function remove(object: ObjctType, path: PropertyPath) {
+export function remove(object: ObjectType, path: PropertyPath) {
     lodashUnset(object, path);
     // a.b => [a, b]
     // arr[11].a => [arr, 11, a]
@@ -123,7 +123,7 @@ export function set(object: any, path: PropertyPath, value: any, allowEmpty?: bo
     }
 }
 
-export function has(object: ObjctType, path: PropertyPath) {
+export function has(object: ObjectType, path: PropertyPath) {
     return lodashHas(object, path);
 }
 
@@ -133,7 +133,7 @@ export function has(object: ObjctType, path: PropertyPath) {
  * @param {object|Function} srcObj
  * @returns {object|Function}
  */
-export function forwardStatics<T extends ObjctType | ((...arg: any) => any)>(obj: T, srcObj: ObjctType | ((...arg: any) => any)): T {
+export function forwardStatics<T extends ObjectType | ((...arg: any) => any)>(obj: T, srcObj: ObjectType | ((...arg: any) => any)): T {
     if (
         obj &&
         (typeof obj === 'function' || typeof obj === 'object') &&