@bifrostui/utils 1.4.2 → 1.4.3

package/dist/directionLocationUtil.d.ts

@@ -1,11 +1,14 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
-    rootOffset: any;
+export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    scrollRoot: any;
+    scrollRootOffset: any;
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => {
     newArrowDirection: any;
     newArrowLocation: any;
@@ -13,22 +16,29 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
-    rootOffset: any;
+export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
-}) => any;
+    offsetSpacing: any;
+}) => {
+    styles: any;
+    childrenStyle: any;
+};
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+    scrollRoot?: Element;
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
+    offsetSpacing: any;
     selector: any;
 }) => {
     styles: any;
+    childrenStyle: any;
     newArrowDirection: any;
     newArrowLocation: any;
 };
@@ -38,3 +48,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
     show: any;
     hide: any;
 }) => {};
+/**
+ * for example： placement = 'topLeft'， return { direction: 'top', location: 'left' }
+ * @param placement
+ * @returns
+ */
+export declare const parsePlacement: (placement: any) => {
+    direction: any;
+    location: any;
+};

package/dist/directionLocationUtil.js

@@ -20,6 +20,7 @@ __export(directionLocationUtil_exports, {
   getDirectionLocationStyle: () => getDirectionLocationStyle,
   getNewDirectionLocation: () => getNewDirectionLocation,
   getStylesAndLocation: () => getStylesAndLocation,
+  parsePlacement: () => parsePlacement,
   triggerEventTransform: () => triggerEventTransform
 });
 module.exports = __toCommonJS(directionLocationUtil_exports);
@@ -29,55 +30,82 @@ const directionCssMap = {
   top: "bottom",
   bottom: "top"
 };
+const isBodyScroll = (scrollRoot) => {
+  return scrollRoot === document.body;
+};
 const getNewDirectionLocation = ({
-  rootOffset,
+  scrollRoot,
+  scrollRootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
-  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const {
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom,
+    width: cWidth,
+    height: cHeight
+  } = childrenOffset;
   const { width, height } = tipOffset;
-  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
-  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const {
+    top: sTop,
+    bottom: sBottom,
+    left: sLeft,
+    right: sRight
+  } = scrollRootOffset;
+  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";
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
-  if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
+  if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
     newArrowLocation = directionCssMap[arrowLocation];
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > maxRight) {
       newArrowLocation = directionCssMap.left;
-    } else if (cRight - width < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < maxLeft) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + height > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
       newArrowLocation = directionCssMap.top;
-    } else if (cBottom - height < 0) {
+    } else if (cTop + (cHeight - height) / 2 < maxTop) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
+  if (arrowLocation === "none") {
+    newArrowLocation = "none";
+  }
   return {
     newArrowDirection,
     newArrowLocation
   };
 };
 const getDirectionLocationStyle = ({
-  rootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
   const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
   const styles = {};
   const {
     width: cWidth,
@@ -86,11 +114,14 @@ const getDirectionLocationStyle = ({
     right: cRight,
     top: cTop,
     bottom: cBottom
-  } = rootOffset;
+  } = childrenOffset;
+  let childrenStyle = {};
+  if (cWidth && cHeight) {
+    childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
+  }
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -99,14 +130,16 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.left = cRight - width;
+        break;
+      case "none":
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styles.top = cBottom;
+    styles.top = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -115,15 +148,16 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translateX(-100%)`;
+        styles.left = cRight - width;
+        break;
+      case "none":
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styles.left = cLeft;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -132,14 +166,16 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.top = cBottom - height;
+        break;
+      case "none":
+        styles.top = cTop;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styles.left = cRight;
+    styles.left = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -148,8 +184,10 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translateY(-100%)`;
+        styles.top = cBottom - height;
+        break;
+      case "none":
+        styles.top = cTop;
         break;
       default:
         break;
@@ -161,12 +199,14 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  return styles;
+  return { styles, childrenStyle };
 };
 const getStylesAndLocation = ({
+  scrollRoot = document.body,
   childrenRef,
   arrowDirection,
   arrowLocation,
+  offsetSpacing,
   selector
 }) => {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -175,26 +215,32 @@ const getStylesAndLocation = ({
     );
     return null;
   }
-  const rootOffset = childrenRef.current.getBoundingClientRect();
+  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({
-    rootOffset,
+    scrollRoot,
+    scrollRootOffset,
+    childrenOffset,
     arrowDirection,
     tipOffset,
-    arrowLocation
+    arrowLocation,
+    offsetSpacing
   });
-  const styles = getDirectionLocationStyle({
-    rootOffset,
+  const { styles, childrenStyle } = getDirectionLocationStyle({
+    childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
-    arrowLocation: newArrowLocation
+    arrowLocation: newArrowLocation,
+    offsetSpacing
   });
   styles.visibility = "visible";
   return {
     styles,
+    childrenStyle,
     newArrowDirection,
     newArrowLocation
   };
@@ -232,10 +278,24 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
   });
   return option;
 };
+const parsePlacement = (placement) => {
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  }
+  return {
+    direction,
+    location
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getDirectionLocationStyle,
   getNewDirectionLocation,
   getStylesAndLocation,
+  parsePlacement,
   triggerEventTransform
 });

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

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
 export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   isMini: () => import_isMini.isMini,
   isMiniapp: () => import_isMini.isMiniapp,
   isWeapp: () => import_isMini.isWeapp,
+  parsePlacement: () => import_directionLocationUtil.parsePlacement,
   setRef: () => import_setRef.default,
   throttle: () => import_throttle.default,
   toArray: () => import_toArray.default,
@@ -91,6 +92,7 @@ __reExport(src_exports, require("./render"), module.exports);
   isMini,
   isMiniapp,
   isWeapp,
+  parsePlacement,
   setRef,
   throttle,
   toArray,

package/es/directionLocationUtil.d.ts

@@ -1,11 +1,14 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
-    rootOffset: any;
+export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    scrollRoot: any;
+    scrollRootOffset: any;
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => {
     newArrowDirection: any;
     newArrowLocation: any;
@@ -13,22 +16,29 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
-    rootOffset: any;
+export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
-}) => any;
+    offsetSpacing: any;
+}) => {
+    styles: any;
+    childrenStyle: any;
+};
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+    scrollRoot?: Element;
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
+    offsetSpacing: any;
     selector: any;
 }) => {
     styles: any;
+    childrenStyle: any;
     newArrowDirection: any;
     newArrowLocation: any;
 };
