@contentful/f36-multiselect 4.19.1-2 → 4.19.1-4

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.
Files changed (6) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +2 -2
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/dist/index.d.ts +0 -85
package/dist/index.js CHANGED
@@ -19,8 +19,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
19
19
  var e__default = /*#__PURE__*/_interopDefaultLegacy(e);
20
20
  var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
21
21
 
22
- var v=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:t__default["default"].spacing2Xs}),inputField:emotion.css({paddingRight:t__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:t__default["default"].zIndexDefault,padding:t__default["default"].spacing2Xs,height:t__default["default"].spacingXl}),content:s=>emotion.css({overflow:"auto",maxHeight:`${s}px`}),list:emotion.css({listStyle:"none",padding:`${t__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${t__default["default"].spacingXs} ${t__default["default"].spacingM}`,lineHeight:t__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:t__default["default"].gray500,margin:t__default["default"].spacingM}),item:emotion.css({padding:`${t__default["default"].spacingXs} ${t__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center","&:focus, &:hover":{backgroundColor:t__default["default"].gray100},"&:active":{backgroundColor:t__default["default"].gray200},"&:focus":{boxShadow:t__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default["default"].glowPrimary}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var d=({label:s,value:g,itemId:a,onSelectItem:f,searchValue:u,isChecked:c=!1,isDisabled:m=!1,...S})=>{let h=v();return e__default["default"].createElement("li",{...S},e__default["default"].createElement("label",{htmlFor:a,className:emotion.cx(h.item,m&&h.disabled)},e__default["default"].createElement(f36Forms.Checkbox,{id:a,value:g,onChange:b=>f(b),isChecked:c,isDisabled:m}),e__default["default"].createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${a}`},e__default["default"].createElement(E,{item:s,inputValue:u}))))};function E({item:s,inputValue:g=""}){let{before:a,match:f,after:u}=f36Utils.getStringMatch(s,g);return e__default["default"].createElement(e__default["default"].Fragment,null,a,e__default["default"].createElement("b",{"data-test-id":"cf-multiselect-item-match"},f),u)}E.displayName="HighlightedItem";function le(s,g){let{className:a,startIcon:f,placeholder:u="Select one or more Items",currentSelection:c=[],onSearchValueChange:m,searchPlaceholder:S="Search",searchInputRef:h,noMatchesMessage:b="No matches found",toggleRef:D,isLoading:x=!1,testId:X="cf-multiselect",popoverProps:I={},children:M}=s,{listMaxHeight:$=180,listRef:F}=I,n=v(),[p,w]=e.useState(""),[O,P]=e.useState(!1),y=e.useRef(null),k=typeof m=="function",z=e.useCallback(i=>{w(i.target.value),m?.(i);},[m,w]),A=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(y.current,"");let r=new Event("change",{bubbles:!0});y.current.dispatchEvent(r);},j=e.useCallback(()=>{if(c.length===0)return e__default["default"].createElement(e__default["default"].Fragment,null,u);let i=c.length-1;return i===0?e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:n.currentSelection},c[0]):e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:n.currentSelection},c[0]," and ",i," more"," ")},[c,u,n.currentSelection]),N=e.useMemo(()=>e__default["default"].Children.count(M),[M]),T=e__default["default"].useCallback(i=>e__default["default"].Children.map(i,r=>e__default["default"].isValidElement(r)?r.type===e__default["default"].Fragment?T(r.props.children):r.type===d?e__default["default"].cloneElement(r,{searchValue:p}):r:r),[p]);return e__default["default"].createElement("div",{"data-test-id":X,className:emotion.cx(n.multiselect,a),ref:g},e__default["default"].createElement(f36Popover.Popover,{isOpen:O,onClose:()=>P(!1),renderOnlyWhenOpen:!1,...I},e__default["default"].createElement(f36Popover.Popover.Trigger,null,e__default["default"].createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:D,onClick:()=>P(!O),startIcon:f,endIcon:e__default["default"].createElement(f36Icons.ChevronDownIcon,null)},j())),e__default["default"].createElement(f36Popover.Popover.Content,{ref:F,className:n.content($),testId:"cf-multiselect-container"},e__default["default"].createElement(e__default["default"].Fragment,null,k&&e__default["default"].createElement(e__default["default"].Fragment,null,e__default["default"].createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:p,className:n.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:z,ref:f36Core.mergeRefs(h,y)}),e__default["default"].createElement(f36Button.IconButton,{"aria-label":p?"Clear search":"Search",className:n.toggleButton,variant:"transparent",icon:p?e__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):e__default["default"].createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:()=>{p&&A();},isDisabled:!p,size:"small"})),x&&e__default["default"].createElement(se,null),!x&&N>0&&e__default["default"].createElement("ul",{className:n.list,"data-test-id":"cf-multiselect-items"},k?T(M):M),!x&&N===0&&e__default["default"].createElement(f36Typography.Subheading,{className:n.noMatchesTitle},b)))))}var se=()=>e__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},e__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),V=e__default["default"].forwardRef(le);var B=V;B.Option=d;
22
+ var v=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:t__default["default"].spacing2Xs}),inputField:emotion.css({paddingRight:t__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:t__default["default"].zIndexDefault,padding:t__default["default"].spacing2Xs,height:t__default["default"].spacingXl}),content:l=>emotion.css({overflow:"auto",maxHeight:`${l}px`}),list:emotion.css({listStyle:"none",padding:`${t__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${t__default["default"].spacingXs} ${t__default["default"].spacingM}`,lineHeight:t__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:t__default["default"].gray500,margin:t__default["default"].spacingM}),item:emotion.css({padding:`${t__default["default"].spacingXs} ${t__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:t__default["default"].gray100},"&:active":{backgroundColor:t__default["default"].gray200},"&:focus":{boxShadow:t__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default["default"].glowPrimary}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var d=({label:l,value:g,itemId:p,onSelectItem:f,searchValue:u,isChecked:s=!1,isDisabled:m=!1,...S})=>{let h=v();return e__default["default"].createElement("li",{...S},e__default["default"].createElement(f36Forms.Checkbox,{id:p,value:g,onChange:b=>f(b),isChecked:s,isDisabled:m,className:emotion.cx(h.item,m&&h.disabled)},e__default["default"].createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${p}`},e__default["default"].createElement(k,{item:l,inputValue:u}))))};function k({item:l,inputValue:g=""}){let{before:p,match:f,after:u}=f36Utils.getStringMatch(l,g);return e__default["default"].createElement(e__default["default"].Fragment,null,p,e__default["default"].createElement("b",{"data-test-id":"cf-multiselect-item-match"},f),u)}k.displayName="HighlightedItem";function ue(l,g){let{className:p,startIcon:f,placeholder:u="Select one or more Items",currentSelection:s=[],onSearchValueChange:m,searchPlaceholder:S="Search",searchInputRef:h,searchInputName:b,noMatchesMessage:R="No matches found",toggleRef:z,isLoading:I=!1,testId:F="cf-multiselect",popoverProps:y={},children:M,onBlur:A}=l,{listMaxHeight:U=180,listRef:j}=y,r=v(),[a,P]=e.useState(""),[w,O]=e.useState(!1),x=e.useRef(null),L=e.useRef(null),T=typeof m=="function",W=e.useCallback(i=>{P(i.target.value),m?.(i);},[m,P]),_=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(x.current,"");let o=new Event("change",{bubbles:!0});x.current.dispatchEvent(o);},q=e.useCallback(()=>{if(s.length===0)return e__default["default"].createElement(e__default["default"].Fragment,null,u);let i=s.length-1;return i===0?e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:r.currentSelection},s[0]):e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:r.currentSelection},s[0]," and ",i," more"," ")},[s,u,r.currentSelection]),E=e.useMemo(()=>e__default["default"].Children.count(M),[M]),H=e__default["default"].useCallback(i=>e__default["default"].Children.map(i,o=>{if(e__default["default"].isValidElement(o)){if(o.type===e__default["default"].Fragment)return H(o.props.children);if(o.type===d){let G=J=>{L.current?.focus(),o.props?.onSelectItem(J);};return e__default["default"].cloneElement(o,{searchValue:a,onSelectItem:G})}return o}return o}),[a]);return e__default["default"].createElement("div",{"data-test-id":F,className:emotion.cx(r.multiselect,p),ref:g},e__default["default"].createElement(f36Popover.Popover,{renderOnlyWhenOpen:!1,...y,isOpen:w,onClose:()=>O(!1)},e__default["default"].createElement(f36Popover.Popover.Trigger,null,e__default["default"].createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:z,onClick:()=>O(!w),startIcon:f,endIcon:e__default["default"].createElement(f36Icons.ChevronDownIcon,null)},q())),e__default["default"].createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(j,L),className:r.content(U),testId:"cf-multiselect-container",onBlur:()=>A?.()},e__default["default"].createElement(e__default["default"].Fragment,null,T&&e__default["default"].createElement(e__default["default"].Fragment,null,e__default["default"].createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:a,className:r.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:W,ref:f36Core.mergeRefs(h,x),name:b}),e__default["default"].createElement(f36Button.IconButton,{"aria-label":a?"Clear search":"Search",className:r.toggleButton,variant:"transparent",icon:a?e__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):e__default["default"].createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:()=>{a&&_();},isDisabled:!a,size:"small"})),I&&e__default["default"].createElement(me,null),!I&&E>0&&e__default["default"].createElement("ul",{className:r.list,"data-test-id":"cf-multiselect-items"},T?H(M):M),!I&&E===0&&e__default["default"].createElement(f36Typography.Subheading,{className:r.noMatchesTitle},R)))))}var me=()=>e__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},e__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),X=e__default["default"].forwardRef(ue);var $=X;$.Option=d;
23
23
 
