npm - @contentful/f36-multiselect - Versions diffs - 4.26.0 → 4.26.2 - Mend

@contentful/f36-multiselect 4.26.0 → 4.26.2

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

package/README.mdx CHANGED Viewed

@@ -84,6 +84,14 @@ In some cases it is desired to toggle the status of the popover drawer as well a
 ```
+### Controlling from the Outside
+If you want to control the trigger of the multiselect, like adding an `isDisabled` state to it, you can add props to it via the `triggerButtonProps`.
+```jsx file=./examples/MultiselectIsDisabledExample.tsx
+```
 ### With component as children
 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.

package/dist/esm/index.js CHANGED Viewed

@@ -10,10 +10,10 @@ import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
 import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
 import { Popover } from '@contentful/f36-popover';
 import { Tooltip } from '@contentful/f36-tooltip';
-import Ae from 'react-focus-lock';
+import De from 'react-focus-lock';
-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;
+var ue=Object.defineProperty,me=Object.defineProperties;var de=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var _=(e,t,o)=>t in e?ue(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,v=(e,t)=>{for(var o in t||(t={}))q.call(t,o)&&_(e,o,t[o]);if(L)for(var o of L(t))G.call(t,o)&&_(e,o,t[o]);return e},A=(e,t)=>me(e,de(t));var B=(e,t)=>{var o={};for(var n in e)q.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&L)for(var n of L(e))t.indexOf(n)<0&&G.call(e,n)&&(o[n]=e[n]);return o};var b=()=>({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 x=C=>{var S=C,{children:e,label:t,value:o,itemId:n,onSelectItem:s,searchValue:c,isChecked:h=!1,isDisabled:f=!1,className:p}=S,d=B(S,["children","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=b();return l.createElement("li",v({className:cx(u.option,p)},d),l.createElement(Checkbox,{id:n,value:o,onChange:M=>s(M),isChecked:h,isDisabled:f,className:u.optionCheck({isActive:h,isDisabled:f})},l.createElement(Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${n}`},typeof t=="string"?l.createElement(N,{item:t,inputValue:c}):e)))};function N({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)}N.displayName="HighlightedItem";var K=({searchValue:e,setSearchValue:t,onSearchValueChange:o,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:h="Search",focusList:f})=>{let p=b(),d=useRef(null),C=useCallback(u=>{t(u.target.value),o==null||o(u);},[o,t]),S=useCallback(()=>{if(!e)return;f(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(d.current,"");let M=new Event("change",{bubbles:!0});d.current.dispatchEvent(M);},[e,f]);return l.createElement("div",{className:p.searchBar},l.createElement(TextInput,{"aria-label":"Search",type:"text",value:e,className:p.inputField,testId:"cf-multiselect-search",placeholder:h,onChange:C,ref:mergeRefs(s,d),name:n,size:"small"}),l.createElement(IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:p.toggleButton,variant:"transparent",icon:e?l.createElement(CloseIcon,{variant:"muted"}):l.createElement(SearchIcon,{variant:"muted"}),onClick:S,isDisabled:!e,size:"small"}))};var Z=(e,t,o)=>l.Children.map(e,n=>{if(!l.isValidElement(n))return n;if(t(n))return o(n);let s=Z(n.props.children,t,o);return l.cloneElement(n,{children:s})}),ee=(e,t)=>{let o=0;return l.Children.forEach(e,n=>{l.isValidElement(n)&&(t(n)?o+=1:o+=ee(n.props.children,t));}),o};function Xe(e,t){let{className:o,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:h,toggleButtonAriaLabel:f="Toggle Multiselect",isLoading:p=!1,testId:d="cf-multiselect",noMatchesMessage:C="No matches found",searchProps:S={},popoverProps:u={},children:M,onBlur:T,onClearSelection:P,clearButtonProps:O={tooltip:"Clear selection",ariaLabel:"Clear selection"}}=e,{listMaxHeight:oe=180,listRef:ne,onClose:X}=u,a=b(),[k,le]=useState(""),[F,$]=useState(!1),V=useRef(null),R=c.length>1&&typeof P=="function",z=typeof e.onSearchValueChange=="function"||typeof S.onSearchValueChange=="function",re=Object.keys(S).length>0?S:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},H=useCallback(()=>{var m;(m=V.current)==null||m.focus();},[]),ie=m=>{P==null||P(),m.stopPropagation();},se=useCallback(()=>{if(c.length===0)return l.createElement(l.Fragment,null,s);let m=c.length-1,I=cx(a.currentSelection,R&&a.currentSelectionWithClearButton);return m===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 ",m," more"))},[c,s,R,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),j=useMemo(()=>ee(M,m=>m.type===x),[M]),ae=l.useCallback(m=>Z(m,I=>I.type===x,I=>{let ce=pe=>{var U;H(),(U=I.props)==null||U.onSelectItem(pe);};return l.cloneElement(I,{searchValue:k,onSelectItem:ce})}),[k,H]);return l.createElement("div",{"data-test-id":d,className:cx(a.multiselect,o),ref:t},l.createElement(Popover,A(v({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:F,onClose:()=>{$(!1),X&&X();}}),l.createElement(Flex,{alignItems:"center"},l.createElement(Popover.Trigger,null,l.createElement(Button,v({"aria-label":f,ref:h,onClick:()=>$(!F),startIcon:n,endIcon:l.createElement(ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},e.triggerButtonProps),se())),R&&l.createElement("div",{className:a.clearSelectionButton},l.createElement(Tooltip,{content:O.tooltip?O.tooltip:"Clear selection",showDelay:800,placement:"top",as:"div"},l.createElement(IconButton,{onClick:ie,icon:l.createElement(CloseIcon,null),"aria-label":O.ariaLabel?O.ariaLabel:"Clear selection",size:"small"})))),l.createElement(Popover.Content,{ref:mergeRefs(ne,V),className:cx(a.content(oe),u.className,a.container),testId:"cf-multiselect-container",onBlur:()=>T==null?void 0:T()},l.createElement(De,{focusOptions:{preventScroll:!0},returnFocus:!0},z&&l.createElement(K,A(v({},re),{setSearchValue:le,searchValue:k,focusList:H})),p&&l.createElement(Fe,null),!p&&j>0&&l.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},z?ae(M):M),!p&&j===0&&l.createElement(Subheading,{className:a.noMatchesTitle},C)))))}var Fe=()=>l.createElement(SkeletonContainer,{svgHeight:16},l.createElement(SkeletonBodyText,{numberOfLines:1})),te=l.forwardRef(Xe);var D=f=>{var p=f,{label:e,itemId:t="SelectAll",onSelectItem:o,isChecked:n=!1,selectAllOptionLabel:s={checked:"Deselect all",unchecked:"Select all"},className:c}=p,h=B(p,["label","itemId","onSelectItem","isChecked","selectAllOptionLabel","className"]);let d=b(),C=e||n?s.checked:s.unchecked;return l.createElement(x,v({value:"all",label:C,itemId:t,onSelectItem:o,isChecked:n,className:cx(d.selectAll,c)},h))};var E=te;E.HighlightedItem=N;E.Option=x;E.SelectAll=D;
-export { E as Multiselect, M as MultiselectOption, A as SelectAllOption };
+export { E as Multiselect, x as MultiselectOption, D as SelectAllOption };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -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","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"]}
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","toggleButtonAriaLabel","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","onClearSelection","clearButtonProps","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","selectAllOptionLabel","otherProps","displayLabel"],"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, type ButtonProps } 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\ntype ClearButtonProps = {\n /*\n Aria label for the clear button\n * @default 'Clear selection'\n /\n ariaLabel?: string;\n\n /\n Tooltip for the clear button\n * @default 'Clear selection'\n /\n tooltip?: string;\n};\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 Aria label for the toggle button that opens the list\n * @default 'Toggle Multiselect'\n /\n toggleButtonAriaLabel?: string;\n\n /\n Props to pass to the optional search field\n /\n searchProps?: SearchProps;\n\n /\n Props to pass to the optional search field\n /\n triggerButtonProps?: ButtonProps;\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 Clear Button Props used for localization\n * @default { ariaLabel: 'Clear selection', tooltip: 'Clear selection' }\n /\n clearButtonProps?: ClearButtonProps;\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 toggleButtonAriaLabel = 'Toggle Multiselect',\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n onClearSelection,\n clearButtonProps = {\n tooltip: 'Clear selection',\n ariaLabel: 'Clear selection',\n },\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={toggleButtonAriaLabel}\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n {...props.triggerButtonProps}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content={\n clearButtonProps.tooltip\n ? clearButtonProps.tooltip\n : 'Clear selection'\n }\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label={\n clearButtonProps.ariaLabel\n ? clearButtonProps.ariaLabel\n : 'Clear selection'\n }\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\n/\n Labels for the select all option\n /\ntype SelectAllOptionLabel = {\n /\n Label for the select all option when it is checked\n * @default 'Deselect all'\n /\n checked: string;\n\n /\n Label for the select all option when it is unchecked\n * @default 'Select all'\n */\n unchecked: string;\n};\nexport interface SelectAllOptionProps\n extends Omit<\n MultiselectOptionProps,\n 'children' \| 'value' \| 'itemId' \| 'label'\n > {\n label?: string;\n itemId?: string;\n selectAllOptionLabel?: SelectAllOptionLabel;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n selectAllOptionLabel = {\n checked: 'Deselect all',\n unchecked: 'Select all',\n },\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel =\n label \|\| isChecked\n ? selectAllOptionLabel.checked\n : selectAllOptionLabel.unchecked;\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 Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '@contentful/f36-core';
+import { ButtonProps } from '@contentful/f36-button';
 import { PopoverProps } from '@contentful/f36-popover';
 declare type LabelOrChildren = {
@@ -68,6 +69,18 @@ interface MultiselectSearchProps {
     focusList?: () => void;
 }
+declare type ClearButtonProps = {
+    /**
+     * Aria label for the clear button
+     * @default 'Clear selection'
+     */
+    ariaLabel?: string;
+    /**
+     * Tooltip for the clear button
+     * @default 'Clear selection'
+     */
+    tooltip?: string;
+};
 interface MultiselectProps extends CommonProps {
     /** Select Options */
     children?: React.ReactNode;
@@ -92,10 +105,19 @@ interface MultiselectProps extends CommonProps {
      * Use this prop to get a ref to the toggle button of the component
      */
     toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Aria label for the toggle button that opens the list
+     * @default 'Toggle Multiselect'
+     */
+    toggleButtonAriaLabel?: string;
     /**
      * Props to pass to the optional search field
      */
     searchProps?: MultiselectSearchProps;
+    /**
+     * Props to pass to the optional search field
+     */
+    triggerButtonProps?: ButtonProps;
     /**
      * Function called whenever the search input value changes
      * @deprecated Handover this prop in the searchProps subcomponent properties
@@ -146,6 +168,11 @@ interface MultiselectProps extends CommonProps {
      * If no function is provided the clear button is not shown
      */
     onClearSelection?: () => void;
+    /**
+     * Clear Button Props used for localization
+     * @default { ariaLabel: 'Clear selection', tooltip: 'Clear selection' }
+     */
+    clearButtonProps?: ClearButtonProps;
 }
 /**
  * The Multiselect is a component that will allow a user to select multiple items.
@@ -153,11 +180,27 @@ interface MultiselectProps extends CommonProps {
  */
 declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Labels for the select all option
+ */
+declare type SelectAllOptionLabel = {
+    /**
+     * Label for the select all option when it is checked
+     * @default 'Deselect all'
+     */
+    checked: string;
+    /**
+     * Label for the select all option when it is unchecked
+     * @default 'Select all'
+     */
+    unchecked: string;
+};
 interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'children' | 'value' | 'itemId' | 'label'> {
     label?: string;
     itemId?: string;
+    selectAllOptionLabel?: SelectAllOptionLabel;
 }
-declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
+declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, selectAllOptionLabel, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
 declare type CompoundMultiselect = typeof Multiselect$1 & {
     HighlightedItem: typeof HighlightedItem;

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '@contentful/f36-core';
+import { ButtonProps } from '@contentful/f36-button';
 import { PopoverProps } from '@contentful/f36-popover';
 declare type LabelOrChildren = {
@@ -68,6 +69,18 @@ interface MultiselectSearchProps {
     focusList?: () => void;
 }
+declare type ClearButtonProps = {
+    /**
+     * Aria label for the clear button
+     * @default 'Clear selection'
+     */
+    ariaLabel?: string;
+    /**
+     * Tooltip for the clear button
+     * @default 'Clear selection'
+     */
+    tooltip?: string;
+};
 interface MultiselectProps extends CommonProps {
     /** Select Options */
     children?: React.ReactNode;
@@ -92,10 +105,19 @@ interface MultiselectProps extends CommonProps {
      * Use this prop to get a ref to the toggle button of the component
      */
     toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Aria label for the toggle button that opens the list
+     * @default 'Toggle Multiselect'
+     */
+    toggleButtonAriaLabel?: string;
     /**
      * Props to pass to the optional search field
      */
     searchProps?: MultiselectSearchProps;
+    /**
+     * Props to pass to the optional search field
+     */
+    triggerButtonProps?: ButtonProps;
     /**
      * Function called whenever the search input value changes
      * @deprecated Handover this prop in the searchProps subcomponent properties
@@ -146,6 +168,11 @@ interface MultiselectProps extends CommonProps {
      * If no function is provided the clear button is not shown
      */
     onClearSelection?: () => void;
+    /**
+     * Clear Button Props used for localization
+     * @default { ariaLabel: 'Clear selection', tooltip: 'Clear selection' }
+     */
+    clearButtonProps?: ClearButtonProps;
 }
 /**
  * The Multiselect is a component that will allow a user to select multiple items.
@@ -153,11 +180,27 @@ interface MultiselectProps extends CommonProps {
  */
 declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Labels for the select all option
+ */
+declare type SelectAllOptionLabel = {
+    /**
+     * Label for the select all option when it is checked
+     * @default 'Deselect all'
+     */
+    checked: string;
+    /**
+     * Label for the select all option when it is unchecked
+     * @default 'Select all'
+     */
+    unchecked: string;
+};
 interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'children' | 'value' | 'itemId' | 'label'> {
     label?: string;
     itemId?: string;
+    selectAllOptionLabel?: SelectAllOptionLabel;
 }
-declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
+declare const SelectAllOption: ({ label, itemId, onSelectItem, isChecked, selectAllOptionLabel, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
 declare type CompoundMultiselect = typeof Multiselect$1 & {
     HighlightedItem: typeof HighlightedItem;

package/dist/index.js CHANGED Viewed

@@ -12,18 +12,18 @@ var f36Icons = require('@contentful/f36-icons');
 var f36Skeleton = require('@contentful/f36-skeleton');
 var f36Popover = require('@contentful/f36-popover');
 var f36Tooltip = require('@contentful/f36-tooltip');
-var Ae = require('react-focus-lock');
+var De = require('react-focus-lock');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var l__default = /*#__PURE__*/_interopDefault(l);
 var r__default = /*#__PURE__*/_interopDefault(r);
-var Ae__default = /*#__PURE__*/_interopDefault(Ae);
+var De__default = /*#__PURE__*/_interopDefault(De);
-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;
+var ue=Object.defineProperty,me=Object.defineProperties;var de=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var _=(e,t,o)=>t in e?ue(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,v=(e,t)=>{for(var o in t||(t={}))q.call(t,o)&&_(e,o,t[o]);if(L)for(var o of L(t))G.call(t,o)&&_(e,o,t[o]);return e},A=(e,t)=>me(e,de(t));var B=(e,t)=>{var o={};for(var n in e)q.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&L)for(var n of L(e))t.indexOf(n)<0&&G.call(e,n)&&(o[n]=e[n]);return o};var b=()=>({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 x=C=>{var S=C,{children:e,label:t,value:o,itemId:n,onSelectItem:s,searchValue:c,isChecked:h=!1,isDisabled:f=!1,className:p}=S,d=B(S,["children","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let u=b();return l__default.default.createElement("li",v({className:emotion.cx(u.option,p)},d),l__default.default.createElement(f36Forms.Checkbox,{id:n,value:o,onChange:M=>s(M),isChecked:h,isDisabled:f,className:u.optionCheck({isActive:h,isDisabled:f})},l__default.default.createElement(f36Typography.Text,{className:u.optionText,"data-test-id":`cf-multiselect-list-item-${n}`},typeof t=="string"?l__default.default.createElement(N,{item:t,inputValue:c}):e)))};function N({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)}N.displayName="HighlightedItem";var K=({searchValue:e,setSearchValue:t,onSearchValueChange:o,searchInputName:n,searchInputRef:s,resetSearchRef:c,searchPlaceholder:h="Search",focusList:f})=>{let p=b(),d=l.useRef(null),C=l.useCallback(u=>{t(u.target.value),o==null||o(u);},[o,t]),S=l.useCallback(()=>{if(!e)return;f(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(d.current,"");let M=new Event("change",{bubbles:!0});d.current.dispatchEvent(M);},[e,f]);return l__default.default.createElement("div",{className:p.searchBar},l__default.default.createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:e,className:p.inputField,testId:"cf-multiselect-search",placeholder:h,onChange:C,ref:f36Core.mergeRefs(s,d),name:n,size:"small"}),l__default.default.createElement(f36Button.IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:p.toggleButton,variant:"transparent",icon:e?l__default.default.createElement(f36Icons.CloseIcon,{variant:"muted"}):l__default.default.createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:S,isDisabled:!e,size:"small"}))};var Z=(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=Z(n.props.children,t,o);return l__default.default.cloneElement(n,{children:s})}),ee=(e,t)=>{let o=0;return l__default.default.Children.forEach(e,n=>{l__default.default.isValidElement(n)&&(t(n)?o+=1:o+=ee(n.props.children,t));}),o};function Xe(e,t){let{className:o,startIcon:n,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:h,toggleButtonAriaLabel:f="Toggle Multiselect",isLoading:p=!1,testId:d="cf-multiselect",noMatchesMessage:C="No matches found",searchProps:S={},popoverProps:u={},children:M,onBlur:T,onClearSelection:P,clearButtonProps:O={tooltip:"Clear selection",ariaLabel:"Clear selection"}}=e,{listMaxHeight:oe=180,listRef:ne,onClose:X}=u,a=b(),[k,le]=l.useState(""),[F,$]=l.useState(!1),V=l.useRef(null),R=c.length>1&&typeof P=="function",z=typeof e.onSearchValueChange=="function"||typeof S.onSearchValueChange=="function",re=Object.keys(S).length>0?S:{onSearchValueChange:e.onSearchValueChange,searchPlaceholder:e.searchPlaceholder,searchInputName:e.searchInputName,searchInputRef:e.searchInputRef},H=l.useCallback(()=>{var m;(m=V.current)==null||m.focus();},[]),ie=m=>{P==null||P(),m.stopPropagation();},se=l.useCallback(()=>{if(c.length===0)return l__default.default.createElement(l__default.default.Fragment,null,s);let m=c.length-1,I=emotion.cx(a.currentSelection,R&&a.currentSelectionWithClearButton);return m===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 ",m," more"))},[c,s,R,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),j=l.useMemo(()=>ee(M,m=>m.type===x),[M]),ae=l__default.default.useCallback(m=>Z(m,I=>I.type===x,I=>{let ce=pe=>{var U;H(),(U=I.props)==null||U.onSelectItem(pe);};return l__default.default.cloneElement(I,{searchValue:k,onSelectItem:ce})}),[k,H]);return l__default.default.createElement("div",{"data-test-id":d,className:emotion.cx(a.multiselect,o),ref:t},l__default.default.createElement(f36Popover.Popover,A(v({renderOnlyWhenOpen:!1,isFullWidth:!0},u),{isOpen:F,onClose:()=>{$(!1),X&&X();}}),l__default.default.createElement(f36Core.Flex,{alignItems:"center"},l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(f36Button.Button,v({"aria-label":f,ref:h,onClick:()=>$(!F),startIcon:n,endIcon:l__default.default.createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},e.triggerButtonProps),se())),R&&l__default.default.createElement("div",{className:a.clearSelectionButton},l__default.default.createElement(f36Tooltip.Tooltip,{content:O.tooltip?O.tooltip:"Clear selection",showDelay:800,placement:"top",as:"div"},l__default.default.createElement(f36Button.IconButton,{onClick:ie,icon:l__default.default.createElement(f36Icons.CloseIcon,null),"aria-label":O.ariaLabel?O.ariaLabel:"Clear selection",size:"small"})))),l__default.default.createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(ne,V),className:emotion.cx(a.content(oe),u.className,a.container),testId:"cf-multiselect-container",onBlur:()=>T==null?void 0:T()},l__default.default.createElement(De__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},z&&l__default.default.createElement(K,A(v({},re),{setSearchValue:le,searchValue:k,focusList:H})),p&&l__default.default.createElement(Fe,null),!p&&j>0&&l__default.default.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},z?ae(M):M),!p&&j===0&&l__default.default.createElement(f36Typography.Subheading,{className:a.noMatchesTitle},C)))))}var Fe=()=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),te=l__default.default.forwardRef(Xe);var D=f=>{var p=f,{label:e,itemId:t="SelectAll",onSelectItem:o,isChecked:n=!1,selectAllOptionLabel:s={checked:"Deselect all",unchecked:"Select all"},className:c}=p,h=B(p,["label","itemId","onSelectItem","isChecked","selectAllOptionLabel","className"]);let d=b(),C=e||n?s.checked:s.unchecked;return l__default.default.createElement(x,v({value:"all",label:C,itemId:t,onSelectItem:o,isChecked:n,className:emotion.cx(d.selectAll,c)},h))};var E=te;E.HighlightedItem=N;E.Option=x;E.SelectAll=D;
 exports.Multiselect = E;
-exports.MultiselectOption = M;
-exports.SelectAllOption = A;
+exports.MultiselectOption = x;
+exports.SelectAllOption = D;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -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","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"]}
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","toggleButtonAriaLabel","isLoading","testId","noMatchesMessage","searchProps","popoverProps","onBlur","onClearSelection","clearButtonProps","listRef","onClose","isOpen","setIsOpen","internalListRef","showClearButton","hasSearch","handoverSearchProps","handleClearSelection","e","renderMultiselectLabel","leftoverCount","currentSelectionClassName","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","selectAllOptionLabel","otherProps","displayLabel"],"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, type ButtonProps } 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\ntype ClearButtonProps = {\n /*\n Aria label for the clear button\n * @default 'Clear selection'\n /\n ariaLabel?: string;\n\n /\n Tooltip for the clear button\n * @default 'Clear selection'\n /\n tooltip?: string;\n};\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 Aria label for the toggle button that opens the list\n * @default 'Toggle Multiselect'\n /\n toggleButtonAriaLabel?: string;\n\n /\n Props to pass to the optional search field\n /\n searchProps?: SearchProps;\n\n /\n Props to pass to the optional search field\n /\n triggerButtonProps?: ButtonProps;\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 Clear Button Props used for localization\n * @default { ariaLabel: 'Clear selection', tooltip: 'Clear selection' }\n /\n clearButtonProps?: ClearButtonProps;\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 toggleButtonAriaLabel = 'Toggle Multiselect',\n isLoading = false,\n testId = 'cf-multiselect',\n noMatchesMessage = 'No matches found',\n searchProps = {},\n popoverProps = {},\n children,\n onBlur,\n onClearSelection,\n clearButtonProps = {\n tooltip: 'Clear selection',\n ariaLabel: 'Clear selection',\n },\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={toggleButtonAriaLabel}\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n {...props.triggerButtonProps}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n {showClearButton && (\n <div className={styles.clearSelectionButton}>\n <Tooltip\n content={\n clearButtonProps.tooltip\n ? clearButtonProps.tooltip\n : 'Clear selection'\n }\n showDelay={800}\n placement=\"top\"\n as=\"div\"\n >\n <IconButton\n onClick={handleClearSelection}\n icon={<CloseIcon />}\n aria-label={\n clearButtonProps.ariaLabel\n ? clearButtonProps.ariaLabel\n : 'Clear selection'\n }\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\n/\n Labels for the select all option\n /\ntype SelectAllOptionLabel = {\n /\n Label for the select all option when it is checked\n * @default 'Deselect all'\n /\n checked: string;\n\n /\n Label for the select all option when it is unchecked\n * @default 'Select all'\n */\n unchecked: string;\n};\nexport interface SelectAllOptionProps\n extends Omit<\n MultiselectOptionProps,\n 'children' \| 'value' \| 'itemId' \| 'label'\n > {\n label?: string;\n itemId?: string;\n selectAllOptionLabel?: SelectAllOptionLabel;\n}\n\nexport const SelectAllOption = ({\n label,\n itemId = 'SelectAll',\n onSelectItem,\n isChecked = false,\n selectAllOptionLabel = {\n checked: 'Deselect all',\n unchecked: 'Select all',\n },\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel =\n label \|\| isChecked\n ? selectAllOptionLabel.checked\n : selectAllOptionLabel.unchecked;\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 Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@contentful/f36-multiselect",
-  "version": "4.26.0",
+  "version": "4.26.2",
   "description": "Forma 36: Multiselect Component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
+    "@babel/runtime": "^7.27.1",
     "@contentful/f36-button": "^4.78.0",
     "@contentful/f36-core": "^4.78.0",
     "@contentful/f36-forms": "^4.78.0",