@stanfordspezi/spezi-web-design-system/dist/MultiSelect-XTRAtKeJ.js

Stanford Biodesign Digital Health Spezi Web Design System

"use strict";const t=require("react/jsx-runtime"),l=require("react"),y=require("./index-DwV9MiDB.js"),N=require("./Badge-DiyJiwS4.js"),z=require("./Button-CoJ-cT_W.js"),u=require("./Command-BGwzNkUL.js"),C=require("./Popover-B2LKUvk1.js"),R=require("./check-CzvLR4PA.js"),A=require("./chevrons-up-down-DgQJirXJ.js"),E=require("./x-C9x1HOMQ.js"),q=require("./isUndefined-DokR09-E.js"),P=l.createContext(null),b=()=>{const e=l.useContext(P);if(e==null)throw new Error("useMultiSelectContext must be used within a MultiSelectContext");return e},k=({children:e,values:n,defaultValues:a,onValuesChange:s})=>{const[d,c]=l.useState(!1),[h,p]=l.useState(new Set(n??a)),[S,w]=l.useState(new Map),M=i=>{const r=new Set(h);r.has(i)?r.delete(i):r.add(i),p(r),s?.(Array.from(r))},x=(i,r)=>{w(f=>f.get(i)===r?f:new Map(f).set(i,r))};return t.jsx(P.Provider,{value:{open:d,setOpen:c,selectedValues:n?new Set(n):h,toggleValue:M,items:S,onItemAdded:x},children:t.jsx(C.PopoverRoot,{open:d,onOpenChange:c,children:e})})},O=({role:e="combobox","aria-expanded":n,className:a,children:s,...d})=>{const{open:c}=b();return t.jsx(C.PopoverTrigger,{asChild:!0,children:t.jsxs(z.Button,{...d,"data-slot":"multi-select-trigger",role:e,size:null,variant:null,"aria-expanded":n??c,className:y.cn("group border-input bg-surface-primary ring-offset-surface placeholder:text-muted-foreground focus-ring flex h-auto min-h-10 w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm","[&>span]:line-clamp-1 [&>span]:text-left","disabled:cursor-not-allowed disabled:opacity-50",a),children:[s,t.jsx(A.default,{className:"size-4 shrink-0 opacity-50 transition group-hover:opacity-80"})]})})},B=({placeholder:e,clickToRemove:n=!0,className:a,overflowBehavior:s="wrap-when-open",...d})=>{const{selectedValues:c,toggleValue:h,items:p,open:S}=b(),[w,M]=l.useState(0),x=l.useRef(null),i=l.useRef(null),r=s==="wrap"||s==="wrap-when-open"&&S,f=l.useCallback(()=>{if(x.current==null)return;const o=x.current,m=i.current,j=o.querySelectorAll("[data-selected-item]");m!=null&&(m.style.display="none"),j.forEach(g=>g.style.removeProperty("display"));let v=0;for(let g=j.length-1;g>=0;g--){const I=j[g];if(o.scrollWidth<=o.clientWidth)break;v=j.length-g,I.style.display="none",m?.style.removeProperty("display")}M(v)},[]);l.useLayoutEffect(()=>{f()},[c,f,r]);const V=o=>{x.current=o;const m=new ResizeObserver(f);return m.observe(o),()=>{m.disconnect(),x.current=null}};return c.size===0&&e?t.jsx("span",{"data-slot":"multi-select-value",className:"text-muted-foreground w-full min-w-0 overflow-hidden font-normal",children:e}):t.jsxs("div",{...d,"data-slot":"multi-select-value",ref:V,className:y.cn("flex w-full gap-1.5 overflow-hidden",r&&"h-full flex-wrap",a),children:[Array.from(c).filter(o=>p.has(o)).map(o=>t.jsxs(N.Badge,{variant:"secondary","data-selected-item":!0,className:y.cn("group/badge flex items-center gap-1 transition","active:scale-95"),onClick:n?m=>{m.stopPropagation(),h(o)}:void 0,children:[p.get(o),n&&t.jsx(E.default,{className:"size-2.5 stroke-3 opacity-50 transition group-hover/badge:opacity-100"})]},o)),t.jsxs(N.Badge,{variant:"secondary",ref:i,className:y.cn((w<=0||r)&&"hidden"),children:["+",w]})]})},G=e=>{const n={placeholder:"Search...",emptyMessage:"No results found."};return q.isUndefined(e)?n:q.isBoolean(e)?e?n:null:{placeholder:e.placeholder??n.placeholder,emptyMessage:e.emptyMessage??n.emptyMessage}},U=({search:e=!0,children:n,...a})=>{const s=G(e);return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"hidden","aria-hidden":"true",children:t.jsx(u.Command,{"aria-hidden":"true",tabIndex:-1,children:t.jsx(u.CommandList,{"aria-hidden":"true",tabIndex:-1,children:n})})}),t.jsx(C.PopoverContent,{className:"min-w-[var(--radix-popover-trigger-width)] !p-0",children:t.jsxs(u.Command,{...a,children:[s?t.jsx(u.CommandInput,{placeholder:s.placeholder}):t.jsx("button",{autoFocus:!0,className:"sr-only"}),t.jsxs(u.CommandList,{children:[s&&t.jsx(u.CommandEmpty,{children:s.emptyMessage}),n]})]})})]})},W=({value:e,children:n,badgeLabel:a,onSelect:s,...d})=>{const{toggleValue:c,selectedValues:h,onItemAdded:p}=b(),S=h.has(e);return l.useEffect(()=>{p(e,a??n)},[e,n,p,a]),t.jsxs(u.CommandItem,{...d,onSelect:()=>{c(e),s?.(e)},children:[t.jsx(R.default,{className:y.cn("size-4",S?"opacity-100":"opacity-0")}),n]})},F=e=>t.jsx(u.CommandGroup,{...e}),L=e=>t.jsx(u.CommandSeparator,{...e});exports.MultiSelect=k;exports.MultiSelectContent=U;exports.MultiSelectGroup=F;exports.MultiSelectItem=W;exports.MultiSelectSeparator=L;exports.MultiSelectTrigger=O;exports.MultiSelectValue=B;