@douyinfe/semi-foundation 2.20.0-beta.1 → 2.20.1

package/calendar/foundation.ts

@@ -32,9 +32,8 @@ import {
     parseRangeAllDayEvent,
     DateObj,
     checkWeekend,
-    weeekStartsOnEnum
 } from './eventUtil';
-
+import type { weeekStartsOnEnum } from './eventUtil';
 
 export { weeekStartsOnEnum };
 export interface EventObject {

package/datePicker/foundation.ts

@@ -12,13 +12,14 @@ import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import { strings } from './constants';
 import { strings as inputStrings } from '../input/constants';
 
-import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
-import { MonthsGridFoundationProps } from './monthsGridFoundation';
-import { WeekStartNumber } from './_utils/getMonthTable';
-import { ArrayElement, Motion } from '../utils/type';
 import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
 import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
 
+import type { ArrayElement, Motion } from '../utils/type';
+import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
+import type { MonthsGridFoundationProps } from './monthsGridFoundation';
+import type { WeekStartNumber } from './_utils/getMonthTable';
+
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
@@ -956,7 +957,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             if (insetInput) {
                 const insetInputFormatToken = getInsetInputFormatToken({ format, type });
                 const insetInputStr = this._isMultiple() ? this.formatMultipleDates(dates, undefined, insetInputFormatToken) : this.formatDates(dates, insetInputFormatToken);
-                insetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator  });
+                insetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator });
             }
             const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
             /**

package/datePicker/monthsGridFoundation.ts

@@ -92,8 +92,8 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     triggerRender?: (props: Record<string, any>) => any;
     insetInput: boolean;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 
 export interface MonthInfo {
@@ -284,7 +284,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      * sync change another panel month when change months from the else yam panel
      * call it when
      *  - current change panel targe date month is same with another panel date
-     * 
+     *
      * @example
      *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
      *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
@@ -310,7 +310,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         const { monthRight, monthLeft } = this._adapter.getStates();
         const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
         let target: Date;
-        
+
         switch (switchType) {
             case 'prevMonth':
                 target = addMonths(currentDate, -1);
@@ -335,7 +335,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         const { type } = this._adapter.getProps();
         const diff = this._getDiff('month', target, panelType);
         this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
-    
+
         if (this.isRangeType(type)) {
             this.handleSyncChangeMonths({ panelType, target });
         }
@@ -936,7 +936,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
 
     /**
      * Get year and month panel open type
-     * 
+     *
      * It is useful info to set minHeight of weeks.
      *  - 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

package/datePicker/yearAndMonthFoundation.ts

@@ -14,8 +14,8 @@ export interface YearAndMonthFoundationProps {
     disabledDate?: (date: Date) => boolean;
     density?: string;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 
 export interface YearAndMonthFoundationState {

package/form/form.scss

@@ -66,6 +66,20 @@ $rating: #{$prefix}-rating;
                 }
             }
         }
+
+        .#{$field}-group {
+            .#{$col} {
+                &-right {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                &-left {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+        }
+
         .#{$field}-pure {
             // padding-top: 0;
             // padding-bottom: 0;

package/image/image.scss

@@ -13,6 +13,7 @@ $module: #{$prefix}-image;
     &-img {
         vertical-align: middle;
         border-radius: inherit;
+        user-select: none;
 
         &-preview {
             cursor: zoom-in;
@@ -135,6 +136,7 @@ $module: #{$prefix}-image;
         }
 
         &-page {
+            user-select: none;
             color: $color-image_preview_footer_icon;
             @include font-size-header-6;
             margin: $spacing-image_preview_footer_page-marginY $spacing-image_preview_footer_page-marginX;
@@ -192,6 +194,7 @@ $module: #{$prefix}-image;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
             transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
+            user-select: none;
         }
 
         &-spin {

package/image/previewImageFoundation.ts

@@ -220,16 +220,16 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleMoveImage = (e: any): void => {
-        const { offset, width, height, left, top } = this.getStates();
-        const { rotation } = this.getProps();
+        const { offset, width, height } = this.getStates();
         const startMouseMove = this._adapter.getMouseMove();
         const startMouseOffset = this._adapter.getMouseOffset();
         const { canDragVertical, canDragHorizontal } = this.calcCanDragDirection();
         if (startMouseMove && (canDragVertical || canDragHorizontal)) {
-            const { pageX, pageY } = e;
+            const { clientX, clientY } = e;
+            const { left: containerLeft, top: containerTop } = this._getContainerBounds();
             const { left: extremeLeft, top: extremeTop } = this.calcExtremeBounds();
-            let newX = canDragHorizontal ? pageX - startMouseOffset.x : offset.x;
-            let newY = canDragVertical ? pageY - startMouseOffset.y : offset.y;
+            let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
+            let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
             if (canDragHorizontal) {
                 newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
             }

package/image/previewInnerFoundation.ts

@@ -77,7 +77,11 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         let couldClose = !isTargetEmit(e.nativeEvent, NOT_CLOSE_TARGETS);
         const { clientX, clientY } = e;
         const { x, y } = this._adapter.getStartMouseDown();
-        if (clientX !== x || y !== clientY) {
+        // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+        // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
+        // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
+        // If you do not do fault-tolerant processing, but directly use clientX !== x || y !== clientY to make judgments, the slight movement of the mouse when the user clicks will not be able to close the preview, which does not meet the user's expectations.
+        if (Math.abs(clientX - x) > 5 || Math.abs(y - clientY) > 5) {
             couldClose = false;
         }
         if (couldClose && maskClosable) {

package/image/utils.ts

@@ -1,7 +1,9 @@
 export const isTargetEmit = (event, targetClasses): boolean => {
-    // e.path is the event-triggered bubbling path, which stores each node through which bubbling passes.
-    // e.path.length-4 is to remove elements above the root node, such as body, html, document, window
-    const isTarget = event?.path?.slice(0, event.path.length - 4).some((node): boolean => {
+    // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
+    // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
+    // path.length-4 is to remove elements above the root node, such as body, html, document, window
+    const path = event?.composedPath();
+    const isTarget = path?.slice(0, path.length - 4).some((node): boolean => {
         if (node.className && typeof node.className === "string") {
             return targetClasses.some(c => node.className.includes(c));
         }

package/image/variables.scss

@@ -45,3 +45,6 @@ $color-image_header_close-bg: rgba(0, 0, 0, 0.75); //图像预览header的关闭
 $color-image_preview_footer-bg: rgba(0, 0, 0, 0.75); // 图像预览footer部分背景色
 $color-image-preview_divider-bg: rgba(255, 255, 255, .5); // 图像预览footer中的分割线背景色
 $color-image_preview_image_spin: #ccc; // 图像预览的加载状态颜色
+
+$z-image_preview: 1070 !default; // Image 组件预览层z-index
+$z-image_preview_header: 1 !default; // Image 组件预览层中 header 部分 z-index

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

@@ -1,6 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
-import { DateObj, weeekStartsOnEnum } from './eventUtil';
+import { DateObj } from './eventUtil';
+import type { weeekStartsOnEnum } from './eventUtil';
 export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;

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

@@ -1,9 +1,9 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
-import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
-import { MonthsGridFoundationProps } from './monthsGridFoundation';
-import { WeekStartNumber } from './_utils/getMonthTable';
-import { ArrayElement, Motion } from '../utils/type';
+import type { ArrayElement, Motion } from '../utils/type';
+import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
+import type { MonthsGridFoundationProps } from './monthsGridFoundation';
+import type { WeekStartNumber } from './_utils/getMonthTable';
 export declare type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export declare type InputSize = ArrayElement<typeof strings.SIZE_SET>;
 export declare type Position = ArrayElement<typeof strings.POSITION_SET>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
@@ -56,8 +55,8 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     triggerRender?: (props: Record<string, any>) => any;
     insetInput: boolean;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface MonthInfo {
     pickerDate: Date;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
 export interface YearAndMonthFoundationProps {
@@ -17,8 +16,8 @@ export interface YearAndMonthFoundationProps {
     disabledDate?: (date: Date) => boolean;
     density?: string;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface YearAndMonthFoundationState {
     years: Array<{

package/lib/cjs/form/form.css

@@ -35,6 +35,14 @@
   display: flex;
   justify-content: flex-start;
 }
+.semi-form-vertical .semi-form-field-group .semi-form-col-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.semi-form-vertical .semi-form-field-group .semi-form-col-left {
+  display: flex;
+  justify-content: flex-start;
+}
 .semi-form-field-label {
   box-sizing: border-box;
   padding-right: 16px;

package/lib/cjs/form/form.scss

@@ -66,6 +66,20 @@ $rating: #{$prefix}-rating;
                 }
             }
         }
+
+        .#{$field}-group {
+            .#{$col} {
+                &-right {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                &-left {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+        }
+
         .#{$field}-pure {
             // padding-top: 0;
             // padding-bottom: 0;

package/lib/cjs/image/image.css

@@ -10,6 +10,7 @@
 .semi-image-img {
   vertical-align: middle;
   border-radius: inherit;
+  user-select: none;
 }
 .semi-image-img-preview {
   cursor: zoom-in;
@@ -120,6 +121,7 @@
   transform: translateX(-50%);
 }
 .semi-image-preview-footer-page {
+  user-select: none;
   color: var(--semi-color-white);
   font-size: 16px;
   line-height: 22px;
@@ -168,6 +170,7 @@
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
   transition: transform 0.3s 0s;
   z-index: 0;
+  user-select: none;
 }
 .semi-image-preview-image-spin {
   position: absolute;

package/lib/cjs/image/image.scss

@@ -13,6 +13,7 @@ $module: #{$prefix}-image;
     &-img {
         vertical-align: middle;
         border-radius: inherit;
+        user-select: none;
 
         &-preview {
             cursor: zoom-in;
@@ -135,6 +136,7 @@ $module: #{$prefix}-image;
         }
 
         &-page {
+            user-select: none;
             color: $color-image_preview_footer_icon;
             @include font-size-header-6;
             margin: $spacing-image_preview_footer_page-marginY $spacing-image_preview_footer_page-marginX;
@@ -192,6 +194,7 @@ $module: #{$prefix}-image;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
             transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
+            user-select: none;
         }
 
         &-spin {

package/lib/cjs/image/previewImageFoundation.js

@@ -301,13 +301,8 @@ class PreviewImageFoundation extends _foundation.default {
       const {
         offset,
         width,
-        height,
-        left,
-        top
+        height
       } = this.getStates();
-      const {
-        rotation
-      } = this.getProps();
 
       const startMouseMove = this._adapter.getMouseMove();
 
@@ -320,15 +315,21 @@ class PreviewImageFoundation extends _foundation.default {
 
       if (startMouseMove && (canDragVertical || canDragHorizontal)) {
         const {
-          pageX,
-          pageY
+          clientX,
+          clientY
         } = e;
+
+        const {
+          left: containerLeft,
+          top: containerTop
+        } = this._getContainerBounds();
+
         const {
           left: extremeLeft,
           top: extremeTop
         } = this.calcExtremeBounds();
-        let newX = canDragHorizontal ? pageX - startMouseOffset.x : offset.x;
-        let newY = canDragVertical ? pageY - startMouseOffset.y : offset.y;
+        let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
+        let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
 
         if (canDragHorizontal) {
           newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;

package/lib/cjs/image/previewInnerFoundation.js

@@ -72,9 +72,13 @@ class PreviewInnerFoundation extends _foundation.default {
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown();
+      } = this._adapter.getStartMouseDown(); // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+      // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
+      // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
+      // If you do not do fault-tolerant processing, but directly use clientX !== x || y !== clientY to make judgments, the slight movement of the mouse when the user clicks will not be able to close the preview, which does not meet the user's expectations.
 
-      if (clientX !== x || y !== clientY) {
+
+      if (Math.abs(clientX - x) > 5 || Math.abs(y - clientY) > 5) {
         couldClose = false;
       }
 

package/lib/cjs/image/utils.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.isTargetEmit = exports.getPreloadImagArr = exports.downloadImage = exports.crossMerge = void 0;
 
 const isTargetEmit = (event, targetClasses) => {
-  var _a; // e.path is the event-triggered bubbling path, which stores each node through which bubbling passes.
-  // e.path.length-4 is to remove elements above the root node, such as body, html, document, window
-
-
-  const isTarget = (_a = event === null || event === void 0 ? void 0 : event.path) === null || _a === void 0 ? void 0 : _a.slice(0, event.path.length - 4).some(node => {
+  // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
+  // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
+  // path.length-4 is to remove elements above the root node, such as body, html, document, window
+  const path = event === null || event === void 0 ? void 0 : event.composedPath();
+  const isTarget = path === null || path === void 0 ? void 0 : path.slice(0, path.length - 4).some(node => {
     if (node.className && typeof node.className === "string") {
       return targetClasses.some(c => node.className.includes(c));
     }

package/lib/cjs/image/variables.scss

@@ -45,3 +45,6 @@ $color-image_header_close-bg: rgba(0, 0, 0, 0.75); //图像预览header的关闭
 $color-image_preview_footer-bg: rgba(0, 0, 0, 0.75); // 图像预览footer部分背景色
 $color-image-preview_divider-bg: rgba(255, 255, 255, .5); // 图像预览footer中的分割线背景色
 $color-image_preview_image_spin: #ccc; // 图像预览的加载状态颜色
+
+$z-image_preview: 1070 !default; // Image 组件预览层z-index
+$z-image_preview_header: 1 !default; // Image 组件预览层中 header 部分 z-index

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

@@ -74,7 +74,6 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
      * @param {*} itemKeysMap
      */
     getWillOpenKeys(itemKeysMap: ItemKey2ParentKeysMap): any[];
