react-search-autocomplete - npm Package Compare versions

Comparing version 5.0.9 to 5.1.0

dist/components/ReactSearchAutocomplete.js

@@ -1,1 +0,1 @@
-"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=ReactSearchAutocomplete,exports.MAX_RESULTS=exports.DEFAULT_INPUT_DEBOUNCE=void 0;var _templateObject,_react=_interopRequireWildcard(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_fuse=_interopRequireDefault(require("fuse.js")),_config=require("../config/config"),_Results=_interopRequireDefault(require("./Results")),_SearchInput=_interopRequireDefault(require("./SearchInput")),_styledComponents=_interopRequireWildcard(require("styled-components")),_utils=require("../utils/utils");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;return _getRequireWildcardCache=function(){return a},a}function _interopRequireWildcard(a){if(a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var b=_getRequireWildcardCache();if(b&&b.has(a))return b.get(a);var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a)if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;f&&(f.get||f.set)?Object.defineProperty(c,e,f):c[e]=a[e]}return c.default=a,b&&b.set(a,c),c}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){var c=a&&("undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"]);if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var DEFAULT_INPUT_DEBOUNCE=200;exports.DEFAULT_INPUT_DEBOUNCE=200;var MAX_RESULTS=10;exports.MAX_RESULTS=10;function ReactSearchAutocomplete(a){var b=a.items,c=a.fuseOptions,d=a.inputDebounce,e=a.onSearch,f=a.onSelect,g=a.onFocus,h=a.showIcon,i=a.maxResults,j=a.placeholder,k=a.autoFocus,l=a.styling,m=a.resultStringKeyName,n=_objectSpread(_objectSpread({},_config.defaultTheme),l),o=_objectSpread(_objectSpread({},_config.defaultFuseOptions),c),p=new _fuse.default(b,o);p.setCollection(b);var q=(0,_react.useState)(""),r=_slicedToArray(q,2),s=r[0],t=r[1],u=(0,_react.useState)(),v=_slicedToArray(u,2),w=v[0],x=v[1],y=function(a){var b=[];0<(null===a||void 0===a?void 0:a.length)?(b=A(a),x(b),e(a,b)):x(b)},z=_react.default.useCallback(0<d?(0,_utils.debounce)(function(a){return y(a)},d):function(a){return y(a)},[b]);(0,_react.useEffect)(function(){0<(null===s||void 0===s?void 0:s.length)&&0<(null===w||void 0===w?void 0:w.length)&&x(A(s))},[b]);var A=function(a){return p.search(a,{limit:i}).map(function(a){return _objectSpread({},a.item)}).slice(0,i)};return _react.default.createElement(_styledComponents.ThemeProvider,{theme:n},_react.default.createElement(StyledReactSearchAutocomplete,null,_react.default.createElement("div",{className:"wrapper"},_react.default.createElement(_SearchInput.default,{searchString:s,setSearchString:function(a){var b=a.target,c=b.value;t(c),z(c)},autoFocus:k,onBlur:function(){return x([])},onFocus:g,placeholder:j,showIcon:h}),_react.default.createElement(_Results.default,{results:w,onClick:function(a){x([]),f(a)},setSearchString:t,showIcon:h,maxResults:i,resultStringKeyName:m}))))}ReactSearchAutocomplete.defaultProps={items:[],fuseOptions:_config.defaultFuseOptions,onSearch:function(){},onSelect:function(){},inputDebounce:200,showIcon:!0,maxResults:10,placeholder:"",autoFocus:!1,onFocus:function(){},styling:{},resultStringKeyName:"name"},ReactSearchAutocomplete.propTypes={items:_propTypes.default.array,fuseOptions:_propTypes.default.object,inputDebounce:_propTypes.default.number,onSearch:_propTypes.default.func,onSelect:_propTypes.default.func,onFocus:_propTypes.default.func,showIcon:_propTypes.default.bool,maxResults:_propTypes.default.number,placeholder:_propTypes.default.string,autoFocus:_propTypes.default.bool,styling:_propTypes.default.object,resultStringKeyName:_propTypes.default.string};var StyledReactSearchAutocomplete=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  position: relative;\n\n  height: ",";\n\n  > .wrapper {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    border: ",";\n    border-radius: ",";\n\n    background-color: ",";\n    color: ",";\n\n    font-size: ",";\n    font-family: ",";\n\n    z-index: ",";\n\n    &:hover {\n      box-shadow: ",";\n    }\n    &:active {\n      box-shadow: ",";\n    }\n    &:focus-within {\n      box-shadow: ",";\n    }\n  }\n"])),function(a){return parseInt(a.theme.height)+2+"px"},function(a){return a.theme.border},function(a){return a.theme.borderRadius},function(a){return a.theme.backgroundColor},function(a){return a.theme.color},function(a){return a.theme.fontSize},function(a){return a.theme.fontFamily},function(a){return a.theme.zIndex},function(a){return a.theme.boxShadow},function(a){return a.theme.boxShadow},function(a){return a.theme.boxShadow});
+"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=ReactSearchAutocomplete,exports.MAX_RESULTS=exports.DEFAULT_INPUT_DEBOUNCE=void 0;var _templateObject,_react=_interopRequireWildcard(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_fuse=_interopRequireDefault(require("fuse.js")),_config=require("../config/config"),_Results=_interopRequireDefault(require("./Results")),_SearchInput=_interopRequireDefault(require("./SearchInput")),_styledComponents=_interopRequireWildcard(require("styled-components")),_utils=require("../utils/utils");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;return _getRequireWildcardCache=function(){return a},a}function _interopRequireWildcard(a){if(a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var b=_getRequireWildcardCache();if(b&&b.has(a))return b.get(a);var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a)if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;f&&(f.get||f.set)?Object.defineProperty(c,e,f):c[e]=a[e]}return c.default=a,b&&b.set(a,c),c}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){var c=a&&("undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"]);if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var DEFAULT_INPUT_DEBOUNCE=200;exports.DEFAULT_INPUT_DEBOUNCE=200;var MAX_RESULTS=10;exports.MAX_RESULTS=10;function ReactSearchAutocomplete(a){var b=a.items,c=a.fuseOptions,d=a.inputDebounce,e=a.onSearch,f=a.onHover,g=a.onSelect,h=a.onFocus,i=a.showIcon,j=a.showClear,k=a.maxResults,l=a.placeholder,m=a.autoFocus,n=a.styling,o=a.resultStringKeyName,p=_objectSpread(_objectSpread({},_config.defaultTheme),n),q=_objectSpread(_objectSpread({},_config.defaultFuseOptions),c),r=new _fuse.default(b,q);r.setCollection(b);var s=(0,_react.useState)(""),t=_slicedToArray(s,2),u=t[0],v=t[1],w=(0,_react.useState)(),x=_slicedToArray(w,2),y=x[0],z=x[1],A=function(a){var b=[];0<(null===a||void 0===a?void 0:a.length)?(b=C(a),z(b),e(a,b)):z(b)},B=_react.default.useCallback(0<d?(0,_utils.debounce)(function(a){return A(a)},d):function(a){return A(a)},[b]);(0,_react.useEffect)(function(){0<(null===u||void 0===u?void 0:u.length)&&0<(null===y||void 0===y?void 0:y.length)&&z(C(u))},[b]);var C=function(a){return r.search(a,{limit:k}).map(function(a){return _objectSpread({},a.item)}).slice(0,k)};return _react.default.createElement(_styledComponents.ThemeProvider,{theme:p},_react.default.createElement(StyledReactSearchAutocomplete,null,_react.default.createElement("div",{className:"wrapper"},_react.default.createElement(_SearchInput.default,{searchString:u,setSearchString:function(a){var b=a.target,c=b.value;v(c),B(c)},autoFocus:m,onBlur:function(){return z([])},onFocus:h,placeholder:l,showIcon:i,showClear:j}),_react.default.createElement(_Results.default,{results:y,onClick:function(a){z([]),g(a)},onHover:f,setSearchString:v,showIcon:i,maxResults:k,resultStringKeyName:o}))))}ReactSearchAutocomplete.defaultProps={items:[],fuseOptions:_config.defaultFuseOptions,onSearch:function(){},onHover:function(){},onSelect:function(){},inputDebounce:200,showIcon:!0,showClear:!0,maxResults:10,placeholder:"",autoFocus:!1,onFocus:function(){},styling:{},resultStringKeyName:"name"},ReactSearchAutocomplete.propTypes={items:_propTypes.default.array,fuseOptions:_propTypes.default.object,inputDebounce:_propTypes.default.number,onSearch:_propTypes.default.func,onHover:_propTypes.default.func,onSelect:_propTypes.default.func,onFocus:_propTypes.default.func,showIcon:_propTypes.default.bool,showClear:_propTypes.default.bool,maxResults:_propTypes.default.number,placeholder:_propTypes.default.string,autoFocus:_propTypes.default.bool,styling:_propTypes.default.object,resultStringKeyName:_propTypes.default.string};var StyledReactSearchAutocomplete=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  position: relative;\n\n  height: ",";\n\n  > .wrapper {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    border: ",";\n    border-radius: ",";\n\n    background-color: ",";\n    color: ",";\n\n    font-size: ",";\n    font-family: ",";\n\n    z-index: ",";\n\n    &:hover {\n      box-shadow: ",";\n    }\n    &:active {\n      box-shadow: ",";\n    }\n    &:focus-within {\n      box-shadow: ",";\n    }\n  }\n"])),function(a){return parseInt(a.theme.height)+2+"px"},function(a){return a.theme.border},function(a){return a.theme.borderRadius},function(a){return a.theme.backgroundColor},function(a){return a.theme.color},function(a){return a.theme.fontSize},function(a){return a.theme.fontFamily},function(a){return a.theme.zIndex},function(a){return a.theme.boxShadow},function(a){return a.theme.boxShadow},function(a){return a.theme.boxShadow});