24
- exports.Multiselect = B;
24
+ exports.Multiselect = $;
25
25
  exports.MultiselectOption = d;
26
26
  //# 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/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","rest","styles","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","className","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","ListItemLoadingState","Multiselect"],"mappings":"AAAA,OAAOA,MAAW,QAClB,OAAS,YAAAC,MAAgB,wBACzB,OAAS,QAAAC,MAAY,6BCFrB,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAuB,KAAO,CACzC,YAAaF,EAAI,CACf,SAAU,WACV,MAAO,MACT,CAAC,EACD,iBAAkBA,EAAI,CACpB,MAAO,MACP,WAAY,SACZ,aAAc,WACd,SAAU,SACV,cAAe,SACf,YAAaC,EAAO,UACtB,CAAC,EACD,WAAYD,EAAI,CACd,aAAcC,EAAO,UACrB,aAAc,WACd,WAAY,QACd,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,KAChB,CAAC,EACH,KAAMH,EAAI,CACR,UAAW,OACX,QAAS,GAAGC,EAAO,cACnB,OAAQ,CACV,CAAC,EACD,WAAYD,EAAI,CACd,QAAS,GAAGC,EAAO,aAAaA,EAAO,WACvC,WAAYA,EAAO,WACrB,CAAC,EACD,eAAgBD,EAAI,CAClB,MAAOC,EAAO,QACd,OAAQA,EAAO,QACjB,CAAC,EACD,KAAMD,EAAI,CACR,QAAS,GAAGC,EAAO,aAAaA,EAAO,WACvC,UAAW,aACX,WAAY,eACZ,QAAS,OACT,QAAS,OACT,cAAe,MACf,WAAY,SACZ,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,CAAC,EACD,SAAUD,EAAI,CACZ,QAAS,GACT,OAAQ,aACV,CAAC,CACH,GDvEA,OAAS,kBAAAI,MAAsB,wBAC/B,OAAS,MAAAC,MAAU,UAYZ,IAAMC,EAAoB,CAAC,CAChC,MAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EAAa,MACVC,CACL,IAA8B,CAC5B,IAAMC,EAASb,EAAqB,EAEpC,OACEL,EAAA,cAAC,MAAI,GAAGiB,GACNjB,EAAA,cAAC,SACC,QAASY,EACT,UAAWJ,EAAGU,EAAO,KAAMF,GAAcE,EAAO,QAAQ,GAExDlB,EAAA,cAACC,EAAA,CACC,GAAIW,EACJ,MAAOD,EACP,SAAWQ,GAAUN,EAAaM,CAAK,EACvC,UAAWJ,EACX,WAAYC,EACd,EACAhB,EAAA,cAACE,EAAA,CAAK,eAAc,4BAA4BU,KAC9CZ,EAAA,cAACoB,EAAA,CAAgB,KAAMV,EAAO,WAAYI,EAAa,CACzD,CACF,CACF,CAEJ,EAEA,SAASM,EAAgB,CACvB,KAAAC,EACA,WAAAC,EAAa,EACf,EAGG,CACD,GAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,CAAM,EAAIlB,EAAec,EAAMC,CAAU,EAChE,OACEtB,EAAA,cAAAA,EAAA,cACGuB,EACDvB,EAAA,cAAC,KAAE,eAAa,6BAA6BwB,CAAM,EAClDC,CACH,CAEJ,CAEAL,EAAgB,YAAc,kBEnE9B,OAAOpB,GAAS,UAAA0B,EAAQ,YAAAC,EAAU,eAAAC,EAAa,WAAAC,MAAe,QAC9D,OAAS,MAAArB,MAAU,UAEnB,OAAS,aAAAsB,MAAmC,uBAC5C,OAAS,UAAAC,EAAQ,cAAAC,MAAkB,yBACnC,OAAS,aAAAC,MAAiB,wBAC1B,OAAS,aAAAC,GAAW,mBAAAC,GAAiB,cAAAC,OAAkB,wBACvD,OAAS,qBAAAC,GAAmB,oBAAAC,OAAwB,2BACpD,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,cAAAC,OAAkB,6BA2E3B,SAASC,GAAaC,EAAyBC,EAAgC,CAC7E,GAAM,CACJ,UAAAC,EACA,UAAAC,EACA,YAAAC,EAAc,2BACd,iBAAAC,EAAmB,CAAC,EACpB,oBAAAC,EACA,kBAAAC,EAAoB,SACpB,eAAAC,EACA,iBAAAC,EAAmB,mBACnB,UAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EAAS,iBACT,aAAAC,EAAe,CAAC,EAChB,SAAAC,CACF,EAAId,EAEE,CAAE,cAAApC,EAAgB,IAAK,QAAAmD,CAAQ,EAAIF,EAEnCrC,EAASb,EAAqB,EAE9B,CAACS,EAAa4C,CAAc,EAAI/B,EAAS,EAAE,EAC3C,CAACgC,EAAQC,CAAS,EAAIjC,EAAS,EAAK,EAEpCkC,EAAyBnC,EAAO,IAAI,EAEpCoC,EAAY,OAAOd,GAAwB,WAE3Ce,EAAqBnC,EACxBT,GAAU,CACTuC,EAAevC,EAAM,OAAO,KAAK,EACjC6B,IAAsB7B,CAAK,CAC7B,EACA,CAAC6B,EAAqBU,CAAc,CACtC,EAEMM,EAAc,IAAM,CAIO,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,EAAE,IACqB,KAAKH,EAAuB,QAAS,EAAE,EAC9D,IAAMI,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EACzDJ,EAAuB,QAAQ,cAAcI,CAAW,CAC1D,EAEMC,EAAyBtC,EAAY,IAAM,CAC/C,GAAImB,EAAiB,SAAW,EAC9B,OAAO/C,EAAA,cAAAA,EAAA,cAAG8C,CAAY,EAExB,IAAMqB,EAAgBpB,EAAiB,OAAS,EAChD,OAAIoB,IAAkB,EAElBnE,EAAA,cAAC,QACC,eAAa,mCACb,UAAWkB,EAAO,kBAEjB6B,EAAiB,EACpB,EAIF/C,EAAA,cAAC,QACC,eAAa,mCACb,UAAWkB,EAAO,kBAEjB6B,EAAiB,GAAG,QAAMoB,EAAc,QAAM,GACjD,CAEJ,EAAG,CAACpB,EAAkBD,EAAa5B,EAAO,gBAAgB,CAAC,EAErDkD,EAAiBvC,EACrB,IAAM7B,EAAM,SAAS,MAAMwD,CAAQ,EACnC,CAACA,CAAQ,CACX,EAGMa,EAAgBrE,EAAM,YACzBwD,GACQxD,EAAM,SAAS,IAAIwD,EAAWc,GAC/BtE,EAAM,eAAesE,CAAK,EACxBA,EAAM,OAAStE,EAAM,SAChBqE,EAAcC,EAAM,MAAM,QAAQ,EAEvCA,EAAM,OAAS7D,EACVT,EAAM,aAAasE,EAAO,CAAE,YAAAxD,CAAY,CAAC,EAE3CwD,EAEFA,CACR,EAEH,CAACxD,CAAW,CACd,EAEA,OACEd,EAAA,cAAC,OACC,eAAcsD,EACd,UAAW9C,EAAGU,EAAO,YAAa0B,CAAS,EAC3C,IAAKD,GAEL3C,EAAA,cAACuC,EAAA,CACC,OAAQoB,EACR,QAAS,IAAMC,EAAU,EAAK,EAC9B,mBAAoB,GACnB,GAAGL,GAEJvD,EAAA,cAACuC,EAAQ,QAAR,KACCvC,EAAA,cAAC+B,EAAA,CACC,aAAW,qBACX,IAAKqB,EACL,QAAS,IAAMQ,EAAU,CAACD,CAAM,EAChC,UAAWd,EACX,QAAS7C,EAAA,cAACmC,GAAA,IAAgB,GAEzB+B,EAAuB,CAC1B,CACF,EACAlE,EAAA,cAACuC,EAAQ,QAAR,CACC,IAAKkB,EACL,UAAWvC,EAAO,QAAQZ,CAAa,EACvC,OAAO,4BAEPN,EAAA,cAAAA,EAAA,cACG8D,GACC9D,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACiC,EAAA,CACC,aAAW,SACX,KAAK,OACL,MAAOnB,EACP,UAAWI,EAAO,WAClB,OAAO,wBACP,YAAa+B,EACb,SAAUc,EACV,IAAKjC,EAAUoB,EAAgBW,CAAsB,EACvD,EACA7D,EAAA,cAACgC,EAAA,CACC,aAAYlB,EAAc,eAAiB,SAC3C,UAAWI,EAAO,aAClB,QAAQ,cACR,KACEJ,EACEd,EAAA,cAACkC,GAAA,CAAU,QAAQ,QAAQ,EAE3BlC,EAAA,cAACoC,GAAA,CAAW,QAAQ,QAAQ,EAGhC,QAAS,IAAM,CACTtB,GACFkD,EAAY,CAEhB,EACA,WAAY,CAAClD,EACb,KAAK,QACP,CACF,EAEDuC,GAAarD,EAAA,cAACuE,GAAA,IAAqB,EAEnC,CAAClB,GAAae,EAAiB,GAC9BpE,EAAA,cAAC,MAAG,UAAWkB,EAAO,KAAM,eAAa,wBACtC4C,EAAYO,EAAcb,CAAQ,EAAIA,CACzC,EAGD,CAACH,GAAae,IAAmB,GAChCpE,EAAA,cAACwC,GAAA,CAAW,UAAWtB,EAAO,gBAC3BiC,CACH,CAEJ,CACF,CACF,CACF,CAEJ,CAEA,IAAMoB,GAAuB,IAEzBvE,EAAA,cAACqC,GAAA,CAAkB,UAAW,IAC5BrC,EAAA,cAACsC,GAAA,CAAiB,cAAe,EAAG,CACtC,EAQSkC,EAAcxE,EAAM,WAAWyC,EAAY,EC7QjD,IAAM+B,EAAcA,EAC3BA,EAAY,OAAS/D","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 MulitselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n onSelectItem: (event: React.ChangeEvent) => 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 ...rest\n}: MulitselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li {...rest}>\n <label\n htmlFor={itemId}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n />\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </label>\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 currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\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 list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\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 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, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\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 } from './MultiselectOption';\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 * Function called whenever the search input value changes\n */\n onSearchValueChange?: (event: React.ChangeEvent) => 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 * A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Use this prop to get a ref to the input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\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 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 };\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 onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\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\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 };\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]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === React.Fragment) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n return React.cloneElement(child, { searchValue });\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n renderOnlyWhenOpen={false}\n {...popoverProps}\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 >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={listRef}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n >\n <>\n {hasSearch && (\n <>\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 />\n <IconButton\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={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\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 { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
