@bifrostui/utils 1.4.8-beta.0 → 2.0.0-beta.1

package/dist/isMini.js

@@ -20,14 +20,12 @@ __export(isMini_exports, {
   isAlipay: () => isAlipay,
   isMini: () => isMini,
   isMiniapp: () => isMiniapp,
-  isTt: () => isTt,
   isWeapp: () => isWeapp
 });
 module.exports = __toCommonJS(isMini_exports);
 const isMini = typeof process.env.TARO_ENV === "string";
 const isWeapp = process.env.TARO_ENV === "weapp";
 const isAlipay = process.env.TARO_ENV === "alipay";
-const isTt = process.env.TARO_ENV === "tt";
 const isMiniapp = () => {
   return isMini;
 };
@@ -36,6 +34,5 @@ const isMiniapp = () => {
   isAlipay,
   isMini,
   isMiniapp,
-  isTt,
   isWeapp
 });

package/es/directionLocationUtil.d.ts

@@ -22,41 +22,26 @@ export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirectio
     tipOffset: any;
     arrowLocation: any;
     offsetSpacing: any;
-}) => Promise<{
-    styles: {
-        top: number;
-        left: number;
-        transform: string;
-        visibility: string;
-    };
+}) => {
+    styles: any;
     childrenStyle: any;
-}>;
+};
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, tipRef, arrowDirection, arrowLocation, offsetSpacing, }: {
+export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
     scrollRoot?: Element;
-    childrenRef?: React.RefObject<any>;
-    tipRef?: React.RefObject<any>;
-    arrowDirection: string;
-    arrowLocation: string;
-    offsetSpacing?: number;
-}) => Promise<{
-    styles: {};
-    childrenStyle: {};
-    newArrowDirection: string;
-    newArrowLocation: string;
-} | {
-    styles: {
-        top: number;
-        left: number;
-        transform: string;
-        visibility: string;
-    };
+    childrenRef: any;
+    arrowDirection: any;
+    arrowLocation: any;
+    offsetSpacing: any;
+    selector: any;
+}) => {
+    styles: any;
     childrenStyle: any;
     newArrowDirection: any;
     newArrowLocation: any;
-}>;
+};
 export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
     trigger: any;
     click: any;

package/es/directionLocationUtil.js

@@ -1,31 +1,12 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { getScrollRect, getClientRect } from "./domUtils";
-import getBoundingClientRect from "./getBoundingClientRect";
 const directionCssMap = {
   left: "right",
   right: "left",
   top: "bottom",
   bottom: "top"
 };