@@ -38,3 +48,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
     show: any;
     hide: any;
 }) => {};
+/**
+ * for example： placement = 'topLeft'， return { direction: 'top', location: 'left' }
+ * @param placement
+ * @returns
+ */
+export declare const parsePlacement: (placement: any) => {
+    direction: any;
+    location: any;
+};

package/es/directionLocationUtil.js

@@ -4,55 +4,82 @@ const directionCssMap = {
   top: "bottom",
   bottom: "top"
 };
+const isBodyScroll = (scrollRoot) => {
+  return scrollRoot === document.body;
+};
 const getNewDirectionLocation = ({
-  rootOffset,
+  scrollRoot,
+  scrollRootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
-  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const {
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom,
+    width: cWidth,
+    height: cHeight
+  } = childrenOffset;
   const { width, height } = tipOffset;
-  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
-  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const {
+    top: sTop,
+    bottom: sBottom,
+    left: sLeft,
+    right: sRight
+  } = scrollRootOffset;
+  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";
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
-  if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
+  if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
     newArrowLocation = directionCssMap[arrowLocation];
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > maxRight) {
       newArrowLocation = directionCssMap.left;
-    } else if (cRight - width < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < maxLeft) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + height > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
       newArrowLocation = directionCssMap.top;
-    } else if (cBottom - height < 0) {
+    } else if (cTop + (cHeight - height) / 2 < maxTop) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
+  if (arrowLocation === "none") {
+    newArrowLocation = "none";
+  }
   return {
     newArrowDirection,
     newArrowLocation
   };
 };
 const getDirectionLocationStyle = ({
-  rootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
   const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
   const styles = {};
   const {
     width: cWidth,
@@ -61,11 +88,14 @@ const getDirectionLocationStyle = ({
     right: cRight,
     top: cTop,
     bottom: cBottom
-  } = rootOffset;
+  } = childrenOffset;
+  let childrenStyle = {};
+  if (cWidth && cHeight) {
+    childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
+  }
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -74,14 +104,16 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.left = cRight - width;
+        break;
+      case "none":
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styles.top = cBottom;
+    styles.top = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -90,15 +122,16 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translateX(-100%)`;
+        styles.left = cRight - width;
+        break;
+      case "none":
+        styles.left = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styles.left = cLeft;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -107,14 +140,16 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.top = cBottom - height;
+        break;
+      case "none":
+        styles.top = cTop;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styles.left = cRight;
+    styles.left = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -123,8 +158,10 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translateY(-100%)`;
+        styles.top = cBottom - height;
+        break;
+      case "none":
+        styles.top = cTop;
         break;
       default:
         break;
@@ -136,12 +173,14 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  return styles;
+  return { styles, childrenStyle };
 };
 const getStylesAndLocation = ({
+  scrollRoot = document.body,
   childrenRef,
   arrowDirection,
   arrowLocation,
+  offsetSpacing,
   selector
 }) => {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -150,26 +189,32 @@ const getStylesAndLocation = ({
     );
     return null;
   }
-  const rootOffset = childrenRef.current.getBoundingClientRect();
+  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({
-    rootOffset,
+    scrollRoot,
+    scrollRootOffset,
+    childrenOffset,
     arrowDirection,
     tipOffset,
-    arrowLocation
+    arrowLocation,
+    offsetSpacing
   });
-  const styles = getDirectionLocationStyle({
-    rootOffset,
+  const { styles, childrenStyle } = getDirectionLocationStyle({
+    childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
-    arrowLocation: newArrowLocation
+    arrowLocation: newArrowLocation,
+    offsetSpacing
   });
   styles.visibility = "visible";
   return {
     styles,
+    childrenStyle,
     newArrowDirection,
     newArrowLocation
   };
@@ -207,9 +252,23 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
   });
   return option;
 };
+const parsePlacement = (placement) => {
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  }
+  return {
+    direction,
+    location
+  };
+};
 export {
   getDirectionLocationStyle,
   getNewDirectionLocation,
   getStylesAndLocation,
+  parsePlacement,
   triggerEventTransform
 };

package/es/index.d.ts

@@ -1,5 +1,5 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
 export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';

package/es/index.js

@@ -1,7 +1,8 @@
 import { default as default2 } from "./debounce";
 import {
   getStylesAndLocation,
-  triggerEventTransform
+  triggerEventTransform,
+  parsePlacement
 } from "./directionLocationUtil";
 import { default as default3 } from "./hex2rgba";
 import {
@@ -48,6 +49,7 @@ export {
   isMini,
   isMiniapp,
   isWeapp,
+  parsePlacement,
   default5 as setRef,
   default6 as throttle,
   default7 as toArray,

package/package.json

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