@contentful/f36-multiselect 4.21.0 → 4.22.0

package/README.mdx

@@ -76,6 +76,14 @@ To offer a shortcut for selecting and deselecting all options, you can use the c
 
 ```
 
+### Controlling from the Outside
+
+In some cases it is desired to toggle the status of the popover drawer as well as to clear the search field from the parent. E.g. after a change has been applied. For this the Component offers two optional reference properties `toggleRef` and `resetSearchRef`
+
+```jsx file=./examples/MultiselectReferenceExample.tsx
+
+```
+
 ## Props (API reference)
 
 <PropsTable of="Multiselect" />

package/dist/esm/index.js

@@ -1,18 +1,18 @@
-import o, { useState, useRef, useCallback, useMemo } from 'react';
+import l, { useState, useRef, useCallback, useMemo } from 'react';
 import { Checkbox, TextInput } from '@contentful/f36-forms';
 import { Text, Subheading } from '@contentful/f36-typography';
 import { cx, css } from 'emotion';
-import r from '@contentful/f36-tokens';
+import n from '@contentful/f36-tokens';
 import { getStringMatch } from '@contentful/f36-utils';
 import { mergeRefs } from '@contentful/f36-core';
 import { Button, IconButton } from '@contentful/f36-button';
 import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
 import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
 import { Popover } from '@contentful/f36-popover';
-import Pe from 'react-focus-lock';
+import Oe from 'react-focus-lock';
 
-var pe=Object.defineProperty,ue=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var F=(e,n,t)=>n in e?pe(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,h=(e,n)=>{for(var t in n||(n={}))W.call(n,t)&&F(e,t,n[t]);if(C)for(var t of C(n))j.call(n,t)&&F(e,t,n[t]);return e},U=(e,n)=>ue(e,me(n));var P=(e,n)=>{var t={};for(var l in e)W.call(e,l)&&n.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&C)for(var l of C(e))n.indexOf(l)<0&&j.call(e,l)&&(t[l]=e[l]);return t};var S=()=>({multiselect:css({position:"relative",width:"100%"}),triggerButton:css({justifyContent:"space-between"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r.spacing2Xs}),currentSelectionAddition:css({color:r.gray600}),searchBar:css({paddingTop:r.spacing2Xs,position:"sticky",top:"0px",zIndex:"10",backgroundColor:r.colorWhite}),inputField:css({padding:`6px ${r.spacingXl} 10px ${r.spacingXs}`,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${r.gray200}`,boxShadow:"none","&:focus, &:active, &:active:hover":{boxShadow:"none",borderBottom:`1px solid ${r.gray200}`}}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:r.zIndexDefault,padding:r.spacing2Xs,height:r.spacingXl}),content:e=>css({overflow:"auto",maxHeight:`${e}px`}),container:css({}),list:css({listStyle:"none",padding:`${r.spacing2Xs}`,margin:0}),groupTitle:css({padding:`6px ${r.spacingXs}`,lineHeight:r.lineHeightM}),noMatchesTitle:css({color:r.gray500,margin:r.spacingM}),selectAll:css({borderBottom:`1px solid ${r.gray200}`,marginBottom:r.spacing2Xs,paddingBottom:r.spacing2Xs,"label > *":{fontWeight:"500"}}),option:css({listStyleType:"none"}),item:css({label:{padding:`6px ${r.spacingXs}`,width:"100%",wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:r.borderRadiusMedium,border:0,cursor:"pointer",fontSize:r.fontSizeM,lineHeight:r.lineHeightM,fontWeight:r.fontWeightNormal,"&:focus, &:hover":{backgroundColor:r.gray100},"&:active":{backgroundColor:r.gray200},"&:focus":{boxShadow:r.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r.glowPrimary}}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var d=H=>{var y=H,{label:e,value:n,itemId:t,onSelectItem:l,searchValue:p,isChecked:u=!1,isDisabled:c=!1,className:b}=y,x=P(y,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let M=S();return o.createElement("li",h({className:cx(M.option,b)},x),o.createElement(Checkbox,{id:t,value:n,onChange:v=>l(v),isChecked:u,isDisabled:c,className:cx(M.item,c&&M.disabled)},o.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${t}`},o.createElement(q,{item:e,inputValue:p}))))};function q({item:e,inputValue:n=""}){let{before:t,match:l,after:p}=getStringMatch(e,n);return o.createElement(o.Fragment,null,t,o.createElement("b",{"data-test-id":"cf-multiselect-item-match"},l),p)}q.displayName="HighlightedItem";var Y=(e,n,t)=>o.Children.map(e,l=>{if(!o.isValidElement(l))return l;if(n(l))return t(l);let p=Y(l.props.children,n,t);return o.cloneElement(l,{children:p})}),Z=(e,n)=>{let t=0;return o.Children.forEach(e,l=>{o.isValidElement(l)&&(n(l)?t+=1:t+=Z(l.props.children,n));}),t};function we(e,n){let{className:t,startIcon:l,placeholder:p="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:b="Search",searchInputRef:x,searchInputName:H,noMatchesMessage:y="No matches found",toggleRef:M,isLoading:v=!1,testId:te="cf-multiselect",popoverProps:N={},children:I,onBlur:E}=e,{listMaxHeight:oe=180,listRef:ne}=N,s=S(),[m,A]=useState(""),[B,X]=useState(!1),L=useRef(null),$=useRef(null),V=typeof c=="function",O=useCallback(()=>{var a;(a=$.current)==null||a.focus();},[]),le=useCallback(a=>{A(a.target.value),c==null||c(a);},[c,A]),re=useCallback(()=>{if(!m)return;O(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(L.current,"");let f=new Event("change",{bubbles:!0});L.current.dispatchEvent(f);},[m,O]),ie=useCallback(()=>{if(u.length===0)return o.createElement(o.Fragment,null,p);let a=u.length-1;return a===0?o.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:s.currentSelection},u[0]):o.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:s.currentSelection},u[0]," ",o.createElement("span",{className:s.currentSelectionAddition},"and ",a," more"))},[u,p,s.currentSelection,s.currentSelectionAddition]),D=useMemo(()=>Z(I,a=>a.type===d),[I]),se=o.useCallback(a=>Y(a,f=>f.type===d,f=>{let ae=ce=>{var z;O(),(z=f.props)==null||z.onSelectItem(ce);};return o.cloneElement(f,{searchValue:m,onSelectItem:ae})}),[m,O]);return o.createElement("div",{"data-test-id":te,className:cx(s.multiselect,t),ref:n},o.createElement(Popover,U(h({renderOnlyWhenOpen:!1,isFullWidth:!0},N),{isOpen:B,onClose:()=>X(!1)}),o.createElement(Popover.Trigger,null,o.createElement(Button,{"aria-label":"Toggle Multiselect",ref:M,onClick:()=>X(!B),startIcon:l,endIcon:o.createElement(ChevronDownIcon,null),isFullWidth:!0,className:s.triggerButton},ie())),o.createElement(Popover.Content,{ref:mergeRefs(ne,$),className:cx(s.content(oe),N.className,s.container),testId:"cf-multiselect-container",onBlur:()=>E==null?void 0:E()},o.createElement(Pe,{focusOptions:{preventScroll:!0},returnFocus:!0},V&&o.createElement("div",{className:s.searchBar},o.createElement(TextInput,{"aria-label":"Search",type:"text",value:m,className:s.inputField,testId:"cf-multiselect-search",placeholder:b,onChange:le,ref:mergeRefs(x,L),name:H,size:"small"}),o.createElement(IconButton,{"aria-label":m?"Clear search":"Search",className:s.toggleButton,variant:"transparent",icon:m?o.createElement(CloseIcon,{variant:"muted"}):o.createElement(SearchIcon,{variant:"muted"}),onClick:re,isDisabled:!m,size:"small"})),v&&o.createElement(Ne,null),!v&&D>0&&o.createElement("ul",{className:s.list,"data-test-id":"cf-multiselect-items"},V?se(I):I),!v&&D===0&&o.createElement(Subheading,{className:s.noMatchesTitle},y)))))}var Ne=()=>o.createElement(SkeletonContainer,{svgHeight:16},o.createElement(SkeletonBodyText,{numberOfLines:1})),ee=o.forwardRef(we);var T=u=>{var c=u,{label:e,onSelectItem:n,isChecked:t=!1,className:l}=c,p=P(c,["label","onSelectItem","isChecked","className"]);let b=S();return o.createElement(d,h({value:"all",label:e||t?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:n,isChecked:t,className:cx(b.selectAll,l)},p))};var R=ee;R.Option=d;R.SelectAll=T;
+var ie=Object.defineProperty,se=Object.defineProperties;var ae=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var D=(e,o,t)=>o in e?ie(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))W.call(o,t)&&D(e,t,o[t]);if(C)for(var t of C(o))z.call(o,t)&&D(e,t,o[t]);return e},N=(e,o)=>se(e,ae(o));var O=(e,o)=>{var t={};for(var r in e)W.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&&z.call(e,r)&&(t[r]=e[r]);return t};var S=()=>({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 M=x=>{var h=x,{label:e,value:o,itemId:t,onSelectItem:r,searchValue:s,isChecked:c=!1,isDisabled:d=!1,className:p}=h,g=O(h,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=S();return l.createElement("li",b({className:cx(u.option,p)},g),l.createElement(Checkbox,{id:t,value:o,onChange:m=>r(m),isChecked:c,isDisabled:d,className:cx(u.optionCheck,d&&u.disabled)},l.createElement(Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l.createElement(F,{item:e,inputValue:s}))))};function F({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)}F.displayName="HighlightedItem";var U=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:r,searchInputRef:s,resetSearchRef:c,searchPlaceholder:d="Search",focusList:p})=>{let g=S(),x=useRef(null),h=useCallback(m=>{o(m.target.value),t==null||t(m);},[t,o]),u=useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(x.current,"");let y=new Event("change",{bubbles:!0});x.current.dispatchEvent(y);},[e,p]);return l.createElement("div",{className:g.searchBar},l.createElement(TextInput,{"aria-label":"Search",type:"text",value:e,className:g.inputField,testId:"cf-multiselect-search",placeholder:d,onChange:h,ref:mergeRefs(s,x),name:r,size:"small"}),l.createElement(IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:g.toggleButton,variant:"transparent",icon:e?l.createElement(CloseIcon,{variant:"muted"}):l.createElement(SearchIcon,{variant:"muted"}),onClick:u,isDisabled:!e,size:"small"}))};var J=(e,o,t)=>l.Children.map(e,r=>{if(!l.isValidElement(r))return r;if(o(r))return t(r);let s=J(r.props.children,o,t);return l.cloneElement(r,{children:s})}),K=(e,o)=>{let t=0;return l.Children.forEach(e,r=>{l.isValidElement(r)&&(o(r)?t+=1:t+=K(r.props.children,o));}),t};function Re(e,o){let{className:t,startIcon:r,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:d,isLoading:p=!1,testId:g="cf-multiselect",noMatchesMessage:x="No matches found",searchProps:h={},popoverProps:u={},children:m,onBlur:y}=e,{listMaxHeight:Y=180,listRef:Z}=u,a=S(),[R,ee]=useState(""),[T,H]=useState(!1),A=useRef(null),B=typeof e.onSearchValueChange=="function"||typeof h.onSearchValueChange=="function",te=Object.keys(h).length>0?h:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},w=useCallback(()=>{var f;(f=A.current)==null||f.focus();},[]),oe=useCallback(()=>{if(c.length===0)return l.createElement(l.Fragment,null,s);let f=c.length-1;return f===0?l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},c[0]):l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},c[0]," ",l.createElement("span",{className:a.currentSelectionAddition},"and ",f," more"))},[c,s,a.currentSelection,a.currentSelectionAddition]),X=useMemo(()=>K(m,f=>f.type===M),[m]),ne=l.useCallback(f=>J(f,P=>P.type===M,P=>{let re=le=>{var $;w(),($=P.props)==null||$.onSelectItem(le);};return l.cloneElement(P,{searchValue:R,onSelectItem:re})}),[R,w]);return l.createElement("div",{"data-test-id":g,className:cx(a.multiselect,t),ref:o},l.createElement(Popover,N(b({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:T,onClose:()=>H(!1)}),l.createElement(Popover.Trigger,null,l.createElement(Button,{"aria-label":"Toggle Multiselect",ref:d,onClick:()=>H(!T),startIcon:r,endIcon:l.createElement(ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},oe())),l.createElement(Popover.Content,{ref:mergeRefs(Z,A),className:cx(a.content(Y),u.className,a.container),testId:"cf-multiselect-container",onBlur:()=>y==null?void 0:y()},l.createElement(Oe,{focusOptions:{preventScroll:!0},returnFocus:!0},B&&l.createElement(U,N(b({},te),{setSearchValue:ee,searchValue:R,focusList:w})),p&&l.createElement(we,null),!p&&X>0&&l.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},B?ne(m):m),!p&&X===0&&l.createElement(Subheading,{className:a.noMatchesTitle},x)))))}var we=()=>l.createElement(SkeletonContainer,{svgHeight:16},l.createElement(SkeletonBodyText,{numberOfLines:1})),Q=l.forwardRef(Re);var L=c=>{var d=c,{label:e,onSelectItem:o,isChecked:t=!1,className:r}=d,s=O(d,["label","onSelectItem","isChecked","className"]);let p=S();return l.createElement(M,b({value:"all",label:e||t?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:o,isChecked:t,className:cx(p.selectAll,r)},s))};var k=Q;k.Option=M;k.SelectAll=L;
 
-export { R as Multiselect, d as MultiselectOption, T as SelectAllOption };
+export { k as Multiselect, M as MultiselectOption, L as SelectAllOption };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.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","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","focusList","handleSearchChange","resetSearchInput","forcedEvent","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.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  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: '10',\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  }),\n  selectAll: css({\n    borderBottom: `1px solid ${tokens.gray200}`,\n    marginBottom: tokens.spacing2Xs,\n    paddingBottom: tokens.spacing2Xs,\n    'label > *': {\n      fontWeight: '500',\n    },\n  }),\n  option: css({\n    listStyleType: 'none',\n  }),\n  item: 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, 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';\nimport FocusLock from 'react-focus-lock';\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  } & 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    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 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 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  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={() => 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            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              <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                  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            {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 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"]}
+{"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","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 } = 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={() => 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            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"]}

package/dist/index.d.mts

@@ -14,6 +14,42 @@ interface MultiselectOptionProps {
 }
 declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
 
+interface MultiselectSearchProps {
+    /**
+     * Function called whenever the search input value changes
+     */
+    onSearchValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | undefined;
+    /**
+     * This is the value will be passed to the `placeholder` prop of the input.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Pass a form name to the search text input
+     */
+    searchInputName?: string;
+    /**
+     * Use this prop to get a ref to the search input element of the component
+     */
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Use this prop to get a ref to the reset search button of the component
+     */
+    resetSearchRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * State from the parent component
+     */
+    searchValue?: string;
+    /**
+     * State setter of the parent
+     */
+    setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     *  List helper function
+     */
+    focusList?: () => void;
+}
+
 interface MultiselectProps extends CommonProps {
     /** Select Options */
     children?: React.ReactNode;
@@ -29,37 +65,45 @@ interface MultiselectProps extends CommonProps {
      * current Selected items, to be shown on the trigger button
      */
     currentSelection?: Array<string>;
+    /**
+     * Sets the list to show its loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Use this prop to get a ref to the toggle button of the component
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Props to pass to the optional search field
+     */
+    searchProps?: MultiselectSearchProps;
     /**
      * Function called whenever the search input value changes
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
     onSearchValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | undefined;
     /**
      * This is the value will be passed to the `placeholder` prop of the input.
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      * @default "Search"
      */
     searchPlaceholder?: string;
     /**
-     * A message that will be shown when it is not possible to find any option that matches the input value
+     * A message that will be shown when it is not possible to find any option that matches the search value
      * @default "No matches"
      */
     noMatchesMessage?: string;
-    /**
-     * Use this prop to get a ref to the input element of the component
-     */
-    searchInputRef?: React.Ref<HTMLInputElement>;
     /**
      * Pass a form name to the search text input
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
     searchInputName?: string;
     /**
-     * Sets the list to show its loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Use this prop to get a ref to the toggle button of the component
+     * Use this prop to get a ref to the search input element of the component
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
-    toggleRef?: React.Ref<HTMLButtonElement>;
+    searchInputRef?: React.Ref<HTMLInputElement>;
     /**
      * Props to pass to the Popover (Dropdown) component
      */

package/dist/index.d.ts

@@ -14,6 +14,42 @@ interface MultiselectOptionProps {
 }
 declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
 
+interface MultiselectSearchProps {
+    /**
+     * Function called whenever the search input value changes
+     */
+    onSearchValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | undefined;
+    /**
+     * This is the value will be passed to the `placeholder` prop of the input.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Pass a form name to the search text input
+     */
+    searchInputName?: string;
+    /**
+     * Use this prop to get a ref to the search input element of the component
+     */
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Use this prop to get a ref to the reset search button of the component
+     */
+    resetSearchRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * State from the parent component
+     */
+    searchValue?: string;
+    /**
+     * State setter of the parent
+     */
+    setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     *  List helper function
+     */
+    focusList?: () => void;
+}
+
 interface MultiselectProps extends CommonProps {
     /** Select Options */
     children?: React.ReactNode;
@@ -29,37 +65,45 @@ interface MultiselectProps extends CommonProps {
      * current Selected items, to be shown on the trigger button
      */
     currentSelection?: Array<string>;
+    /**
+     * Sets the list to show its loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Use this prop to get a ref to the toggle button of the component
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Props to pass to the optional search field
+     */
+    searchProps?: MultiselectSearchProps;
     /**
      * Function called whenever the search input value changes
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
     onSearchValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | undefined;
     /**
      * This is the value will be passed to the `placeholder` prop of the input.
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      * @default "Search"
      */
     searchPlaceholder?: string;
     /**
-     * A message that will be shown when it is not possible to find any option that matches the input value
+     * A message that will be shown when it is not possible to find any option that matches the search value
      * @default "No matches"
      */
     noMatchesMessage?: string;
-    /**
-     * Use this prop to get a ref to the input element of the component
-     */
-    searchInputRef?: React.Ref<HTMLInputElement>;
     /**
      * Pass a form name to the search text input
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
     searchInputName?: string;
     /**
-     * Sets the list to show its loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Use this prop to get a ref to the toggle button of the component
+     * Use this prop to get a ref to the search input element of the component
+     * @deprecated Handover this prop in the searchProps subcomponent properties
      */
-    toggleRef?: React.Ref<HTMLButtonElement>;
+    searchInputRef?: React.Ref<HTMLInputElement>;
     /**
      * Props to pass to the Popover (Dropdown) component
      */

package/dist/index.js

@@ -1,28 +1,28 @@
 'use strict';
 
-var o = require('react');
+var l = require('react');
 var f36Forms = require('@contentful/f36-forms');
 var f36Typography = require('@contentful/f36-typography');
 var emotion = require('emotion');
-var r = require('@contentful/f36-tokens');
+var n = require('@contentful/f36-tokens');
 var f36Utils = require('@contentful/f36-utils');
 var f36Core = require('@contentful/f36-core');
 var f36Button = require('@contentful/f36-button');
 var f36Icons = require('@contentful/f36-icons');
 var f36Skeleton = require('@contentful/f36-skeleton');
 var f36Popover = require('@contentful/f36-popover');
-var Pe = require('react-focus-lock');
+var Oe = require('react-focus-lock');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var o__default = /*#__PURE__*/_interopDefault(o);
-var r__default = /*#__PURE__*/_interopDefault(r);
-var Pe__default = /*#__PURE__*/_interopDefault(Pe);
+var l__default = /*#__PURE__*/_interopDefault(l);
+var n__default = /*#__PURE__*/_interopDefault(n);
+var Oe__default = /*#__PURE__*/_interopDefault(Oe);
 
-var pe=Object.defineProperty,ue=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var F=(e,n,t)=>n in e?pe(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,h=(e,n)=>{for(var t in n||(n={}))W.call(n,t)&&F(e,t,n[t]);if(C)for(var t of C(n))j.call(n,t)&&F(e,t,n[t]);return e},U=(e,n)=>ue(e,me(n));var P=(e,n)=>{var t={};for(var l in e)W.call(e,l)&&n.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&C)for(var l of C(e))n.indexOf(l)<0&&j.call(e,l)&&(t[l]=e[l]);return t};var S=()=>({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:r__default.default.spacing2Xs}),currentSelectionAddition:emotion.css({color:r__default.default.gray600}),searchBar:emotion.css({paddingTop:r__default.default.spacing2Xs,position:"sticky",top:"0px",zIndex:"10",backgroundColor:r__default.default.colorWhite}),inputField:emotion.css({padding:`6px ${r__default.default.spacingXl} 10px ${r__default.default.spacingXs}`,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${r__default.default.gray200}`,boxShadow:"none","&:focus, &:active, &:active:hover":{boxShadow:"none",borderBottom:`1px solid ${r__default.default.gray200}`}}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:r__default.default.zIndexDefault,padding:r__default.default.spacing2Xs,height:r__default.default.spacingXl}),content:e=>emotion.css({overflow:"auto",maxHeight:`${e}px`}),container:emotion.css({}),list:emotion.css({listStyle:"none",padding:`${r__default.default.spacing2Xs}`,margin:0}),groupTitle:emotion.css({padding:`6px ${r__default.default.spacingXs}`,lineHeight:r__default.default.lineHeightM}),noMatchesTitle:emotion.css({color:r__default.default.gray500,margin:r__default.default.spacingM}),selectAll:emotion.css({borderBottom:`1px solid ${r__default.default.gray200}`,marginBottom:r__default.default.spacing2Xs,paddingBottom:r__default.default.spacing2Xs,"label > *":{fontWeight:"500"}}),option:emotion.css({listStyleType:"none"}),item:emotion.css({label:{padding:`6px ${r__default.default.spacingXs}`,width:"100%",wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:r__default.default.borderRadiusMedium,border:0,cursor:"pointer",fontSize:r__default.default.fontSizeM,lineHeight:r__default.default.lineHeightM,fontWeight:r__default.default.fontWeightNormal,"&:focus, &:hover":{backgroundColor:r__default.default.gray100},"&:active":{backgroundColor:r__default.default.gray200},"&:focus":{boxShadow:r__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r__default.default.glowPrimary}}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var d=H=>{var y=H,{label:e,value:n,itemId:t,onSelectItem:l,searchValue:p,isChecked:u=!1,isDisabled:c=!1,className:b}=y,x=P(y,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let M=S();return o__default.default.createElement("li",h({className:emotion.cx(M.option,b)},x),o__default.default.createElement(f36Forms.Checkbox,{id:t,value:n,onChange:v=>l(v),isChecked:u,isDisabled:c,className:emotion.cx(M.item,c&&M.disabled)},o__default.default.createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${t}`},o__default.default.createElement(q,{item:e,inputValue:p}))))};function q({item:e,inputValue:n=""}){let{before:t,match:l,after:p}=f36Utils.getStringMatch(e,n);return o__default.default.createElement(o__default.default.Fragment,null,t,o__default.default.createElement("b",{"data-test-id":"cf-multiselect-item-match"},l),p)}q.displayName="HighlightedItem";var Y=(e,n,t)=>o__default.default.Children.map(e,l=>{if(!o__default.default.isValidElement(l))return l;if(n(l))return t(l);let p=Y(l.props.children,n,t);return o__default.default.cloneElement(l,{children:p})}),Z=(e,n)=>{let t=0;return o__default.default.Children.forEach(e,l=>{o__default.default.isValidElement(l)&&(n(l)?t+=1:t+=Z(l.props.children,n));}),t};function we(e,n){let{className:t,startIcon:l,placeholder:p="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:b="Search",searchInputRef:x,searchInputName:H,noMatchesMessage:y="No matches found",toggleRef:M,isLoading:v=!1,testId:te="cf-multiselect",popoverProps:N={},children:I,onBlur:E}=e,{listMaxHeight:oe=180,listRef:ne}=N,s=S(),[m,A]=o.useState(""),[B,X]=o.useState(!1),L=o.useRef(null),$=o.useRef(null),V=typeof c=="function",O=o.useCallback(()=>{var a;(a=$.current)==null||a.focus();},[]),le=o.useCallback(a=>{A(a.target.value),c==null||c(a);},[c,A]),re=o.useCallback(()=>{if(!m)return;O(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(L.current,"");let f=new Event("change",{bubbles:!0});L.current.dispatchEvent(f);},[m,O]),ie=o.useCallback(()=>{if(u.length===0)return o__default.default.createElement(o__default.default.Fragment,null,p);let a=u.length-1;return a===0?o__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:s.currentSelection},u[0]):o__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:s.currentSelection},u[0]," ",o__default.default.createElement("span",{className:s.currentSelectionAddition},"and ",a," more"))},[u,p,s.currentSelection,s.currentSelectionAddition]),D=o.useMemo(()=>Z(I,a=>a.type===d),[I]),se=o__default.default.useCallback(a=>Y(a,f=>f.type===d,f=>{let ae=ce=>{var z;O(),(z=f.props)==null||z.onSelectItem(ce);};return o__default.default.cloneElement(f,{searchValue:m,onSelectItem:ae})}),[m,O]);return o__default.default.createElement("div",{"data-test-id":te,className:emotion.cx(s.multiselect,t),ref:n},o__default.default.createElement(f36Popover.Popover,U(h({renderOnlyWhenOpen:!1,isFullWidth:!0},N),{isOpen:B,onClose:()=>X(!1)}),o__default.default.createElement(f36Popover.Popover.Trigger,null,o__default.default.createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:M,onClick:()=>X(!B),startIcon:l,endIcon:o__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:s.triggerButton},ie())),o__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(ne,$),className:emotion.cx(s.content(oe),N.className,s.container),testId:"cf-multiselect-container",onBlur:()=>E==null?void 0:E()},o__default.default.createElement(Pe__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},V&&o__default.default.createElement("div",{className:s.searchBar},o__default.default.createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:m,className:s.inputField,testId:"cf-multiselect-search",placeholder:b,onChange:le,ref:f36Core.mergeRefs(x,L),name:H,size:"small"}),o__default.default.createElement(f36Button.IconButton,{"aria-label":m?"Clear search":"Search",className:s.toggleButton,variant:"transparent",icon:m?o__default.default.createElement(f36Icons.CloseIcon,{variant:"muted"}):o__default.default.createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:re,isDisabled:!m,size:"small"})),v&&o__default.default.createElement(Ne,null),!v&&D>0&&o__default.default.createElement("ul",{className:s.list,"data-test-id":"cf-multiselect-items"},V?se(I):I),!v&&D===0&&o__default.default.createElement(f36Typography.Subheading,{className:s.noMatchesTitle},y)))))}var Ne=()=>o__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},o__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),ee=o__default.default.forwardRef(we);var T=u=>{var c=u,{label:e,onSelectItem:n,isChecked:t=!1,className:l}=c,p=P(c,["label","onSelectItem","isChecked","className"]);let b=S();return o__default.default.createElement(d,h({value:"all",label:e||t?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:n,isChecked:t,className:emotion.cx(b.selectAll,l)},p))};var R=ee;R.Option=d;R.SelectAll=T;
+var ie=Object.defineProperty,se=Object.defineProperties;var ae=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var D=(e,o,t)=>o in e?ie(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))W.call(o,t)&&D(e,t,o[t]);if(C)for(var t of C(o))z.call(o,t)&&D(e,t,o[t]);return e},N=(e,o)=>se(e,ae(o));var O=(e,o)=>{var t={};for(var r in e)W.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&&z.call(e,r)&&(t[r]=e[r]);return t};var S=()=>({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 M=x=>{var h=x,{label:e,value:o,itemId:t,onSelectItem:r,searchValue:s,isChecked:c=!1,isDisabled:d=!1,className:p}=h,g=O(h,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=S();return l__default.default.createElement("li",b({className:emotion.cx(u.option,p)},g),l__default.default.createElement(f36Forms.Checkbox,{id:t,value:o,onChange:m=>r(m),isChecked:c,isDisabled:d,className:emotion.cx(u.optionCheck,d&&u.disabled)},l__default.default.createElement(f36Typography.Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l__default.default.createElement(F,{item:e,inputValue:s}))))};function F({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)}F.displayName="HighlightedItem";var U=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:r,searchInputRef:s,resetSearchRef:c,searchPlaceholder:d="Search",focusList:p})=>{let g=S(),x=l.useRef(null),h=l.useCallback(m=>{o(m.target.value),t==null||t(m);},[t,o]),u=l.useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(x.current,"");let y=new Event("change",{bubbles:!0});x.current.dispatchEvent(y);},[e,p]);return l__default.default.createElement("div",{className:g.searchBar},l__default.default.createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:e,className:g.inputField,testId:"cf-multiselect-search",placeholder:d,onChange:h,ref:f36Core.mergeRefs(s,x),name:r,size:"small"}),l__default.default.createElement(f36Button.IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:g.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 J=(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=J(r.props.children,o,t);return l__default.default.cloneElement(r,{children:s})}),K=(e,o)=>{let t=0;return l__default.default.Children.forEach(e,r=>{l__default.default.isValidElement(r)&&(o(r)?t+=1:t+=K(r.props.children,o));}),t};function Re(e,o){let{className:t,startIcon:r,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:d,isLoading:p=!1,testId:g="cf-multiselect",noMatchesMessage:x="No matches found",searchProps:h={},popoverProps:u={},children:m,onBlur:y}=e,{listMaxHeight:Y=180,listRef:Z}=u,a=S(),[R,ee]=l.useState(""),[T,H]=l.useState(!1),A=l.useRef(null),B=typeof e.onSearchValueChange=="function"||typeof h.onSearchValueChange=="function",te=Object.keys(h).length>0?h:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},w=l.useCallback(()=>{var f;(f=A.current)==null||f.focus();},[]),oe=l.useCallback(()=>{if(c.length===0)return l__default.default.createElement(l__default.default.Fragment,null,s);let f=c.length-1;return f===0?l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},c[0]):l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},c[0]," ",l__default.default.createElement("span",{className:a.currentSelectionAddition},"and ",f," more"))},[c,s,a.currentSelection,a.currentSelectionAddition]),X=l.useMemo(()=>K(m,f=>f.type===M),[m]),ne=l__default.default.useCallback(f=>J(f,P=>P.type===M,P=>{let re=le=>{var $;w(),($=P.props)==null||$.onSelectItem(le);};return l__default.default.cloneElement(P,{searchValue:R,onSelectItem:re})}),[R,w]);return l__default.default.createElement("div",{"data-test-id":g,className:emotion.cx(a.multiselect,t),ref:o},l__default.default.createElement(f36Popover.Popover,N(b({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:T,onClose:()=>H(!1)}),l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:d,onClick:()=>H(!T),startIcon:r,endIcon:l__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},oe())),l__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(Z,A),className:emotion.cx(a.content(Y),u.className,a.container),testId:"cf-multiselect-container",onBlur:()=>y==null?void 0:y()},l__default.default.createElement(Oe__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},B&&l__default.default.createElement(U,N(b({},te),{setSearchValue:ee,searchValue:R,focusList:w})),p&&l__default.default.createElement(we,null),!p&&X>0&&l__default.default.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},B?ne(m):m),!p&&X===0&&l__default.default.createElement(f36Typography.Subheading,{className:a.noMatchesTitle},x)))))}var we=()=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),Q=l__default.default.forwardRef(Re);var L=c=>{var d=c,{label:e,onSelectItem:o,isChecked:t=!1,className:r}=d,s=O(d,["label","onSelectItem","isChecked","className"]);let p=S();return l__default.default.createElement(M,b({value:"all",label:e||t?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:o,isChecked:t,className:emotion.cx(p.selectAll,r)},s))};var k=Q;k.Option=M;k.SelectAll=L;
 
-exports.Multiselect = R;
-exports.MultiselectOption = d;
-exports.SelectAllOption = T;
+exports.Multiselect = k;
+exports.MultiselectOption = M;
+exports.SelectAllOption = L;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.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","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","FocusLock","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","focusList","handleSearchChange","resetSearchInput","forcedEvent","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.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  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: '10',\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  }),\n  selectAll: css({\n    borderBottom: `1px solid ${tokens.gray200}`,\n    marginBottom: tokens.spacing2Xs,\n    paddingBottom: tokens.spacing2Xs,\n    'label > *': {\n      fontWeight: '500',\n    },\n  }),\n  option: css({\n    listStyleType: 'none',\n  }),\n  item: 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, 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';\nimport FocusLock from 'react-focus-lock';\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  } & 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    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 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 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  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={() => 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            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              <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                  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            {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 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"]}
+{"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","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 } = 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={() => 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            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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-multiselect",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Forma 36: Multiselect Component",
   "scripts": {
     "build": "tsup"
@@ -38,6 +38,7 @@
     "url": "https://github.com/contentful/forma-36"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   },
   "devDependencies": {