@yakad/ui 1.3.122 → 1.3.125

package/dist/Card/Card.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import "./card.css";
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    blur?: boolean;
+import { BoxProps } from "../boxing";
+export interface CardProps extends BoxProps {
     level?: "low" | "mid" | "high";
-    children?: React.ReactNode;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/Card.js

@@ -16,8 +16,8 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Card.module.css";
 import "./card.css";
 export const Card = forwardRef(function Card(_a, ref) {
-    var { align, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "blur", "level", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.card, { [styles.blur]: blur }, {
+    var { fullWidth = true, align, blur, level, className, children } = _a, restProps = __rest(_a, ["fullWidth", "align", "blur", "level", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: fullWidth }, styles.card, { [styles.blur]: blur }, {
         yakadCardAutoLevel: level === undefined,
         yakadCardLowLevel: level === "low",
         yakadCardMidLevel: level === "mid",

package/dist/Card/Card.module.css

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

package/dist/Dropdown/Dropdown.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CardProps, OverlayProps } from "..";
+export interface DropdownProps extends CardProps, OverlayProps {
+}
+export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Dropdown/Dropdown.js

@@ -0,0 +1,81 @@
+"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, forwardRef, useImperativeHandle, } from "react";
+import classNames from "classnames";
+import { Card, WithInteractions } from "..";
+import styles from "./Dropdown.module.css";
+export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
+    var { fullWidth = false, blur, level = "high", triggerRef, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidth", "blur", "level", "triggerRef", "onClose", "className", "style", "children"]);
+    const fallbackTriggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const placementTargetRef = triggerRef || fallbackTriggerRef;
+    // Let the parent access our DOM node
+    useImperativeHandle(forwardedRef, () => dropdownRef.current);
+    const [arrowPosition, setArrowPosition] = useState({
+        top: 0,
+        left: 0,
+    });
+    const [dropdownPosition, setDropdownPosition] = useState({
+        top: 0,
+        left: 0,
+    });
+    const [isPlacedAbove, setIsPlacedAbove] = useState(false);
+    const [isPlaced, setIsPlaced] = useState(false);
+    useEffect(() => {
+        if ((placementTargetRef === null || placementTargetRef === void 0 ? void 0 : placementTargetRef.current) && dropdownRef.current) {
+            const placementTarget = placementTargetRef.current.getBoundingClientRect();
+            const dropdownRect = dropdownRef.current.getBoundingClientRect();
+            const padding = 10;
+            let dropdownY = placementTarget.bottom + padding;
+            let dropdownXPos = placementTarget.left + placementTarget.width / 2;
+            let arrowY = dropdownY;
+            const arrowX = dropdownXPos;
+            // Prevent overflow bottom
+            if (dropdownY + dropdownRect.height > window.innerHeight &&
+                placementTarget.top > dropdownRect.height) {
+                dropdownY = placementTarget.top - padding;
+                arrowY = placementTarget.top - padding;
+                setIsPlacedAbove(true);
+            }
+            else
+                setIsPlacedAbove(false);
+            // Prevent overflow right
+            if (dropdownXPos + dropdownRect.width / 2 >
+                window.innerWidth - padding) {
+                dropdownXPos =
+                    window.innerWidth - dropdownRect.width / 2 - padding;
+            }
+            // Prevent overflow left
+            if (dropdownXPos - dropdownRect.width / 2 < padding) {
+                dropdownXPos = dropdownRect.width / 2 + padding;
+            }
+            setDropdownPosition({
+                top: dropdownY,
+                left: dropdownXPos,
+            });
+            setArrowPosition({
+                top: arrowY,
+                left: arrowX,
+            });
+            setIsPlaced(true);
+        }
+    }, [children, placementTargetRef]);
+    return (_jsxs(_Fragment, { children: [!triggerRef && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, fullWidth: fullWidth, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })) }), _jsx("span", { className: classNames(styles.arrow, {
+                    [styles.isPlacedAbove]: isPlacedAbove,
+                }, { [styles.blur]: blur }), style: {
+                    top: arrowPosition.top,
+                    left: arrowPosition.left,
+                    visibility: isPlaced ? "visible" : "hidden",
+                } })] }));
+});

package/dist/Dropdown/Dropdown.module.css

