react-loqate - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/components/DefaultListItem.d.ts

 import { LiHTMLAttributes } from 'react';
-declare const DefaultListItem: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
+import { Item } from '..';
+declare const DefaultListItem: (props: LiHTMLAttributes<HTMLLIElement> & {
+    suggestion: Item;
+}) => JSX.Element;
 export default DefaultListItem;

dist/index.d.ts

 import { ComponentType } from 'react';
-interface Props {
+export interface Props {
     locale: string;
@@ -16,3 +16,5 @@ apiKey: string;
     List?: ComponentType;
-    ListItem?: ComponentType;
+    ListItem?: ComponentType<{
+        suggestion: Item;
+    }>;
 }
@@ -78,3 +80,10 @@ export interface Address {
 }
+export interface Item {
+    Id: string;
+    Description: string;
+    Type: string;
+    Text: string;
+    Highlight: string;
+}
 declare const AddressSearch: (props: Props) => JSX.Element;
 export default AddressSearch;

dist/react-loqate.cjs.development.js

@@ -11,2 +11,3 @@ 'use strict';
 var clsx = _interopDefault(require('clsx'));
+var axios = _interopDefault(require('axios'));
 
@@ -833,3 +834,4 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   return React__default.createElement("input", Object.assign({
-    className: clsx(classes.input, className)
+    className: clsx(classes.input, className),
+    "data-testid": "default-input"
   }, rest));
@@ -854,3 +856,4 @@ };
   return React__default.createElement("ul", Object.assign({
-    className: clsx(classes.list, className)
+    className: clsx(classes.list, className),
+    "data-testid": "default-list"
   }, rest, {
@@ -870,9 +873,22 @@ ref: ref
 var DefaultListItem = function DefaultListItem(props) {
+  var _result$slice;
+
   var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+      value = props.value,
+      suggestion = props.suggestion,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "value", "children", "suggestion"]);
 
   var classes = useStyles$2();
+  var regex = new RegExp("(.*)(" + value + ")(.*)", 'i');
+  var search = suggestion.Text + " " + suggestion.Description;
+  var result = search.match(regex);
+
+  var _ref = (_result$slice = result == null ? void 0 : result.slice(1)) != null ? _result$slice : ['', '', ''],
+      before = _ref[0],
+      match = _ref[1],
+      after = _ref[2];
+
   return React__default.createElement("li", Object.assign({
     className: clsx(classes.listItem, className)
-  }, rest));
+  }, rest), React__default.createElement(React__default.Fragment, null, before, React__default.createElement("strong", null, match), after));
 };
@@ -915,2 +931,6 @@
 
+  var _useState2 = React.useState(''),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
   var anchorRef = React.useRef(null);
