@douyinfe/semi-foundation 2.78.0-alpha.2 → 2.78.0-beta.0

package/cropper/foundation.ts

@@ -60,6 +60,12 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number
+    };
     
     constructor(adapter: CropperAdapter<P, S>) {
         super({ ...adapter });
@@ -74,6 +80,8 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
         this.rangeX = null;
         this.rangeY = null;
         this.initial = false;
+        this.previewImg = null;
+        this.previewContainer = null;
     }
 
     init() {
@@ -88,6 +96,7 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
     destroy() {
         this.unBindMoveEvent();
         this.unBindResizeEvent();
+        this.removePreview();
     }
 
     getImgDataWhenResize = (ratio: number) => {
@@ -228,6 +237,80 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
             cropperBox: newCropperBoxState,
             loaded: true,
         } as any);
+
+        this.renderPreview();
+    }
+
+    renderPreview = () => {
+        const { preview, src } = this.getProps();
+        const previewNode = preview?.();
+        if (!previewNode) {
+            return;
+        }
+        const img = document.createElement('img');
+        this.previewImg = img;
+        this.previewContainer = previewNode;
+        img.src = src;
+        previewNode.appendChild(img);
+        this.previewContainer.style.overflow = 'hidden';
+        // 记录预览容器初始宽高
+        const { width: previewWidth, height: previewHeight } = previewNode.getBoundingClientRect();
+        this.previewContainerInitSize = {
+            width: previewWidth,
+            height: previewHeight,
+        };
+    }
+
+    updatePreview = (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number
+    }) => {
+        if (!this.previewImg) {
+            return;
+        }
+        const { cropperBox } = this.getStates();
+        let zoom = 1;
+        const { width: containerWidth, height: containerHeight } = this.previewContainerInitSize;
+        let previewWidth = containerWidth;
+        let previewHeight = containerHeight;
+        if (previewWidth < previewHeight) {
+            zoom = containerWidth / cropperBox.width;
+            let tempHeight = zoom * cropperBox.height;
+            if (tempHeight > containerHeight) {
+                zoom = containerHeight / cropperBox.height;
+                previewWidth = zoom * cropperBox.width;
+            } else {
+                previewHeight = tempHeight;
+            }
+        } else {
+            zoom = containerHeight / cropperBox.height;
+            let tempWidth = zoom * cropperBox.width;
+            if (tempWidth > containerWidth) {
+                zoom = containerWidth / cropperBox.width;
+                previewHeight = zoom * cropperBox.height;
+            } else {
+                previewWidth = tempWidth;
+            }
+        }
+        const { width, height, translateX, translateY, rotate } = props;
+        // Set the image style
+        this.previewImg.style.width = `${width * zoom}px`;
+        this.previewImg.style.height = `${height * zoom}px`;
+        this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+        this.previewImg.style.transformOrigin = 'center';
+        // set preview container size
+        this.previewContainer.style.width = `${previewWidth}px`;
+        this.previewContainer.style.height = `${previewHeight}px`;
+    }
+
+    removePreview = () => {
+        if (this.previewImg && this.previewContainer) {
+            this.previewContainer.removeChild(this.previewImg);
+            this.previewImg = null;
+        }
     }
 
     handleWheel = (e: any) => {

package/jsonViewer/foundation.ts

@@ -1,4 +1,3 @@
-
 import { JsonViewer, JsonViewerOptions, CustomRenderRule } from '@douyinfe/semi-json-viewer-core';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 
@@ -37,18 +36,35 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
 
     }
 
-    search(searchText: string) {
-        const state = this.getState('searchOptions');
-        const { caseSensitive, wholeWord, regex } = state;
-        this.jsonViewer?.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean) {
+        let options;
+        if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+            options = {
+                caseSensitive: caseSensitive ?? false,
+                wholeWord: wholeWord ?? false,
+                regex: regex ?? false
+            };
+        } else {
+            options = this.getState('searchOptions');
+        }
+        const { caseSensitive: cs, wholeWord: ww, regex: rx } = options;
+        this.jsonViewer?.getSearchWidget().search(searchText, cs, ww, rx);
     }
 
