react-search-highlight - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/const.d.ts

@@ -7,2 +7,3 @@ export declare const SET_INPUT = "SET_INPUT";
 export declare const THROTTLE = "THROTTLE";
+export declare const RESET_STATE = "RESET_STATE";
 export declare const STRING_MATCHING = "STRING_MATCHING";
@@ -9,0 +10,0 @@ export declare const CHARACTER_MATCHING = "CHARACTER_MATCHING";

dist/container/main.d.ts

 import React, { ReactNode } from 'react';
+import { ContextType } from '../types';
 /**
@@ -13,5 +14,8 @@ * InternalContext manages internal states between the components
 export declare const InternalContext: React.Context<InternalContextInitialStateType>;
-export declare const Wrapper: React.FC<{
-    children: ReactNode;
-}>;
+declare type D = (values: ContextType) => JSX.Element;
+interface WrapperProps {
+    children: D | any;
+    isFunction: boolean;
+}
+export declare const Wrapper: ({ children }: Pick<WrapperProps, 'children'>) => JSX.Element;
 export interface PopOverListProps extends React.OlHTMLAttributes<HTMLUListElement> {
@@ -18,0 +22,0 @@ children: ReactNode;

dist/context/index.d.ts

 import React, { ReactNode } from 'react';
-import { ContextType } from '../types';
+import { ContextType, State } from '../types';
+export declare const initialState: State;
 export declare const context: React.Context<ContextType>;
-export declare const useContext: () => ContextType;
-export declare const ContextProvider: React.FC<{
+/**
+ * @returns context data and helper function
+ */
+export declare const useReactSearchHighlight: () => ContextType;
+export declare const ReactSearchHighlightProvider: React.FC<{
     children: ReactNode;
 }>;

dist/react-search-highlight.cjs.development.js

@@ -48,2 +48,3 @@ 'use strict';
 var DEBOUNCE = 'DEBOUNCE';
+var RESET_STATE = 'RESET_STATE';
 var CHARACTER_MATCHING = 'CHARACTER_MATCHING';
@@ -73,2 +74,5 @@
 
+    case RESET_STATE:
+      return _extends({}, initialState);
+
     default:
@@ -85,6 +89,10 @@ return state;
 var context = /*#__PURE__*/React.createContext(null);
