'use client';
import{__rest as e}from"tslib";import t,{useRef as l,useState as a}from"react";import{twMerge as o}from"tailwind-merge";import"../../../contexts/BaseColorContext.js";import n from"../../../contexts/HoveredValueContext.js";import"../../../contexts/RootStylesContext.js";import r from"../../../contexts/SelectedValueContext.js";import i from"../../../hooks/useInternalState.js";import s from"../../../hooks/useSelectOnKeyDown.js";import m from"../../../assets/ArrowDownHeadIcon.js";import c from"../../../assets/SearchIcon.js";import d from"../../../assets/XCircleIcon.js";import{borderRadius as u,border as p,boxShadow as g}from"../../../lib/shape.js";import{sizing as h}from"../../../lib/sizing.js";import{spacing as f}from"../../../lib/spacing.js";import{fontSize as x,fontWeight as w}from"../../../lib/font.js";import{colorPalette as v,DEFAULT_COLOR as C}from"../../../lib/theme.js";import{mergeRefs as j,getColorClassNames as b,makeClassName as E,isValueInArray as N,removeValueFromArray as S}from"../../../lib/utils.js";import{getFilteredOptions as y,getSelectButtonColors as R}from"../selectUtils.js";import V from"../../util-elements/Modal/Modal.js";const M=E("MultiSelectBox"),k=t.forwardRef(((E,k)=>{const{defaultValue:X,value:B,onValueChange:D,placeholder:T="Select...",disabled:I=!1,icon:K,children:L,className:O,onKeyDown:P}=E,H=e(E,["defaultValue","value","onValueChange","placeholder","disabled","icon","children","className","onKeyDown"]),Y=K,z=l(null),[A,U]=a(!1),[$,q]=i(X,B),[F,G]=a(""),J=null!=$?$:[],Q=J.length>0,W=Q?`${J.length} Selected`:T,Z=t.Children.map(L,(e=>Object.assign({},e.props))),_=y(F,Z),ee=new Set(_.map((e=>{var t;return null!==(t=e.text)&&void 0!==t?t:e.value}))),te=_.map((e=>e.value)),le=e=>{G(""),U(e)},ae=e=>{let t=[];t=N(e,J)?[...S(e,J)]:[...J,e],q(t),null==D||D(t)},[oe,ne]=s(ae,te,A,U);return t.createElement("div",Object.assign({ref:j([z,k]),className:o(M("root"),"relative w-full min-w-[10rem]",O),onKeyDown:e=>{ne(e),null==P||P(e)}},H),t.createElement("button",{type:"button",className:o(M("button"),"flex justify-between items-center w-full focus:outline-none focus:ring-2",R(Q,I),b("blue",v.lightRing).focusRingColor,u.md.all,p.sm.all,g.sm,Y?f.xl.paddingLeft:f.twoXl.paddingLeft,f.twoXl.paddingRight,f.sm.paddingY),onClick:()=>le(!A),disabled:I},t.createElement("div",{className:"flex justify-start items-center truncate"},Y?t.createElement(Y,{className:o(M("icon"),"shrink-0",h.lg.height,h.lg.width,b(C,v.lightText).textColor,f.lg.marginRight),"aria-hidden":"true"}):null,t.createElement("p",{className:o(M("text"),"whitespace-nowrap truncate",x.sm,w.md)},W)),t.createElement("div",{className:"flex items-center"},Q&&!I?t.createElement("div",{role:"button",className:o(M("resetButton"),f.xs.marginRight),onClick:e=>{e.stopPropagation(),q([]),null==D||D([])}},t.createElement(d,{className:o("flex-none",h.md.height,h.md.width,b(C,v.lightText).textColor),"aria-hidden":"true"})):null,t.createElement(m,{className:o("flex-none",h.lg.height,h.lg.width,f.twoXs.negativeMarginRight,b(C,v.lightText).textColor),"aria-hidden":"true"}))),t.createElement(V,{showModal:A,setShowModal:le,parentRef:z},t.createElement("div",{className:o("flex items-center w-full",b(C,v.canvasBackground).bgColor,f.twoXl.paddingX)},t.createElement("span",null,t.createElement(c,{className:o("flex-none",b(C,v.lightText).textColor,f.threeXs.negativeMarginLeft,f.lg.marginRight,h.md.height,h.md.width),"aria-hidden":"true"})),t.createElement("input",{name:"search",type:"input",placeholder:"Search",className:o("w-full focus:outline-none focus:ring-none",b(C,v.darkText).textColor,b("transparent").bgColor,f.sm.paddingY,x.sm,w.md),onChange:e=>G(e.target.value)})),t.createElement(r.Provider,{value:{selectedValue:J,handleValueChange:ae}},t.createElement(n.Provider,{value:{hoveredValue:oe}},t.Children.map(L,(e=>{var l;const a=null!==(l=e.props.text)&&void 0!==l?l:e.props.value;if(ee.has(String(a)))return t.cloneElement(e)}))))))}));k.displayName="MultiSelectBox";export{k as default};