@@ -0,0 +1,39 @@
+.dropdownCard {
+    position: fixed;
+    min-width: 6rem;
+    min-height: 10rem;
+    max-width: calc(100vw - 10rem);
+    max-height: min(50vh, 40rem);
+    transform: translate(-50%, 1rem);
+    overflow-x: auto;
+    visibility: hidden;
+    z-index: 4;
+}
+.dropdownCard.isPlacedAbove {
+    transform: translate(-50%, calc(-100% - 1rem));
+}
+
+/* Arrow */
+.arrow {
+    position: fixed;
+    width: 0;
+    height: 0;
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-bottom: 1rem solid
+        rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    transform: translate(-50%, calc(-100% + 1rem));
+    visibility: hidden;
+    z-index: 4;
+}
+.arrow.isPlacedAbove {
+    transform: translate(-50%, -1rem) rotate(180deg);
+}
+.arrow.blur {
+    border-bottom: 1rem solid
+        color-mix(
+            in srgb,
+            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
+            transparent
+        );
+}

package/dist/Popup/Popup.d.ts

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

package/dist/Popup/Popup.js

@@ -1,3 +1,4 @@
+"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)
@@ -13,9 +14,9 @@ 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 { Button, Card, Row, Screen, Spacer, Stack, Text, WithInteractions, } from "..";
 import styles from "./Popup.module.css";
 export const Popup = forwardRef(function Popup(_a, ref) {
     var { align, heading, onClose, className, children } = _a, restProps = __rest(_a, ["align", "heading", "onClose", "className", "children"]);
-    return (_jsx("div", { className: styles.popupscreen, children: _jsx(WithInteractions, { onOutsideClick: onClose, 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: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }) }));
+    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { onOutsideClick: onClose, 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: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }) }));
 });

package/dist/Popup/Popup.module.css

@@ -2,14 +2,9 @@
     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;
+    z-index: 4;
 }
 
 .popup {

package/dist/RenderOnVisible/RenderOnVisible.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BoxProps } from "../boxing";
+export interface RenderOnVisibleProps extends BoxProps {
+}
+export declare const RenderOnVisible: import("react").ForwardRefExoticComponent<RenderOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/RenderOnVisible/RenderOnVisible.js

@@ -0,0 +1,37 @@
+"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 } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
+import styles from "./RenderOnVisible.module.css";
+import { WithInteractions } from "../WithInteractions/WithInteractions";
+export const RenderOnVisible = forwardRef(function RenderOnVisible(_a, forwardedRef) {
+    var { align, blur, fullWidth, className, style, children } = _a, restProps = __rest(_a, ["align", "blur", "fullWidth", "className", "style", "children"]);
+    const localRef = useRef(null);
+    // Let the parent access our DOM node
+    useImperativeHandle(forwardedRef, () => localRef.current);
+    const [boxHeight, setBoxHeight] = useState(0);
+    const isVisible = boxHeight === 0;
+    const handleOnVisible = () => {
+        setBoxHeight(0);
+    };
+    const handleOnHidden = () => {
+        if (localRef.current) {
+            const boxRect = localRef.current.getBoundingClientRect();
+            setBoxHeight(boxRect.height);
+        }
+    };
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: fullWidth }, { [styles.blur]: blur }, className);
+    return (_jsx(WithInteractions, { onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx("div", Object.assign({ ref: localRef }, restProps, { className: joinedClassNames, style: Object.assign({ height: boxHeight || "auto" }, style), children: isVisible && children })) }));
+});

package/dist/RenderOnVisible/RenderOnVisible.module.css