dist/components/Results.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Results;var _templateObject,_react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_SearchIcon=require("./SearchIcon"),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function Results(a){var b=a.results,c=a.onClick,d=a.setSearchString,e=a.showIcon,f=a.maxResults,g=a.resultStringKeyName,h=function(a){c(a),d(a[g])};return 0>=(null===b||void 0===b?void 0:b.length)?null:_react.default.createElement(StyledResults,null,_react.default.createElement("div",{className:"line"}),_react.default.createElement("ul",null,b.slice(0,f).map(function(a){return _react.default.createElement("li",{"data-test":"result",key:"rsa-result-".concat(a.id),onMouseDown:function(){return h(a)},onClick:function(){return h(a)}},e&&_react.default.createElement("div",{className:"icon"},_react.default.createElement(_SearchIcon.SearchIcon,null)),_react.default.createElement("div",{className:"ellipsis",title:a[g]},a[g]))})))}Results.defaultProps={results:[],setDisplayString:function(){},resultStringKeyName:"name"},Results.propTypes={results:_propTypes.default.array,onClick:_propTypes.default.func,setSearchString:_propTypes.default.func,showIcon:_propTypes.default.bool,maxResults:_propTypes.default.number,resultStringKeyName:_propTypes.default.string};var StyledResults=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ",";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ",";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      &:hover {\n        background-color: ",";\n        cursor: default;\n      }\n\n      > .icon {\n        margin-left: 16px;\n\n        > svg {\n          fill: ",";\n        }\n      }\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n  .ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])),function(a){return a.theme.lineColor},function(a){return a.theme.maxHeight},function(a){return a.theme.hoverBackgroundColor},function(a){return a.theme.iconColor});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Results;var _templateObject,_react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_SearchIcon=require("./SearchIcon"),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function Results(a){var b=a.results,c=a.onClick,d=a.setSearchString,e=a.showIcon,f=a.maxResults,g=a.resultStringKeyName,h=a.onHover,i=function(a){c(a),d(a[g])};return 0>=(null===b||void 0===b?void 0:b.length)?null:_react.default.createElement(StyledResults,null,_react.default.createElement("div",{className:"line"}),_react.default.createElement("ul",null,b.slice(0,f).map(function(a){return _react.default.createElement("li",{onMouseEnter:function(){return h(a)},"data-test":"result",key:"rsa-result-".concat(a.id),onMouseDown:function(){return i(a)},onClick:function(){return i(a)}},_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:e}),_react.default.createElement("div",{className:"ellipsis",title:a[g]},a[g]))})))}Results.defaultProps={results:[],setDisplayString:function(){},resultStringKeyName:"name"},Results.propTypes={results:_propTypes.default.array,onClick:_propTypes.default.func,setSearchString:_propTypes.default.func,showIcon:_propTypes.default.bool,maxResults:_propTypes.default.number,resultStringKeyName:_propTypes.default.string};var StyledResults=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ",";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ",";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      &:hover {\n        background-color: ",";\n        cursor: default;\n      }\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n  .ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])),function(a){return a.theme.lineColor},function(a){return a.theme.maxHeight},function(a){return a.theme.hoverBackgroundColor});

