@yakad/ui 1.3.105 → 1.3.107

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface WithDropdawnProps {
+    trigger?: "onClick" | "onRightClick";
+    dropdawnstyle?: React.CSSProperties;
+    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;

package/dist/WithDropdawn/WithDropdawn.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, cloneElement } from "react";
+import { WithInteractions } from "../";
+export const WithDropdawn = ({ trigger = "onClick", dropdawnchildren, dropdawnstyle, 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("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 }) })] }));
+};

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

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

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

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-export const InteractiveSurface = forwardRef((_a, forwardedRef) => {
+import { mergeRefs } from "@yakad/lib";
+import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
+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);
     // Let the parent access our DOM node
@@ -211,5 +212,7 @@ export const InteractiveSurface = forwardRef((_a, forwardedRef) => {
         onMouseHoverStart,
         onMouseHoverLeave,
     ]);
-    return (_jsx("div", Object.assign({ ref: localRef }, restProps, { children: children })));
+    if (!isValidElement(children))
+        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) }));
 });

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.105",
+    "version": "1.3.107",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -31,6 +31,7 @@
         "prepublishOnly": "npm run test && npm run build && npm run typecheck"
     },
     "dependencies": {
+        "@yakad/lib": "1.0.22",
         "@yakad/symbols": "1.0.25",
         "classnames": "2.5.1"
     },