Keep horizontal option for drop (#387)

* v2.3.21

* add an option to drop to not change style.x after initial setting (helps avoiding jumping when origin has dynamic position)

Author: jacekkolasa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.3.20",
+  "version": "2.3.21",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/drops/drop/index.js

@@ -32,13 +32,21 @@ const Drop = forwardRef(
       onEsc,
       children,
       canHideTarget = true,
+      keepHorizontal,
       ...rest
     },
     parentRef
   ) => {
     const [ref, setRef] = useForwardRef(parentRef)
 
-    const updatePosition = useMakeUpdatePosition(target, ref, align, stretch, canHideTarget)
+    const updatePosition = useMakeUpdatePosition(
+      target,
+      ref,
+      align,
+      stretch,
+      canHideTarget,
+      keepHorizontal
+    )
 
     useEffect(() => {
       const id = requestAnimationFrame(updatePosition)

src/components/drops/drop/useMakeUpdatePosition.js

@@ -66,7 +66,7 @@ const getWidth = (stretch, targetRect, dropRect) => {
 
 const styles = ["top", "right", "bottom", "right", "width"]
 
-export default (target, dropRef, align, stretch, canHideTarget) =>
+export default (target, dropRef, align, stretch, canHideTarget, keepHorizontal) =>
   useCallback(() => {
     if (!dropRef.current) return
 
@@ -81,7 +81,9 @@ export default (target, dropRef, align, stretch, canHideTarget) =>
     const x = getXPosition(align, targetRect, dropRect, canHideTarget)
     const y = getYPosition(align, targetRect, dropRect, canHideTarget)
 
-    dropRef.current.style.left = `${x}px`
+    if (!keepHorizontal || !dropRef.current.style.left) {
+      dropRef.current.style.left = `${x}px`
+    }
     dropRef.current.style.top = `${y}px`
     if (stretch) {
       dropRef.current.style.width = `${width}px`