dist/components/SearchIcon.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchIcon=void 0;var _react=_interopRequireDefault(require("react"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var SearchIcon=function(){return _react.default.createElement("svg",{width:20,height:20,focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},_react.default.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}))};exports.SearchIcon=SearchIcon;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchIcon=void 0;var _templateObject,_react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}var SearchIcon=function(a){var b=a.showIcon;return b?_react.default.createElement(StyledSearchIcon,{className:"search-icon",width:20,height:20,focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},_react.default.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})):null};exports.SearchIcon=SearchIcon;var StyledSearchIcon=_styledComponents.default.svg(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  flex-shrink: 0;\n  margin: ",";\n  fill: ",";\n"])),function(a){return a.theme.searchIconMargin},function(a){return a.theme.iconColor});SearchIcon.propTypes={showIcon:_propTypes.default.bool};

dist/components/SearchInput.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=SearchInput;var _templateObject,_react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_SearchIcon=require("./SearchIcon"),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function SearchInput(a){var b=a.searchString,c=a.setSearchString,d=a.autoFocus,e=a.onBlur,f=a.onFocus,g=a.placeholder,h=a.showIcon;return _react.default.createElement(StyledSearchInput,null,h&&_react.default.createElement(_SearchIcon.SearchIcon,null),_react.default.createElement("input",{spellCheck:!1,value:b,onChange:c,onBlur:e,onFocus:f,placeholder:g,autoFocus:d}))}SearchInput.defaultProps={showIcon:!0},SearchInput.propTypes={searchString:_propTypes.default.string.isRequired,setSearchString:_propTypes.default.func.isRequired,autoFocus:_propTypes.default.bool,onBlur:_propTypes.default.func.isRequired,onFocus:_propTypes.default.func,placeholder:_propTypes.default.string,showIcon:_propTypes.default.bool};var StyledSearchInput=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  min-height: ",";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ",";\n\n    ::placeholder {\n      /* Chrome, Firefox, Opera, Safari 10.1+ */\n      color: ",";\n      opacity: 1; /* Firefox */\n    }\n\n    :-ms-input-placeholder {\n      /* Internet Explorer 10-11 */\n      color: ",";\n    }\n\n    ::-ms-input-placeholder {\n      /* Microsoft Edge */\n      color: ",";\n    }\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin-left: 16px;\n    fill: ",";\n  }\n"])),function(a){return a.theme.height},function(a){return a.theme.color},function(a){return a.theme.placeholderColor},function(a){return a.theme.placeholderColor},function(a){return a.theme.placeholderColor},function(a){return a.theme.iconColor});
+"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=SearchInput;var _templateObject,_react=_interopRequireWildcard(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_SearchIcon=require("./SearchIcon"),_styledComponents=_interopRequireDefault(require("styled-components")),_ClearIcon=require("./ClearIcon");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;return _getRequireWildcardCache=function(){return a},a}function _interopRequireWildcard(a){if(a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var b=_getRequireWildcardCache();if(b&&b.has(a))return b.get(a);var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a)if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;f&&(f.get||f.set)?Object.defineProperty(c,e,f):c[e]=a[e]}return c.default=a,b&&b.set(a,c),c}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function SearchInput(a){var b=a.searchString,c=a.setSearchString,d=a.autoFocus,e=a.onBlur,f=a.onFocus,g=a.placeholder,h=a.showIcon,i=a.showClear,j=(0,_react.useRef)();return _react.default.createElement(StyledSearchInput,null,_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:h}),_react.default.createElement("input",{ref:j,spellCheck:!1,value:b,onChange:c,onBlur:e,onFocus:f,placeholder:g,autoFocus:d}),_react.default.createElement(_ClearIcon.ClearIcon,{showClear:i,setSearchString:c,searchString:b,setFocus:function(){j.current.focus()}}))}SearchInput.defaultProps={showIcon:!0,showClear:!0},SearchInput.propTypes={searchString:_propTypes.default.string.isRequired,setSearchString:_propTypes.default.func.isRequired,autoFocus:_propTypes.default.bool,onBlur:_propTypes.default.func.isRequired,onFocus:_propTypes.default.func,placeholder:_propTypes.default.string,showIcon:_propTypes.default.bool,showClear:_propTypes.default.bool};var StyledSearchInput=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  min-height: ",";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ",";\n\n    ::placeholder {\n      /* Chrome, Firefox, Opera, Safari 10.1+ */\n      color: ",";\n      opacity: 1; /* Firefox */\n    }\n\n    :-ms-input-placeholder {\n      /* Internet Explorer 10-11 */\n      color: ",";\n    }\n\n    ::-ms-input-placeholder {\n      /* Microsoft Edge */\n      color: ",";\n    }\n  }\n"])),function(a){return a.theme.height},function(a){return a.theme.color},function(a){return a.theme.placeholderColor},function(a){return a.theme.placeholderColor},function(a){return a.theme.placeholderColor});

