@contentful/f36-multiselect 4.25.0 → 4.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.mdx +8 -0
  2. package/dist/esm/index.js +4 -4
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +22 -3
  5. package/dist/index.d.ts +22 -3
  6. package/dist/index.js +6 -6
  7. package/dist/index.js.map +1 -1
  8. package/package.json +8 -8
package/README.mdx CHANGED
@@ -84,6 +84,14 @@ In some cases it is desired to toggle the status of the popover drawer as well a
84
84
 
85
85
  ```
86
86
 
87
+ ### With component as children
88
+
89
+ You can render React components in the select options, but it's important to note that this makes it your own responsibility to highlight the matching part of the search term. To help with this there's the `HighlightedItem` component.
90
+
91
+ ```jsx file=./examples/MultiselectOptionChildrenExample.tsx
92
+
93
+ ```
94
+
87
95
  ## Props (API reference)
88
96
 
89
97
  <PropsTable of="Multiselect" />
package/dist/esm/index.js CHANGED
@@ -3,17 +3,17 @@ import { Checkbox, TextInput } from '@contentful/f36-forms';
3
3
  import { Text, Subheading } from '@contentful/f36-typography';
4
4
  import { cx, css } from 'emotion';
5
5
  import r from '@contentful/f36-tokens';
6
+ import { Flex, mergeRefs, getMenuItemStyles } from '@contentful/f36-core';
6
7
  import { getStringMatch } from '@contentful/f36-utils';
7
- import { Flex, mergeRefs } from '@contentful/f36-core';
8
8
  import { Button, IconButton } from '@contentful/f36-button';
9
9
  import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
10
10
  import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
11
11
  import { Popover } from '@contentful/f36-popover';
12
12
  import { Tooltip } from '@contentful/f36-tooltip';
13
- import Be from 'react-focus-lock';
13
+ import Ae from 'react-focus-lock';
14
14
 
15
- var pe=Object.defineProperty,ue=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var V=(e,o,t)=>o in e?pe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,y=(e,o)=>{for(var t in o||(o={}))j.call(o,t)&&V(e,t,o[t]);if(O)for(var t of O(o))U.call(o,t)&&V(e,t,o[t]);return e},T=(e,o)=>ue(e,me(o));var w=(e,o)=>{var t={};for(var n in e)j.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&O)for(var n of O(e))o.indexOf(n)<0&&U.call(e,n)&&(t[n]=e[n]);return t};var S=()=>({multiselect:css({position:"relative",width:"100%"}),triggerButton:css({justifyContent:"space-between"}),currentSelection:css({display:"inline-block",width:"100%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r.spacing2Xs}),currentSelectionWithClearButton:css({paddingRight:"40px"}),currentSelectionAddition:css({color:r.gray600}),searchBar:css({paddingTop:r.spacing2Xs,position:"sticky",top:"0px",zIndex:r.zIndexWorkbenchHeader,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,textAlign:"center"}),clearSelectionButton:css({marginLeft:"-80px"}),selectAll:css({borderBottom:`1px solid ${r.gray200}`,marginBottom:r.spacing2Xs,paddingBottom:r.spacing2Xs,"label > *":{fontWeight:r.fontWeightMedium}}),option:css({listStyleType:"none",margin:"1px 0"}),optionText:css({color:r.gray700,b:{color:r.gray900}}),optionCheck: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 M=b=>{var f=b,{label:e,value:o,itemId:t,onSelectItem:n,searchValue:s,isChecked:c=!1,isDisabled:v=!1,className:p}=f,g=w(f,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let m=S();return l.createElement("li",y({className:cx(m.option,p)},g),l.createElement(Checkbox,{id:t,value:o,onChange:d=>n(d),isChecked:c,isDisabled:v,className:cx(m.optionCheck,v&&m.disabled)},l.createElement(Text,{className:m.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l.createElement(q,{item:e,inputValue:s}))))};function q({item:e,inputValue:o=""}){let{before:t,match:n,after:s}=getStringMatch(e,o.trim());return t.length+n.length+s.length===0?l.createElement(l.Fragment,null,e):l.createElement(l.Fragment,null,t,l.createElement("b",{"data-test-id":"cf-multiselect-item-match"},n),s)}q.displayName="HighlightedItem";var J=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:v="Search",focusList:p})=>{let g=S(),b=useRef(null),f=useCallback(d=>{o(d.target.value),t==null||t(d);},[t,o]),m=useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(b.current,"");let C=new Event("change",{bubbles:!0});b.current.dispatchEvent(C);},[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:v,onChange:f,ref:mergeRefs(s,b),name:n,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:m,isDisabled:!e,size:"small"}))};var Y=(e,o,t)=>l.Children.map(e,n=>{if(!l.isValidElement(n))return n;if(o(n))return t(n);let s=Y(n.props.children,o,t);return l.cloneElement(n,{children:s})}),Z=(e,o)=>{let t=0;return l.Children.forEach(e,n=>{l.isValidElement(n)&&(o(n)?t+=1:t+=Z(n.props.children,o));}),t};function He(e,o){let{className:t,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:v,isLoading:p=!1,testId:g="cf-multiselect",noMatchesMessage:b="No matches found",searchProps:f={},popoverProps:m={},children:d,onBlur:C,onClearSelection:P}=e,{listMaxHeight:te=180,listRef:oe,onClose:A}=m,a=S(),[N,ne]=useState(""),[W,X]=useState(!1),D=useRef(null),E=c.length>1&&typeof P=="function",$=typeof e.onSearchValueChange=="function"||typeof f.onSearchValueChange=="function",re=Object.keys(f).length>0?f:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},L=useCallback(()=>{var u;(u=D.current)==null||u.focus();},[]),le=u=>{P==null||P(),u.stopPropagation();},ie=useCallback(()=>{if(c.length===0)return l.createElement(l.Fragment,null,s);let u=c.length-1,x=cx(a.currentSelection,E&&a.currentSelectionWithClearButton);return u===0?l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:x},c[0]):l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:x},c[0]," ",l.createElement("span",{className:a.currentSelectionAddition},"and ",u," more"))},[c,s,E,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),z=useMemo(()=>Z(d,u=>u.type===M),[d]),se=l.useCallback(u=>Y(u,x=>x.type===M,x=>{let ae=ce=>{var F;L(),(F=x.props)==null||F.onSelectItem(ce);};return l.cloneElement(x,{searchValue:N,onSelectItem:ae})}),[N,L]);return l.createElement("div",{"data-test-id":g,className:cx(a.multiselect,t),ref:o},l.createElement(Popover,T(y({renderOnlyWhenOpen:!1,isFullWidth:!0},m),{isOpen:W,onClose:()=>{X(!1),A&&A();}}),l.createElement(Flex,{alignItems:"center"},l.createElement(Popover.Trigger,null,l.createElement(Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>X(!W),startIcon:n,endIcon:l.createElement(ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},ie())),E&&l.createElement("div",{className:a.clearSelectionButton},l.createElement(Tooltip,{content:"Clear selection",showDelay:800,placement:"top",as:"div"},l.createElement(IconButton,{onClick:le,icon:l.createElement(CloseIcon,null),"aria-label":"Clear selection",size:"small"})))),l.createElement(Popover.Content,{ref:mergeRefs(oe,D),className:cx(a.content(te),m.className,a.container),testId:"cf-multiselect-container",onBlur:()=>C==null?void 0:C()},l.createElement(Be,{focusOptions:{preventScroll:!0},returnFocus:!0},$&&l.createElement(J,T(y({},re),{setSearchValue:ne,searchValue:N,focusList:L})),p&&l.createElement(Ae,null),!p&&z>0&&l.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?se(d):d),!p&&z===0&&l.createElement(Subheading,{className:a.noMatchesTitle},b)))))}var Ae=()=>l.createElement(SkeletonContainer,{svgHeight:16},l.createElement(SkeletonBodyText,{numberOfLines:1})),ee=l.forwardRef(He);var B=v=>{var p=v,{label:e,itemId:o="SelectAll",onSelectItem:t,isChecked:n=!1,className:s}=p,c=w(p,["label","itemId","onSelectItem","isChecked","className"]);let g=S();return l.createElement(M,y({value:"all",label:e||n?"Deselect all":"Select all",itemId:o,onSelectItem:t,isChecked:n,className:cx(g.selectAll,s)},c))};var H=ee;H.Option=M;H.SelectAll=B;
15
+ var ce=Object.defineProperty,pe=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var j=(e,t,o)=>t in e?ce(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))U.call(t,o)&&j(e,o,t[o]);if(O)for(var o of O(t))_.call(t,o)&&j(e,o,t[o]);return e},H=(e,t)=>pe(e,me(t));var N=(e,t)=>{var o={};for(var n in e)U.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&O)for(var n of O(e))t.indexOf(n)<0&&_.call(e,n)&&(o[n]=e[n]);return o};var S=()=>({multiselect:css({position:"relative",width:"100%"}),triggerButton:css({justifyContent:"space-between"}),currentSelection:css({display:"inline-block",width:"100%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r.spacing2Xs}),currentSelectionWithClearButton:css({paddingRight:"40px"}),currentSelectionAddition:css({color:r.gray600}),searchBar:css({paddingTop:r.spacing2Xs,position:"sticky",top:"0px",zIndex:r.zIndexWorkbenchHeader,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,textAlign:"center"}),clearSelectionButton:css({marginLeft:"-80px"}),selectAll:css({borderBottom:`1px solid ${r.gray200}`,marginBottom:r.spacing2Xs,paddingBottom:r.spacing2Xs,"label > *":{fontWeight:r.fontWeightMedium}}),option:css({listStyleType:"none"}),optionText:css({alignItems:"center",display:"flex",span:{color:r.gray900,fontWeight:r.fontWeightDemiBold}}),optionCheck:({isActive:e,isDisabled:t})=>css({label:cx(getMenuItemStyles({isActive:e,isDisabled:t}),css({width:"100%"}))})});var M=y=>{var f=y,{children:e,label:t,value:o,itemId:n,onSelectItem:s,searchValue:c,isChecked:v=!1,isDisabled:p=!1,className:d}=f,g=N(f,["children","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let m=S();return l.createElement("li",b({className:cx(m.option,d)},g),l.createElement(Checkbox,{id:n,value:o,onChange:x=>s(x),isChecked:v,isDisabled:p,className:m.optionCheck({isActive:v,isDisabled:p})},l.createElement(Text,{className:m.optionText,"data-test-id":`cf-multiselect-list-item-${n}`},typeof t=="string"?l.createElement(L,{item:t,inputValue:c}):e)))};function L({item:e,inputValue:t=""}){let{before:o,match:n,after:s}=getStringMatch(e,t.trim());return o.length+n.length+s.length===0?l.createElement(l.Fragment,null,e):l.createElement(l.Fragment,null,o,l.createElement("span",{"data-test-id":"cf-multiselect-item-match"},n),s)}L.displayName="HighlightedItem";var G=({searchValue:e,setSearchValue:t,onSearchValueChange:o,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:v="Search",focusList:p})=>{let d=S(),g=useRef(null),y=useCallback(m=>{t(m.target.value),o==null||o(m);},[o,t]),f=useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(g.current,"");let x=new Event("change",{bubbles:!0});g.current.dispatchEvent(x);},[e,p]);return l.createElement("div",{className:d.searchBar},l.createElement(TextInput,{"aria-label":"Search",type:"text",value:e,className:d.inputField,testId:"cf-multiselect-search",placeholder:v,onChange:y,ref:mergeRefs(s,g),name:n,size:"small"}),l.createElement(IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:d.toggleButton,variant:"transparent",icon:e?l.createElement(CloseIcon,{variant:"muted"}):l.createElement(SearchIcon,{variant:"muted"}),onClick:f,isDisabled:!e,size:"small"}))};var Q=(e,t,o)=>l.Children.map(e,n=>{if(!l.isValidElement(n))return n;if(t(n))return o(n);let s=Q(n.props.children,t,o);return l.cloneElement(n,{children:s})}),Y=(e,t)=>{let o=0;return l.Children.forEach(e,n=>{l.isValidElement(n)&&(t(n)?o+=1:o+=Y(n.props.children,t));}),o};function We(e,t){let{className:o,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:v,isLoading:p=!1,testId:d="cf-multiselect",noMatchesMessage:g="No matches found",searchProps:y={},popoverProps:f={},children:m,onBlur:x,onClearSelection:P}=e,{listMaxHeight:ee=180,listRef:te,onClose:W}=f,a=S(),[T,oe]=useState(""),[D,X]=useState(!1),F=useRef(null),R=c.length>1&&typeof P=="function",$=typeof e.onSearchValueChange=="function"||typeof y.onSearchValueChange=="function",ne=Object.keys(y).length>0?y:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},B=useCallback(()=>{var u;(u=F.current)==null||u.focus();},[]),le=u=>{P==null||P(),u.stopPropagation();},re=useCallback(()=>{if(c.length===0)return l.createElement(l.Fragment,null,s);let u=c.length-1,I=cx(a.currentSelection,R&&a.currentSelectionWithClearButton);return u===0?l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:I},c[0]):l.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:I},c[0]," ",l.createElement("span",{className:a.currentSelectionAddition},"and ",u," more"))},[c,s,R,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),V=useMemo(()=>Y(m,u=>u.type===M),[m]),ie=l.useCallback(u=>Q(u,I=>I.type===M,I=>{let se=ae=>{var z;B(),(z=I.props)==null||z.onSelectItem(ae);};return l.cloneElement(I,{searchValue:T,onSelectItem:se})}),[T,B]);return l.createElement("div",{"data-test-id":d,className:cx(a.multiselect,o),ref:t},l.createElement(Popover,H(b({renderOnlyWhenOpen:!1,isFullWidth:!0},f),{isOpen:D,onClose:()=>{X(!1),W&&W();}}),l.createElement(Flex,{alignItems:"center"},l.createElement(Popover.Trigger,null,l.createElement(Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>X(!D),startIcon:n,endIcon:l.createElement(ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},re())),R&&l.createElement("div",{className:a.clearSelectionButton},l.createElement(Tooltip,{content:"Clear selection",showDelay:800,placement:"top",as:"div"},l.createElement(IconButton,{onClick:le,icon:l.createElement(CloseIcon,null),"aria-label":"Clear selection",size:"small"})))),l.createElement(Popover.Content,{ref:mergeRefs(te,F),className:cx(a.content(ee),f.className,a.container),testId:"cf-multiselect-container",onBlur:()=>x==null?void 0:x()},l.createElement(Ae,{focusOptions:{preventScroll:!0},returnFocus:!0},$&&l.createElement(G,H(b({},ne),{setSearchValue:oe,searchValue:T,focusList:B})),p&&l.createElement(De,null),!p&&V>0&&l.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?ie(m):m),!p&&V===0&&l.createElement(Subheading,{className:a.noMatchesTitle},g)))))}var De=()=>l.createElement(SkeletonContainer,{svgHeight:16},l.createElement(SkeletonBodyText,{numberOfLines:1})),Z=l.forwardRef(We);var A=v=>{var p=v,{label:e,itemId:t="SelectAll",onSelectItem:o,isChecked:n=!1,className:s}=p,c=N(p,["label","itemId","onSelectItem","isChecked","className"]);let d=S();return l.createElement(M,b({value:"all",label:e||n?"Deselect all":"Select all",itemId:t,onSelectItem:o,isChecked:n,className:cx(d.selectAll,s)},c))};var E=Z;E.HighlightedItem=L;E.Option=M;E.SelectAll=A;
16
16
 
17
- export { H as Multiselect, M as MultiselectOption, B as SelectAllOption };
17
+ export { E as Multiselect, M as MultiselectOption, A as SelectAllOption };
18
18
  //# sourceMappingURL=out.js.map
19
19
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.tsx","../../src/MultiselectSearch.tsx","../../src/SelectAllOption.tsx","../../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Flex","Button","IconButton","ChevronDownIcon","CloseIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","Tooltip","FocusLock","TextInput","SearchIcon","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","onClearSelection","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","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.trim());\n\n if (before.length + match.length + after.length === 0) {\n return <>{item}</>;\n }\n\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 display: 'inline-block',\n width: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionWithClearButton: css({\n paddingRight: '40px',\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 clearSelectionButton: css({\n marginLeft: '-80px',\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, Flex } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { ChevronDownIcon, CloseIcon } 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';\nimport { Tooltip } from '@contentful/f36-tooltip';\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 * Function called when the clear all button is clicked\n * If no function is provided the clear button is not shown\n */\n onClearSelection?: () => 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 onClearSelection,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const showClearButton =\n currentSelection.length > 1 && typeof onClearSelection === 'function';\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 handleClearSelection = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClearSelection?.();\n e.stopPropagation();\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n const currentSelectionClassName = cx(\n styles.currentSelection,\n showClearButton && styles.currentSelectionWithClearButton,\n );\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n showClearButton,\n styles.currentSelection,\n styles.currentSelectionAddition,\n styles.currentSelectionWithClearButton,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Flex alignItems=\"center\">\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 {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content=\"Clear selection\"\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label=\"Clear selection\"\n size=\"small\"\n />\n </Tooltip>\n </div>\n )}\n </Flex>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
1
+ {"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.tsx","../../src/MultiselectSearch.tsx","../../src/SelectAllOption.tsx","../../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","cx","tokens","getMenuItemStyles","getMultiselectStyles","listMaxHeight","isActive","isDisabled","getStringMatch","MultiselectOption","_a","_b","children","label","value","itemId","onSelectItem","searchValue","isChecked","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Flex","Button","IconButton","ChevronDownIcon","CloseIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","Tooltip","FocusLock","TextInput","SearchIcon","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","onClearSelection","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","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\ntype LabelOrChildren =\n | {\n /**\n * When using React children it is your own responsibility to highlight\n * the matching part of the item label. Use the `HighlightedItem`\n * component for this.\n */\n children: React.ReactNode;\n label?: never;\n }\n | {\n children?: never;\n label: string;\n };\n\nexport type MultiselectOptionProps = {\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} & LabelOrChildren;\n\nexport const MultiselectOption = ({\n children,\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={styles.optionCheck({ isActive: isChecked, isDisabled })}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n {typeof label === 'string' ? (\n <HighlightedItem item={label} inputValue={searchValue} />\n ) : (\n children\n )}\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nexport function HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue.trim());\n\n if (before.length + match.length + after.length === 0) {\n return <>{item}</>;\n }\n\n return (\n <>\n {before}\n <span data-test-id=\"cf-multiselect-item-match\">{match}</span>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getMenuItemStyles } from '@contentful/f36-core';\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 display: 'inline-block',\n width: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionWithClearButton: css({\n paddingRight: '40px',\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 clearSelectionButton: css({\n marginLeft: '-80px',\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 }),\n optionText: css({\n alignItems: 'center',\n display: 'flex',\n span: {\n color: tokens.gray900,\n fontWeight: tokens.fontWeightDemiBold,\n },\n }),\n optionCheck: ({\n isActive,\n isDisabled,\n }: {\n isActive?: boolean;\n isDisabled?: boolean;\n }) =>\n css({\n label: cx(\n getMenuItemStyles({ isActive, isDisabled }),\n css({\n width: '100%',\n }),\n ),\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps, Flex } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { ChevronDownIcon, CloseIcon } 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';\nimport { Tooltip } from '@contentful/f36-tooltip';\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 * Function called when the clear all button is clicked\n * If no function is provided the clear button is not shown\n */\n onClearSelection?: () => 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 onClearSelection,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const showClearButton =\n currentSelection.length > 1 && typeof onClearSelection === 'function';\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 handleClearSelection = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClearSelection?.();\n e.stopPropagation();\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n const currentSelectionClassName = cx(\n styles.currentSelection,\n showClearButton && styles.currentSelectionWithClearButton,\n );\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n showClearButton,\n styles.currentSelection,\n styles.currentSelectionAddition,\n styles.currentSelectionWithClearButton,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Flex alignItems=\"center\">\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 {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content=\"Clear selection\"\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label=\"Clear selection\"\n size=\"small\"\n />\n </Tooltip>\n </div>\n )}\n </Flex>\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<\n MultiselectOptionProps,\n 'children' | 'value' | 'itemId' | 'label'\n > {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { HighlightedItem, MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n HighlightedItem: typeof HighlightedItem;\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.HighlightedItem = HighlightedItem;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
package/dist/index.d.mts CHANGED
@@ -2,8 +2,19 @@ import React from 'react';
2
2
  import { CommonProps } from '@contentful/f36-core';
3
3
  import { PopoverProps } from '@contentful/f36-popover';
4
4
 
5
- interface MultiselectOptionProps {
5
+ declare type LabelOrChildren = {
6
+ /**
7
+ * When using React children it is your own responsibility to highlight
8
+ * the matching part of the item label. Use the `HighlightedItem`
9
+ * component for this.
10
+ */
11
+ children: React.ReactNode;
12
+ label?: never;
13
+ } | {
14
+ children?: never;
6
15
  label: string;
16
+ };
17
+ declare type MultiselectOptionProps = {
7
18
  value: string;
8
19
  itemId: string;
9
20
  searchValue?: string;
@@ -11,8 +22,15 @@ interface MultiselectOptionProps {
11
22
  onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;
12
23
  isChecked?: boolean;
13
24
  isDisabled?: boolean;
25
+ } & LabelOrChildren;
26
+ declare const MultiselectOption: ({ children, label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
27
+ declare function HighlightedItem({ item, inputValue, }: {
28
+ item: string;
29
+ inputValue?: string;
30
+ }): JSX.Element;
31
+ declare namespace HighlightedItem {
32
+ var displayName: string;
14
33
  }
15
- declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
16
34
 
17
35
  interface MultiselectSearchProps {
18
36
  /**
@@ -135,13 +153,14 @@ interface MultiselectProps extends CommonProps {
135
153
  */
136
154
  declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
137
155
 
138
- interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {
156
+ interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'children' | 'value' | 'itemId' | 'label'> {
139
157
  label?: string;
140
158
  itemId?: string;
141
159
  }
142
160
  declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
143
161
 
144
162
  declare type CompoundMultiselect = typeof Multiselect$1 & {
163
+ HighlightedItem: typeof HighlightedItem;
145
164
  Option: typeof MultiselectOption;
146
165
  SelectAll: typeof SelectAllOption;
147
166
  };
package/dist/index.d.ts CHANGED
@@ -2,8 +2,19 @@ import React from 'react';
2
2
  import { CommonProps } from '@contentful/f36-core';
3
3
  import { PopoverProps } from '@contentful/f36-popover';
4
4
 
5
- interface MultiselectOptionProps {
5
+ declare type LabelOrChildren = {
6
+ /**
7
+ * When using React children it is your own responsibility to highlight
8
+ * the matching part of the item label. Use the `HighlightedItem`
9
+ * component for this.
10
+ */
11
+ children: React.ReactNode;
12
+ label?: never;
13
+ } | {
14
+ children?: never;
6
15
  label: string;
16
+ };
17
+ declare type MultiselectOptionProps = {
7
18
  value: string;
8
19
  itemId: string;
9
20
  searchValue?: string;
@@ -11,8 +22,15 @@ interface MultiselectOptionProps {
11
22
  onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;
12
23
  isChecked?: boolean;
13
24
  isDisabled?: boolean;
25
+ } & LabelOrChildren;
26
+ declare const MultiselectOption: ({ children, label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
27
+ declare function HighlightedItem({ item, inputValue, }: {
28
+ item: string;
29
+ inputValue?: string;
30
+ }): JSX.Element;
31
+ declare namespace HighlightedItem {
32
+ var displayName: string;
14
33
  }
15
- declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, className, ...rest }: MultiselectOptionProps) => JSX.Element;
16
34
 
17
35
  interface MultiselectSearchProps {
18
36
  /**
@@ -135,13 +153,14 @@ interface MultiselectProps extends CommonProps {
135
153
  */
136
154
  declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
137
155
 
138
- interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {
156
+ interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'children' | 'value' | 'itemId' | 'label'> {
139
157
  label?: string;
140
158
  itemId?: string;
141
159
  }
142
160
  declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
143
161
 
144
162
  declare type CompoundMultiselect = typeof Multiselect$1 & {
163
+ HighlightedItem: typeof HighlightedItem;
145
164
  Option: typeof MultiselectOption;
146
165
  SelectAll: typeof SelectAllOption;
147
166
  };
package/dist/index.js CHANGED
@@ -5,25 +5,25 @@ var f36Forms = require('@contentful/f36-forms');
5
5
  var f36Typography = require('@contentful/f36-typography');
6
6
  var emotion = require('emotion');
7
7
  var r = require('@contentful/f36-tokens');
8
- var f36Utils = require('@contentful/f36-utils');
9
8
  var f36Core = require('@contentful/f36-core');
9
+ var f36Utils = require('@contentful/f36-utils');
10
10
  var f36Button = require('@contentful/f36-button');
11
11
  var f36Icons = require('@contentful/f36-icons');
12
12
  var f36Skeleton = require('@contentful/f36-skeleton');
13
13
  var f36Popover = require('@contentful/f36-popover');
14
14
  var f36Tooltip = require('@contentful/f36-tooltip');
15
- var Be = require('react-focus-lock');
15
+ var Ae = require('react-focus-lock');
16
16
 
17
17
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
18
18
 
19
19
  var l__default = /*#__PURE__*/_interopDefault(l);
20
20
  var r__default = /*#__PURE__*/_interopDefault(r);
21
- var Be__default = /*#__PURE__*/_interopDefault(Be);
21
+ var Ae__default = /*#__PURE__*/_interopDefault(Ae);
22
22
 
23
- var pe=Object.defineProperty,ue=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var V=(e,o,t)=>o in e?pe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,y=(e,o)=>{for(var t in o||(o={}))j.call(o,t)&&V(e,t,o[t]);if(O)for(var t of O(o))U.call(o,t)&&V(e,t,o[t]);return e},T=(e,o)=>ue(e,me(o));var w=(e,o)=>{var t={};for(var n in e)j.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&O)for(var n of O(e))o.indexOf(n)<0&&U.call(e,n)&&(t[n]=e[n]);return t};var S=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),triggerButton:emotion.css({justifyContent:"space-between"}),currentSelection:emotion.css({display:"inline-block",width:"100%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r__default.default.spacing2Xs}),currentSelectionWithClearButton:emotion.css({paddingRight:"40px"}),currentSelectionAddition:emotion.css({color:r__default.default.gray600}),searchBar:emotion.css({paddingTop:r__default.default.spacing2Xs,position:"sticky",top:"0px",zIndex:r__default.default.zIndexWorkbenchHeader,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,textAlign:"center"}),clearSelectionButton:emotion.css({marginLeft:"-80px"}),selectAll:emotion.css({borderBottom:`1px solid ${r__default.default.gray200}`,marginBottom:r__default.default.spacing2Xs,paddingBottom:r__default.default.spacing2Xs,"label > *":{fontWeight:r__default.default.fontWeightMedium}}),option:emotion.css({listStyleType:"none",margin:"1px 0"}),optionText:emotion.css({color:r__default.default.gray700,b:{color:r__default.default.gray900}}),optionCheck: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 M=b=>{var f=b,{label:e,value:o,itemId:t,onSelectItem:n,searchValue:s,isChecked:c=!1,isDisabled:v=!1,className:p}=f,g=w(f,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let m=S();return l__default.default.createElement("li",y({className:emotion.cx(m.option,p)},g),l__default.default.createElement(f36Forms.Checkbox,{id:t,value:o,onChange:d=>n(d),isChecked:c,isDisabled:v,className:emotion.cx(m.optionCheck,v&&m.disabled)},l__default.default.createElement(f36Typography.Text,{className:m.optionText,"data-test-id":`cf-multiselect-list-item-${t}`},l__default.default.createElement(q,{item:e,inputValue:s}))))};function q({item:e,inputValue:o=""}){let{before:t,match:n,after:s}=f36Utils.getStringMatch(e,o.trim());return t.length+n.length+s.length===0?l__default.default.createElement(l__default.default.Fragment,null,e):l__default.default.createElement(l__default.default.Fragment,null,t,l__default.default.createElement("b",{"data-test-id":"cf-multiselect-item-match"},n),s)}q.displayName="HighlightedItem";var J=({searchValue:e,setSearchValue:o,onSearchValueChange:t,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:v="Search",focusList:p})=>{let g=S(),b=l.useRef(null),f=l.useCallback(d=>{o(d.target.value),t==null||t(d);},[t,o]),m=l.useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(b.current,"");let C=new Event("change",{bubbles:!0});b.current.dispatchEvent(C);},[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:v,onChange:f,ref:f36Core.mergeRefs(s,b),name:n,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:m,isDisabled:!e,size:"small"}))};var Y=(e,o,t)=>l__default.default.Children.map(e,n=>{if(!l__default.default.isValidElement(n))return n;if(o(n))return t(n);let s=Y(n.props.children,o,t);return l__default.default.cloneElement(n,{children:s})}),Z=(e,o)=>{let t=0;return l__default.default.Children.forEach(e,n=>{l__default.default.isValidElement(n)&&(o(n)?t+=1:t+=Z(n.props.children,o));}),t};function He(e,o){let{className:t,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:v,isLoading:p=!1,testId:g="cf-multiselect",noMatchesMessage:b="No matches found",searchProps:f={},popoverProps:m={},children:d,onBlur:C,onClearSelection:P}=e,{listMaxHeight:te=180,listRef:oe,onClose:A}=m,a=S(),[N,ne]=l.useState(""),[W,X]=l.useState(!1),D=l.useRef(null),E=c.length>1&&typeof P=="function",$=typeof e.onSearchValueChange=="function"||typeof f.onSearchValueChange=="function",re=Object.keys(f).length>0?f:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},L=l.useCallback(()=>{var u;(u=D.current)==null||u.focus();},[]),le=u=>{P==null||P(),u.stopPropagation();},ie=l.useCallback(()=>{if(c.length===0)return l__default.default.createElement(l__default.default.Fragment,null,s);let u=c.length-1,x=emotion.cx(a.currentSelection,E&&a.currentSelectionWithClearButton);return u===0?l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:x},c[0]):l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:x},c[0]," ",l__default.default.createElement("span",{className:a.currentSelectionAddition},"and ",u," more"))},[c,s,E,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),z=l.useMemo(()=>Z(d,u=>u.type===M),[d]),se=l__default.default.useCallback(u=>Y(u,x=>x.type===M,x=>{let ae=ce=>{var F;L(),(F=x.props)==null||F.onSelectItem(ce);};return l__default.default.cloneElement(x,{searchValue:N,onSelectItem:ae})}),[N,L]);return l__default.default.createElement("div",{"data-test-id":g,className:emotion.cx(a.multiselect,t),ref:o},l__default.default.createElement(f36Popover.Popover,T(y({renderOnlyWhenOpen:!1,isFullWidth:!0},m),{isOpen:W,onClose:()=>{X(!1),A&&A();}}),l__default.default.createElement(f36Core.Flex,{alignItems:"center"},l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>X(!W),startIcon:n,endIcon:l__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},ie())),E&&l__default.default.createElement("div",{className:a.clearSelectionButton},l__default.default.createElement(f36Tooltip.Tooltip,{content:"Clear selection",showDelay:800,placement:"top",as:"div"},l__default.default.createElement(f36Button.IconButton,{onClick:le,icon:l__default.default.createElement(f36Icons.CloseIcon,null),"aria-label":"Clear selection",size:"small"})))),l__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(oe,D),className:emotion.cx(a.content(te),m.className,a.container),testId:"cf-multiselect-container",onBlur:()=>C==null?void 0:C()},l__default.default.createElement(Be__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},$&&l__default.default.createElement(J,T(y({},re),{setSearchValue:ne,searchValue:N,focusList:L})),p&&l__default.default.createElement(Ae,null),!p&&z>0&&l__default.default.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?se(d):d),!p&&z===0&&l__default.default.createElement(f36Typography.Subheading,{className:a.noMatchesTitle},b)))))}var Ae=()=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),ee=l__default.default.forwardRef(He);var B=v=>{var p=v,{label:e,itemId:o="SelectAll",onSelectItem:t,isChecked:n=!1,className:s}=p,c=w(p,["label","itemId","onSelectItem","isChecked","className"]);let g=S();return l__default.default.createElement(M,y({value:"all",label:e||n?"Deselect all":"Select all",itemId:o,onSelectItem:t,isChecked:n,className:emotion.cx(g.selectAll,s)},c))};var H=ee;H.Option=M;H.SelectAll=B;
23
+ var ce=Object.defineProperty,pe=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var j=(e,t,o)=>t in e?ce(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))U.call(t,o)&&j(e,o,t[o]);if(O)for(var o of O(t))_.call(t,o)&&j(e,o,t[o]);return e},H=(e,t)=>pe(e,me(t));var N=(e,t)=>{var o={};for(var n in e)U.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&O)for(var n of O(e))t.indexOf(n)<0&&_.call(e,n)&&(o[n]=e[n]);return o};var S=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),triggerButton:emotion.css({justifyContent:"space-between"}),currentSelection:emotion.css({display:"inline-block",width:"100%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r__default.default.spacing2Xs}),currentSelectionWithClearButton:emotion.css({paddingRight:"40px"}),currentSelectionAddition:emotion.css({color:r__default.default.gray600}),searchBar:emotion.css({paddingTop:r__default.default.spacing2Xs,position:"sticky",top:"0px",zIndex:r__default.default.zIndexWorkbenchHeader,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,textAlign:"center"}),clearSelectionButton:emotion.css({marginLeft:"-80px"}),selectAll:emotion.css({borderBottom:`1px solid ${r__default.default.gray200}`,marginBottom:r__default.default.spacing2Xs,paddingBottom:r__default.default.spacing2Xs,"label > *":{fontWeight:r__default.default.fontWeightMedium}}),option:emotion.css({listStyleType:"none"}),optionText:emotion.css({alignItems:"center",display:"flex",span:{color:r__default.default.gray900,fontWeight:r__default.default.fontWeightDemiBold}}),optionCheck:({isActive:e,isDisabled:t})=>emotion.css({label:emotion.cx(f36Core.getMenuItemStyles({isActive:e,isDisabled:t}),emotion.css({width:"100%"}))})});var M=y=>{var f=y,{children:e,label:t,value:o,itemId:n,onSelectItem:s,searchValue:c,isChecked:v=!1,isDisabled:p=!1,className:d}=f,g=N(f,["children","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let m=S();return l__default.default.createElement("li",b({className:emotion.cx(m.option,d)},g),l__default.default.createElement(f36Forms.Checkbox,{id:n,value:o,onChange:x=>s(x),isChecked:v,isDisabled:p,className:m.optionCheck({isActive:v,isDisabled:p})},l__default.default.createElement(f36Typography.Text,{className:m.optionText,"data-test-id":`cf-multiselect-list-item-${n}`},typeof t=="string"?l__default.default.createElement(L,{item:t,inputValue:c}):e)))};function L({item:e,inputValue:t=""}){let{before:o,match:n,after:s}=f36Utils.getStringMatch(e,t.trim());return o.length+n.length+s.length===0?l__default.default.createElement(l__default.default.Fragment,null,e):l__default.default.createElement(l__default.default.Fragment,null,o,l__default.default.createElement("span",{"data-test-id":"cf-multiselect-item-match"},n),s)}L.displayName="HighlightedItem";var G=({searchValue:e,setSearchValue:t,onSearchValueChange:o,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:v="Search",focusList:p})=>{let d=S(),g=l.useRef(null),y=l.useCallback(m=>{t(m.target.value),o==null||o(m);},[o,t]),f=l.useCallback(()=>{if(!e)return;p(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(g.current,"");let x=new Event("change",{bubbles:!0});g.current.dispatchEvent(x);},[e,p]);return l__default.default.createElement("div",{className:d.searchBar},l__default.default.createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:e,className:d.inputField,testId:"cf-multiselect-search",placeholder:v,onChange:y,ref:f36Core.mergeRefs(s,g),name:n,size:"small"}),l__default.default.createElement(f36Button.IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:d.toggleButton,variant:"transparent",icon:e?l__default.default.createElement(f36Icons.CloseIcon,{variant:"muted"}):l__default.default.createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:f,isDisabled:!e,size:"small"}))};var Q=(e,t,o)=>l__default.default.Children.map(e,n=>{if(!l__default.default.isValidElement(n))return n;if(t(n))return o(n);let s=Q(n.props.children,t,o);return l__default.default.cloneElement(n,{children:s})}),Y=(e,t)=>{let o=0;return l__default.default.Children.forEach(e,n=>{l__default.default.isValidElement(n)&&(t(n)?o+=1:o+=Y(n.props.children,t));}),o};function We(e,t){let{className:o,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:v,isLoading:p=!1,testId:d="cf-multiselect",noMatchesMessage:g="No matches found",searchProps:y={},popoverProps:f={},children:m,onBlur:x,onClearSelection:P}=e,{listMaxHeight:ee=180,listRef:te,onClose:W}=f,a=S(),[T,oe]=l.useState(""),[D,X]=l.useState(!1),F=l.useRef(null),R=c.length>1&&typeof P=="function",$=typeof e.onSearchValueChange=="function"||typeof y.onSearchValueChange=="function",ne=Object.keys(y).length>0?y:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},B=l.useCallback(()=>{var u;(u=F.current)==null||u.focus();},[]),le=u=>{P==null||P(),u.stopPropagation();},re=l.useCallback(()=>{if(c.length===0)return l__default.default.createElement(l__default.default.Fragment,null,s);let u=c.length-1,I=emotion.cx(a.currentSelection,R&&a.currentSelectionWithClearButton);return u===0?l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:I},c[0]):l__default.default.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:I},c[0]," ",l__default.default.createElement("span",{className:a.currentSelectionAddition},"and ",u," more"))},[c,s,R,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),V=l.useMemo(()=>Y(m,u=>u.type===M),[m]),ie=l__default.default.useCallback(u=>Q(u,I=>I.type===M,I=>{let se=ae=>{var z;B(),(z=I.props)==null||z.onSelectItem(ae);};return l__default.default.cloneElement(I,{searchValue:T,onSelectItem:se})}),[T,B]);return l__default.default.createElement("div",{"data-test-id":d,className:emotion.cx(a.multiselect,o),ref:t},l__default.default.createElement(f36Popover.Popover,H(b({renderOnlyWhenOpen:!1,isFullWidth:!0},f),{isOpen:D,onClose:()=>{X(!1),W&&W();}}),l__default.default.createElement(f36Core.Flex,{alignItems:"center"},l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>X(!D),startIcon:n,endIcon:l__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},re())),R&&l__default.default.createElement("div",{className:a.clearSelectionButton},l__default.default.createElement(f36Tooltip.Tooltip,{content:"Clear selection",showDelay:800,placement:"top",as:"div"},l__default.default.createElement(f36Button.IconButton,{onClick:le,icon:l__default.default.createElement(f36Icons.CloseIcon,null),"aria-label":"Clear selection",size:"small"})))),l__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(te,F),className:emotion.cx(a.content(ee),f.className,a.container),testId:"cf-multiselect-container",onBlur:()=>x==null?void 0:x()},l__default.default.createElement(Ae__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},$&&l__default.default.createElement(G,H(b({},ne),{setSearchValue:oe,searchValue:T,focusList:B})),p&&l__default.default.createElement(De,null),!p&&V>0&&l__default.default.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?ie(m):m),!p&&V===0&&l__default.default.createElement(f36Typography.Subheading,{className:a.noMatchesTitle},g)))))}var De=()=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),Z=l__default.default.forwardRef(We);var A=v=>{var p=v,{label:e,itemId:t="SelectAll",onSelectItem:o,isChecked:n=!1,className:s}=p,c=N(p,["label","itemId","onSelectItem","isChecked","className"]);let d=S();return l__default.default.createElement(M,b({value:"all",label:e||n?"Deselect all":"Select all",itemId:t,onSelectItem:o,isChecked:n,className:emotion.cx(d.selectAll,s)},c))};var E=Z;E.HighlightedItem=L;E.Option=M;E.SelectAll=A;
24
24
 
25
- exports.Multiselect = H;
25
+ exports.Multiselect = E;
26
26
  exports.MultiselectOption = M;
27
- exports.SelectAllOption = B;
27
+ exports.SelectAllOption = A;
28
28
  //# sourceMappingURL=out.js.map
29
29
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/MultiselectSearch.tsx","../src/SelectAllOption.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Flex","Button","IconButton","ChevronDownIcon","CloseIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","Tooltip","FocusLock","TextInput","SearchIcon","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","onClearSelection","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","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.trim());\n\n if (before.length + match.length + after.length === 0) {\n return <>{item}</>;\n }\n\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 display: 'inline-block',\n width: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionWithClearButton: css({\n paddingRight: '40px',\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 clearSelectionButton: css({\n marginLeft: '-80px',\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, Flex } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { ChevronDownIcon, CloseIcon } 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';\nimport { Tooltip } from '@contentful/f36-tooltip';\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 * Function called when the clear all button is clicked\n * If no function is provided the clear button is not shown\n */\n onClearSelection?: () => 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 onClearSelection,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const showClearButton =\n currentSelection.length > 1 && typeof onClearSelection === 'function';\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 handleClearSelection = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClearSelection?.();\n e.stopPropagation();\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n const currentSelectionClassName = cx(\n styles.currentSelection,\n showClearButton && styles.currentSelectionWithClearButton,\n );\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n showClearButton,\n styles.currentSelection,\n styles.currentSelectionAddition,\n styles.currentSelectionWithClearButton,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Flex alignItems=\"center\">\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 {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content=\"Clear selection\"\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label=\"Clear selection\"\n size=\"small\"\n />\n </Tooltip>\n </div>\n )}\n </Flex>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(\n styles.content(listMaxHeight),\n popoverProps.className,\n styles.container,\n )}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <FocusLock focusOptions={{ preventScroll: true }} returnFocus={true}>\n {hasSearch && (\n <MultiselectSearch\n {...handoverSearchProps}\n setSearchValue={setSearchValue}\n searchValue={searchValue}\n focusList={focusList}\n />\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && optionsLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && optionsLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </FocusLock>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/**\n * The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React, { useCallback, useRef } from 'react';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, SearchIcon } from '@contentful/f36-icons';\nimport { IconButton } from '@contentful/f36-button';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { mergeRefs } from '@contentful/f36-core';\n\nexport interface MultiselectSearchProps {\n /**\n * Function called whenever the search input value changes\n */\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void | undefined;\n\n /**\n * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n searchPlaceholder?: string;\n\n /**\n * Pass a form name to the search text input\n */\n searchInputName?: string;\n\n /**\n * Use this prop to get a ref to the search input element of the component\n */\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /**\n * Use this prop to get a ref to the reset search button of the component\n */\n resetSearchRef?: React.Ref<HTMLButtonElement>;\n\n /**\n * State from the parent component\n */\n searchValue?: string;\n\n /**\n * State setter of the parent\n */\n setSearchValue?: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * List helper function\n */\n focusList?: () => void;\n}\n\nexport const MultiselectSearch = ({\n searchValue,\n setSearchValue,\n onSearchValueChange,\n searchInputName,\n searchInputRef,\n resetSearchRef,\n searchPlaceholder = 'Search',\n focusList,\n}: MultiselectSearchProps) => {\n const styles = getMultiselectStyles();\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n return (\n <div className={styles.searchBar}>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n ref={resetSearchRef}\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </div>\n );\n};\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
1
+ {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/MultiselectSearch.tsx","../src/SelectAllOption.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","cx","tokens","getMenuItemStyles","getMultiselectStyles","listMaxHeight","isActive","isDisabled","getStringMatch","MultiselectOption","_a","_b","children","label","value","itemId","onSelectItem","searchValue","isChecked","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Flex","Button","IconButton","ChevronDownIcon","CloseIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","Tooltip","FocusLock","TextInput","SearchIcon","MultiselectSearch","setSearchValue","onSearchValueChange","searchInputName","searchInputRef","resetSearchRef","searchPlaceholder","focusList","internalSearchInputRef","handleSearchChange","resetSearchInput","forcedEvent","iterateOverChildren","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","toggleRef","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","onClearSelection","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"qlBAAA,OAAOA,MAAW,QAClB,OAAS,YAAAC,OAAgB,wBACzB,OAAS,QAAAC,OAAY,6BCFrB,OAAS,OAAAC,EAAK,MAAAC,OAAU,UACxB,OAAOC,MAAY,yBACnB,OAAS,qBAAAC,OAAyB,uBAE3B,IAAMC,EAAuB,KAAO,CACzC,YAAaJ,EAAI,CACf,SAAU,WACV,MAAO,MACT,CAAC,EACD,cAAeA,EAAI,CACjB,eAAgB,eAClB,CAAC,EACD,iBAAkBA,EAAI,CACpB,QAAS,eACT,MAAO,OACP,WAAY,SACZ,aAAc,WACd,SAAU,SACV,cAAe,SACf,YAAaE,EAAO,UACtB,CAAC,EACD,gCAAiCF,EAAI,CACnC,aAAc,MAChB,CAAC,EACD,yBAA0BA,EAAI,CAC5B,MAAOE,EAAO,OAChB,CAAC,EACD,UAAWF,EAAI,CACb,WAAYE,EAAO,WACnB,SAAU,SACV,IAAK,MACL,OAAQA,EAAO,sBACf,gBAAiBA,EAAO,UAC1B,CAAC,EACD,WAAYF,EAAI,CACd,QAAS,OAAOE,EAAO,SAAS,SAASA,EAAO,SAAS,GACzD,aAAc,WACd,WAAY,SACZ,OAAQ,OACR,aAAc,MACd,aAAc,aAAaA,EAAO,OAAO,GACzC,UAAW,OACX,oCAAqC,CACnC,UAAW,OACX,aAAc,aAAaA,EAAO,OAAO,EAC3C,CACF,CAAC,EACD,aAAcF,EAAI,CAChB,SAAU,WACV,IAAK,MACL,MAAO,MACP,OAAQE,EAAO,cACf,QAASA,EAAO,WAChB,OAAQA,EAAO,SACjB,CAAC,EACD,QAAUG,GACRL,EAAI,CACF,SAAU,OACV,UAAW,GAAGK,CAAa,IAC7B,CAAC,EACH,UAAWL,EAAI,CAAC,CAAC,EACjB,KAAMA,EAAI,CACR,UAAW,OACX,QAAS,GAAGE,EAAO,UAAU,GAC7B,OAAQ,CACV,CAAC,EACD,WAAYF,EAAI,CAEd,QAAS,OAAOE,EAAO,SAAS,GAChC,WAAYA,EAAO,WACrB,CAAC,EACD,eAAgBF,EAAI,CAClB,MAAOE,EAAO,QACd,OAAQA,EAAO,SACf,UAAW,QACb,CAAC,EACD,qBAAsBF,EAAI,CACxB,WAAY,OACd,CAAC,EACD,UAAWA,EAAI,CACb,aAAc,aAAaE,EAAO,OAAO,GACzC,aAAcA,EAAO,WACrB,cAAeA,EAAO,WACtB,YAAa,CACX,WAAYA,EAAO,gBACrB,CACF,CAAC,EACD,OAAQF,EAAI,CACV,cAAe,MACjB,CAAC,EACD,WAAYA,EAAI,CACd,WAAY,SACZ,QAAS,OACT,KAAM,CACJ,MAAOE,EAAO,QACd,WAAYA,EAAO,kBACrB,CACF,CAAC,EACD,YAAa,CAAC,CACZ,SAAAI,EACA,WAAAC,CACF,IAIEP,EAAI,CACF,MAAOC,GACLE,GAAkB,CAAE,SAAAG,EAAU,WAAAC,CAAW,CAAC,EAC1CP,EAAI,CACF,MAAO,MACT,CAAC,CACH,CACF,CAAC,CACL,GD7GA,OAAS,kBAAAQ,OAAsB,wBAC/B,OAAS,MAAAP,OAAU,UA2BZ,IAAMQ,EAAqBC,GAWJ,CAXI,IAAAC,EAAAD,EAChC,UAAAE,EACA,MAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAX,EAAa,GACb,UAAAY,CAzCF,EAgCkCR,EAU7BS,EAAAC,EAV6BV,EAU7B,CATH,WACA,QACA,QACA,SACA,eACA,cACA,YACA,aACA,cAGA,IAAMW,EAASlB,EAAqB,EAEpC,OACEP,EAAA,cAAC,KAAA0B,EAAA,CAAG,UAAWtB,GAAGqB,EAAO,OAAQH,CAAS,GAAOC,GAC/CvB,EAAA,cAACC,GAAA,CACC,GAAIiB,EACJ,MAAOD,EACP,SAAWU,GAAUR,EAAaQ,CAAK,EACvC,UAAWN,EACX,WAAYX,EACZ,UAAWe,EAAO,YAAY,CAAE,SAAUJ,EAAW,WAAAX,CAAW,CAAC,GAEjEV,EAAA,cAACE,GAAA,CACC,UAAWuB,EAAO,WAClB,eAAc,4BAA4BP,CAAM,IAE/C,OAAOF,GAAU,SAChBhB,EAAA,cAAC4B,EAAA,CAAgB,KAAMZ,EAAO,WAAYI,EAAa,EAEvDL,CAEJ,CACF,CACF,CAEJ,EAEO,SAASa,EAAgB,CAC9B,KAAAC,EACA,WAAAC,EAAa,EACf,EAGG,CACD,GAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,CAAM,EAAItB,GAAekB,EAAMC,EAAW,KAAK,CAAC,EAEvE,OAAIC,EAAO,OAASC,EAAM,OAASC,EAAM,SAAW,EAC3CjC,EAAA,cAAAA,EAAA,cAAG6B,CAAK,EAIf7B,EAAA,cAAAA,EAAA,cACG+B,EACD/B,EAAA,cAAC,QAAK,eAAa,6BAA6BgC,CAAM,EACrDC,CACH,CAEJ,CAEAL,EAAgB,YAAc,kBE7F9B,OAAO5B,GAAS,UAAAkC,GAAQ,YAAAC,EAAU,eAAAC,EAAa,WAAAC,OAAe,QAC9D,OAAS,MAAAjC,MAAU,UAEnB,OAAS,aAAAkC,GAA6B,QAAAC,OAAY,uBAClD,OAAS,UAAAC,GAAQ,cAAAC,OAAkB,yBACnC,OAAS,mBAAAC,GAAiB,aAAAC,OAAiB,wBAE3C,OAAS,qBAAAC,GAAmB,oBAAAC,OAAwB,2BACpD,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,cAAAC,OAAkB,6BAC3B,OAAS,WAAAC,OAAe,0BAIxB,OAAOC,OAAe,mBCdtB,OAAOjD,GAAS,eAAAoC,EAAa,UAAAF,OAAc,QAC3C,OAAS,aAAAgB,OAAiB,wBAC1B,OAAS,aAAAP,GAAW,cAAAQ,OAAkB,wBACtC,OAAS,cAAAV,OAAkB,yBAE3B,OAAS,aAAAH,OAAiB,uBA+CnB,IAAMc,EAAoB,CAAC,CAChC,YAAAhC,EACA,eAAAiC,EACA,oBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EAAoB,SACpB,UAAAC,CACF,IAA8B,CAC5B,IAAMlC,EAASlB,EAAqB,EAC9BqD,EAAyB1B,GAAyB,IAAI,EAEtD2B,EAAqBzB,EACxBT,GAAU,CACT0B,EAAe1B,EAAM,OAAO,KAAK,EACjC2B,GAAA,MAAAA,EAAsB3B,EACxB,EACA,CAAC2B,EAAqBD,CAAc,CACtC,EAEMS,EAAmB1B,EAAY,IAAM,CACzC,GAAI,CAAChB,EAAa,OAClBuC,EAAU,EAGqB,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,EAAE,IACqB,KAAKC,EAAuB,QAAS,EAAE,EAC9D,IAAMG,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EACzDH,EAAuB,QAAQ,cAAcG,CAAW,CAC1D,EAAG,CAAC3C,EAAauC,CAAS,CAAC,EAE3B,OACE3D,EAAA,cAAC,OAAI,UAAWyB,EAAO,WACrBzB,EAAA,cAACkD,GAAA,CACC,aAAW,SACX,KAAK,OACL,MAAO9B,EACP,UAAWK,EAAO,WAClB,OAAO,wBACP,YAAaiC,EACb,SAAUG,EACV,IAAKvB,GAAUkB,EAAgBI,CAAsB,EACrD,KAAML,EACN,KAAK,QACP,EACAvD,EAAA,cAACyC,GAAA,CACC,IAAKgB,EACL,aAAYrC,EAAc,eAAiB,SAC3C,UAAWK,EAAO,aAClB,QAAQ,cACR,KACEL,EACEpB,EAAA,cAAC2C,GAAA,CAAU,QAAQ,QAAQ,EAE3B3C,EAAA,cAACmD,GAAA,CAAW,QAAQ,QAAQ,EAGhC,QAASW,EACT,WAAY,CAAC1C,EACb,KAAK,QACP,CACF,CAEJ,EDDA,IAAM4C,EAAsB,CAC1BjD,EACAkD,EACAC,IAEOlE,EAAM,SAAS,IAAIe,EAAWoD,GAAU,CAE7C,GAAI,CAACnE,EAAM,eAAemE,CAAK,EAAG,OAAOA,EACzC,GAAIF,EAAOE,CAAK,EACd,OAAOD,EAASC,CAAK,EAEvB,IAAMC,EAAgBJ,EACpBG,EAAM,MAAM,SACZF,EACAC,CACF,EACA,OAAOlE,EAAM,aAAamE,EAAO,CAAE,SAAUC,CAAc,CAAY,CACzE,CAAC,EAIGC,EAAwB,CAC5BtD,EACAkD,IACW,CACX,IAAIK,EAAU,EACd,OAAAtE,EAAM,SAAS,QAAQe,EAAWoD,GAAU,CAErCnE,EAAM,eAAemE,CAAK,IAC1BF,EAAOE,CAAK,EAGfG,GAAW,EAFXA,GAAWD,EAAsBF,EAAM,MAAM,SAAUF,CAAM,EAIjE,CAAC,EACMK,CACT,EAEA,SAASC,GAAaC,EAAyBC,EAAgC,CAC7E,GAAM,CACJ,UAAAnD,EACA,UAAAoD,EACA,YAAAC,EAAc,2BACd,iBAAAC,EAAmB,CAAC,EACpB,UAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EAAS,iBACT,iBAAAC,EAAmB,mBACnB,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,SAAAnE,EACA,OAAAoE,EACA,iBAAAC,CACF,EAAIZ,EAEE,CAAE,cAAAhE,GAAgB,IAAK,QAAA6E,GAAS,QAAAC,CAAQ,EAAIJ,EAE5CzD,EAASlB,EAAqB,EAE9B,CAACa,EAAaiC,EAAc,EAAIlB,EAAS,EAAE,EAC3C,CAACoD,EAAQC,CAAS,EAAIrD,EAAS,EAAK,EAEpCsD,EAAkBvD,GAAyB,IAAI,EAE/CwD,EACJd,EAAiB,OAAS,GAAK,OAAOQ,GAAqB,WAEvDO,EACJ,OAAOnB,EAAM,qBAAwB,YACrC,OAAOS,EAAY,qBAAwB,WAEvCW,GACJ,OAAO,KAAKX,CAAW,EAAE,OAAS,EAC9BA,EACA,CACE,oBAAqBT,EAAM,oBAC3B,kBAAmBA,EAAM,kBACzB,gBAAiBA,EAAM,gBACvB,eAAgBA,EAAM,cACxB,EAEAb,EAAYvB,EAAY,IAAM,CAvMtC,IAAAvB,GA4MIA,EAAA4E,EAAgB,UAAhB,MAAA5E,EAAyB,OAC3B,EAAG,CAAC,CAAC,EAECgF,GAAwBC,GAA2C,CACvEV,GAAA,MAAAA,IACAU,EAAE,gBAAgB,CACpB,EAEMC,GAAyB3D,EAAY,IAAM,CAC/C,GAAIwC,EAAiB,SAAW,EAC9B,OAAO5E,EAAA,cAAAA,EAAA,cAAG2E,CAAY,EAExB,IAAMqB,EAAgBpB,EAAiB,OAAS,EAC1CqB,EAA4B7F,EAChCqB,EAAO,iBACPiE,GAAmBjE,EAAO,+BAC5B,EACA,OAAIuE,IAAkB,EAElBhG,EAAA,cAAC,QACC,eAAa,mCACb,UAAWiG,GAEVrB,EAAiB,CAAC,CACrB,EAIF5E,EAAA,cAAC,QACC,eAAa,mCACb,UAAWiG,GAEVrB,EAAiB,CAAC,EAAG,IACtB5E,EAAA,cAAC,QAAK,UAAWyB,EAAO,0BAA0B,OAC3CuE,EAAc,OACrB,CACF,CAEJ,EAAG,CACDpB,EACAD,EACAe,EACAjE,EAAO,iBACPA,EAAO,yBACPA,EAAO,+BACT,CAAC,EAEKyE,EAAgB7D,GACpB,IACEgC,EACEtD,EACCoD,GAAUA,EAAM,OAASvD,CAC5B,EACF,CAACG,CAAQ,CACX,EAGMoF,GAAgBnG,EAAM,YACzBe,GACQiD,EACLjD,EACCoD,GAAUA,EAAM,OAASvD,EACzBuD,GAAU,CACT,IAAMhD,GAAgBQ,IAA+C,CA3Q/E,IAAAd,EA4QY8C,EAAU,GACV9C,EAAAsD,EAAM,QAAN,MAAAtD,EAAa,aAAac,GAC5B,EACA,OAAO3B,EAAM,aAAamE,EAAO,CAC/B,YAAA/C,EACA,aAAAD,EACF,CAAoC,CACtC,CACF,EAEF,CAACC,EAAauC,CAAS,CACzB,EAEA,OACE3D,EAAA,cAAC,OACC,eAAc+E,EACd,UAAW3E,EAAGqB,EAAO,YAAaH,CAAS,EAC3C,IAAKmD,GAELzE,EAAA,cAAC8C,EAAAsD,EAAA1E,EAAA,CACC,mBAAoB,GACpB,YAAW,IACPwD,GAHL,CAKC,OAAQK,EACR,QAAS,IAAM,CACbC,EAAU,EAAK,EACXF,GACFA,EAAQ,CAEZ,IAEAtF,EAAA,cAACuC,GAAA,CAAK,WAAW,UACfvC,EAAA,cAAC8C,EAAQ,QAAR,KACC9C,EAAA,cAACwC,GAAA,CACC,aAAW,qBACX,IAAKqC,EACL,QAAS,IAAMW,EAAU,CAACD,CAAM,EAChC,UAAWb,EACX,QAAS1E,EAAA,cAAC0C,GAAA,IAAgB,EAC1B,YAAW,GACX,UAAWjB,EAAO,eAEjBsE,GAAuB,CAC1B,CACF,EACCL,GACC1F,EAAA,cAAC,OAAI,UAAWyB,EAAO,sBACrBzB,EAAA,cAACgD,GAAA,CACC,QAAQ,kBACR,UAAW,IACX,UAAU,MACV,GAAG,OAEHhD,EAAA,cAACyC,GAAA,CACC,QAASoD,GACT,KAAM7F,EAAA,cAAC2C,GAAA,IAAU,EACjB,aAAW,kBACX,KAAK,QACP,CACF,CACF,CAEJ,EACA3C,EAAA,cAAC8C,EAAQ,QAAR,CACC,IAAKR,GAAU+C,GAASI,CAAe,EACvC,UAAWrF,EACTqB,EAAO,QAAQjB,EAAa,EAC5B0E,EAAa,UACbzD,EAAO,SACT,EACA,OAAO,2BACP,OAAQ,IAAM0D,GAAA,YAAAA,KAEdnF,EAAA,cAACiD,GAAA,CAAU,aAAc,CAAE,cAAe,EAAK,EAAG,YAAa,IAC5D0C,GACC3F,EAAA,cAACoD,EAAAgD,EAAA1E,EAAA,GACKkE,IADL,CAEC,eAAgBvC,GAChB,YAAajC,EACb,UAAWuC,GACb,EAEDmB,GAAa9E,EAAA,cAACqG,GAAA,IAAqB,EAEnC,CAACvB,GAAaoB,EAAgB,GAC7BlG,EAAA,cAAC,MAAG,UAAWyB,EAAO,KAAM,eAAa,wBACtCkE,EAAYQ,GAAcpF,CAAQ,EAAIA,CACzC,EAGD,CAAC+D,GAAaoB,IAAkB,GAC/BlG,EAAA,cAAC+C,GAAA,CAAW,UAAWtB,EAAO,gBAC3BuD,CACH,CAEJ,CACF,CACF,CACF,CAEJ,CAEA,IAAMqB,GAAuB,IAEzBrG,EAAA,cAAC4C,GAAA,CAAkB,UAAW,IAC5B5C,EAAA,cAAC6C,GAAA,CAAiB,cAAe,EAAG,CACtC,EAQSyD,EAActG,EAAM,WAAWuE,EAAY,EE/XxD,OAAOvE,OAAW,QAGlB,OAAS,MAAAI,OAAU,UAWZ,IAAMmG,EAAmB1F,GAOJ,CAPI,IAAAC,EAAAD,EAC9B,OAAAG,EACA,OAAAE,EAAS,YACT,aAAAC,EACA,UAAAE,EAAY,GACZ,UAAAC,CAnBF,EAcgCR,EAM3B0F,EAAAhF,EAN2BV,EAM3B,CALH,QACA,SACA,eACA,YACA,cAGA,IAAMW,EAASlB,EAAqB,EAEpC,OACEP,GAAA,cAACY,EAAAc,EAAA,CACC,MAAM,MACN,MAJiBV,GAASK,EAAY,eAAiB,aAKvD,OAAQH,EACR,aAAcC,EACd,UAAWE,EACX,UAAWjB,GAAGqB,EAAO,UAAWH,CAAS,GACrCkF,EACN,CAEJ,ECzBO,IAAMF,EAAcA,EAC3BA,EAAY,gBAAkB1E,EAC9B0E,EAAY,OAAS1F,EACrB0F,EAAY,UAAYC","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\ntype LabelOrChildren =\n | {\n /**\n * When using React children it is your own responsibility to highlight\n * the matching part of the item label. Use the `HighlightedItem`\n * component for this.\n */\n children: React.ReactNode;\n label?: never;\n }\n | {\n children?: never;\n label: string;\n };\n\nexport type MultiselectOptionProps = {\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} & LabelOrChildren;\n\nexport const MultiselectOption = ({\n children,\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={styles.optionCheck({ isActive: isChecked, isDisabled })}\n >\n <Text\n className={styles.optionText}\n data-test-id={`cf-multiselect-list-item-${itemId}`}\n >\n {typeof label === 'string' ? (\n <HighlightedItem item={label} inputValue={searchValue} />\n ) : (\n children\n )}\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nexport function HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue.trim());\n\n if (before.length + match.length + after.length === 0) {\n return <>{item}</>;\n }\n\n return (\n <>\n {before}\n <span data-test-id=\"cf-multiselect-item-match\">{match}</span>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getMenuItemStyles } from '@contentful/f36-core';\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 display: 'inline-block',\n width: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionWithClearButton: css({\n paddingRight: '40px',\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 clearSelectionButton: css({\n marginLeft: '-80px',\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 }),\n optionText: css({\n alignItems: 'center',\n display: 'flex',\n span: {\n color: tokens.gray900,\n fontWeight: tokens.fontWeightDemiBold,\n },\n }),\n optionCheck: ({\n isActive,\n isDisabled,\n }: {\n isActive?: boolean;\n isDisabled?: boolean;\n }) =>\n css({\n label: cx(\n getMenuItemStyles({ isActive, isDisabled }),\n css({\n width: '100%',\n }),\n ),\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps, Flex } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { ChevronDownIcon, CloseIcon } 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';\nimport { Tooltip } from '@contentful/f36-tooltip';\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 * Function called when the clear all button is clicked\n * If no function is provided the clear button is not shown\n */\n onClearSelection?: () => 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 onClearSelection,\n } = props;\n\n const { listMaxHeight = 180, listRef, onClose } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const showClearButton =\n currentSelection.length > 1 && typeof onClearSelection === 'function';\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 handleClearSelection = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClearSelection?.();\n e.stopPropagation();\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n const currentSelectionClassName = cx(\n styles.currentSelection,\n showClearButton && styles.currentSelectionWithClearButton,\n );\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={currentSelectionClassName}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n showClearButton,\n styles.currentSelection,\n styles.currentSelectionAddition,\n styles.currentSelectionWithClearButton,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => {\n setIsOpen(false);\n if (onClose) {\n onClose();\n }\n }}\n >\n <Flex alignItems=\"center\">\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 {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content=\"Clear selection\"\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label=\"Clear selection\"\n size=\"small\"\n />\n </Tooltip>\n </div>\n )}\n </Flex>\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<\n MultiselectOptionProps,\n 'children' | 'value' | 'itemId' | 'label'\n > {\n label?: string;\n itemId?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label || isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId={itemId}\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { HighlightedItem, MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n HighlightedItem: typeof HighlightedItem;\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.HighlightedItem = HighlightedItem;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@contentful/f36-multiselect",
3
- "version": "4.25.0",
3
+ "version": "4.26.0",
4
4
  "description": "Forma 36: Multiselect Component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.21.0",
10
- "@contentful/f36-button": "^4.52.2",
11
- "@contentful/f36-core": "^4.52.2",
12
- "@contentful/f36-forms": "^4.52.2",
10
+ "@contentful/f36-button": "^4.78.0",
11
+ "@contentful/f36-core": "^4.78.0",
12
+ "@contentful/f36-forms": "^4.78.0",
13
13
  "@contentful/f36-icons": "^4.20.8",
14
- "@contentful/f36-popover": "^4.52.2",
15
- "@contentful/f36-skeleton": "^4.52.2",
14
+ "@contentful/f36-popover": "^4.78.0",
15
+ "@contentful/f36-skeleton": "^4.78.0",
16
16
  "@contentful/f36-tokens": "^4.0.1",
17
- "@contentful/f36-tooltip": "^4.67.1",
18
- "@contentful/f36-typography": "^4.52.2",
17
+ "@contentful/f36-tooltip": "^4.78.0",
18
+ "@contentful/f36-typography": "^4.78.0",
19
19
  "@contentful/f36-utils": "^4.20.8",
20
20
  "emotion": "^10.0.17",
21
21
  "react-focus-lock": "^2.9.5"