npm - @contentful/f36-multiselect - Versions diffs - 4.20.9 → 4.20.11 - Mend

@contentful/f36-multiselect 4.20.9 → 4.20.11

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 (7) hide show

package/README.mdx CHANGED Viewed

@@ -15,8 +15,6 @@ It has multiple optional features like a search.
 ## Import
 ```jsx static=true
-import { Multiselect } from '@contentful/f36-components';
-// or
 import { Multiselect } from '@contentful/f36-multiselect';
 ```
@@ -70,6 +68,14 @@ To enable searching the following properties have to be set.
 ```
+### SelectAll Option
+To offer a shortcut for selecting and deselecting all options, you can use the compound component SelectAll. This requires a callback function which needs to contain your implementation for selecting all options.
+```jsx file=./examples/MultiselectSelectAllExample.tsx
+```
 ## Props (API reference)
 <PropsTable of="Multiselect" />

package/dist/esm/index.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { ChevronDownIcon, CloseIcon, SearchIcon } from '@contentful/f36-icons';
 import { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';
 import { Popover } from '@contentful/f36-popover';
-var ie=Object.defineProperty,se=Object.defineProperties;var le=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var R=(t,o,n)=>o in t?ie(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,x=(t,o)=>{for(var n in o||(o={}))z.call(o,n)&&R(t,n,o[n]);if(S)for(var n of S(o))F.call(o,n)&&R(t,n,o[n]);return t},A=(t,o)=>se(t,le(o));var U=(t,o)=>{var n={};for(var i in t)z.call(t,i)&&o.indexOf(i)<0&&(n[i]=t[i]);if(t!=null&&S)for(var i of S(t))o.indexOf(i)<0&&F.call(t,i)&&(n[i]=t[i]);return n};var I=()=>({multiselect:css({position:"relative",width:"100%"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r.spacing2Xs}),inputField:css({paddingRight:r.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${r.gray200}`}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:r.zIndexDefault,padding:r.spacing2Xs,height:r.spacingXl}),content:t=>css({overflow:"auto",maxHeight:`${t}px`}),list:css({listStyle:"none",padding:`${r.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${r.spacingXs} ${r.spacingM}`,lineHeight:r.lineHeightM}),noMatchesTitle:css({color:r.gray500,margin:r.spacingM}),item:css({padding:`${r.spacingXs} ${r.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:r.gray100},"&:active":{backgroundColor:r.gray200},"&:focus":{boxShadow:r.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r.glowPrimary}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var h=L=>{var M=L,{label:t,value:o,itemId:n,onSelectItem:i,searchValue:d,isChecked:u=!1,isDisabled:c=!1,className:y}=M,C=U(M,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let v=I();return e.createElement("li",x({className:y},C),e.createElement(Checkbox,{id:n,value:o,onChange:f=>i(f),isChecked:u,isDisabled:c,className:cx(v.item,c&&v.disabled)},e.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${n}`},e.createElement(j,{item:t,inputValue:d}))))};function j({item:t,inputValue:o=""}){let{before:n,match:i,after:d}=getStringMatch(t,o);return e.createElement(e.Fragment,null,n,e.createElement("b",{"data-test-id":"cf-multiselect-item-match"},i),d)}j.displayName="HighlightedItem";function ye(t,o){let{className:n,startIcon:i,placeholder:d="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:y="Search",searchInputRef:C,searchInputName:L,noMatchesMessage:M="No matches found",toggleRef:v,isLoading:f=!1,testId:Q="cf-multiselect",popoverProps:T={},children:b,onBlur:P}=t,{listMaxHeight:Y=180,listRef:Z}=T,a=I(),[m,E]=useState(""),[N,H]=useState(!1),w=useRef(null),k=useRef(null),B=typeof c=="function",ee=useCallback(p=>{E(p.target.value),c==null||c(p);},[c,E]),te=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(w.current,"");let s=new Event("change",{bubbles:!0});w.current.dispatchEvent(s);},oe=useCallback(()=>{if(u.length===0)return e.createElement(e.Fragment,null,d);let p=u.length-1;return p===0?e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," and ",p," more"," ")},[u,d,a.currentSelection]),V=useMemo(()=>e.Children.count(b),[b]),$=e.useCallback(p=>e.Children.map(p,s=>{if(e.isValidElement(s)){if(s.type===e.Fragment||s.type==="div"||s.type==="ul")return $(s.props.children);if(s.type===h){let ne=re=>{var D,X;(D=k.current)==null||D.focus(),(X=s.props)==null||X.onSelectItem(re);};return e.cloneElement(s,{searchValue:m,onSelectItem:ne})}return s}return s}),[m]);return e.createElement("div",{"data-test-id":Q,className:cx(a.multiselect,n),ref:o},e.createElement(Popover,A(x({renderOnlyWhenOpen:!1},T),{isOpen:N,onClose:()=>H(!1)}),e.createElement(Popover.Trigger,null,e.createElement(Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>H(!N),startIcon:i,endIcon:e.createElement(ChevronDownIcon,null)},oe())),e.createElement(Popover.Content,{ref:mergeRefs(Z,k),className:a.content(Y),testId:"cf-multiselect-container",onBlur:()=>P==null?void 0:P()},e.createElement(e.Fragment,null,B&&e.createElement(e.Fragment,null,e.createElement(TextInput,{"aria-label":"Search",type:"text",value:m,className:a.inputField,testId:"cf-multiselect-search",placeholder:y,onChange:ee,ref:mergeRefs(C,w),name:L}),e.createElement(IconButton,{"aria-label":m?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:m?e.createElement(CloseIcon,{variant:"muted"}):e.createElement(SearchIcon,{variant:"muted"}),onClick:()=>{m&&te();},isDisabled:!m,size:"small"})),f&&e.createElement(Ce,null),!f&&V>0&&e.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},B?$(b):b),!f&&V===0&&e.createElement(Subheading,{className:a.noMatchesTitle},M)))))}var Ce=()=>e.createElement(SkeletonContainer,{svgHeight:16},e.createElement(SkeletonBodyText,{numberOfLines:1})),J=e.forwardRef(ye);var K=J;K.Option=h;
+var ce=Object.defineProperty,pe=Object.defineProperties;var ue=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var F=(t,l,o)=>l in t?ce(t,l,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[l]=o,h=(t,l)=>{for(var o in l||(l={}))W.call(l,o)&&F(t,o,l[o]);if(C)for(var o of C(l))j.call(l,o)&&F(t,o,l[o]);return t},U=(t,l)=>pe(t,ue(l));var P=(t,l)=>{var o={};for(var n in t)W.call(t,n)&&l.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&C)for(var n of C(t))l.indexOf(n)<0&&j.call(t,n)&&(o[n]=t[n]);return o};var M=()=>({multiselect:css({position:"relative",width:"100%"}),triggerButton:css({justifyContent:"space-between"}),currentSelection:css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r.spacing2Xs}),currentSelectionAddition:css({color:r.gray600}),inputField:css({paddingRight:r.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${r.gray200}`}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:r.zIndexDefault,padding:r.spacing2Xs,height:r.spacingXl}),content:t=>css({overflow:"auto",maxHeight:`${t}px`}),list:css({listStyle:"none",padding:`${r.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${r.spacingXs} ${r.spacingM}`,lineHeight:r.lineHeightM}),noMatchesTitle:css({color:r.gray500,margin:r.spacingM}),selectAll:css({"label > *":{fontWeight:"bold"}}),item:css({label:{padding:`${r.spacingXs} ${r.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:r.gray100},"&:active":{backgroundColor:r.gray200},"&:focus":{boxShadow:r.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r.glowPrimary}}}),disabled:css({opacity:.5,cursor:"not-allowed"})});var d=H=>{var x=H,{label:t,value:l,itemId:o,onSelectItem:n,searchValue:p,isChecked:u=!1,isDisabled:c=!1,className:S}=x,v=P(x,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let y=M();return e.createElement("li",h({className:S},v),e.createElement(Checkbox,{id:o,value:l,onChange:b=>n(b),isChecked:u,isDisabled:c,className:cx(y.item,c&&y.disabled)},e.createElement(Text,{"data-test-id":`cf-multiselect-list-item-${o}`},e.createElement(_,{item:t,inputValue:p}))))};function _({item:t,inputValue:l=""}){let{before:o,match:n,after:p}=getStringMatch(t,l);return e.createElement(e.Fragment,null,o,e.createElement("b",{"data-test-id":"cf-multiselect-item-match"},n),p)}_.displayName="HighlightedItem";var Q=(t,l,o)=>e.Children.map(t,n=>{if(!e.isValidElement(n))return n;if(l(n))return o(n);let p=Q(n.props.children,l,o);return e.cloneElement(n,{children:p})}),Y=(t,l)=>{let o=0;return e.Children.forEach(t,n=>{!e.isValidElement(n)||(l(n)?o+=1:o+=Y(n.props.children,l));}),o};function Pe(t,l){let{className:o,startIcon:n,placeholder:p="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:S="Search",searchInputRef:v,searchInputName:H,noMatchesMessage:x="No matches found",toggleRef:y,isLoading:b=!1,testId:ee="cf-multiselect",popoverProps:N={},children:I,onBlur:E}=t,{listMaxHeight:te=180,listRef:oe}=N,a=M(),[m,R]=useState(""),[B,V]=useState(!1),L=useRef(null),D=useRef(null),$=typeof c=="function",O=useCallback(()=>{var i;(i=D.current)==null||i.focus();},[]),le=useCallback(i=>{R(i.target.value),c==null||c(i);},[c,R]),ne=useCallback(()=>{if(!m)return;O(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(L.current,"");let f=new Event("change",{bubbles:!0});L.current.dispatchEvent(f);},[m,O]),re=useCallback(()=>{if(u.length===0)return e.createElement(e.Fragment,null,p);let i=u.length-1;return i===0?e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," ",e.createElement("span",{className:a.currentSelectionAddition},"and ",i," more"))},[u,p,a.currentSelection,a.currentSelectionAddition]),X=useMemo(()=>Y(I,i=>i.type===d),[I]),ie=e.useCallback(i=>Q(i,f=>f.type===d,f=>{let se=ae=>{var z;O(),(z=f.props)==null||z.onSelectItem(ae);};return e.cloneElement(f,{searchValue:m,onSelectItem:se})}),[m,O]);return e.createElement("div",{"data-test-id":ee,className:cx(a.multiselect,o),ref:l},e.createElement(Popover,U(h({renderOnlyWhenOpen:!1,isFullWidth:!0},N),{isOpen:B,onClose:()=>V(!1)}),e.createElement(Popover.Trigger,null,e.createElement(Button,{"aria-label":"Toggle Multiselect",ref:y,onClick:()=>V(!B),startIcon:n,endIcon:e.createElement(ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},re())),e.createElement(Popover.Content,{ref:mergeRefs(oe,D),className:cx(a.content(te),N.className),testId:"cf-multiselect-container",onBlur:()=>E==null?void 0:E()},e.createElement(e.Fragment,null,$&&e.createElement(e.Fragment,null,e.createElement(TextInput,{"aria-label":"Search",type:"text",value:m,className:a.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:le,ref:mergeRefs(v,L),name:H,size:"small"}),e.createElement(IconButton,{"aria-label":m?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:m?e.createElement(CloseIcon,{variant:"muted"}):e.createElement(SearchIcon,{variant:"muted"}),onClick:ne,isDisabled:!m,size:"small"})),b&&e.createElement(we,null),!b&&X>0&&e.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?ie(I):I),!b&&X===0&&e.createElement(Subheading,{className:a.noMatchesTitle},x)))))}var we=()=>e.createElement(SkeletonContainer,{svgHeight:16},e.createElement(SkeletonBodyText,{numberOfLines:1})),Z=e.forwardRef(Pe);var k=u=>{var c=u,{label:t,onSelectItem:l,isChecked:o=!1,className:n}=c,p=P(c,["label","onSelectItem","isChecked","className"]);let S=M();return e.createElement(d,h({value:"all",label:t||o?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:l,isChecked:o,className:cx(S.selectAll,n)},p))};var A=Z;A.Option=d;A.SelectAll=k;
-export { K as Multiselect, h as MultiselectOption };
+export { A as Multiselect, d as MultiselectOption, k as SelectAllOption };
 //# 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/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","even","__spreadProps","ListItemLoadingState","Multiselect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={className} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options /\n children?: React.ReactNode;\n\n /\n Set a custom icon for the text input\n /\n startIcon?: React.ReactElement;\n\n /\n Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n /\n placeholder?: string;\n\n /\n current Selected items, to be shown on the trigger button\n /\n currentSelection?: Array<string>;\n\n /\n Function called whenever the search input value changes\n /\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void \| undefined;\n\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n searchPlaceholder?: string;\n\n /\n A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n /\n noMatchesMessage?: string;\n\n /\n Use this prop to get a ref to the input element of the component\n /\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /\n Pass a form name to the search text input\n /\n searchInputName?: string;\n\n /\n Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /\n Props to pass to the Popover (Dropdown) component\n /\n popoverProps?: Partial<PopoverProps> & {\n /\n It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n /\n listMaxHeight?: number;\n\n /\n Use this prop to get a ref to the list of items of the component\n /\n listRef?: React.Ref<HTMLUListElement>;\n };\n\n /\n Function called when the popover loses its focus.\n /\n onBlur?: () => void;\n}\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (\n child.type === React.Fragment \|\|\n child.type === 'div' \|\|\n child.type === 'ul'\n ) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n const onSelectItem = (\n even: React.ChangeEvent<HTMLInputElement>,\n ) => {\n // Selecting an item triggers a rerendering and thereby losing the\n // focus on the clicked element. To avoid having the focus on the document body\n // (which breaks `closeOnBlur`), we force it back to the list in the popup.\n internalListRef.current?.focus();\n child.props?.onSelectItem(even);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n />\n <IconButton\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/\n The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
1	+ {"version":3,"sources":["../../src/MultiselectOption.tsx","../../src/Multiselect.styles.ts","../../src/Multiselect.tsx","../../src/SelectAllOption.tsx","../../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","focusList","handleSearchChange","resetSearchInput","forcedEvent","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={className} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n selectAll: css({\n 'label > ': {\n fontWeight: 'bold',\n },\n }),\n item: css({\n label: {\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\n\nexport interface MultiselectProps extends CommonProps {\n /* Select Options /\n children?: React.ReactNode;\n\n /\n Set a custom icon for the text input\n /\n startIcon?: React.ReactElement;\n\n /\n Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n /\n placeholder?: string;\n\n /\n current Selected items, to be shown on the trigger button\n /\n currentSelection?: Array<string>;\n\n /\n Function called whenever the search input value changes\n /\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void \| undefined;\n\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n searchPlaceholder?: string;\n\n /\n A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n /\n noMatchesMessage?: string;\n\n /\n Use this prop to get a ref to the input element of the component\n /\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /\n Pass a form name to the search text input\n /\n searchInputName?: string;\n\n /\n Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /\n Props to pass to the Popover (Dropdown) component\n /\n popoverProps?: Partial<PopoverProps> & {\n /\n It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n /\n listMaxHeight?: number;\n\n /\n Use this prop to get a ref to the list of items of the component\n /\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /\n Function called when the popover loses its focus.\n /\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement \| void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null \|\| typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null \|\| typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(styles.content(listMaxHeight), popoverProps.className)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\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 </>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/\n The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' \| 'itemId' \| 'label'> {\n label?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label \|\| isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId=\"SelectAll\"\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}

package/dist/index.d.ts CHANGED Viewed

@@ -74,7 +74,7 @@ interface MultiselectProps extends CommonProps {
          * Use this prop to get a ref to the list of items of the component
          */
         listRef?: React.Ref<HTMLUListElement>;
-    };
+    } & Pick<CommonProps, 'className'>;
     /**
      * Function called when the popover loses its focus.
      */
@@ -86,9 +86,15 @@ interface MultiselectProps extends CommonProps {
  */
 declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectAllOptionProps extends Omit<MultiselectOptionProps, 'value' | 'itemId' | 'label'> {
+    label?: string;
+}
+declare const SelectAllOption: ({ label, onSelectItem, isChecked, className, ...otherProps }: SelectAllOptionProps) => JSX.Element;
 declare type CompoundMultiselect = typeof Multiselect$1 & {
     Option: typeof MultiselectOption;
+    SelectAll: typeof SelectAllOption;
 };
 declare const Multiselect: CompoundMultiselect;
-export { Multiselect, MultiselectOption, MultiselectOptionProps, MultiselectProps };
+export { Multiselect, MultiselectOption, MultiselectOptionProps, MultiselectProps, SelectAllOption, SelectAllOptionProps };

package/dist/index.js CHANGED Viewed

@@ -19,8 +19,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var e__default = /*#__PURE__*/_interopDefaultLegacy(e);
 var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
-var ie=Object.defineProperty,se=Object.defineProperties;var le=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var R=(t,o,n)=>o in t?ie(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,x=(t,o)=>{for(var n in o||(o={}))z.call(o,n)&&R(t,n,o[n]);if(S)for(var n of S(o))F.call(o,n)&&R(t,n,o[n]);return t},A=(t,o)=>se(t,le(o));var U=(t,o)=>{var n={};for(var i in t)z.call(t,i)&&o.indexOf(i)<0&&(n[i]=t[i]);if(t!=null&&S)for(var i of S(t))o.indexOf(i)<0&&F.call(t,i)&&(n[i]=t[i]);return n};var I=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r__default["default"].spacing2Xs}),inputField:emotion.css({paddingRight:r__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",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:t=>emotion.css({overflow:"auto",maxHeight:`${t}px`}),list:emotion.css({listStyle:"none",padding:`${r__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${r__default["default"].spacingXs} ${r__default["default"].spacingM}`,lineHeight:r__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:r__default["default"].gray500,margin:r__default["default"].spacingM}),item:emotion.css({padding:`${r__default["default"].spacingXs} ${r__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:r__default["default"].gray100},"&:active":{backgroundColor:r__default["default"].gray200},"&:focus":{boxShadow:r__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r__default["default"].glowPrimary}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var h=L=>{var M=L,{label:t,value:o,itemId:n,onSelectItem:i,searchValue:d,isChecked:u=!1,isDisabled:c=!1,className:y}=M,C=U(M,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let v=I();return e__default["default"].createElement("li",x({className:y},C),e__default["default"].createElement(f36Forms.Checkbox,{id:n,value:o,onChange:f=>i(f),isChecked:u,isDisabled:c,className:emotion.cx(v.item,c&&v.disabled)},e__default["default"].createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${n}`},e__default["default"].createElement(j,{item:t,inputValue:d}))))};function j({item:t,inputValue:o=""}){let{before:n,match:i,after:d}=f36Utils.getStringMatch(t,o);return e__default["default"].createElement(e__default["default"].Fragment,null,n,e__default["default"].createElement("b",{"data-test-id":"cf-multiselect-item-match"},i),d)}j.displayName="HighlightedItem";function ye(t,o){let{className:n,startIcon:i,placeholder:d="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:y="Search",searchInputRef:C,searchInputName:L,noMatchesMessage:M="No matches found",toggleRef:v,isLoading:f=!1,testId:Q="cf-multiselect",popoverProps:T={},children:b,onBlur:P}=t,{listMaxHeight:Y=180,listRef:Z}=T,a=I(),[m,E]=e.useState(""),[N,H]=e.useState(!1),w=e.useRef(null),k=e.useRef(null),B=typeof c=="function",ee=e.useCallback(p=>{E(p.target.value),c==null||c(p);},[c,E]),te=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(w.current,"");let s=new Event("change",{bubbles:!0});w.current.dispatchEvent(s);},oe=e.useCallback(()=>{if(u.length===0)return e__default["default"].createElement(e__default["default"].Fragment,null,d);let p=u.length-1;return p===0?e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," and ",p," more"," ")},[u,d,a.currentSelection]),V=e.useMemo(()=>e__default["default"].Children.count(b),[b]),$=e__default["default"].useCallback(p=>e__default["default"].Children.map(p,s=>{if(e__default["default"].isValidElement(s)){if(s.type===e__default["default"].Fragment||s.type==="div"||s.type==="ul")return $(s.props.children);if(s.type===h){let ne=re=>{var D,X;(D=k.current)==null||D.focus(),(X=s.props)==null||X.onSelectItem(re);};return e__default["default"].cloneElement(s,{searchValue:m,onSelectItem:ne})}return s}return s}),[m]);return e__default["default"].createElement("div",{"data-test-id":Q,className:emotion.cx(a.multiselect,n),ref:o},e__default["default"].createElement(f36Popover.Popover,A(x({renderOnlyWhenOpen:!1},T),{isOpen:N,onClose:()=>H(!1)}),e__default["default"].createElement(f36Popover.Popover.Trigger,null,e__default["default"].createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:v,onClick:()=>H(!N),startIcon:i,endIcon:e__default["default"].createElement(f36Icons.ChevronDownIcon,null)},oe())),e__default["default"].createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(Z,k),className:a.content(Y),testId:"cf-multiselect-container",onBlur:()=>P==null?void 0:P()},e__default["default"].createElement(e__default["default"].Fragment,null,B&&e__default["default"].createElement(e__default["default"].Fragment,null,e__default["default"].createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:m,className:a.inputField,testId:"cf-multiselect-search",placeholder:y,onChange:ee,ref:f36Core.mergeRefs(C,w),name:L}),e__default["default"].createElement(f36Button.IconButton,{"aria-label":m?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:m?e__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):e__default["default"].createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:()=>{m&&te();},isDisabled:!m,size:"small"})),f&&e__default["default"].createElement(Ce,null),!f&&V>0&&e__default["default"].createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},B?$(b):b),!f&&V===0&&e__default["default"].createElement(f36Typography.Subheading,{className:a.noMatchesTitle},M)))))}var Ce=()=>e__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},e__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),J=e__default["default"].forwardRef(ye);var K=J;K.Option=h;
+var ce=Object.defineProperty,pe=Object.defineProperties;var ue=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var F=(t,l,o)=>l in t?ce(t,l,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[l]=o,h=(t,l)=>{for(var o in l||(l={}))W.call(l,o)&&F(t,o,l[o]);if(C)for(var o of C(l))j.call(l,o)&&F(t,o,l[o]);return t},U=(t,l)=>pe(t,ue(l));var P=(t,l)=>{var o={};for(var n in t)W.call(t,n)&&l.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&C)for(var n of C(t))l.indexOf(n)<0&&j.call(t,n)&&(o[n]=t[n]);return o};var M=()=>({multiselect:emotion.css({position:"relative",width:"100%"}),triggerButton:emotion.css({justifyContent:"space-between"}),currentSelection:emotion.css({width:"50%",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",verticalAlign:"bottom",marginRight:r__default["default"].spacing2Xs}),currentSelectionAddition:emotion.css({color:r__default["default"].gray600}),inputField:emotion.css({paddingRight:r__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",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:t=>emotion.css({overflow:"auto",maxHeight:`${t}px`}),list:emotion.css({listStyle:"none",padding:`${r__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${r__default["default"].spacingXs} ${r__default["default"].spacingM}`,lineHeight:r__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:r__default["default"].gray500,margin:r__default["default"].spacingM}),selectAll:emotion.css({"label > *":{fontWeight:"bold"}}),item:emotion.css({label:{padding:`${r__default["default"].spacingXs} ${r__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",hyphens:"auto",display:"flex",flexDirection:"row",alignItems:"center",cursor:"pointer","&:focus, &:hover":{backgroundColor:r__default["default"].gray100},"&:active":{backgroundColor:r__default["default"].gray200},"&:focus":{boxShadow:r__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:r__default["default"].glowPrimary}}}),disabled:emotion.css({opacity:.5,cursor:"not-allowed"})});var d=H=>{var x=H,{label:t,value:l,itemId:o,onSelectItem:n,searchValue:p,isChecked:u=!1,isDisabled:c=!1,className:S}=x,v=P(x,["label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className"]);let y=M();return e__default["default"].createElement("li",h({className:S},v),e__default["default"].createElement(f36Forms.Checkbox,{id:o,value:l,onChange:b=>n(b),isChecked:u,isDisabled:c,className:emotion.cx(y.item,c&&y.disabled)},e__default["default"].createElement(f36Typography.Text,{"data-test-id":`cf-multiselect-list-item-${o}`},e__default["default"].createElement(_,{item:t,inputValue:p}))))};function _({item:t,inputValue:l=""}){let{before:o,match:n,after:p}=f36Utils.getStringMatch(t,l);return e__default["default"].createElement(e__default["default"].Fragment,null,o,e__default["default"].createElement("b",{"data-test-id":"cf-multiselect-item-match"},n),p)}_.displayName="HighlightedItem";var Q=(t,l,o)=>e__default["default"].Children.map(t,n=>{if(!e__default["default"].isValidElement(n))return n;if(l(n))return o(n);let p=Q(n.props.children,l,o);return e__default["default"].cloneElement(n,{children:p})}),Y=(t,l)=>{let o=0;return e__default["default"].Children.forEach(t,n=>{!e__default["default"].isValidElement(n)||(l(n)?o+=1:o+=Y(n.props.children,l));}),o};function Pe(t,l){let{className:o,startIcon:n,placeholder:p="Select one or more Items",currentSelection:u=[],onSearchValueChange:c,searchPlaceholder:S="Search",searchInputRef:v,searchInputName:H,noMatchesMessage:x="No matches found",toggleRef:y,isLoading:b=!1,testId:ee="cf-multiselect",popoverProps:N={},children:I,onBlur:E}=t,{listMaxHeight:te=180,listRef:oe}=N,a=M(),[m,R]=e.useState(""),[B,V]=e.useState(!1),L=e.useRef(null),D=e.useRef(null),$=typeof c=="function",O=e.useCallback(()=>{var i;(i=D.current)==null||i.focus();},[]),le=e.useCallback(i=>{R(i.target.value),c==null||c(i);},[c,R]),ne=e.useCallback(()=>{if(!m)return;O(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(L.current,"");let f=new Event("change",{bubbles:!0});L.current.dispatchEvent(f);},[m,O]),re=e.useCallback(()=>{if(u.length===0)return e__default["default"].createElement(e__default["default"].Fragment,null,p);let i=u.length-1;return i===0?e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]):e__default["default"].createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:a.currentSelection},u[0]," ",e__default["default"].createElement("span",{className:a.currentSelectionAddition},"and ",i," more"))},[u,p,a.currentSelection,a.currentSelectionAddition]),X=e.useMemo(()=>Y(I,i=>i.type===d),[I]),ie=e__default["default"].useCallback(i=>Q(i,f=>f.type===d,f=>{let se=ae=>{var z;O(),(z=f.props)==null||z.onSelectItem(ae);};return e__default["default"].cloneElement(f,{searchValue:m,onSelectItem:se})}),[m,O]);return e__default["default"].createElement("div",{"data-test-id":ee,className:emotion.cx(a.multiselect,o),ref:l},e__default["default"].createElement(f36Popover.Popover,U(h({renderOnlyWhenOpen:!1,isFullWidth:!0},N),{isOpen:B,onClose:()=>V(!1)}),e__default["default"].createElement(f36Popover.Popover.Trigger,null,e__default["default"].createElement(f36Button.Button,{"aria-label":"Toggle Multiselect",ref:y,onClick:()=>V(!B),startIcon:n,endIcon:e__default["default"].createElement(f36Icons.ChevronDownIcon,null),isFullWidth:!0,className:a.triggerButton},re())),e__default["default"].createElement(f36Popover.Popover.Content,{ref:f36Core.mergeRefs(oe,D),className:emotion.cx(a.content(te),N.className),testId:"cf-multiselect-container",onBlur:()=>E==null?void 0:E()},e__default["default"].createElement(e__default["default"].Fragment,null,$&&e__default["default"].createElement(e__default["default"].Fragment,null,e__default["default"].createElement(f36Forms.TextInput,{"aria-label":"Search",type:"text",value:m,className:a.inputField,testId:"cf-multiselect-search",placeholder:S,onChange:le,ref:f36Core.mergeRefs(v,L),name:H,size:"small"}),e__default["default"].createElement(f36Button.IconButton,{"aria-label":m?"Clear search":"Search",className:a.toggleButton,variant:"transparent",icon:m?e__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):e__default["default"].createElement(f36Icons.SearchIcon,{variant:"muted"}),onClick:ne,isDisabled:!m,size:"small"})),b&&e__default["default"].createElement(we,null),!b&&X>0&&e__default["default"].createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},$?ie(I):I),!b&&X===0&&e__default["default"].createElement(f36Typography.Subheading,{className:a.noMatchesTitle},x)))))}var we=()=>e__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16},e__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1})),Z=e__default["default"].forwardRef(Pe);var k=u=>{var c=u,{label:t,onSelectItem:l,isChecked:o=!1,className:n}=c,p=P(c,["label","onSelectItem","isChecked","className"]);let S=M();return e__default["default"].createElement(d,h({value:"all",label:t||o?"Deselect all":"Select all",itemId:"SelectAll",onSelectItem:l,isChecked:o,className:emotion.cx(S.selectAll,n)},p))};var A=Z;A.Option=d;A.SelectAll=k;
-exports.Multiselect = K;
-exports.MultiselectOption = h;
+exports.Multiselect = A;
+exports.MultiselectOption = d;
+exports.SelectAllOption = k;
 //# 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/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","children","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","handleSearchChange","resetSearch","forcedEvent","renderMultiselectLabel","leftoverCount","childrenLength","enrichOptions","child","even","__spreadProps","ListItemLoadingState","Multiselect"],"mappings":"qlBAAA,OAAOA,MAAW,QAClB,OAAS,YAAAC,OAAgB,wBACzB,OAAS,QAAAC,OAAY,6BCFrB,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAuB,KAAO,CACzC,YAAaF,EAAI,CACf,SAAU,WACV,MAAO,MACT,CAAC,EACD,iBAAkBA,EAAI,CACpB,MAAO,MACP,WAAY,SACZ,aAAc,WACd,SAAU,SACV,cAAe,SACf,YAAaC,EAAO,UACtB,CAAC,EACD,WAAYD,EAAI,CACd,aAAcC,EAAO,UACrB,aAAc,WACd,WAAY,SACZ,OAAQ,OACR,aAAc,MACd,aAAc,aAAaA,EAAO,SACpC,CAAC,EACD,aAAcD,EAAI,CAChB,SAAU,WACV,IAAK,MACL,MAAO,MACP,OAAQC,EAAO,cACf,QAASA,EAAO,WAChB,OAAQA,EAAO,SACjB,CAAC,EACD,QAAUE,GACRH,EAAI,CACF,SAAU,OACV,UAAW,GAAGG,KAChB,CAAC,EACH,KAAMH,EAAI,CACR,UAAW,OACX,QAAS,GAAGC,EAAO,cACnB,OAAQ,CACV,CAAC,EACD,WAAYD,EAAI,CACd,QAAS,GAAGC,EAAO,aAAaA,EAAO,WACvC,WAAYA,EAAO,WACrB,CAAC,EACD,eAAgBD,EAAI,CAClB,MAAOC,EAAO,QACd,OAAQA,EAAO,QACjB,CAAC,EACD,KAAMD,EAAI,CACR,QAAS,GAAGC,EAAO,aAAaA,EAAO,WACvC,UAAW,aACX,WAAY,eACZ,QAAS,OACT,QAAS,OACT,cAAe,MACf,WAAY,SACZ,OAAQ,UACR,mBAAoB,CAClB,gBAAiBA,EAAO,OAC1B,EACA,WAAY,CACV,gBAAiBA,EAAO,OAC1B,EACA,UAAW,CACT,UAAWA,EAAO,WACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,WACpB,CACF,CAAC,EACD,SAAUD,EAAI,CACZ,QAAS,GACT,OAAQ,aACV,CAAC,CACH,GD3EA,OAAS,kBAAAI,OAAsB,wBAC/B,OAAS,MAAAC,OAAU,UAaZ,IAAMC,EAAqBC,GAUJ,CAVI,IAAAC,EAAAD,EAChC,OAAAE,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,CA1BF,EAkBkCR,EAS7BS,EAAAC,EAT6BV,EAS7B,CARH,QACA,QACA,SACA,eACA,cACA,YACA,aACA,cAGA,IAAMW,EAASjB,EAAqB,EAEpC,OACEL,EAAA,cAAC,KAAAuB,EAAA,CAAG,UAAWJ,GAAeC,GAC5BpB,EAAA,cAACC,GAAA,CACC,GAAIa,EACJ,MAAOD,EACP,SAAWW,GAAUT,EAAaS,CAAK,EACvC,UAAWP,EACX,WAAYC,EACZ,UAAWV,GAAGc,EAAO,KAAMJ,GAAcI,EAAO,QAAQ,GAExDtB,EAAA,cAACE,GAAA,CAAK,eAAc,4BAA4BY,KAC9Cd,EAAA,cAACyB,EAAA,CAAgB,KAAMb,EAAO,WAAYI,EAAa,CACzD,CACF,CACF,CAEJ,EAEA,SAASS,EAAgB,CACvB,KAAAC,EACA,WAAAC,EAAa,EACf,EAGG,CACD,GAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,CAAM,EAAIvB,GAAemB,EAAMC,CAAU,EAChE,OACE3B,EAAA,cAAAA,EAAA,cACG4B,EACD5B,EAAA,cAAC,KAAE,eAAa,6BAA6B6B,CAAM,EAClDC,CACH,CAEJ,CAEAL,EAAgB,YAAc,kBElE9B,OAAOzB,GAAS,UAAA+B,EAAQ,YAAAC,EAAU,eAAAC,EAAa,WAAAC,OAAe,QAC9D,OAAS,MAAA1B,OAAU,UAEnB,OAAS,aAAA2B,MAAmC,uBAC5C,OAAS,UAAAC,GAAQ,cAAAC,OAAkB,yBACnC,OAAS,aAAAC,OAAiB,wBAC1B,OAAS,aAAAC,GAAW,mBAAAC,GAAiB,cAAAC,OAAkB,wBACvD,OAAS,qBAAAC,GAAmB,oBAAAC,OAAwB,2BACpD,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,cAAAC,OAAkB,6BAuF3B,SAASC,GAAaC,EAAyBC,EAAgC,CAC7E,GAAM,CACJ,UAAA7B,EACA,UAAA8B,EACA,YAAAC,EAAc,2BACd,iBAAAC,EAAmB,CAAC,EACpB,oBAAAC,EACA,kBAAAC,EAAoB,SACpB,eAAAC,EACA,gBAAAC,EACA,iBAAAC,EAAmB,mBACnB,UAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EAAS,iBACT,aAAAC,EAAe,CAAC,EAChB,SAAAC,EACA,OAAAC,CACF,EAAIf,EAEE,CAAE,cAAAzC,EAAgB,IAAK,QAAAyD,CAAQ,EAAIH,EAEnCtC,EAASjB,EAAqB,EAE9B,CAACW,EAAagD,CAAc,EAAIhC,EAAS,EAAE,EAC3C,CAACiC,EAAQC,CAAS,EAAIlC,EAAS,EAAK,EAEpCmC,EAAyBpC,EAAyB,IAAI,EACtDqC,EAAkBrC,EAAyB,IAAI,EAE/CsC,EAAY,OAAOjB,GAAwB,WAE3CkB,GAAqBrC,EACxBT,GAAU,CACTwC,EAAexC,EAAM,OAAO,KAAK,EACjC4B,GAAA,MAAAA,EAAsB5B,EACxB,EACA,CAAC4B,EAAqBY,CAAc,CACtC,EAEMO,GAAc,IAAM,CAIO,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,EAAE,IACqB,KAAKJ,EAAuB,QAAS,EAAE,EAC9D,IAAMK,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EACzDL,EAAuB,QAAQ,cAAcK,CAAW,CAC1D,EAEMC,GAAyBxC,EAAY,IAAM,CAC/C,GAAIkB,EAAiB,SAAW,EAC9B,OAAOnD,EAAA,cAAAA,EAAA,cAAGkD,CAAY,EAExB,IAAMwB,EAAgBvB,EAAiB,OAAS,EAChD,OAAIuB,IAAkB,EAElB1E,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjB6B,EAAiB,EACpB,EAIFnD,EAAA,cAAC,QACC,eAAa,mCACb,UAAWsB,EAAO,kBAEjB6B,EAAiB,GAAG,QAAMuB,EAAc,QAAM,GACjD,CAEJ,EAAG,CAACvB,EAAkBD,EAAa5B,EAAO,gBAAgB,CAAC,EAErDqD,EAAiBzC,GACrB,IAAMlC,EAAM,SAAS,MAAM6D,CAAQ,EACnC,CAACA,CAAQ,CACX,EAGMe,EAAgB5E,EAAM,YACzB6D,GACQ7D,EAAM,SAAS,IAAI6D,EAAWgB,GAAU,CAC7C,GAAI7E,EAAM,eAAe6E,CAAK,EAAG,CAC/B,GACEA,EAAM,OAAS7E,EAAM,UACrB6E,EAAM,OAAS,OACfA,EAAM,OAAS,KAEf,OAAOD,EAAcC,EAAM,MAAM,QAAQ,EAE3C,GAAIA,EAAM,OAASpE,EAAmB,CACpC,IAAMM,GACJ+D,IACG,CAjMjB,IAAApE,EAAAC,GAqMcD,EAAA0D,EAAgB,UAAhB,MAAA1D,EAAyB,SACzBC,EAAAkE,EAAM,QAAN,MAAAlE,EAAa,aAAamE,GAC5B,EACA,OAAO9E,EAAM,aAAa6E,EAAO,CAC/B,YAAA7D,EACA,aAAAD,EACF,CAAoC,CACtC,CACA,OAAO8D,CACT,CACA,OAAOA,CACT,CAAC,EAEH,CAAC7D,CAAW,CACd,EAEA,OACEhB,EAAA,cAAC,OACC,eAAc2D,EACd,UAAWnD,GAAGc,EAAO,YAAaH,CAAS,EAC3C,IAAK6B,GAELhD,EAAA,cAAC4C,EAAAmC,EAAAxD,EAAA,CACC,mBAAoB,IAChBqC,GAFL,CAIC,OAAQK,EACR,QAAS,IAAMC,EAAU,EAAK,IAE9BlE,EAAA,cAAC4C,EAAQ,QAAR,KACC5C,EAAA,cAACoC,GAAA,CACC,aAAW,qBACX,IAAKqB,EACL,QAAS,IAAMS,EAAU,CAACD,CAAM,EAChC,UAAWhB,EACX,QAASjD,EAAA,cAACwC,GAAA,IAAgB,GAEzBiC,GAAuB,CAC1B,CACF,EACAzE,EAAA,cAAC4C,EAAQ,QAAR,CACC,IAAKT,EAAU4B,EAASK,CAAe,EACvC,UAAW9C,EAAO,QAAQhB,CAAa,EACvC,OAAO,2BACP,OAAQ,IAAMwD,GAAA,YAAAA,KAEd9D,EAAA,cAAAA,EAAA,cACGqE,GACCrE,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACsC,GAAA,CACC,aAAW,SACX,KAAK,OACL,MAAOtB,EACP,UAAWM,EAAO,WAClB,OAAO,wBACP,YAAa+B,EACb,SAAUiB,GACV,IAAKnC,EAAUmB,EAAgBa,CAAsB,EACrD,KAAMZ,EACR,EACAvD,EAAA,cAACqC,GAAA,CACC,aAAYrB,EAAc,eAAiB,SAC3C,UAAWM,EAAO,aAClB,QAAQ,cACR,KACEN,EACEhB,EAAA,cAACuC,GAAA,CAAU,QAAQ,QAAQ,EAE3BvC,EAAA,cAACyC,GAAA,CAAW,QAAQ,QAAQ,EAGhC,QAAS,IAAM,CACTzB,GACFuD,GAAY,CAEhB,EACA,WAAY,CAACvD,EACb,KAAK,QACP,CACF,EAED0C,GAAa1D,EAAA,cAACgF,GAAA,IAAqB,EAEnC,CAACtB,GAAaiB,EAAiB,GAC9B3E,EAAA,cAAC,MAAG,UAAWsB,EAAO,KAAM,eAAa,wBACtC+C,EAAYO,EAAcf,CAAQ,EAAIA,CACzC,EAGD,CAACH,GAAaiB,IAAmB,GAChC3E,EAAA,cAAC6C,GAAA,CAAW,UAAWvB,EAAO,gBAC3BkC,CACH,CAEJ,CACF,CACF,CACF,CAEJ,CAEA,IAAMwB,GAAuB,IAEzBhF,EAAA,cAAC0C,GAAA,CAAkB,UAAW,IAC5B1C,EAAA,cAAC2C,GAAA,CAAiB,cAAe,EAAG,CACtC,EAQSsC,EAAcjF,EAAM,WAAW8C,EAAY,EC/SjD,IAAMmC,EAAcA,EAC3BA,EAAY,OAASxE","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={className} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n item: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\n\nexport interface MultiselectProps extends CommonProps {\n /** Select Options /\n children?: React.ReactNode;\n\n /\n Set a custom icon for the text input\n /\n startIcon?: React.ReactElement;\n\n /\n Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n /\n placeholder?: string;\n\n /\n current Selected items, to be shown on the trigger button\n /\n currentSelection?: Array<string>;\n\n /\n Function called whenever the search input value changes\n /\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void \| undefined;\n\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n searchPlaceholder?: string;\n\n /\n A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n /\n noMatchesMessage?: string;\n\n /\n Use this prop to get a ref to the input element of the component\n /\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /\n Pass a form name to the search text input\n /\n searchInputName?: string;\n\n /\n Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /\n Props to pass to the Popover (Dropdown) component\n /\n popoverProps?: Partial<PopoverProps> & {\n /\n It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n /\n listMaxHeight?: number;\n\n /\n Use this prop to get a ref to the list of items of the component\n /\n listRef?: React.Ref<HTMLUListElement>;\n };\n\n /\n Function called when the popover loses its focus.\n /\n onBlur?: () => void;\n}\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearch = () => {\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n };\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]} and {leftoverCount} more{' '}\n </span>\n );\n }, [currentSelection, placeholder, styles.currentSelection]);\n\n const childrenLength = useMemo(\n () => React.Children.count(children),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n if (\n child.type === React.Fragment \|\|\n child.type === 'div' \|\|\n child.type === 'ul'\n ) {\n return enrichOptions(child.props.children);\n }\n if (child.type === MultiselectOption) {\n const onSelectItem = (\n even: React.ChangeEvent<HTMLInputElement>,\n ) => {\n // Selecting an item triggers a rerendering and thereby losing the\n // focus on the clicked element. To avoid having the focus on the document body\n // (which breaks `closeOnBlur`), we force it back to the list in the popup.\n internalListRef.current?.focus();\n child.props?.onSelectItem(even);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n }\n return child;\n }\n return child;\n });\n },\n [searchValue],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={styles.content(listMaxHeight)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n />\n <IconButton\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={() => {\n if (searchValue) {\n resetSearch();\n }\n }}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\n )}\n {isLoading && <ListItemLoadingState />}\n\n {!isLoading && childrenLength > 0 && (\n <ul className={styles.list} data-test-id=\"cf-multiselect-items\">\n {hasSearch ? enrichOptions(children) : children}\n </ul>\n )}\n\n {!isLoading && childrenLength === 0 && (\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n )}\n </>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/\n The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\n"]}
1	+ {"version":3,"sources":["../src/MultiselectOption.tsx","../src/Multiselect.styles.ts","../src/Multiselect.tsx","../src/SelectAllOption.tsx","../src/CompoundMultiselect.tsx"],"names":["React","Checkbox","Text","css","tokens","getMultiselectStyles","listMaxHeight","getStringMatch","cx","MultiselectOption","_a","_b","label","value","itemId","onSelectItem","searchValue","isChecked","isDisabled","className","rest","__objRest","styles","__spreadValues","event","HighlightedItem","item","inputValue","before","match","after","useRef","useState","useCallback","useMemo","mergeRefs","Button","IconButton","TextInput","CloseIcon","ChevronDownIcon","SearchIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","iterateOverChildren","children","filter","callback","child","childChildren","countMatchingChildren","counter","_Multiselect","props","ref","startIcon","placeholder","currentSelection","onSearchValueChange","searchPlaceholder","searchInputRef","searchInputName","noMatchesMessage","toggleRef","isLoading","testId","popoverProps","onBlur","listRef","setSearchValue","isOpen","setIsOpen","internalSearchInputRef","internalListRef","hasSearch","focusList","handleSearchChange","resetSearchInput","forcedEvent","renderMultiselectLabel","leftoverCount","optionsLength","enrichOptions","__spreadProps","ListItemLoadingState","Multiselect","SelectAllOption","otherProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox } from '@contentful/f36-forms';\nimport { Text } from '@contentful/f36-typography';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { cx } from 'emotion';\n\nexport interface MultiselectOptionProps {\n label: string;\n value: string;\n itemId: string;\n searchValue?: string;\n className?: string;\n onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;\n isChecked?: boolean;\n isDisabled?: boolean;\n}\n\nexport const MultiselectOption = ({\n label,\n value,\n itemId,\n onSelectItem,\n searchValue,\n isChecked = false,\n isDisabled = false,\n className,\n ...rest\n}: MultiselectOptionProps) => {\n const styles = getMultiselectStyles();\n\n return (\n <li className={className} {...rest}>\n <Checkbox\n id={itemId}\n value={value}\n onChange={(event) => onSelectItem(event)}\n isChecked={isChecked}\n isDisabled={isDisabled}\n className={cx(styles.item, isDisabled && styles.disabled)}\n >\n <Text data-test-id={`cf-multiselect-list-item-${itemId}`}>\n <HighlightedItem item={label} inputValue={searchValue} />\n </Text>\n </Checkbox>\n </li>\n );\n};\n\nfunction HighlightedItem({\n item,\n inputValue = '',\n}: {\n item: string;\n inputValue?: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n return (\n <>\n {before}\n <b data-test-id=\"cf-multiselect-item-match\">{match}</b>\n {after}\n </>\n );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getMultiselectStyles = () => ({\n multiselect: css({\n position: 'relative',\n width: '100%',\n }),\n triggerButton: css({\n justifyContent: 'space-between',\n }),\n currentSelection: css({\n width: '50%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n verticalAlign: 'bottom',\n marginRight: tokens.spacing2Xs,\n }),\n currentSelectionAddition: css({\n color: tokens.gray600,\n }),\n inputField: css({\n paddingRight: tokens.spacingXl,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n border: 'none',\n borderRadius: '0px',\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n toggleButton: css({\n position: 'absolute',\n top: '1px',\n right: '1px',\n zIndex: tokens.zIndexDefault,\n padding: tokens.spacing2Xs,\n height: tokens.spacingXl,\n }),\n content: (listMaxHeight: number) =>\n css({\n overflow: 'auto',\n maxHeight: `${listMaxHeight}px`,\n }),\n list: css({\n listStyle: 'none',\n padding: `${tokens.spacingXs} 0`,\n margin: 0,\n }),\n groupTitle: css({\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n lineHeight: tokens.lineHeightM,\n }),\n noMatchesTitle: css({\n color: tokens.gray500,\n margin: tokens.spacingM,\n }),\n selectAll: css({\n 'label > ': {\n fontWeight: 'bold',\n },\n }),\n item: css({\n label: {\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n hyphens: 'auto',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n cursor: 'pointer',\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n },\n }),\n disabled: css({\n opacity: 0.5,\n cursor: 'not-allowed',\n }),\n});\n","import React, { useRef, useState, useCallback, useMemo } from 'react';\nimport { cx } from 'emotion';\n\nimport { mergeRefs, type CommonProps } from '@contentful/f36-core';\nimport { Button, IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon, SearchIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover, type PopoverProps } from '@contentful/f36-popover';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\n\nexport interface MultiselectProps extends CommonProps {\n /* Select Options /\n children?: React.ReactNode;\n\n /\n Set a custom icon for the text input\n /\n startIcon?: React.ReactElement;\n\n /\n Placeholder shown before selecting any elements. Defaults to 'Select one or more items'\n /\n placeholder?: string;\n\n /\n current Selected items, to be shown on the trigger button\n /\n currentSelection?: Array<string>;\n\n /\n Function called whenever the search input value changes\n /\n onSearchValueChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void \| undefined;\n\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n searchPlaceholder?: string;\n\n /\n A message that will be shown when it is not possible to find any option that matches the input value\n * @default \"No matches\"\n /\n noMatchesMessage?: string;\n\n /\n Use this prop to get a ref to the input element of the component\n /\n searchInputRef?: React.Ref<HTMLInputElement>;\n\n /\n Pass a form name to the search text input\n /\n searchInputName?: string;\n\n /\n Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\n\n /\n Props to pass to the Popover (Dropdown) component\n /\n popoverProps?: Partial<PopoverProps> & {\n /\n It sets the max-height, in pixels, of the list\n * The default value is the height of 5 single line items\n * @default 180\n /\n listMaxHeight?: number;\n\n /\n Use this prop to get a ref to the list of items of the component\n /\n listRef?: React.Ref<HTMLUListElement>;\n } & Pick<CommonProps, 'className'>;\n\n /\n Function called when the popover loses its focus.\n /\n onBlur?: () => void;\n}\n\n// Scan through the whole hierachy until `filter` returns true and apply `transform`\n// Inspired from https://stackoverflow.com/a/70676868/17269164\nconst iterateOverChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n callback: (child: React.ReactElement) => React.ReactElement \| void,\n): React.ReactNode => {\n return React.Children.map(children, (child) => {\n // equal to (if (child == null \|\| typeof child == 'string'))\n if (!React.isValidElement(child)) return child;\n if (filter(child)) {\n return callback(child);\n }\n const childChildren = iterateOverChildren(\n child.props.children,\n filter,\n callback,\n );\n return React.cloneElement(child, { children: childChildren } as unknown);\n });\n};\n\n// Scan through the whole hierachy to count the number of children where `filter` returns true\nconst countMatchingChildren = (\n children: React.ReactNode,\n filter: (child: React.ReactElement) => boolean,\n): number => {\n let counter = 0;\n React.Children.forEach(children, (child) => {\n // equal to (if (child == null \|\| typeof child == 'string'))\n if (!React.isValidElement(child)) return;\n if (!filter(child)) {\n counter += countMatchingChildren(child.props.children, filter);\n } else {\n counter += 1;\n }\n });\n return counter;\n};\n\nfunction _Multiselect(props: MultiselectProps, ref: React.Ref<HTMLDivElement>) {\n const {\n className,\n startIcon,\n placeholder = 'Select one or more Items',\n currentSelection = [],\n onSearchValueChange,\n searchPlaceholder = 'Search',\n searchInputRef,\n searchInputName,\n noMatchesMessage = 'No matches found',\n toggleRef,\n isLoading = false,\n testId = 'cf-multiselect',\n popoverProps = {},\n children,\n onBlur,\n } = props;\n\n const { listMaxHeight = 180, listRef } = popoverProps;\n\n const styles = getMultiselectStyles();\n\n const [searchValue, setSearchValue] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n\n const internalSearchInputRef = useRef<HTMLInputElement>(null);\n const internalListRef = useRef<HTMLUListElement>(null);\n\n const hasSearch = typeof onSearchValueChange === 'function';\n\n const focusList = useCallback(() => {\n // Clearing the search input or selecting an item triggers a rerendering and\n // thereby the client loses the focus on the clicked element. To avoid having\n // the focus on the document body (which breaks `closeOnBlur`), we force it\n // back to the list in the popup.\n internalListRef.current?.focus();\n }, []);\n\n const handleSearchChange = useCallback(\n (event) => {\n setSearchValue(event.target.value);\n onSearchValueChange?.(event);\n },\n [onSearchValueChange, setSearchValue],\n );\n\n const resetSearchInput = useCallback(() => {\n if (!searchValue) return;\n focusList();\n // this looks a bit hacky, but is the official way of externally triggering the onChange handler for an input\n // https://stackoverflow.com/a/46012210/17269164\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value',\n ).set;\n nativeInputValueSetter.call(internalSearchInputRef.current, '');\n const forcedEvent = new Event('change', { bubbles: true });\n internalSearchInputRef.current.dispatchEvent(forcedEvent);\n }, [searchValue, focusList]);\n\n const renderMultiselectLabel = useCallback(() => {\n if (currentSelection.length === 0) {\n return <>{placeholder}</>;\n }\n const leftoverCount = currentSelection.length - 1;\n if (leftoverCount === 0) {\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}\n </span>\n );\n }\n return (\n <span\n data-test-id=\"cf-multiselect-current-selection\"\n className={styles.currentSelection}\n >\n {currentSelection[0]}{' '}\n <span className={styles.currentSelectionAddition}>\n and {leftoverCount} more\n </span>\n </span>\n );\n }, [\n currentSelection,\n placeholder,\n styles.currentSelection,\n styles.currentSelectionAddition,\n ]);\n\n const optionsLength = useMemo(\n () =>\n countMatchingChildren(\n children,\n (child) => child.type === MultiselectOption,\n ),\n [children],\n );\n\n // clones and enriches the multiselect options\n const enrichOptions = React.useCallback(\n (children: React.ReactNode): React.ReactNode => {\n return iterateOverChildren(\n children,\n (child) => child.type === MultiselectOption,\n (child) => {\n const onSelectItem = (event: React.ChangeEvent<HTMLInputElement>) => {\n focusList();\n child.props?.onSelectItem(event);\n };\n return React.cloneElement(child, {\n searchValue,\n onSelectItem,\n } as Partial<MultiselectOptionProps>);\n },\n );\n },\n [searchValue, focusList],\n );\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.multiselect, className)}\n ref={ref}\n >\n <Popover\n renderOnlyWhenOpen={false}\n isFullWidth\n {...popoverProps}\n // popoverProps should never overwrite the internal opening logic\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Popover.Trigger>\n <Button\n aria-label=\"Toggle Multiselect\"\n ref={toggleRef}\n onClick={() => setIsOpen(!isOpen)}\n startIcon={startIcon}\n endIcon={<ChevronDownIcon />}\n isFullWidth\n className={styles.triggerButton}\n >\n {renderMultiselectLabel()}\n </Button>\n </Popover.Trigger>\n <Popover.Content\n ref={mergeRefs(listRef, internalListRef)}\n className={cx(styles.content(listMaxHeight), popoverProps.className)}\n testId=\"cf-multiselect-container\"\n onBlur={() => onBlur?.()}\n >\n <>\n {hasSearch && (\n <>\n <TextInput\n aria-label=\"Search\"\n type=\"text\"\n value={searchValue}\n className={styles.inputField}\n testId=\"cf-multiselect-search\"\n placeholder={searchPlaceholder}\n onChange={handleSearchChange}\n ref={mergeRefs(searchInputRef, internalSearchInputRef)}\n name={searchInputName}\n size=\"small\"\n />\n <IconButton\n aria-label={searchValue ? 'Clear search' : 'Search'}\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n searchValue ? (\n <CloseIcon variant=\"muted\" />\n ) : (\n <SearchIcon variant=\"muted\" />\n )\n }\n onClick={resetSearchInput}\n isDisabled={!searchValue}\n size=\"small\"\n />\n </>\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 </>\n </Popover.Content>\n </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n );\n};\n\n/\n The Multiselect is a component that will allow a user to select multiple items.\n * It has an optional\n */\nexport const Multiselect = React.forwardRef(_Multiselect);\n","import React from 'react';\nimport { MultiselectOption, MultiselectOptionProps } from './MultiselectOption';\nimport { getMultiselectStyles } from './Multiselect.styles';\nimport { cx } from 'emotion';\n\nexport interface SelectAllOptionProps\n extends Omit<MultiselectOptionProps, 'value' \| 'itemId' \| 'label'> {\n label?: string;\n}\n\nexport const SelectAllOption = ({\n label,\n onSelectItem,\n isChecked = false,\n className,\n ...otherProps\n}: SelectAllOptionProps) => {\n const styles = getMultiselectStyles();\n const displayLabel = label \|\| isChecked ? 'Deselect all' : 'Select all';\n return (\n <MultiselectOption\n value=\"all\"\n label={displayLabel}\n itemId=\"SelectAll\"\n onSelectItem={onSelectItem}\n isChecked={isChecked}\n className={cx(styles.selectAll, className)}\n {...otherProps}\n />\n );\n};\n","import { Multiselect as OriginalMultiSelect } from './Multiselect';\nimport { MultiselectOption } from './MultiselectOption';\nimport { SelectAllOption } from './SelectAllOption';\n\ntype CompoundMultiselect = typeof OriginalMultiSelect & {\n Option: typeof MultiselectOption;\n SelectAll: typeof SelectAllOption;\n};\n\nexport const Multiselect = OriginalMultiSelect as CompoundMultiselect;\nMultiselect.Option = MultiselectOption;\nMultiselect.SelectAll = SelectAllOption;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-multiselect",
-  "version": "4.20.9",
+  "version": "4.20.11",
   "description": "Forma 36: Multiselect Component",
   "scripts": {
     "build": "tsup"