@contentful/f36-autocomplete 6.0.0-alpha.5 → 6.0.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 +10 -10
package/dist/esm/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import i,{useState,useRef,useCallback}from'react';import {css
|
|
1
|
+
import i,{useState,useRef,useCallback}from'react';import {cx,css}from'@emotion/css';import {useCombobox}from'downshift';import {mergeRefs,getMenuItemStyles}from'@contentful/f36-core';import {IconButton}from'@contentful/f36-button';import {TextInput}from'@contentful/f36-forms';import {CaretDownIcon,XIcon}from'@contentful/f36-icons';import {Skeleton}from'@contentful/f36-skeleton';import {Popover}from'@contentful/f36-popover';import {Subheading,SectionHeading,Text}from'@contentful/f36-typography';import {getStringMatch}from'@contentful/f36-utils';import a from'@contentful/f36-tokens';var Ge=Object.defineProperty,Ne=Object.defineProperties;var Re=Object.getOwnPropertyDescriptors;var H=Object.getOwnPropertySymbols;var Q=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var J=(t,o,n)=>o in t?Ge(t,o,{enumerable:true,configurable:true,writable:true,value:n}):t[o]=n,u=(t,o)=>{for(var n in o||(o={}))Q.call(o,n)&&J(t,n,o[n]);if(H)for(var n of H(o))Y.call(o,n)&&J(t,n,o[n]);return t},c=(t,o)=>Ne(t,Re(o));var Z=(t,o)=>{var n={};for(var s in t)Q.call(t,s)&&o.indexOf(s)<0&&(n[s]=t[s]);if(t!=null&&H)for(var s of H(t))o.indexOf(s)<0&&Y.call(t,s)&&(n[s]=t[s]);return n};var w=t=>({autocomplete:css({position:"relative",width:"100%"}),inputField:css({paddingRight:a.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:1,padding:a.spacing2Xs,minHeight:"calc(100% - 2px)"}),content:css({overflow:"auto",maxHeight:`${t}px`}),list:css({listStyle:"none",padding:`${a.spacingXs} ${a.spacing2Xs}`,margin:0}),groupTitle:css({padding:`${a.spacingXs} ${a.spacingM}`,lineHeight:a.lineHeightM}),noMatchesTitle:css({color:a.gray500,margin:`${a.spacingM} 0 ${a.spacingM} 0`}),item:({isActive:o=false,isDisabled:n=false})=>cx(getMenuItemStyles({isActive:o,isDisabled:n})),highlighted:css({backgroundColor:a.gray100}),hidden:css({display:"none"})});var A=t=>{let{items:o,elementStartIndex:n,highlightedIndex:s,getItemProps:I,renderItem:P,inputValue:V,listMaxHeight:C=180}=t,b=w(C),G=(p,r)=>P?P(p,r):typeof p=="string"?i.createElement(ee,{item:p,inputValue:r}):i.isValidElement(p)?p:(console.error("Only valid React elements are supported - https://react.dev/reference/react/isValidElement"),null);return i.createElement("ul",{className:b.list,"data-test-id":"cf-autocomplete-list"},o.map((p,r)=>{let h=n+r,y=I({item:p,index:h});return i.createElement(Text,c(u({},y),{as:"li",key:h,className:cx([b.item({}),s===h&&b.highlighted]),"data-highlighted":s===h,"data-test-id":`cf-autocomplete-list-item-${h}`}),G(p,V))}))};A.displayName="AutocompleteItems";function ee({item:t,inputValue:o}){let{before:n,match:s,after:I}=getStringMatch(t,o);return i.createElement(i.Fragment,null,n,i.createElement("b",null,s),I)}ee.displayName="HighlightedItem";function je(t,o){let{isOpen:n,onClose:s,onOpen:I,id:P,className:V,textOnAfterSelect:C="replace",closeAfterSelect:b=true,defaultValue:G="",selectedItem:p,items:r,inputValue:h,onInputValueChange:y,onSelectItem:se,onFocus:N,onBlur:R,renderItem:U,icon:re=i.createElement(CaretDownIcon,{color:a.gray600}),itemToString:le=e=>e,isInvalid:ae,isDisabled:W,isRequired:pe,isReadOnly:me,showEmptyList:ue,noMatchesMessage:ce="No matches found",placeholder:de="Search",inputRef:ge,toggleRef:he,listRef:Ie,listWidth:fe="auto",listMaxHeight:ye=180,isGrouped:S=false,isLoading:M=false,usePortal:Te=false,testId:be="cf-autocomplete",popoverTestId:ve="cf-autocomplete-container",showClearButton:k,aria:_={clearSelectionIconLabel:"Clear",showListIconLabel:"Show list"}}=t,m=w(ye),[xe,Pe]=useState(G),v=typeof h=="undefined"?xe:h,Ce=useRef(null),x=useCallback(e=>{Pe(e),y==null||y(e);},[y]),Se=useCallback(e=>{let l=e.target.value;x(l);},[x]),Me=O(S)?r.reduce((e,l)=>[...e,...l.options],[]):r,Le=O(S)?r.every(e=>e.options.length===0):r.length===0,{getInputProps:Ee,getItemProps:q,getMenuProps:He,getToggleButtonProps:we,highlightedIndex:K,isOpen:Ae,toggleMenu:Oe}=useCombobox({isOpen:n,onIsOpenChange:({isOpen:e})=>{e?I==null||I():s==null||s();},stateReducer:(e,{type:l,changes:T})=>{switch(l){case useCombobox.stateChangeTypes.InputBlur:return c(u({},T),{inputValue:e.inputValue});case useCombobox.stateChangeTypes.InputKeyDownEnter:case useCombobox.stateChangeTypes.ItemClick:return b?T:c(u({},T),{isOpen:e.isOpen});default:return T}},items:Me,selectedItem:p,inputValue:v,itemToString:le,onInputValueChange:({type:e,inputValue:l})=>{switch(e){case useCombobox.stateChangeTypes.InputChange:return;case useCombobox.stateChangeTypes.ItemClick:case useCombobox.stateChangeTypes.InputKeyDownEnter:{if(C==="clear"){x("");return}if(C==="preserve")return}}x(l);},onStateChange:({type:e,selectedItem:l})=>{switch(e){case useCombobox.stateChangeTypes.InputKeyDownEnter:case useCombobox.stateChangeTypes.ItemClick:l&&se(l);break;}}}),j=Ee({ref:Ce}),{"aria-labelledby":Ye,id:Ze}=j,L=Z(j,["aria-labelledby","id"]),z=we(),Ve=useRef(null),E=He({ref:Ve}),B=0,D=k!=null?k:v;return i.createElement("div",{"data-test-id":be,className:cx(m.autocomplete,V),ref:o},i.createElement(Popover,{usePortal:Te,isOpen:Ae,isFullWidth:fe==="full",renderOnlyWhenOpen:false,autoFocus:false,id:E.id},i.createElement(Popover.Trigger,null,i.createElement("div",null,i.createElement(TextInput,c(u({className:m.inputField},L),{onFocus:e=>{N==null||N(e);},onBlur:e=>{R==null||R(e),L.onBlur(e);},id:P,isInvalid:ae,isDisabled:W,isRequired:pe,isReadOnly:me,ref:mergeRefs(L.ref,ge),testId:"cf-autocomplete-input",placeholder:de,onChange:e=>{L.onChange(e),Se(e);}})),i.createElement(IconButton,c(u({},z),{ref:mergeRefs(z.ref,he),"aria-label":D?_.clearSelectionIconLabel:_.showListIconLabel,className:m.toggleButton,variant:"transparent",icon:D?i.createElement(XIcon,{color:a.gray600}):re,onClick:()=>{D?x(""):Oe();},isDisabled:W,size:"small"})))),r.length>0||v.length>0||ue?i.createElement(Popover.Content,c(u({},E),{ref:mergeRefs(E.ref,Ie),className:m.content,testId:ve}),M&&[...Array(3)].map((e,l)=>i.createElement("div",{key:l,className:cx(m.item({isDisabled:true}))},i.createElement(Je,null))),!M&&Le&&i.createElement("div",{className:m.item({})},i.createElement(Subheading,{className:m.noMatchesTitle},ce)),!M&&O(S)&&r.map((e,l)=>{if(e.options.length<1)return;let T=i.createElement("div",{key:l},i.createElement(SectionHeading,{key:l,"data-test-id":"cf-autocomplete-grouptitle",marginBottom:"none",className:m.groupTitle},e.groupTitle),i.createElement(A,{items:e.options,highlightedIndex:K,getItemProps:q,renderItem:U,inputValue:v,elementStartIndex:B}));return B+=e.options.length,T}),!M&&!O(S)&&r.length>0&&i.createElement(A,{items:r,elementStartIndex:B,highlightedIndex:K,getItemProps:q,renderItem:U,inputValue:v})):i.createElement("div",c(u({},E),{className:cx(m.hidden)}))))}var Je=()=>i.createElement(Skeleton.Container,{svgHeight:16},i.createElement(Skeleton.BodyText,{numberOfLines:1}));function O(t,o){return t}var Qe=i.forwardRef(je);
|
|
2
2
|
export{Qe as Autocomplete};//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-autocomplete",
|
|
3
|
-
"version": "6.0.0
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "Forma 36: Autocomplete component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-button": "^6.0.0
|
|
10
|
-
"@contentful/f36-core": "^6.0.0
|
|
11
|
-
"@contentful/f36-forms": "^6.0.0
|
|
12
|
-
"@contentful/f36-popover": "^6.0.0
|
|
13
|
-
"@contentful/f36-skeleton": "^6.0.0
|
|
14
|
-
"@contentful/f36-icons": "^6.0.0
|
|
15
|
-
"@contentful/f36-tokens": "^6.0.0
|
|
16
|
-
"@contentful/f36-typography": "^6.0.0
|
|
17
|
-
"@contentful/f36-utils": "^6.0.0
|
|
9
|
+
"@contentful/f36-button": "^6.0.0",
|
|
10
|
+
"@contentful/f36-core": "^6.0.0",
|
|
11
|
+
"@contentful/f36-forms": "^6.0.0",
|
|
12
|
+
"@contentful/f36-popover": "^6.0.0",
|
|
13
|
+
"@contentful/f36-skeleton": "^6.0.0",
|
|
14
|
+
"@contentful/f36-icons": "^6.0.0",
|
|
15
|
+
"@contentful/f36-tokens": "^6.0.0",
|
|
16
|
+
"@contentful/f36-typography": "^6.0.0",
|
|
17
|
+
"@contentful/f36-utils": "^6.0.0",
|
|
18
18
|
"downshift": "^9.0.10",
|
|
19
19
|
"@emotion/css": "^11.13.5"
|
|
20
20
|
},
|