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

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 "@mdx-js/mdx/lib/core";
+import type { PluggableList } from 'unified';
 export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any;
 }

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

@@ -59,6 +59,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: string;
     constructor(adapter: TooltipAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -76,6 +77,10 @@ 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,6 +8,7 @@ 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,
@@ -28,6 +29,7 @@ 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();
     };
@@ -42,6 +44,26 @@ 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/es/markdownRender/foundation.d.ts

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

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

@@ -59,6 +59,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: string;
     constructor(adapter: TooltipAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -76,6 +77,10 @@ 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,6 +2,7 @@ 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,
@@ -21,6 +22,7 @@ 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();
     };
@@ -35,6 +37,26 @@ 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/markdownRender/foundation.ts

@@ -2,7 +2,8 @@ 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 "@mdx-js/mdx/lib/core";
+import type { PluggableList } from 'unified';
+
 export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any
 

package/package.json

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

package/tooltip/foundation.ts

@@ -4,6 +4,7 @@ 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,
@@ -81,7 +82,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;
@@ -135,7 +136,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     unBindResizeEvent() {
         this._adapter.unregisterResizeHandler(this.onResize);
     }
-  
+
     removePortal = () => {
         this._adapter.removePortal();
     }
@@ -199,6 +200,29 @@ 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 = {