UNPKG

nextuiq

Version:

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

2 lines (1 loc) 2.63 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),t=require("./index38.js");exports.Dropdown=({trigger:n,items:o=[],align:a="end",className:s,onSelect:i,isOpen:l,onClose:d,children:c,id:u,role:m="menu","aria-modal":h,"aria-label":v})=>{const[x,p]=r.useState(!1),[b,k]=r.useState(-1),f=r.useRef(null),g=r.useId(),w=l??x,j=e=>{p(e),!e&&d&&d()},E=e=>{e.disabled||(e.onClick?.(),i?.(e.value),j(!1),k(-1))};return r.useEffect((()=>{const e=e=>{f.current&&!f.current.contains(e.target)&&j(!1)},r=e=>{if(w)switch(e.key){case"ArrowDown":e.preventDefault(),k((e=>e<o.length-1?e+1:0));break;case"ArrowUp":e.preventDefault(),k((e=>e>0?e-1:o.length-1));break;case"Enter":case"Space":e.preventDefault(),b>=0&&E(o[b]);break;case"Escape":e.preventDefault(),j(!1)}};return document.addEventListener("mousedown",e),document.addEventListener("keydown",r),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",r)}}),[w,o,b]),e.jsxRuntimeExports.jsxs("div",{className:"relative inline-block",ref:f,children:[n&&e.jsxRuntimeExports.jsx("div",{onClick:()=>j(!w),onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(!w))},role:"button",tabIndex:0,"aria-haspopup":"true","aria-expanded":w,"aria-controls":u||g,children:n}),w&&e.jsxRuntimeExports.jsx("div",{id:u||g,className:t.cn("absolute z-50 mt-2 min-w-[8rem] overflow-hidden rounded-md border","border-[oklch(var(--theme-border))] bg-[oklch(var(--theme-background))]","shadow-md animate-in fade-in-0 zoom-in-95","end"===a?"right-0":"left-0",s),role:m,"aria-modal":h,"aria-label":v,children:c||e.jsxRuntimeExports.jsx("div",{className:"py-1",role:"menu","aria-orientation":"vertical",children:o?.map(((r,n)=>e.jsxRuntimeExports.jsxs("button",{onClick:()=>E(r),onMouseEnter:()=>k(n),onFocus:()=>k(n),className:t.cn("relative flex w-full cursor-pointer select-none items-center px-3 py-2 text-sm outline-none transition-colors","text-[oklch(var(--theme-foreground))] hover:bg-[oklch(var(--theme-muted))] hover:text-[oklch(var(--theme-foreground))]","focus:bg-[oklch(var(--theme-muted))] focus:text-[oklch(var(--theme-foreground))]",r.disabled&&"cursor-not-allowed opacity-50",r.selected&&"bg-[oklch(var(--theme-muted))] text-[oklch(var(--theme-foreground))]",b===n&&"bg-[oklch(var(--theme-muted))] text-[oklch(var(--theme-foreground))]"),disabled:r.disabled,role:"menuitem",tabIndex:-1,"aria-selected":r.selected,"aria-disabled":r.disabled,children:[r.icon&&e.jsxRuntimeExports.jsx("span",{className:"mr-2 h-4 w-4","aria-hidden":"true",children:r.icon}),r.label]},n)))})})]})};