{"version":3,"file":"MultiSelectDropdown.CWdRaP4W.mjs","names":["useState","startTransition","useCallback"],"sources":["https:/framerusercontent.com/modules/D7Cw8OOtve9xnfhxALNZ/u7YLfadw3CKLgPmrnoSf/MultiSelectDropdown.js"],"sourcesContent":["// MultiSelectDropdown component for Framer with configurable labels, options, field formatting, and styling\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition,useCallback}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * MultiSelectDropdown\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 56\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function MultiSelectDropdown(props){const{options=[{label:\"Option 1\",value:\"option-1\"},{label:\"Option 2\",value:\"option-2\"}],placeholder,label,labelFont,optionFont,backgroundColor,borderColor,borderRadius,borderWidth,textColor,selectedColor,selectedTextColor,dropdownShadow,dropdownMaxHeight,showLabel,isRequired=false,style}=props;const[open,setOpen]=useState(false);const[selected,setSelected]=useState([]);const handleToggle=()=>startTransition(()=>setOpen(o=>!o));const handleSelect=useCallback(option=>{const isSelected=selected.some(o=>o.value===option.value);if(isSelected){startTransition(()=>setSelected(selected.filter(o=>o.value!==option.value)));}else{startTransition(()=>setSelected([...selected,option]));}},[selected]);const handleBlur=e=>{// if focus goes outside the component\nif(!e.currentTarget.contains(e.relatedTarget)){startTransition(()=>setOpen(false));}};const selectedLabels=selected.length>0?selected.map(o=>o.label).join(\", \"):\"\";return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",...style},tabIndex:0,onBlur:handleBlur,\"aria-haspopup\":\"listbox\",role:\"combobox\",\"aria-expanded\":open,\"aria-label\":label,children:[showLabel&&label&&/*#__PURE__*/_jsxs(\"span\",{style:{display:\"block\",marginBottom:6,color:textColor,...labelFont},children:[label,isRequired?\" *\":null]}),/*#__PURE__*/_jsxs(\"div\",{tabIndex:0,style:{display:\"flex\",alignItems:\"center\",minHeight:40,background:backgroundColor,border:`${borderWidth}px solid ${borderColor}`,borderRadius,cursor:\"pointer\",color:textColor,padding:\"10px 12px\",gap:8,...optionFont},onClick:handleToggle,\"aria-controls\":\"multiselect-dropdown-listbox\",children:[/*#__PURE__*/_jsx(\"span\",{style:{color:selected.length===0?\"#999\":textColor,userSelect:\"none\",flex:1,whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\"},children:selected.length===0?placeholder:selectedLabels}),/*#__PURE__*/_jsx(\"svg\",{width:\"18\",height:\"18\",viewBox:\"0 0 20 20\",style:{marginLeft:2},fill:\"none\",stroke:textColor,children:/*#__PURE__*/_jsx(\"path\",{d:\"M7 8l3 3 3-3\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]}),open&&/*#__PURE__*/_jsx(\"div\",{id:\"multiselect-dropdown-listbox\",role:\"listbox\",style:{position:\"absolute\",left:0,right:0,zIndex:10,background:backgroundColor,marginTop:4,border:`${borderWidth}px solid ${borderColor}`,borderRadius,maxHeight:dropdownMaxHeight,overflowY:\"auto\",boxShadow:dropdownShadow?\"0 8px 24px rgba(0,0,0,0.09)\":\"none\"},children:options.map((option,idx)=>{const isActive=selected.some(o=>o.value===option.value);return /*#__PURE__*/_jsxs(\"div\",{role:\"option\",\"aria-selected\":isActive,style:{padding:\"10px 12px\",background:isActive?selectedColor:\"transparent\",color:isActive?selectedTextColor:textColor,cursor:\"pointer\",...optionFont,borderRadius,transition:\"background 0.13s\",fontWeight:isActive?600:400,display:\"flex\",alignItems:\"center\",gap:7},onClick:()=>handleSelect(option),children:[/*#__PURE__*/_jsx(\"span\",{children:option.label}),isActive&&/*#__PURE__*/_jsx(\"svg\",{height:\"15\",width:\"15\",viewBox:\"0 0 20 20\",fill:\"none\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M5 10l4 4 6-7\",stroke:selectedTextColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]},option.value);})})]});}addPropertyControls(MultiSelectDropdown,{showLabel:{type:ControlType.Boolean,title:\"Show Label\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Choose options\",hidden:({showLabel})=>showLabel===false},placeholder:{type:ControlType.String,title:\"Placeholder\",defaultValue:\"Select…\"},options:{type:ControlType.Array,title:\"Options\",control:{type:ControlType.Object,controls:{label:{type:ControlType.String,defaultValue:\"Option 1\"},value:{type:ControlType.String,defaultValue:\"option-1\"}}},defaultValue:[{label:\"Option 1\",value:\"option-1\"},{label:\"Option 2\",value:\"option-2\"}],maxCount:12},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},optionFont:{type:ControlType.Font,title:\"Option Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#fff\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#EEEEEE\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:24},borderWidth:{type:ControlType.Number,title:\"Border\",defaultValue:1,min:0,max:4},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#222\"},selectedColor:{type:ControlType.Color,title:\"Selected Bg\",defaultValue:\"#222\"},selectedTextColor:{type:ControlType.Color,title:\"Selected Txt\",defaultValue:\"#fff\"},dropdownShadow:{type:ControlType.Boolean,title:\"Shadow\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},dropdownMaxHeight:{type:ControlType.Number,title:\"Dropdown Height\",defaultValue:200,min:90,max:500,unit:\"px\"},isRequired:{type:ControlType.Boolean,title:\"Required\",defaultValue:false,enabledTitle:\"Required\",disabledTitle:\"Optional\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MultiSelectDropdown\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"56\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"300\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MultiSelectDropdown.map"],"mappings":"gMASG,SAAwB,EAAoB,EAAM,CAAC,GAAK,CAAC,UAAQ,CAAC,CAAC,MAAM,WAAW,MAAM,UAAU,EAAE,CAAC,MAAM,WAAW,MAAM,UAAU,CAAC,EAAE,cAAY,QAAM,YAAU,aAAW,kBAAgB,cAAY,eAAa,cAAY,YAAU,gBAAc,oBAAkB,iBAAe,oBAAkB,YAAU,aAAW,GAAM,SAAO,EAAW,CAAC,EAAK,GAASA,EAAS,EAAK,EAAO,CAAC,EAAS,GAAaA,EAAS,CAAC,CAAC,EAAQ,MAAiBC,MAAoB,EAAQ,GAAG,CAAC,CAAC,CAAC,EAAQ,EAAaC,EAAY,GAAQ,CAAkB,EAAS,KAAK,GAAG,EAAE,QAAQ,EAAO,KAAmB,EAAG,MAAoB,EAAY,EAAS,OAAO,GAAG,EAAE,QAAQ,EAAO,KAAK,CAAC,CAAC,EAAQ,MAAoB,EAAY,CAAC,GAAG,EAAS,CAAM,CAAC,CAAC,CAAG,EAAE,CAAC,CAAQ,CAAC,EAAQ,EAAW,GAAG,CAC/vB,EAAE,cAAc,SAAS,EAAE,aAAa,GAAG,MAAoB,EAAQ,EAAK,CAAC,CAAG,EAAQ,EAAe,EAAS,OAAO,EAAE,EAAS,IAAI,GAAG,EAAE,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,GAAG,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,GAAG,CAAK,EAAE,SAAS,EAAE,OAAO,EAAW,gBAAgB,UAAU,KAAK,WAAW,gBAAgB,EAAK,aAAa,EAAM,SAAS,CAAC,GAAW,GAAoB,EAAM,OAAO,CAAC,MAAM,CAAC,QAAQ,QAAQ,aAAa,EAAE,MAAM,EAAU,GAAG,CAAS,EAAE,SAAS,CAAC,EAAM,EAAW,KAAK,IAAI,CAAC,CAAC,EAAe,EAAM,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,OAAO,WAAW,SAAS,UAAU,GAAG,WAAW,EAAgB,OAAO,GAAG,EAAY,WAAW,IAAc,eAAa,OAAO,UAAU,MAAM,EAAU,QAAQ,YAAY,IAAI,EAAE,GAAG,CAAU,EAAE,QAAQ,EAAa,gBAAgB,+BAA+B,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAS,SAAS,EAAE,OAAO,EAAU,WAAW,OAAO,KAAK,EAAE,WAAW,SAAS,SAAS,SAAS,aAAa,UAAU,EAAE,SAAS,EAAS,SAAS,EAAE,EAAY,CAAc,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,MAAM,CAAC,WAAW,CAAC,EAAE,KAAK,OAAO,OAAO,EAAU,SAAsB,EAAK,OAAO,CAAC,EAAE,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAmB,EAAK,MAAM,CAAC,GAAG,+BAA+B,KAAK,UAAU,MAAM,CAAC,SAAS,WAAW,KAAK,EAAE,MAAM,EAAE,OAAO,GAAG,WAAW,EAAgB,UAAU,EAAE,OAAO,GAAG,EAAY,WAAW,IAAc,eAAa,UAAU,EAAkB,UAAU,OAAO,UAAU,EAAe,8BAA8B,MAAM,EAAE,SAAS,EAAQ,KAAK,EAAO,IAAM,CAAC,IAAM,EAAS,EAAS,KAAK,GAAG,EAAE,QAAQ,EAAO,KAAK,EAAE,OAAoB,EAAM,MAAM,CAAC,KAAK,SAAS,gBAAgB,EAAS,MAAM,CAAC,QAAQ,YAAY,WAAW,EAAS,EAAc,cAAc,MAAM,EAAS,EAAkB,EAAU,OAAO,UAAU,GAAG,EAAW,eAAa,WAAW,mBAAmB,WAAW,EAAS,IAAI,IAAI,QAAQ,OAAO,WAAW,SAAS,IAAI,CAAC,EAAE,YAAY,EAAa,CAAM,EAAE,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,EAAO,KAAK,CAAC,EAAE,GAAuB,EAAK,MAAM,CAAC,OAAO,KAAK,MAAM,KAAK,QAAQ,YAAY,KAAK,OAAO,SAAsB,EAAK,OAAO,CAAC,EAAE,gBAAgB,OAAO,EAAkB,YAAY,IAAI,cAAc,QAAQ,eAAe,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAO,KAAK,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,iBATn0E,IAAwD,IAAoD,EASwtE,EAAoB,EAAoB,CAAC,UAAU,CAAC,KAAK,EAAY,QAAQ,MAAM,aAAa,aAAa,GAAK,aAAa,OAAO,cAAc,MAAM,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,iBAAiB,QAAQ,CAAC,eAAa,IAAY,EAAK,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,QAAQ,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,UAAU,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,UAAU,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,WAAW,MAAM,UAAU,EAAE,CAAC,MAAM,WAAW,MAAM,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,EAAY,KAAK,MAAM,cAAc,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,SAAS,cAAc,UAAU,WAAW,OAAO,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,MAAM,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,aAAa,SAAS,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,aAAa,MAAM,EAAE,cAAc,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,MAAM,EAAE,kBAAkB,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,MAAM,EAAE,eAAe,CAAC,KAAK,EAAY,QAAQ,MAAM,SAAS,aAAa,GAAK,aAAa,OAAO,cAAc,MAAM,EAAE,kBAAkB,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,IAAI,EAAE,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,WAAW,aAAa,GAAM,aAAa,WAAW,cAAc,UAAU,CAAC,CAAC"}