@while-and-for/tremor-react/dist/components/input-elements/MultiSelect/MultiSelect.cjs

The React library to build dashboards faster.

'use client';
"use strict";var e=require("tslib"),t=require("react"),r=require("../../../lib/shape.cjs"),a=require("../../../lib/sizing.cjs"),n=require("../../../lib/spacing.cjs"),l=require("../../../lib/utils.cjs"),o=require("../../../lib/tremorTwMerge.cjs");require("../../../contexts/BaseColorContext.cjs"),require("../../../contexts/IndexContext.cjs"),require("../../../contexts/RootStylesContext.cjs");var s=require("../../../contexts/SelectedValueContext.cjs"),d=require("../../../hooks/useInternalState.cjs"),i=require("../../../assets/ArrowDownHeadIcon.cjs"),u=require("../../../assets/SearchIcon.cjs"),c=require("../../../assets/XCircleIcon.cjs"),m=require("../selectUtils.cjs"),g=require("@headlessui/react");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=f(t);const p=l.makeClassName("MultiSelect"),h=b.default.forwardRef(((l,f)=>{const{defaultValue:h,value:w,onValueChange:x,placeholder:k="Select...",disabled:v=!1,icon:q,children:M,className:j}=l,N=e.__rest(l,["defaultValue","value","onValueChange","placeholder","disabled","icon","children","className"]),E=q,[T,C]=d(h,w),[y,z]=t.useState(""),S=(null!=T?T:[]).length>0,X=t.useMemo((()=>m.getFilteredOptions(y,M)),[y,M]);return b.default.createElement(g.Listbox,Object.assign({as:"div",ref:f,defaultValue:T,value:T,onChange:e=>{null==x||x(e),C(e)},disabled:v,className:o.tremorTwMerge("w-full min-w-[10rem] relative text-tremor-default",j)},N,{multiple:!0}),(({value:e})=>b.default.createElement(b.default.Fragment,null,b.default.createElement(g.Listbox.Button,{className:o.tremorTwMerge("w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100","border-tremor-border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted","dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted",E?n.spacing.fourXl.paddingLeft:n.spacing.twoXl.paddingLeft,n.spacing.fourXl.paddingRight,n.spacing.sm.paddingY,r.border.sm.all,m.getSelectButtonColors(e.length>0,v))},E&&b.default.createElement("span",{className:o.tremorTwMerge("absolute inset-y-0 left-0 flex items-center",n.spacing.md.paddingLeft)},b.default.createElement(E,{className:o.tremorTwMerge(p("Icon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",a.sizing.lg.height,a.sizing.lg.width)})),e.length>0?`${e.length} selected`:k,b.default.createElement("span",{className:o.tremorTwMerge("absolute inset-y-0 right-0 flex items-center",n.spacing.md.marginRight)},b.default.createElement(i,{className:o.tremorTwMerge(p("arrowDownIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",a.sizing.md.height,a.sizing.md.width)}))),S&&!v?b.default.createElement("button",{type:"button",className:o.tremorTwMerge("absolute inset-y-0 right-0 flex items-center",n.spacing.fourXl.marginRight),onClick:e=>{e.preventDefault(),C([]),null==x||x([])}},b.default.createElement(c,{className:o.tremorTwMerge(p("clearIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",a.sizing.md.height,a.sizing.md.width)})):null,b.default.createElement(g.Listbox.Options,{className:o.tremorTwMerge("absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-tremor-default","bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown","dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",n.spacing.twoXs.marginTop,n.spacing.twoXs.marginBottom,r.border.sm.all)},b.default.createElement("div",{className:o.tremorTwMerge("flex items-center w-full","bg-tremor-background-muted","dark:bg-dark-tremor-background-muted",n.spacing.twoXl.paddingX)},b.default.createElement("span",null,b.default.createElement(u,{className:o.tremorTwMerge("flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",n.spacing.threeXs.negativeMarginLeft,n.spacing.lg.marginRight,a.sizing.md.height,a.sizing.md.width)})),b.default.createElement("input",{name:"search",type:"input",placeholder:"Search",className:o.tremorTwMerge("w-full focus:outline-none focus:ring-none bg-transparent text-tremor-default","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis",n.spacing.sm.paddingY),onChange:e=>z(e.target.value)})),b.default.createElement(s.Provider,{value:{selectedValue:e}},X)))))}));h.displayName="MultiSelect",module.exports=h;