@douyinfe/semi-foundation 2.20.5-alpha.2 → 2.20.5

package/autoComplete/foundation.ts

@@ -8,6 +8,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
+    notifyKeyDown: (e: any) => void;
 }
 
 export interface DataItem {
@@ -336,6 +337,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
             default:
                 break;
         }
+        this._adapter.notifyKeyDown(event);
     }
 
     _getEnableFocusIndex(offset: number) {
@@ -413,7 +415,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.notifyFocus(e);
     }
 
-    handleBlur(e: FocusEvent) {
+    handleBlur(e: any) {
+        // https://reactjs.org/docs/legacy-event-pooling.html
+        e.persist();
         // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
         // internal-issues:1231
         setTimeout(() => {

package/lib/cjs/autoComplete/foundation.d.ts

@@ -3,6 +3,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
+    notifyKeyDown: (e: any) => void;
 }
 export interface DataItem {
     [x: string]: any;
@@ -59,6 +60,6 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
     _handleEnterKeyDown(): void;
     handleOptionMouseEnter(optionIndex: number): void;
     handleFocus(e: FocusEvent): void;
-    handleBlur(e: FocusEvent): void;
+    handleBlur(e: any): void;
 }
 export default AutoCompleteFoundation;

package/lib/cjs/autoComplete/foundation.js

@@ -395,6 +395,8 @@ class AutoCompleteFoundation extends _foundation.default {
       default:
         break;
     }
+
+    this._adapter.notifyKeyDown(event);
   }
 
   _getEnableFocusIndex(offset) {
@@ -497,8 +499,10 @@ class AutoCompleteFoundation extends _foundation.default {
   }
 
   handleBlur(e) {
-    // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
+    // https://reactjs.org/docs/legacy-event-pooling.html
+    e.persist(); // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
     // internal-issues:1231
+
     setTimeout(() => {
       this._adapter.notifyBlur(e);
 

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -249,6 +249,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      *  - When yam open type is 'left' or 'right', weeks minHeight should be set
      *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
      */
-    getYAMOpenType(): "left" | "right" | "both" | "none";
+    getYAMOpenType(): "left" | "right" | "none" | "both";
 }
 export {};

package/lib/cjs/table/table.css

@@ -81,6 +81,13 @@
   background-color: transparent;
   border-bottom: 2px solid var(--semi-color-border);
 }
+.semi-table-header-sticky {
+  position: sticky;
+  z-index: 102;
+}
+.semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
+  background-color: var(--semi-color-bg-2);
+}
 .semi-table-body {
   overflow: auto;
   width: 100%;

package/lib/cjs/table/table.scss

@@ -64,6 +64,15 @@ $module: #{$prefix}-table;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
         scrollbar-base-color: transparent;
+
+        &-sticky {
+            position: sticky;
+            z-index: $z-table_fixed_column + 1;
+
+            .semi-table-thead > .semi-table-row > .semi-table-row-head {
+                background-color: $color-table-bg-default;
+            }
+        }
     }
 
     &-body {

package/lib/cjs/tree/treeUtil.d.ts

@@ -74,6 +74,6 @@ export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/cjs/upload/constants.d.ts

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("custom" | "auto")[];
+    UPLOAD_TRIGGER: ("auto" | "custom")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/cjs/utils/uuid.js

@@ -14,7 +14,7 @@ function getUuid(prefix) {
 
 function getUuidv4() {
   try {
-    return crypto.randomUUID();
+    return String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (Number(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number(c) / 4).toString(16));
   } catch (err) {
     return getUuid('semi');
   }

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

@@ -3,6 +3,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
+    notifyKeyDown: (e: any) => void;
 }
 export interface DataItem {
     [x: string]: any;
@@ -59,6 +60,6 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
     _handleEnterKeyDown(): void;
     handleOptionMouseEnter(optionIndex: number): void;
     handleFocus(e: FocusEvent): void;
-    handleBlur(e: FocusEvent): void;
+    handleBlur(e: any): void;
 }
 export default AutoCompleteFoundation;

package/lib/es/autoComplete/foundation.js

@@ -381,6 +381,8 @@ class AutoCompleteFoundation extends BaseFoundation {
       default:
         break;
     }
+
+    this._adapter.notifyKeyDown(event);
   }
 
   _getEnableFocusIndex(offset) {
@@ -483,8 +485,10 @@ class AutoCompleteFoundation extends BaseFoundation {
   }
 
   handleBlur(e) {
-    // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
+    // https://reactjs.org/docs/legacy-event-pooling.html
+    e.persist(); // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
     // internal-issues:1231
+
     setTimeout(() => {
       this._adapter.notifyBlur(e);
 

package/lib/es/datePicker/monthsGridFoundation.d.ts

@@ -249,6 +249,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      *  - When yam open type is 'left' or 'right', weeks minHeight should be set
      *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
      */
-    getYAMOpenType(): "left" | "right" | "both" | "none";
+    getYAMOpenType(): "left" | "right" | "none" | "both";
 }
 export {};

package/lib/es/table/table.css

@@ -81,6 +81,13 @@
   background-color: transparent;
   border-bottom: 2px solid var(--semi-color-border);
 }
+.semi-table-header-sticky {
+  position: sticky;
+  z-index: 102;
+}
+.semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
+  background-color: var(--semi-color-bg-2);
+}
 .semi-table-body {
   overflow: auto;
   width: 100%;

package/lib/es/table/table.scss

@@ -64,6 +64,15 @@ $module: #{$prefix}-table;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
         scrollbar-base-color: transparent;
+
+        &-sticky {
+            position: sticky;
+            z-index: $z-table_fixed_column + 1;
+
+            .semi-table-thead > .semi-table-row > .semi-table-row-head {
+                background-color: $color-table-bg-default;
+            }
+        }
     }
 
     &-body {

package/lib/es/tree/treeUtil.d.ts

@@ -74,6 +74,6 @@ export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/es/upload/constants.d.ts

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("custom" | "auto")[];
+    UPLOAD_TRIGGER: ("auto" | "custom")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/es/utils/uuid.js

@@ -4,7 +4,7 @@ export default function getUuid(prefix) {
 
 function getUuidv4() {
   try {
-    return crypto.randomUUID();
+    return String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (Number(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number(c) / 4).toString(16));
   } catch (err) {
     return getUuid('semi');
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.20.5-alpha.2",
+    "version": "2.20.5",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "4c4b25fd1c11f392a1c323fb6a11a50a744b24ad",
+    "gitHead": "d3bebd51a3287d8e57d9460f658102bfb9712af4",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/table.scss

@@ -64,6 +64,15 @@ $module: #{$prefix}-table;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
         scrollbar-base-color: transparent;
+
+        &-sticky {
+            position: sticky;
+            z-index: $z-table_fixed_column + 1;
+
+            .semi-table-thead > .semi-table-row > .semi-table-row-head {
+                background-color: $color-table-bg-default;
+            }
+        }
     }
 
     &-body {

package/utils/uuid.ts

@@ -5,7 +5,9 @@ export default function getUuid(prefix: string) {
 // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 function getUuidv4() {
     try {
-        return crypto.randomUUID();
+        return String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+            (Number(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16)
+        );
     } catch (err) {
         return getUuid('semi');
     }