react-search-autocomplete - npm Package Compare versions

Comparing version 5.4.2 to 5.4.3

dist/components/ClearIcon.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearIcon=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 ClearIcon=function(a){var b=a.showClear,c=a.setSearchString,d=a.searchString,e=a.setFocus,f=a.onClear;return b?0>=d.length?null:_react.default.createElement(StyledClearIcon,{className:"clear-icon",onClick:function(){c({target:{value:""}}),e(),f()}},_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:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))):null};exports.ClearIcon=ClearIcon;var StyledClearIcon=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  margin: ",";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ",";\n  }\n"])),function(a){return a.theme.clearIconMargin},function(a){return a.theme.iconColor});ClearIcon.propTypes={searchString:_propTypes.default.string.isRequired,setSearchString:_propTypes.default.func.isRequired,setFocus:_propTypes.default.func,showClear:_propTypes.default.bool,onClear:_propTypes.default.func,onSearch:_propTypes.default.func};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearIcon=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)}}))}const ClearIcon=a=>{let{showClear:b,setSearchString:c,searchString:d,setFocus:e,onClear:f}=a;return b?0>=d.length?null:_react.default.createElement(StyledClearIcon,{className:"clear-icon",onClick:()=>{c({target:{value:""}}),e(),f()}},_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:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))):null};exports.ClearIcon=ClearIcon;const StyledClearIcon=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  margin: ",";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ",";\n  }\n"])),a=>a.theme.clearIconMargin,a=>a.theme.iconColor);ClearIcon.propTypes={searchString:_propTypes.default.string.isRequired,setSearchString:_propTypes.default.func.isRequired,setFocus:_propTypes.default.func,showClear:_propTypes.default.bool,onClear:_propTypes.default.func,onSearch:_propTypes.default.func};

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.onHover,g=a.onSelect,h=a.onFocus,i=a.onClear,j=a.showIcon,k=a.showClear,l=a.maxResults,m=a.placeholder,n=a.autoFocus,o=a.styling,p=a.resultStringKeyName,q=a.inputSearchString,r=a.formatResult,s=_objectSpread(_objectSpread({},_config.defaultTheme),o),t=_objectSpread(_objectSpread({},_config.defaultFuseOptions),c),u=new _fuse.default(b,t);u.setCollection(b);var v=(0,_react.useState)(q),w=_slicedToArray(v,2),x=w[0],y=w[1],z=(0,_react.useState)(),A=_slicedToArray(z,2),B=A[0],C=A[1],D=function(a){var b=[];0<(null===a||void 0===a?void 0:a.length)?(b=F(a),C(b),e(a,b)):C(b)},E=_react.default.useCallback(0<d?(0,_utils.debounce)(function(a){return D(a)},d):function(a){return D(a)},[b]);(0,_react.useEffect)(function(){y(q)},[q]),(0,_react.useEffect)(function(){0<(null===x||void 0===x?void 0:x.length)&&0<(null===B||void 0===B?void 0:B.length)&&C(F(x))},[b]);var F=function(a){return u.search(a,{limit:l}).map(function(a){return _objectSpread({},a.item)}).slice(0,l)};return _react.default.createElement(_styledComponents.ThemeProvider,{theme:s},_react.default.createElement(StyledReactSearchAutocomplete,null,_react.default.createElement("div",{className:"wrapper"},_react.default.createElement(_SearchInput.default,{searchString:x,setSearchString:function(a){var b=a.target,c=b.value;y(c),E(c)},autoFocus:n,onBlur:function(){return C([])},onFocus:h,onClear:i,placeholder:m,showIcon:j,showClear:k}),_react.default.createElement(_Results.default,{results:B,onClick:function(a){C([]),g(a)},onHover:f,setSearchString:y,showIcon:j,maxResults:l,resultStringKeyName:p,formatResult:r}))))}ReactSearchAutocomplete.defaultProps={items:[],fuseOptions:_config.defaultFuseOptions,onSearch:function(){},onHover:function(){},onSelect:function(){},onClear:function(){},inputDebounce:200,showIcon:!0,showClear:!0,maxResults:10,placeholder:"",autoFocus:!1,onFocus:function(){},styling:{},resultStringKeyName:"name",inputSearchString:"",formatResult:function(a){return a}},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,onClear:_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,inputSearchString:_propTypes.default.string,formatResult:_propTypes.default.func};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";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MAX_RESULTS=exports.DEFAULT_INPUT_DEBOUNCE=void 0,exports.default=ReactSearchAutocomplete;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(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!=typeof a&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const DEFAULT_INPUT_DEBOUNCE=200;exports.DEFAULT_INPUT_DEBOUNCE=200;const MAX_RESULTS=10;exports.MAX_RESULTS=10;function ReactSearchAutocomplete(a){const{items:b,fuseOptions:c,inputDebounce:d,onSearch:e,onHover:f,onSelect:g,onFocus:h,onClear:i,showIcon:j,showClear:k,maxResults:l,placeholder:m,autoFocus:n,styling:o,resultStringKeyName:p,inputSearchString:q,formatResult:r}=a,s={..._config.defaultTheme,...o},t={..._config.defaultFuseOptions,...c},u=new _fuse.default(b,t);u.setCollection(b);const[v,w]=(0,_react.useState)(q),[x,y]=(0,_react.useState)(),z=a=>{let b=[];0<(null===a||void 0===a?void 0:a.length)?(b=B(a),y(b),e(a,b)):y(b)},A=_react.default.useCallback(0<d?(0,_utils.debounce)(a=>z(a),d):a=>z(a),[b]);(0,_react.useEffect)(()=>{w(q)},[q]),(0,_react.useEffect)(()=>{0<(null===v||void 0===v?void 0:v.length)&&0<(null===x||void 0===x?void 0:x.length)&&y(B(v))},[b]);const B=a=>u.search(a,{limit:l}).map(a=>({...a.item})).slice(0,l);return _react.default.createElement(_styledComponents.ThemeProvider,{theme:s},_react.default.createElement(StyledReactSearchAutocomplete,null,_react.default.createElement("div",{className:"wrapper"},_react.default.createElement(_SearchInput.default,{searchString:v,setSearchString:a=>{let{target:b}=a;const c=b.value;w(c),A(c)},autoFocus:n,onBlur:()=>y([]),onFocus:h,onClear:i,placeholder:m,showIcon:j,showClear:k}),_react.default.createElement(_Results.default,{results:x,onClick:a=>{y([]),g(a)},onHover:f,setSearchString:w,showIcon:j,maxResults:l,resultStringKeyName:p,formatResult:r}))))}ReactSearchAutocomplete.defaultProps={items:[],fuseOptions:_config.defaultFuseOptions,onSearch:()=>{},onHover:()=>{},onSelect:()=>{},onClear:()=>{},inputDebounce:200,showIcon:!0,showClear:!0,maxResults:10,placeholder:"",autoFocus:!1,onFocus:()=>{},styling:{},resultStringKeyName:"name",inputSearchString:"",formatResult:a=>a},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,onClear:_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,inputSearchString:_propTypes.default.string,formatResult:_propTypes.default.func};const 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"])),a=>parseInt(a.theme.height)+2+"px",a=>a.theme.border,a=>a.theme.borderRadius,a=>a.theme.backgroundColor,a=>a.theme.color,a=>a.theme.fontSize,a=>a.theme.fontFamily,a=>a.theme.zIndex,a=>a.theme.boxShadow,a=>a.theme.boxShadow,a=>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=a.onHover,i=a.formatResult,j=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 j(a)},onClick:function(){return j(a)}},_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:e}),_react.default.createElement("div",{className:"ellipsis",title:a[g]},i(a[g])))})))}Results.defaultProps={results:[],setDisplayString:function(){},resultStringKeyName:"name",formatResult:function(a){return a}},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,formatResult:_propTypes.default.func};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});
+"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){const{results:b,onClick:c,setSearchString:d,showIcon:e,maxResults:f,resultStringKeyName:g,onHover:h,formatResult:i}=a,j=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(a=>_react.default.createElement("li",{onMouseEnter:()=>h(a),"data-test":"result",key:"rsa-result-".concat(a.id),onMouseDown:()=>j(a),onClick:()=>j(a)},_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:e}),_react.default.createElement("div",{className:"ellipsis",title:a[g]},i(a[g]))))))}Results.defaultProps={results:[],setDisplayString:()=>{},resultStringKeyName:"name",formatResult:a=>a},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,formatResult:_propTypes.default.func};const 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"])),a=>a.theme.lineColor,a=>a.theme.maxHeight,a=>a.theme.hoverBackgroundColor);

