@yakad/ui 1.3.106 → 1.3.108

package/dist/Card/Card.module.css

@@ -6,7 +6,6 @@
     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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CardProps } from "../";
+export interface WithDropdawnProps extends CardProps {
+    trigger?: "onClick" | "onRightClick";
+    dropdawnChildren?: React.ReactElement;
+    children?: React.ReactElement<{
+        onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    }>;
+}
+export declare const WithDropdawn: {
+    ({ trigger, dropdawnChildren, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/WithDropdawn/WithDropdawn.js

@@ -0,0 +1,56 @@
+"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 { Card, WithInteractions } from "../";
+export const WithDropdawn = (_a) => {
+    var { trigger = "onClick", dropdawnChildren, style, children } = _a, restProps = __rest(_a, ["trigger", "dropdawnChildren", "style", "children"]);
+    const toggleElementRef = useRef(null);
+    const dropdawnRef = useRef(null);
+    const [showDropdawn, setShowDropdawn] = useState(false);
+    const [top, setTop] = useState(0);
+    const [left, setLeft] = 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;
+            // Prevent overflow bottom
+            if (top + dropdawnRect.height > window.innerHeight) {
+                top = buttonRect.top - dropdawnRect.height - padding;
+            }
+            // Prevent overflow right
+            if (left + dropdawnRect.width > window.innerWidth - padding) {
+                left = window.innerWidth - dropdawnRect.width - padding;
+            }
+            // Prevent overflow left
+            if (left < padding) {
+                left = padding;
+            }
+            setTop(top);
+            setLeft(left);
+        }
+    }, [showDropdawn, dropdawnChildren]);
+    return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: toggleElementRef, onRightClick: () => trigger === "onRightClick" && setShowDropdawn(true), children: children &&
+                    cloneElement(children, {
+                        onClick: (e) => {
+                            var _a, _b;
+                            (_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 })) })] }));
+};
+WithDropdawn.displayName = "WithDropdawn";

package/dist/{InteractiveSurface/InteractiveSurface.d.ts → WithInteractions/WithInteractions.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface InteractiveSurfaceProps {
+export interface WithInteractionsProps {
     onRightClick?: (e: MouseEvent) => void;
     onTap?: (e: TouchEvent) => void;
     onDoubleTap?: (e: TouchEvent) => void;
@@ -20,4 +20,4 @@ export interface InteractiveSurfaceProps {
     onMouseHoverLeave?: (e: MouseEvent) => void;
     children?: React.ReactElement;
 }
-export declare const InteractiveSurface: import("react").ForwardRefExoticComponent<InteractiveSurfaceProps & import("react").RefAttributes<HTMLElement>>;
+export declare const WithInteractions: import("react").ForwardRefExoticComponent<WithInteractionsProps & import("react").RefAttributes<HTMLElement>>;

package/dist/{InteractiveSurface/InteractiveSurface.js → WithInteractions/WithInteractions.js}

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { mergeRefs } from "@yakad/lib";
 import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
-export const InteractiveSurface = forwardRef((_a, forwardedRef) => {
+export const WithInteractions = forwardRef((_a, forwardedRef) => {
     var _b;
     var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisibile, onHidden, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisibile", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
     const localRef = useRef(null);
@@ -216,3 +216,4 @@ export const InteractiveSurface = 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/dist/index.d.ts

@@ -28,4 +28,5 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./InteractiveSurface/InteractiveSurface";
+export * from "./WithInteractions/WithInteractions";
+export * from "./WithDropdawn/WithDropdawn";

package/dist/index.js

@@ -33,4 +33,5 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display";
-export * from "./InteractiveSurface/InteractiveSurface";
+export * from "./WithInteractions/WithInteractions";
+export * from "./WithDropdawn/WithDropdawn";

package/package.json

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