@@ -0,0 +1,3 @@
+.blur {
+    backdrop-filter: blur(0.5rem);
+}

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -1,5 +1,7 @@
 .dropdawnCard {
     position: fixed;
+    min-width: 6rem;
+    min-height: 10rem;
     max-width: calc(100% - 4rem);
     max-height: min(50vh, 50rem);
     padding: 2rem;

package/dist/WithInteractions/WithInteractions.d.ts

@@ -14,7 +14,7 @@ export interface WithInteractionsProps {
     onScrollStart?: () => void;
     onScrollStop?: () => void;
     onResize?: (entry: ResizeObserverEntry) => void;
-    onVisibile?: () => void;
+    onVisible?: () => void;
     onHidden?: () => void;
     onMouseHoverStart?: (e: MouseEvent) => void;
     onMouseHoverLeave?: (e: MouseEvent) => void;

package/dist/WithInteractions/WithInteractions.js

@@ -14,7 +14,7 @@ import { mergeRefs } from "@yakad/lib";
 import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
 export const WithInteractions = forwardRef(function WithInteractions(_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"]);
+    var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisible, onHidden, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisible", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
     const localRef = useRef(null);
     // Let the parent access our DOM node
     useImperativeHandle(forwardedRef, () => localRef.current);
@@ -151,9 +151,9 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         }
         // === VISIBILITY OBSERVER ===
         let intersectionObserver = null;
-        if (onVisibile || onHidden) {
+        if (onVisible || onHidden) {
             intersectionObserver = new IntersectionObserver((entries) => {
-                entries[0].isIntersecting ? onVisibile === null || onVisibile === void 0 ? void 0 : onVisibile() : onHidden === null || onHidden === void 0 ? void 0 : onHidden();
+                entries[0].isIntersecting ? onVisible === null || onVisible === void 0 ? void 0 : onVisible() : onHidden === null || onHidden === void 0 ? void 0 : onHidden();
             });
             intersectionObserver.observe(el);
             cleanupFns.push(() => intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect());
@@ -207,7 +207,7 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         onScrollStart,
         onScrollStop,
         onResize,
-        onVisibile,
+        onVisible,
         onHidden,
         onMouseHoverStart,
         onMouseHoverLeave,

package/dist/WithOverlay/WithOverlay.d.ts

@@ -1,11 +1,16 @@
-/// <reference types="react" />
-export interface WithPopupProps {
+import { RefObject } from "react";
+import { Dropdown, DropdownProps, Popup, PopupProps } from "..";
+export interface OverlayProps {
+    triggerRef?: RefObject<HTMLElement | null>;
+    onClose?: () => void;
+}
+type AllowedOverlays = React.ReactElement<PopupProps, typeof Popup> | React.ReactElement<DropdownProps, typeof Dropdown>;
+export interface WithOverlayProps {
     trigger?: "onClick" | "onRightClick";
-    overlay?: React.ReactElement<{
-        onClose?: () => void;
-    }>;
+    overlay?: AllowedOverlays;
     children?: React.ReactElement<{
         onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     }>;
 }
-export declare function WithOverlay({ trigger, overlay, children, }: WithPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function WithOverlay({ trigger, overlay, children, }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WithOverlay/WithOverlay.js

@@ -1,11 +1,24 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, cloneElement } from "react";
-import { WithInteractions } from "..";
+import { useState, cloneElement, useEffect, useRef } from "react";
+import { WithInteractions, } from "..";
+import { mergeRefs } from "@yakad/lib";
 export function WithOverlay({ trigger = "onClick", overlay, children, }) {
+    var _a;
+    const triggerRef = useRef(null);
     const [showOverlay, setShowOverlay] = useState(false);
+    useEffect(() => {
+        document.body.style.overflow = showOverlay ? "hidden" : "initial";
+        return () => {
+            document.body.style.overflow = "initial";
+        };
+    }, [showOverlay]);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { onRightClick: () => trigger === "onRightClick" && setShowOverlay(true), children: children &&
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     cloneElement(children, {
+                        ref: mergeRefs(triggerRef, 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref),
                         onClick: (e) => {
                             var _a, _b;
                             (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
@@ -14,6 +27,7 @@ export function WithOverlay({ trigger = "onClick", overlay, children, }) {
                     }) }), showOverlay &&
                 overlay &&
                 cloneElement(overlay, {
+                    triggerRef: triggerRef,
                     onClose: () => {
                         var _a, _b;
                         (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);

package/dist/boxing.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    blur?: boolean;
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}

package/dist/boxing.js

@@ -0,0 +1 @@
+export {};

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 "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
@@ -32,3 +33,4 @@ export * from "./Display/Display";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithDropdawn/WithDropdawn";
 export * from "./WithOverlay/WithOverlay";
+export * from "./RenderOnVisible/RenderOnVisible";

package/dist/index.js

@@ -15,6 +15,7 @@ export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 // UI Components
+export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
@@ -37,3 +38,4 @@ export * from "./Display/Display";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithDropdawn/WithDropdawn";
 export * from "./WithOverlay/WithOverlay";
+export * from "./RenderOnVisible/RenderOnVisible";

package/package.json

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