@contentful/f36-autocomplete - npm Package Compare versions

Comparing version 4.0.1-next-v4-9547.2428 to 4.0.1-next-v4-9697.2430

dist/main.js

@@ -1,2 +0,2 @@
-var e=b(require("@babel/runtime/helpers/extends")),{cx:t,css:n}=require("emotion"),a=require("react"),o=b(a),{useState:l}=a,{useCombobox:r}=require("downshift"),{mergeRefs:i}=require("@contentful/f36-core"),{IconButton:s}=require("@contentful/f36-button"),{TextInput:c}=require("@contentful/f36-forms"),{CloseIcon:u,ChevronDownIcon:m}=require("@contentful/f36-icons"),{SkeletonContainer:d,SkeletonBodyText:p}=require("@contentful/f36-skeleton"),{Popover:g}=require("@contentful/f36-popover"),f=b(require("@contentful/f36-tokens"));function b(e){return e&&e.__esModule?e.default:e}var h,y,k,v,E={};h=E,y="Autocomplete",k=()=>C,Object.defineProperty(h,y,{get:k,set:v,enumerable:!0,configurable:!0});function I(a,d){const{id:p,className:b,clearAfterSelect:h=!1,items:y,onFilter:k,onSelectItem:v,renderItem:E,itemToString:I=(e=>e),isInvalid:C,isDisabled:q,isRequired:S,isReadOnly:w,noMatchesMessage:N="No matches",placeholder:P="Search",inputRef:R,toggleRef:T,listRef:M,listWidth:O="auto",listMaxHeight:B=180,isLoading:D=!1,testId:$="cf-autocomplete"}=a,j=(e=>({autocomplete:n({name:"1jke4yk",styles:"position:relative;width:100%;"}),combobox:n({name:"79elbk",styles:"position:relative;"}),toggleButton:n({name:"1nbt92p",styles:"position:absolute;top:4px;right:4px;z-index:1;"}),list:n({overflowY:"auto",listStyle:"none",padding:`${f.spacingXs} 0`,margin:0,maxHeight:`${e}px`},""),item:n({display:"block",padding:`${f.spacingXs} ${f.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:f.gray100},"&:active":{backgroundColor:f.gray200}},""),disabled:n({name:"1e07izz",styles:"opacity:0.5;pointer-events:none;"}),highlighted:n({backgroundColor:f.gray100},"")}))(B),[z,_]=l(y),{getComboboxProps:A,getInputProps:F,getItemProps:H,getMenuProps:V,getToggleButtonProps:L,highlightedIndex:W,isOpen:X,setInputValue:K,inputValue:Y,toggleMenu:G}=r({items:z,itemToString:I,onStateChange:({inputValue:e,type:t,selectedItem:n})=>{switch(t){case r.stateChangeTypes.InputChange:{const t=y.filter((t=>k(t,e)));_(t);break}case r.stateChangeTypes.InputKeyDownEnter:case r.stateChangeTypes.ItemClick:n&&v(n),h&&K("")}}}),{"aria-labelledby":J,id:Q,...U}=F(),Z=A(),ee=L(),te=V();return o.createElement("div",{"data-test-id":$,className:t(j.autocomplete,b),ref:d},o.createElement(g,{autoFocus:!1,usePortal:!1,isOpen:X,isFullWidth:"full"===O},o.createElement(g.Trigger,null,o.createElement("div",e({},Z,{className:j.combobox}),o.createElement(c,e({},U,{id:p,isInvalid:C,isDisabled:q,isRequired:S,isReadOnly:w,ref:i(U.ref,R),testId:"cf-autocomplete-input",placeholder:P})),o.createElement(s,e({},ee,{ref:i(ee.ref,T),"aria-label":"toggle menu",className:j.toggleButton,variant:"transparent",icon:Y?o.createElement(u,{"aria-label":"Clear"}):o.createElement(m,{"aria-label":"Show list"}),onClick:()=>{Y?(K(""),_(y)):G()},isDisabled:q,size:"small"})))),o.createElement(g.Content,null,o.createElement("ul",e({},te,{ref:i(te.ref,M),className:j.list,"data-test-id":"cf-autocomplete-list"}),D&&[...Array(3)].map(((e,n)=>o.createElement("li",{key:n,className:t(j.item,j.disabled)},o.createElement(x,null)))),!D&&0===z.length&&o.createElement("li",{className:t(j.item,j.disabled)},N),!D&&z.map(((n,a)=>{const l=H({item:n,index:a});return o.createElement("li",e({},l,{key:a,className:t([j.item,W===a&&j.highlighted]),"data-test-id":`cf-autocomplete-list-item-${a}`}),E?E(n):n)}))))))}function x(){return o.createElement(d,{svgHeight:16},o.createElement(p,{numberOfLines:1}))}const C=o.forwardRef(I);var q,S;q=module.exports,S=E,Object.keys(S).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(q,e,{enumerable:!0,get:function(){return S[e]}})}));
+var e=h(require("@babel/runtime/helpers/extends")),{cx:t,css:n}=require("emotion"),a=require("react"),l=h(a),{useState:o,useCallback:r}=a,{useCombobox:i}=require("downshift"),{mergeRefs:s}=require("@contentful/f36-core"),{IconButton:c}=require("@contentful/f36-button"),{TextInput:u}=require("@contentful/f36-forms"),{ChevronDownIcon:m,CloseIcon:d}=require("@contentful/f36-icons"),{SkeletonBodyText:p,SkeletonContainer:g}=require("@contentful/f36-skeleton"),{Popover:f}=require("@contentful/f36-popover"),b=h(require("@contentful/f36-tokens"));function h(e){return e&&e.__esModule?e.default:e}var y,k,v,C,E={};y=E,k="Autocomplete",v=()=>q,Object.defineProperty(y,k,{get:v,set:C,enumerable:!0,configurable:!0});function I(a,p){const{id:g,className:h,clearAfterSelect:y=!1,items:k,onInputValueChange:v,onSelectItem:C,renderItem:E,itemToString:I=(e=>e),isInvalid:q,isDisabled:S,isRequired:w,isReadOnly:N,noMatchesMessage:P="No matches",placeholder:R="Search",inputRef:M,toggleRef:O,listRef:T,listWidth:B="auto",listMaxHeight:D=180,isLoading:$=!1,testId:j="cf-autocomplete"}=a,z=(e=>({autocomplete:n({name:"1jke4yk",styles:"position:relative;width:100%;"}),combobox:n({name:"79elbk",styles:"position:relative;"}),toggleButton:n({name:"1nbt92p",styles:"position:absolute;top:4px;right:4px;z-index:1;"}),list:n({overflowY:"auto",listStyle:"none",padding:`${b.spacingXs} 0`,margin:0,maxHeight:`${e}px`},""),item:n({display:"block",padding:`${b.spacingXs} ${b.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:b.gray100},"&:active":{backgroundColor:b.gray200}},""),disabled:n({name:"1e07izz",styles:"opacity:0.5;pointer-events:none;"}),highlighted:n({backgroundColor:b.gray100},"")}))(D),[V,_]=o(""),A=r((e=>{_(e),null==v||v(e)}),[v]),{getComboboxProps:H,getInputProps:F,getItemProps:L,getMenuProps:W,getToggleButtonProps:X,highlightedIndex:K,isOpen:Y,toggleMenu:G}=i({items:k,inputValue:V,itemToString:I,onInputValueChange:({inputValue:e})=>{A(e)},onStateChange:({type:e,selectedItem:t})=>{switch(e){case i.stateChangeTypes.InputKeyDownEnter:case i.stateChangeTypes.ItemClick:t&&C(t),y&&A("")}}}),{"aria-labelledby":J,id:Q,...U}=F(),Z=H(),ee=X(),te=W();return l.createElement("div",{"data-test-id":j,className:t(z.autocomplete,h),ref:p},l.createElement(f,{autoFocus:!1,usePortal:!1,isOpen:Y,isFullWidth:"full"===B},l.createElement(f.Trigger,null,l.createElement("div",e({},Z,{className:z.combobox}),l.createElement(u,e({},U,{id:g,isInvalid:q,isDisabled:S,isRequired:w,isReadOnly:N,ref:s(U.ref,M),testId:"cf-autocomplete-input",placeholder:R})),l.createElement(c,e({},ee,{ref:s(ee.ref,O),"aria-label":"toggle menu",className:z.toggleButton,variant:"transparent",icon:V?l.createElement(d,{"aria-label":"Clear"}):l.createElement(m,{"aria-label":"Show list"}),onClick:()=>{V?A(""):G()},isDisabled:S,size:"small"})))),l.createElement(f.Content,null,l.createElement("ul",e({},te,{ref:s(te.ref,T),className:z.list,"data-test-id":"cf-autocomplete-list"}),$&&[...Array(3)].map(((e,n)=>l.createElement("li",{key:n,className:t(z.item,z.disabled)},l.createElement(x,null)))),!$&&0===k.length&&l.createElement("li",{className:t(z.item,z.disabled)},P),!$&&k.map(((n,a)=>{const o=L({item:n,index:a});return l.createElement("li",e({},o,{key:a,className:t([z.item,K===a&&z.highlighted]),"data-test-id":`cf-autocomplete-list-item-${a}`}),E?E(n):n)}))))))}function x(){return l.createElement(g,{svgHeight:16},l.createElement(p,{numberOfLines:1}))}const q=l.forwardRef(I);var S,w;S=module.exports,w=E,Object.keys(w).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(S,e,{enumerable:!0,get:function(){return w[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import a,{useState as n}from"react";import{useCombobox as s}from"downshift";import{mergeRefs as l}from"@contentful/f36-core";import{IconButton as i}from"@contentful/f36-button";import{TextInput as r}from"@contentful/f36-forms";import{CloseIcon as c,ChevronDownIcon as m}from"@contentful/f36-icons";import{SkeletonBodyText as p,SkeletonContainer as u}from"@contentful/f36-skeleton";import{Popover as d}from"@contentful/f36-popover";import g from"@contentful/f36-tokens";var f,b,h,y;f={},b="Autocomplete",h=()=>x,Object.defineProperty(f,b,{get:h,set:y,enumerable:!0,configurable:!0});function k(p,u){const{id:f,className:b,clearAfterSelect:h=!1,items:y,onFilter:k,onSelectItem:x,renderItem:C,itemToString:E=(e=>e),isInvalid:v,isDisabled:S,isRequired:w,isReadOnly:N,noMatchesMessage:R="No matches",placeholder:T="Search",inputRef:P,toggleRef:B,listRef:M,listWidth:O="auto",listMaxHeight:D=180,isLoading:$=!1,testId:z="cf-autocomplete"}=p,A=(e=>({autocomplete:o({name:"1jke4yk",styles:"position:relative;width:100%;"}),combobox:o({name:"79elbk",styles:"position:relative;"}),toggleButton:o({name:"1nbt92p",styles:"position:absolute;top:4px;right:4px;z-index:1;"}),list:o({overflowY:"auto",listStyle:"none",padding:`${g.spacingXs} 0`,margin:0,maxHeight:`${e}px`},""),item:o({display:"block",padding:`${g.spacingXs} ${g.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:g.gray100},"&:active":{backgroundColor:g.gray200}},""),disabled:o({name:"1e07izz",styles:"opacity:0.5;pointer-events:none;"}),highlighted:o({backgroundColor:g.gray100},"")}))(D),[F,H]=n(y),{getComboboxProps:V,getInputProps:j,getItemProps:q,getMenuProps:L,getToggleButtonProps:W,highlightedIndex:X,isOpen:K,setInputValue:Y,inputValue:G,toggleMenu:J}=s({items:F,itemToString:E,onStateChange:({inputValue:e,type:t,selectedItem:o})=>{switch(t){case s.stateChangeTypes.InputChange:{const t=y.filter((t=>k(t,e)));H(t);break}case s.stateChangeTypes.InputKeyDownEnter:case s.stateChangeTypes.ItemClick:o&&x(o),h&&Y("")}}}),{"aria-labelledby":Q,id:U,...Z}=j(),_=V(),ee=W(),te=L();return a.createElement("div",{"data-test-id":z,className:t(A.autocomplete,b),ref:u},a.createElement(d,{autoFocus:!1,usePortal:!1,isOpen:K,isFullWidth:"full"===O},a.createElement(d.Trigger,null,a.createElement("div",e({},_,{className:A.combobox}),a.createElement(r,e({},Z,{id:f,isInvalid:v,isDisabled:S,isRequired:w,isReadOnly:N,ref:l(Z.ref,P),testId:"cf-autocomplete-input",placeholder:T})),a.createElement(i,e({},ee,{ref:l(ee.ref,B),"aria-label":"toggle menu",className:A.toggleButton,variant:"transparent",icon:G?a.createElement(c,{"aria-label":"Clear"}):a.createElement(m,{"aria-label":"Show list"}),onClick:()=>{G?(Y(""),H(y)):J()},isDisabled:S,size:"small"})))),a.createElement(d.Content,null,a.createElement("ul",e({},te,{ref:l(te.ref,M),className:A.list,"data-test-id":"cf-autocomplete-list"}),$&&[...Array(3)].map(((e,o)=>a.createElement("li",{key:o,className:t(A.item,A.disabled)},a.createElement(I,null)))),!$&&0===F.length&&a.createElement("li",{className:t(A.item,A.disabled)},R),!$&&F.map(((o,n)=>{const s=q({item:o,index:n});return a.createElement("li",e({},s,{key:n,className:t([A.item,X===n&&A.highlighted]),"data-test-id":`cf-autocomplete-list-item-${n}`}),C?C(o):o)}))))))}function I(){return a.createElement(u,{svgHeight:16},a.createElement(p,{numberOfLines:1}))}const x=a.forwardRef(k);export{x as Autocomplete};
+import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import a,{useCallback as n,useState as l}from"react";import{useCombobox as s}from"downshift";import{mergeRefs as i}from"@contentful/f36-core";import{IconButton as r}from"@contentful/f36-button";import{TextInput as m}from"@contentful/f36-forms";import{ChevronDownIcon as c,CloseIcon as p}from"@contentful/f36-icons";import{SkeletonContainer as u,SkeletonBodyText as d}from"@contentful/f36-skeleton";import{Popover as g}from"@contentful/f36-popover";import f from"@contentful/f36-tokens";var b,h,y,k;b={},h="Autocomplete",y=()=>x,Object.defineProperty(b,h,{get:y,set:k,enumerable:!0,configurable:!0});function C(u,d){const{id:b,className:h,clearAfterSelect:y=!1,items:k,onInputValueChange:C,onSelectItem:x,renderItem:E,itemToString:v=(e=>e),isInvalid:S,isDisabled:w,isRequired:N,isReadOnly:R,noMatchesMessage:P="No matches",placeholder:T="Search",inputRef:B,toggleRef:M,listRef:O,listWidth:D="auto",listMaxHeight:$=180,isLoading:z=!1,testId:A="cf-autocomplete"}=u,V=(e=>({autocomplete:o({name:"1jke4yk",styles:"position:relative;width:100%;"}),combobox:o({name:"79elbk",styles:"position:relative;"}),toggleButton:o({name:"1nbt92p",styles:"position:absolute;top:4px;right:4px;z-index:1;"}),list:o({overflowY:"auto",listStyle:"none",padding:`${f.spacingXs} 0`,margin:0,maxHeight:`${e}px`},""),item:o({display:"block",padding:`${f.spacingXs} ${f.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:f.gray100},"&:active":{backgroundColor:f.gray200}},""),disabled:o({name:"1e07izz",styles:"opacity:0.5;pointer-events:none;"}),highlighted:o({backgroundColor:f.gray100},"")}))($),[H,j]=l(""),q=n((e=>{j(e),null==C||C(e)}),[C]),{getComboboxProps:F,getInputProps:L,getItemProps:W,getMenuProps:X,getToggleButtonProps:K,highlightedIndex:Y,isOpen:G,toggleMenu:J}=s({items:k,inputValue:H,itemToString:v,onInputValueChange:({inputValue:e})=>{q(e)},onStateChange:({type:e,selectedItem:t})=>{switch(e){case s.stateChangeTypes.InputKeyDownEnter:case s.stateChangeTypes.ItemClick:t&&x(t),y&&q("")}}}),{"aria-labelledby":Q,id:U,...Z}=L(),_=F(),ee=K(),te=X();return a.createElement("div",{"data-test-id":A,className:t(V.autocomplete,h),ref:d},a.createElement(g,{autoFocus:!1,usePortal:!1,isOpen:G,isFullWidth:"full"===D},a.createElement(g.Trigger,null,a.createElement("div",e({},_,{className:V.combobox}),a.createElement(m,e({},Z,{id:b,isInvalid:S,isDisabled:w,isRequired:N,isReadOnly:R,ref:i(Z.ref,B),testId:"cf-autocomplete-input",placeholder:T})),a.createElement(r,e({},ee,{ref:i(ee.ref,M),"aria-label":"toggle menu",className:V.toggleButton,variant:"transparent",icon:H?a.createElement(p,{"aria-label":"Clear"}):a.createElement(c,{"aria-label":"Show list"}),onClick:()=>{H?q(""):J()},isDisabled:w,size:"small"})))),a.createElement(g.Content,null,a.createElement("ul",e({},te,{ref:i(te.ref,O),className:V.list,"data-test-id":"cf-autocomplete-list"}),z&&[...Array(3)].map(((e,o)=>a.createElement("li",{key:o,className:t(V.item,V.disabled)},a.createElement(I,null)))),!z&&0===k.length&&a.createElement("li",{className:t(V.item,V.disabled)},P),!z&&k.map(((o,n)=>{const l=W({item:o,index:n});return a.createElement("li",e({},l,{key:n,className:t([V.item,Y===n&&V.highlighted]),"data-test-id":`cf-autocomplete-list-item-${n}`}),E?E(o):o)}))))))}function I(){return a.createElement(u,{svgHeight:16},a.createElement(d,{numberOfLines:1}))}const x=a.forwardRef(C);export{x as Autocomplete};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -10,6 +10,5 @@ import React from "react";
     /**
-     * This is the function that will tell the component how the `items` should be filtered when the input value changes.
-     * It will be used in the `filter()` method of the array passed in the `items` prop and it needs two arguments: an item and the inputValue.
+     * Function called whenever the input value changes
      */
-    onFilter: (item: ItemType, inputValue: string) => void;
+    onInputValueChange?: (value: string) => void;
     /**
@@ -16,0 +15,0 @@ * This is the function that will be called when the user selects one of the "options" in the list.

package.json

 {
   "name": "@contentful/f36-autocomplete",
-  "version": "4.0.1-next-v4-9547.2428+4f669447",
+  "version": "4.0.1-next-v4-9697.2430+abab0df3",
   "description": "Forma 36: Autocomplete component",
@@ -10,9 +10,9 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-core": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-forms": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-icons": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-popover": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-skeleton": "4.0.1-next-v4-9547.2428+4f669447",
-    "@contentful/f36-tokens": "4.0.1-next-v4-9547.2428+4f669447",
+    "@contentful/f36-button": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-core": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-forms": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-icons": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-popover": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-skeleton": "4.0.1-next-v4-9697.2430+abab0df3",
+    "@contentful/f36-tokens": "4.0.1-next-v4-9697.2430+abab0df3",
     "downshift": "^6.1.7",
@@ -42,3 +42,3 @@ "emotion": "^10.0.17"
   },
-  "gitHead": "4f669447e4e730aa90980dc1ecf95df2c83ec6c2"
+  "gitHead": "abab0df30f3495fb3320da55450216b4f145488c"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

82411

decreased by-1.04%

Lines of code

426

decreased by-0.23%

Dependency changes

• Updated@contentful/f36-button@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-core@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-forms@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-icons@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-popover@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-skeleton@4.0.1-next-v4-9697.2430+abab0df3

• Updated@contentful/f36-tokens@4.0.1-next-v4-9697.2430+abab0df3