@contentful/f36-multiselect 6.0.0-alpha.7 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/package.json +11 -11
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n,{useState,useRef,useCallback,useMemo}from'react';import {Checkbox,TextInput}from'@contentful/f36-forms';import {Subheading,Text}from'@contentful/f36-typography';import {css
|
|
1
|
+
import n,{useState,useRef,useCallback,useMemo}from'react';import {Checkbox,TextInput}from'@contentful/f36-forms';import {Subheading,Text}from'@contentful/f36-typography';import {cx,css}from'@emotion/css';import i from'@contentful/f36-tokens';import {Flex,mergeRefs,getMenuItemStyles}from'@contentful/f36-core';import {getStringMatch}from'@contentful/f36-utils';import {Button,IconButton}from'@contentful/f36-button';import {CaretDownIcon,XIcon,MagnifyingGlassIcon}from'@contentful/f36-icons';import {SkeletonContainer,SkeletonBodyText}from'@contentful/f36-skeleton';import {Popover}from'@contentful/f36-popover';var de=Object.defineProperty,ge=Object.defineProperties;var fe=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var j=(e,t,o)=>t in e?de(e,t,{enumerable:true,configurable:true,writable:true,value:o}):e[t]=o,M=(e,t)=>{for(var o in t||(t={}))U.call(t,o)&&j(e,o,t[o]);if(B)for(var o of B(t))G.call(t,o)&&j(e,o,t[o]);return e},H=(e,t)=>ge(e,fe(t));var L=(e,t)=>{var o={};for(var l in e)U.call(e,l)&&t.indexOf(l)<0&&(o[l]=e[l]);if(e!=null&&B)for(var l of B(e))t.indexOf(l)<0&&G.call(e,l)&&(o[l]=e[l]);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:i.spacing2Xs}),currentSelectionWithClearButton:css({paddingRight:"40px"}),currentSelectionAddition:css({color:i.gray600}),searchBar:css({paddingTop:i.spacing2Xs,position:"sticky",top:"0px",zIndex:i.zIndexWorkbenchHeader,backgroundColor:i.colorWhite}),inputField:css({padding:`6px ${i.spacingXl} 10px ${i.spacingXs}`,textOverflow:"ellipsis",whiteSpace:"nowrap",border:"none",borderRadius:"0px",borderBottom:`1px solid ${i.gray200}`,boxShadow:"none","&:focus, &:active, &:active:hover":{boxShadow:"none",borderBottom:`1px solid ${i.gray200}`}}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:i.zIndexDefault,padding:i.spacing2Xs,height:i.spacingXl}),content:e=>css({overflow:"auto",maxHeight:`${e}px`}),container:css({}),list:css({listStyle:"none",padding:`${i.spacing2Xs}`,margin:0}),groupTitle:css({padding:`6px ${i.spacingXs}`,lineHeight:i.lineHeightM}),noMatchesTitle:css({color:i.gray500,margin:i.spacingM,textAlign:"center"}),clearSelectionButton:css({marginLeft:"-80px"}),selectAll:css({borderBottom:`1px solid ${i.gray200}`,marginBottom:i.spacing2Xs,paddingBottom:i.spacing2Xs,"label > *":{fontWeight:i.fontWeightMedium}}),option:css({listStyleType:"none"}),optionText:css({alignItems:"center",display:"flex",span:{color:i.gray900,fontWeight:i.fontWeightDemiBold}}),optionCheck:({isActive:e,isDisabled:t})=>css({label:cx(getMenuItemStyles({isActive:e,isDisabled:t}),css({width:"100%"}))})});var J=n.createContext(void 0),K=()=>{let e=n.useContext(J);if(e===void 0)throw new Error("component must be rendered within a Accordion component");return e},Q=J.Provider;var b=f=>{var h=f,{children:e,label:t,value:o,itemId:l,onSelectItem:s,isChecked:c=false,isDisabled:g=false,className:v}=h,p=L(h,["children","label","value","itemId","onSelectItem","isChecked","isDisabled","className"]);let x=S(),{focusList:u,searchValue:y}=K();return n.createElement("li",M({className:cx(x.option,v)},p),n.createElement(Checkbox,{id:l,value:o,onChange:C=>{u(),s(C);},isChecked:c,isDisabled:g,className:x.optionCheck({isActive:c,isDisabled:g})},n.createElement(Text,{className:x.optionText,"data-test-id":`cf-multiselect-list-item-${l}`},typeof t=="string"?n.createElement(T,{item:t,inputValue:y}):e)))};function T({item:e,inputValue:t=""}){let{before:o,match:l,after:s}=getStringMatch(e,t.trim());return o.length+l.length+s.length===0?n.createElement(n.Fragment,null,e):n.createElement(n.Fragment,null,o,n.createElement("span",{"data-test-id":"cf-multiselect-item-match"},l),s)}T.displayName="HighlightedItem";var _=({searchValue:e,setSearchValue:t,onSearchValueChange:o,searchInputName:l,searchInputRef:s,resetSearchRef:c,searchPlaceholder:g="Search",focusList:v})=>{let p=S(),f=useRef(null),h=useCallback(u=>{t(u.target.value),o==null||o(u);},[o,t]),x=useCallback(()=>{if(!e)return;v(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(f.current,"");let y=new Event("change",{bubbles:true});f.current.dispatchEvent(y);},[e,v]);return n.createElement("div",{className:p.searchBar},n.createElement(TextInput,{"aria-label":"Search",type:"text",value:e,className:p.inputField,testId:"cf-multiselect-search",placeholder:g,onChange:h,ref:mergeRefs(s,f),name:l,size:"small"}),n.createElement(IconButton,{ref:c,"aria-label":e?"Clear search":"Search",className:p.toggleButton,variant:"transparent",icon:e?n.createElement(XIcon,{color:i.gray600}):n.createElement(MagnifyingGlassIcon,{color:i.gray600}),onClick:x,isDisabled:!e,size:"small"}))};var le=(e,t)=>{let o=0;return n.Children.forEach(e,l=>{if(!n.isValidElement(l))return;let s=l;t(s)?o+=1:o+=le(s.props.children,t);}),o};function ne(e,t){let{className:o,startIcon:l,placeholder:s="Select one or more Items",currentSelection:c=[],toggleRef:g,toggleButtonAriaLabel:v="Toggle Multiselect",isLoading:p=false,testId:f="cf-multiselect",noMatchesMessage:h="No matches found",searchProps:x={},popoverProps:u={},children:y,onBlur:C,onClearSelection:I,clearButtonProps:O={tooltip:"Clear selection",ariaLabel:"Clear selection"}}=e,{listMaxHeight:re=180,listRef:se,onClose:X}=u,a=S(),[w,ce]=useState(""),[D,$]=useState(false),z=useRef(null),A=c.length>1&&typeof I=="function",ae=typeof x.onSearchValueChange=="function",k=useCallback(()=>{var m;(m=z.current)==null||m.focus();},[]),pe=m=>{I==null||I(),m.stopPropagation();},ue=useCallback(()=>{if(c.length===0)return n.createElement(n.Fragment,null,s);let m=c.length-1,V=cx(a.currentSelection,A&&a.currentSelectionWithClearButton);return m===0?n.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:V},c[0]):n.createElement("span",{"data-test-id":"cf-multiselect-current-selection",className:V},c[0]," ",n.createElement("span",{className:a.currentSelectionAddition},"and ",m," more"))},[c,s,A,a.currentSelection,a.currentSelectionAddition,a.currentSelectionWithClearButton]),F=useMemo(()=>le(y,m=>m.type===b),[y]),me=useMemo(()=>({focusList:k,searchValue:w}),[k,w]);return n.createElement(Q,{value:me},n.createElement("div",{"data-test-id":f,className:cx(a.multiselect,o),ref:t},n.createElement(Popover,H(M({renderOnlyWhenOpen:false,isFullWidth:true},u),{isOpen:D,onClose:()=>{$(false),X&&X();}}),n.createElement(Flex,{alignItems:"center"},n.createElement(Popover.Trigger,{ref:g},n.createElement(Button,M({"aria-label":v,onClick:()=>$(!D),startIcon:l,endIcon:n.createElement(CaretDownIcon,null),isFullWidth:true,className:a.triggerButton},e.triggerButtonProps),ue())),A&&n.createElement("div",{className:a.clearSelectionButton},n.createElement(IconButton,{onClick:pe,icon:n.createElement(XIcon,null),"aria-label":O.ariaLabel?O.ariaLabel:"Clear selection",size:"small",withTooltip:true,tooltipProps:{content:O.tooltip?O.tooltip:"Clear selection",showDelay:800,placement:"top",as:"div"}}))),n.createElement(Popover.Content,{ref:mergeRefs(se,z),className:cx(a.content(re),u.className,a.container),testId:"cf-multiselect-container",onBlur:()=>C==null?void 0:C()},ae&&n.createElement(_,H(M({},x),{setSearchValue:ce,searchValue:w,focusList:k})),p&&n.createElement(Xe,null),!p&&F>0&&n.createElement("ul",{className:a.list,"data-test-id":"cf-multiselect-items"},y),!p&&F===0&&n.createElement(Subheading,{className:a.noMatchesTitle},h)))))}var Xe=()=>n.createElement(SkeletonContainer,{svgHeight:16},n.createElement(SkeletonBodyText,{numberOfLines:1}));ne.displayName="Multiselect";var ie=n.forwardRef(ne);var W=v=>{var p=v,{label:e,itemId:t="SelectAll",onSelectItem:o,isChecked:l=false,selectAllOptionLabel:s={checked:"Deselect all",unchecked:"Select all"},className:c}=p,g=L(p,["label","itemId","onSelectItem","isChecked","selectAllOptionLabel","className"]);let f=S(),h=e||l?s.checked:s.unchecked;return n.createElement(b,M({value:"all",label:h,itemId:t,onSelectItem:o,isChecked:l,className:cx(f.selectAll,c)},g))};var N=ie;N.HighlightedItem=T;N.Option=b;N.SelectAll=W;export{N as Multiselect,b as MultiselectOption,W as SelectAllOption};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-multiselect",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.0",
|
|
4
4
|
"description": "Forma 36: Multiselect Component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@babel/runtime": "^7.27.1",
|
|
10
|
-
"@contentful/f36-button": "^6.
|
|
11
|
-
"@contentful/f36-core": "^6.
|
|
12
|
-
"@contentful/f36-forms": "^6.
|
|
13
|
-
"@contentful/f36-icons": "^6.
|
|
14
|
-
"@contentful/f36-popover": "^6.
|
|
15
|
-
"@contentful/f36-skeleton": "^6.
|
|
16
|
-
"@contentful/f36-tokens": "^6.
|
|
17
|
-
"@contentful/f36-tooltip": "^6.
|
|
18
|
-
"@contentful/f36-typography": "^6.
|
|
19
|
-
"@contentful/f36-utils": "^6.
|
|
10
|
+
"@contentful/f36-button": "^6.1.0",
|
|
11
|
+
"@contentful/f36-core": "^6.1.0",
|
|
12
|
+
"@contentful/f36-forms": "^6.1.0",
|
|
13
|
+
"@contentful/f36-icons": "^6.1.0",
|
|
14
|
+
"@contentful/f36-popover": "^6.1.0",
|
|
15
|
+
"@contentful/f36-skeleton": "^6.1.0",
|
|
16
|
+
"@contentful/f36-tokens": "^6.1.0",
|
|
17
|
+
"@contentful/f36-tooltip": "^6.1.0",
|
|
18
|
+
"@contentful/f36-typography": "^6.1.0",
|
|
19
|
+
"@contentful/f36-utils": "^6.1.0",
|
|
20
20
|
"@emotion/css": "^11.13.5"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|