-    prevSearch() {
-        this.jsonViewer?.getSearchWidget().navigateResults(-1);
+    prevSearch(step?: number) {
+        if (step === undefined) {
+            this.jsonViewer?.getSearchWidget().navigateResults(-1);
+        } else {
+            this.jsonViewer?.getSearchWidget().navigateResults(-step);
+        }
     }
 
-    nextSearch() {
-        this.jsonViewer?.getSearchWidget().navigateResults(1);
+    nextSearch(step?: number) {
+        if (step === undefined) {
+            this.jsonViewer?.getSearchWidget().navigateResults(1);
+        } else {
+            this.jsonViewer?.getSearchWidget().navigateResults(step);
+        }
     }
 
     replace(replaceText: string) {
@@ -72,6 +88,10 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     showSearchBar() {
         this._adapter.showSearchBar();
     }
+
+    getSearchResults() {
+        return this.jsonViewer?.getSearchWidget().searchResults;
+    }
 }
 
 export default JsonViewerFoundation;

package/jsonViewer/jsonViewer.scss

@@ -83,6 +83,8 @@ $module: #{$prefix}-json-viewer;
         text-align: center;
         width: 50px;
         user-select: none;
+        word-wrap: normal !important;
+        overflow-wrap: normal !important;
     }
 
     &-content-container {

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

@@ -51,6 +51,12 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number;
+    };
     constructor(adapter: CropperAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -72,6 +78,15 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     };
     handleResize: () => void;
     handleImageLoad: (e: any) => void;
+    renderPreview: () => void;
+    updatePreview: (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number;
+    }) => void;
+    removePreview: () => void;
     handleWheel: (e: any) => void;
     getMoveParamByDir(dir: string): {
         paramX: number;

package/lib/cjs/cropper/foundation.js

@@ -156,6 +156,87 @@ class CropperFoundation extends _foundation.default {
         cropperBox: newCropperBoxState,
         loaded: true
       });
+      this.renderPreview();
+    };
+    this.renderPreview = () => {
+      const {
+        preview,
+        src
+      } = this.getProps();
+      const previewNode = preview === null || preview === void 0 ? void 0 : preview();
+      if (!previewNode) {
+        return;
+      }
+      const img = document.createElement('img');
+      this.previewImg = img;
+      this.previewContainer = previewNode;
+      img.src = src;
+      previewNode.appendChild(img);
+      this.previewContainer.style.overflow = 'hidden';
+      // 记录预览容器初始宽高
+      const {
+        width: previewWidth,
+        height: previewHeight
+      } = previewNode.getBoundingClientRect();
+      this.previewContainerInitSize = {
+        width: previewWidth,
+        height: previewHeight
+      };
+    };
+    this.updatePreview = props => {
+      if (!this.previewImg) {
+        return;
+      }
+      const {
+        cropperBox
+      } = this.getStates();
+      let zoom = 1;
+      const {
+        width: containerWidth,
+        height: containerHeight
+      } = this.previewContainerInitSize;
+      let previewWidth = containerWidth;
+      let previewHeight = containerHeight;
+      if (previewWidth < previewHeight) {
+        zoom = containerWidth / cropperBox.width;
+        let tempHeight = zoom * cropperBox.height;
+        if (tempHeight > containerHeight) {
+          zoom = containerHeight / cropperBox.height;
+          previewWidth = zoom * cropperBox.width;
+        } else {
+          previewHeight = tempHeight;
+        }
+      } else {
+        zoom = containerHeight / cropperBox.height;
+        let tempWidth = zoom * cropperBox.width;
+        if (tempWidth > containerWidth) {
+          zoom = containerWidth / cropperBox.width;
+          previewHeight = zoom * cropperBox.height;
+        } else {
+          previewWidth = tempWidth;
+        }
+      }
+      const {
+        width,
+        height,
+        translateX,
+        translateY,
+        rotate
+      } = props;
+      // Set the image style
+      this.previewImg.style.width = `${width * zoom}px`;
+      this.previewImg.style.height = `${height * zoom}px`;
+      this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+      this.previewImg.style.transformOrigin = 'center';
+      // set preview container size
+      this.previewContainer.style.width = `${previewWidth}px`;
+      this.previewContainer.style.height = `${previewHeight}px`;
+    };
+    this.removePreview = () => {
+      if (this.previewImg && this.previewContainer) {
+        this.previewContainer.removeChild(this.previewImg);
+        this.previewImg = null;
+      }
     };
     this.handleWheel = e => {
       // 防止双手缩放导致页面被放大
@@ -729,6 +810,8 @@ class CropperFoundation extends _foundation.default {
     this.rangeX = null;
     this.rangeY = null;
     this.initial = false;
+    this.previewImg = null;
+    this.previewContainer = null;
   }
   init() {
     // 获取容器的宽高
@@ -741,6 +824,7 @@ class CropperFoundation extends _foundation.default {
   destroy() {
     this.unBindMoveEvent();
     this.unBindResizeEvent();
+    this.removePreview();
   }
   getMoveParamByDir(dir) {
     let paramX = 0,

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

@@ -14,12 +14,13 @@ declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     constructor(adapter: JsonViewerAdapter);
     jsonViewer: JsonViewer | null;
     init(): void;
-    search(searchText: string): void;
-    prevSearch(): void;
-    nextSearch(): void;
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean): void;
+    prevSearch(step?: number): void;
+    nextSearch(step?: number): void;
     replace(replaceText: string): void;
     replaceAll(replaceText: string): void;
     setSearchOptions(key: string): void;
     showSearchBar(): void;
+    getSearchResults(): import("@douyinfe/semi-json-viewer-core/src/common/model").FindMatch[];
 }
 export default JsonViewerFoundation;

package/lib/cjs/jsonViewer/foundation.js

@@ -28,23 +28,40 @@ class JsonViewerFoundation extends _foundation.default {
       }
     });
   }