1
+ {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","rest","styles","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","className","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","even","ListItemLoadingState","Multiselect"],"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 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 ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\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 currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\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 list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\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 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, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\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';\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 * 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 * A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Use this prop to get a ref to the input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: 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 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 };\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\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 onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\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\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 };\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]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === React.Fragment) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n const onSelectItem = (\n even: React.ChangeEvent<HTMLInputElement>,\n ) => {\n // Selecting an item triggers a rerendering and thereby losing the\n // focus on the clicked element. To avoid having the focus on the document body\n // (which breaks `closeOnBlur`), we force it back to the list in the popup.\n internalListRef.current?.focus();\n child.props?.onSelectItem(even);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\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 {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\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 >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\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 />\n <IconButton\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={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\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 { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
10
10
  import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
11
11
  import { Popover } from '@contentful/f36-popover';
12
12
 
13
- var v=()=>({multiselect:css({position:"relative",width:"100%"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:t.spacing2Xs}),inputField:css({paddingRight:t.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:t.zIndexDefault,padding:t.spacing2Xs,height:t.spacingXl}),content:s=>css({overflow:"auto",maxHeight:`${s}px`}),list:css({listStyle:"none",padding:`${t.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${t.spacingXs} ${t.spacingM}`,lineHeight:t.lineHeightM}),noMatchesTitle:css({color:t.gray500,margin:t.spacingM}),item:css({padding:`${t.spacingXs} ${t.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center","&:focus, &:hover":{backgroundColor:t.gray100},"&:active":{backgroundColor:t.gray200},"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var d=({label:s,value:g,itemId:a,onSelectItem:f,searchValue:u,isChecked:c=!1,isDisabled:m=!1,...S})=>{let h=v();return e.createElement("li",{...S},e.createElement("label",{htmlFor:a,className:cx(h.item,m&&h.disabled)},e.createElement(Checkbox,{id:a,value:g,onChange:b=>f(b),isChecked:c,isDisabled:m}),e.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${a}`},e.createElement(E,{item:s,inputValue:u}))))};function E({item:s,inputValue:g=""}){let{before:a,match:f,after:u}=getStringMatch(s,g);return e.createElement(e.Fragment,null,a,e.createElement("b",{"data-test-id":"cf-multiselect-item-match"},f),u)}E.displayName="HighlightedItem";function le(s,g){let{className:a,startIcon:f,placeholder:u="Select one or more Items",currentSelection:c=[],onSearchValueChange:m,searchPlaceholder:S="Search",searchInputRef:h,noMatchesMessage:b="No matches found",toggleRef:D,isLoading:x=!1,testId:X="cf-multiselect",popoverProps:I={},children:M}=s,{listMaxHeight:$=180,listRef:F}=I,n=v(),[p,w]=useState(""),[O,P]=useState(!1),y=useRef(null),k=typeof m=="function",z=useCallback(i=>{w(i.target.value),m?.(i);},[m,w]),A=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(y.current,"");let r=new Event("change",{bubbles:!0});y.current.dispatchEvent(r);},j=useCallback(()=>{if(c.length===0)return e.createElement(e.Fragment,null,u);let i=c.length-1;return i===0?e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:n.currentSelection},c[0]):e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:n.currentSelection},c[0]," and ",i," more"," ")},[c,u,n.currentSelection]),N=useMemo(()=>e.Children.count(M),[M]),T=e.useCallback(i=>e.Children.map(i,r=>e.isValidElement(r)?r.type===e.Fragment?T(r.props.children):r.type===d?e.cloneElement(r,{searchValue:p}):r:r),[p]);return e.createElement("div",{"data-test-id":X,className:cx(n.multiselect,a),ref:g},e.createElement(Popover,{isOpen:O,onClose:()=>P(!1),renderOnlyWhenOpen:!1,...I},e.createElement(Popover.Trigger,null,e.createElement(Button,{"aria-label":"Toggle Multiselect",ref:D,onClick:()=>P(!O),startIcon:f,endIcon:e.createElement(ChevronDownIcon,null)},j())),e.createElement(Popover.Content,{ref:F,className:n.content($),testId:"cf-multiselect-container"},e.createElement(e.Fragment,null,k&&e.createElement(e.Fragment,null,e.createElement(TextInput,{"aria-label":"Search",type:"text",value:p,className:n.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:z,ref:mergeRefs(h,y)}),e.createElement(IconButton,{"aria-label":p?"Clear search":"Search",className:n.toggleButton,variant:"transparent",icon:p?e.createElement(CloseIcon,{variant:"muted"}):e.createElement(SearchIcon,{variant:"muted"}),onClick:()=>{p&&A();},isDisabled:!p,size:"small"})),x&&e.createElement(se,null),!x&&N>0&&e.createElement("ul",{className:n.list,"data-test-id":"cf-multiselect-items"},k?T(M):M),!x&&N===0&&e.createElement(Subheading,{className:n.noMatchesTitle},b)))))}var se=()=>e.createElement(SkeletonContainer,{svgHeight:16},e.createElement(SkeletonBodyText,{numberOfLines:1})),V=e.forwardRef(le);var B=V;B.Option=d;
13
+ var v=()=>({multiselect:css({position:"relative",width:"100%"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:t.spacing2Xs}),inputField:css({paddingRight:t.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:t.zIndexDefault,padding:t.spacing2Xs,height:t.spacingXl}),content:l=>css({overflow:"auto",maxHeight:`${l}px`}),list:css({listStyle:"none",padding:`${t.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${t.spacingXs} ${t.spacingM}`,lineHeight:t.lineHeightM}),noMatchesTitle:css({color:t.gray500,margin:t.spacingM}),item:css({padding:`${t.spacingXs} ${t.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:t.gray100},"&:active":{backgroundColor:t.gray200},"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var d=({label:l,value:g,itemId:p,onSelectItem:f,searchValue:u,isChecked:s=!1,isDisabled:m=!1,...S})=>{let h=v();return e.createElement("li",{...S},e.createElement(Checkbox,{id:p,value:g,onChange:b=>f(b),isChecked:s,isDisabled:m,className:cx(h.item,m&&h.disabled)},e.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${p}`},e.createElement(k,{item:l,inputValue:u}))))};function k({item:l,inputValue:g=""}){let{before:p,match:f,after:u}=getStringMatch(l,g);return e.createElement(e.Fragment,null,p,e.createElement("b",{"data-test-id":"cf-multiselect-item-match"},f),u)}k.displayName="HighlightedItem";function ue(l,g){let{className:p,startIcon:f,placeholder:u="Select one or more Items",currentSelection:s=[],onSearchValueChange:m,searchPlaceholder:S="Search",searchInputRef:h,searchInputName:b,noMatchesMessage:R="No matches found",toggleRef:z,isLoading:I=!1,testId:F="cf-multiselect",popoverProps:y={},children:M,onBlur:A}=l,{listMaxHeight:U=180,listRef:j}=y,r=v(),[a,P]=useState(""),[w,O]=useState(!1),x=useRef(null),L=useRef(null),T=typeof m=="function",W=useCallback(i=>{P(i.target.value),m?.(i);},[m,P]),_=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(x.current,"");let o=new Event("change",{bubbles:!0});x.current.dispatchEvent(o);},q=useCallback(()=>{if(s.length===0)return e.createElement(e.Fragment,null,u);let i=s.length-1;return i===0?e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:r.currentSelection},s[0]):e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:r.currentSelection},s[0]," and ",i," more"," ")},[s,u,r.currentSelection]),E=useMemo(()=>e.Children.count(M),[M]),H=e.useCallback(i=>e.Children.map(i,o=>{if(e.isValidElement(o)){if(o.type===e.Fragment)return H(o.props.children);if(o.type===d){let G=J=>{L.current?.focus(),o.props?.onSelectItem(J);};return e.cloneElement(o,{searchValue:a,onSelectItem:G})}return o}return o}),[a]);return e.createElement("div",{"data-test-id":F,className:cx(r.multiselect,p),ref:g},e.createElement(Popover,{renderOnlyWhenOpen:!1,...y,isOpen:w,onClose:()=>O(!1)},e.createElement(Popover.Trigger,null,e.createElement(Button,{"aria-label":"Toggle Multiselect",ref:z,onClick:()=>O(!w),startIcon:f,endIcon:e.createElement(ChevronDownIcon,null)},q())),e.createElement(Popover.Content,{ref:mergeRefs(j,L),className:r.content(U),testId:"cf-multiselect-container",onBlur:()=>A?.()},e.createElement(e.Fragment,null,T&&e.createElement(e.Fragment,null,e.createElement(TextInput,{"aria-label":"Search",type:"text",value:a,className:r.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:W,ref:mergeRefs(h,x),name:b}),e.createElement(IconButton,{"aria-label":a?"Clear search":"Search",className:r.toggleButton,variant:"transparent",icon:a?e.createElement(CloseIcon,{variant:"muted"}):e.createElement(SearchIcon,{variant:"muted"}),onClick:()=>{a&&_();},isDisabled:!a,size:"small"})),I&&e.createElement(me,null),!I&&E>0&&e.createElement("ul",{className:r.list,"data-test-id":"cf-multiselect-items"},T?H(M):M),!I&&E===0&&e.createElement(Subheading,{className:r.noMatchesTitle},R)))))}var me=()=>e.createElement(SkeletonContainer,{svgHeight:16},e.createElement(SkeletonBodyText,{numberOfLines:1})),X=e.forwardRef(ue);var $=X;$.Option=d;
14
14
 
