@yakad/ui 1.3.107 → 1.3.109

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-export interface WithDropdawnProps {
+export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end";
+    blur?: boolean;
     trigger?: "onClick" | "onRightClick";
-    dropdawnstyle?: React.CSSProperties;
-    dropdawnchildren?: React.ReactElement;
+    dropdawnChildren?: React.ReactElement;
     children?: React.ReactElement<{
         onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     }>;
 }
-export declare const WithDropdawn: ({ trigger, dropdawnchildren, dropdawnstyle, children, }: WithDropdawnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithDropdawn: {
+    ({ align, blur, trigger, dropdawnChildren, className, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/WithDropdawn/WithDropdawn.js

@@ -1,11 +1,27 @@
 "use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, cloneElement } from "react";
+import classNames from "classnames";
 import { WithInteractions } from "../";
-export const WithDropdawn = ({ trigger = "onClick", dropdawnchildren, dropdawnstyle, children, }) => {
+import boxingStyles from "../boxing.module.css";
+import styles from "./WithDropdawn.module.css";
+export const WithDropdawn = (_a) => {
+    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 toggleShowDropdawn = () => setShowDropdawn((prev) => !prev);
@@ -19,7 +35,10 @@ export const WithDropdawn = ({ trigger = "onClick", dropdawnchildren, dropdawnst
             // Prevent overflow bottom
             if (top + dropdawnRect.height > window.innerHeight) {
                 top = buttonRect.top - dropdawnRect.height - padding;
+                setDropdawnOnTop(true);
             }
+            else
+                setDropdawnOnTop(false);
             // Prevent overflow right
             if (left + dropdawnRect.width > window.innerWidth - padding) {
                 left = window.innerWidth - dropdawnRect.width - padding;
@@ -31,7 +50,8 @@ export const WithDropdawn = ({ trigger = "onClick", dropdawnchildren, dropdawnst
             setTop(top);
             setLeft(left);
         }
-    }, [showDropdawn, dropdawnchildren]);
+    }, [showDropdawn, dropdawnChildren]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.dropdawnCard, { [styles.dropdawnOnTop]: dropdawnOnTop }, { [styles.blur]: blur }, className);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: toggleElementRef, onRightClick: () => trigger === "onRightClick" && setShowDropdawn(true), children: children &&
                     cloneElement(children, {
                         onClick: (e) => {
@@ -39,5 +59,6 @@ export const WithDropdawn = ({ trigger = "onClick", dropdawnchildren, dropdawnst
                             (_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", { ref: dropdawnRef, style: Object.assign({ position: "fixed", top: top, left: left, maxWidth: "calc(100% - 4rem)", maxHeight: "min(50vh, 50rem)", zIndex: 2, visibility: showDropdawn ? "visible" : "hidden" }, dropdawnstyle), children: dropdawnchildren }) })] }));
+                    }) }), _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 })) })] }));
 };
+WithDropdawn.displayName = "WithDropdawn";

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -0,0 +1,48 @@
+.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;
+}
+
+.dropdawnCard.blur {
+    background-color: color-mix(
+        in srgb,
+        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
+        transparent
+    );
+    backdrop-filter: blur(0.5rem);
+}
+
+.dropdawnCard::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid
+        rgb(var(--surfaceContainerHighestColor, 230 224 233));
+}
+.dropdawnCard.blur::before {
+    border-bottom: 6px solid
+        color-mix(
+            in srgb,
+            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
+            transparent
+        );
+}
+.dropdawnCard.dropdawnOnTop::before {
+    top: initial;
+    bottom: -6px;
+    transform: scale(1, -1);
+}

package/dist/WithInteractions/WithInteractions.js

@@ -216,3 +216,4 @@ export const WithInteractions = forwardRef((_a, forwardedRef) => {
         return null;
     return cloneElement(children, Object.assign(Object.assign({}, restProps), { ref: mergeRefs(localRef, forwardedRef, (_b = children.props) === null || _b === void 0 ? void 0 : _b.ref) }));
 });
+WithInteractions.displayName = "WithInteractions";

package/package.json

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