@contentful/f36-multiselect 4.23.0 → 4.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -11,8 +11,8 @@ import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
|
|
|
11
11
|
import { Popover } from '@contentful/f36-popover';
|
|
12
12
|
import Re from 'react-focus-lock';
|
|
13
13
|
|
|
14
|
-
var se=Object.defineProperty,ae=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var W=(e,o,t)=>o in e?se(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,
|
|
14
|
+
var se=Object.defineProperty,ae=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var W=(e,o,t)=>o in e?se(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,v=(e,o)=>{for(var t in o||(o={}))z.call(o,t)&&W(e,t,o[t]);if(C)for(var t of C(o))V.call(o,t)&&W(e,t,o[t]);return e},N=(e,o)=>ae(e,ce(o));var O=(e,o)=>{var t={};for(var r in e)z.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&C)for(var r of C(e))o.indexOf(r)<0&&V.call(e,r)&&(t[r]=e[r]);return t};var h=()=>({multiselect:css({position:"relative",width:"100%"}),triggerButton:css({justifyContent:"space-between"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:n.spacing2Xs}),currentSelectionAddition:css({color:n.gray600}),searchBar:css({paddingTop:n.spacing2Xs,position:"sticky",top:"0px",zIndex:n.zIndexWorkbenchHeader,backgroundColor:n.colorWhite}),inputField:css({padding:`6px ${n.spacingXl} 10px ${n.spacingXs}`,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${n.gray200}`,boxShadow:"none","&:focus, &:active, &:active:hover":{boxShadow:"none",borderBottom:`1px solid ${n.gray200}`}}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:n.zIndexDefault,padding:n.spacing2Xs,height:n.spacingXl}),content:e=>css({overflow:"auto",maxHeight:`${e}px`}),container:css({}),list:css({listStyle:"none",padding:`${n.spacing2Xs}`,margin:0}),groupTitle:css({padding:`6px ${n.spacingXs}`,lineHeight:n.lineHeightM}),noMatchesTitle:css({color:n.gray500,margin:n.spacingM,textAlign:"center"}),selectAll:css({borderBottom:`1px solid ${n.gray200}`,marginBottom:n.spacing2Xs,paddingBottom:n.spacing2Xs,"label > *":{fontWeight:n.fontWeightMedium}}),option:css({listStyleType:"none",margin:"1px 0"}),optionText:css({color:n.gray700,b:{color:n.gray900}}),optionCheck:css({label:{padding:`6px ${n.spacingXs}`,width:"100%",wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:n.borderRadiusMedium,border:0,cursor:"pointer",fontSize:n.fontSizeM,lineHeight:n.lineHeightM,fontWeight:n.fontWeightNormal,"&:focus, &:hover":{backgroundColor:n.gray100},"&:active":{backgroundColor:n.gray200},"&:focus":{boxShadow:n.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:n.glowPrimary}}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var S=b=>{var g=b,{label:e,value:o,itemId:t,onSelectItem:r,searchValue:s,isChecked:a=!1,isDisabled:M=!1,className:c}=g,d=O(g,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=h();return l.createElement("li",v({className:cx(u.option,c)},d),l.createElement(Checkbox,{id:t,value:o,onChange:m=>r(m),isChecked:a,isDisabled:M,className:cx(u.optionCheck,M&&u.disabled)},l.createElement(Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l.createElement(j,{item:e,inputValue:s}))))};function j({item:e,inputValue:o=""}){let{before:t,match:r,after:s}=getStringMatch(e,o);return l.createElement(l.Fragment,null,t,l.createElement("b",{"data-test-id":"cf-multiselect-item-match"},r),s)}j.displayName="HighlightedItem";var _=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:r,searchInputRef:s,resetSearchRef:a,searchPlaceholder:M="Search",focusList:c})=>{let d=h(),b=useRef(null),g=useCallback(m=>{o(m.target.value),t==null||t(m);},[t,o]),u=useCallback(()=>{if(!e)return;c(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(b.current,"");let y=new Event("change",{bubbles:!0});b.current.dispatchEvent(y);},[e,c]);return l.createElement("div",{className:d.searchBar},l.createElement(TextInput,{"aria-label":"Search",type:"text",value:e,className:d.inputField,testId:"cf-multiselect-search",placeholder:M,onChange:g,ref:mergeRefs(s,b),name:r,size:"small"}),l.createElement(IconButton,{ref:a,"aria-label":e?"Clear search":"Search",className:d.toggleButton,variant:"transparent",icon:e?l.createElement(CloseIcon,{variant:"muted"}):l.createElement(SearchIcon,{variant:"muted"}),onClick:u,isDisabled:!e,size:"small"}))};var K=(e,o,t)=>l.Children.map(e,r=>{if(!l.isValidElement(r))return r;if(o(r))return t(r);let s=K(r.props.children,o,t);return l.cloneElement(r,{children:s})}),Q=(e,o)=>{let t=0;return l.Children.forEach(e,r=>{l.isValidElement(r)&&(o(r)?t+=1:t+=Q(r.props.children,o));}),t};function we(e,o){let{className:t,startIcon:r,placeholder:s="Select one or more Items",currentSelection:a=[],toggleRef:M,isLoading:c=!1,testId:d="cf-multiselect",noMatchesMessage:b="No matches found",searchProps:g={},popoverProps:u={},children:m,onBlur:y}=e,{listMaxHeight:Z=180,listRef:ee,onClose:T}=u,p=h(),[R,te]=useState(""),[H,A]=useState(!1),B=useRef(null),X=typeof e.onSearchValueChange=="function"||typeof g.onSearchValueChange=="function",oe=Object.keys(g).length>0?g:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},w=useCallback(()=>{var f;(f=B.current)==null||f.focus();},[]),ne=useCallback(()=>{if(a.length===0)return l.createElement(l.Fragment,null,s);let f=a.length-1;return f===0?l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:p.currentSelection},a[0]):l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:p.currentSelection},a[0]," ",l.createElement("span",{className:p.currentSelectionAddition},"and ",f," more"))},[a,s,p.currentSelection,p.currentSelectionAddition]),$=useMemo(()=>Q(m,f=>f.type===S),[m]),re=l.useCallback(f=>K(f,P=>P.type===S,P=>{let le=ie=>{var D;w(),(D=P.props)==null||D.onSelectItem(ie);};return l.cloneElement(P,{searchValue:R,onSelectItem:le})}),[R,w]);return l.createElement("div",{"data-test-id":d,className:cx(p.multiselect,t),ref:o},l.createElement(Popover,N(v({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:H,onClose:()=>{A(!1),T&&T();}}),l.createElement(Popover.Trigger,null,l.createElement(Button,{"aria-label":"Toggle Multiselect",ref:M,onClick:()=>A(!H),startIcon:r,endIcon:l.createElement(ChevronDownIcon,null),isFullWidth:!0,className:p.triggerButton},ne())),l.createElement(Popover.Content,{ref:mergeRefs(ee,B),className:cx(p.content(Z),u.className,p.container),testId:"cf-multiselect-container",onBlur:()=>y==null?void 0:y()},l.createElement(Re,{focusOptions:{preventScroll:!0},returnFocus:!0},X&&l.createElement(_,N(v({},oe),{setSearchValue:te,searchValue:R,focusList:w})),c&&l.createElement(Ne,null),!c&&$>0&&l.createElement("ul",{className:p.list,"data-test-id":"cf-multiselect-items"},X?re(m):m),!c&&$===0&&l.createElement(Subheading,{className:p.noMatchesTitle},b)))))}var Ne=()=>l.createElement(SkeletonContainer,{svgHeight:16},l.createElement(SkeletonBodyText,{numberOfLines:1})),Y=l.forwardRef(we);var L=M=>{var c=M,{label:e,itemId:o="SelectAll",onSelectItem:t,isChecked:r=!1,className:s}=c,a=O(c,["label","itemId","onSelectItem","isChecked","className"]);let d=h();return l.createElement(S,v({value:"all",label:e||r?"Deselect all":"Select all",itemId:o,onSelectItem:t,isChecked:r,className:cx(d.selectAll,s)},a))};var k=Y;k.Option=S;k.SelectAll=L;
|
|
15
15
|
|
|
16
|
-
export { k as Multiselect,
|
|
16
|
+
export { k as Multiselect, S as MultiselectOption, L as SelectAllOption };
|
|
17
17
|
//# sourceMappingURL=out.js.map
|
|
18
18
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.tsx","../../src/MultiselectSearch.tsx","../../src/SelectAllOption.tsx","../../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","TextInput","CloseIcon","SearchIcon","IconButton","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","listRef","onClose","isOpen","setIsOpen","internalListRef","hasSearch","handoverSearchProps","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"qlBAAA,OAAOA,MAAW,QAClB,OAAS,YAAAC,OAAgB,wBACzB,OAAS,QAAAC,OAAY,6BCFrB,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAuB,KAAO,CACzC,YAAaF,EAAI,CACf,SAAU,WACV,MAAO,MACT,CAAC,EACD,cAAeA,EAAI,CACjB,eAAgB,eAClB,CAAC,EACD,iBAAkBA,EAAI,CACpB,MAAO,MACP,WAAY,SACZ,aAAc,WACd,SAAU,SACV,cAAe,SACf,YAAaC,EAAO,UACtB,CAAC,EACD,yBAA0BD,EAAI,CAC5B,MAAOC,EAAO,OAChB,CAAC,EACD,UAAWD,EAAI,CACb,WAAYC,EAAO,WACnB,SAAU,SACV,IAAK,MACL,OAAQA,EAAO,sBACf,gBAAiBA,EAAO,UAC1B,CAAC,EACD,WAAYD,EAAI,CACd,QAAS,OAAOC,EAAO,SAAS,SAASA,EAAO,SAAS,GACzD,aAAc,WACd,WAAY,SACZ,OAAQ,OACR,aAAc,MACd,aAAc,aAAaA,EAAO,OAAO,GACzC,UAAW,OACX,oCAAqC,CACnC,UAAW,OACX,aAAc,aAAaA,EAAO,OAAO,EAC3C,CACF,CAAC,EACD,aAAcD,EAAI,CAChB,SAAU,WACV,IAAK,MACL,MAAO,MACP,OAAQC,EAAO,cACf,QAASA,EAAO,WAChB,OAAQA,EAAO,SACjB,CAAC,EACD,QAAUE,GACRH,EAAI,CACF,SAAU,OACV,UAAW,GAAGG,CAAa,IAC7B,CAAC,EACH,UAAWH,EAAI,CAAC,CAAC,EACjB,KAAMA,EAAI,CACR,UAAW,OACX,QAAS,GAAGC,EAAO,UAAU,GAC7B,OAAQ,CACV,CAAC,EACD,WAAYD,EAAI,CAEd,QAAS,OAAOC,EAAO,SAAS,GAChC,WAAYA,EAAO,WACrB,CAAC,EACD,eAAgBD,EAAI,CAClB,MAAOC,EAAO,QACd,OAAQA,EAAO,SACf,UAAW,QACb,CAAC,EACD,UAAWD,EAAI,CACb,aAAc,aAAaC,EAAO,OAAO,GACzC,aAAcA,EAAO,WACrB,cAAeA,EAAO,WACtB,YAAa,CACX,WAAYA,EAAO,gBACrB,CACF,CAAC,EACD,OAAQD,EAAI,CACV,cAAe,OACf,OAAQ,OACV,CAAC,EACD,WAAYA,EAAI,CACd,MAAOC,EAAO,QACd,EAAG,CACD,MAAOA,EAAO,OAChB,CACF,CAAC,EACD,YAAaD,EAAI,CACf,MAAO,CAEL,QAAS,OAAOC,EAAO,SAAS,GAChC,MAAO,OACP,UAAW,aACX,WAAY,eACZ,QAAS,OACT,QAAS,OACT,cAAe,MACf,WAAY,SACZ,aAAcA,EAAO,mBACrB,OAAQ,EACR,OAAQ,UACR,SAAUA,EAAO,UACjB,WAAYA,EAAO,YACnB,WAAYA,EAAO,iBACnB,mBAAoB,CAClB,gBAAiBA,EAAO,OAC1B,EACA,WAAY,CACV,gBAAiBA,EAAO,OAC1B,EACA,UAAW,CACT,UAAWA,EAAO,WACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,WACpB,CACF,CACF,CAAC,EACD,SAAUD,EAAI,CACZ,QAAS,GACT,OAAQ,aACV,CAAC,CACH,GD3HA,OAAS,kBAAAI,OAAsB,wBAC/B,OAAS,MAAAC,MAAU,UAaZ,IAAMC,EAAqBC,GAUJ,CAVI,IAAAC,EAAAD,EAChC,OAAAE,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,CA1BF,EAkBkCR,EAS7BS,EAAAC,EAT6BV,EAS7B,CARH,QACA,QACA,SACA,eACA,cACA,YACA,aACA,cAGA,IAAMW,EAASjB,EAAqB,EAEpC,OACEL,EAAA,cAAC,KAAAuB,EAAA,CAAG,UAAWf,EAAGc,EAAO,OAAQH,CAAS,GAAOC,GAC/CpB,EAAA,cAACC,GAAA,CACC,GAAIa,EACJ,MAAOD,EACP,SAAWW,GAAUT,EAAaS,CAAK,EACvC,UAAWP,EACX,WAAYC,EACZ,UAAWV,EAAGc,EAAO,YAAaJ,GAAcI,EAAO,QAAQ,GAE/DtB,EAAA,cAACE,GAAA,CACC,UAAWoB,EAAO,WAClB,eAAc,4BAA4BR,CAAM,IAEhDd,EAAA,cAACyB,EAAA,CAAgB,KAAMb,EAAO,WAAYI,EAAa,CACzD,CACF,CACF,CAEJ,EAEA,SAASS,EAAgB,CACvB,KAAAC,EACA,WAAAC,EAAa,EACf,EAGG,CACD,GAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,CAAM,EAAIvB,GAAemB,EAAMC,CAAU,EAChE,OACE3B,EAAA,cAAAA,EAAA,cACG4B,EACD5B,EAAA,cAAC,KAAE,eAAa,6BAA6B6B,CAAM,EAClDC,CACH,CAEJ,CAEAL,EAAgB,YAAc,kBErE9B,OAAOzB,GAAS,UAAA+B,GAAQ,YAAAC,EAAU,eAAAC,EAAa,WAAAC,OAAe,QAC9D,OAAS,MAAA1B,MAAU,UAEnB,OAAS,aAAA2B,OAAmC,uBAC5C,OAAS,UAAAC,OAAc,yBACvB,OAAS,mBAAAC,OAAuB,wBAEhC,OAAS,qBAAAC,GAAmB,oBAAAC,OAAwB,2BACpD,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,cAAAC,OAAkB,6BAI3B,OAAOC,OAAe,mBCbtB,OAAO1C,GAAS,eAAAiC,EAAa,UAAAF,OAAc,QAC3C,OAAS,aAAAY,OAAiB,wBAC1B,OAAS,aAAAC,GAAW,cAAAC,OAAkB,wBACtC,OAAS,cAAAC,OAAkB,yBAE3B,OAAS,aAAAX,OAAiB,uBA+CnB,IAAMY,EAAoB,CAAC,CAChC,YAAA/B,EACA,eAAAgC,EACA,oBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EAAoB,SACpB,UAAAC,CACF,IAA8B,CAC5B,IAAMhC,EAASjB,EAAqB,EAC9BkD,EAAyBxB,GAAyB,IAAI,EAEtDyB,EAAqBvB,EACxBT,GAAU,CACTwB,EAAexB,EAAM,OAAO,KAAK,EACjCyB,GAAA,MAAAA,EAAsBzB,EACxB,EACA,CAACyB,EAAqBD,CAAc,CACtC,EAEMS,EAAmBxB,EAAY,IAAM,CACzC,GAAI,CAACjB,EAAa,OAClBsC,EAAU,EAGqB,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,EAAE,IACqB,KAAKC,EAAuB,QAAS,EAAE,EAC9D,IAAMG,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EACzDH,EAAuB,QAAQ,cAAcG,CAAW,CAC1D,EAAG,CAAC1C,EAAasC,CAAS,CAAC,EAE3B,OACEtD,EAAA,cAAC,OAAI,UAAWsB,EAAO,WACrBtB,EAAA,cAAC2C,GAAA,CACC,aAAW,SACX,KAAK,OACL,MAAO3B,EACP,UAAWM,EAAO,WAClB,OAAO,wBACP,YAAa+B,EACb,SAAUG,EACV,IAAKrB,GAAUgB,EAAgBI,CAAsB,EACrD,KAAML,EACN,KAAK,QACP,EACAlD,EAAA,cAAC8C,GAAA,CACC,IAAKM,EACL,aAAYpC,EAAc,eAAiB,SAC3C,UAAWM,EAAO,aAClB,QAAQ,cACR,KACEN,EACEhB,EAAA,cAAC4C,GAAA,CAAU,QAAQ,QAAQ,EAE3B5C,EAAA,cAAC6C,GAAA,CAAW,QAAQ,QAAQ,EAGhC,QAASY,EACT,WAAY,CAACzC,EACb,KAAK,QACP,CACF,CAEJ,EDRA,IAAM2C,EAAsB,CAC1BC,EACAC,EACAC,IAEO9D,EAAM,SAAS,IAAI4D,EAAWG,GAAU,CAE7C,GAAI,CAAC/D,EAAM,eAAe+D,CAAK,EAAG,OAAOA,EACzC,GAAIF,EAAOE,CAAK,EACd,OAAOD,EAASC,CAAK,EAEvB,IAAMC,EAAgBL,EACpBI,EAAM,MAAM,SACZF,EACAC,CACF,EACA,OAAO9D,EAAM,aAAa+D,EAAO,CAAE,SAAUC,CAAc,CAAY,CACzE,CAAC,EAIGC,EAAwB,CAC5BL,EACAC,IACW,CACX,IAAIK,EAAU,EACd,OAAAlE,EAAM,SAAS,QAAQ4D,EAAWG,GAAU,CAErC/D,EAAM,eAAe+D,CAAK,IAC1BF,EAAOE,CAAK,EAGfG,GAAW,EAFXA,GAAWD,EAAsBF,EAAM,MAAM,SAAUF,CAAM,EAIjE,CAAC,EACMK,CACT,EAEA,SAASC,GAAaC,EAAyBC,EAAgC,CAC7E,GAAM,CACJ,UAAAlD,EACA,UAAAmD,EACA,YAAAC,EAAc,2BACd,iBAAAC,EAAmB,CAAC,EACpB,UAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EAAS,iBACT,iBAAAC,EAAmB,mBACnB,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,SAAAlB,EACA,OAAAmB,CACF,EAAIX,EAEE,CAAE,cAAA9D,EAAgB,IAAK,QAAA0E,GAAS,QAAAC,CAAQ,EAAIH,EAE5CxD,EAASjB,EAAqB,EAE9B,CAACW,EAAagC,EAAc,EAAIhB,EAAS,EAAE,EAC3C,CAACkD,EAAQC,CAAS,EAAInD,EAAS,EAAK,EAEpCoD,EAAkBrD,GAAyB,IAAI,EAE/CsD,EACJ,OAAOjB,EAAM,qBAAwB,YACrC,OAAOS,EAAY,qBAAwB,WAEvCS,GACJ,OAAO,KAAKT,CAAW,EAAE,OAAS,EAC9BA,EACA,CACE,oBAAqBT,EAAM,oBAC3B,kBAAmBA,EAAM,kBACzB,gBAAiBA,EAAM,gBACvB,eAAgBA,EAAM,cACxB,EAEAd,EAAYrB,EAAY,IAAM,CA5LtC,IAAAvB,GAiMIA,EAAA0E,EAAgB,UAAhB,MAAA1E,EAAyB,OAC3B,EAAG,CAAC,CAAC,EAEC6E,GAAyBtD,EAAY,IAAM,CAC/C,GAAIuC,EAAiB,SAAW,EAC9B,OAAOxE,EAAA,cAAAA,EAAA,cAAGuE,CAAY,EAExB,IAAMiB,EAAgBhB,EAAiB,OAAS,EAChD,OAAIgB,IAAkB,EAElBxF,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjBkD,EAAiB,CAAC,CACrB,EAIFxE,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjBkD,EAAiB,CAAC,EAAG,IACtBxE,EAAA,cAAC,QAAK,UAAWsB,EAAO,0BAA0B,OAC3CkE,EAAc,OACrB,CACF,CAEJ,EAAG,CACDhB,EACAD,EACAjD,EAAO,iBACPA,EAAO,wBACT,CAAC,EAEKmE,EAAgBvD,GACpB,IACE+B,EACEL,EACCG,GAAUA,EAAM,OAAStD,CAC5B,EACF,CAACmD,CAAQ,CACX,EAGM8B,GAAgB1F,EAAM,YACzB4D,GACQD,EACLC,EACCG,GAAUA,EAAM,OAAStD,EACzBsD,GAAU,CACT,IAAMhD,GAAgBS,IAA+C,CArP/E,IAAAd,EAsPY4C,EAAU,GACV5C,EAAAqD,EAAM,QAAN,MAAArD,EAAa,aAAac,GAC5B,EACA,OAAOxB,EAAM,aAAa+D,EAAO,CAC/B,YAAA/C,EACA,aAAAD,EACF,CAAoC,CACtC,CACF,EAEF,CAACC,EAAasC,CAAS,CACzB,EAEA,OACEtD,EAAA,cAAC,OACC,eAAc2E,EACd,UAAWnE,EAAGc,EAAO,YAAaH,CAAS,EAC3C,IAAKkD,GAELrE,EAAA,cAACwC,EAAAmD,EAAApE,EAAA,CACC,mBAAoB,GACpB,YAAW,IACPuD,GAHL,CAKC,OAAQI,EACR,QAAS,IAAM,CACbC,EAAU,EAAK,EACXF,GACFA,EAAQ,CAEZ,IAEAjF,EAAA,cAACwC,EAAQ,QAAR,KACCxC,EAAA,cAACoC,GAAA,CACC,aAAW,qBACX,IAAKqC,EACL,QAAS,IAAMU,EAAU,CAACD,CAAM,EAChC,UAAWZ,EACX,QAAStE,EAAA,cAACqC,GAAA,IAAgB,EAC1B,YAAW,GACX,UAAWf,EAAO,eAEjBiE,GAAuB,CAC1B,CACF,EACAvF,EAAA,cAACwC,EAAQ,QAAR,CACC,IAAKL,GAAU6C,GAASI,CAAe,EACvC,UAAW5E,EACTc,EAAO,QAAQhB,CAAa,EAC5BwE,EAAa,UACbxD,EAAO,SACT,EACA,OAAO,2BACP,OAAQ,IAAMyD,GAAA,YAAAA,KAEd/E,EAAA,cAAC0C,GAAA,CAAU,aAAc,CAAE,cAAe,EAAK,EAAG,YAAa,IAC5D2C,GACCrF,EAAA,cAAC+C,EAAA4C,EAAApE,EAAA,GACK+D,IADL,CAEC,eAAgBtC,GAChB,YAAahC,EACb,UAAWsC,GACb,EAEDoB,GAAa1E,EAAA,cAAC4F,GAAA,IAAqB,EAEnC,CAAClB,GAAae,EAAgB,GAC7BzF,EAAA,cAAC,MAAG,UAAWsB,EAAO,KAAM,eAAa,wBACtC+D,EAAYK,GAAc9B,CAAQ,EAAIA,CACzC,EAGD,CAACc,GAAae,IAAkB,GAC/BzF,EAAA,cAACyC,GAAA,CAAW,UAAWnB,EAAO,gBAC3BsD,CACH,CAEJ,CACF,CACF,CACF,CAEJ,CAEA,IAAMgB,GAAuB,IAEzB5F,EAAA,cAACsC,GAAA,CAAkB,UAAW,IAC5BtC,EAAA,cAACuC,GAAA,CAAiB,cAAe,EAAG,CACtC,EAQSsD,EAAc7F,EAAM,WAAWmE,EAAY,EEtVxD,OAAOnE,OAAW,QAGlB,OAAS,MAAAQ,OAAU,UAOZ,IAAMsF,EAAmBpF,GAMJ,CANI,IAAAC,EAAAD,EAC9B,OAAAE,EACA,aAAAG,EACA,UAAAE,EAAY,GACZ,UAAAE,CAdF,EAUgCR,EAK3BoF,EAAA1E,EAL2BV,EAK3B,CAJH,QACA,eACA,YACA,cAGA,IAAMW,EAASjB,EAAqB,EAEpC,OACEL,GAAA,cAACS,EAAAc,EAAA,CACC,MAAM,MACN,MAJiBX,GAASK,EAAY,eAAiB,aAKvD,OAAO,YACP,aAAcF,EACd,UAAWE,EACX,UAAWT,GAAGc,EAAO,UAAWH,CAAS,GACrC4E,EACN,CAEJ,ECrBO,IAAMF,EAAcA,EAC3BA,EAAY,OAASpF,EACrBoF,EAAY,UAAYC","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={cx(styles.option, className)} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.optionCheck, isDisabled && styles.disabled)}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n searchBar: css({\n paddingTop: tokens.spacing2Xs,\n position: 'sticky',\n top: '0px',\n zIndex: tokens.zIndexWorkbenchHeader,\n backgroundColor: tokens.colorWhite,\n }),\n inputField: css({\n padding: `6px ${tokens.spacingXl} 10px ${tokens.spacingXs}`,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n boxShadow: 'none',\n '&:focus, &:active, &:active:hover': {\n boxShadow: 'none',\n borderBottom: `1px solid ${tokens.gray200}`,\n },\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n container: css({}),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacing2Xs}`,\n margin: 0,\n }),\n groupTitle: css({\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n textAlign: 'center',\n }),\n selectAll: css({\n borderBottom: `1px solid ${tokens.gray200}`,\n marginBottom: tokens.spacing2Xs,\n paddingBottom: tokens.spacing2Xs,\n 'label > *': {\n fontWeight: tokens.fontWeightMedium,\n },\n }),\n option: css({\n listStyleType: 'none',\n margin: '1px 0',\n }),\n optionText: css({\n color: tokens.gray700,\n b: {\n color: tokens.gray900,\n },\n }),\n optionCheck: css({\n label: {\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n width: '100%',\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n border: 0,\n cursor: 'pointer',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightM,\n fontWeight: tokens.fontWeightNormal,\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { ChevronDownIcon } from '@contentful/f36-icons';\n\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport FocusLock from 'react-focus-lock';\n\nimport type { MultiselectSearchProps as SearchProps } from './MultiselectSearch';\nimport { MultiselectSearch } from './MultiselectSearch';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options */\n children?: React.ReactNode;\n\n /**\n * Set a custom icon for the text input\n */\n startIcon?: React.ReactElement;\n\n /**\n * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n */\n placeholder?: string;\n\n /**\n * current Selected items, to be shown on the trigger button\n */\n currentSelection?: Array<string>;\n\n /**\n * Sets the list to show its loading state\n * @default false\n */\n isLoading?: boolean;\n\n /**\n * Use this prop to get a ref to the toggle button of the component\n */\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * Props to pass to the optional search field\n */\n searchProps?: SearchProps;\n\n /**\n * Function called whenever the search input value changes\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @deprecated Handover this prop in the searchProps subcomponent properties\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * A message that will be shown when it is not possible to find any option that matches the search value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Pass a form name to the search text input\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps> & {\n /**\n * It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n */\n listMaxHeight?: number;\n\n /**\n * Use this prop to get a ref to the list of items of the component\n */\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement | void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch =\n typeof props.onSearchValueChange === 'function' ||\n typeof searchProps.onSearchValueChange === 'function';\n\n const handoverSearchProps =\n Object.keys(searchProps).length > 0\n ? searchProps\n : {\n onSearchValueChange: props.onSearchValueChange,\n searchPlaceholder: props.searchPlaceholder,\n searchInputName: props.searchInputName,\n searchInputRef: props.searchInputRef,\n };\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId=\"SelectAll\"\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.tsx","../../src/MultiselectSearch.tsx","../../src/SelectAllOption.tsx","../../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","TextInput","CloseIcon","SearchIcon","IconButton","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","listRef","onClose","isOpen","setIsOpen","internalListRef","hasSearch","handoverSearchProps","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"qlBAAA,OAAOA,MAAW,QAClB,OAAS,YAAAC,OAAgB,wBACzB,OAAS,QAAAC,OAAY,6BCFrB,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAuB,KAAO,CACzC,YAAaF,EAAI,CACf,SAAU,WACV,MAAO,MACT,CAAC,EACD,cAAeA,EAAI,CACjB,eAAgB,eAClB,CAAC,EACD,iBAAkBA,EAAI,CACpB,MAAO,MACP,WAAY,SACZ,aAAc,WACd,SAAU,SACV,cAAe,SACf,YAAaC,EAAO,UACtB,CAAC,EACD,yBAA0BD,EAAI,CAC5B,MAAOC,EAAO,OAChB,CAAC,EACD,UAAWD,EAAI,CACb,WAAYC,EAAO,WACnB,SAAU,SACV,IAAK,MACL,OAAQA,EAAO,sBACf,gBAAiBA,EAAO,UAC1B,CAAC,EACD,WAAYD,EAAI,CACd,QAAS,OAAOC,EAAO,SAAS,SAASA,EAAO,SAAS,GACzD,aAAc,WACd,WAAY,SACZ,OAAQ,OACR,aAAc,MACd,aAAc,aAAaA,EAAO,OAAO,GACzC,UAAW,OACX,oCAAqC,CACnC,UAAW,OACX,aAAc,aAAaA,EAAO,OAAO,EAC3C,CACF,CAAC,EACD,aAAcD,EAAI,CAChB,SAAU,WACV,IAAK,MACL,MAAO,MACP,OAAQC,EAAO,cACf,QAASA,EAAO,WAChB,OAAQA,EAAO,SACjB,CAAC,EACD,QAAUE,GACRH,EAAI,CACF,SAAU,OACV,UAAW,GAAGG,CAAa,IAC7B,CAAC,EACH,UAAWH,EAAI,CAAC,CAAC,EACjB,KAAMA,EAAI,CACR,UAAW,OACX,QAAS,GAAGC,EAAO,UAAU,GAC7B,OAAQ,CACV,CAAC,EACD,WAAYD,EAAI,CAEd,QAAS,OAAOC,EAAO,SAAS,GAChC,WAAYA,EAAO,WACrB,CAAC,EACD,eAAgBD,EAAI,CAClB,MAAOC,EAAO,QACd,OAAQA,EAAO,SACf,UAAW,QACb,CAAC,EACD,UAAWD,EAAI,CACb,aAAc,aAAaC,EAAO,OAAO,GACzC,aAAcA,EAAO,WACrB,cAAeA,EAAO,WACtB,YAAa,CACX,WAAYA,EAAO,gBACrB,CACF,CAAC,EACD,OAAQD,EAAI,CACV,cAAe,OACf,OAAQ,OACV,CAAC,EACD,WAAYA,EAAI,CACd,MAAOC,EAAO,QACd,EAAG,CACD,MAAOA,EAAO,OAChB,CACF,CAAC,EACD,YAAaD,EAAI,CACf,MAAO,CAEL,QAAS,OAAOC,EAAO,SAAS,GAChC,MAAO,OACP,UAAW,aACX,WAAY,eACZ,QAAS,OACT,QAAS,OACT,cAAe,MACf,WAAY,SACZ,aAAcA,EAAO,mBACrB,OAAQ,EACR,OAAQ,UACR,SAAUA,EAAO,UACjB,WAAYA,EAAO,YACnB,WAAYA,EAAO,iBACnB,mBAAoB,CAClB,gBAAiBA,EAAO,OAC1B,EACA,WAAY,CACV,gBAAiBA,EAAO,OAC1B,EACA,UAAW,CACT,UAAWA,EAAO,WACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,WACpB,CACF,CACF,CAAC,EACD,SAAUD,EAAI,CACZ,QAAS,GACT,OAAQ,aACV,CAAC,CACH,GD3HA,OAAS,kBAAAI,OAAsB,wBAC/B,OAAS,MAAAC,MAAU,UAaZ,IAAMC,EAAqBC,GAUJ,CAVI,IAAAC,EAAAD,EAChC,OAAAE,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,CA1BF,EAkBkCR,EAS7BS,EAAAC,EAT6BV,EAS7B,CARH,QACA,QACA,SACA,eACA,cACA,YACA,aACA,cAGA,IAAMW,EAASjB,EAAqB,EAEpC,OACEL,EAAA,cAAC,KAAAuB,EAAA,CAAG,UAAWf,EAAGc,EAAO,OAAQH,CAAS,GAAOC,GAC/CpB,EAAA,cAACC,GAAA,CACC,GAAIa,EACJ,MAAOD,EACP,SAAWW,GAAUT,EAAaS,CAAK,EACvC,UAAWP,EACX,WAAYC,EACZ,UAAWV,EAAGc,EAAO,YAAaJ,GAAcI,EAAO,QAAQ,GAE/DtB,EAAA,cAACE,GAAA,CACC,UAAWoB,EAAO,WAClB,eAAc,4BAA4BR,CAAM,IAEhDd,EAAA,cAACyB,EAAA,CAAgB,KAAMb,EAAO,WAAYI,EAAa,CACzD,CACF,CACF,CAEJ,EAEA,SAASS,EAAgB,CACvB,KAAAC,EACA,WAAAC,EAAa,EACf,EAGG,CACD,GAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,CAAM,EAAIvB,GAAemB,EAAMC,CAAU,EAChE,OACE3B,EAAA,cAAAA,EAAA,cACG4B,EACD5B,EAAA,cAAC,KAAE,eAAa,6BAA6B6B,CAAM,EAClDC,CACH,CAEJ,CAEAL,EAAgB,YAAc,kBErE9B,OAAOzB,GAAS,UAAA+B,GAAQ,YAAAC,EAAU,eAAAC,EAAa,WAAAC,OAAe,QAC9D,OAAS,MAAA1B,MAAU,UAEnB,OAAS,aAAA2B,OAAmC,uBAC5C,OAAS,UAAAC,OAAc,yBACvB,OAAS,mBAAAC,OAAuB,wBAEhC,OAAS,qBAAAC,GAAmB,oBAAAC,OAAwB,2BACpD,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,cAAAC,OAAkB,6BAI3B,OAAOC,OAAe,mBCbtB,OAAO1C,GAAS,eAAAiC,EAAa,UAAAF,OAAc,QAC3C,OAAS,aAAAY,OAAiB,wBAC1B,OAAS,aAAAC,GAAW,cAAAC,OAAkB,wBACtC,OAAS,cAAAC,OAAkB,yBAE3B,OAAS,aAAAX,OAAiB,uBA+CnB,IAAMY,EAAoB,CAAC,CAChC,YAAA/B,EACA,eAAAgC,EACA,oBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EAAoB,SACpB,UAAAC,CACF,IAA8B,CAC5B,IAAMhC,EAASjB,EAAqB,EAC9BkD,EAAyBxB,GAAyB,IAAI,EAEtDyB,EAAqBvB,EACxBT,GAAU,CACTwB,EAAexB,EAAM,OAAO,KAAK,EACjCyB,GAAA,MAAAA,EAAsBzB,EACxB,EACA,CAACyB,EAAqBD,CAAc,CACtC,EAEMS,EAAmBxB,EAAY,IAAM,CACzC,GAAI,CAACjB,EAAa,OAClBsC,EAAU,EAGqB,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,EAAE,IACqB,KAAKC,EAAuB,QAAS,EAAE,EAC9D,IAAMG,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EACzDH,EAAuB,QAAQ,cAAcG,CAAW,CAC1D,EAAG,CAAC1C,EAAasC,CAAS,CAAC,EAE3B,OACEtD,EAAA,cAAC,OAAI,UAAWsB,EAAO,WACrBtB,EAAA,cAAC2C,GAAA,CACC,aAAW,SACX,KAAK,OACL,MAAO3B,EACP,UAAWM,EAAO,WAClB,OAAO,wBACP,YAAa+B,EACb,SAAUG,EACV,IAAKrB,GAAUgB,EAAgBI,CAAsB,EACrD,KAAML,EACN,KAAK,QACP,EACAlD,EAAA,cAAC8C,GAAA,CACC,IAAKM,EACL,aAAYpC,EAAc,eAAiB,SAC3C,UAAWM,EAAO,aAClB,QAAQ,cACR,KACEN,EACEhB,EAAA,cAAC4C,GAAA,CAAU,QAAQ,QAAQ,EAE3B5C,EAAA,cAAC6C,GAAA,CAAW,QAAQ,QAAQ,EAGhC,QAASY,EACT,WAAY,CAACzC,EACb,KAAK,QACP,CACF,CAEJ,EDRA,IAAM2C,EAAsB,CAC1BC,EACAC,EACAC,IAEO9D,EAAM,SAAS,IAAI4D,EAAWG,GAAU,CAE7C,GAAI,CAAC/D,EAAM,eAAe+D,CAAK,EAAG,OAAOA,EACzC,GAAIF,EAAOE,CAAK,EACd,OAAOD,EAASC,CAAK,EAEvB,IAAMC,EAAgBL,EACpBI,EAAM,MAAM,SACZF,EACAC,CACF,EACA,OAAO9D,EAAM,aAAa+D,EAAO,CAAE,SAAUC,CAAc,CAAY,CACzE,CAAC,EAIGC,EAAwB,CAC5BL,EACAC,IACW,CACX,IAAIK,EAAU,EACd,OAAAlE,EAAM,SAAS,QAAQ4D,EAAWG,GAAU,CAErC/D,EAAM,eAAe+D,CAAK,IAC1BF,EAAOE,CAAK,EAGfG,GAAW,EAFXA,GAAWD,EAAsBF,EAAM,MAAM,SAAUF,CAAM,EAIjE,CAAC,EACMK,CACT,EAEA,SAASC,GAAaC,EAAyBC,EAAgC,CAC7E,GAAM,CACJ,UAAAlD,EACA,UAAAmD,EACA,YAAAC,EAAc,2BACd,iBAAAC,EAAmB,CAAC,EACpB,UAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EAAS,iBACT,iBAAAC,EAAmB,mBACnB,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,SAAAlB,EACA,OAAAmB,CACF,EAAIX,EAEE,CAAE,cAAA9D,EAAgB,IAAK,QAAA0E,GAAS,QAAAC,CAAQ,EAAIH,EAE5CxD,EAASjB,EAAqB,EAE9B,CAACW,EAAagC,EAAc,EAAIhB,EAAS,EAAE,EAC3C,CAACkD,EAAQC,CAAS,EAAInD,EAAS,EAAK,EAEpCoD,EAAkBrD,GAAyB,IAAI,EAE/CsD,EACJ,OAAOjB,EAAM,qBAAwB,YACrC,OAAOS,EAAY,qBAAwB,WAEvCS,GACJ,OAAO,KAAKT,CAAW,EAAE,OAAS,EAC9BA,EACA,CACE,oBAAqBT,EAAM,oBAC3B,kBAAmBA,EAAM,kBACzB,gBAAiBA,EAAM,gBACvB,eAAgBA,EAAM,cACxB,EAEAd,EAAYrB,EAAY,IAAM,CA5LtC,IAAAvB,GAiMIA,EAAA0E,EAAgB,UAAhB,MAAA1E,EAAyB,OAC3B,EAAG,CAAC,CAAC,EAEC6E,GAAyBtD,EAAY,IAAM,CAC/C,GAAIuC,EAAiB,SAAW,EAC9B,OAAOxE,EAAA,cAAAA,EAAA,cAAGuE,CAAY,EAExB,IAAMiB,EAAgBhB,EAAiB,OAAS,EAChD,OAAIgB,IAAkB,EAElBxF,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjBkD,EAAiB,CAAC,CACrB,EAIFxE,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjBkD,EAAiB,CAAC,EAAG,IACtBxE,EAAA,cAAC,QAAK,UAAWsB,EAAO,0BAA0B,OAC3CkE,EAAc,OACrB,CACF,CAEJ,EAAG,CACDhB,EACAD,EACAjD,EAAO,iBACPA,EAAO,wBACT,CAAC,EAEKmE,EAAgBvD,GACpB,IACE+B,EACEL,EACCG,GAAUA,EAAM,OAAStD,CAC5B,EACF,CAACmD,CAAQ,CACX,EAGM8B,GAAgB1F,EAAM,YACzB4D,GACQD,EACLC,EACCG,GAAUA,EAAM,OAAStD,EACzBsD,GAAU,CACT,IAAMhD,GAAgBS,IAA+C,CArP/E,IAAAd,EAsPY4C,EAAU,GACV5C,EAAAqD,EAAM,QAAN,MAAArD,EAAa,aAAac,GAC5B,EACA,OAAOxB,EAAM,aAAa+D,EAAO,CAC/B,YAAA/C,EACA,aAAAD,EACF,CAAoC,CACtC,CACF,EAEF,CAACC,EAAasC,CAAS,CACzB,EAEA,OACEtD,EAAA,cAAC,OACC,eAAc2E,EACd,UAAWnE,EAAGc,EAAO,YAAaH,CAAS,EAC3C,IAAKkD,GAELrE,EAAA,cAACwC,EAAAmD,EAAApE,EAAA,CACC,mBAAoB,GACpB,YAAW,IACPuD,GAHL,CAKC,OAAQI,EACR,QAAS,IAAM,CACbC,EAAU,EAAK,EACXF,GACFA,EAAQ,CAEZ,IAEAjF,EAAA,cAACwC,EAAQ,QAAR,KACCxC,EAAA,cAACoC,GAAA,CACC,aAAW,qBACX,IAAKqC,EACL,QAAS,IAAMU,EAAU,CAACD,CAAM,EAChC,UAAWZ,EACX,QAAStE,EAAA,cAACqC,GAAA,IAAgB,EAC1B,YAAW,GACX,UAAWf,EAAO,eAEjBiE,GAAuB,CAC1B,CACF,EACAvF,EAAA,cAACwC,EAAQ,QAAR,CACC,IAAKL,GAAU6C,GAASI,CAAe,EACvC,UAAW5E,EACTc,EAAO,QAAQhB,CAAa,EAC5BwE,EAAa,UACbxD,EAAO,SACT,EACA,OAAO,2BACP,OAAQ,IAAMyD,GAAA,YAAAA,KAEd/E,EAAA,cAAC0C,GAAA,CAAU,aAAc,CAAE,cAAe,EAAK,EAAG,YAAa,IAC5D2C,GACCrF,EAAA,cAAC+C,EAAA4C,EAAApE,EAAA,GACK+D,IADL,CAEC,eAAgBtC,GAChB,YAAahC,EACb,UAAWsC,GACb,EAEDoB,GAAa1E,EAAA,cAAC4F,GAAA,IAAqB,EAEnC,CAAClB,GAAae,EAAgB,GAC7BzF,EAAA,cAAC,MAAG,UAAWsB,EAAO,KAAM,eAAa,wBACtC+D,EAAYK,GAAc9B,CAAQ,EAAIA,CACzC,EAGD,CAACc,GAAae,IAAkB,GAC/BzF,EAAA,cAACyC,GAAA,CAAW,UAAWnB,EAAO,gBAC3BsD,CACH,CAEJ,CACF,CACF,CACF,CAEJ,CAEA,IAAMgB,GAAuB,IAEzB5F,EAAA,cAACsC,GAAA,CAAkB,UAAW,IAC5BtC,EAAA,cAACuC,GAAA,CAAiB,cAAe,EAAG,CACtC,EAQSsD,EAAc7F,EAAM,WAAWmE,EAAY,EEtVxD,OAAOnE,OAAW,QAGlB,OAAS,MAAAQ,OAAU,UAQZ,IAAMsF,EAAmBpF,GAOJ,CAPI,IAAAC,EAAAD,EAC9B,OAAAE,EACA,OAAAE,EAAS,YACT,aAAAC,EACA,UAAAE,EAAY,GACZ,UAAAE,CAhBF,EAWgCR,EAM3BoF,EAAA1E,EAN2BV,EAM3B,CALH,QACA,SACA,eACA,YACA,cAGA,IAAMW,EAASjB,EAAqB,EAEpC,OACEL,GAAA,cAACS,EAAAc,EAAA,CACC,MAAM,MACN,MAJiBX,GAASK,EAAY,eAAiB,aAKvD,OAAQH,EACR,aAAcC,EACd,UAAWE,EACX,UAAWT,GAAGc,EAAO,UAAWH,CAAS,GACrC4E,EACN,CAEJ,ECvBO,IAAMF,EAAcA,EAC3BA,EAAY,OAASpF,EACrBoF,EAAY,UAAYC","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={cx(styles.option, className)} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.optionCheck, isDisabled && styles.disabled)}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n searchBar: css({\n paddingTop: tokens.spacing2Xs,\n position: 'sticky',\n top: '0px',\n zIndex: tokens.zIndexWorkbenchHeader,\n backgroundColor: tokens.colorWhite,\n }),\n inputField: css({\n padding: `6px ${tokens.spacingXl} 10px ${tokens.spacingXs}`,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n boxShadow: 'none',\n '&:focus, &:active, &:active:hover': {\n boxShadow: 'none',\n borderBottom: `1px solid ${tokens.gray200}`,\n },\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n container: css({}),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacing2Xs}`,\n margin: 0,\n }),\n groupTitle: css({\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n textAlign: 'center',\n }),\n selectAll: css({\n borderBottom: `1px solid ${tokens.gray200}`,\n marginBottom: tokens.spacing2Xs,\n paddingBottom: tokens.spacing2Xs,\n 'label > *': {\n fontWeight: tokens.fontWeightMedium,\n },\n }),\n option: css({\n listStyleType: 'none',\n margin: '1px 0',\n }),\n optionText: css({\n color: tokens.gray700,\n b: {\n color: tokens.gray900,\n },\n }),\n optionCheck: css({\n label: {\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n width: '100%',\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n border: 0,\n cursor: 'pointer',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightM,\n fontWeight: tokens.fontWeightNormal,\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { ChevronDownIcon } from '@contentful/f36-icons';\n\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport FocusLock from 'react-focus-lock';\n\nimport type { MultiselectSearchProps as SearchProps } from './MultiselectSearch';\nimport { MultiselectSearch } from './MultiselectSearch';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options */\n children?: React.ReactNode;\n\n /**\n * Set a custom icon for the text input\n */\n startIcon?: React.ReactElement;\n\n /**\n * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n */\n placeholder?: string;\n\n /**\n * current Selected items, to be shown on the trigger button\n */\n currentSelection?: Array<string>;\n\n /**\n * Sets the list to show its loading state\n * @default false\n */\n isLoading?: boolean;\n\n /**\n * Use this prop to get a ref to the toggle button of the component\n */\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * Props to pass to the optional search field\n */\n searchProps?: SearchProps;\n\n /**\n * Function called whenever the search input value changes\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @deprecated Handover this prop in the searchProps subcomponent properties\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * A message that will be shown when it is not possible to find any option that matches the search value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Pass a form name to the search text input\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps> & {\n /**\n * It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n */\n listMaxHeight?: number;\n\n /**\n * Use this prop to get a ref to the list of items of the component\n */\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement | void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch =\n typeof props.onSearchValueChange === 'function' ||\n typeof searchProps.onSearchValueChange === 'function';\n\n const handoverSearchProps =\n Object.keys(searchProps).length > 0\n ? searchProps\n : {\n onSearchValueChange: props.onSearchValueChange,\n searchPlaceholder: props.searchPlaceholder,\n searchInputName: props.searchInputName,\n searchInputRef: props.searchInputRef,\n };\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -132,8 +132,9 @@ declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps &
|
|
|
132
132
|
|
|
133
133
|
interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {
|
|
134
134
|
label?: string;
|
|
135
|
+
itemId?: string;
|
|
135
136
|
}
|
|
136
|
-
declare const SelectAllOption: ({ label, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
|
|
137
|
+
declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
|
|
137
138
|
|
|
138
139
|
declare type CompoundMultiselect = typeof Multiselect$1 & {
|
|
139
140
|
Option: typeof MultiselectOption;
|
package/dist/index.d.ts
CHANGED
|
@@ -132,8 +132,9 @@ declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps &
|
|
|
132
132
|
|
|
133
133
|
interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {
|
|
134
134
|
label?: string;
|
|
135
|
+
itemId?: string;
|
|
135
136
|
}
|
|
136
|
-
declare const SelectAllOption: ({ label, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
|
|
137
|
+
declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
|
|
137
138
|
|
|
138
139
|
declare type CompoundMultiselect = typeof Multiselect$1 & {
|
|
139
140
|
Option: typeof MultiselectOption;
|
package/dist/index.js
CHANGED
|
@@ -19,10 +19,10 @@ var l__default = /*#__PURE__*/_interopDefault(l);
|
|
|
19
19
|
var n__default = /*#__PURE__*/_interopDefault(n);
|
|
20
20
|
var Re__default = /*#__PURE__*/_interopDefault(Re);
|
|
21
21
|
|
|
22
|
-
var se=Object.defineProperty,ae=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var W=(e,o,t)=>o in e?se(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,
|
|
22
|
+
var se=Object.defineProperty,ae=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var W=(e,o,t)=>o in e?se(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,v=(e,o)=>{for(var t in o||(o={}))z.call(o,t)&&W(e,t,o[t]);if(C)for(var t of C(o))V.call(o,t)&&W(e,t,o[t]);return e},N=(e,o)=>ae(e,ce(o));var O=(e,o)=>{var t={};for(var r in e)z.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&C)for(var r of C(e))o.indexOf(r)<0&&V.call(e,r)&&(t[r]=e[r]);return t};var h=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),triggerButton:emotion.css({justifyContent:"space-between"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:n__default.default.spacing2Xs}),currentSelectionAddition:emotion.css({color:n__default.default.gray600}),searchBar:emotion.css({paddingTop:n__default.default.spacing2Xs,position:"sticky",top:"0px",zIndex:n__default.default.zIndexWorkbenchHeader,backgroundColor:n__default.default.colorWhite}),inputField:emotion.css({padding:`6px ${n__default.default.spacingXl} 10px ${n__default.default.spacingXs}`,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${n__default.default.gray200}`,boxShadow:"none","&:focus, &:active, &:active:hover":{boxShadow:"none",borderBottom:`1px solid ${n__default.default.gray200}`}}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:n__default.default.zIndexDefault,padding:n__default.default.spacing2Xs,height:n__default.default.spacingXl}),content:e=>emotion.css({overflow:"auto",maxHeight:`${e}px`}),container:emotion.css({}),list:emotion.css({listStyle:"none",padding:`${n__default.default.spacing2Xs}`,margin:0}),groupTitle:emotion.css({padding:`6px ${n__default.default.spacingXs}`,lineHeight:n__default.default.lineHeightM}),noMatchesTitle:emotion.css({color:n__default.default.gray500,margin:n__default.default.spacingM,textAlign:"center"}),selectAll:emotion.css({borderBottom:`1px solid ${n__default.default.gray200}`,marginBottom:n__default.default.spacing2Xs,paddingBottom:n__default.default.spacing2Xs,"label > *":{fontWeight:n__default.default.fontWeightMedium}}),option:emotion.css({listStyleType:"none",margin:"1px 0"}),optionText:emotion.css({color:n__default.default.gray700,b:{color:n__default.default.gray900}}),optionCheck:emotion.css({label:{padding:`6px ${n__default.default.spacingXs}`,width:"100%",wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:n__default.default.borderRadiusMedium,border:0,cursor:"pointer",fontSize:n__default.default.fontSizeM,lineHeight:n__default.default.lineHeightM,fontWeight:n__default.default.fontWeightNormal,"&:focus, &:hover":{backgroundColor:n__default.default.gray100},"&:active":{backgroundColor:n__default.default.gray200},"&:focus":{boxShadow:n__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:n__default.default.glowPrimary}}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var S=b=>{var g=b,{label:e,value:o,itemId:t,onSelectItem:r,searchValue:s,isChecked:a=!1,isDisabled:M=!1,className:c}=g,d=O(g,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=h();return l__default.default.createElement("li",v({className:emotion.cx(u.option,c)},d),l__default.default.createElement(f36Forms.Checkbox,{id:t,value:o,onChange:m=>r(m),isChecked:a,isDisabled:M,className:emotion.cx(u.optionCheck,M&&u.disabled)},l__default.default.createElement(f36Typography.Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l__default.default.createElement(j,{item:e,inputValue:s}))))};function j({item:e,inputValue:o=""}){let{before:t,match:r,after:s}=f36Utils.getStringMatch(e,o);return l__default.default.createElement(l__default.default.Fragment,null,t,l__default.default.createElement("b",{"data-test-id":"cf-multiselect-item-match"},r),s)}j.displayName="HighlightedItem";var _=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:r,searchInputRef:s,resetSearchRef:a,searchPlaceholder:M="Search",focusList:c})=>{let d=h(),b=l.useRef(null),g=l.useCallback(m=>{o(m.target.value),t==null||t(m);},[t,o]),u=l.useCallback(()=>{if(!e)return;c(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(b.current,"");let y=new Event("change",{bubbles:!0});b.current.dispatchEvent(y);},[e,c]);return l__default.default.createElement("div",{className:d.searchBar},l__default.default.createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:e,className:d.inputField,testId:"cf-multiselect-search",placeholder:M,onChange:g,ref:f36Core.mergeRefs(s,b),name:r,size:"small"}),l__default.default.createElement(f36Button.IconButton,{ref:a,"aria-label":e?"Clear search":"Search",className:d.toggleButton,variant:"transparent",icon:e?l__default.default.createElement(f36Icons.CloseIcon,{variant:"muted"}):l__default.default.createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:u,isDisabled:!e,size:"small"}))};var K=(e,o,t)=>l__default.default.Children.map(e,r=>{if(!l__default.default.isValidElement(r))return r;if(o(r))return t(r);let s=K(r.props.children,o,t);return l__default.default.cloneElement(r,{children:s})}),Q=(e,o)=>{let t=0;return l__default.default.Children.forEach(e,r=>{l__default.default.isValidElement(r)&&(o(r)?t+=1:t+=Q(r.props.children,o));}),t};function we(e,o){let{className:t,startIcon:r,placeholder:s="Select one or more Items",currentSelection:a=[],toggleRef:M,isLoading:c=!1,testId:d="cf-multiselect",noMatchesMessage:b="No matches found",searchProps:g={},popoverProps:u={},children:m,onBlur:y}=e,{listMaxHeight:Z=180,listRef:ee,onClose:T}=u,p=h(),[R,te]=l.useState(""),[H,A]=l.useState(!1),B=l.useRef(null),X=typeof e.onSearchValueChange=="function"||typeof g.onSearchValueChange=="function",oe=Object.keys(g).length>0?g:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},w=l.useCallback(()=>{var f;(f=B.current)==null||f.focus();},[]),ne=l.useCallback(()=>{if(a.length===0)return l__default.default.createElement(l__default.default.Fragment,null,s);let f=a.length-1;return f===0?l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:p.currentSelection},a[0]):l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:p.currentSelection},a[0]," ",l__default.default.createElement("span",{className:p.currentSelectionAddition},"and ",f," more"))},[a,s,p.currentSelection,p.currentSelectionAddition]),$=l.useMemo(()=>Q(m,f=>f.type===S),[m]),re=l__default.default.useCallback(f=>K(f,P=>P.type===S,P=>{let le=ie=>{var D;w(),(D=P.props)==null||D.onSelectItem(ie);};return l__default.default.cloneElement(P,{searchValue:R,onSelectItem:le})}),[R,w]);return l__default.default.createElement("div",{"data-test-id":d,className:emotion.cx(p.multiselect,t),ref:o},l__default.default.createElement(f36Popover.Popover,N(v({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:H,onClose:()=>{A(!1),T&&T();}}),l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:M,onClick:()=>A(!H),startIcon:r,endIcon:l__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:p.triggerButton},ne())),l__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(ee,B),className:emotion.cx(p.content(Z),u.className,p.container),testId:"cf-multiselect-container",onBlur:()=>y==null?void 0:y()},l__default.default.createElement(Re__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},X&&l__default.default.createElement(_,N(v({},oe),{setSearchValue:te,searchValue:R,focusList:w})),c&&l__default.default.createElement(Ne,null),!c&&$>0&&l__default.default.createElement("ul",{className:p.list,"data-test-id":"cf-multiselect-items"},X?re(m):m),!c&&$===0&&l__default.default.createElement(f36Typography.Subheading,{className:p.noMatchesTitle},b)))))}var Ne=()=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),Y=l__default.default.forwardRef(we);var L=M=>{var c=M,{label:e,itemId:o="SelectAll",onSelectItem:t,isChecked:r=!1,className:s}=c,a=O(c,["label","itemId","onSelectItem","isChecked","className"]);let d=h();return l__default.default.createElement(S,v({value:"all",label:e||r?"Deselect all":"Select all",itemId:o,onSelectItem:t,isChecked:r,className:emotion.cx(d.selectAll,s)},a))};var k=Y;k.Option=S;k.SelectAll=L;
|
|
23
23
|
|
|
24
24
|
exports.Multiselect = k;
|
|
25
|
-
exports.MultiselectOption =
|
|
25
|
+
exports.MultiselectOption = S;
|
|
26
26
|
exports.SelectAllOption = L;
|
|
27
27
|
//# sourceMappingURL=out.js.map
|
|
28
28
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/MultiselectSearch.tsx","../src/SelectAllOption.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","TextInput","CloseIcon","SearchIcon","IconButton","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","listRef","onClose","isOpen","setIsOpen","internalListRef","hasSearch","handoverSearchProps","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={cx(styles.option, className)} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.optionCheck, isDisabled && styles.disabled)}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n searchBar: css({\n paddingTop: tokens.spacing2Xs,\n position: 'sticky',\n top: '0px',\n zIndex: tokens.zIndexWorkbenchHeader,\n backgroundColor: tokens.colorWhite,\n }),\n inputField: css({\n padding: `6px ${tokens.spacingXl} 10px ${tokens.spacingXs}`,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n boxShadow: 'none',\n '&:focus, &:active, &:active:hover': {\n boxShadow: 'none',\n borderBottom: `1px solid ${tokens.gray200}`,\n },\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n container: css({}),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacing2Xs}`,\n margin: 0,\n }),\n groupTitle: css({\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n textAlign: 'center',\n }),\n selectAll: css({\n borderBottom: `1px solid ${tokens.gray200}`,\n marginBottom: tokens.spacing2Xs,\n paddingBottom: tokens.spacing2Xs,\n 'label > *': {\n fontWeight: tokens.fontWeightMedium,\n },\n }),\n option: css({\n listStyleType: 'none',\n margin: '1px 0',\n }),\n optionText: css({\n color: tokens.gray700,\n b: {\n color: tokens.gray900,\n },\n }),\n optionCheck: css({\n label: {\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n width: '100%',\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n border: 0,\n cursor: 'pointer',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightM,\n fontWeight: tokens.fontWeightNormal,\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { ChevronDownIcon } from '@contentful/f36-icons';\n\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport FocusLock from 'react-focus-lock';\n\nimport type { MultiselectSearchProps as SearchProps } from './MultiselectSearch';\nimport { MultiselectSearch } from './MultiselectSearch';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options */\n children?: React.ReactNode;\n\n /**\n * Set a custom icon for the text input\n */\n startIcon?: React.ReactElement;\n\n /**\n * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n */\n placeholder?: string;\n\n /**\n * current Selected items, to be shown on the trigger button\n */\n currentSelection?: Array<string>;\n\n /**\n * Sets the list to show its loading state\n * @default false\n */\n isLoading?: boolean;\n\n /**\n * Use this prop to get a ref to the toggle button of the component\n */\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * Props to pass to the optional search field\n */\n searchProps?: SearchProps;\n\n /**\n * Function called whenever the search input value changes\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @deprecated Handover this prop in the searchProps subcomponent properties\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * A message that will be shown when it is not possible to find any option that matches the search value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Pass a form name to the search text input\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps> & {\n /**\n * It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n */\n listMaxHeight?: number;\n\n /**\n * Use this prop to get a ref to the list of items of the component\n */\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement | void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch =\n typeof props.onSearchValueChange === 'function' ||\n typeof searchProps.onSearchValueChange === 'function';\n\n const handoverSearchProps =\n Object.keys(searchProps).length > 0\n ? searchProps\n : {\n onSearchValueChange: props.onSearchValueChange,\n searchPlaceholder: props.searchPlaceholder,\n searchInputName: props.searchInputName,\n searchInputRef: props.searchInputRef,\n };\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId=\"SelectAll\"\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/MultiselectSearch.tsx","../src/SelectAllOption.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","TextInput","CloseIcon","SearchIcon","IconButton","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","listRef","onClose","isOpen","setIsOpen","internalListRef","hasSearch","handoverSearchProps","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={cx(styles.option, className)} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.optionCheck, isDisabled && styles.disabled)}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n searchBar: css({\n paddingTop: tokens.spacing2Xs,\n position: 'sticky',\n top: '0px',\n zIndex: tokens.zIndexWorkbenchHeader,\n backgroundColor: tokens.colorWhite,\n }),\n inputField: css({\n padding: `6px ${tokens.spacingXl} 10px ${tokens.spacingXs}`,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n boxShadow: 'none',\n '&:focus, &:active, &:active:hover': {\n boxShadow: 'none',\n borderBottom: `1px solid ${tokens.gray200}`,\n },\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n container: css({}),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacing2Xs}`,\n margin: 0,\n }),\n groupTitle: css({\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n textAlign: 'center',\n }),\n selectAll: css({\n borderBottom: `1px solid ${tokens.gray200}`,\n marginBottom: tokens.spacing2Xs,\n paddingBottom: tokens.spacing2Xs,\n 'label > *': {\n fontWeight: tokens.fontWeightMedium,\n },\n }),\n option: css({\n listStyleType: 'none',\n margin: '1px 0',\n }),\n optionText: css({\n color: tokens.gray700,\n b: {\n color: tokens.gray900,\n },\n }),\n optionCheck: css({\n label: {\n // Magic number to get a height of 32px on the item\n padding: `6px ${tokens.spacingXs}`,\n width: '100%',\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n border: 0,\n cursor: 'pointer',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightM,\n fontWeight: tokens.fontWeightNormal,\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { ChevronDownIcon } from '@contentful/f36-icons';\n\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport FocusLock from 'react-focus-lock';\n\nimport type { MultiselectSearchProps as SearchProps } from './MultiselectSearch';\nimport { MultiselectSearch } from './MultiselectSearch';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options */\n children?: React.ReactNode;\n\n /**\n * Set a custom icon for the text input\n */\n startIcon?: React.ReactElement;\n\n /**\n * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n */\n placeholder?: string;\n\n /**\n * current Selected items, to be shown on the trigger button\n */\n currentSelection?: Array<string>;\n\n /**\n * Sets the list to show its loading state\n * @default false\n */\n isLoading?: boolean;\n\n /**\n * Use this prop to get a ref to the toggle button of the component\n */\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * Props to pass to the optional search field\n */\n searchProps?: SearchProps;\n\n /**\n * Function called whenever the search input value changes\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @deprecated Handover this prop in the searchProps subcomponent properties\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * A message that will be shown when it is not possible to find any option that matches the search value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Pass a form name to the search text input\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n * @deprecated Handover this prop in the searchProps subcomponent properties\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps> & {\n /**\n * It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n */\n listMaxHeight?: number;\n\n /**\n * Use this prop to get a ref to the list of items of the component\n */\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement | void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null || typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch =\n typeof props.onSearchValueChange === 'function' ||\n typeof searchProps.onSearchValueChange === 'function';\n\n const handoverSearchProps =\n Object.keys(searchProps).length > 0\n ? searchProps\n : {\n onSearchValueChange: props.onSearchValueChange,\n searchPlaceholder: props.searchPlaceholder,\n searchInputName: props.searchInputName,\n searchInputRef: props.searchInputRef,\n };\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
|