15
- export { B as Multiselect, d as MultiselectOption };
15
+ export { $ as Multiselect, d as MultiselectOption };
16
16
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","rest","styles","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","className","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","ListItemLoadingState","Multiselect"],"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 MulitselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n onSelectItem: (event: React.ChangeEvent) => 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 ...rest\n}: MulitselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li {...rest}>\n <label\n htmlFor={itemId}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n />\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </label>\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 currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\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 list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\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 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, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\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 } from './MultiselectOption';\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 * Function called whenever the search input value changes\n */\n onSearchValueChange?: (event: React.ChangeEvent) => 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 * A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Use this prop to get a ref to the input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\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 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 };\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 onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\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\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 };\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]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === React.Fragment) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n return React.cloneElement(child, { searchValue });\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n renderOnlyWhenOpen={false}\n {...popoverProps}\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 >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={listRef}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n >\n <>\n {hasSearch && (\n <>\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 />\n <IconButton\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={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\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 { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
1
+ {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","rest","styles","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","className","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","even","ListItemLoadingState","Multiselect"],"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 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 ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\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 currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\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 list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\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 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, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\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';\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 * 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 * A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n */\n noMatchesMessage?: string;\n\n /**\n * Use this prop to get a ref to the input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: 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 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 };\n\n /**\n * Function called when the popover loses its focus.\n */\n onBlur?: () => void;\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 onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\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\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 };\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]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (child.type === React.Fragment) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n const onSelectItem = (\n even: React.ChangeEvent<HTMLInputElement>,\n ) => {\n // Selecting an item triggers a rerendering and thereby losing the\n // focus on the clicked element. To avoid having the focus on the document body\n // (which breaks `closeOnBlur`), we force it back to the list in the popup.\n internalListRef.current?.focus();\n child.props?.onSelectItem(even);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\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 {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\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 >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\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 />\n <IconButton\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={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\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 { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-multiselect",
3
- "version": "4.19.1-2",
3
+ "version": "4.19.1-4",
4
4
  "description": "Forma 36: Multiselect Component",
5
5
  "scripts": {
6
6
  "build": "tsup"
package/dist/index.d.ts DELETED
@@ -1,85 +0,0 @@
1
- import React from 'react';
2
- import { CommonProps } from '@contentful/f36-core';
3
- import { PopoverProps } from '@contentful/f36-popover';
4
-
5
- interface MulitselectOptionProps {
6
- label: string;
7
- value: string;
8
- itemId: string;
9
- searchValue?: string;
10
- onSelectItem: (event: React.ChangeEvent) => void;
11
- isChecked?: boolean;
12
- isDisabled?: boolean;
13
- }
14
- declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, ...rest }: MulitselectOptionProps) => JSX.Element;
15
-
16
- interface MultiselectProps extends CommonProps {
17
- /** Select Options */
18
- children?: React.ReactNode;
19
- /**
20
- * Set a custom icon for the text input
21
- */
22
- startIcon?: React.ReactElement;
23
- /**
24
- * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'
25
- */
26
- placeholder?: string;
27
- /**
28
- * current Selected items, to be shown on the trigger button
29
- */
30
- currentSelection?: Array<string>;
31
- /**
32
- * Function called whenever the search input value changes
33
- */
34
- onSearchValueChange?: (event: React.ChangeEvent) => void | undefined;
35
- /**
36
- * This is the value will be passed to the `placeholder` prop of the input.
37
- * @default "Search"
38
- */
39
- searchPlaceholder?: string;
40
- /**
41
- * A message that will be shown when it is not possible to find any option that matches the input value
42
- * @default "No matches"
43
- */
44
- noMatchesMessage?: string;
45
- /**
46
- * Use this prop to get a ref to the input element of the component
47
- */
48
- searchInputRef?: React.Ref<HTMLInputElement>;
49
- /**
50
- * Sets the list to show its loading state
51
- * @default false
52
- */
53
- isLoading?: boolean;
54
- /**
55
- * Use this prop to get a ref to the toggle button of the component
56
- */
57
- toggleRef?: React.Ref<HTMLButtonElement>;
58
- /**
59
- * Props to pass to the Popover (Dropdown) component
60
- */
61
- popoverProps?: Partial<PopoverProps> & {
62
- /**
63
- * It sets the max-height, in pixels, of the list
64
- * The default value is the height of 5 single line items
65
- * @default 180
66
- */
67
- listMaxHeight?: number;
68
- /**
69
- * Use this prop to get a ref to the list of items of the component
70
- */
71
- listRef?: React.Ref<HTMLUListElement>;
72
- };
73
- }
74
- /**
75
- * The Multiselect is a component that will allow a user to select multiple items.
76
- * It has an optional
77
- */
78
- declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
79
-
80
- declare type CompoundMultiselect = typeof Multiselect$1 & {
81
- Option: typeof MultiselectOption;
82
- };
83
- declare const Multiselect: CompoundMultiselect;
84
-
85
- export { MulitselectOptionProps, Multiselect, MultiselectOption, MultiselectProps };