@yakad/ui 1.3.108 → 1.3.110

package/dist/Card/Card.module.css

@@ -6,6 +6,7 @@
     background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
     color: rgb(var(--onSurfaceColor, 28 27 31));
     fill: rgb(var(--onSurfaceColor, 28 27 31));
+    overflow: hidden;
 }
 
 .card.blur {

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { CardProps } from "../";
-export interface WithDropdawnProps extends CardProps {
+export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end";
+    blur?: boolean;
     trigger?: "onClick" | "onRightClick";
     dropdawnChildren?: React.ReactElement;
     children?: React.ReactElement<{
@@ -8,6 +9,6 @@ export interface WithDropdawnProps extends CardProps {
     }>;
 }
 export declare const WithDropdawn: {
-    ({ trigger, dropdawnChildren, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;
+    ({ align, blur, trigger, dropdawnChildren, className, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/WithDropdawn/WithDropdawn.js

@@ -12,38 +12,54 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, cloneElement } from "react";
-import { Card, WithInteractions } from "../";
+import classNames from "classnames";
+import { WithInteractions } from "../";
+import boxingStyles from "../boxing.module.css";
+import styles from "./WithDropdawn.module.css";
 export const WithDropdawn = (_a) => {
-    var { trigger = "onClick", dropdawnChildren, style, children } = _a, restProps = __rest(_a, ["trigger", "dropdawnChildren", "style", "children"]);
+    var { align, blur, trigger = "onClick", dropdawnChildren, className, style, children } = _a, restProps = __rest(_a, ["align", "blur", "trigger", "dropdawnChildren", "className", "style", "children"]);
     const toggleElementRef = useRef(null);
     const dropdawnRef = useRef(null);
     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.blur]: blur }, className);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: toggleElementRef, onRightClick: () => trigger === "onRightClick" && setShowDropdawn(true), children: children &&
                     cloneElement(children, {
                         onClick: (e) => {
@@ -51,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(Card, Object.assign({ ref: dropdawnRef }, restProps, { style: Object.assign({ position: "fixed", top: top, left: left, maxWidth: "calc(100% - 4rem)", maxHeight: "min(50vh, 50rem)", zIndex: 2, 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

@@ -0,0 +1,45 @@
+.dropdawnCard {
+    position: fixed;
+    max-width: calc(100% - 4rem);
+    max-height: min(50vh, 50rem);
+    padding: 2rem;
+    border-radius: 2rem;
+    box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
+        0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
+    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    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,
+        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
+        transparent
+    );
+    backdrop-filter: blur(0.5rem);
+}
+
+/* Arrow */
+.arrow {
+    position: fixed;
+    width: 0;
+    height: 0;
+    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%);
+}
+.arrow.blur {
+    border-bottom: 0.6rem solid
+        color-mix(
+            in srgb,
+            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
+            transparent
+        );
+}
+.arrow.dropdawnOnTop {
+    transform: translate(-50%, 0) rotate(180deg);
+}

package/package.json

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