dist/config/config.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultFuseOptions=exports.defaultTheme=void 0;var defaultTheme={height:"44px",border:"1px solid #dfe1e5",borderRadius:"24px",backgroundColor:"white",boxShadow:"rgba(32, 33, 36, 0.28) 0px 1px 6px 0px",hoverBackgroundColor:"#eee",color:"#212121",fontSize:"16px",fontFamily:"Arial",iconColor:"grey",lineColor:"rgb(232, 234, 237)",placeholderColor:"grey",zIndex:0};exports.defaultTheme=defaultTheme;var defaultFuseOptions={shouldSort:!0,threshold:.6,location:0,distance:100,maxPatternLength:32,minMatchCharLength:1,keys:["name"]};exports.defaultFuseOptions=defaultFuseOptions;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultFuseOptions=exports.defaultTheme=void 0;var defaultTheme={height:"44px",border:"1px solid #dfe1e5",borderRadius:"24px",backgroundColor:"white",boxShadow:"rgba(32, 33, 36, 0.28) 0px 1px 6px 0px",hoverBackgroundColor:"#eee",color:"#212121",fontSize:"16px",fontFamily:"Arial",iconColor:"grey",lineColor:"rgb(232, 234, 237)",placeholderColor:"grey",zIndex:0,clearIconMargin:"3px 14px 0 0",searchIconMargin:"0 0 0 16px"};exports.defaultTheme=defaultTheme;var defaultFuseOptions={shouldSort:!0,threshold:.6,location:0,distance:100,maxPatternLength:32,minMatchCharLength:1,keys:["name"]};exports.defaultFuseOptions=defaultFuseOptions;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.9",
+  "version": "5.1.0",
   "description": "A search box for React",