-    getItemKey(item: string | number, keyPropName?: string): string | number;
     getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: string | number[]): unknown[];
     destroy(): void;
     selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, ...itemKeys: (string | number)[]): any[];

package/lib/cjs/navigation/foundation.js

@@ -186,16 +186,6 @@ class NavigationFoundation extends _foundation.default {
     return [...willOpenKeys];
   }
 
-  getItemKey(item) {
-    let keyPropName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'itemKey';
-
-    if (item && typeof item === 'object') {
-      return item[keyPropName];
-    }
-
-    return item;
-  }
-
   getShouldOpenKeys() {
     let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -204,7 +194,7 @@ class NavigationFoundation extends _foundation.default {
     if (Array.isArray(selectedKeys) && selectedKeys.length) {
       selectedKeys.forEach(item => {
         if (item) {
-          const parentKeys = (0, _get2.default)(itemKeysMap, this.getItemKey(item));
+          const parentKeys = (0, _get2.default)(itemKeysMap, item);
 
           if (Array.isArray(parentKeys)) {
             parentKeys.forEach(k => willOpenKeySet.add(k));

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

@@ -1,6 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
-import { DateObj, weeekStartsOnEnum } from './eventUtil';
+import { DateObj } from './eventUtil';
+import type { weeekStartsOnEnum } from './eventUtil';
 export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;

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

@@ -1,9 +1,9 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
-import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
-import { MonthsGridFoundationProps } from './monthsGridFoundation';
-import { WeekStartNumber } from './_utils/getMonthTable';
-import { ArrayElement, Motion } from '../utils/type';
+import type { ArrayElement, Motion } from '../utils/type';
+import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
+import type { MonthsGridFoundationProps } from './monthsGridFoundation';
+import type { WeekStartNumber } from './_utils/getMonthTable';
 export declare type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export declare type InputSize = ArrayElement<typeof strings.SIZE_SET>;
 export declare type Position = ArrayElement<typeof strings.POSITION_SET>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
@@ -56,8 +55,8 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     triggerRender?: (props: Record<string, any>) => any;
     insetInput: boolean;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface MonthInfo {
     pickerDate: Date;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
 export interface YearAndMonthFoundationProps {
@@ -17,8 +16,8 @@ export interface YearAndMonthFoundationProps {
     disabledDate?: (date: Date) => boolean;
     density?: string;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface YearAndMonthFoundationState {
     years: Array<{

package/lib/es/form/form.css

@@ -35,6 +35,14 @@
   display: flex;
   justify-content: flex-start;
 }
+.semi-form-vertical .semi-form-field-group .semi-form-col-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.semi-form-vertical .semi-form-field-group .semi-form-col-left {
+  display: flex;
+  justify-content: flex-start;
+}
 .semi-form-field-label {
   box-sizing: border-box;
   padding-right: 16px;

package/lib/es/form/form.scss

@@ -66,6 +66,20 @@ $rating: #{$prefix}-rating;
                 }
             }
         }
+
+        .#{$field}-group {
+            .#{$col} {
+                &-right {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                &-left {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+        }
+
         .#{$field}-pure {
             // padding-top: 0;
             // padding-bottom: 0;

package/lib/es/image/image.css

@@ -10,6 +10,7 @@
 .semi-image-img {
   vertical-align: middle;
   border-radius: inherit;
+  user-select: none;
 }
 .semi-image-img-preview {
   cursor: zoom-in;
@@ -120,6 +121,7 @@
   transform: translateX(-50%);
 }
 .semi-image-preview-footer-page {
+  user-select: none;
   color: var(--semi-color-white);
   font-size: 16px;
   line-height: 22px;
@@ -168,6 +170,7 @@
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
   transition: transform 0.3s 0s;
   z-index: 0;
+  user-select: none;
 }
 .semi-image-preview-image-spin {
   position: absolute;

package/lib/es/image/image.scss

@@ -13,6 +13,7 @@ $module: #{$prefix}-image;
     &-img {
         vertical-align: middle;
         border-radius: inherit;
+        user-select: none;
 
         &-preview {
             cursor: zoom-in;
@@ -135,6 +136,7 @@ $module: #{$prefix}-image;
         }
 
         &-page {
+            user-select: none;
             color: $color-image_preview_footer_icon;
             @include font-size-header-6;
             margin: $spacing-image_preview_footer_page-marginY $spacing-image_preview_footer_page-marginX;
@@ -192,6 +194,7 @@ $module: #{$prefix}-image;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
             transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
+            user-select: none;
         }
 
         &-spin {

package/lib/es/image/previewImageFoundation.js

@@ -288,13 +288,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
       const {
         offset,
         width,
-        height,
-        left,
-        top
+        height
       } = this.getStates();
-      const {
-        rotation
-      } = this.getProps();
 
       const startMouseMove = this._adapter.getMouseMove();
 
@@ -307,15 +302,21 @@ export default class PreviewImageFoundation extends BaseFoundation {
 
       if (startMouseMove && (canDragVertical || canDragHorizontal)) {
         const {
-          pageX,
-          pageY
+          clientX,
+          clientY
         } = e;
+
+        const {
+          left: containerLeft,
+          top: containerTop
+        } = this._getContainerBounds();
+
         const {
           left: extremeLeft,
           top: extremeTop
         } = this.calcExtremeBounds();
-        let newX = canDragHorizontal ? pageX - startMouseOffset.x : offset.x;
-        let newY = canDragVertical ? pageY - startMouseOffset.y : offset.y;
+        let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
+        let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
 
         if (canDragHorizontal) {
           newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;

package/lib/es/image/previewInnerFoundation.js

@@ -59,9 +59,13 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown();
+      } = this._adapter.getStartMouseDown(); // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+      // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
+      // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
+      // If you do not do fault-tolerant processing, but directly use clientX !== x || y !== clientY to make judgments, the slight movement of the mouse when the user clicks will not be able to close the preview, which does not meet the user's expectations.
 
-      if (clientX !== x || y !== clientY) {
+
+      if (Math.abs(clientX - x) > 5 || Math.abs(y - clientY) > 5) {
         couldClose = false;
       }
 

package/lib/es/image/utils.js

@@ -1,9 +1,9 @@
 export const isTargetEmit = (event, targetClasses) => {
-  var _a; // e.path is the event-triggered bubbling path, which stores each node through which bubbling passes.
-  // e.path.length-4 is to remove elements above the root node, such as body, html, document, window
-
-
-  const isTarget = (_a = event === null || event === void 0 ? void 0 : event.path) === null || _a === void 0 ? void 0 : _a.slice(0, event.path.length - 4).some(node => {
+  // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
+  // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
+  // path.length-4 is to remove elements above the root node, such as body, html, document, window
+  const path = event === null || event === void 0 ? void 0 : event.composedPath();
+  const isTarget = path === null || path === void 0 ? void 0 : path.slice(0, path.length - 4).some(node => {
     if (node.className && typeof node.className === "string") {
       return targetClasses.some(c => node.className.includes(c));
     }

package/lib/es/image/variables.scss

@@ -45,3 +45,6 @@ $color-image_header_close-bg: rgba(0, 0, 0, 0.75); //图像预览header的关闭
 $color-image_preview_footer-bg: rgba(0, 0, 0, 0.75); // 图像预览footer部分背景色
 $color-image-preview_divider-bg: rgba(255, 255, 255, .5); // 图像预览footer中的分割线背景色
 $color-image_preview_image_spin: #ccc; // 图像预览的加载状态颜色
+
+$z-image_preview: 1070 !default; // Image 组件预览层z-index
+$z-image_preview_header: 1 !default; // Image 组件预览层中 header 部分 z-index

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

@@ -74,7 +74,6 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
      * @param {*} itemKeysMap
      */
     getWillOpenKeys(itemKeysMap: ItemKey2ParentKeysMap): any[];
-    getItemKey(item: string | number, keyPropName?: string): string | number;
     getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: string | number[]): unknown[];
     destroy(): void;
     selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, ...itemKeys: (string | number)[]): any[];

package/lib/es/navigation/foundation.js

@@ -173,16 +173,6 @@ export default class NavigationFoundation extends BaseFoundation {
     return [...willOpenKeys];
   }
 
-  getItemKey(item) {
-    let keyPropName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'itemKey';
-
-    if (item && typeof item === 'object') {
-      return item[keyPropName];
-    }
-
-    return item;
-  }
-
   getShouldOpenKeys() {
     let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -191,7 +181,7 @@ export default class NavigationFoundation extends BaseFoundation {
     if (Array.isArray(selectedKeys) && selectedKeys.length) {
       selectedKeys.forEach(item => {
         if (item) {
-          const parentKeys = _get(itemKeysMap, this.getItemKey(item));
+          const parentKeys = _get(itemKeysMap, item);
 
           if (Array.isArray(parentKeys)) {
             parentKeys.forEach(k => willOpenKeySet.add(k));

package/navigation/foundation.ts

@@ -181,20 +181,13 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
         return [...willOpenKeys];
     }
 
-    getItemKey(item: string | number, keyPropName = 'itemKey') {
-        if (item && typeof item === 'object') {
-            return item[keyPropName];
-        }
-        return item;
-    }
-
-    getShouldOpenKeys(itemKeysMap: ItemKey2ParentKeysMap = {}, selectedKeys: string | number[] = []) {
+    getShouldOpenKeys(itemKeysMap: ItemKey2ParentKeysMap = {}, selectedKeys: string | number[]= []) {
         const willOpenKeySet = new Set();
 
         if (Array.isArray(selectedKeys) && selectedKeys.length) {
             selectedKeys.forEach(item => {
                 if (item) {
-                    const parentKeys = get(itemKeysMap, this.getItemKey(item));
+                    const parentKeys = get(itemKeysMap, item);
 
                     if (Array.isArray(parentKeys)) {
                         parentKeys.forEach(k => willOpenKeySet.add(k));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.20.0-beta.1",
+    "version": "2.20.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "5b995a1afab25994df894566bda7f29b70befa97",
+    "gitHead": "9f1920d30dcfaf74678976cf9fa16e2ed4bfc226",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tree/treeUtil.ts

@@ -314,7 +314,7 @@ export function calcCheckedKeys(values: any, keyEntities: KeyEntities) {
     let halfCheckedKeys = new Set([]);
     let visited: any[] = [];
 
-    const levelMap = getSortedKeyList(keyList, keyEntities);
+    const levelMap:{[key: number]: string[]} = getSortedKeyList(keyList, keyEntities);
 
     const calcCurrLevel = (node: any) => {
         const { key, parent, level } = node;