@smitch/fluid/lib/dropdown/Dropdown.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { useState, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { Button } from "..";
import { HiChevronDown, HiChevronUp } from "react-icons/hi";
var sizes = {
    md: "text-md",
    lg: "text-lg",
    xl: "text-xl",
};
var showrapClasses = "min-w-[100px]";
var Dropdown = function (_a) {
    var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, style = _a.style, links = _a.links, _d = _a.prefetch, prefetch = _d === void 0 ? false : _d, _e = _a.buttonLayout, buttonLayout = _e === void 0 ? "circle" : _e, _f = _a.buttonBackground, buttonBackground = _f === void 0 ? "transparent" : _f, _g = _a.buttonColor, buttonColor = _g === void 0 ? "current" : _g;
    var _h = useState(""), show = _h[0], setShow = _h[1];
    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
    var handleClick = function (e, label) {
        e.preventDefault();
        e.stopPropagation();
        label === show ? closeNav() : openNav(label);
    };
    var handleBlur = function (e) {
        e.preventDefault();
        closeNav();
    };
    var openNav = function (label) {
        setTimeout(function () {
            setShow(label);
        }, 0);
    };
    var closeNav = function () {
        setTimeout(function () {
            setShow("");
        }, 0);
    };
    return (_jsx("div", { className: twMerge("dropdown group inline-block relative ".concat(sizeClasses), className), style: style, children: _jsx("ul", { className: "dropdown-list flex flex-col gap-4 md:flex-row;", children: links.map(function (link) { return (_jsxs("li", { className: "flex flex-wrap items-center group whitespace-nowrap ".concat(show === link.label ? "show" : ""), children: [_jsxs(Link, { href: link.href, onClick: closeNav, prefetch: prefetch, className: "dropdown-link flex flex-row items-center gap-2 no-underline hover:!text-current", children: [link.label, " ", link.links && (_jsxs(Button, { className: "menu-btn !p-1", onClick: function (e) { return handleClick(e, link.label); }, onBlur: function (e) { return handleBlur(e); }, title: "Toggle Menu", btnBackground: buttonBackground, btnColor: buttonColor, size: size, layout: buttonLayout, children: [show === link.label ? _jsx(HiChevronUp, {}) : _jsx(HiChevronDown, {}), _jsx("span", { className: "sr-only", children: "Toggle dropdown menu" })] }))] }), link.links && (_jsx("div", { className: "absolute left-0 -bottom-2 w-full", children: _jsx("div", { className: "wrap absolute -right-4 -left-4 top-full z-50 overflow-x-hidden text-base leading-7 ".concat(show ? showrapClasses : "max-h-0"), children: _jsx("ul", { className: "ms-0 block w-full border bg-dark text-light dark:bg-light dark:text-dark p-4", children: link.links.map(function (sub) { return (_jsxs("li", { children: [_jsx(Link, { href: sub.href, className: "", prefetch: prefetch, children: sub.label }, sub.label), sub.links && (_jsx("ul", { children: sub.links.map(function (subsub) { return (_jsx("li", { className: "indent-2", children: _jsx(Link, { href: subsub.href, className: "", prefetch: prefetch, children: subsub.label }) }, subsub.label)); }) }))] }, sub.label)); }) }) }) }))] }, link.label)); }) }) }));
};
export default Dropdown;
//# sourceMappingURL=Dropdown.js.map