UNPKG

@iqmo/browser

Version:
2 lines (1 loc) 4.12 kB
import{c as I,r as s,ao as M,cD as T,cE as $,cF as j,cG as k,j as r,b_ as L,b$ as V,cg as B,c0 as F,bI as H,cC as O,cH as A,cy as N,cI as P,cc as D}from"./index-0xtYjrTa.js";import{a as E}from"./useBasicWidgetState-0Cg3lNvA.js";const G=I("div",{target:"e6zijwc0"})(({theme:i})=>({"span[aria-disabled='true']":{background:i.colors.fadedText05}}),""),U=(i,t)=>i.getStringArrayValue(t),_=i=>i.default.map(t=>i.options[t])??null,K=i=>i.rawValues??null,Y=(i,t,l,n)=>{t.setStringArrayValue(i,l.value,{fromUi:l.fromUi},n)},X=i=>{const{element:t,widgetMgr:l,fragmentId:n}=i,e=M(),h=s.useContext(T),[a,g]=E({getStateFromWidgetMgr:U,getDefaultStateFromProto:_,getCurrStateFromProto:K,updateWidgetMgrState:Y,element:t,widgetMgr:l,fragmentId:n}),m=t.maxSelections>0&&a.length>=t.maxSelections,b=s.useMemo(()=>{if(t.maxSelections===0)return"No results";if(a.length===t.maxSelections){const o=t.maxSelections!==1?"options":"option";return`You can only select up to ${t.maxSelections} ${o}. Remove an option first.`}return"No results"},[t.maxSelections,a.length]),f=s.useMemo(()=>a.map(o=>({value:o,label:o})),[a]),u=s.useCallback(o=>{switch(o.type){case"remove":return $(a,o.option?.value);case"clear":return[];case"select":return a.concat([o.option?.value]);default:throw new Error(`State transition is unknown: ${o.type}`)}},[a]),S=s.useCallback(o=>{t.maxSelections&&o.type==="select"&&a.length>=t.maxSelections||g({value:u(o),fromUi:!0})},[t.maxSelections,u,g,a.length]),y=s.useCallback((o,p)=>{if(m)return[];const C=o.filter(W=>!a.includes(W.value));return j(C,p)},[m,a]),{options:c}=t,{placeholder:x,shouldDisable:v}=k(t.placeholder,c,t.acceptNewOptions??!1,!0),d=i.disabled||v,z=c.map((o,p)=>({label:o,value:o,id:`${o}_${p}`})),w=c.length>10,R=s.useMemo(()=>{const o=e.fontSizes.baseFontSize*1.6+14;return`${Math.round(o*4.25)}px`},[e.fontSizes.baseFontSize]);return r.jsxs("div",{className:"stMultiSelect","data-testid":"stMultiSelect",children:[r.jsx(L,{label:t.label,disabled:d,labelVisibility:V(t.labelVisibility?.value),children:t.help&&r.jsx(B,{children:r.jsx(F,{content:t.help,placement:H.TOP_RIGHT})})}),r.jsx(G,{children:r.jsx(O,{creatable:t.acceptNewOptions??!1,options:z,labelKey:"label",valueKey:"value","aria-label":t.label,placeholder:x,type:P.select,multi:!0,onChange:S,value:f,disabled:d,size:"compact",noResultsMsg:b,filterOptions:y,closeOnSelect:!1,ignoreCase:!1,overrides:{Popover:{props:{ignoreBoundary:h,overrides:{Body:{style:()=>({marginTop:e.spacing.px})}}}},SelectArrow:{component:N,props:{style:{cursor:"pointer"},overrides:{Svg:{style:()=>({width:e.iconSizes.xl,height:e.iconSizes.xl})}}}},IconsContainer:{style:()=>({paddingRight:e.spacing.sm})},ControlContainer:{style:{maxHeight:R,minHeight:e.sizes.minElementHeight,borderLeftWidth:e.sizes.borderWidth,borderRightWidth:e.sizes.borderWidth,borderTopWidth:e.sizes.borderWidth,borderBottomWidth:e.sizes.borderWidth}},Placeholder:{style:()=>({flex:"inherit",color:d?e.colors.fadedText40:e.colors.fadedText60})},ValueContainer:{style:()=>({overflowY:"auto",paddingLeft:e.spacing.sm,paddingTop:e.spacing.none,paddingBottom:e.spacing.none,paddingRight:e.spacing.none})},ClearIcon:{props:{overrides:{Svg:{style:{color:e.colors.darkGray,padding:e.spacing.threeXS,height:e.sizes.clearIconSize,width:e.sizes.clearIconSize,cursor:"pointer",":hover":{fill:e.colors.bodyText}}}}}},SearchIcon:{style:{color:e.colors.darkGray}},Tag:{props:{overrides:{Root:{style:{fontWeight:e.fontWeights.normal,borderTopLeftRadius:e.radii.md,borderTopRightRadius:e.radii.md,borderBottomRightRadius:e.radii.md,borderBottomLeftRadius:e.radii.md,fontSize:e.fontSizes.md,paddingLeft:e.spacing.sm,marginLeft:e.spacing.none,marginRight:e.spacing.sm,height:`calc(${e.sizes.minElementHeight} - 2 * ${e.spacing.xs})`,maxWidth:`calc(100% - ${e.spacing.lg})`,cursor:"default !important"}},Action:{style:{paddingLeft:0}},ActionIcon:{props:{overrides:{Svg:{style:{width:"0.625em",height:"0.625em"}}}}}}}},MultiValue:{props:{overrides:{Root:{style:{fontSize:e.fontSizes.sm}}}}},Input:{props:{readOnly:D()&&w===!1?"readonly":null}},Dropdown:{component:A}}})})]})},Q=s.memo(X);export{Q as default};