-var useContext = function useContext() {
+/**
+ * @returns context data and helper function
+ */
+
+var useReactSearchHighlight = function useReactSearchHighlight() {
   return React.useContext(context);
 };
-var ContextProvider = function ContextProvider(_ref) {
+var ReactSearchHighlightProvider = function ReactSearchHighlightProvider(_ref) {
   var children = _ref.children;
@@ -108,2 +116,8 @@
 
+  var resetState = function resetState() {
+    dispatch({
+      type: RESET_STATE
+    });
+  };
+
   var value = React.useMemo(function () {
@@ -114,3 +128,4 @@ return {
       startLoading: startLoading,
-      endLoading: endLoading
+      endLoading: endLoading,
+      resetState: resetState
     };
@@ -145,4 +160,4 @@ }, [state]);
 var useCharacterMatching = function useCharacterMatching(keys) {
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -282,4 +297,4 @@ return function (input, data) {
 var useStringMatching = function useStringMatching(keys) {
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -398,5 +413,7 @@ return function (input, data) {
 var InternalContext = /*#__PURE__*/React.createContext(InternalContextInitialState);
-var Wrapper = function Wrapper(_ref) {
-  var children = _ref.children;
 
+var WrapperInner = function WrapperInner(_ref) {
+  var children = _ref.children,
+      isFunction = _ref.isFunction;
+
   var _useState = React.useState(InternalContextInitialState),
@@ -406,2 +423,4 @@ state = _useState[0],
 
+  var __state = useReactSearchHighlight();
+
   var updateInternalContext = function updateInternalContext(key, value) {
@@ -438,8 +457,20 @@ setState(function (prev) {
     }
-  }, children));
+  }, isFunction ? children(__state) : children));
 };
-var PopOverList = function PopOverList(_ref2) {
-  var children = _ref2.children,
-      any = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
+var Wrapper = function Wrapper(_ref2) {
+  var children = _ref2.children;
+  var isFunction = typeof children === 'function';
+  return React__default.createElement(React__default.Fragment, null, isFunction ? React__default.createElement(ReactSearchHighlightProvider, null, React__default.createElement(WrapperInner, {
+    isFunction: isFunction,
+    children: children
+  })) : React__default.createElement(WrapperInner, {
+    isFunction: isFunction,
+    children: children
+  }));
+};
+var PopOverList = function PopOverList(_ref3) {
+  var children = _ref3.children,
+      any = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+
   var listRef = React.useRef(null);
@@ -468,6 +499,6 @@
 };
-var PopOverOption = function PopOverOption(_ref3) {
-  var children = _ref3.children,
-      optionIndex = _ref3.optionIndex,
-      any = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+var PopOverOption = function PopOverOption(_ref4) {
+  var children = _ref4.children,
+      optionIndex = _ref4.optionIndex,
+      any = _objectWithoutPropertiesLoose(_ref4, _excluded2);
 
@@ -489,9 +520,9 @@ var _React$useContext2 = React__default.useContext(InternalContext),
 };
-var PopOverOptionText = function PopOverOptionText(_ref4) {
+var PopOverOptionText = function PopOverOptionText(_ref5) {
   var _as;
 
-  var className = _ref4.className,
-      value = _ref4.value,
-      as = _ref4.as,
-      any = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  var className = _ref5.className,
+      value = _ref5.value,
+      as = _ref5.as,
+      any = _objectWithoutPropertiesLoose(_ref5, _excluded3);
 
@@ -583,4 +614,4 @@ var words = value == null ? void 0 : value.split(/\(([^)]+)\)/);
 
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -630,3 +661,2 @@ var __internalContext = React__default.useContext(InternalContext);
     height: 40,
-    // width={'400px'}
     cursor: 'text'
@@ -688,3 +718,2 @@ }, React__default.createElement("figure", {
 
-exports.ContextProvider = ContextProvider;
 exports.InternalContext = InternalContext;
@@ -695,6 +724,8 @@ exports.Modal = Modal;
 exports.PopOverOptionText = PopOverOptionText;
+exports.ReactSearchHighlightProvider = ReactSearchHighlightProvider;
 exports.SearchBar = SearchBar;
 exports.Wrapper = Wrapper;
 exports.context = context;
-exports.useContext = useContext;
+exports.initialState = initialState;
+exports.useReactSearchHighlight = useReactSearchHighlight;
 //# sourceMappingURL=react-search-highlight.cjs.development.js.map

dist/react-search-highlight.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}require("process"),function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".rsh-input:focus{outline:none}.rsh-search-wrapper{position:relative}.rsh-input-box{background-color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);min-width:200px}.rsh-input-box-logo{align-items:center;display:flex;height:100%;justify-content:center;margin:0;width:40px}.rsh-input{border:none;border-radius:inherit;font-size:15px;height:100%;margin:0;padding:0;width:100%}.rsh-search-list{background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-sizing:border-box;min-width:200px;overflow-x:scroll;overflow:scroll;padding:0 8px;position:absolute;top:40px;width:100%;z-index:12}.rsh-search-list-item{border-radius:13px;list-style:none;margin:10px 0;padding:3px 8px}.rsh-search-list-item__active{background-color:hsla(0,0%,47%,.05)}.rsh-search-list-item-text{margin:0}");var a=function(e,t){switch(t.type){case"SET_INPUT":return r({},e,{input:t.payload});case"SEARCH_DATA":return r({},e,{searchData:t.payload});case"START_LOADING":return r({},e,{isLoading:!0});case"END_LOADING":return r({},e,{isLoading:!1});default:return e}},o={isLoading:!1,searchData:void 0,input:""},u=t.createContext(null),s=function(){return t.useContext(u)},l=function(e,t,n){return n.some((function(n){return e[n].toLowerCase().includes(t)}))},c=function(e,t,n){var i=r({},e);return n.forEach((function(n){return i[n]=e[n].replaceAll(t,(function(e){return"(<mark>"+e+"</mark>)"}))})),i},d=function(e,n,r,i){void 0===r&&(r="k"),void 0===i&&(i=[]),t.useEffect((function(){var t=function(t){(!n||t.metaKey)&&t.key.toLowerCase()===r&&(null==e||e())};return document.addEventListener("keydown",t),function(){document.removeEventListener("keydown",t)}}),i)},p=["as","children","classNames"],f=function(e){var n=e.as,a=e.children,o=e.classNames,u=i(e,p);return t.createElement(n,r({className:o},u),a)},h=["children"],m=["children","optionIndex"],x=["className","value","as"],g={isPopoverExpanded:!1,listItemActiveIndex:0,updateInternalContext:function(e,t){},dataLength:0},v=t.createContext(g),y=["as","children","className","onClick","onMouseDown","onFocusCapture"],E=function(e){var t=e.as,a=e.children,o=e.className,u=e.onClick,s=e.onFocusCapture,l=i(e,y);return n.createElement("div",{style:r({display:"flex",flexDirection:"HStack"===t?"row":"column",alignItems:"center"},l),className:o,onClick:u,onFocusCapture:s},a)},A=["keysToSearch","inputAlgorithm","matchingAlgorithm","data","value","onChange","initialValue"],C=function(e){var r=e.keysToSearch,a=e.inputAlgorithm,o=e.matchingAlgorithm,u=e.data,l=e.value,c=e.onChange,p=e.initialValue,f=i(e,A),h=t.useState(null!=p?p:""),m=h[0],x=h[1],g=s().dispatch,y=n.useContext(v),C=t.useRef(null),b=null!=l?l:m,w=a(b,500),T=o(r);t.useEffect((function(){u&&T(b,u),null==g||g({type:"SET_INPUT",payload:b})}),[w,u]),t.useEffect((function(){y&&y.updateInternalContext("dataLength",u.length)}),[u]);var I=function(){var e;return null==C||null==(e=C.current)?void 0:e.focus()};return d(I,!0),n.createElement(E,{as:"HStack",onClick:I,justifyContent:"center",className:"rsh-input-box",padding:0,height:40,cursor:"text"},n.createElement("figure",{className:"rsh-input-box-logo"},n.createElement("img",{src:'<?xml version="1.0" encoding="utf-8"?>\n\x3c!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --\x3e\n<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">\n<style type="text/css">\n\t.st0{fill:none;}\n</style>\n<title>search</title>\n<path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5\n\tC2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"/>\n<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>\n</svg>',width:"18px"})),n.createElement("input",Object.assign({value:null!=l?l:m,onChange:null!=c?c:function(e){return x(e.target.value)},placeholder:"search here",className:"rsh-input",autoFocus:!0,ref:C},f)))},b=["data","keysToSearch","inputAlgorithmTimeout","inputAlgorithm","matchingAlgorithm","onChange","initialValue"],w={DEBOUNCE:function(e,n){var r=t.useState(e),i=r[0],a=r[1];return t.useEffect((function(){var t=setTimeout((function(){a(e)}),n);return function(){clearTimeout(t)}}),[e,n]),i},THROTTLE:function(e,n){void 0===n&&(n=200);var r=t.useState(e),i=r[0],a=r[1],o=t.useRef(),u=t.useRef(null),s=t.useRef(0),l=t.useRef(null);return t.useEffect((function(){o.current?(u.current=e,s.current=!0):(a(e),o.current=setTimeout((function e(){s.current?(s.current=!1,a(u.current),o.current=setTimeout(e,n)):o.current=void 0}),n))}),[e]),l.current=function(){o.current&&clearTimeout(o.current)},t.useEffect((function(){return function(){return l.current()}}),[]),i},DEFAULT:function(e){return e}},T={CHARACTER_MATCHING:function(e){var t=s().dispatch;return function(n,i){var a=n.toLowerCase().split("");if(0!==a.length){var o=new RegExp(a.join("|"),"gi");if(Array.isArray(i)&&Array.isArray(e)&&(!(i.length>0)||Object.keys(i[0]).some((function(t){return e.includes(t)})))){var u=null==i?void 0:i.filter((function(t){return a.every((function(n){return l(t,n,e)}))})).map((function(t){return r({},t,c(t,o,e))}));null==t||t({type:"SEARCH_DATA",payload:u})}}else null==t||t({type:"SEARCH_DATA",payload:[]})}},STRING_MATCHING:function(e){var t=s().dispatch;return function(n,i){if(0!==n.length){var a=new RegExp(n,"gi");if(Array.isArray(i)&&Array.isArray(e)&&(!(i.length>0)||Object.keys(i[0]).some((function(t){return e.includes(t)})))){var o=null==i?void 0:i.filter((function(t){return l(t,n,e)})).map((function(t){return r({},t,c(t,a,e))}));null==t||t({type:"SEARCH_DATA",payload:o})}}else null==t||t({type:"SEARCH_DATA",payload:[]})}}};exports.ContextProvider=function(e){var r=e.children,i=t.useReducer(a,o),s=i[0],l=i[1],c=function(){l({type:"START_LOADING"})},d=function(){l({type:"END_LOADING"})},p=t.useMemo((function(){return{state:s,dispatch:l,startLoading:c,endLoading:d}}),[s]);return n.createElement(u.Provider,{value:p},r)},exports.InternalContext=v,exports.Modal=function(e){var t=e.isOpen,r=e.onClose;return n.createElement(n.Fragment,null,(null==t||t)&&n.createElement("div",{onClick:null!=r?r:void 0,className:"rsh-modal-dialog",style:{backgroundColor:"rgba(220,220,220,0.5)",position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1e3}},n.createElement("div",{className:"rsh-modal-dialog-box-wrapper",style:{maxWidth:400,margin:"auto",padding:5}},e.children)))},exports.PopOverList=function(e){var r=e.children,a=i(e,h),o=t.useRef(null),u=n.useContext(v),s=u.isPopoverExpanded,l=u.listItemActiveIndex,c=u.updateInternalContext,p=u.dataLength;return d((function(){l<p-1&&c("listItemActiveIndex",l+1)}),!1,"arrowdown",[l,p]),d((function(){l>0&&c("listItemActiveIndex",l-1)}),!1,"arrowup",[l]),n.createElement(n.Fragment,null,s&&n.createElement("ul",Object.assign({ref:o,className:"rsh-search-list"},a),r))},exports.PopOverOption=function(e){var t=e.children,r=e.optionIndex,a=i(e,m),o=n.useContext(v),u=o.updateInternalContext;return n.createElement("li",Object.assign({onMouseEnter:function(){u("listItemActiveIndex",r)},className:"rsh-search-list-item "+(o.listItemActiveIndex===r&&"rsh-search-list-item__active")},a),t)},exports.PopOverOptionText=function(e){var t,r=e.className,a=e.value,o=e.as,u=i(e,x),s=null==a?void 0:a.split(/\(([^)]+)\)/);return o=null!=(t=o)?t:"h3",n.createElement(f,Object.assign({as:o,classNames:r+" rsh-search-list-item-text"},u),null==s?void 0:s.map((function(e,t){return"<"===e[0]?n.createElement("span",{key:t,dangerouslySetInnerHTML:{__html:e}}):n.createElement("span",{key:t},e)})))},exports.SearchBar=function(e){var t,r,a,o,u=e.data,s=e.keysToSearch,l=e.inputAlgorithmTimeout,c=e.inputAlgorithm,d=void 0===c?"DEBOUNCE":c,p=e.matchingAlgorithm,f=e.onChange,h=e.initialValue,m=i(e,b);return s=null!=(t=s)?t:Object.keys(null==u?void 0:u[0]),d=null!=(r=d)?r:"DEBOUNCE",l=null!=(a=l)?a:500,p=null!=(o=p)?o:"CHARACTER_MATCHING",n.createElement(C,Object.assign({keysToSearch:s,duration:l,inputAlgorithm:w[d],matchingAlgorithm:T[p],data:u,onChange:f,initialValue:h},m))},exports.Wrapper=function(e){var i,a,o,u=e.children,s=t.useState(g),l=s[0],c=s[1],d=function(e,t){c((function(n){var i;return r({},n,((i={})[e]=t,i))}))},p=t.useRef(null),f=function(e){var n=t.useState(!1),r=n[0],i=n[1];return t.useEffect((function(){function t(t){e.current&&!e.current.contains(t.target)&&i(!1)}return document.addEventListener("mousedown",t),function(){document.removeEventListener("mousedown",t)}}),[e]),[r,i]}(p),h=f[0],m=f[1];return i=function(){d("isPopoverExpanded",h)},a=[h],o=t.useRef(!1),t.useEffect((function(){o.current?i():o.current=!0}),a),n.createElement(v.Provider,{value:r({},l,{updateInternalContext:d})},n.createElement("section",{ref:p,className:"rsh-search-wrapper",onFocusCapture:function(){return m(!0)}},u))},exports.context=u,exports.useContext=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}require("process"),function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".rsh-input:focus{outline:none}.rsh-search-wrapper{position:relative}.rsh-input-box{background-color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);min-width:200px}.rsh-input-box-logo{align-items:center;display:flex;height:100%;justify-content:center;margin:0;width:40px}.rsh-input{border:none;border-radius:inherit;font-size:15px;height:100%;margin:0;padding:0;width:100%}.rsh-search-list{background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-sizing:border-box;max-height:500px;min-width:200px;overflow-x:scroll;overflow:scroll;padding:0 8px;position:absolute;top:40px;width:100%;z-index:12}.rsh-search-list-item{border-radius:13px;list-style:none;margin:10px 0;padding:3px 8px}.rsh-search-list-item__active{background-color:hsla(0,0%,47%,.05)}.rsh-search-list-item-text{margin:0}");var a=function(e,t){switch(t.type){case"SET_INPUT":return r({},e,{input:t.payload});case"SEARCH_DATA":return r({},e,{searchData:t.payload});case"START_LOADING":return r({},e,{isLoading:!0});case"END_LOADING":return r({},e,{isLoading:!1});case"RESET_STATE":return r({},o);default:return e}},o={isLoading:!1,searchData:void 0,input:""},u=t.createContext(null),l=function(){return t.useContext(u)},c=function(e){var r=e.children,i=t.useReducer(a,o),l=i[0],c=i[1],s=function(){c({type:"START_LOADING"})},d=function(){c({type:"END_LOADING"})},p=function(){c({type:"RESET_STATE"})},f=t.useMemo((function(){return{state:l,dispatch:c,startLoading:s,endLoading:d,resetState:p}}),[l]);return n.createElement(u.Provider,{value:f},r)},s=function(e,t,n){return n.some((function(n){return e[n].toLowerCase().includes(t)}))},d=function(e,t,n){var i=r({},e);return n.forEach((function(n){return i[n]=e[n].replaceAll(t,(function(e){return"(<mark>"+e+"</mark>)"}))})),i},p=function(e,n,r,i){void 0===r&&(r="k"),void 0===i&&(i=[]),t.useEffect((function(){var t=function(t){(!n||t.metaKey)&&t.key.toLowerCase()===r&&(null==e||e())};return document.addEventListener("keydown",t),function(){document.removeEventListener("keydown",t)}}),i)},f=["as","children","classNames"],h=function(e){var n=e.as,a=e.children,o=e.classNames,u=i(e,f);return t.createElement(n,r({className:o},u),a)},m=["children"],g=["children","optionIndex"],x=["className","value","as"],v={isPopoverExpanded:!1,listItemActiveIndex:0,updateInternalContext:function(e,t){},dataLength:0},E=t.createContext(v),y=function(e){var i,a,o,u=e.children,c=e.isFunction,s=t.useState(v),d=s[0],p=s[1],f=l(),h=function(e,t){p((function(n){var i;return r({},n,((i={})[e]=t,i))}))},m=t.useRef(null),g=function(e){var n=t.useState(!1),r=n[0],i=n[1];return t.useEffect((function(){function t(t){e.current&&!e.current.contains(t.target)&&i(!1)}return document.addEventListener("mousedown",t),function(){document.removeEventListener("mousedown",t)}}),[e]),[r,i]}(m),x=g[0],y=g[1];return i=function(){h("isPopoverExpanded",x)},a=[x],o=t.useRef(!1),t.useEffect((function(){o.current?i():o.current=!0}),a),n.createElement(E.Provider,{value:r({},d,{updateInternalContext:h})},n.createElement("section",{ref:m,className:"rsh-search-wrapper",onFocusCapture:function(){return y(!0)}},c?u(f):u))},A=["as","children","className","onClick","onMouseDown","onFocusCapture"],C=function(e){var t=e.as,a=e.children,o=e.className,u=e.onClick,l=e.onFocusCapture,c=i(e,A);return n.createElement("div",{style:r({display:"flex",flexDirection:"HStack"===t?"row":"column",alignItems:"center"},c),className:o,onClick:u,onFocusCapture:l},a)},T=["keysToSearch","inputAlgorithm","matchingAlgorithm","data","value","onChange","initialValue"],b=function(e){var r=e.keysToSearch,a=e.inputAlgorithm,o=e.matchingAlgorithm,u=e.data,c=e.value,s=e.onChange,d=e.initialValue,f=i(e,T),h=t.useState(null!=d?d:""),m=h[0],g=h[1],x=l().dispatch,v=n.useContext(E),y=t.useRef(null),A=null!=c?c:m,b=a(A,500),w=o(r);t.useEffect((function(){u&&w(A,u),null==x||x({type:"SET_INPUT",payload:A})}),[b,u]),t.useEffect((function(){v&&v.updateInternalContext("dataLength",u.length)}),[u]);var S=function(){var e;return null==y||null==(e=y.current)?void 0:e.focus()};return p(S,!0),n.createElement(C,{as:"HStack",onClick:S,justifyContent:"center",className:"rsh-input-box",padding:0,height:40,cursor:"text"},n.createElement("figure",{className:"rsh-input-box-logo"},n.createElement("img",{src:'<?xml version="1.0" encoding="utf-8"?>\n\x3c!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --\x3e\n<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">\n<style type="text/css">\n\t.st0{fill:none;}\n</style>\n<title>search</title>\n<path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5\n\tC2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"/>\n<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>\n</svg>',width:"18px"})),n.createElement("input",Object.assign({value:null!=c?c:m,onChange:null!=s?s:function(e){return g(e.target.value)},placeholder:"search here",className:"rsh-input",autoFocus:!0,ref:y},f)))},w=["data","keysToSearch","inputAlgorithmTimeout","inputAlgorithm","matchingAlgorithm","onChange","initialValue"],S={DEBOUNCE:function(e,n){var r=t.useState(e),i=r[0],a=r[1];return t.useEffect((function(){var t=setTimeout((function(){a(e)}),n);return function(){clearTimeout(t)}}),[e,n]),i},THROTTLE:function(e,n){void 0===n&&(n=200);var r=t.useState(e),i=r[0],a=r[1],o=t.useRef(),u=t.useRef(null),l=t.useRef(0),c=t.useRef(null);return t.useEffect((function(){o.current?(u.current=e,l.current=!0):(a(e),o.current=setTimeout((function e(){l.current?(l.current=!1,a(u.current),o.current=setTimeout(e,n)):o.current=void 0}),n))}),[e]),c.current=function(){o.current&&clearTimeout(o.current)},t.useEffect((function(){return function(){return c.current()}}),[]),i},DEFAULT:function(e){return e}},I={CHARACTER_MATCHING:function(e){var t=l().dispatch;return function(n,i){var a=n.toLowerCase().split("");if(0!==a.length){var o=new RegExp(a.join("|"),"gi");if(Array.isArray(i)&&Array.isArray(e)&&(!(i.length>0)||Object.keys(i[0]).some((function(t){return e.includes(t)})))){var u=null==i?void 0:i.filter((function(t){return a.every((function(n){return s(t,n,e)}))})).map((function(t){return r({},t,d(t,o,e))}));null==t||t({type:"SEARCH_DATA",payload:u})}}else null==t||t({type:"SEARCH_DATA",payload:[]})}},STRING_MATCHING:function(e){var t=l().dispatch;return function(n,i){if(0!==n.length){var a=new RegExp(n,"gi");if(Array.isArray(i)&&Array.isArray(e)&&(!(i.length>0)||Object.keys(i[0]).some((function(t){return e.includes(t)})))){var o=null==i?void 0:i.filter((function(t){return s(t,n,e)})).map((function(t){return r({},t,d(t,a,e))}));null==t||t({type:"SEARCH_DATA",payload:o})}}else null==t||t({type:"SEARCH_DATA",payload:[]})}}};exports.InternalContext=E,exports.Modal=function(e){var t=e.isOpen,r=e.onClose;return n.createElement(n.Fragment,null,(null==t||t)&&n.createElement("div",{onClick:null!=r?r:void 0,className:"rsh-modal-dialog",style:{backgroundColor:"rgba(220,220,220,0.5)",position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1e3}},n.createElement("div",{className:"rsh-modal-dialog-box-wrapper",style:{maxWidth:400,margin:"auto",padding:5}},e.children)))},exports.PopOverList=function(e){var r=e.children,a=i(e,m),o=t.useRef(null),u=n.useContext(E),l=u.isPopoverExpanded,c=u.listItemActiveIndex,s=u.updateInternalContext,d=u.dataLength;return p((function(){c<d-1&&s("listItemActiveIndex",c+1)}),!1,"arrowdown",[c,d]),p((function(){c>0&&s("listItemActiveIndex",c-1)}),!1,"arrowup",[c]),n.createElement(n.Fragment,null,l&&n.createElement("ul",Object.assign({ref:o,className:"rsh-search-list"},a),r))},exports.PopOverOption=function(e){var t=e.children,r=e.optionIndex,a=i(e,g),o=n.useContext(E),u=o.updateInternalContext;return n.createElement("li",Object.assign({onMouseEnter:function(){u("listItemActiveIndex",r)},className:"rsh-search-list-item "+(o.listItemActiveIndex===r&&"rsh-search-list-item__active")},a),t)},exports.PopOverOptionText=function(e){var t,r=e.className,a=e.value,o=e.as,u=i(e,x),l=null==a?void 0:a.split(/\(([^)]+)\)/);return o=null!=(t=o)?t:"h3",n.createElement(h,Object.assign({as:o,classNames:r+" rsh-search-list-item-text"},u),null==l?void 0:l.map((function(e,t){return"<"===e[0]?n.createElement("span",{key:t,dangerouslySetInnerHTML:{__html:e}}):n.createElement("span",{key:t},e)})))},exports.ReactSearchHighlightProvider=c,exports.SearchBar=function(e){var t,r,a,o,u=e.data,l=e.keysToSearch,c=e.inputAlgorithmTimeout,s=e.inputAlgorithm,d=void 0===s?"DEBOUNCE":s,p=e.matchingAlgorithm,f=e.onChange,h=e.initialValue,m=i(e,w);return l=null!=(t=l)?t:Object.keys(null==u?void 0:u[0]),d=null!=(r=d)?r:"DEBOUNCE",c=null!=(a=c)?a:500,p=null!=(o=p)?o:"CHARACTER_MATCHING",n.createElement(b,Object.assign({keysToSearch:l,duration:c,inputAlgorithm:S[d],matchingAlgorithm:I[p],data:u,onChange:f,initialValue:h},m))},exports.Wrapper=function(e){var t=e.children,r="function"==typeof t;return n.createElement(n.Fragment,null,r?n.createElement(c,null,n.createElement(y,{isFunction:r,children:t})):n.createElement(y,{isFunction:r,children:t}))},exports.context=u,exports.initialState=o,exports.useReactSearchHighlight=l;
 //# sourceMappingURL=react-search-highlight.cjs.production.min.js.map

dist/react-search-highlight.esm.js

@@ -1,2 +0,2 @@
-import React, { createContext, useContext as useContext$1, useReducer, useMemo, useState, useEffect, useRef, createElement } from 'react';
+import React, { createContext, useContext, useReducer, useMemo, useState, useEffect, useRef, createElement } from 'react';
 import process from 'process';
@@ -31,3 +31,3 @@
 
-var css_248z = ".rsh-input:focus{outline:none}.rsh-search-wrapper{position:relative}.rsh-input-box{background-color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);min-width:200px}.rsh-input-box-logo{align-items:center;display:flex;height:100%;justify-content:center;margin:0;width:40px}.rsh-input{border:none;border-radius:inherit;font-size:15px;height:100%;margin:0;padding:0;width:100%}.rsh-search-list{background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-sizing:border-box;min-width:200px;overflow-x:scroll;overflow:scroll;padding:0 8px;position:absolute;top:40px;width:100%;z-index:12}.rsh-search-list-item{border-radius:13px;list-style:none;margin:10px 0;padding:3px 8px}.rsh-search-list-item__active{background-color:hsla(0,0%,47%,.05)}.rsh-search-list-item-text{margin:0}";
+var css_248z = ".rsh-input:focus{outline:none}.rsh-search-wrapper{position:relative}.rsh-input-box{background-color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);min-width:200px}.rsh-input-box-logo{align-items:center;display:flex;height:100%;justify-content:center;margin:0;width:40px}.rsh-input{border:none;border-radius:inherit;font-size:15px;height:100%;margin:0;padding:0;width:100%}.rsh-search-list{background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-sizing:border-box;max-height:500px;min-width:200px;overflow-x:scroll;overflow:scroll;padding:0 8px;position:absolute;top:40px;width:100%;z-index:12}.rsh-search-list-item{border-radius:13px;list-style:none;margin:10px 0;padding:3px 8px}.rsh-search-list-item__active{background-color:hsla(0,0%,47%,.05)}.rsh-search-list-item-text{margin:0}";
 styleInject(css_248z);
@@ -72,2 +72,3 @@
 var DEBOUNCE = 'DEBOUNCE';
+var RESET_STATE = 'RESET_STATE';
 var CHARACTER_MATCHING = 'CHARACTER_MATCHING';
@@ -98,2 +99,5 @@ var __DEV__ = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
 
+    case RESET_STATE:
+      return _extends({}, initialState);
+
     default:
@@ -110,6 +114,10 @@ return state;
 var context = /*#__PURE__*/createContext(null);
-var useContext = function useContext() {
-  return useContext$1(context);
+/**
+ * @returns context data and helper function
+ */
+
+var useReactSearchHighlight = function useReactSearchHighlight() {
+  return useContext(context);
 };
-var ContextProvider = function ContextProvider(_ref) {
+var ReactSearchHighlightProvider = function ReactSearchHighlightProvider(_ref) {
   var children = _ref.children;
@@ -133,2 +141,8 @@
 
+  var resetState = function resetState() {
+    dispatch({
+      type: RESET_STATE
+    });
+  };
+
   var value = useMemo(function () {
@@ -139,3 +153,4 @@ return {
       startLoading: startLoading,
-      endLoading: endLoading
+      endLoading: endLoading,
+      resetState: resetState
     };
@@ -170,4 +185,4 @@ }, [state]);
 var useCharacterMatching = function useCharacterMatching(keys) {
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -307,4 +322,4 @@ return function (input, data) {
 var useStringMatching = function useStringMatching(keys) {
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -423,5 +438,7 @@ return function (input, data) {
 var InternalContext = /*#__PURE__*/createContext(InternalContextInitialState);
-var Wrapper = function Wrapper(_ref) {
-  var children = _ref.children;
 
+var WrapperInner = function WrapperInner(_ref) {
+  var children = _ref.children,
+      isFunction = _ref.isFunction;
+
   var _useState = useState(InternalContextInitialState),
@@ -431,2 +448,4 @@ state = _useState[0],
 
+  var __state = useReactSearchHighlight();
+
   var updateInternalContext = function updateInternalContext(key, value) {
@@ -463,8 +482,20 @@ setState(function (prev) {
     }
-  }, children));
+  }, isFunction ? children(__state) : children));
 };
-var PopOverList = function PopOverList(_ref2) {
-  var children = _ref2.children,
-      any = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
+var Wrapper = function Wrapper(_ref2) {
+  var children = _ref2.children;
+  var isFunction = typeof children === 'function';
+  return React.createElement(React.Fragment, null, isFunction ? React.createElement(ReactSearchHighlightProvider, null, React.createElement(WrapperInner, {
+    isFunction: isFunction,
+    children: children
+  })) : React.createElement(WrapperInner, {
+    isFunction: isFunction,
+    children: children
+  }));
+};
+var PopOverList = function PopOverList(_ref3) {
+  var children = _ref3.children,
+      any = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+
   var listRef = useRef(null);
@@ -493,6 +524,6 @@
 };
-var PopOverOption = function PopOverOption(_ref3) {
-  var children = _ref3.children,
-      optionIndex = _ref3.optionIndex,
-      any = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+var PopOverOption = function PopOverOption(_ref4) {
+  var children = _ref4.children,
+      optionIndex = _ref4.optionIndex,
+      any = _objectWithoutPropertiesLoose(_ref4, _excluded2);
 
@@ -514,9 +545,9 @@ var _React$useContext2 = React.useContext(InternalContext),
 };
-var PopOverOptionText = function PopOverOptionText(_ref4) {
+var PopOverOptionText = function PopOverOptionText(_ref5) {
   var _as;
 
-  var className = _ref4.className,
-      value = _ref4.value,
-      as = _ref4.as,
-      any = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  var className = _ref5.className,
+      value = _ref5.value,
+      as = _ref5.as,
+      any = _objectWithoutPropertiesLoose(_ref5, _excluded3);
 
@@ -608,4 +639,4 @@ var words = value == null ? void 0 : value.split(/\(([^)]+)\)/);
 
-  var _useContext = useContext(),
-      dispatch = _useContext.dispatch;
+  var _useReactSearchHighli = useReactSearchHighlight(),
+      dispatch = _useReactSearchHighli.dispatch;
 
@@ -655,3 +686,2 @@ var __internalContext = React.useContext(InternalContext);
     height: 40,
-    // width={'400px'}
     cursor: 'text'
@@ -713,3 +743,3 @@ }, React.createElement("figure", {
 
-export { ContextProvider, InternalContext, Modal, PopOverList, PopOverOption, PopOverOptionText, SearchBar, Wrapper, context, useContext };
+export { InternalContext, Modal, PopOverList, PopOverOption, PopOverOptionText, ReactSearchHighlightProvider, SearchBar, Wrapper, context, initialState, useReactSearchHighlight };
 //# sourceMappingURL=react-search-highlight.esm.js.map

dist/types.d.ts

@@ -1,5 +0,5 @@
-import { Dispatch } from "react";
-import { END_LOADING, SEARCH_DATA, SET_INPUT, START_LOADING } from '../src/const';
+import { Dispatch } from 'react';
+import { END_LOADING, RESET_STATE, SEARCH_DATA, SET_INPUT, START_LOADING } from '../src/const';
 export declare type Action = {
-    type: typeof SET_INPUT | typeof START_LOADING | typeof END_LOADING | typeof SEARCH_DATA;
+    type: typeof SET_INPUT | typeof START_LOADING | typeof END_LOADING | typeof SEARCH_DATA | typeof RESET_STATE;
     payload?: any;
@@ -6,0 +6,0 @@ };

package.json

 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/const.ts

@@ -9,2 +9,3 @@ import process from "process";
 export const THROTTLE = 'THROTTLE'
+export const RESET_STATE = 'RESET_STATE'
 
@@ -11,0 +12,0 @@ export const STRING_MATCHING = 'STRING_MATCHING';

src/hooks/useCharacterMatching.ts

 import { SEARCH_DATA, __DEV__ } from '../const';
-import { useContext } from '../context';
+import { useReactSearchHighlight } from '../context';
 import { isMatch, replaceAll } from '../utils';
@@ -10,3 +10,3 @@
 export const useCharacterMatching = (keys: string[]) => {
-  const {dispatch} = useContext();
+  const {dispatch} = useReactSearchHighlight();
   return (input: string, data: any[]) => {
@@ -13,0 +13,0 @@ const inputArr = input.toLowerCase().split('');

src/hooks/useStringMatching.ts

 import { SEARCH_DATA, __DEV__ } from '../const';
-import { useContext } from '../context';
+import { useReactSearchHighlight } from '../context';
 import { isMatch, replaceAll } from '../utils';
@@ -10,3 +10,3 @@
 export const useStringMatching = (keys: string[]) => {
-  const {dispatch} = useContext();
+  const {dispatch} = useReactSearchHighlight();
   return (input: string, data: any[]) => {
@@ -13,0 +13,0 @@ if (input.length === 0) {

src/reducers/index.ts

 import { Action, State } from "src/types";
-import { END_LOADING, SEARCH_DATA, SET_INPUT, START_LOADING } from '../const';
+import { END_LOADING, RESET_STATE, SEARCH_DATA, SET_INPUT, START_LOADING } from '../const';
 
+import { initialState } from "../context";
+
 const reducer = (state: State, action: Action): State => {
@@ -14,2 +16,4 @@ switch (action.type) {
       return {...state, isLoading: false};
+    case RESET_STATE:
+      return {...initialState}  
     default:
@@ -16,0 +20,0 @@ return state;

src/types.ts

@@ -1,3 +0,3 @@
-import { Dispatch } from "react";
-import { END_LOADING, SEARCH_DATA, SET_INPUT, START_LOADING } from '../src/const';
+import { Dispatch } from 'react';
+import { END_LOADING, RESET_STATE, SEARCH_DATA, SET_INPUT, START_LOADING } from '../src/const';
 
@@ -10,2 +10,3 @@ export type Action = {
     | typeof SEARCH_DATA
+    | typeof RESET_STATE;
   payload?: any;
@@ -20,3 +21,2 @@ };
 
-
 export type ContextType = {
@@ -27,2 +27,2 @@ state: State;
   endLoading: VoidFunction;
-};
+};

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

Improved metrics

Total package byte prevSize

212930

increased by4.63%

Lines of code

2253

increased by4.21%

No dependency changes