-  search(searchText) {
+  search(searchText, caseSensitive, wholeWord, regex) {
     var _a;
-    const state = this.getState('searchOptions');
+    let options;
+    if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+      options = {
+        caseSensitive: caseSensitive !== null && caseSensitive !== void 0 ? caseSensitive : false,
+        wholeWord: wholeWord !== null && wholeWord !== void 0 ? wholeWord : false,
+        regex: regex !== null && regex !== void 0 ? regex : false
+      };
+    } else {
+      options = this.getState('searchOptions');
+    }
     const {
-      caseSensitive,
-      wholeWord,
-      regex
-    } = state;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+      caseSensitive: cs,
+      wholeWord: ww,
+      regex: rx
+    } = options;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, cs, ww, rx);
   }
-  prevSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+  prevSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(-step);
+    }
   }
-  nextSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+  nextSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(step);
+    }
   }
   replace(replaceText) {
     var _a;
@@ -66,5 +83,9 @@ class JsonViewerFoundation extends _foundation.default {
   showSearchBar() {
     this._adapter.showSearchBar();
   }
+  getSearchResults() {
+    var _a;
+    return (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().searchResults;
+  }
 }
 var _default = exports.default = JsonViewerFoundation;

package/lib/cjs/jsonViewer/jsonViewer.css

@@ -70,6 +70,8 @@
   text-align: center;
   width: 50px;
   user-select: none;
+  word-wrap: normal !important;
+  overflow-wrap: normal !important;
 }
 .semi-json-viewer-content-container {
   scrollbar-width: none; /* 隐藏滚动条（Firefox） */

package/lib/cjs/jsonViewer/jsonViewer.scss

@@ -83,6 +83,8 @@ $module: #{$prefix}-json-viewer;
         text-align: center;
         width: 50px;
         user-select: none;
+        word-wrap: normal !important;
+        overflow-wrap: normal !important;
     }
 
     &-content-container {

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

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { MDXProps } from 'mdx/types';
-import type { PluggableList } from 'unified';
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any;
 }

package/lib/cjs/navigation/navigation.css

@@ -529,12 +529,12 @@
 .semi-navigation-vertical .semi-navigation-header {
   padding-top: 32px;
   padding-bottom: 36px;
-  padding-left: 5.5px;
+  padding-left: 3.5px;
   padding-right: 8px;
   width: 100%;
 }
 .semi-navigation-vertical .semi-navigation-header-collapsed {
-  padding-left: 5.5px;
+  padding-left: 3.5px;
   padding-right: 0;
   transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
@@ -772,12 +772,12 @@
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header {
-  padding-right: 5.5px;
+  padding-right: 3.5px;
   padding-left: 8px;
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed {
-  padding-right: 5.5px;
+  padding-right: 3.5px;
   padding-left: 0;
   transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }

package/lib/cjs/navigation/variables.scss

@@ -47,9 +47,9 @@ $spacing-navigation_dropdown_item_nav_sub_title-paddingY: $spacing-tight; // 导
 $spacing-navigation_dropdown_item_nav_item-marginTop: 0; // 导航栏下拉菜单项顶部外边距
 $spacing-navigation_dropdown_item_nav_item-marginBottom: 0; // 导航栏下拉菜单项底部外边距
 $spacing-navigation_vertical_nav_item_last-marginBottom: 0; // 侧边导航栏下拉最后一个菜单项底部外边距
-$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
+$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
 $spacing-navigation_vertical_nav_header-paddingRight: $spacing-tight; // 侧边导航栏 header 右侧内边距
-$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
+$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
 $spacing-navigation_vertical_nav_header_collapsed-paddingRight: 0; // 侧边导航栏收起后 header 右侧内边距
 $spacing-navigation_vertical_footer-paddingLeft: $spacing-tight; // 侧边导航栏 footer 左侧内边距
 $spacing-navigation_vertical_footer-paddingRight: $spacing-tight; // 侧边导航栏 footer 右侧内边距

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

@@ -59,7 +59,6 @@ export interface PopupContainerDOMRect extends DOMRectLikeType {
 export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
     _timer: ReturnType<typeof setTimeout>;
     _mounted: boolean;
-    anchorName: string;
     constructor(adapter: TooltipAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -77,10 +76,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _reducePos(position?: string): string;
     clearDelayTimer(): void;
     updateStateIfCursorOnTrigger: (trigger: HTMLElement) => void;
-    getNativeAnchorStyle: () => {
-        positionAnchor: string;
-        position: string;
-    };
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
             [x: string]: (event: any) => void;

package/lib/cjs/tooltip/foundation.js

@@ -8,7 +8,6 @@ var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _a11y = require("../utils/a11y");
-var _uuid = require("../utils/uuid");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const REGS = {
   TOP: /top/i,
@@ -29,7 +28,6 @@ class Tooltip extends _foundation.default {
     var _this;
     super(Object.assign({}, adapter));
     _this = this;
-    this.anchorName = `--native-semi-anchor-${(0, _uuid.getUuidShort)()}`;
     this.removePortal = () => {
       this._adapter.removePortal();
     };
@@ -44,26 +42,6 @@ class Tooltip extends _foundation.default {
         (_b = triggerEventSet[eventNames.mouseEnter]) === null || _b === void 0 ? void 0 : _b.call(triggerEventSet);
       }
     };
-    this.getNativeAnchorStyle = () => {
-      const style = {
-        positionAnchor: this.anchorName,
-        position: "fixed"
-      };
-      const position = this._adapter.getProp("position");
-      const spacing = this._adapter.getProp("spacing");
-      if (position === "top") {
-        style['bottom'] = `anchor(top)`;
-        style['justifySelf'] = "anchor-center";
-        style["transform"] = `translateY(-${spacing}px)`;
-      } else if (position === "bottom") {
-        style['top'] = `anchor(bottom)`;
-        style['justifySelf'] = "anchor-center";
-        style["transform"] = `translateY(${spacing}px)`;
-      } else {
-        throw new Error(`Currently, not support position ${position} when enable native anchor ability, only 'top' 'bottom'.`);
-      }
-      return style;
-    };
     this.onResize = () => {
       // this.log('resize');
       // rePosition when window resize

package/lib/cjs/userGuide/userGuide.css

@@ -9,6 +9,9 @@
   height: 100vh;
   pointer-events: none;
 }
+.semi-userGuide-spotlight-transparent-rect {
+  pointer-events: auto;
+}
 .semi-userGuide-spotlight-rect {
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }

package/lib/cjs/userGuide/userGuide.scss

@@ -14,6 +14,10 @@ $module: #{$prefix}-userGuide;
         height: 100vh;
         pointer-events: none;
 
+        &-transparent-rect {
+            pointer-events: auto;
+        }
+
         &-rect {
             transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
         }

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

@@ -51,6 +51,12 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number;
+    };
     constructor(adapter: CropperAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -72,6 +78,15 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     };
     handleResize: () => void;
     handleImageLoad: (e: any) => void;
+    renderPreview: () => void;
+    updatePreview: (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number;
+    }) => void;
+    removePreview: () => void;
     handleWheel: (e: any) => void;
     getMoveParamByDir(dir: string): {
         paramX: number;

package/lib/es/cropper/foundation.js

@@ -149,6 +149,87 @@ export default class CropperFoundation extends BaseFoundation {
         cropperBox: newCropperBoxState,
         loaded: true
       });
+      this.renderPreview();
+    };
+    this.renderPreview = () => {
+      const {
+        preview,
+        src
+      } = this.getProps();
+      const previewNode = preview === null || preview === void 0 ? void 0 : preview();
+      if (!previewNode) {
+        return;
+      }
+      const img = document.createElement('img');
+      this.previewImg = img;
+      this.previewContainer = previewNode;
+      img.src = src;
+      previewNode.appendChild(img);
+      this.previewContainer.style.overflow = 'hidden';
+      // 记录预览容器初始宽高
+      const {
+        width: previewWidth,
+        height: previewHeight
+      } = previewNode.getBoundingClientRect();
+      this.previewContainerInitSize = {
+        width: previewWidth,
+        height: previewHeight
+      };
+    };
+    this.updatePreview = props => {
+      if (!this.previewImg) {
+        return;
+      }
+      const {
+        cropperBox
+      } = this.getStates();
+      let zoom = 1;
+      const {
+        width: containerWidth,
+        height: containerHeight
+      } = this.previewContainerInitSize;
+      let previewWidth = containerWidth;
+      let previewHeight = containerHeight;
+      if (previewWidth < previewHeight) {
+        zoom = containerWidth / cropperBox.width;
+        let tempHeight = zoom * cropperBox.height;
+        if (tempHeight > containerHeight) {
+          zoom = containerHeight / cropperBox.height;
+          previewWidth = zoom * cropperBox.width;
+        } else {
+          previewHeight = tempHeight;
+        }
+      } else {
+        zoom = containerHeight / cropperBox.height;
+        let tempWidth = zoom * cropperBox.width;
+        if (tempWidth > containerWidth) {
+          zoom = containerWidth / cropperBox.width;
+          previewHeight = zoom * cropperBox.height;
+        } else {
+          previewWidth = tempWidth;
+        }
+      }
+      const {
+        width,
+        height,
+        translateX,
+        translateY,
+        rotate
+      } = props;
+      // Set the image style
+      this.previewImg.style.width = `${width * zoom}px`;
+      this.previewImg.style.height = `${height * zoom}px`;
+      this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+      this.previewImg.style.transformOrigin = 'center';
+      // set preview container size
+      this.previewContainer.style.width = `${previewWidth}px`;
+      this.previewContainer.style.height = `${previewHeight}px`;
+    };
+    this.removePreview = () => {
+      if (this.previewImg && this.previewContainer) {
+        this.previewContainer.removeChild(this.previewImg);
+        this.previewImg = null;
+      }
     };
     this.handleWheel = e => {
       // 防止双手缩放导致页面被放大
@@ -722,6 +803,8 @@ export default class CropperFoundation extends BaseFoundation {
     this.rangeX = null;
     this.rangeY = null;
     this.initial = false;
+    this.previewImg = null;
+    this.previewContainer = null;
   }
   init() {
     // 获取容器的宽高
@@ -734,6 +817,7 @@ export default class CropperFoundation extends BaseFoundation {
   destroy() {
     this.unBindMoveEvent();
     this.unBindResizeEvent();
+    this.removePreview();
   }
   getMoveParamByDir(dir) {
     let paramX = 0,

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

@@ -14,12 +14,13 @@ declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     constructor(adapter: JsonViewerAdapter);
     jsonViewer: JsonViewer | null;
     init(): void;
-    search(searchText: string): void;
-    prevSearch(): void;
-    nextSearch(): void;
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean): void;
+    prevSearch(step?: number): void;
+    nextSearch(step?: number): void;
     replace(replaceText: string): void;
     replaceAll(replaceText: string): void;
     setSearchOptions(key: string): void;
     showSearchBar(): void;
+    getSearchResults(): import("@douyinfe/semi-json-viewer-core/src/common/model").FindMatch[];
 }
 export default JsonViewerFoundation;

package/lib/es/jsonViewer/foundation.js

@@ -21,23 +21,40 @@ class JsonViewerFoundation extends BaseFoundation {
       }
     });
   }
-  search(searchText) {
+  search(searchText, caseSensitive, wholeWord, regex) {
     var _a;
-    const state = this.getState('searchOptions');
+    let options;
+    if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+      options = {
+        caseSensitive: caseSensitive !== null && caseSensitive !== void 0 ? caseSensitive : false,
+        wholeWord: wholeWord !== null && wholeWord !== void 0 ? wholeWord : false,
+        regex: regex !== null && regex !== void 0 ? regex : false
+      };
+    } else {
+      options = this.getState('searchOptions');
+    }
     const {
-      caseSensitive,
-      wholeWord,
-      regex
-    } = state;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+      caseSensitive: cs,
+      wholeWord: ww,
+      regex: rx
+    } = options;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, cs, ww, rx);
   }
