@yakad/ui 1.3.109 → 1.3.110

package/dist/WithDropdawn/WithDropdawn.js

@@ -23,35 +23,43 @@ export const WithDropdawn = (_a) => {
     const [showDropdawn, setShowDropdawn] = useState(false);
     const [dropdawnOnTop, setDropdawnOnTop] = useState(false);
     const [top, setTop] = useState(0);
-    const [left, setLeft] = useState(0);
+    const [dropdawnX, setDropdawnX] = useState(0);
+    const [arrowTop, setArrowTop] = useState(0);
+    const [arrowX, setArrowX] = useState(0);
     const toggleShowDropdawn = () => setShowDropdawn((prev) => !prev);
     useEffect(() => {
         if (toggleElementRef.current && dropdawnRef.current) {
             const buttonRect = toggleElementRef.current.getBoundingClientRect();
             const dropdawnRect = dropdawnRef.current.getBoundingClientRect();
             const padding = 10;
-            let top = buttonRect.bottom + padding;
-            let left = buttonRect.left + buttonRect.width / 2 - dropdawnRect.width / 2;
+            let dTop = buttonRect.bottom + padding;
+            let dX = buttonRect.x + buttonRect.width / 2;
+            let aTop = top;
+            let aX = dX;
             // Prevent overflow bottom
-            if (top + dropdawnRect.height > window.innerHeight) {
-                top = buttonRect.top - dropdawnRect.height - padding;
+            if (dTop + dropdawnRect.height > window.innerHeight) {
+                dTop = buttonRect.top - dropdawnRect.height - padding;
+                aTop = buttonRect.top - padding;
                 setDropdawnOnTop(true);
             }
             else
                 setDropdawnOnTop(false);
             // Prevent overflow right
-            if (left + dropdawnRect.width > window.innerWidth - padding) {
-                left = window.innerWidth - dropdawnRect.width - padding;
+            if (dX + dropdawnRect.width / 2 > window.innerWidth - padding) {
+                dX = window.innerWidth - dropdawnRect.width / 2 - padding;
             }
             // Prevent overflow left
-            if (left < padding) {
-                left = padding;
+            if (dX - dropdawnRect.width / 2 < padding) {
+                dX = dropdawnRect.width / 2 + padding;
             }
-            setTop(top);
-            setLeft(left);
+            setTop(dTop);
+            setDropdawnX(dX);
+            // Arrow Placing
+            setArrowTop(aTop);
+            setArrowX(aX);
         }
     }, [showDropdawn, dropdawnChildren]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.dropdawnCard, { [styles.dropdawnOnTop]: dropdawnOnTop }, { [styles.blur]: blur }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.dropdawnCard, { [styles.blur]: blur }, className);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: toggleElementRef, onRightClick: () => trigger === "onRightClick" && setShowDropdawn(true), children: children &&
                     cloneElement(children, {
                         onClick: (e) => {
@@ -59,6 +67,12 @@ export const WithDropdawn = (_a) => {
                             (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                             trigger === "onClick" && toggleShowDropdawn();
                         },
-                    }) }), _jsx(WithInteractions, { onOutsideClick: () => setShowDropdawn(false), children: _jsx("div", Object.assign({ ref: dropdawnRef }, restProps, { className: joinedClassNames, style: Object.assign({ top: top, left: left, visibility: showDropdawn ? "visible" : "hidden" }, style), children: dropdawnChildren })) })] }));
+                    }) }), _jsx("span", { className: classNames(styles.arrow, {
+                    [styles.dropdawnOnTop]: dropdawnOnTop,
+                }, { [styles.blur]: blur }), style: {
+                    top: arrowTop,
+                    left: arrowX,
+                    visibility: showDropdawn ? "visible" : "hidden",
+                } }), _jsx(WithInteractions, { onOutsideClick: () => setShowDropdawn(false), children: _jsx("div", Object.assign({ ref: dropdawnRef }, restProps, { className: joinedClassNames, style: Object.assign({ top: top, left: dropdawnX, visibility: showDropdawn ? "visible" : "hidden" }, style), children: dropdawnChildren })) })] }));
 };
 WithDropdawn.displayName = "WithDropdawn";

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -10,8 +10,8 @@
     color: rgb(var(--onSurfaceColor, 28 27 31));
     fill: rgb(var(--onSurfaceColor, 28 27 31));
     z-index: 2;
+    transform: translate(-50%, 0);
 }
-
 .dropdawnCard.blur {
     background-color: color-mix(
         in srgb,
@@ -21,28 +21,25 @@
     backdrop-filter: blur(0.5rem);
 }
 
-.dropdawnCard::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: calc(50% - 6px);
+/* Arrow */
+.arrow {
+    position: fixed;
     width: 0;
     height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid
+    border-left: 0.6rem solid transparent;
+    border-right: 0.6rem solid transparent;
+    border-bottom: 0.6rem solid
         rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    transform: translate(-50%, -100%);
 }
-.dropdawnCard.blur::before {
-    border-bottom: 6px solid
+.arrow.blur {
+    border-bottom: 0.6rem solid
         color-mix(
             in srgb,
             rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
             transparent
         );
 }
-.dropdawnCard.dropdawnOnTop::before {
-    top: initial;
-    bottom: -6px;
-    transform: scale(1, -1);
+.arrow.dropdawnOnTop {
+    transform: translate(-50%, 0) rotate(180deg);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.109",
+    "version": "1.3.110",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",