@@ -11,3 +11,4 @@ "main": "dist/index.js",
     "test": "jest --verbose --runInBand",
-    "build": "rm -rf ./dist/*.* && babel ./src --out-dir ./dist --ignore **/*.test.js && minify ./dist/ --out-dir ./dist/"
+    "build": "rm -rf ./dist/*.* && babel ./src --out-dir ./dist --ignore **/*.test.js && minify ./dist/ --out-dir ./dist/",
+    "build-watch": "rm -rf ./dist/*.* && babel ./src --out-dir ./dist --ignore **/*.test.js --watch && minify ./dist/ --out-dir ./dist/"
   },
@@ -69,4 +70,4 @@ "repository": {
     "@babel/preset-react": "^7.12.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
     "babel-minify": "^0.5.1",
@@ -73,0 +74,0 @@ "jest": "^26.6.3",

README.md

@@ -11,2 +11,15 @@ ![travis](https://travis-ci.com/sickdyd/react-search-autocomplete.svg?branch=master)
 
+## Release 5.1.0
+
+- added `onHover` prop that returns the result the user is hovering
+- added `clearIcon` prop to display a clear icon in the search box
+- it's now possible to style the search icon and the clear icon margins by using the styling prop if the default values are not optimal:
+
+```js
+  styling={{
+    searchIconMargin: "10px 12px 0 11px",
+    clearIconMargin: "10px 0 8px 0"
+  }}
+```
+
 ## Multiple search boxes on the same website
@@ -168,2 +181,4 @@
     // The callback function called when the user is searching
+    onHover,
+    // THe callback function called when the user hovers a result
     onSelect,
@@ -176,2 +191,4 @@ // The callback function called when the user selects an item
     // Default value: true. If set to false, the icon is hidden.
+    showClear,
+    // Default value: true. If set to false, the clear icon is hidden.
     maxResults,
@@ -184,28 +201,30 @@ // Default value: 10. The max number of results to show at once.
     // set focus on the input.
-    styling
-  // The styling prop allows you to customize the
-  // look of the searchbox
-  // Default values:
-  // {
-  //   height: "44px",
-  //   border: "1px solid #dfe1e5",
-  //   borderRadius: "24px",
-  //   backgroundColor: "white",
-  //   boxShadow: "rgba(32, 33, 36, 0.28) 0px 1px 6px 0px",
-  //   hoverBackgroundColor: "#eee",
-  //   color: "#212121",
-  //   fontSize: "16px",
-  //   fontFamily: "Arial",
-  //   iconColor: "grey",
-  //   lineColor: "rgb(232, 234, 237)",
-  //   placeholderColor: "grey",
-  // };
-  //
-  // For example, if you want to change the background
-  // color you can pass it in the props:
-  // styling={
-  //   {
-  //     backgroundColor: "black"
-  //   }
-  // }
+    styling,
+    // The styling prop allows you to customize the
+    // look of the searchbox
+    // Default values:
+    // {
+    //   height: "44px",
+    //   border: "1px solid #dfe1e5",
+    //   borderRadius: "24px",
+    //   backgroundColor: "white",
+    //   boxShadow: "rgba(32, 33, 36, 0.28) 0px 1px 6px 0px",
+    //   hoverBackgroundColor: "#eee",
+    //   color: "#212121",
+    //   fontSize: "16px",
+    //   fontFamily: "Arial",
+    //   iconColor: "grey",
+    //   lineColor: "rgb(232, 234, 237)",
+    //   placeholderColor: "grey",
+    //   clearIconMargin: '3px 14px 0 0',
+    //   searchIconMargin: '0 0 0 16px'
+    // };
+    //
+    // For example, if you want to change the background
+    // color you can pass it in the props:
+    // styling={
+    //   {
+    //     backgroundColor: "black"
+    //   }
+    // }
 }
@@ -212,0 +231,0 @@ ```

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26832

increased by18.1%

Number of package files

11

increased by10%

Number of lines in readme file

232

increased by8.92%

Worsened metrics

Number of low quality alerts

6

increased by20%

No dependency changes