@yakad/ui 1.3.119 → 1.3.121

package/dist/Card/Card.module.css

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

package/dist/Popup/Popup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CardProps } from "..";
+export interface PopupProps extends CardProps {
+    align?: "start" | "space" | "center" | "end";
+    heading?: string;
+    onCloseButtClick?: () => void;
+    children?: React.ReactNode;
+}
+export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Popup/Popup.js

@@ -0,0 +1,21 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { Symbol } from "@yakad/symbols";
+import { Button, Card, Row, Spacer, Stack, Text, WithInteractions, } from "..";
+import styles from "./Popup.module.css";
+export const Popup = forwardRef(function Popup(_a, ref) {
+    var { align, heading, onCloseButtClick, className, children } = _a, restProps = __rest(_a, ["align", "heading", "onCloseButtClick", "className", "children"]);
+    return (_jsx("div", { className: styles.popupscreen, children: _jsx(WithInteractions, { onOutsideClick: onCloseButtClick, children: _jsxs(Card, Object.assign({ ref: ref }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Symbol, { icon: "close" }), onClick: onCloseButtClick })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }) }));
+});

package/dist/Popup/Popup.module.css

@@ -0,0 +1,20 @@
+.popupscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(var(--surfaceContainerColor, 243 237 247), 0.2);
+    backdrop-filter: blur(0.2rem);
+    z-index: 3;
+}
+
+.popup {
+    width: 90%;
+    max-width: 60rem;
+    min-height: 10rem;
+    max-height: 90vh;
+}

package/dist/WithDropdawn/WithDropdawn.js

@@ -34,8 +34,8 @@ export function WithDropdawn(_a) {
             const padding = 10;
             let dTop = buttonRect.bottom + padding;
             let dX = buttonRect.x + buttonRect.width / 2;
-            let aTop = top;
-            let aX = dX;
+            let aTop = dTop;
+            const aX = dX;
             // Prevent overflow bottom
             if (dTop + dropdawnRect.height > window.innerHeight) {
                 dTop = buttonRect.top - dropdawnRect.height - padding;

package/dist/WithInteractions/WithInteractions.js

@@ -214,5 +214,8 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
     ]);
     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) }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return cloneElement(children, Object.assign(Object.assign({}, restProps), { ref: mergeRefs(localRef, forwardedRef, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (_b = children.props) === null || _b === void 0 ? void 0 : _b.ref) }));
 });

package/dist/WithPopup/WithPopup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PopupProps } from "..";
+export interface WithPopupProps extends Omit<PopupProps, "onCloseButtClick"> {
+    align?: "start" | "space" | "center" | "end";
+    blur?: boolean;
+    trigger?: "onClick" | "onRightClick";
+    popupChildren?: React.ReactElement;
+    children?: React.ReactElement<{
+        onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    }>;
+}
+export declare function WithPopup({ trigger, popupChildren, children, ...restProps }: WithPopupProps): import("react/jsx-runtime").JSX.Element;

package/dist/WithPopup/WithPopup.js

@@ -0,0 +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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, cloneElement } from "react";
+import { Popup, WithInteractions } from "..";
+export function WithPopup(_a) {
+    var { trigger = "onClick", popupChildren, children } = _a, restProps = __rest(_a, ["trigger", "popupChildren", "children"]);
+    const [showPopup, setShowPopup] = useState(false);
+    return (_jsxs("div", { children: [_jsx(WithInteractions, { onRightClick: () => trigger === "onRightClick" && setShowPopup(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" && setShowPopup(true);
+                        },
+                    }) }), _jsx("div", { children: showPopup && (_jsx(Popup, Object.assign({ onCloseButtClick: () => setShowPopup(false) }, restProps, { children: popupChildren }))) })] }));
+}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Card/Card";
 export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
+export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
@@ -30,3 +31,4 @@ export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithDropdawn/WithDropdawn";
+export * from "./WithPopup/WithPopup";

package/dist/index.js

@@ -15,6 +15,7 @@ export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 // UI Components
+export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
@@ -35,3 +36,4 @@ export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithDropdawn/WithDropdawn";
+export * from "./WithPopup/WithPopup";

package/package.json

@@ -1,17 +1,11 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.119",
+    "version": "1.3.121",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "exports": {
-        ".": {
-            "import": "./dist/index.js",
-            "types": "./dist/index.d.ts"
-        }
-    },
     "keywords": [
         "yakad",
         "react",
@@ -34,7 +28,7 @@
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",
-        "prepublishOnly": "npm run test && npm run build && npm run typecheck",
+        "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck",
         "newPublish": "npm version patch && npm publish"
     },
     "dependencies": {