-  prevSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+  prevSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(-step);
+    }
   }
-  nextSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+  nextSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(step);
+    }
   }
   replace(replaceText) {
     var _a;
@@ -59,5 +76,9 @@ class JsonViewerFoundation extends BaseFoundation {
   showSearchBar() {
     this._adapter.showSearchBar();
   }
+  getSearchResults() {
+    var _a;
+    return (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().searchResults;
+  }
 }
 export default JsonViewerFoundation;

package/lib/es/jsonViewer/jsonViewer.css

@@ -70,6 +70,8 @@
   text-align: center;
   width: 50px;
   user-select: none;
+  word-wrap: normal !important;
+  overflow-wrap: normal !important;
 }
 .semi-json-viewer-content-container {
   scrollbar-width: none; /* 隐藏滚动条（Firefox） */

package/lib/es/jsonViewer/jsonViewer.scss

@@ -83,6 +83,8 @@ $module: #{$prefix}-json-viewer;
         text-align: center;
         width: 50px;
         user-select: none;
+        word-wrap: normal !important;
+        overflow-wrap: normal !important;
     }
 
     &-content-container {

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

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { MDXProps } from 'mdx/types';
-import type { PluggableList } from 'unified';
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any;
 }

package/lib/es/navigation/navigation.css

@@ -529,12 +529,12 @@
 .semi-navigation-vertical .semi-navigation-header {
   padding-top: 32px;
   padding-bottom: 36px;
-  padding-left: 5.5px;
+  padding-left: 3.5px;
   padding-right: 8px;
   width: 100%;
 }
 .semi-navigation-vertical .semi-navigation-header-collapsed {
-  padding-left: 5.5px;
+  padding-left: 3.5px;
   padding-right: 0;
   transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
@@ -772,12 +772,12 @@
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header {
-  padding-right: 5.5px;
+  padding-right: 3.5px;
   padding-left: 8px;
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed {
-  padding-right: 5.5px;
+  padding-right: 3.5px;
   padding-left: 0;
   transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }

package/lib/es/navigation/variables.scss

@@ -47,9 +47,9 @@ $spacing-navigation_dropdown_item_nav_sub_title-paddingY: $spacing-tight; // 导
 $spacing-navigation_dropdown_item_nav_item-marginTop: 0; // 导航栏下拉菜单项顶部外边距
 $spacing-navigation_dropdown_item_nav_item-marginBottom: 0; // 导航栏下拉菜单项底部外边距
 $spacing-navigation_vertical_nav_item_last-marginBottom: 0; // 侧边导航栏下拉最后一个菜单项底部外边距
-$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
+$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
 $spacing-navigation_vertical_nav_header-paddingRight: $spacing-tight; // 侧边导航栏 header 右侧内边距
-$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
+$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
 $spacing-navigation_vertical_nav_header_collapsed-paddingRight: 0; // 侧边导航栏收起后 header 右侧内边距
 $spacing-navigation_vertical_footer-paddingLeft: $spacing-tight; // 侧边导航栏 footer 左侧内边距
 $spacing-navigation_vertical_footer-paddingRight: $spacing-tight; // 侧边导航栏 footer 右侧内边距

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

@@ -59,7 +59,6 @@ export interface PopupContainerDOMRect extends DOMRectLikeType {
 export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
     _timer: ReturnType<typeof setTimeout>;
     _mounted: boolean;
-    anchorName: string;
     constructor(adapter: TooltipAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -77,10 +76,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _reducePos(position?: string): string;
     clearDelayTimer(): void;
     updateStateIfCursorOnTrigger: (trigger: HTMLElement) => void;
-    getNativeAnchorStyle: () => {
-        positionAnchor: string;
-        position: string;
-    };
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
             [x: string]: (event: any) => void;

package/lib/es/tooltip/foundation.js

@@ -2,7 +2,6 @@ import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
 import { handlePrevent } from '../utils/a11y';
-import { getUuidShort } from "../utils/uuid";
 const REGS = {
   TOP: /top/i,
   RIGHT: /right/i,
@@ -22,7 +21,6 @@ export default class Tooltip extends BaseFoundation {
     var _this;
     super(Object.assign({}, adapter));
     _this = this;
-    this.anchorName = `--native-semi-anchor-${getUuidShort()}`;
     this.removePortal = () => {
       this._adapter.removePortal();
     };
@@ -37,26 +35,6 @@ export default class Tooltip extends BaseFoundation {
         (_b = triggerEventSet[eventNames.mouseEnter]) === null || _b === void 0 ? void 0 : _b.call(triggerEventSet);
       }
     };
-    this.getNativeAnchorStyle = () => {
-      const style = {
-        positionAnchor: this.anchorName,
-        position: "fixed"
-      };
-      const position = this._adapter.getProp("position");
-      const spacing = this._adapter.getProp("spacing");
-      if (position === "top") {
-        style['bottom'] = `anchor(top)`;
-        style['justifySelf'] = "anchor-center";
-        style["transform"] = `translateY(-${spacing}px)`;
-      } else if (position === "bottom") {
-        style['top'] = `anchor(bottom)`;
-        style['justifySelf'] = "anchor-center";
-        style["transform"] = `translateY(${spacing}px)`;
-      } else {
-        throw new Error(`Currently, not support position ${position} when enable native anchor ability, only 'top' 'bottom'.`);
-      }
-      return style;
-    };
     this.onResize = () => {
       // this.log('resize');
       // rePosition when window resize

package/lib/es/userGuide/userGuide.css

@@ -9,6 +9,9 @@
   height: 100vh;
   pointer-events: none;
 }
+.semi-userGuide-spotlight-transparent-rect {
+  pointer-events: auto;
+}
 .semi-userGuide-spotlight-rect {
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }

package/lib/es/userGuide/userGuide.scss

@@ -14,6 +14,10 @@ $module: #{$prefix}-userGuide;
         height: 100vh;
         pointer-events: none;
 
+        &-transparent-rect {
+            pointer-events: auto;
+        }
+
         &-rect {
             transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
         }

package/markdownRender/foundation.ts

@@ -2,8 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
 import { MDXProps } from 'mdx/types';
 import remarkGfm from 'remark-gfm';
-import type { PluggableList } from 'unified';
-
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any
 

package/navigation/variables.scss

@@ -47,9 +47,9 @@ $spacing-navigation_dropdown_item_nav_sub_title-paddingY: $spacing-tight; // 导
 $spacing-navigation_dropdown_item_nav_item-marginTop: 0; // 导航栏下拉菜单项顶部外边距
 $spacing-navigation_dropdown_item_nav_item-marginBottom: 0; // 导航栏下拉菜单项底部外边距
 $spacing-navigation_vertical_nav_item_last-marginBottom: 0; // 侧边导航栏下拉最后一个菜单项底部外边距
-$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
+$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏 header 左侧内边距
 $spacing-navigation_vertical_nav_header-paddingRight: $spacing-tight; // 侧边导航栏 header 右侧内边距
-$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
+$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-navigation_collapsed-paddingX * 2 - $width-navigation_border - $height-navigation_header_logo_collapsed) * 0.5; // 侧边导航栏收起后 header 左侧内边距
 $spacing-navigation_vertical_nav_header_collapsed-paddingRight: 0; // 侧边导航栏收起后 header 右侧内边距
 $spacing-navigation_vertical_footer-paddingLeft: $spacing-tight; // 侧边导航栏 footer 左侧内边距
 $spacing-navigation_vertical_footer-paddingRight: $spacing-tight; // 侧边导航栏 footer 右侧内边距

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.78.0-alpha.2",
+    "version": "2.78.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.78.0-alpha.2",
-        "@douyinfe/semi-json-viewer-core": "2.78.0-alpha.2",
+        "@douyinfe/semi-animation": "2.78.0-beta.0",
+        "@douyinfe/semi-json-viewer-core": "2.78.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "8f2966f2472daa5369f886b2c246ceccf59ed94e",
+    "gitHead": "763dd181e5b8c00d69b15a0cec20b011532742ab",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tooltip/foundation.ts

@@ -4,7 +4,6 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { ArrayElement } from '../utils/type';
 import { strings } from './constants';
 import { handlePrevent } from '../utils/a11y';
-import { getUuidShort } from "../utils/uuid";
 
 const REGS = {
     TOP: /top/i,
@@ -82,7 +81,7 @@ export interface PopupContainerDOMRect extends DOMRectLikeType {
 export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
     _timer: ReturnType<typeof setTimeout>;
     _mounted: boolean;
-    anchorName = `--native-semi-anchor-${getUuidShort()}`
+
     constructor(adapter: TooltipAdapter<P, S>) {
         super({ ...adapter });
         this._timer = null;
@@ -136,7 +135,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     unBindResizeEvent() {
         this._adapter.unregisterResizeHandler(this.onResize);
     }
-
+  
     removePortal = () => {
         this._adapter.removePortal();
     }
@@ -200,29 +199,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         }
     }
 
-    getNativeAnchorStyle = () => {
-        const style = {
-            positionAnchor: this.anchorName,
-            position: "fixed",
-        };
-        const position = this._adapter.getProp("position");
-        const spacing = this._adapter.getProp("spacing");
-        if (position === "top") {
-            style['bottom'] = `anchor(top)`;
-            style['justifySelf'] = "anchor-center";
-            style["transform"] = `translateY(-${spacing}px)`;
-           
-        } else if (position === "bottom") {
-            style['top'] = `anchor(bottom)`;
-            style['justifySelf'] = "anchor-center";
-            style["transform"] = `translateY(${spacing}px)`;
-
-        } else {
-            throw new Error(`Currently, not support position ${position} when enable native anchor ability, only 'top' 'bottom'.`);
-        }
-        return style;
-    }
-
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>) {
         const eventNames = this._adapter.getEventName();
         const triggerEventSet = {

package/userGuide/userGuide.scss

@@ -14,6 +14,10 @@ $module: #{$prefix}-userGuide;
         height: 100vh;
         pointer-events: none;
 
+        &-transparent-rect {
+            pointer-events: auto;
+        }
+
         &-rect {
             transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
         }