+const isBodyScroll = (scrollRoot) => {
+  return scrollRoot === document.body;
+};
 const getNewDirectionLocation = ({
   scrollRoot,
   scrollRootOffset,
@@ -48,15 +29,14 @@ const getNewDirectionLocation = ({
     top: sTop,
     bottom: sBottom,
     left: sLeft,
-    right: sRight,
-    width: pageWidth,
-    height: pageHeight
+    right: sRight
   } = scrollRootOffset;
-  const isBodyRoot = !scrollRoot;
-  const maxTop = isBodyRoot ? 0 : sTop;
-  const maxBottom = isBodyRoot ? pageHeight : sBottom;
-  const maxLeft = isBodyRoot ? 0 : sLeft;
-  const maxRight = isBodyRoot ? pageWidth : sRight;
+  const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
+  const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
+  const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
+  const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
   let newArrowDirection = arrowDirection;
   let newArrowLocation = arrowLocation;
   const isDirectionTop = arrowDirection === "top";
@@ -91,14 +71,16 @@ const getNewDirectionLocation = ({
     newArrowLocation
   };
 };
-const getDirectionLocationStyle = (_0) => __async(void 0, [_0], function* ({
+const getDirectionLocationStyle = ({
   childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
   offsetSpacing
-}) {
-  const { top: scrollTop, left: scrollLeft } = yield getScrollRect();
+}) => {
+  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
+  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
+  const styles = {};
   const {
     width: cWidth,
     height: cHeight,
@@ -112,125 +94,107 @@ const getDirectionLocationStyle = (_0) => __async(void 0, [_0], function* ({
     childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
   }
   const { width, height } = tipOffset;
-  let styleTop;
-  let styleLeft;
   if (arrowDirection === "top") {
-    styleTop = cTop - offsetSpacing - height;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
-        styleLeft = cLeft;
+        styles.left = cLeft;
         break;
       case "center":
-        styleLeft = cLeft + (cWidth - width) / 2;
+        styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styleLeft = cRight - width;
+        styles.left = cRight - width;
         break;
       case "none":
-        styleLeft = cLeft;
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styleTop = cBottom + offsetSpacing;
+    styles.top = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
-        styleLeft = cLeft;
+        styles.left = cLeft;
         break;
       case "center":
-        styleLeft = cLeft + (cWidth - width) / 2;
+        styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styleLeft = cRight - width;
+        styles.left = cRight - width;
         break;
       case "none":
-        styleLeft = cLeft;
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styleLeft = cLeft - offsetSpacing - width;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
-        styleTop = cTop;
+        styles.top = cTop;
         break;
       case "center":
-        styleTop = cTop + (cHeight - height) / 2;
+        styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styleTop = cBottom - height;
+        styles.top = cBottom - height;
         break;
       case "none":
-        styleTop = cTop;
+        styles.top = cTop;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styleLeft = cRight + offsetSpacing;
+    styles.left = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
-        styleTop = cTop;
+        styles.top = cTop;
         break;
       case "center":
-        styleTop = cTop + (cHeight - height) / 2;
+        styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styleTop = cBottom - height;
+        styles.top = cBottom - height;
         break;
       case "none":
-        styleTop = cTop;
+        styles.top = cTop;
         break;
       default:
         break;
     }
   }
-  if (styleTop) {
-    styleTop = `${styleTop + scrollTop}px`;
+  if (styles.top) {
+    styles.top = `${styles.top + scrollTop}px`;
   }
-  if (styleLeft) {
-    styleLeft = `${styleLeft + scrollLeft}px`;
+  if (styles.left) {
+    styles.left = `${styles.left + scrollLeft}px`;
   }
-  const styles = {
-    top: 0,
-    left: 0,
-    transform: `translate3d(${styleLeft}, ${styleTop}, 0)`,
-    visibility: ""
-  };
   return { styles, childrenStyle };
-});
-const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
-  scrollRoot,
+};
+const getStylesAndLocation = ({
+  scrollRoot = document.body,
   childrenRef,
-  tipRef,
-  arrowDirection = "top",
-  arrowLocation = "center",
-  offsetSpacing = 0
-}) {
+  arrowDirection,
+  arrowLocation,
+  offsetSpacing,
+  selector
+}) => {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
     console.error(
       "\u7EC4\u4EF6\u5305\u88F9\u7684children\u53EF\u80FD\u662F\u4E00\u4E2A\u7EC4\u4EF6\uFF0C\u60A8\u7684\u5F53\u524D\u5199\u6CD5\u53EF\u80FD\u5BFC\u81F4ref\u6CA1\u6709\u7ED1\u5B9A\u5230children\u4E0A\uFF0C\u8BF7\u5C1D\u8BD5\u5BF9children\u5BF9\u5E94\u7684\u7EC4\u4EF6\u4F7F\u7528/* @__PURE__ */ React.forwardRef\u6765\u89E3\u51B3"
     );
     return null;
   }
-  const childrenOffset = yield getBoundingClientRect(childrenRef.current);
-  const tipOffset = yield getBoundingClientRect(tipRef.current);
-  if (!tipOffset || !childrenOffset) {
-    return {
-      styles: {},
-      childrenStyle: {},
-      newArrowDirection: arrowDirection,
-      newArrowLocation: arrowLocation
-    };
-  }
-  let scrollRootOffset;
-  if (scrollRoot) {
-    scrollRootOffset = yield getBoundingClientRect(scrollRoot);
-  } else {
-    scrollRootOffset = yield getClientRect();
-  }
+  const childrenOffset = childrenRef.current.getBoundingClientRect();
+  const $rtDom = document.querySelector(selector);
+  if (!$rtDom)
+    return null;
+  const tipOffset = $rtDom.getBoundingClientRect();
+  const scrollRootOffset = scrollRoot.getBoundingClientRect();
   const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
     scrollRoot,
     scrollRootOffset,
@@ -240,7 +204,7 @@ const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
     arrowLocation,
     offsetSpacing
   });
-  const { styles, childrenStyle } = yield getDirectionLocationStyle({
+  const { styles, childrenStyle } = getDirectionLocationStyle({
     childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
@@ -254,7 +218,7 @@ const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
     newArrowDirection,
     newArrowLocation
   };
-});
+};
 const onMouseEnter = "onMouseEnter";
 const onMouseLeave = "onMouseLeave";
 const onClick = "onClick";

package/es/getBoundingClientRect/index.miniapp.d.ts

@@ -1 +1,2 @@
-export default function getBoundingClientRect(ele: any): Promise<DOMRect>;
+import type { TaroElement } from '@tarojs/runtime';
+export default function getBoundingClientRect(ele: TaroElement): Promise<DOMRect>;

package/es/getBoundingClientRect/index.miniapp.js

@@ -1,39 +1,10 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import Taro from "@tarojs/taro";
-import { isTt, isWeapp } from "../isMini";
 function getBoundingClientRect(ele) {
-  return __async(this, null, function* () {
-    let result;
-    if (isWeapp || isTt) {
-      result = yield ele.getBoundingClientRect();
-    } else {
-      const query = Taro.createSelectorQuery();
-      result = yield new Promise((resolve) => {
-        query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
-          resolve(res);
-        });
-      });
-    }
-    return result;
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery();
+    query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
+      resolve(res);
+    });
   });
 }
 export {

package/es/getRootElement/index.d.ts

@@ -0,0 +1,2 @@
+declare const getRootElement: (rootEle?: HTMLElement | (() => HTMLElement)) => HTMLElement;
+export default getRootElement;

package/es/getRootElement/index.js

@@ -0,0 +1,9 @@
+const getRootElement = (rootEle) => {
+  const rootElement = typeof rootEle === "function" ? rootEle() : rootEle;
+  const defaultRootElement = document.body;
+  return rootElement || defaultRootElement;
+};
+var getRootElement_default = getRootElement;
+export {
+  getRootElement_default as default
+};

package/es/getRootElement/index.miniapp.d.ts

@@ -0,0 +1,3 @@
+import type { TaroElement } from '@tarojs/runtime';
+declare const getRootElement: (rootEle?: TaroElement | (() => TaroElement)) => HTMLElement | TaroElement;
+export default getRootElement;

package/es/{getRootContainer → getRootElement}/index.miniapp.js

@@ -1,13 +1,13 @@
 import Taro from "@tarojs/taro";
-const getRootContainer = (rootCon, defaultCon) => {
+const getRootElement = (rootEle) => {
   const currentPages = Taro.getCurrentPages() || [];
   const currentPage = currentPages[currentPages.length - 1];
   const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
   const defaultRootElement = document.getElementById(pageElement);
-  const rootElement = typeof rootCon === "function" ? rootCon() : rootCon;
-  return rootElement || defaultCon || defaultRootElement;
+  const rootElement = typeof rootEle === "function" ? rootEle() : rootEle;
+  return rootElement || defaultRootElement;
 };
-var index_miniapp_default = getRootContainer;
+var index_miniapp_default = getRootElement;
 export {
   index_miniapp_default as default
 };

package/es/hooks/index.d.ts

@@ -1,11 +1,11 @@
 import useDidMountEffect from './useDidMountEffect';
 import useEventCallback from './useEventCallback';
 import useForkRef from './useForkRef';
-import useTouchEmulator, { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd } from './useTouchEmulator';
+import useTouchEmulator from './useTouchEmulator';
 import useValue from './useValue';
 import useDomReady from './useDomReady';
 import useSize from './useSize';
 import useDomCss from './useDomCss';
 import useTouch from './useTouch';
 import useUniqueId from './useUniqueId';
-export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
+export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };

package/es/hooks/index.js

@@ -1,12 +1,7 @@
 import useDidMountEffect from "./useDidMountEffect";
 import useEventCallback from "./useEventCallback";
 import useForkRef from "./useForkRef";
-import useTouchEmulator, {
-  touchEmulator,
-  emulateTouchStart,
-  emulateTouchMove,
-  emulateTouchEnd
-} from "./useTouchEmulator";
+import useTouchEmulator from "./useTouchEmulator";
 import useValue from "./useValue";
 import useDomReady from "./useDomReady";
 import useSize from "./useSize";
@@ -14,10 +9,6 @@ import useDomCss from "./useDomCss";
 import useTouch from "./useTouch";
 import useUniqueId from "./useUniqueId";
 export {
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
-  touchEmulator,
   useDidMountEffect,
   useDomCss,
   useDomReady,

package/es/hooks/useDidMountEffect.d.ts

@@ -1,5 +1,5 @@
 /**
- * skip inital run useEffect
+ * skip initial run useEffect
  */
 declare const useDidMountEffect: (func: any, deps: any) => void;
 export default useDidMountEffect;

package/es/hooks/useTouchEmulator.d.ts

@@ -1,7 +1 @@
-declare const emulateTouchStart: (ev: any) => void;
-declare const emulateTouchMove: (ev: any) => void;
-declare const emulateTouchEnd: (ev: any) => void;
-declare function useTouchEmulator(dom?: HTMLElement | Window): void;
-declare const touchEmulator: (dom?: HTMLElement | Window) => () => void;
-export default useTouchEmulator;
-export { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd };
+export default function useTouchEmulator(dom?: HTMLElement | Window): void;

package/es/hooks/useTouchEmulator.js

@@ -66,44 +66,25 @@ function getActiveTouches(mouseEv) {
   }
   return createTouchList(mouseEv);
 }
-const emulateTouchStart = onMouse("touchstart");
-const emulateTouchMove = onMouse("touchmove");
-const emulateTouchEnd = onMouse("touchend");
 function useTouchEmulator(dom = window) {
+  const touchStart = onMouse("touchstart");
+  const touchMove = onMouse("touchmove");
+  const touchEnd = onMouse("touchend");
   useEffect(() => {
     if (dom) {
-      dom.addEventListener("mousedown", emulateTouchStart, true);
-      dom.addEventListener("mousemove", emulateTouchMove, true);
-      dom.addEventListener("mouseup", emulateTouchEnd, true);
+      dom.addEventListener("mousedown", touchStart, true);
+      dom.addEventListener("mousemove", touchMove, true);
+      dom.addEventListener("mouseup", touchEnd, true);
     }
     return () => {
       if (dom) {
-        dom.removeEventListener("mousedown", emulateTouchStart, true);
-        dom.removeEventListener("mousemove", emulateTouchMove, true);
-        dom.removeEventListener("mouseup", emulateTouchEnd, true);
+        dom.removeEventListener("mousedown", touchStart, true);
+        dom.removeEventListener("mousemove", touchMove, true);
+        dom.removeEventListener("mouseup", touchEnd, true);
       }
     };
   }, [dom]);
 }
-const touchEmulator = (dom = window) => {
-  if (dom) {
-    dom.addEventListener("mousedown", emulateTouchStart, true);
-    dom.addEventListener("mousemove", emulateTouchMove, true);
-    dom.addEventListener("mouseup", emulateTouchEnd, true);
-  }
-  return function() {
-    if (dom) {
-      dom.removeEventListener("mousedown", emulateTouchStart, true);
-      dom.removeEventListener("mousemove", emulateTouchMove, true);
-      dom.removeEventListener("mouseup", emulateTouchEnd, true);
-    }
-  };
-};
-var useTouchEmulator_default = useTouchEmulator;
 export {
-  useTouchEmulator_default as default,
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
-  touchEmulator
+  useTouchEmulator as default
 };

package/es/index.d.ts

@@ -1,7 +1,7 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, getNewDirectionLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
-export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
+export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';
 export { isMini, isWeapp, isAlipay, isMiniapp } from './isMini';
 export { default as setRef } from './setRef';
@@ -9,8 +9,7 @@ export { default as throttle } from './throttle';
 export { default as toArray } from './toArray';
 export { default as blockTouch } from './touchBlocker';
 export { easing, duration, getTransitionProps, createTransitions, } from './transitions';
-export { default as getRootContainer } from './getRootContainer';
+export { default as getRootElement } from './getRootElement';
 export { default as getBoundingClientRect } from './getBoundingClientRect';
-export { getScrollRect, getClientRect } from './domUtils';
 export * from './isType';
 export * from './render';

package/es/index.js

@@ -1,7 +1,6 @@
 import { default as default2 } from "./debounce";
 import {
   getStylesAndLocation,
-  getNewDirectionLocation,
   triggerEventTransform,
   parsePlacement
 } from "./directionLocationUtil";
@@ -11,10 +10,6 @@ import {
   useEventCallback,
   useForkRef,
   useTouchEmulator,
-  touchEmulator,
-  emulateTouchStart,
-  emulateTouchMove,
-  emulateTouchEnd,
   useValue,
   useDomReady,
   useSize,
@@ -34,9 +29,8 @@ import {
   getTransitionProps,
   createTransitions
 } from "./transitions";
-import { default as default9 } from "./getRootContainer";
+import { default as default9 } from "./getRootElement";
 import { default as default10 } from "./getBoundingClientRect";
-import { getScrollRect, getClientRect } from "./domUtils";
 export * from "./isType";
 export * from "./render";
 export {
@@ -46,14 +40,8 @@ export {
   default2 as debounce,
   duration,
   easing,
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
   default10 as getBoundingClientRect,
-  getClientRect,
-  getNewDirectionLocation,
-  default9 as getRootContainer,
-  getScrollRect,
+  default9 as getRootElement,
   getStylesAndLocation,
   getTransitionProps,
   isAlipay,
@@ -65,7 +53,6 @@ export {
   default5 as setRef,
   default6 as throttle,
   default7 as toArray,
-  touchEmulator,
   triggerEventTransform,
   useDidMountEffect,
   useDomCss,

package/es/isMini.d.ts

@@ -1,6 +1,5 @@
 declare const isMini: boolean;
 declare const isWeapp: boolean;
 declare const isAlipay: boolean;
-declare const isTt: boolean;
-export { isMini, isWeapp, isAlipay, isTt };
+export { isMini, isWeapp, isAlipay };
 export declare const isMiniapp: () => boolean;

package/es/isMini.js

@@ -1,7 +1,6 @@
 const isMini = typeof process.env.TARO_ENV === "string";
 const isWeapp = process.env.TARO_ENV === "weapp";
 const isAlipay = process.env.TARO_ENV === "alipay";
-const isTt = process.env.TARO_ENV === "tt";
 const isMiniapp = () => {
   return isMini;
 };
@@ -9,6 +8,5 @@ export {
   isAlipay,
   isMini,
   isMiniapp,
-  isTt,
   isWeapp
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/utils",
-  "version": "1.4.8-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "BUI React utilities for building components.",
   "main": "dist/index.js",
   "module": "es/index.js",

package/dist/domUtils/index.d.ts

@@ -1,12 +0,0 @@
-export declare const getClientRect: () => Promise<{
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}>;
-export declare const getScrollRect: () => Promise<{
-    top: number;
-    left: number;
-}>;