dist/components/SearchIcon.js

@@ -1,1 +0,1 @@
-"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};
+"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)}}))}const SearchIcon=a=>{let{showIcon:b}=a;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;const StyledSearchIcon=_styledComponents.default.svg(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  flex-shrink: 0;\n  margin: ",";\n  fill: ",";\n"])),a=>a.theme.searchIconMargin,a=>a.theme.iconColor);SearchIcon.propTypes={showIcon:_propTypes.default.bool};

dist/components/SearchInput.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=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.onClear,h=a.placeholder,i=a.showIcon,j=a.showClear,k=(0,_react.useRef)(),l=!0,m=function(){l&&f()};return _react.default.createElement(StyledSearchInput,null,_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:i}),_react.default.createElement("input",{ref:k,spellCheck:!1,value:b,onChange:c,onBlur:e,onFocus:m,placeholder:h,autoFocus:d}),_react.default.createElement(_ClearIcon.ClearIcon,{showClear:j,setSearchString:c,searchString:b,onClear:g,setFocus:function(){l=!1,k.current.focus(),l=!0}}))}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,onClear:_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});
+"use strict";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(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!=typeof a&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function SearchInput(a){let{searchString:b,setSearchString:c,autoFocus:d,onBlur:e,onFocus:f,onClear:g,placeholder:h,showIcon:i,showClear:j}=a;const k=(0,_react.useRef)();let l=!0;const m=()=>{l&&f()};return _react.default.createElement(StyledSearchInput,null,_react.default.createElement(_SearchIcon.SearchIcon,{showIcon:i}),_react.default.createElement("input",{ref:k,spellCheck:!1,value:b,onChange:c,onBlur:e,onFocus:m,placeholder:h,autoFocus:d}),_react.default.createElement(_ClearIcon.ClearIcon,{showClear:j,setSearchString:c,searchString:b,onClear:g,setFocus:()=>{l=!1,k.current.focus(),l=!0}}))}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,onClear:_propTypes.default.func,placeholder:_propTypes.default.string,showIcon:_propTypes.default.bool,showClear:_propTypes.default.bool};const 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"])),a=>a.theme.height,a=>a.theme.color,a=>a.theme.placeholderColor,a=>a.theme.placeholderColor,a=>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,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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultTheme=exports.defaultFuseOptions=void 0;const 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;const defaultFuseOptions={shouldSort:!0,threshold:.6,location:0,distance:100,maxPatternLength:32,minMatchCharLength:1,keys:["name"]};exports.defaultFuseOptions=defaultFuseOptions;