@@ -926,3 +946,3 @@ var rect = (_document$body$getEle = document.body.getElementsByClassName('react-loqate-list-anchor')[0]) == null ? void 0 : _document$body$getEle.getBoundingClientRect();
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(sug) {
-      var url, res, _anchorRef$current, value, sugs;
+      var url, res, _anchorRef$current, _value, sugs;
 
@@ -940,4 +960,4 @@ return runtime_1.wrap(function _callee$(_context) {
               _context.next = 4;
-              return fetch(url).then(function (response) {
-                return response.json();
+              return axios.get(url).then(function (response) {
+                return response.data;
               });
@@ -953,5 +973,5 @@
             case 9:
-              value = ((_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.value) || '';
+              _value = ((_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.value) || '';
               _context.next = 12;
-              return find(value, sug.Id);
+              return find(_value, sug.Id);
 
@@ -983,3 +1003,3 @@ case 12:
               baseUrl = "https://api.addressy.com/Capture/Interactive/Find/v1.10/json3.ws";
-              countriesString = (countries == null ? void 0 : countries.length) ? "&Countries=" + countries.join(',') : '';
+              countriesString = countries != null && countries.length ? "&Countries=" + countries.join(',') : '';
               limitString = limit ? "&limit=" + limit : '';
@@ -993,4 +1013,4 @@ keyString = "?Key=" + apiKey;
               _context2.next = 11;
-              return fetch(url).then(function (response) {
-                return response.json();
+              return axios.get(url).then(function (response) {
+                return response.data;
               });
@@ -1001,3 +1021,3 @@
 
-              if (!(res == null ? void 0 : res.Items)) {
+              if (!(res != null && res.Items)) {
                 _context2.next = 14;
@@ -1039,5 +1059,6 @@ break;
               addressSearch = e.target.value;
+              setValue(addressSearch);
 
               if (!(addressSearch === '')) {
-                _context3.next = 5;
+                _context3.next = 6;
                 break;
@@ -1047,14 +1068,14 @@ }
               setSuggestions([]);
-              _context3.next = 9;
+              _context3.next = 10;
               break;
 
-            case 5:
-              _context3.next = 7;
+            case 6:
+              _context3.next = 8;
               return find(addressSearch);
 
-            case 7:
+            case 8:
               sugs = _context3.sent;
               setSuggestions(sugs);
 
-            case 9:
+            case 10:
             case "end":
@@ -1077,3 +1098,4 @@ return _context3.stop();
     className: clsx(inputClassname, 'react-loqate-list-anchor'),
-    onChange: handleChange
+    onChange: handleChange,
+    value: value
   }), React__default.createElement(core.Portal, {
@@ -1088,9 +1110,12 @@ container: document.body
     className: clsx(classes.listPosition, listClassname)
-  }, suggestions.map(function (sug) {
+  }, suggestions.map(function (sug, i) {
     return React__default.createElement(ListItem, {
-      key: sug.Id,
+      key: sug.Id + i,
       onClick: function onClick() {
         return selectSuggestion(sug);
       },
-      className: listItemClassname
+      className: listItemClassname,
+      "data-testid": "default-list-item-" + sug.Id,
+      value: value,
+      suggestion: sug
     }, sug.Text, " ", sug.Description);
@@ -1097,0 +1122,0 @@ })))));

dist/react-loqate.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=t(e),n=require("@material-ui/core"),o=t(require("clsx"));function i(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function a(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var a=t.apply(e,r);function c(t){i(a,n,o,c,u,"next",t)}function u(t){i(a,n,o,c,u,"throw",t)}c(void 0)}))}}function c(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}var u,s=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new L(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=x(a,r);if(c){if(c===l)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=s(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var d={};d[o]=function(){return this};var v=Object.getPrototypeOf,m=v&&v(v(k([])));m&&m!==e&&r.call(m,o)&&(d=m);var y=p.prototype=f.prototype=Object.create(d);function g(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function w(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function x(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function L(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function k(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:j}}function j(){return{value:void 0,done:!0}}return h.prototype=y.constructor=p,p.constructor=h,h.displayName=c(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(w.prototype),w.prototype[i]=function(){return this},t.AsyncIterator=w,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new w(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),c(y,a,"Generator"),y[o]=function(){return this},y.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=k,L.prototype={constructor:L,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;E(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:k(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}}(u={exports:{}}),u.exports),l=n.makeStyles({input:{width:"100%",border:"none",borderBottom:"1px solid black",height:40}}),f=function(t){var e=t.className,n=c(t,["className"]),i=l();return r.createElement("input",Object.assign({className:o(i.input,e)},n))},h=n.makeStyles({list:{backgroundColor:"white",boxShadow:"0px 0px 25px rgba(0, 0, 0, 0.08)",listStyleType:"none",paddingInlineStart:0,marginBlockStart:0,marginBlockEnd:0}}),p=e.forwardRef((function(t,e){var n=t.className,i=c(t,["className"]),a=h();return r.createElement("ul",Object.assign({className:o(a.list,n)},i,{ref:e}))})),d=n.makeStyles({listItem:{cursor:"pointer",marginTop:4,marginBottom:4}}),v=function(t){var e=t.className,n=c(t,["className"]),i=d();return r.createElement("li",Object.assign({className:o(i.listItem,e)},n))},m=n.makeStyles({listPosition:function(t){return{position:"absolute",top:t.top,left:t.left,width:t.width}}});exports.default=function(t){var i,c=t.locale,u=t.countries,l=t.onSelect,h=t.limit,d=t.apiKey,y=t.listClassname,g=t.listItemClassname,w=t.inputClassname,x=t.components,b=e.useState([]),E=b[0],L=b[1],k=e.useRef(null),j=null==(i=document.body.getElementsByClassName("react-loqate-list-anchor")[0])?void 0:i.getBoundingClientRect(),N=m({top:(null==j?void 0:j.y)+(null==j?void 0:j.height)+window.scrollY||0,left:(null==j?void 0:j.left)||0,width:(null==j?void 0:j.width)||void 0}),I=function(){var t=a(s.mark((function t(e){var r,n,o,i;return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("Address"!==e.Type){t.next=9;break}return r="https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws?Key="+d+"&Id="+e.Id,t.next=4,fetch(r).then((function(t){return t.json()}));case 4:(n=t.sent).Items.length&&L([]),l(n.Items[0]),t.next=14;break;case 9:return i=(null==(o=k.current)?void 0:o.value)||"",t.next=12,O(i,e.Id);case 12:L(t.sent);case 14:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),O=function(){var t=a(s.mark((function t(e,r){var n,o,i,a,l,f,p,v;return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=(null==u?void 0:u.length)?"&Countries="+u.join(","):"",o=h?"&limit="+h:"",i="?Key="+d,a="&Text="+e,l=r?"&Container="+r:"",f="&Language="+c.split("_")[0],p="https://api.addressy.com/Capture/Interactive/Find/v1.10/json3.ws"+i+o+n+f+l+a,t.prev=8,t.next=11,fetch(p).then((function(t){return t.json()}));case 11:if(!(null==(v=t.sent)?void 0:v.Items)){t.next=14;break}return t.abrupt("return",v.Items);case 14:t.next=19;break;case 16:t.prev=16,t.t0=t.catch(8),console.error(t.t0);case 19:case"end":return t.stop()}}),t,null,[[8,16]])})));return function(e,r){return t.apply(this,arguments)}}(),_=function(){var t=a(s.mark((function t(e){var r;return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(""!==(r=e.target.value)){t.next=5;break}L([]),t.next=9;break;case 5:return t.next=7,O(r);case 7:L(t.sent);case 9:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),S=(null==x?void 0:x.List)||p,C=(null==x?void 0:x.ListItem)||v;return r.createElement(r.Fragment,null,r.createElement((null==x?void 0:x.Input)||f,{className:o(w,"react-loqate-list-anchor"),onChange:_}),r.createElement(n.Portal,{container:document.body},r.createElement(n.ClickAwayListener,{onClickAway:function(){return L([])}},r.createElement(S,{hidden:!E.length,className:o(N.listPosition,y)},E.map((function(t){return r.createElement(C,{key:t.Id,onClick:function(){return I(t)},className:g},t.Text," ",t.Description)}))))))};
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=t(e),n=require("@material-ui/core"),o=t(require("clsx")),i=t(require("axios"));function a(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function c(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function c(t){a(i,n,o,c,u,"next",t)}function u(t){a(i,n,o,c,u,"throw",t)}c(void 0)}))}}function u(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}var s,l=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new L(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=x(a,r);if(c){if(c===l)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=s(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var d={};d[o]=function(){return this};var v=Object.getPrototypeOf,m=v&&v(v(k([])));m&&m!==e&&r.call(m,o)&&(d=m);var y=p.prototype=f.prototype=Object.create(d);function g(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function w(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function x(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function L(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function k(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:N}}function N(){return{value:void 0,done:!0}}return h.prototype=y.constructor=p,p.constructor=h,h.displayName=c(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(w.prototype),w.prototype[i]=function(){return this},t.AsyncIterator=w,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new w(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),c(y,a,"Generator"),y[o]=function(){return this},y.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=k,L.prototype={constructor:L,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;E(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:k(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}}(s={exports:{}}),s.exports),f=n.makeStyles({input:{width:"100%",border:"none",borderBottom:"1px solid black",height:40}}),h=function(t){var e=t.className,n=u(t,["className"]),i=f();return r.createElement("input",Object.assign({className:o(i.input,e),"data-testid":"default-input"},n))},p=n.makeStyles({list:{backgroundColor:"white",boxShadow:"0px 0px 25px rgba(0, 0, 0, 0.08)",listStyleType:"none",paddingInlineStart:0,marginBlockStart:0,marginBlockEnd:0}}),d=e.forwardRef((function(t,e){var n=t.className,i=u(t,["className"]),a=p();return r.createElement("ul",Object.assign({className:o(a.list,n),"data-testid":"default-list"},i,{ref:e}))})),v=n.makeStyles({listItem:{cursor:"pointer",marginTop:4,marginBottom:4}}),m=function(t){var e,n=t.className,i=t.value,a=t.suggestion,c=u(t,["className","value","children","suggestion"]),s=v(),l=new RegExp("(.*)("+i+")(.*)","i"),f=(a.Text+" "+a.Description).match(l),h=null!=(e=null==f?void 0:f.slice(1))?e:["","",""],p=h[0],d=h[1],m=h[2];return r.createElement("li",Object.assign({className:o(s.listItem,n)},c),r.createElement(r.Fragment,null,p,r.createElement("strong",null,d),m))},y=n.makeStyles({listPosition:function(t){return{position:"absolute",top:t.top,left:t.left,width:t.width}}});exports.default=function(t){var a,u=t.locale,s=t.countries,f=t.onSelect,p=t.limit,v=t.apiKey,g=t.listClassname,w=t.listItemClassname,x=t.inputClassname,b=t.components,E=e.useState([]),L=E[0],k=E[1],N=e.useState(""),j=N[0],I=N[1],O=e.useRef(null),S=null==(a=document.body.getElementsByClassName("react-loqate-list-anchor")[0])?void 0:a.getBoundingClientRect(),_=y({top:(null==S?void 0:S.y)+(null==S?void 0:S.height)+window.scrollY||0,left:(null==S?void 0:S.left)||0,width:(null==S?void 0:S.width)||void 0}),C=function(){var t=c(l.mark((function t(e){var r,n,o,a;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("Address"!==e.Type){t.next=9;break}return r="https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws?Key="+v+"&Id="+e.Id,t.next=4,i.get(r).then((function(t){return t.data}));case 4:(n=t.sent).Items.length&&k([]),f(n.Items[0]),t.next=14;break;case 9:return a=(null==(o=O.current)?void 0:o.value)||"",t.next=12,P(a,e.Id);case 12:k(t.sent);case 14:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),P=function(){var t=c(l.mark((function t(e,r){var n,o,a,c,f,h,d,m;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=null!=s&&s.length?"&Countries="+s.join(","):"",o=p?"&limit="+p:"",a="?Key="+v,c="&Text="+e,f=r?"&Container="+r:"",h="&Language="+u.split("_")[0],d="https://api.addressy.com/Capture/Interactive/Find/v1.10/json3.ws"+a+o+n+h+f+c,t.prev=8,t.next=11,i.get(d).then((function(t){return t.data}));case 11:if(null==(m=t.sent)||!m.Items){t.next=14;break}return t.abrupt("return",m.Items);case 14:t.next=19;break;case 16:t.prev=16,t.t0=t.catch(8),console.error(t.t0);case 19:case"end":return t.stop()}}),t,null,[[8,16]])})));return function(e,r){return t.apply(this,arguments)}}(),T=function(){var t=c(l.mark((function t(e){var r;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(I(r=e.target.value),""!==r){t.next=6;break}k([]),t.next=10;break;case 6:return t.next=8,P(r);case 8:k(t.sent);case 10:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),F=(null==b?void 0:b.List)||d,G=(null==b?void 0:b.ListItem)||m;return r.createElement(r.Fragment,null,r.createElement((null==b?void 0:b.Input)||h,{className:o(x,"react-loqate-list-anchor"),onChange:T,value:j}),r.createElement(n.Portal,{container:document.body},r.createElement(n.ClickAwayListener,{onClickAway:function(){return k([])}},r.createElement(F,{hidden:!L.length,className:o(_.listPosition,g)},L.map((function(t,e){return r.createElement(G,{key:t.Id+e,onClick:function(){return C(t)},className:w,"data-testid":"default-list-item-"+t.Id,value:j,suggestion:t},t.Text," ",t.Description)}))))))};
 //# sourceMappingURL=react-loqate.cjs.production.min.js.map

dist/react-loqate.esm.js

 import React, { forwardRef, useState, useRef } from 'react';
 import { makeStyles, Portal, ClickAwayListener } from '@material-ui/core';
 import clsx from 'clsx';
+import axios from 'axios';
 
@@ -825,3 +826,4 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   return React.createElement("input", Object.assign({
-    className: clsx(classes.input, className)
+    className: clsx(classes.input, className),
+    "data-testid": "default-input"
   }, rest));
@@ -846,3 +848,4 @@ };
   return React.createElement("ul", Object.assign({
-    className: clsx(classes.list, className)
+    className: clsx(classes.list, className),
+    "data-testid": "default-list"
   }, rest, {
@@ -862,9 +865,22 @@ ref: ref
 var DefaultListItem = function DefaultListItem(props) {
+  var _result$slice;
+
   var className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+      value = props.value,
+      suggestion = props.suggestion,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "value", "children", "suggestion"]);
 
   var classes = useStyles$2();
+  var regex = new RegExp("(.*)(" + value + ")(.*)", 'i');
+  var search = suggestion.Text + " " + suggestion.Description;
+  var result = search.match(regex);
+
+  var _ref = (_result$slice = result == null ? void 0 : result.slice(1)) != null ? _result$slice : ['', '', ''],
+      before = _ref[0],
+      match = _ref[1],
+      after = _ref[2];
+
   return React.createElement("li", Object.assign({
     className: clsx(classes.listItem, className)
-  }, rest));
+  }, rest), React.createElement(React.Fragment, null, before, React.createElement("strong", null, match), after));
 };
@@ -907,2 +923,6 @@
 
+  var _useState2 = useState(''),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
   var anchorRef = useRef(null);
@@ -918,3 +938,3 @@ var rect = (_document$body$getEle = document.body.getElementsByClassName('react-loqate-list-anchor')[0]) == null ? void 0 : _document$body$getEle.getBoundingClientRect();
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(sug) {
-      var url, res, _anchorRef$current, value, sugs;
+      var url, res, _anchorRef$current, _value, sugs;
 
@@ -932,4 +952,4 @@ return runtime_1.wrap(function _callee$(_context) {
               _context.next = 4;
-              return fetch(url).then(function (response) {
-                return response.json();
+              return axios.get(url).then(function (response) {
+                return response.data;
               });
@@ -945,5 +965,5 @@
             case 9:
-              value = ((_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.value) || '';
+              _value = ((_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.value) || '';
               _context.next = 12;
-              return find(value, sug.Id);
+              return find(_value, sug.Id);
 
@@ -975,3 +995,3 @@ case 12:
               baseUrl = "https://api.addressy.com/Capture/Interactive/Find/v1.10/json3.ws";
-              countriesString = (countries == null ? void 0 : countries.length) ? "&Countries=" + countries.join(',') : '';
+              countriesString = countries != null && countries.length ? "&Countries=" + countries.join(',') : '';
               limitString = limit ? "&limit=" + limit : '';
@@ -985,4 +1005,4 @@ keyString = "?Key=" + apiKey;
               _context2.next = 11;
-              return fetch(url).then(function (response) {
-                return response.json();
+              return axios.get(url).then(function (response) {
+                return response.data;
               });
@@ -993,3 +1013,3 @@
 
-              if (!(res == null ? void 0 : res.Items)) {
+              if (!(res != null && res.Items)) {
                 _context2.next = 14;
@@ -1031,5 +1051,6 @@ break;
               addressSearch = e.target.value;
+              setValue(addressSearch);
 
               if (!(addressSearch === '')) {
-                _context3.next = 5;
+                _context3.next = 6;
                 break;
@@ -1039,14 +1060,14 @@ }
               setSuggestions([]);
-              _context3.next = 9;
+              _context3.next = 10;
               break;
 
-            case 5:
-              _context3.next = 7;
+            case 6:
+              _context3.next = 8;
               return find(addressSearch);
 
-            case 7:
+            case 8:
               sugs = _context3.sent;
               setSuggestions(sugs);
 
-            case 9:
+            case 10:
             case "end":
@@ -1069,3 +1090,4 @@ return _context3.stop();
     className: clsx(inputClassname, 'react-loqate-list-anchor'),
-    onChange: handleChange
+    onChange: handleChange,
+    value: value
   }), React.createElement(Portal, {
@@ -1080,9 +1102,12 @@ container: document.body
     className: clsx(classes.listPosition, listClassname)
-  }, suggestions.map(function (sug) {
+  }, suggestions.map(function (sug, i) {
     return React.createElement(ListItem, {
-      key: sug.Id,
+      key: sug.Id + i,
       onClick: function onClick() {
         return selectSuggestion(sug);
       },
-      className: listItemClassname
+      className: listItemClassname,
+      "data-testid": "default-list-item-" + sug.Id,
+      value: value,
+      suggestion: sug
     }, sug.Text, " ", sug.Description);
@@ -1089,0 +1114,0 @@ })))));

package.json

 {
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
@@ -27,5 +27,2 @@ "main": "dist/index.js",
   },
-  "peerDependencies": {
-    "react": ">=16"
-  },
   "husky": {
@@ -64,2 +61,4 @@ "hooks": {
     "@storybook/react": "^6.0.26",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.1",
     "@types/react": "^16.9.52",
@@ -70,2 +69,4 @@ "@types/react-dom": "^16.9.8",
     "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "msw": "^0.21.3",
     "react": "^16.13.0",
@@ -75,6 +76,14 @@ "react-dom": "^16.13.0",
     "size-limit": "^4.6.0",
+    "ts-jest": "^26.4.3",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
     "typescript": "^4.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "axios": "^0.21.0"
   }
 }

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

263482

increased by3.87%

Number of package files

18

increased by28.57%

Lines of code

2058

increased by4.52%

Number of medium supply chain risk alerts

3

decreased by-66.67%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

25

increased by25%

Dependency changes

• + Addedaxios@^0.21.0

• + Addedaxios@0.21.4(transitive)

• + Addedfollow-redirects@1.15.9(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)