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) • 5.85 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),t=r.forwardRef((({label:t,options:l,defaultSelected:o=[],onChange:s,disabled:n=!1,required:a=!1,error:i=!1,name:d,id:u,"aria-label":c,"aria-describedby":m,...x},h)=>{const[p,v]=r.useState(o),[b,f]=r.useState(!1),j=r.useRef(null),k=r.useId(),g=u||k;r.useEffect((()=>{const e=e=>{j.current&&!j.current.contains(e.target)&&f(!1)};return b?document.addEventListener("mousedown",e):document.removeEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[b]);const w=r.useCallback((()=>{n||f((e=>!e))}),[n]),E=r.useCallback((e=>{v((r=>{const t=r.includes(e)?r.filter((r=>r!==e)):[...r,e];return s?.(t),t}))}),[s]),R=r.useCallback((e=>{v((r=>{const t=r.filter((r=>r!==e));return s?.(t),t}))}),[s]),N=l.filter((e=>p.includes(e.value))).map((e=>e.text));return e.jsxRuntimeExports.jsxs("div",{className:"w-full",ref:h,...x,children:[e.jsxRuntimeExports.jsxs("label",{id:`${g}-label`,htmlFor:g,className:"mb-1.5 block text-sm font-medium text-[oklch(var(--theme-foreground))]",children:[t,a&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",className:"text-[oklch(var(--theme-destructive))] ml-1",children:"*"})]}),e.jsxRuntimeExports.jsx("div",{className:"relative z-20 inline-block w-full",role:"combobox","aria-expanded":b,"aria-haspopup":"listbox","aria-labelledby":`${g}-label`,children:e.jsxRuntimeExports.jsxs("div",{className:"relative flex flex-col items-center",children:[e.jsxRuntimeExports.jsx("div",{onClick:w,className:"w-full",role:"button",tabIndex:n?-1:0,"aria-disabled":n,children:e.jsxRuntimeExports.jsxs("div",{className:`mb-2 flex h-11 rounded-lg border ${i?"border-[oklch(var(--theme-destructive))]":"border-[oklch(var(--theme-border))]"} py-1.5 pl-3 pr-3 shadow-sm outline-none transition \n focus-within:border-[oklch(var(--theme-ring))] focus-within:ring-2 focus-within:ring-[oklch(var(--theme-ring))]\n bg-[oklch(var(--theme-background))]`,children:[e.jsxRuntimeExports.jsx("div",{className:"flex flex-wrap flex-auto gap-2",children:N.length>0?N.map(((r,t)=>e.jsxRuntimeExports.jsxs("div",{className:"group flex items-center justify-center rounded-full border-[0.7px] border-[oklch(var(--theme-border))] \r\n bg-[oklch(var(--theme-muted))] py-1 pl-2.5 pr-2 text-sm text-[oklch(var(--theme-foreground))]\r\n hover:border-[oklch(var(--theme-border))]",children:[e.jsxRuntimeExports.jsx("span",{className:"flex-initial max-w-full",children:r}),e.jsxRuntimeExports.jsx("button",{type:"button",onClick(e){e.stopPropagation(),R(p[t])},"aria-label":`Remove ${r}`,className:"pl-2 text-[oklch(var(--theme-muted-foreground))] cursor-pointer \r\n hover:text-[oklch(var(--theme-foreground))]",children:e.jsxRuntimeExports.jsx("svg",{className:"fill-current",width:"14",height:"14",viewBox:"0 0 14 14",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e.jsxRuntimeExports.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.40717 4.46881C3.11428 4.17591 3.11428 3.70104 3.40717 3.40815C3.70006 3.11525 4.17494 3.11525 4.46783 3.40815L6.99943 5.93975L9.53095 3.40822C9.82385 3.11533 10.2987 3.11533 10.5916 3.40822C10.8845 3.70112 10.8845 4.17599 10.5916 4.46888L8.06009 7.00041L10.5916 9.53193C10.8845 9.82482 10.8845 10.2997 10.5916 10.5926C10.2987 10.8855 9.82385 10.8855 9.53095 10.5926L6.99943 8.06107L4.46783 10.5927C4.17494 10.8856 3.70006 10.8856 3.40717 10.5927C3.11428 10.2998 3.11428 9.8249 3.40717 9.53201L5.93877 7.00041L3.40717 4.46881Z"})})})]},`${r}-${t}`))):e.jsxRuntimeExports.jsx("input",{id:g,name:d,placeholder:"Select option",className:"w-full h-full p-1 pr-2 text-sm bg-transparent border-0 outline-none appearance-none \r\n placeholder:text-[oklch(var(--theme-muted-foreground))] \r\n text-[oklch(var(--theme-foreground))]",readOnly:!0,disabled:n,"aria-readonly":"true",value:"Select option"})}),e.jsxRuntimeExports.jsx("div",{className:"flex items-center py-1 pl-1 pr-1 w-7",children:e.jsxRuntimeExports.jsx("button",{type:"button",onClick:w,"aria-label":b?"Close options":"Open options",className:"w-5 h-5 text-[oklch(var(--theme-muted-foreground))] outline-none cursor-pointer",disabled:n,children:e.jsxRuntimeExports.jsx("svg",{className:"stroke-current "+(b?"rotate-180":""),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e.jsxRuntimeExports.jsx("path",{d:"M4.79175 7.39551L10.0001 12.6038L15.2084 7.39551",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})})]})}),b&&e.jsxRuntimeExports.jsx("div",{ref:j,role:"listbox","aria-multiselectable":"true","aria-label":c||t,"aria-describedby":m,className:"absolute left-0 z-40 w-full overflow-y-auto bg-[oklch(var(--theme-background))] \r\n rounded-lg shadow-md top-full max-h-select border border-[oklch(var(--theme-border))]",onClick:e=>e.stopPropagation(),children:e.jsxRuntimeExports.jsx("div",{className:"flex flex-col",children:l.map((r=>e.jsxRuntimeExports.jsx("div",{role:"option","aria-selected":p.includes(r.value),onClick:()=>E(r.value),onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),E(r.value))},tabIndex:0,className:"w-full cursor-pointer border-b border-[oklch(var(--theme-border))] hover:bg-[oklch(var(--theme-muted))]",children:e.jsxRuntimeExports.jsx("div",{className:"relative flex w-full items-center p-2 pl-2 "+(p.includes(r.value)?"bg-[oklch(var(--theme-primary)/0.1)]":""),children:e.jsxRuntimeExports.jsx("div",{className:"mx-2 leading-6 text-[oklch(var(--theme-foreground))]",children:r.text})})},r.value)))})})]})})]})}));t.displayName="MultiSelect";const l=r.memo(t);exports.MultiSelect=l;