dist/utils/utils.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.debounce=debounce,exports.isCached=void 0;function debounce(a,b,c){var d;return function(){var e=this,f=arguments;c&&!d&&a.apply(e,f),clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b)}}var isCached=function(a){a=a.toLowerCase();var b=JSON.parse(sessionStorage.getItem(a.toLowerCase()));return b?b:[]};exports.isCached=isCached;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.debounce=debounce,exports.isCached=void 0;function debounce(a,b,c){var d;return function(){var e=this,f=arguments;c&&!d&&a.apply(e,f),clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b)}}const isCached=a=>{a=a.toLowerCase();const b=JSON.parse(sessionStorage.getItem(a.toLowerCase()));return b?b:[]};exports.isCached=isCached;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "A search box for React",
@@ -8,0 +8,0 @@ "main": "dist/index.js",

README.md

@@ -11,20 +11,2 @@ ![travis](https://travis-ci.com/sickdyd/react-search-autocomplete.svg?branch=master)
 
-## 5.2.0
-
-- added `onClear` prop that is called when the user clears the search box
-- added `inputSearchString` prop that allows to set the search string in the input box
-
-## 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
@@ -107,4 +89,4 @@
   const formatResult = (item) => {
-    return item;
-   // return (<p dangerouslySetInnerHTML={{__html: '<strong>'+item+'</strong>'}}></p>); //To format result as html
+    return item
+    // return (<p dangerouslySetInnerHTML={{__html: '<strong>'+item+'</strong>'}}></p>); //To format result as html
   }
@@ -111,0 +93,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

24414

decreased by-13.4%

Number of lines in readme file

238

decreased by-7.03%

No dependency changes