lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
114 lines • 6.21 kB
JavaScript
;
"use client";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menubar = Menubar;
exports.MenubarMenu = MenubarMenu;
exports.MenubarTrigger = MenubarTrigger;
exports.MenubarContent = MenubarContent;
exports.MenubarItem = MenubarItem;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils");
const framer_motion_1 = require("framer-motion");
const MenubarContext = React.createContext(undefined);
function useMenubarContext() {
const context = React.useContext(MenubarContext);
if (!context) {
throw new Error("useMenubarContext must be used within a MenubarProvider");
}
return context;
}
function Menubar({ className, children, ...props }) {
const [openMenu, setOpenMenu] = React.useState(null);
// close menu when clicking outside
React.useEffect(() => {
const handleClickOutside = (e) => {
const target = e.target;
const insideMenubar = target.closest('[role="menubar"], [role="menu"]');
if (openMenu && !insideMenubar) {
setOpenMenu(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [openMenu]);
return ((0, jsx_runtime_1.jsx)(MenubarContext.Provider, { value: { openMenu, setOpenMenu }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex h-12 items-center space-x-1 rounded-md border bg-background px-2 md:px-4 shadow-sm", className), role: "menubar", ...props, children: children }) }));
}
function MenubarMenu({ value, children }) {
const generatedId = React.useId();
const menuId = value ?? generatedId;
return ((0, jsx_runtime_1.jsx)("div", { className: "relative", "data-value": menuId, children: children }));
}
function MenubarTrigger({ className, children, ...props }) {
const { openMenu, setOpenMenu } = useMenubarContext();
const triggerRef = React.useRef(null);
const [menuId, setMenuId] = React.useState("");
React.useEffect(() => {
if (triggerRef.current) {
setMenuId(triggerRef.current.parentElement?.getAttribute("data-value") || "");
}
}, []);
const isOpen = openMenu === menuId;
const handleClick = (e) => {
e.stopPropagation();
setOpenMenu(isOpen ? null : menuId);
};
return ((0, jsx_runtime_1.jsx)("button", { ref: triggerRef, type: "button", role: "menuitem", className: (0, utils_1.cn)("flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm font-medium transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2", isOpen && "bg-accent text-accent-foreground", className), "aria-expanded": isOpen, "data-state": isOpen ? "open" : "closed", onClick: handleClick, ...props, children: children }));
}
function MenubarContent({ className, children, ...props }) {
const { openMenu } = useMenubarContext();
const contentRef = React.useRef(null);
const [menuId, setMenuId] = React.useState(null);
React.useEffect(() => {
if (contentRef.current) {
const parentDataValue = contentRef.current.parentElement?.getAttribute("data-value");
setMenuId(parentDataValue || null);
}
}, []);
const isOpen = openMenu === menuId;
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: contentRef, initial: { opacity: 0, y: -5, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -5, scale: 0.95 }, transition: { duration: 0.15, ease: "easeOut" }, className: (0, utils_1.cn)("absolute left-0 top-full z-50 mt-2 min-w-[10rem] flex flex-col rounded-md border bg-popover p-1 text-popover-foreground shadow-lg", "md:min-w-[12rem]", // larger menus on bigger screens
className), role: "menu", ...props, children: children })) }));
}
function MenubarItem({ className, inset, children, ...props }) {
const { setOpenMenu } = useMenubarContext();
const handleClick = (e) => {
e.stopPropagation();
setOpenMenu(null);
props.onClick?.(e);
};
return ((0, jsx_runtime_1.jsx)("div", { role: "menuitem", onClick: handleClick, className: (0, utils_1.cn)("relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus:bg-accent focus:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props, children: children }));
}
//# sourceMappingURL=menubar.js.map