npm - @contentful/f36-autocomplete - Versions diffs - 4.2.10 → 4.3.10 - Mend

@contentful/f36-autocomplete 4.2.10 → 4.3.10

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,212 +1,145 @@
 # Change Log
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 4.3.10
-## [4.2.10](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.9...@contentful/f36-autocomplete@4.2.10) (2022-03-10)
+### Patch Changes
-**Note:** Version bump only for package @contentful/f36-autocomplete
+- [#1969](https://github.com/contentful/forma-36/pull/1969) [`0c5a4b60`](https://github.com/contentful/forma-36/commit/0c5a4b60f8df76e1f75d98b7ea28dd0fd6307fc3) Thanks [@denkristoffer](https://github.com/denkristoffer)! - don't put cursor to the end on every change event
+- Updated dependencies [[`0c5a4b60`](https://github.com/contentful/forma-36/commit/0c5a4b60f8df76e1f75d98b7ea28dd0fd6307fc3)]:
+  - @contentful/f36-forms@4.3.10
+  - @contentful/f36-button@4.3.10
+  - @contentful/f36-icons@4.3.10
+  - @contentful/f36-popover@4.3.10
+  - @contentful/f36-skeleton@4.3.10
+  - @contentful/f36-typography@4.3.10
+  - @contentful/f36-utils@4.3.10
+  - @contentful/f36-core@4.3.10
+## 4.3.9
+### Patch Changes
+- [#1953](https://github.com/contentful/forma-36/pull/1953) [`df985087`](https://github.com/contentful/forma-36/commit/df98508780f63754e29df09d4f6239bdc84982a8) Thanks [@massao](https://github.com/massao)! - bump packages versions to have consistent versioning
-## [4.2.9](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.8...@contentful/f36-autocomplete@4.2.9) (2022-03-09)
+- Updated dependencies [[`df985087`](https://github.com/contentful/forma-36/commit/df98508780f63754e29df09d4f6239bdc84982a8)]:
+  - @contentful/f36-button@4.3.9
+  - @contentful/f36-forms@4.3.9
+  - @contentful/f36-icons@4.3.9
+  - @contentful/f36-popover@4.3.9
+  - @contentful/f36-skeleton@4.3.9
+  - @contentful/f36-typography@4.3.9
+  - @contentful/f36-core@4.3.9
+  - @contentful/f36-utils@4.3.9
+## [4.2.11](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.10...@contentful/f36-autocomplete@4.2.11) (2022-03-14)
 **Note:** Version bump only for package @contentful/f36-autocomplete
+## [4.2.10](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.9...@contentful/f36-autocomplete@4.2.10) (2022-03-10)
+**Note:** Version bump only for package @contentful/f36-autocomplete
+## [4.2.9](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.8...@contentful/f36-autocomplete@4.2.9) (2022-03-09)
+**Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.8](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.7...@contentful/f36-autocomplete@4.2.8) (2022-03-09)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.7](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.6...@contentful/f36-autocomplete@4.2.7) (2022-03-03)
 ### Bug Fixes
-* migrate links from master to main  ([#1923](https://github.com/contentful/forma-36/issues/1923)) ([607301d](https://github.com/contentful/forma-36/commit/607301d57a2e83190d2aa298120ddb8493e8c429))
+- migrate links from master to main ([#1923](https://github.com/contentful/forma-36/issues/1923)) ([607301d](https://github.com/contentful/forma-36/commit/607301d57a2e83190d2aa298120ddb8493e8c429))
 ## [4.2.6](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.5...@contentful/f36-autocomplete@4.2.6) (2022-03-02)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.5](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.4...@contentful/f36-autocomplete@4.2.5) (2022-03-01)
 ### Bug Fixes
-* autocomplete method documentation ([#1914](https://github.com/contentful/forma-36/issues/1914)) ([0596bd7](https://github.com/contentful/forma-36/commit/0596bd7e86398f4a15cac7e8e5a5943ca6c61fe0))
+- autocomplete method documentation ([#1914](https://github.com/contentful/forma-36/issues/1914)) ([0596bd7](https://github.com/contentful/forma-36/commit/0596bd7e86398f4a15cac7e8e5a5943ca6c61fe0))
 ## [4.2.4](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.3...@contentful/f36-autocomplete@4.2.4) (2022-02-22)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.3](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.2...@contentful/f36-autocomplete@4.2.3) (2022-02-22)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.2](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.1...@contentful/f36-autocomplete@4.2.2) (2022-02-17)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.2.1](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.2.0...@contentful/f36-autocomplete@4.2.1) (2022-02-09)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 # [4.2.0](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.11...@contentful/f36-autocomplete@4.2.0) (2022-02-09)
 ### Features
-* by default render Popover only when it's open ([#1873](https://github.com/contentful/forma-36/issues/1873)) ([48a511b](https://github.com/contentful/forma-36/commit/48a511bc48c17d3e4bf0cbfb8d16da8c3cbc29b2))
+- by default render Popover only when it's open ([#1873](https://github.com/contentful/forma-36/issues/1873)) ([48a511b](https://github.com/contentful/forma-36/commit/48a511bc48c17d3e4bf0cbfb8d16da8c3cbc29b2))
 ## [4.1.11](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.10...@contentful/f36-autocomplete@4.1.11) (2022-02-07)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.10](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.9...@contentful/f36-autocomplete@4.1.10) (2022-02-07)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.9](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.8...@contentful/f36-autocomplete@4.1.9) (2022-02-07)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.8](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.7...@contentful/f36-autocomplete@4.1.8) (2022-02-02)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.7](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.6...@contentful/f36-autocomplete@4.1.7) (2022-01-31)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.6](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.5...@contentful/f36-autocomplete@4.1.6) (2022-01-31)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.5](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.4...@contentful/f36-autocomplete@4.1.5) (2022-01-28)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.4](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.3...@contentful/f36-autocomplete@4.1.4) (2022-01-26)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.3](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.2...@contentful/f36-autocomplete@4.1.3) (2022-01-25)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.2](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.1...@contentful/f36-autocomplete@4.1.2) (2022-01-19)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.1.1](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.1.0...@contentful/f36-autocomplete@4.1.1) (2022-01-19)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 # [4.1.0](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.0.2...@contentful/f36-autocomplete@4.1.0) (2022-01-13)
 ### Features
-* implement props list redesign [BAU-535]  ([#1756](https://github.com/contentful/forma-36/issues/1756)) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
+- implement props list redesign [BAU-535](<[#1756](https://github.com/contentful/forma-36/issues/1756)>) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
 ## [4.0.2](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.0.1...@contentful/f36-autocomplete@4.0.2) (2022-01-12)
 **Note:** Version bump only for package @contentful/f36-autocomplete
 ## [4.0.1](https://github.com/contentful/forma-36/compare/@contentful/f36-autocomplete@4.0.0...@contentful/f36-autocomplete@4.0.1) (2022-01-11)
 **Note:** Version bump only for package @contentful/f36-autocomplete

package/README.mdx CHANGED Viewed

@@ -6,7 +6,7 @@ storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-autocom
 typescript: ./src/Autocomplete.tsx
 ---
-It allows users to quickly search through and select from large collections of options.
+Search through a long list of options.
 ## Import

package/dist/main.js CHANGED Viewed

@@ -139,6 +139,12 @@ function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
         onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(value);
     }, [
         onInputValueChange
+    ]); // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759
+    const handleNativeChangeEvent = $hVoOH$react.useCallback((event)=>{
+        const value = event.target.value;
+        handleInputValueChange(value);
+    }, [
+        handleInputValueChange
     ]);
     const flattenItems = $56e6e764f18116b7$var$isUsingGroups(isGrouped, items) ? items.reduce((acc, group)=>[
             ...acc,
@@ -151,8 +157,8 @@ function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
         items: flattenItems,
         inputValue: inputValue1,
         itemToString: itemToString,
-        onInputValueChange: ({ inputValue: inputValue  })=>{
-            handleInputValueChange(inputValue);
+        onInputValueChange: ({ type: type , inputValue: inputValue  })=>{
+            if (type !== '__input_change__') handleInputValueChange(inputValue);
         },
         onStateChange: ({ type: type , selectedItem: selectedItem  })=>{
             switch(type){
@@ -199,7 +205,11 @@ function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
         isReadOnly: isReadOnly,
         ref: $hVoOH$contentfulf36core.mergeRefs(inputProps.ref, inputRef),
         testId: "cf-autocomplete-input",
-        placeholder: placeholder
+        placeholder: placeholder,
+        onChange: (event)=>{
+            inputProps.onChange(event);
+            handleNativeChangeEvent(event);
+        }
     }), /*#__PURE__*/ ($parcel$interopDefault($hVoOH$react)).createElement($hVoOH$contentfulf36button.IconButton, {
         ...toggleProps,
         ref: $hVoOH$contentfulf36core.mergeRefs(toggleProps.ref, toggleRef),

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGGO,KAAA,CAAMoB,yCAAqB,IAAI2B,aAAD,IAA4B,CAAjE;QACEgD,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAdA,CAAAA,CAAAA;YAAc,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAIdC,QAAQ,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAVA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAGVC,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAlBA;YACE6B,QAAQ,EAAE,CADM;YAEhBC,GAAG,EAAE,CAFW;YAGhBC,KAAK,EAAE,CAHS;YAIhBC,MAAM,EAAE,CAJQ;YAKhBC,OAAO,EAAEL,oDAAM,CAACM,UAAhBD;QALgB,CAAJ;QAOdhC,OAAO,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAbA;YACEkC,QAAQ,EAAE,CADC;YAEXC,SAAS,KAAKtF,aAAc,CAA5BsF,EAAAA;QAFW,CAAJ;QAITjB,IAAI,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAVA;YACEkB,SAAS,EAAE,CADH;YAERJ,OAAO,KAAKL,oDAAM,CAACU,SAAU,CAAA,EAAA;YAC7BC,MAAM,EAAE,CAARA;QAHQ,CAAJ;QAKNlH,UAAU,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAhBA;YACE4G,OAAO,KAAKL,oDAAM,CAACU,SAAU,CAAA,CAAA,EAAGV,oDAAM,CAACY,QAAS;YAChDC,UAAU,EAAEb,oDAAM,CAACc,WAAnBD;QAFc,CAAJ;QAIZlC,cAAc,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAApBA;YACEoC,KAAK,EAAEf,oDAAM,CAACgB,OADI;YAElBL,MAAM,KAAKX,oDAAM,CAACY,QAAS,CAAA,GAAA,EAAKZ,oDAAM,CAACY,QAAS,CAAhDD,EAAAA;QAFkB,CAAJ;QAIhBzG,IAAI,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAVA;YACE+G,OAAO,EAAE,CADD;YAERZ,OAAO,KAAKL,oDAAM,CAACU,SAAU,CAAA,CAAA,EAAGV,oDAAM,CAACY,QAAS;YAChDM,SAAS,EAAE,CAHH;YAIRC,UAAU,EAAE,CAJJ;YAKRC,MAAM,EAAE,CALA;YAMRC,OAAO,EAAE,CAND;YAQR,CAAA,mBAAoB,CAApB;gBACEC,eAAe,EAAEtB,oDAAM,CAACuB,OAAxBD;YADkB,CARZ;YAWR,CAAA,WAAY,CAAZ;gBACEA,eAAe,EAAEtB,oDAAM,CAACwB,OAAxBF;YADU,CAAA;QAXJ,CAAJ;QAeN5C,QAAQ,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAVA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAIVgB,WAAW,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAjBA;YACE4B,eAAe,EAAEtB,oDAAM,CAACuB,OAAxBD;QADe,CAAJ;IAnDkD,CAA5B;;;;SDiBrBhI,yCAAiB,CAC/BgC,KADK,EAEL,CAFF;IAGE,KAAA,CAAM,CAAN,QACEzB,KADI,sBAEJoE,iBAFI,qBAGJf,gBAHI,iBAIJH,YAJI,eAKJ5C,UALI,eAMJC,UANI,kBAOJc,aAAa,GAAG,GAAhBA,EAPI,CAAA,GAQFI,KARJ;IAUA,KAAA,CAAMY,MAAM,GAAG3C,yCAAqB,CAAC2B,aAAD;IAEpC,MAAA,oEACG,CAAD;QAAI,SAAA,EAAWgB,MAAM,CAACqD,IAAR;QAAc,CAAA,eAAa,CAAzC;OACG1F,KAAK,CAAC0E,GAAN,EAAWrE,IAAD,EAAiBuE,KAAjB,GAAmC,CAApD;QACQ,KAAA,CAAMe,SAAS,GAAGvB,iBAAiB,GAAGQ,KAAtC;QACA,KAAA,CAAMgB,SAAS,GAAG1C,YAAY,CAAC,CAA/B;kBAAiC7C,IAAF;YAAQuE,KAAK,EAAEe,SAAPf;QAAR,CAAD;QAC9B,MAAA,oEACG,mCAAD;eACMgB,SAAJ;YACA,EAAA,EAAG,CAFL;YAGE,GAAA,EAAKD,SAAD;YACJ,SAAA,EAAW,iBAAA,CAAG,CACZtD;gBAAAA,MAAM,CAAChC,IADK;gBAEZgD,gBAAgB,KAAKsC,SAArB,IAAkCtD,MAAM,CAACwD,WAF7B;YAAA,CAAH;YAIX,CAAA,gBAAe,0BAAA,EAA4BF,SAAU;WAEpDrF,UAAU,GACTA,UAAU,CAACD,IAAD,EAAOE,UAAP,IACR,MAAA,CAAOF,IAAP,KAAgB,CAAhB,6EACD,qCAAD;YAAiB,IAAA,EAAMA,IAAD;YAAO,UAAA,EAAYE,UAAD;aAExCF,IALF;IASL,CAvBA;AA0BN,CAAA;AAEDZ,yCAAiB,CAACqG,WAAlB,GAAgC,CAAhC;SAESC,qCAAT,CAAyB,CAAzB,OACE1F,IADuB,eAEvBE,UAAAA,EACC,CAHH,EAMG,CAHA;IAID,KAAA,CAAM,CAAN,SAAQyF,MAAF,UAAUC,KAAV,UAAiBC,KAAAA,EAAjB,CAAA,GAA2Bb,wCAAc,CAAChF,IAAD,EAAOE,UAAP;IAE/C,MAAA,2HAEKyF,MAAD,qEACC,CAAD,UAAIC,KAAD,GACFC,KAAD;AAGL,CAAA;AAEDH,qCAAe,CAACD,WAAhB,GAA8B,CAA9B;;;;SDgCStE,mCAAa,CACpBC,KADF,EAEEC,GAFF,EAGE,CAHF;IAIE,KAAA,CAAM,CAAN,KACEE,EADI,cAEJC,SAFI,qBAGJnB,gBAAgB,GAAG,KAHf,iBAIJoB,YAAY,GAAG,CAJX,WAKJ9B,KALI,uBAMJE,kBANI,iBAOJE,YAPI,eAQJE,UARI,iBASJG,YAAY,IAAIJ,IAAD,GAAqBA,IAAI;kBACxC0B,SAVI,eAWJC,UAXI,eAYJC,UAZI,eAaJC,UAbI,qBAcJtB,gBAAgB,GAAG,CAdf,iCAeJD,WAAW,GAAG,CAfV,oBAgBJE,QAhBI,cAiBJG,SAjBI,YAkBJE,OAlBI,cAmBJE,SAAS,GAAG,CAnBR,uBAoBJC,aAAa,GAAG,GApBZ,cAqBJpB,SAAS,GAAG,KArBR,cAsBJqB,SAAS,GAAG,KAtBR,cAuBJC,SAAS,GAAG,KAvBR,WAwBJY,MAAM,GAAG,CAATA,kBAxBI,CAAA,GAyBFV,KAzBJ;IA6BA,KAAA,CAAMY,MAAM,GAAG3C,yCAAqB,CAAC2B,aAAD;IAEpC,KAAA,EAAOd,WAAD,EAAa+B,aAAb,IAA8B5D,qBAAQ,CAACoD,YAAD;IAE5C,KAAA,CAAMS,sBAAsB,GAAG9D,wBAAW,EACvC0B,KAAD,GAAW,CADb;QAEImC,aAAa,CAACnC,KAAD;QAEbD,kBAAkB,aAAlBA,kBAAkB,KAAlBA,IAAAA,CAAAA,CAAA,GAAAA,IAAAA,CAAAA,CAAA,GAAAA,kBAAkB,CAAGC,KAAH;IACnB,CALuC,EAMxC,CAACD;QAAAA,kBAAD;IAAA,CANwC;IAS1C,KAAA,CAAMsC,YAAY,GAAGC,mCAAa,CAACxC,SAAD,EAAYD,KAAZ,IAC9BA,KAAK,CAAC0C,MAAN,EACGC,GAAD,EAAkBC,KAAlB,GAAuC,CAAC;eAAGD,GAAJ;eAAYC,KAAK,CAAC/C,OAAlB;QAAA,CADzC;MAEE,CAAA,CAFF,IAIAG,KALJ;IAOA,KAAA,CAAM6C,kBAAkB,GAAGJ,mCAAa,CAACxC,SAAD,EAAYD,KAAZ,IACpCA,KAAK,CAAC8C,KAAN,EAAaF,KAAD,GAAsBA,KAAK,CAAC/C,OAAN,CAAckD,MAAd,KAAyB,CAA3D;QACA/C,KAAK,CAAC+C,MAAN,KAAiB,CAFrB;IAIA,KAAA,CAAM,CAAN,mBACEC,gBADI,kBAEJC,aAFI,iBAGJC,YAHI,iBAIJC,YAJI,yBAKJC,oBALI,qBAMJC,gBANI,WAOJC,MAPI,eAQJC,UAAAA,EARI,CAAA,GASF5E,4BAAW,CAAC,CATV;QAUJqB,KAAK,EAAEwC,YADO;oBAEdjC,WAFc;sBAGdE,YAHc;QAIdP,kBAAkB,GAAG,CAArBA,aAAuBK,UAAAA,EAAF,CAAD,GAAoB,CAAnB;YACnBgC,sBAAsB,CAAChC,UAAD;QACvB,CANa;QAOdiD,aAAa,GAAG,CAAhBA,OAAkBC,IAAF,iBAAQC,YAAAA,EAAR,CAAD,GAA4B,CAA3B;YACd,MAAA,CAAQD,IAAR;gBACE,IAAA,CAAK9E,4BAAW,CAACgF,gBAAZ,CAA6BC,iBAAlC;gBACA,IAAA,CAAKjF,4BAAW,CAACgF,gBAAZ,CAA6BE,SAAlC;oBACE,EAAA,EAAIH,YAAJ,EACEtD,YAAY,CAACsD,YAAD;oBAEd,EAAA,EAAIhD,gBAAJ,EACE6B,sBAAsB,CAAC,CAAD;oBAExB,KAAA;;oBAEA,KAAA;;QAEL,CAAA;IArBa,CAAD;IAwBf,KAAA,CAAM,CAAN,CACE,CAAA,kBAAmBuB,WADf,GAEJlC,EAAE,EAAEmC,QAFA,MAGDC,UAAH,CAHI,CAAA,GAIFf,aAAa;IACjB,KAAA,CAAMgB,aAAa,GAAGjB,gBAAgB;IACtC,KAAA,CAAMkB,WAAW,GAAGd,oBAAoB;IACxC,KAAA,CAAMe,SAAS,GAAGhB,YAAY;IAC9B,GAAA,CAAIiB,iBAAiB,GAAG,CAAxB;IAEA,MAAA,oEACG,CAAD;QACE,CAAA,eAAcjC,MAAD;QACb,SAAA,EAAW,iBAAA,CAAGE,MAAM,CAACgC,YAAV,EAAwBxC,SAAxB;QACX,GAAA,EAAKH,GAAD;0EAEH,mCAAD;QACE,SAAA,EAAWH,SAAD;QACV,MAAA,EAAQ+B,MAAD;QACP,WAAA,EAAalC,SAAS,KAAK,CAAf;QACZ,kBAAA,EAAoB,KAAD;QAEnB,EAAA,AAAA,gDAAA;QACA,EAAA,AAAA,+CAAA;QACA,SAAA,EAAW,KAAD;QACV,EAAA,EAAI+C,SAAS,CAACvC,EAAX;0EAEF,mCAAA,CAAQ,OAAT,2EACG,CAAD;WAASqC,aAAJ;QAAmB,SAAA,EAAW5B,MAAM,CAACiC,QAAR;0EAC/B,mCAAD;WACMN,UAAJ;QACA,OAAA,MAAe,CAF7B;YAGgB,EAAA,GAAKV,MAAL,EACEC,UAAU;QAEb,CAJO;QAKR,EAAA,EAAI3B,EAAD;QACH,SAAA,EAAWG,SAAD;QACV,UAAA,EAAYC,UAAD;QACX,UAAA,EAAYC,UAAD;QACX,UAAA,EAAYC,UAAD;QACX,GAAA,EAAKtD,kCAAS,CAACoF,UAAU,CAACtC,GAAZ,EAAiBb,QAAjB;QACd,MAAA,EAAO,CAbT;QAcE,WAAA,EAAaF,WAAD;2EAEb,qCAAD;WACMuD,WAAJ;QACA,GAAA,EAAKtF,kCAAS,CAACsF,WAAW,CAACxC,GAAb,EAAkBV,SAAlB;QACd,CAAA,aAAW,CAHb;QAIE,SAAA,EAAWqB,MAAM,CAACkC,YAAR;QACV,OAAA,EAAQ,CALV;QAME,IAAA,EACEhE,WAAU,sEACP,mCAAD;YAAW,CAAA,aAAW,CAAtB;YAA8B,OAAA,EAAQ,CAAtC;gFAEC,yCAAD;YAAiB,CAAA,aAAW,CAA5B;YAAwC,OAAA,EAAQ,CAAhD;;QAGJ,OAAA,MAAe,CAb7B;YAcgB,EAAA,EAAIA,WAAJ,EACEgC,sBAAsB,CAAC,CAAD;iBAEtBgB,UAAU;QAEb,CANO;QAOR,UAAA,EAAYvB,UAAD;QACX,IAAA,EAAK,CArBP;6EA0BH,mCAAA,CAAQ,OAAT;WACMmC,SAAJ;QACA,GAAA,EAAKvF,kCAAS,CAACuF,SAAS,CAACzC,GAAX,EAAgBR,OAAhB;QACd,SAAA,EAAWmB,MAAM,CAACmC,OAAR;QACV,MAAA,EAAO,CAJT;OAMGlD,SAAS,IACR,CAAC;WAAGmD,KAAK,CAAC,CAAD;IAAT,CAAA,CAAcC,GAAd,EAAmBC,CAAD,EAAIC,KAAJ,sEACf,CAAD;YAAK,GAAA,EAAKA,KAAD;YAAQ,SAAA,EAAW,iBAAA,CAAGvC,MAAM,CAAChC,IAAV,EAAgBgC,MAAM,CAACwC,QAAvB;8EACzB,0CAAD;QAIJvD,SAAD,IAAcuB,kBAAd,uEACE,CAAD;QAAK,SAAA,EAAWR,MAAM,CAAChC,IAAR;0EACZ,yCAAD;QAAY,SAAA,EAAWgC,MAAM,CAACyC,cAAR;OACnBlE,gBAAD,KAKJU,SAAD,IACCmB,mCAAa,CAACxC,SAAD,EAAYD,KAAZ,KACbA,KAAK,CAAC0E,GAAN,EAAW9B,KAAD,EAAmBgC,KAAnB,GAAqC,CAF3D;QAGc,EAAA,EAAIhC,KAAK,CAAC/C,OAAN,CAAckD,MAAd,GAAuB,CAA3B,EACE,MAAA;QAEF,KAAA,CAAMgC,MAAM,sEACT,CAAD;YAAK,GAAA,EAAKH,KAAD;8EACN,6CAAD;YACE,GAAA,EAAKA,KAAD;YACJ,CAAA,eAAa,CAFf;YAGE,YAAA,EAAa,CAHf;YAIE,SAAA,EAAWvC,MAAM,CAACzC,UAAR;WAETgD,KAAK,CAAChD,UAAP,sEAED,yCAAiB;YAChB,KAAA,EAAOgD,KAAK,CAAC/C,OAAP;YACN,gBAAA,EAAkBwD,gBAAD;YACjB,YAAA,EAAcH,YAAD;YACb,UAAA,EAAY5C,UAAD;YACX,UAAA,EAAYC,WAAD;YACX,iBAAA,EAAmB6D,iBAAD;;QAIxBA,iBAAiB,IAAIxB,KAAK,CAAC/C,OAAN,CAAckD,MAAnC;QACA,MAAA,CAAOgC,MAAP;IACD,CA1BD,IA4BAzD,SAAD,KACEmB,mCAAa,CAACxC,SAAD,EAAYD,KAAZ,KACdA,KAAK,CAAC+C,MAAN,GAAe,CAFhB,uEAGI,yCAAiB;QAChB,KAAA,EAAO/C,KAAD;QACN,iBAAA,EAAmBoE,iBAAD;QAClB,gBAAA,EAAkBf,gBAAD;QACjB,YAAA,EAAcH,YAAD;QACb,UAAA,EAAY5C,UAAD;QACX,UAAA,EAAYC,WAAD;;AAO1B,CAAA;AAED,KAAA,CAAMyE,0CAAoB,OAAS,CAAnC;IACE,MAAA,oEACG,8CAAD;QAAmB,SAAA,EAAW,EAAD;0EAC1B,6CAAD;QAAkB,aAAA,EAAe,CAAD;;AAGrC,CAND,CAQA,CAFC,AAED,EAFC,AAED,gFAFC;SAGQvC,mCAAa,CACpBxC,SADF,EAEED,KAFF,EAGyC,CAHzC;IAIE,MAAA,CAAOC,SAAP;AACD,CAAA;AAOM,KAAA,CAAM3B,yCAAY,iBAAGE,sCAAK,CAACyG,UAAN,CAAiBzD,mCAAjB","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n groupTitle: string;\n options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n extends CommonProps,\n Pick<\n TextInputProps,\n \| 'isDisabled'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'id'\n \| 'defaultValue'\n > {\n /*\n It’s an array of data to be used as \"options\" by the autocomplete component.\n * This can either be a plain list of items or a list of groups of items.\n /\n items: ItemType[] \| GenericGroupType<ItemType>[];\n\n /\n Tells if the item is a object with groups\n /\n isGrouped?: boolean;\n\n /\n Function called whenever the input value changes\n /\n onInputValueChange?: (value: string) => void;\n /\n This is the function that will be called when the user selects one of the \"options\" in the list.\n * The component will pass the selected \"item\" as an argument to the function..\n /\n onSelectItem: (item: ItemType) => void;\n /\n This is the function that will be called for each \"item\" passed in the `items` prop.\n * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n * The inputValue is passed in case you want to highlight the match on the render.\n /\n renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n /\n When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n * from those objetcs to be used as inputValue\n /\n itemToString?: (item: ItemType) => string;\n /\n If this is set to `true` the text input will be cleared after an item is selected\n * @default false\n /\n clearAfterSelect?: boolean;\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n placeholder?: string;\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 Use this prop to get a ref to the input element of the component\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\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 It sets the width of the list\n * @default \"auto\"\n /\n listWidth?: 'auto' \| 'full';\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 Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n /\n Boolean to control whether or not to render the suggestions box in a React Portal.\n * Rendering content inside a Portal allows the suggestions box to escape the bounds\n * of its parent while still being positioned correctly.\n * Defaults to `false`\n /\n usePortal?: boolean;\n}\n\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\n noMatchesMessage = 'No matches found',\n placeholder = 'Search',\n inputRef,\n toggleRef,\n listRef,\n listWidth = 'auto',\n listMaxHeight = 180,\n isGrouped = false,\n isLoading = false,\n usePortal = false,\n testId = 'cf-autocomplete',\n } = props;\n\n type GroupType = GenericGroupType<ItemType>;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n const [inputValue, setInputValue] = useState(defaultValue);\n\n const handleInputValueChange = useCallback(\n (value) => {\n setInputValue(value);\n\n onInputValueChange?.(value);\n },\n [onInputValueChange],\n );\n\n const flattenItems = isUsingGroups(isGrouped, items)\n ? items.reduce(\n (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n [],\n )\n : items;\n\n const isShowingNoMatches = isUsingGroups(isGrouped, items)\n ? items.every((group: GroupType) => group.options.length === 0)\n : items.length === 0;\n\n const {\n getComboboxProps,\n getInputProps,\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n isOpen,\n toggleMenu,\n } = useCombobox({\n items: flattenItems,\n inputValue,\n itemToString,\n onInputValueChange: ({ inputValue }) => {\n handleInputValueChange(inputValue);\n },\n onStateChange: ({ type, selectedItem }) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n if (selectedItem) {\n onSelectItem(selectedItem);\n }\n if (clearAfterSelect) {\n handleInputValueChange('');\n }\n break;\n default:\n break;\n }\n },\n });\n\n const {\n 'aria-labelledby': _labelledby,\n id: _inputId,\n ...inputProps\n } = getInputProps();\n const comboboxProps = getComboboxProps();\n const toggleProps = getToggleButtonProps();\n const menuProps = getMenuProps();\n let elementStartIndex = 0;\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.autocomplete, className)}\n ref={ref}\n >\n <Popover\n usePortal={usePortal}\n isOpen={isOpen}\n isFullWidth={listWidth === 'full'}\n renderOnlyWhenOpen={false}\n // This is necessary, otherwise the focus will change from the input to the Popover\n // and the user won't be able to type in the input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={false}\n id={menuProps.id}\n >\n <Popover.Trigger>\n <div {...comboboxProps} className={styles.combobox}>\n <TextInput\n {...inputProps}\n onFocus={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\n id={id}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n ref={mergeRefs(inputProps.ref, inputRef)}\n testId=\"cf-autocomplete-input\"\n placeholder={placeholder}\n />\n <IconButton\n {...toggleProps}\n ref={mergeRefs(toggleProps.ref, toggleRef)}\n aria-label=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\n onClick={() => {\n if (inputValue) {\n handleInputValueChange('');\n } else {\n toggleMenu();\n }\n }}\n isDisabled={isDisabled}\n size=\"small\"\n />\n </div>\n </Popover.Trigger>\n\n <Popover.Content\n {...menuProps}\n ref={mergeRefs(menuProps.ref, listRef)}\n className={styles.content}\n testId=\"cf-autocomplete-container\"\n >\n {isLoading &&\n [...Array(3)].map((_, index) => (\n <div key={index} className={cx(styles.item, styles.disabled)}>\n <ListItemLoadingState />\n </div>\n ))}\n\n {!isLoading && isShowingNoMatches && (\n <div className={styles.item}>\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n </div>\n )}\n\n {!isLoading &&\n isUsingGroups(isGrouped, items) &&\n items.map((group: GroupType, index: number) => {\n if (group.options.length < 1) {\n return;\n }\n const render = (\n <div key={index}>\n <SectionHeading\n key={index}\n data-test-id=\"cf-autocomplete-grouptitle\"\n marginBottom=\"none\"\n className={styles.groupTitle}\n >\n {group.groupTitle}\n </SectionHeading>\n <AutocompleteItems<ItemType>\n items={group.options}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\n elementStartIndex={elementStartIndex}\n />\n </div>\n );\n elementStartIndex += group.options.length;\n return render;\n })}\n\n {!isLoading &&\n !isUsingGroups(isGrouped, items) &&\n items.length > 0 && (\n <AutocompleteItems<ItemType>\n items={items}\n elementStartIndex={elementStartIndex}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\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// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n isGrouped: boolean,\n items: ItemType[] \| GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n return isGrouped;\n}\n\n/\n The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n props: ExpandProps<AutocompleteProps<T>> & {\n ref?: React.Ref<HTMLDivElement>;\n },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\n\ninterface AutocompleteItemsProps<ItemType> {\n items: ItemType[];\n elementStartIndex: number;\n highlightedIndex: number;\n getItemProps: (\n options: UseComboboxGetItemPropsOptions<ItemType>,\n ) => HTMLAttributes<HTMLLIElement>;\n renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n inputValue: string;\n listMaxHeight?: number;\n}\n\nexport function AutocompleteItems<ItemType>(\n props: AutocompleteItemsProps<ItemType>,\n) {\n const {\n items,\n elementStartIndex,\n highlightedIndex,\n getItemProps,\n renderItem,\n inputValue,\n listMaxHeight = 180,\n } = props;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n return (\n <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n {items.map((item: ItemType, index: number) => {\n const itemIndex = elementStartIndex + index;\n const itemProps = getItemProps({ item, index: itemIndex });\n return (\n <Text\n {...itemProps}\n as=\"li\"\n key={itemIndex}\n className={cx([\n styles.item,\n highlightedIndex === itemIndex && styles.highlighted,\n ])}\n data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n >\n {renderItem ? (\n renderItem(item, inputValue)\n ) : typeof item === 'string' ? (\n <HighlightedItem item={item} inputValue={inputValue} />\n ) : (\n item\n )}\n </Text>\n );\n })}\n </ul>\n );\n}\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n item,\n inputValue,\n}: {\n item: string;\n inputValue: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n\n return (\n <>\n {before}\n <b>{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 getAutocompleteStyles = (listMaxHeight: number) => ({\n autocomplete: css({\n position: 'relative',\n width: '100%',\n }),\n combobox: css({\n position: 'relative',\n }),\n toggleButton: css({\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n padding: tokens.spacing2Xs,\n }),\n content: 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} 0 ${tokens.spacingM} 0`,\n }),\n item: css({\n display: 'block',\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n cursor: 'pointer',\n hyphens: 'auto',\n\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n }),\n disabled: css({\n opacity: 0.5,\n pointerEvents: 'none',\n }),\n highlighted: css({\n backgroundColor: tokens.gray100,\n }),\n});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","onStateChange","type","selectedItem","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","position","top","right","zIndex","padding","spacing2Xs","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","whiteSpace","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"main.js.map"}
1	+ {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n groupTitle: string;\n options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n extends CommonProps,\n Pick<\n TextInputProps,\n \| 'isDisabled'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'id'\n \| 'defaultValue'\n > {\n /*\n It’s an array of data to be used as \"options\" by the autocomplete component.\n * This can either be a plain list of items or a list of groups of items.\n /\n items: ItemType[] \| GenericGroupType<ItemType>[];\n\n /\n Tells if the item is a object with groups\n /\n isGrouped?: boolean;\n\n /\n Function called whenever the input value changes\n /\n onInputValueChange?: (value: string) => void;\n /\n This is the function that will be called when the user selects one of the \"options\" in the list.\n * The component will pass the selected \"item\" as an argument to the function..\n /\n onSelectItem: (item: ItemType) => void;\n /\n This is the function that will be called for each \"item\" passed in the `items` prop.\n * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n * The inputValue is passed in case you want to highlight the match on the render.\n /\n renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n /\n When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n * from those objetcs to be used as inputValue\n /\n itemToString?: (item: ItemType) => string;\n /\n If this is set to `true` the text input will be cleared after an item is selected\n * @default false\n /\n clearAfterSelect?: boolean;\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n placeholder?: string;\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 Use this prop to get a ref to the input element of the component\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\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 It sets the width of the list\n * @default \"auto\"\n /\n listWidth?: 'auto' \| 'full';\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 Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n /\n Boolean to control whether or not to render the suggestions box in a React Portal.\n * Rendering content inside a Portal allows the suggestions box to escape the bounds\n * of its parent while still being positioned correctly.\n * Defaults to `false`\n /\n usePortal?: boolean;\n}\n\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\n noMatchesMessage = 'No matches found',\n placeholder = 'Search',\n inputRef,\n toggleRef,\n listRef,\n listWidth = 'auto',\n listMaxHeight = 180,\n isGrouped = false,\n isLoading = false,\n usePortal = false,\n testId = 'cf-autocomplete',\n } = props;\n\n type GroupType = GenericGroupType<ItemType>;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n const [inputValue, setInputValue] = useState(defaultValue);\n\n const handleInputValueChange = useCallback(\n (value: string) => {\n setInputValue(value);\n\n onInputValueChange?.(value);\n },\n [onInputValueChange],\n );\n\n // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n const handleNativeChangeEvent = useCallback(\n (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const value = event.target.value;\n handleInputValueChange(value);\n },\n [handleInputValueChange],\n );\n\n const flattenItems = isUsingGroups(isGrouped, items)\n ? items.reduce(\n (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n [],\n )\n : items;\n\n const isShowingNoMatches = isUsingGroups(isGrouped, items)\n ? items.every((group: GroupType) => group.options.length === 0)\n : items.length === 0;\n\n const {\n getComboboxProps,\n getInputProps,\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n isOpen,\n toggleMenu,\n } = useCombobox({\n items: flattenItems,\n inputValue,\n itemToString,\n onInputValueChange: ({ type, inputValue }) => {\n if (type !== '__input_change__') {\n handleInputValueChange(inputValue);\n }\n },\n onStateChange: ({ type, selectedItem }) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n if (selectedItem) {\n onSelectItem(selectedItem);\n }\n if (clearAfterSelect) {\n handleInputValueChange('');\n }\n break;\n default:\n break;\n }\n },\n });\n\n const {\n 'aria-labelledby': _labelledby,\n id: _inputId,\n ...inputProps\n } = getInputProps();\n const comboboxProps = getComboboxProps();\n const toggleProps = getToggleButtonProps();\n const menuProps = getMenuProps();\n let elementStartIndex = 0;\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.autocomplete, className)}\n ref={ref}\n >\n <Popover\n usePortal={usePortal}\n isOpen={isOpen}\n isFullWidth={listWidth === 'full'}\n renderOnlyWhenOpen={false}\n // This is necessary, otherwise the focus will change from the input to the Popover\n // and the user won't be able to type in the input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={false}\n id={menuProps.id}\n >\n <Popover.Trigger>\n <div {...comboboxProps} className={styles.combobox}>\n <TextInput\n {...inputProps}\n onFocus={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\n id={id}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n ref={mergeRefs(inputProps.ref, inputRef)}\n testId=\"cf-autocomplete-input\"\n placeholder={placeholder}\n onChange={(event) => {\n inputProps.onChange(event);\n handleNativeChangeEvent(event);\n }}\n />\n <IconButton\n {...toggleProps}\n ref={mergeRefs(toggleProps.ref, toggleRef)}\n aria-label=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\n onClick={() => {\n if (inputValue) {\n handleInputValueChange('');\n } else {\n toggleMenu();\n }\n }}\n isDisabled={isDisabled}\n size=\"small\"\n />\n </div>\n </Popover.Trigger>\n\n <Popover.Content\n {...menuProps}\n ref={mergeRefs(menuProps.ref, listRef)}\n className={styles.content}\n testId=\"cf-autocomplete-container\"\n >\n {isLoading &&\n [...Array(3)].map((_, index) => (\n <div key={index} className={cx(styles.item, styles.disabled)}>\n <ListItemLoadingState />\n </div>\n ))}\n\n {!isLoading && isShowingNoMatches && (\n <div className={styles.item}>\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n </div>\n )}\n\n {!isLoading &&\n isUsingGroups(isGrouped, items) &&\n items.map((group: GroupType, index: number) => {\n if (group.options.length < 1) {\n return;\n }\n const render = (\n <div key={index}>\n <SectionHeading\n key={index}\n data-test-id=\"cf-autocomplete-grouptitle\"\n marginBottom=\"none\"\n className={styles.groupTitle}\n >\n {group.groupTitle}\n </SectionHeading>\n <AutocompleteItems<ItemType>\n items={group.options}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\n elementStartIndex={elementStartIndex}\n />\n </div>\n );\n elementStartIndex += group.options.length;\n return render;\n })}\n\n {!isLoading &&\n !isUsingGroups(isGrouped, items) &&\n items.length > 0 && (\n <AutocompleteItems<ItemType>\n items={items}\n elementStartIndex={elementStartIndex}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\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// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n isGrouped: boolean,\n items: ItemType[] \| GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n return isGrouped;\n}\n\n/\n The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n props: ExpandProps<AutocompleteProps<T>> & {\n ref?: React.Ref<HTMLDivElement>;\n },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\n\ninterface AutocompleteItemsProps<ItemType> {\n items: ItemType[];\n elementStartIndex: number;\n highlightedIndex: number;\n getItemProps: (\n options: UseComboboxGetItemPropsOptions<ItemType>,\n ) => HTMLAttributes<HTMLLIElement>;\n renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n inputValue: string;\n listMaxHeight?: number;\n}\n\nexport function AutocompleteItems<ItemType>(\n props: AutocompleteItemsProps<ItemType>,\n) {\n const {\n items,\n elementStartIndex,\n highlightedIndex,\n getItemProps,\n renderItem,\n inputValue,\n listMaxHeight = 180,\n } = props;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n return (\n <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n {items.map((item: ItemType, index: number) => {\n const itemIndex = elementStartIndex + index;\n const itemProps = getItemProps({ item, index: itemIndex });\n return (\n <Text\n {...itemProps}\n as=\"li\"\n key={itemIndex}\n className={cx([\n styles.item,\n highlightedIndex === itemIndex && styles.highlighted,\n ])}\n data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n >\n {renderItem ? (\n renderItem(item, inputValue)\n ) : typeof item === 'string' ? (\n <HighlightedItem item={item} inputValue={inputValue} />\n ) : (\n item\n )}\n </Text>\n );\n })}\n </ul>\n );\n}\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n item,\n inputValue,\n}: {\n item: string;\n inputValue: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n\n return (\n <>\n {before}\n <b>{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 getAutocompleteStyles = (listMaxHeight: number) => ({\n autocomplete: css({\n position: 'relative',\n width: '100%',\n }),\n combobox: css({\n position: 'relative',\n }),\n toggleButton: css({\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n padding: tokens.spacing2Xs,\n }),\n content: 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} 0 ${tokens.spacingM} 0`,\n }),\n item: css({\n display: 'block',\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n cursor: 'pointer',\n hyphens: 'auto',\n\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n }),\n disabled: css({\n opacity: 0.5,\n pointerEvents: 'none',\n }),\n highlighted: css({\n backgroundColor: tokens.gray100,\n }),\n});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","selectedItem","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","position","top","right","zIndex","padding","spacing2Xs","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","whiteSpace","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"main.js.map"}

package/dist/module.js CHANGED Viewed

@@ -131,6 +131,12 @@ function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
         onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(value);
     }, [
         onInputValueChange
+    ]); // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759
+    const handleNativeChangeEvent = $7oe8x$useCallback((event)=>{
+        const value = event.target.value;
+        handleInputValueChange(value);
+    }, [
+        handleInputValueChange
     ]);
     const flattenItems = $7cd5ba9838c72bf9$var$isUsingGroups(isGrouped, items) ? items.reduce((acc, group)=>[
             ...acc,
@@ -143,8 +149,8 @@ function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
         items: flattenItems,
         inputValue: inputValue1,
         itemToString: itemToString,
-        onInputValueChange: ({ inputValue: inputValue  })=>{
-            handleInputValueChange(inputValue);
+        onInputValueChange: ({ type: type , inputValue: inputValue  })=>{
+            if (type !== '__input_change__') handleInputValueChange(inputValue);
         },
         onStateChange: ({ type: type , selectedItem: selectedItem  })=>{
             switch(type){
@@ -191,7 +197,11 @@ function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
         isReadOnly: isReadOnly,
         ref: $7oe8x$mergeRefs(inputProps.ref, inputRef),
         testId: "cf-autocomplete-input",
-        placeholder: placeholder
+        placeholder: placeholder,
+        onChange: (event)=>{
+            inputProps.onChange(event);
+            handleNativeChangeEvent(event);
+        }
     }), /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$IconButton, {
         ...toggleProps,
         ref: $7oe8x$mergeRefs(toggleProps.ref, toggleRef),

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n groupTitle: string;\n options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n extends CommonProps,\n Pick<\n TextInputProps,\n \| 'isDisabled'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'id'\n \| 'defaultValue'\n > {\n /*\n It’s an array of data to be used as \"options\" by the autocomplete component.\n * This can either be a plain list of items or a list of groups of items.\n /\n items: ItemType[] \| GenericGroupType<ItemType>[];\n\n /\n Tells if the item is a object with groups\n /\n isGrouped?: boolean;\n\n /\n Function called whenever the input value changes\n /\n onInputValueChange?: (value: string) => void;\n /\n This is the function that will be called when the user selects one of the \"options\" in the list.\n * The component will pass the selected \"item\" as an argument to the function..\n /\n onSelectItem: (item: ItemType) => void;\n /\n This is the function that will be called for each \"item\" passed in the `items` prop.\n * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n * The inputValue is passed in case you want to highlight the match on the render.\n /\n renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n /\n When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n * from those objetcs to be used as inputValue\n /\n itemToString?: (item: ItemType) => string;\n /\n If this is set to `true` the text input will be cleared after an item is selected\n * @default false\n /\n clearAfterSelect?: boolean;\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n placeholder?: string;\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 Use this prop to get a ref to the input element of the component\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\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 It sets the width of the list\n * @default \"auto\"\n /\n listWidth?: 'auto' \| 'full';\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 Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n /\n Boolean to control whether or not to render the suggestions box in a React Portal.\n * Rendering content inside a Portal allows the suggestions box to escape the bounds\n * of its parent while still being positioned correctly.\n * Defaults to `false`\n /\n usePortal?: boolean;\n}\n\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\n noMatchesMessage = 'No matches found',\n placeholder = 'Search',\n inputRef,\n toggleRef,\n listRef,\n listWidth = 'auto',\n listMaxHeight = 180,\n isGrouped = false,\n isLoading = false,\n usePortal = false,\n testId = 'cf-autocomplete',\n } = props;\n\n type GroupType = GenericGroupType<ItemType>;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n const [inputValue, setInputValue] = useState(defaultValue);\n\n const handleInputValueChange = useCallback(\n (value) => {\n setInputValue(value);\n\n onInputValueChange?.(value);\n },\n [onInputValueChange],\n );\n\n const flattenItems = isUsingGroups(isGrouped, items)\n ? items.reduce(\n (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n [],\n )\n : items;\n\n const isShowingNoMatches = isUsingGroups(isGrouped, items)\n ? items.every((group: GroupType) => group.options.length === 0)\n : items.length === 0;\n\n const {\n getComboboxProps,\n getInputProps,\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n isOpen,\n toggleMenu,\n } = useCombobox({\n items: flattenItems,\n inputValue,\n itemToString,\n onInputValueChange: ({ inputValue }) => {\n handleInputValueChange(inputValue);\n },\n onStateChange: ({ type, selectedItem }) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n if (selectedItem) {\n onSelectItem(selectedItem);\n }\n if (clearAfterSelect) {\n handleInputValueChange('');\n }\n break;\n default:\n break;\n }\n },\n });\n\n const {\n 'aria-labelledby': _labelledby,\n id: _inputId,\n ...inputProps\n } = getInputProps();\n const comboboxProps = getComboboxProps();\n const toggleProps = getToggleButtonProps();\n const menuProps = getMenuProps();\n let elementStartIndex = 0;\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.autocomplete, className)}\n ref={ref}\n >\n <Popover\n usePortal={usePortal}\n isOpen={isOpen}\n isFullWidth={listWidth === 'full'}\n renderOnlyWhenOpen={false}\n // This is necessary, otherwise the focus will change from the input to the Popover\n // and the user won't be able to type in the input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={false}\n id={menuProps.id}\n >\n <Popover.Trigger>\n <div {...comboboxProps} className={styles.combobox}>\n <TextInput\n {...inputProps}\n onFocus={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\n id={id}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n ref={mergeRefs(inputProps.ref, inputRef)}\n testId=\"cf-autocomplete-input\"\n placeholder={placeholder}\n />\n <IconButton\n {...toggleProps}\n ref={mergeRefs(toggleProps.ref, toggleRef)}\n aria-label=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\n onClick={() => {\n if (inputValue) {\n handleInputValueChange('');\n } else {\n toggleMenu();\n }\n }}\n isDisabled={isDisabled}\n size=\"small\"\n />\n </div>\n </Popover.Trigger>\n\n <Popover.Content\n {...menuProps}\n ref={mergeRefs(menuProps.ref, listRef)}\n className={styles.content}\n testId=\"cf-autocomplete-container\"\n >\n {isLoading &&\n [...Array(3)].map((_, index) => (\n <div key={index} className={cx(styles.item, styles.disabled)}>\n <ListItemLoadingState />\n </div>\n ))}\n\n {!isLoading && isShowingNoMatches && (\n <div className={styles.item}>\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n </div>\n )}\n\n {!isLoading &&\n isUsingGroups(isGrouped, items) &&\n items.map((group: GroupType, index: number) => {\n if (group.options.length < 1) {\n return;\n }\n const render = (\n <div key={index}>\n <SectionHeading\n key={index}\n data-test-id=\"cf-autocomplete-grouptitle\"\n marginBottom=\"none\"\n className={styles.groupTitle}\n >\n {group.groupTitle}\n </SectionHeading>\n <AutocompleteItems<ItemType>\n items={group.options}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\n elementStartIndex={elementStartIndex}\n />\n </div>\n );\n elementStartIndex += group.options.length;\n return render;\n })}\n\n {!isLoading &&\n !isUsingGroups(isGrouped, items) &&\n items.length > 0 && (\n <AutocompleteItems<ItemType>\n items={items}\n elementStartIndex={elementStartIndex}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\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// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n isGrouped: boolean,\n items: ItemType[] \| GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n return isGrouped;\n}\n\n/\n The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n props: ExpandProps<AutocompleteProps<T>> & {\n ref?: React.Ref<HTMLDivElement>;\n },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\n\ninterface AutocompleteItemsProps<ItemType> {\n items: ItemType[];\n elementStartIndex: number;\n highlightedIndex: number;\n getItemProps: (\n options: UseComboboxGetItemPropsOptions<ItemType>,\n ) => HTMLAttributes<HTMLLIElement>;\n renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n inputValue: string;\n listMaxHeight?: number;\n}\n\nexport function AutocompleteItems<ItemType>(\n props: AutocompleteItemsProps<ItemType>,\n) {\n const {\n items,\n elementStartIndex,\n highlightedIndex,\n getItemProps,\n renderItem,\n inputValue,\n listMaxHeight = 180,\n } = props;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n return (\n <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n {items.map((item: ItemType, index: number) => {\n const itemIndex = elementStartIndex + index;\n const itemProps = getItemProps({ item, index: itemIndex });\n return (\n <Text\n {...itemProps}\n as=\"li\"\n key={itemIndex}\n className={cx([\n styles.item,\n highlightedIndex === itemIndex && styles.highlighted,\n ])}\n data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n >\n {renderItem ? (\n renderItem(item, inputValue)\n ) : typeof item === 'string' ? (\n <HighlightedItem item={item} inputValue={inputValue} />\n ) : (\n item\n )}\n </Text>\n );\n })}\n </ul>\n );\n}\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n item,\n inputValue,\n}: {\n item: string;\n inputValue: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n\n return (\n <>\n {before}\n <b>{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 getAutocompleteStyles = (listMaxHeight: number) => ({\n autocomplete: css({\n position: 'relative',\n width: '100%',\n }),\n combobox: css({\n position: 'relative',\n }),\n toggleButton: css({\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n padding: tokens.spacing2Xs,\n }),\n content: 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} 0 ${tokens.spacingM} 0`,\n }),\n item: css({\n display: 'block',\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n cursor: 'pointer',\n hyphens: 'auto',\n\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n }),\n disabled: css({\n opacity: 0.5,\n pointerEvents: 'none',\n }),\n highlighted: css({\n backgroundColor: tokens.gray100,\n }),\n});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","onStateChange","type","selectedItem","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","position","top","right","zIndex","padding","spacing2Xs","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","whiteSpace","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"module.js.map"}
1	+ {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n groupTitle: string;\n options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n extends CommonProps,\n Pick<\n TextInputProps,\n \| 'isDisabled'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'id'\n \| 'defaultValue'\n > {\n /*\n It’s an array of data to be used as \"options\" by the autocomplete component.\n * This can either be a plain list of items or a list of groups of items.\n /\n items: ItemType[] \| GenericGroupType<ItemType>[];\n\n /\n Tells if the item is a object with groups\n /\n isGrouped?: boolean;\n\n /\n Function called whenever the input value changes\n /\n onInputValueChange?: (value: string) => void;\n /\n This is the function that will be called when the user selects one of the \"options\" in the list.\n * The component will pass the selected \"item\" as an argument to the function..\n /\n onSelectItem: (item: ItemType) => void;\n /\n This is the function that will be called for each \"item\" passed in the `items` prop.\n * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n * The inputValue is passed in case you want to highlight the match on the render.\n /\n renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n /\n When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n * from those objetcs to be used as inputValue\n /\n itemToString?: (item: ItemType) => string;\n /\n If this is set to `true` the text input will be cleared after an item is selected\n * @default false\n /\n clearAfterSelect?: boolean;\n /\n This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n /\n placeholder?: string;\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 Use this prop to get a ref to the input element of the component\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Use this prop to get a ref to the toggle button of the component\n /\n toggleRef?: React.Ref<HTMLButtonElement>;\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 It sets the width of the list\n * @default \"auto\"\n /\n listWidth?: 'auto' \| 'full';\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 Sets the list to show its loading state\n * @default false\n /\n isLoading?: boolean;\n /\n Boolean to control whether or not to render the suggestions box in a React Portal.\n * Rendering content inside a Portal allows the suggestions box to escape the bounds\n * of its parent while still being positioned correctly.\n * Defaults to `false`\n /\n usePortal?: boolean;\n}\n\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\n noMatchesMessage = 'No matches found',\n placeholder = 'Search',\n inputRef,\n toggleRef,\n listRef,\n listWidth = 'auto',\n listMaxHeight = 180,\n isGrouped = false,\n isLoading = false,\n usePortal = false,\n testId = 'cf-autocomplete',\n } = props;\n\n type GroupType = GenericGroupType<ItemType>;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n const [inputValue, setInputValue] = useState(defaultValue);\n\n const handleInputValueChange = useCallback(\n (value: string) => {\n setInputValue(value);\n\n onInputValueChange?.(value);\n },\n [onInputValueChange],\n );\n\n // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n const handleNativeChangeEvent = useCallback(\n (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const value = event.target.value;\n handleInputValueChange(value);\n },\n [handleInputValueChange],\n );\n\n const flattenItems = isUsingGroups(isGrouped, items)\n ? items.reduce(\n (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n [],\n )\n : items;\n\n const isShowingNoMatches = isUsingGroups(isGrouped, items)\n ? items.every((group: GroupType) => group.options.length === 0)\n : items.length === 0;\n\n const {\n getComboboxProps,\n getInputProps,\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n isOpen,\n toggleMenu,\n } = useCombobox({\n items: flattenItems,\n inputValue,\n itemToString,\n onInputValueChange: ({ type, inputValue }) => {\n if (type !== '__input_change__') {\n handleInputValueChange(inputValue);\n }\n },\n onStateChange: ({ type, selectedItem }) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n if (selectedItem) {\n onSelectItem(selectedItem);\n }\n if (clearAfterSelect) {\n handleInputValueChange('');\n }\n break;\n default:\n break;\n }\n },\n });\n\n const {\n 'aria-labelledby': _labelledby,\n id: _inputId,\n ...inputProps\n } = getInputProps();\n const comboboxProps = getComboboxProps();\n const toggleProps = getToggleButtonProps();\n const menuProps = getMenuProps();\n let elementStartIndex = 0;\n\n return (\n <div\n data-test-id={testId}\n className={cx(styles.autocomplete, className)}\n ref={ref}\n >\n <Popover\n usePortal={usePortal}\n isOpen={isOpen}\n isFullWidth={listWidth === 'full'}\n renderOnlyWhenOpen={false}\n // This is necessary, otherwise the focus will change from the input to the Popover\n // and the user won't be able to type in the input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={false}\n id={menuProps.id}\n >\n <Popover.Trigger>\n <div {...comboboxProps} className={styles.combobox}>\n <TextInput\n {...inputProps}\n onFocus={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\n id={id}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n ref={mergeRefs(inputProps.ref, inputRef)}\n testId=\"cf-autocomplete-input\"\n placeholder={placeholder}\n onChange={(event) => {\n inputProps.onChange(event);\n handleNativeChangeEvent(event);\n }}\n />\n <IconButton\n {...toggleProps}\n ref={mergeRefs(toggleProps.ref, toggleRef)}\n aria-label=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\n onClick={() => {\n if (inputValue) {\n handleInputValueChange('');\n } else {\n toggleMenu();\n }\n }}\n isDisabled={isDisabled}\n size=\"small\"\n />\n </div>\n </Popover.Trigger>\n\n <Popover.Content\n {...menuProps}\n ref={mergeRefs(menuProps.ref, listRef)}\n className={styles.content}\n testId=\"cf-autocomplete-container\"\n >\n {isLoading &&\n [...Array(3)].map((_, index) => (\n <div key={index} className={cx(styles.item, styles.disabled)}>\n <ListItemLoadingState />\n </div>\n ))}\n\n {!isLoading && isShowingNoMatches && (\n <div className={styles.item}>\n <Subheading className={styles.noMatchesTitle}>\n {noMatchesMessage}\n </Subheading>\n </div>\n )}\n\n {!isLoading &&\n isUsingGroups(isGrouped, items) &&\n items.map((group: GroupType, index: number) => {\n if (group.options.length < 1) {\n return;\n }\n const render = (\n <div key={index}>\n <SectionHeading\n key={index}\n data-test-id=\"cf-autocomplete-grouptitle\"\n marginBottom=\"none\"\n className={styles.groupTitle}\n >\n {group.groupTitle}\n </SectionHeading>\n <AutocompleteItems<ItemType>\n items={group.options}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\n elementStartIndex={elementStartIndex}\n />\n </div>\n );\n elementStartIndex += group.options.length;\n return render;\n })}\n\n {!isLoading &&\n !isUsingGroups(isGrouped, items) &&\n items.length > 0 && (\n <AutocompleteItems<ItemType>\n items={items}\n elementStartIndex={elementStartIndex}\n highlightedIndex={highlightedIndex}\n getItemProps={getItemProps}\n renderItem={renderItem}\n inputValue={inputValue}\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// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n isGrouped: boolean,\n items: ItemType[] \| GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n return isGrouped;\n}\n\n/\n The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n props: ExpandProps<AutocompleteProps<T>> & {\n ref?: React.Ref<HTMLDivElement>;\n },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\n\ninterface AutocompleteItemsProps<ItemType> {\n items: ItemType[];\n elementStartIndex: number;\n highlightedIndex: number;\n getItemProps: (\n options: UseComboboxGetItemPropsOptions<ItemType>,\n ) => HTMLAttributes<HTMLLIElement>;\n renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n inputValue: string;\n listMaxHeight?: number;\n}\n\nexport function AutocompleteItems<ItemType>(\n props: AutocompleteItemsProps<ItemType>,\n) {\n const {\n items,\n elementStartIndex,\n highlightedIndex,\n getItemProps,\n renderItem,\n inputValue,\n listMaxHeight = 180,\n } = props;\n\n const styles = getAutocompleteStyles(listMaxHeight);\n\n return (\n <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n {items.map((item: ItemType, index: number) => {\n const itemIndex = elementStartIndex + index;\n const itemProps = getItemProps({ item, index: itemIndex });\n return (\n <Text\n {...itemProps}\n as=\"li\"\n key={itemIndex}\n className={cx([\n styles.item,\n highlightedIndex === itemIndex && styles.highlighted,\n ])}\n data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n >\n {renderItem ? (\n renderItem(item, inputValue)\n ) : typeof item === 'string' ? (\n <HighlightedItem item={item} inputValue={inputValue} />\n ) : (\n item\n )}\n </Text>\n );\n })}\n </ul>\n );\n}\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n item,\n inputValue,\n}: {\n item: string;\n inputValue: string;\n}) {\n const { before, match, after } = getStringMatch(item, inputValue);\n\n return (\n <>\n {before}\n <b>{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 getAutocompleteStyles = (listMaxHeight: number) => ({\n autocomplete: css({\n position: 'relative',\n width: '100%',\n }),\n combobox: css({\n position: 'relative',\n }),\n toggleButton: css({\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n padding: tokens.spacing2Xs,\n }),\n content: 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} 0 ${tokens.spacingM} 0`,\n }),\n item: css({\n display: 'block',\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n wordBreak: 'break-word',\n whiteSpace: 'break-spaces',\n cursor: 'pointer',\n hyphens: 'auto',\n\n '&:focus, &:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n },\n }),\n disabled: css({\n opacity: 0.5,\n pointerEvents: 'none',\n }),\n highlighted: css({\n backgroundColor: tokens.gray100,\n }),\n});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","selectedItem","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","position","top","right","zIndex","padding","spacing2Xs","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","whiteSpace","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;AEiBA,2BAAkC,QAAQ;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAGD,mCAAmC,QAAQ,CACzC,SAAQ,WAAW,EACjB,IAAI,CACF,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,IAAI,GACJ,cAAc,CACjB;IACH;;;OAGG;IACH,KAAK,EAAE,QAAQ,EAAE,GAAG,iBAAiB,QAAQ,CAAC,EAAE,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;IACrE;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,+BAAuB,QAAQ,EAC7B,KAAK,EAAE,kBAAkB,QAAQ,CAAC,EAClC,GAAG,EAAE,MAAM,GAAG,CAAC,cAAc,CAAC,~~eAkO~~/B;AAkBD;;;;GAIG;AACH,OAAO,MAAM;UAEH,MAAM,GAAG,CAAC,cAAc,CAAC;MAE9B,WAAW,oBAAoB,CAAC,CAAC","sources":["packages/components/autocomplete/src/src/Autocomplete.styles.ts","packages/components/autocomplete/src/src/AutocompleteItems.tsx","packages/components/autocomplete/src/src/Autocomplete.tsx","packages/components/autocomplete/src/src/index.ts","packages/components/autocomplete/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1	+ {"mappings":";;;AEiBA,2BAAkC,QAAQ;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAGD,mCAAmC,QAAQ,CACzC,SAAQ,WAAW,EACjB,IAAI,CACF,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,IAAI,GACJ,cAAc,CACjB;IACH;;;OAGG;IACH,KAAK,EAAE,QAAQ,EAAE,GAAG,iBAAiB,QAAQ,CAAC,EAAE,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;IACrE;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,+BAAuB,QAAQ,EAC7B,KAAK,EAAE,kBAAkB,QAAQ,CAAC,EAClC,GAAG,EAAE,MAAM,GAAG,CAAC,cAAc,CAAC,eAiP/B;AAkBD;;;;GAIG;AACH,OAAO,MAAM;UAEH,MAAM,GAAG,CAAC,cAAc,CAAC;MAE9B,WAAW,oBAAoB,CAAC,CAAC","sources":["packages/components/autocomplete/src/src/Autocomplete.styles.ts","packages/components/autocomplete/src/src/AutocompleteItems.tsx","packages/components/autocomplete/src/src/Autocomplete.tsx","packages/components/autocomplete/src/src/index.ts","packages/components/autocomplete/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json CHANGED Viewed

@@ -1,21 +1,21 @@
 {
   "name": "@contentful/f36-autocomplete",
-  "version": "4.2.10",
+  "version": "4.3.10",
   "description": "Forma 36: Autocomplete component",
   "scripts": {
     "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "^4.3.6",
-    "@contentful/f36-core": "^4.2.3",
-    "@contentful/f36-forms": "^4.3.5",
-    "@contentful/f36-icons": "^4.1.4",
-    "@contentful/f36-popover": "^4.2.4",
-    "@contentful/f36-skeleton": "^4.1.5",
+    "@contentful/f36-button": "^4.3.10",
+    "@contentful/f36-core": "^4.3.10",
+    "@contentful/f36-forms": "^4.3.10",
+    "@contentful/f36-icons": "^4.3.10",
+    "@contentful/f36-popover": "^4.3.10",
+    "@contentful/f36-skeleton": "^4.3.10",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^4.2.3",
-    "@contentful/f36-utils": "^4.0.0",
+    "@contentful/f36-typography": "^4.3.10",
+    "@contentful/f36-utils": "^4.3.10",
     "downshift": "^6.1.7",
     "emotion": "^10.0.17"
   },
@@ -38,6 +38,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "6021bd8c158b43768d0f85de44bd1f5a1cf529ae"
+  }
 }

package/LICENSE.md DELETED Viewed

@@ -1,7 +0,0 @@
-Copyright (c) 2018-present Contentful GmbH
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.