@choc-ui/chakra-autocomplete - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/auto-complete-input.d.ts

 import { InputProps } from '@chakra-ui/react';
 export interface AutoCompleteInputProps extends InputProps {
+    initialFilter?: boolean;
 }
 export declare const AutoCompleteInput: import("@chakra-ui/react").ComponentWithAs<"input", AutoCompleteInputProps>;

dist/chakra-autocomplete.cjs.development.js

@@ -11,2 +11,3 @@ 'use strict';
 var utils = require('@chakra-ui/utils');
+var reactUtils = require('@chakra-ui/react-utils');
 var system = require('@chakra-ui/system');
@@ -48,8 +49,8 @@ var layout = require('@chakra-ui/layout');
 
-var StoreContext = /*#__PURE__*/React.createContext({});
+var _createContext = /*#__PURE__*/reactUtils.createContext({
+  name: 'AutoCompleteContext'
+}),
+    AutoCompleteProvider = _createContext[0],
+    useAutoCompleteContext = _createContext[1];
 
-var StoreProvider = function StoreProvider(props) {
-  return React__default.createElement(StoreContext.Provider, Object.assign({}, props));
-};
-
 var InputAction;
@@ -245,5 +246,5 @@
 
-  var _useContext = React.useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -437,3 +438,3 @@ var autoCompleteValue = state.autocomplete.value,
   useParseProps(props);
-  return React__default.createElement(StoreProvider, {
+  return React__default.createElement(AutoCompleteProvider, {
     value: providerValue
@@ -479,14 +480,17 @@ }, React__default.createElement(AutoCompleteBody, Object.assign({
 
-var useOptionsFilter = function useOptionsFilter() {
-  var _useContext = React.useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      creatable = _useContext$state.autocomplete.creatable,
-      input = _useContext$state.input,
-      item = _useContext$state.item,
-      dispatch = _useContext.dispatch;
+var useOptionsFilter = function useOptionsFilter(props) {
+  var _props$initialFilter = props.initialFilter,
+      initialFilter = _props$initialFilter === void 0 ? true : _props$initialFilter;
 
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      creatable = _useAutoCompleteConte2.autocomplete.creatable,
+      input = _useAutoCompleteConte2.input,
+      item = _useAutoCompleteConte2.item,
+      dispatch = _useAutoCompleteConte.dispatch;
+
   var inputValue = input.value;
   var options = item.list;
   var filteredItems = options.filter(function (i) {
-    return i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
+    return i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 || i.value.trim().length === 0;
   }); //? Update input state if there's a defaultValue for input
@@ -503,3 +507,3 @@
       if (inputValue.trim().length < 1 && rawInputValue.trim().length > 0) {
-        dispatch({
+        if (initialFilter) dispatch({
           type: InputAction.Set,
@@ -591,3 +595,4 @@ payload: rawInputValue
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, ["onChange", "onKeyDown", "onFocus", "onBlur", "onClick"]);
+      initialFilter = props.initialFilter,
+      rest = _objectWithoutPropertiesLoose(props, ["onChange", "onKeyDown", "onFocus", "onBlur", "onClick", "initialFilter"]);
 
@@ -597,5 +602,5 @@ var internalRef = React.useRef(null);
 
-  var _useContext = React.useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -618,3 +623,5 @@ var autocomplete = state.autocomplete,
 
-  useOptionsFilter();
+  useOptionsFilter({
+    initialFilter: initialFilter
+  });
   React.useEffect(function () {
@@ -686,4 +693,4 @@ dispatch({
 var useOnOptionHighlight = function useOnOptionHighlight(activeItem) {
-  var _useContext = React.useContext(StoreContext),
-      onOptionHighlight = _useContext.state.autocomplete.onOptionHighlight;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      onOptionHighlight = _useAutoCompleteConte.state.autocomplete.onOptionHighlight;
 
@@ -731,5 +738,5 @@ React.useEffect(function () {
 
-  var _useContext = React.useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -803,9 +810,9 @@ var emphasize = state.autocomplete.emphasize,
 var CreateInput = function CreateInput() {
-  var _useContext = React.useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      item = _useContext$state.item,
-      _useContext$state$aut = _useContext$state.autocomplete,
-      creatable = _useContext$state$aut.creatable,
-      emphasize = _useContext$state$aut.emphasize,
-      inputValue = _useContext$state.input.value;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      item = _useAutoCompleteConte2.item,
+      _useAutoCompleteConte3 = _useAutoCompleteConte2.autocomplete,
+      creatable = _useAutoCompleteConte3.creatable,
+      emphasize = _useAutoCompleteConte3.emphasize,
+      inputValue = _useAutoCompleteConte2.input.value;
 
@@ -835,6 +842,6 @@ var itemExists = item.list.some(function (i) {
 var EmptyState = function EmptyState(props) {
-  var _useContext = React.useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      filtered = _useContext$state.item.filtered,
-      emptyState = _useContext$state.autocomplete.emptyState;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      filtered = _useAutoCompleteConte2.item.filtered,
+      emptyState = _useAutoCompleteConte2.autocomplete.emptyState;
 
@@ -860,5 +867,5 @@ return React__default.createElement(layout.Box, Object.assign({}, props), filtered.length < 1 && emptyState && (typeof emptyState === 'boolean' ? React__default.createElement(layout.Flex, Object.assign({}, emptyStyles), "No options found!") : emptyState));
 
-  var _useContext = React.useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -930,7 +937,7 @@ var input = state.input;
 
-  var _useContext = React.useContext(StoreContext),
-      _useContext$state$ite = _useContext.state.item,
-      filterdItems = _useContext$state$ite.filtered,
-      activeItemIndex = _useContext$state$ite.active,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state.item,
+      filterdItems = _useAutoCompleteConte2.filtered,
+      activeItemIndex = _useAutoCompleteConte2.active,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -998,4 +1005,4 @@ React.useEffect(function () {
 
-  var _useContext = React.useContext(StoreContext),
-      state = _useContext.state;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state;
 
@@ -1002,0 +1009,0 @@ var noDivider = hasFirstOption(children, state);

dist/chakra-autocomplete.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@chakra-ui/react"),n=require("react"),o=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@chakra-ui/utils"),l=require("@chakra-ui/system"),u=require("@chakra-ui/layout");function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)t.indexOf(n=l[o])>=0||(r[n]=e[n]);return r}var c,s=n.createContext({}),p=function(e){return o.createElement(s.Provider,Object.assign({},e))};!function(e){e.Set="SET_INPUT_VALUE",e.SetRef="SET_INPUT_REF"}(c||(c={}));var f,d=function(e,t){switch(t.type){case c.Set:return i({},e,{value:t.payload});case c.SetRef:return i({},e,{ref:t.payload});default:return e}};!function(e){e.Set="SET_AUTOCOMPLETE_VALUE"}(f||(f={}));var v,m=function(e,t){switch(t.type){case f.Set:return i({},e,{value:t.payload});default:return e}};!function(e){e.Show="SHOW_LIST",e.Hide="HIDE_LIST",e.SetRef="SET_LIST_REF"}(v||(v={}));var y,h=function(e,t){switch(t.type){case v.Show:return i({},e,{visible:!0});case v.Hide:return i({},e,{visible:!1});case v.SetRef:return i({},e,{ref:t.payload});default:return e}},S=function(e,t){return e.type.displayName===t&&(e.key||!0)},g=function(e){return e&&e},E=function(e){return o.cloneElement(e,{optionKey:e.key||e.props.children.toString()})},I=function(e){return{key:e.key||e.props.children.toString(),value:e.props.value||""}},C=function(e,t){var n=e.autocomplete,o=n.value,r=n.freeSolo,l=e.input,u=l.value,i=l.ref;t({type:v.Hide}),u===o||r||(t({type:c.Set,payload:o}),g(null==i?void 0:i.current).value=o)},O=t.forwardRef((function(e,l){var u,i=e.children,p=e.onChange,d=a(e,["children","onChange"]),v=n.useContext(s),m=v.state,y=v.dispatch,h=m.autocomplete.value,S=m.list.visible,g=m.input,E=g.value,I=g.ref;n.useEffect((function(){r.runIfFn(p,h)}),[h]);var O=function(){return C(m,y)},x={isOpen:S,onClose:O,inputIsEmpty:!(E.length||null!=I&&null!=(u=I.current)&&u.value.length),resetInput:function(){null!=I&&I.current&&(I.current.value="",I.current.focus()),y({type:c.Set,payload:""}),y({type:f.Set,payload:""})}};return o.createElement(t.Popover,{autoFocus:!1,closeOnBlur:!0,placement:"bottom",isOpen:S,onClose:O},o.createElement(t.Box,Object.assign({ref:l},d),r.runIfFn(i,x)))}));!function(e){e.Set="SET_ACTIVE_ITEM",e.SetAll="SET_ITEMS",e.SetWithKey="SET_ACTIVE_ITEM_WITH_KEY",e.SetFiltered="SET_FILTERED_ITEMS",e.ResetActive="RESET_ACTIVE_ITEM",e.AddFixedRef="ADD_FIXED_ITEM_REF"}(y||(y={}));var x=function(e,t){var n;switch(t.type){case y.Set:return i({},e,{active:t.payload});case y.SetAll:return i({},e,{list:t.payload});case y.SetWithKey:var o=e.filtered.findIndex((function(e){return e.key===t.payload}));return i({},e,{active:o});case y.SetFiltered:return i({},e,{filtered:t.payload});case y.ResetActive:return i({},e,{active:t.payload?e.filtered.length-1:0});case y.AddFixedRef:return i({},e,{fixed:i({},e.fixed,(n={},n[t.payload.key]=t.payload.ref,n))});default:return e}},b=t.forwardRef((function(e,t){var r=e.emptyState,l=void 0===r||r,u=e.rollNavigation,i=e.focusInputOnSelect,c=e.freeSolo,s=e.creatable,f=e.selectOnFocus,v=e.openOnFocus,y=e.emphasize,S=e.defaultIsOpen,g=e.onSelectOption,E=e.onOptionHighlight,I=e.suggestWhenEmpty,C=e.closeOnselect,b=void 0===C||C,F=e.closeOnBlur,w=void 0===F||F,A=a(e,["emptyState","rollNavigation","focusInputOnSelect","freeSolo","creatable","selectOnFocus","openOnFocus","emphasize","defaultIsOpen","onSelectOption","onOptionHighlight","suggestWhenEmpty","closeOnselect","closeOnBlur"]),k=n.useReducer((function(e,t){var n=e.input,o=e.item,r=e.list;return{autocomplete:m(e.autocomplete,t),input:d(n,t),item:x(o,t),list:h(r,t)}}),{autocomplete:{value:"",emptyState:l,rollNavigation:u,focusInputOnSelect:i,freeSolo:c,creatable:s,selectOnFocus:f,openOnFocus:v,emphasize:y,onSelectOption:g,onOptionHighlight:E,suggestWhenEmpty:I,closeOnselect:b,closeOnBlur:w},input:{value:"",ref:void 0},item:{active:-1,list:[],filtered:[],fixed:{}},list:{visible:S||!1,ref:void 0}}),_=k[0],R=k[1],T=n.useMemo((function(){return{state:_,dispatch:R}}),[_,R]);return function(e){var t=e.freeSolo,o=e.creatable;n.useEffect((function(){if(o&&!t)throw new Error("AutoCOmplete: `creatable` can only be applied in freeSolo mode, please add the freeSolo Prop")}),[])}(e),o.createElement(p,{value:T},o.createElement(O,Object.assign({ref:t},A)))})),F=function(e,t,n,o){var l=e.autocomplete,u=l.onSelectOption,i=l.focusInputOnSelect,a=l.closeOnselect,s=e.item,p=e.input.ref,d=s.filtered[s.active];(r.isDefined(u)&&!1!==r.runIfFn(u,{optionValue:d.value,selectMethod:n,isNewInput:"newInput"===d.key})||!r.isDefined(u))&&(g(null==p?void 0:p.current).value=d.value,t({type:c.Set,payload:d.value}),t({type:f.Set,payload:d.value}),a&&C(e,t),r.runIfFn(o)),null!=p&&p.current&&i&&p.current.focus()},w=t.forwardRef((function(e,l){var u=e.onChange,i=e.onKeyDown,p=e.onFocus,d=e.onBlur,m=e.onClick,h=a(e,["onChange","onKeyDown","onFocus","onBlur","onClick"]),S=n.useRef(null),g=t.useMergeRefs(l,S),E=n.useContext(s),I=E.state,O=E.dispatch,x=I.autocomplete,b=I.list,w=b.ref,A=b.visible,k=x.freeSolo,_=x.suggestWhenEmpty,R=x.closeOnBlur,T=x.closeOnselect,M=I.item.filtered.length<1&&!x.emptyState,j=function(){return C(I,O)};return function(){var e=n.useContext(s),t=e.state,o=t.autocomplete.creatable,r=t.input,l=e.dispatch,u=r.value,i=t.item.list,a=i.filter((function(e){return e.value.toLowerCase().indexOf(u.toLowerCase())>-1}));n.useEffect((function(){var e;if(null!=(e=r.ref)&&e.current){var t,n,o=null==(t=r.ref)||null==(n=t.current)?void 0:n.value;u.trim().length<1&&o.trim().length>0&&l({type:c.Set,payload:o})}}),[r.ref]),n.useEffect((function(){var e=o?[].concat(a,[o&&{key:"newInput",value:u}]):a;l({type:y.SetFiltered,payload:e}),l({type:y.ResetActive,payload:!1})}),[u,i])}(),n.useEffect((function(){O({type:c.SetRef,payload:S})}),[]),o.createElement(o.Fragment,null,o.createElement(t.Input,Object.assign({onChange:function(e){r.runIfFn(u,e);var t=e.target.value;O({type:c.Set,payload:t}),k&&O({type:f.Set,payload:t}),M||((null==t?void 0:t.length)<1?_||j():O({type:v.Show}))},onKeyDown:function(e){r.runIfFn(i,e),function(e,t,n){var o=t.autocomplete.rollNavigation,r=t.item;if("Enter"===e.key){var l,u=r.filtered[r.active];0===u.value.trim().length?null==(l=r.fixed[u.key].current)||l.onKeyboardSelect():F(t,n,"keyboard")}else if("ArrowUp"===e.key){if(0===r.active)return o&&n({type:y.ResetActive,payload:!0}),void e.preventDefault();n({type:y.Set,payload:r.active-1}),e.preventDefault()}else if("ArrowDown"===e.key){if(r.active===r.filtered.length-1)return void(o&&n({type:y.ResetActive,payload:!1}));n({type:y.Set,payload:r.active+1})}else"Home"===e.key?(n({type:y.ResetActive,payload:!1}),e.preventDefault()):"End"===e.key?(n({type:y.ResetActive,payload:!0}),e.preventDefault()):"Escape"===e.key&&(C(t,n),e.preventDefault())}(e,I,O)},onFocus:function(e){r.runIfFn(p,e),x.selectOnFocus&&e.target.select(),x.openOnFocus&&O({type:v.Show}),e.relatedTarget===(null==w?void 0:w.current)&&T&&A&&j()},onBlur:function(e){r.runIfFn(d,e),e.relatedTarget!==(null==w?void 0:w.current)&&R&&j()},onClick:function(e){r.runIfFn(m,e)},ref:g},h)))})),A=t.forwardRef((function(e,l){var u=e.children,c=e.value,p=e.optionKey,f=void 0===p?"":p,d=e._hover,v=e._focus,m=e.onMouseOver,h=e.onClick,S=e.sx,g=a(e,["children","value","optionKey","_hover","_focus","onMouseOver","onClick","sx"]),E=n.useContext(s),I=E.state,C=E.dispatch,O=I.autocomplete.emphasize,x=I.input.value,b=I.item,w=b.filtered[b.active],A=(null==w?void 0:w.key)===f;!function(e){var t=n.useContext(s).state.autocomplete.onOptionHighlight;n.useEffect((function(){r.runIfFn(t,null==e?void 0:e.value)}),[e])}(w);var R=b.filtered.some((function(e){return e.key===f})),T=function(e){var t=e.emphasize,n=e.inputValue,r=e.children,l=e.itemValue,u=("string"==typeof r?r.toString():l).replace(new RegExp(n,"gi"),(function(e){return'<span class="emphasizedItem">'+e+"</span>"})),i=o.createElement("span",{dangerouslySetInnerHTML:{__html:u}});return{itemChild:t?i:r,emphasizeStyles:"object"==typeof t?t:{fontWeight:"extrabold"}}}({emphasize:O,inputValue:x,optionKey:f,children:u,itemValue:c}),M=T.itemChild,j="newInput"===f;return R?o.createElement(t.Flex,Object.assign({onMouseOver:function(e){r.runIfFn(m,e),C({type:y.SetWithKey,payload:f})},onClick:function(e){F(I,C,"click",(function(){return r.runIfFn(h,e)}))}},k,{_hover:d},A&&(v||_),{sx:i({},S,{".emphasizedItem":T.emphasizeStyles}),ref:l},g),j?u:M):null}));A.displayName="AutoCompleteItem";var k={mx:"2",px:"2",py:"2",rounded:"md",cursor:"pointer"},_={bg:"whiteAlpha.100",_light:{bg:"gray.200"}},R=function(){var e=n.useContext(s).state,t=e.autocomplete,u=t.creatable,i=t.emphasize,a=e.input.value,c=e.item.list.some((function(e){return e.value===a})),p="object"==typeof i?i:{fontWeight:"extrabold"},f=function(e){return o.createElement(l.chakra.span,Object.assign({sx:p},e),"  ",e.children)};return o.createElement(o.Fragment,null,!!a.trim().length&&u&&!c&&o.createElement(A,{value:a,optionKey:"newInput"},"boolean"==typeof u?o.createElement(o.Fragment,null,"Add",o.createElement(f,null,'"',a,'"')):r.runIfFn(u,{newInput:a,Emphasize:f})))},T=function(e){var t=n.useContext(s).state,r=t.item.filtered,l=t.autocomplete.emptyState;return o.createElement(u.Box,Object.assign({},e),r.length<1&&l&&("boolean"==typeof l?o.createElement(u.Flex,Object.assign({},M),"No options found!"):l))},M={fontSize:"sm",align:"center",justify:"center",fontWeight:"bold",fontStyle:"italic"},j=t.forwardRef((function(e,r){var l=n.useRef(null),u=t.useMergeRefs(l,r),i=e.children,c=a(e,["children"]),p=o.Children.count(i),f=n.useContext(s),d=f.state,m=f.dispatch,h=d.input;n.useEffect((function(){m({type:v.SetRef,payload:l})}),[]),n.useEffect((function(){var e=function(e){var t=[];return o.Children.map(e,(function(e){var n;if(S(e,"AutoCompleteItem"))t.push(I(e));else{if(S(e,"AutoCompleteGroup"))return null==(n=e.props.children)?void 0:n.map((function(e){S(e,"AutoCompleteItem")&&t.push(I(e))}));S(e,"AutoCompleteFixedItem")&&t.push(I(e))}})),t}(i);m({type:y.SetAll,payload:e})}),[p]);var g=function(e){var t=n.useState({width:1,height:2}),r=t[0],l=t[1];return o.useEffect((function(){if(null!=e&&e.current){var t=e.current.getBoundingClientRect(),n=t.height;l({width:Math.round(t.width),height:Math.round(n)})}}),[e]),r}(h.ref);return o.createElement(t.PopoverContent,Object.assign({tabIndex:0},D,{ref:u,w:g.width,_focus:{boxShadow:"none"}},c),o.Children.map(i,(function(e){return function(e,t){switch(e.type.displayName){case"AutoCompleteItem":return E(e);case"AutoCompleteGroup":return function(e,t){if(S(e,"AutoCompleteGroup")){var n=e.props.children.reduce((function(e,t){return e.push(S(t,"AutoCompleteItem")?E(t):t),e}),[]);return e.props.children.every((function(e){return n=e,!t.item.filtered.some((function(e){return e.key===n.key}));var n}))?null:o.cloneElement(e,{children:n})}return e}(e,t);case"AutoCompleteFixedItem":return E(e);default:return e}}(e,d)})),o.createElement(R,null),o.createElement(T,{onClick:function(){C(d,m)}}))}));j.displayName="AutoCompleteList";var D={mt:"4",py:"4",w:"full",opacity:"0",bg:"#232934",rounded:"md",maxH:"400px",border:"none",shadow:"base",pos:"absolute",zIndex:"popover",overflowY:"auto",_light:{bg:"#ffffff"}},K=t.forwardRef((function(e,l){var u=n.useRef(null),i=t.useMergeRefs(l,u),c=e.optionKey,p=void 0===c?"":c,f=e._focus,d=e.onMouseOver,v=e.onItemSelect,m=e.onClick,h=a(e,["optionKey","_focus","onMouseOver","onItemSelect","onClick"]),S=n.useContext(s),g=S.state.item,E=g.filtered,I=g.active,C=S.dispatch;n.useEffect((function(){C({type:y.AddFixedRef,payload:{key:p,ref:u}})}),[u]);var O=E[I],x=(null==O?void 0:O.key)===p,b=function(e){r.runIfFn(v,e)};return n.useImperativeHandle(u,(function(){return{onKeyboardSelect:function(){b("keyboard")}}})),o.createElement(t.Flex,Object.assign({onMouseOver:function(e){r.runIfFn(d,e),C({type:y.SetWithKey,payload:p})},onClick:function(e){r.runIfFn(m,e),b("click")}},k,x&&(f||_),{ref:i},h))}));K.displayName="AutoCompleteFixedItem";var z=t.forwardRef((function(e,r){var l=e.title,u=e.titleStyles,i=e.children,c=e.showDivider,p=e.dividerColor,f=a(e,["title","titleStyles","children","showDivider","dividerColor"]),d=function(e,t){return null==e?void 0:e.some((function(e){var n;return e.key===(null==(n=t.item.filtered[0])?void 0:n.key)}))}(i,n.useContext(s).state);return o.createElement("div",{ref:r},c&&!d&&o.createElement(t.Flex,Object.assign({},B,{borderColor:p||"inherit"})),o.createElement(t.Stack,Object.assign({spacing:"1"},f),l&&o.createElement(t.Text,Object.assign({},H,u),l),o.createElement(t.Box,null,i)))}));z.displayName="AutoCompleteGroup";var B={border:"0",my:"0.5rem",opacity:"0.6",borderBottom:"solid 1px"},H={ml:"5",mt:"0.5rem",fontSize:"xs",letterSpacing:"wider",fontWeight:"extrabold",textTransform:"uppercase"};exports.AutoComplete=b,exports.AutoCompleteFixedItem=K,exports.AutoCompleteGroup=z,exports.AutoCompleteInput=w,exports.AutoCompleteItem=A,exports.AutoCompleteList=j,exports.itemActiveStyles=_,exports.itemBaseStyles=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@chakra-ui/react"),n=require("react"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,o=require("@chakra-ui/utils"),l=require("@chakra-ui/react-utils"),i=require("@chakra-ui/system"),u=require("@chakra-ui/layout");function a(){return(a=Object.assign||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 c(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(o[n]=e[n]);return o}var s,p=l.createContext({name:"AutoCompleteContext"}),f=p[0],d=p[1];!function(e){e.Set="SET_INPUT_VALUE",e.SetRef="SET_INPUT_REF"}(s||(s={}));var v,m=function(e,t){switch(t.type){case s.Set:return a({},e,{value:t.payload});case s.SetRef:return a({},e,{ref:t.payload});default:return e}};!function(e){e.Set="SET_AUTOCOMPLETE_VALUE"}(v||(v={}));var y,h=function(e,t){switch(t.type){case v.Set:return a({},e,{value:t.payload});default:return e}};!function(e){e.Show="SHOW_LIST",e.Hide="HIDE_LIST",e.SetRef="SET_LIST_REF"}(y||(y={}));var S,g=function(e,t){switch(t.type){case y.Show:return a({},e,{visible:!0});case y.Hide:return a({},e,{visible:!1});case y.SetRef:return a({},e,{ref:t.payload});default:return e}},E=function(e,t){return e.type.displayName===t&&(e.key||!0)},I=function(e){return e&&e},O=function(e){return r.cloneElement(e,{optionKey:e.key||e.props.children.toString()})},C=function(e){return{key:e.key||e.props.children.toString(),value:e.props.value||""}},b=function(e,t){var n=e.autocomplete,r=n.value,o=n.freeSolo,l=e.input,i=l.value,u=l.ref;t({type:y.Hide}),i===r||o||(t({type:s.Set,payload:r}),I(null==u?void 0:u.current).value=r)},F=t.forwardRef((function(e,l){var i,u=e.children,a=e.onChange,p=c(e,["children","onChange"]),f=d(),m=f.state,y=f.dispatch,h=m.autocomplete.value,S=m.list.visible,g=m.input,E=g.value,I=g.ref;n.useEffect((function(){o.runIfFn(a,h)}),[h]);var O=function(){return b(m,y)},C={isOpen:S,onClose:O,inputIsEmpty:!(E.length||null!=I&&null!=(i=I.current)&&i.value.length),resetInput:function(){null!=I&&I.current&&(I.current.value="",I.current.focus()),y({type:s.Set,payload:""}),y({type:v.Set,payload:""})}};return r.createElement(t.Popover,{autoFocus:!1,closeOnBlur:!0,placement:"bottom",isOpen:S,onClose:O},r.createElement(t.Box,Object.assign({ref:l},p),o.runIfFn(u,C)))}));!function(e){e.Set="SET_ACTIVE_ITEM",e.SetAll="SET_ITEMS",e.SetWithKey="SET_ACTIVE_ITEM_WITH_KEY",e.SetFiltered="SET_FILTERED_ITEMS",e.ResetActive="RESET_ACTIVE_ITEM",e.AddFixedRef="ADD_FIXED_ITEM_REF"}(S||(S={}));var x=function(e,t){var n;switch(t.type){case S.Set:return a({},e,{active:t.payload});case S.SetAll:return a({},e,{list:t.payload});case S.SetWithKey:var r=e.filtered.findIndex((function(e){return e.key===t.payload}));return a({},e,{active:r});case S.SetFiltered:return a({},e,{filtered:t.payload});case S.ResetActive:return a({},e,{active:t.payload?e.filtered.length-1:0});case S.AddFixedRef:return a({},e,{fixed:a({},e.fixed,(n={},n[t.payload.key]=t.payload.ref,n))});default:return e}},w=t.forwardRef((function(e,t){var o=e.emptyState,l=void 0===o||o,i=e.rollNavigation,u=e.focusInputOnSelect,a=e.freeSolo,s=e.creatable,p=e.selectOnFocus,d=e.openOnFocus,v=e.emphasize,y=e.defaultIsOpen,S=e.onSelectOption,E=e.onOptionHighlight,I=e.suggestWhenEmpty,O=e.closeOnselect,C=void 0===O||O,b=e.closeOnBlur,w=void 0===b||b,A=c(e,["emptyState","rollNavigation","focusInputOnSelect","freeSolo","creatable","selectOnFocus","openOnFocus","emphasize","defaultIsOpen","onSelectOption","onOptionHighlight","suggestWhenEmpty","closeOnselect","closeOnBlur"]),k=n.useReducer((function(e,t){var n=e.input,r=e.item,o=e.list;return{autocomplete:h(e.autocomplete,t),input:m(n,t),item:x(r,t),list:g(o,t)}}),{autocomplete:{value:"",emptyState:l,rollNavigation:i,focusInputOnSelect:u,freeSolo:a,creatable:s,selectOnFocus:p,openOnFocus:d,emphasize:v,onSelectOption:S,onOptionHighlight:E,suggestWhenEmpty:I,closeOnselect:C,closeOnBlur:w},input:{value:"",ref:void 0},item:{active:-1,list:[],filtered:[],fixed:{}},list:{visible:y||!1,ref:void 0}}),_=k[0],R=k[1],T=n.useMemo((function(){return{state:_,dispatch:R}}),[_,R]);return function(e){var t=e.freeSolo,r=e.creatable;n.useEffect((function(){if(r&&!t)throw new Error("AutoCOmplete: `creatable` can only be applied in freeSolo mode, please add the freeSolo Prop")}),[])}(e),r.createElement(f,{value:T},r.createElement(F,Object.assign({ref:t},A)))})),A=function(e,t,n,r){var l=e.autocomplete,i=l.onSelectOption,u=l.focusInputOnSelect,a=l.closeOnselect,c=e.item,p=e.input.ref,f=c.filtered[c.active];(o.isDefined(i)&&!1!==o.runIfFn(i,{optionValue:f.value,selectMethod:n,isNewInput:"newInput"===f.key})||!o.isDefined(i))&&(I(null==p?void 0:p.current).value=f.value,t({type:s.Set,payload:f.value}),t({type:v.Set,payload:f.value}),a&&b(e,t),o.runIfFn(r)),null!=p&&p.current&&u&&p.current.focus()},k=t.forwardRef((function(e,l){var i=e.onChange,u=e.onKeyDown,a=e.onFocus,p=e.onBlur,f=e.onClick,m=e.initialFilter,h=c(e,["onChange","onKeyDown","onFocus","onBlur","onClick","initialFilter"]),g=n.useRef(null),E=t.useMergeRefs(l,g),I=d(),O=I.state,C=I.dispatch,F=O.autocomplete,x=O.list,w=x.ref,k=x.visible,_=F.freeSolo,R=F.suggestWhenEmpty,T=F.closeOnBlur,M=F.closeOnselect,j=O.item.filtered.length<1&&!F.emptyState,D=function(){return b(O,C)};return function(e){var t=e.initialFilter,r=void 0===t||t,o=d(),l=o.state,i=l.autocomplete.creatable,u=l.input,a=o.dispatch,c=u.value,p=l.item.list,f=p.filter((function(e){return e.value.toLowerCase().indexOf(c.toLowerCase())>-1||0===e.value.trim().length}));n.useEffect((function(){var e;if(null!=(e=u.ref)&&e.current){var t,n,o=null==(t=u.ref)||null==(n=t.current)?void 0:n.value;c.trim().length<1&&o.trim().length>0&&r&&a({type:s.Set,payload:o})}}),[u.ref]),n.useEffect((function(){var e=i?[].concat(f,[i&&{key:"newInput",value:c}]):f;a({type:S.SetFiltered,payload:e}),a({type:S.ResetActive,payload:!1})}),[c,p])}({initialFilter:m}),n.useEffect((function(){C({type:s.SetRef,payload:g})}),[]),r.createElement(r.Fragment,null,r.createElement(t.Input,Object.assign({onChange:function(e){o.runIfFn(i,e);var t=e.target.value;C({type:s.Set,payload:t}),_&&C({type:v.Set,payload:t}),j||((null==t?void 0:t.length)<1?R||D():C({type:y.Show}))},onKeyDown:function(e){o.runIfFn(u,e),function(e,t,n){var r=t.autocomplete.rollNavigation,o=t.item;if("Enter"===e.key){var l,i=o.filtered[o.active];0===i.value.trim().length?null==(l=o.fixed[i.key].current)||l.onKeyboardSelect():A(t,n,"keyboard")}else if("ArrowUp"===e.key){if(0===o.active)return r&&n({type:S.ResetActive,payload:!0}),void e.preventDefault();n({type:S.Set,payload:o.active-1}),e.preventDefault()}else if("ArrowDown"===e.key){if(o.active===o.filtered.length-1)return void(r&&n({type:S.ResetActive,payload:!1}));n({type:S.Set,payload:o.active+1})}else"Home"===e.key?(n({type:S.ResetActive,payload:!1}),e.preventDefault()):"End"===e.key?(n({type:S.ResetActive,payload:!0}),e.preventDefault()):"Escape"===e.key&&(b(t,n),e.preventDefault())}(e,O,C)},onFocus:function(e){o.runIfFn(a,e),F.selectOnFocus&&e.target.select(),F.openOnFocus&&C({type:y.Show}),e.relatedTarget===(null==w?void 0:w.current)&&M&&k&&D()},onBlur:function(e){o.runIfFn(p,e),e.relatedTarget!==(null==w?void 0:w.current)&&T&&D()},onClick:function(e){o.runIfFn(f,e)},ref:E},h)))})),_=t.forwardRef((function(e,l){var i=e.children,u=e.value,s=e.optionKey,p=void 0===s?"":s,f=e._hover,v=e._focus,m=e.onMouseOver,y=e.onClick,h=e.sx,g=c(e,["children","value","optionKey","_hover","_focus","onMouseOver","onClick","sx"]),E=d(),I=E.state,O=E.dispatch,C=I.autocomplete.emphasize,b=I.input.value,F=I.item,x=F.filtered[F.active],w=(null==x?void 0:x.key)===p;!function(e){var t=d().state.autocomplete.onOptionHighlight;n.useEffect((function(){o.runIfFn(t,null==e?void 0:e.value)}),[e])}(x);var k=F.filtered.some((function(e){return e.key===p})),_=function(e){var t=e.emphasize,n=e.inputValue,o=e.children,l=e.itemValue,i=("string"==typeof o?o.toString():l).replace(new RegExp(n,"gi"),(function(e){return'<span class="emphasizedItem">'+e+"</span>"})),u=r.createElement("span",{dangerouslySetInnerHTML:{__html:i}});return{itemChild:t?u:o,emphasizeStyles:"object"==typeof t?t:{fontWeight:"extrabold"}}}({emphasize:C,inputValue:b,optionKey:p,children:i,itemValue:u}),M=_.itemChild,j="newInput"===p;return k?r.createElement(t.Flex,Object.assign({onMouseOver:function(e){o.runIfFn(m,e),O({type:S.SetWithKey,payload:p})},onClick:function(e){A(I,O,"click",(function(){return o.runIfFn(y,e)}))}},R,{_hover:f},w&&(v||T),{sx:a({},h,{".emphasizedItem":_.emphasizeStyles}),ref:l},g),j?i:M):null}));_.displayName="AutoCompleteItem";var R={mx:"2",px:"2",py:"2",rounded:"md",cursor:"pointer"},T={bg:"whiteAlpha.100",_light:{bg:"gray.200"}},M=function(){var e=d().state,t=e.autocomplete,n=t.creatable,l=t.emphasize,u=e.input.value,a=e.item.list.some((function(e){return e.value===u})),c="object"==typeof l?l:{fontWeight:"extrabold"},s=function(e){return r.createElement(i.chakra.span,Object.assign({sx:c},e),"  ",e.children)};return r.createElement(r.Fragment,null,!!u.trim().length&&n&&!a&&r.createElement(_,{value:u,optionKey:"newInput"},"boolean"==typeof n?r.createElement(r.Fragment,null,"Add",r.createElement(s,null,'"',u,'"')):o.runIfFn(n,{newInput:u,Emphasize:s})))},j=function(e){var t=d().state,n=t.item.filtered,o=t.autocomplete.emptyState;return r.createElement(u.Box,Object.assign({},e),n.length<1&&o&&("boolean"==typeof o?r.createElement(u.Flex,Object.assign({},D),"No options found!"):o))},D={fontSize:"sm",align:"center",justify:"center",fontWeight:"bold",fontStyle:"italic"},K=t.forwardRef((function(e,o){var l=n.useRef(null),i=t.useMergeRefs(l,o),u=e.children,a=c(e,["children"]),s=r.Children.count(u),p=d(),f=p.state,v=p.dispatch,m=f.input;n.useEffect((function(){v({type:y.SetRef,payload:l})}),[]),n.useEffect((function(){var e=function(e){var t=[];return r.Children.map(e,(function(e){var n;if(E(e,"AutoCompleteItem"))t.push(C(e));else{if(E(e,"AutoCompleteGroup"))return null==(n=e.props.children)?void 0:n.map((function(e){E(e,"AutoCompleteItem")&&t.push(C(e))}));E(e,"AutoCompleteFixedItem")&&t.push(C(e))}})),t}(u);v({type:S.SetAll,payload:e})}),[s]);var h=function(e){var t=n.useState({width:1,height:2}),o=t[0],l=t[1];return r.useEffect((function(){if(null!=e&&e.current){var t=e.current.getBoundingClientRect(),n=t.height;l({width:Math.round(t.width),height:Math.round(n)})}}),[e]),o}(m.ref);return r.createElement(t.PopoverContent,Object.assign({tabIndex:0},z,{ref:i,w:h.width,_focus:{boxShadow:"none"}},a),r.Children.map(u,(function(e){return function(e,t){switch(e.type.displayName){case"AutoCompleteItem":return O(e);case"AutoCompleteGroup":return function(e,t){if(E(e,"AutoCompleteGroup")){var n=e.props.children.reduce((function(e,t){return e.push(E(t,"AutoCompleteItem")?O(t):t),e}),[]);return e.props.children.every((function(e){return n=e,!t.item.filtered.some((function(e){return e.key===n.key}));var n}))?null:r.cloneElement(e,{children:n})}return e}(e,t);case"AutoCompleteFixedItem":return O(e);default:return e}}(e,f)})),r.createElement(M,null),r.createElement(j,{onClick:function(){b(f,v)}}))}));K.displayName="AutoCompleteList";var z={mt:"4",py:"4",w:"full",opacity:"0",bg:"#232934",rounded:"md",maxH:"400px",border:"none",shadow:"base",pos:"absolute",zIndex:"popover",overflowY:"auto",_light:{bg:"#ffffff"}},B=t.forwardRef((function(e,l){var i=n.useRef(null),u=t.useMergeRefs(l,i),a=e.optionKey,s=void 0===a?"":a,p=e._focus,f=e.onMouseOver,v=e.onItemSelect,m=e.onClick,y=c(e,["optionKey","_focus","onMouseOver","onItemSelect","onClick"]),h=d(),g=h.state.item,E=g.filtered,I=g.active,O=h.dispatch;n.useEffect((function(){O({type:S.AddFixedRef,payload:{key:s,ref:i}})}),[i]);var C=E[I],b=(null==C?void 0:C.key)===s,F=function(e){o.runIfFn(v,e)};return n.useImperativeHandle(i,(function(){return{onKeyboardSelect:function(){F("keyboard")}}})),r.createElement(t.Flex,Object.assign({onMouseOver:function(e){o.runIfFn(f,e),O({type:S.SetWithKey,payload:s})},onClick:function(e){o.runIfFn(m,e),F("click")}},R,b&&(p||T),{ref:u},y))}));B.displayName="AutoCompleteFixedItem";var H=t.forwardRef((function(e,n){var o=e.title,l=e.titleStyles,i=e.children,u=e.showDivider,a=e.dividerColor,s=c(e,["title","titleStyles","children","showDivider","dividerColor"]),p=function(e,t){return null==e?void 0:e.some((function(e){var n;return e.key===(null==(n=t.item.filtered[0])?void 0:n.key)}))}(i,d().state);return r.createElement("div",{ref:n},u&&!p&&r.createElement(t.Flex,Object.assign({},N,{borderColor:a||"inherit"})),r.createElement(t.Stack,Object.assign({spacing:"1"},s),o&&r.createElement(t.Text,Object.assign({},W,l),o),r.createElement(t.Box,null,i)))}));H.displayName="AutoCompleteGroup";var N={border:"0",my:"0.5rem",opacity:"0.6",borderBottom:"solid 1px"},W={ml:"5",mt:"0.5rem",fontSize:"xs",letterSpacing:"wider",fontWeight:"extrabold",textTransform:"uppercase"};exports.AutoComplete=w,exports.AutoCompleteFixedItem=B,exports.AutoCompleteGroup=H,exports.AutoCompleteInput=k,exports.AutoCompleteItem=_,exports.AutoCompleteList=K,exports.itemActiveStyles=T,exports.itemBaseStyles=R;
 //# sourceMappingURL=chakra-autocomplete.cjs.production.min.js.map

dist/chakra-autocomplete.esm.js

 import { forwardRef, Popover, Box, useMergeRefs, Input, Flex, PopoverContent, Stack, Text } from '@chakra-ui/react';
-import React, { createContext, useState, useContext, useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import React, { useState, useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import { runIfFn, isDefined } from '@chakra-ui/utils';
+import { createContext } from '@chakra-ui/react-utils';
 import { chakra } from '@chakra-ui/system';
@@ -40,8 +41,8 @@ import { Box as Box$1, Flex as Flex$1 } from '@chakra-ui/layout';
 
-var StoreContext = /*#__PURE__*/createContext({});
+var _createContext = /*#__PURE__*/createContext({
+  name: 'AutoCompleteContext'
+}),
+    AutoCompleteProvider = _createContext[0],
+    useAutoCompleteContext = _createContext[1];
 
-var StoreProvider = function StoreProvider(props) {
-  return React.createElement(StoreContext.Provider, Object.assign({}, props));
-};
-
 var InputAction;
@@ -237,5 +238,5 @@
 
-  var _useContext = useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -429,3 +430,3 @@ var autoCompleteValue = state.autocomplete.value,
   useParseProps(props);
-  return React.createElement(StoreProvider, {
+  return React.createElement(AutoCompleteProvider, {
     value: providerValue
@@ -471,14 +472,17 @@ }, React.createElement(AutoCompleteBody, Object.assign({
 
-var useOptionsFilter = function useOptionsFilter() {
-  var _useContext = useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      creatable = _useContext$state.autocomplete.creatable,
-      input = _useContext$state.input,
-      item = _useContext$state.item,
-      dispatch = _useContext.dispatch;
+var useOptionsFilter = function useOptionsFilter(props) {
+  var _props$initialFilter = props.initialFilter,
+      initialFilter = _props$initialFilter === void 0 ? true : _props$initialFilter;
 
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      creatable = _useAutoCompleteConte2.autocomplete.creatable,
+      input = _useAutoCompleteConte2.input,
+      item = _useAutoCompleteConte2.item,
+      dispatch = _useAutoCompleteConte.dispatch;
+
   var inputValue = input.value;
   var options = item.list;
   var filteredItems = options.filter(function (i) {
-    return i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
+    return i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 || i.value.trim().length === 0;
   }); //? Update input state if there's a defaultValue for input
@@ -495,3 +499,3 @@
       if (inputValue.trim().length < 1 && rawInputValue.trim().length > 0) {
-        dispatch({
+        if (initialFilter) dispatch({
           type: InputAction.Set,
@@ -583,3 +587,4 @@ payload: rawInputValue
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, ["onChange", "onKeyDown", "onFocus", "onBlur", "onClick"]);
+      initialFilter = props.initialFilter,
+      rest = _objectWithoutPropertiesLoose(props, ["onChange", "onKeyDown", "onFocus", "onBlur", "onClick", "initialFilter"]);
 
@@ -589,5 +594,5 @@ var internalRef = useRef(null);
 
-  var _useContext = useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -610,3 +615,5 @@ var autocomplete = state.autocomplete,
 
-  useOptionsFilter();
+  useOptionsFilter({
+    initialFilter: initialFilter
+  });
   useEffect(function () {
@@ -678,4 +685,4 @@ dispatch({
 var useOnOptionHighlight = function useOnOptionHighlight(activeItem) {
-  var _useContext = useContext(StoreContext),
-      onOptionHighlight = _useContext.state.autocomplete.onOptionHighlight;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      onOptionHighlight = _useAutoCompleteConte.state.autocomplete.onOptionHighlight;
 
@@ -723,5 +730,5 @@ useEffect(function () {
 
-  var _useContext = useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -795,9 +802,9 @@ var emphasize = state.autocomplete.emphasize,
 var CreateInput = function CreateInput() {
-  var _useContext = useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      item = _useContext$state.item,
-      _useContext$state$aut = _useContext$state.autocomplete,
-      creatable = _useContext$state$aut.creatable,
-      emphasize = _useContext$state$aut.emphasize,
-      inputValue = _useContext$state.input.value;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      item = _useAutoCompleteConte2.item,
+      _useAutoCompleteConte3 = _useAutoCompleteConte2.autocomplete,
+      creatable = _useAutoCompleteConte3.creatable,
+      emphasize = _useAutoCompleteConte3.emphasize,
+      inputValue = _useAutoCompleteConte2.input.value;
 
@@ -827,6 +834,6 @@ var itemExists = item.list.some(function (i) {
 var EmptyState = function EmptyState(props) {
-  var _useContext = useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      filtered = _useContext$state.item.filtered,
-      emptyState = _useContext$state.autocomplete.emptyState;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state,
+      filtered = _useAutoCompleteConte2.item.filtered,
+      emptyState = _useAutoCompleteConte2.autocomplete.emptyState;
 
@@ -852,5 +859,5 @@ return React.createElement(Box$1, Object.assign({}, props), filtered.length < 1 && emptyState && (typeof emptyState === 'boolean' ? React.createElement(Flex$1, Object.assign({}, emptyStyles), "No options found!") : emptyState));
 
-  var _useContext = useContext(StoreContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -922,7 +929,7 @@ var input = state.input;
 
-  var _useContext = useContext(StoreContext),
-      _useContext$state$ite = _useContext.state.item,
-      filterdItems = _useContext$state$ite.filtered,
-      activeItemIndex = _useContext$state$ite.active,
-      dispatch = _useContext.dispatch;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      _useAutoCompleteConte2 = _useAutoCompleteConte.state.item,
+      filterdItems = _useAutoCompleteConte2.filtered,
+      activeItemIndex = _useAutoCompleteConte2.active,
+      dispatch = _useAutoCompleteConte.dispatch;
 
@@ -990,4 +997,4 @@ useEffect(function () {
 
-  var _useContext = useContext(StoreContext),
-      state = _useContext.state;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+      state = _useAutoCompleteConte.state;
 
@@ -994,0 +1001,0 @@ var noDivider = hasFirstOption(children, state);

dist/helpers/input.d.ts

 import React from 'react';
+import { AutoCompleteInputProps } from '../auto-complete-input';
 import { State, StoreDispatch } from '../store';
-export declare const useOptionsFilter: () => void;
+export declare const useOptionsFilter: (props: AutoCompleteInputProps) => void;
 export declare const handleNavigation: (e: React.KeyboardEvent<HTMLInputElement>, state: State, dispatch: StoreDispatch) => void;

dist/store/index.d.ts

@@ -1,3 +0,3 @@
-import { BoxProps } from '@chakra-ui/layout';
-import React, { Dispatch, ProviderProps } from 'react';
+import { BoxProps } from '@chakra-ui/react';
+import React, { Dispatch } from 'react';
 import { AutoComplete } from '../auto-complete-provider';
@@ -41,4 +41,3 @@ import { AutoCompleteActions } from './reducers/autocomplete';
 };
-export declare const StoreContext: React.Context<ContextValue>;
-declare const StoreProvider: (props: ProviderProps<ContextValue>) => JSX.Element;
-export default StoreProvider;
+export declare const AutoCompleteProvider: React.Provider<ContextValue>, useAutoCompleteContext: () => ContextValue;
+export default AutoCompleteProvider;

package.json

 {
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "MIT",
@@ -56,6 +56,6 @@ "main": "dist/index.js",
     "@size-limit/preset-small-lib": "^4.10.2",
-    "@types/react": "^17.0.8",
+    "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.5",
     "husky": "^6.0.0",
-    "react": "^17.0.2",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0",
     "react-dom": "^17.0.2",
@@ -62,0 +62,0 @@ "size-limit": "^4.10.2",

README.md

@@ -481,2 +481,24 @@ <div align="center">
 
+<table>
+<thead>
+  <tr>
+    <th>Prop<br></th>
+    <th>Type</th>
+    <th>Description</th>
+    <th>Required</th>
+    <th>Default</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>initialFilter</td>
+    <td> boolean </td>
+    <td>determines if the options are filtered by default, when a `defaultValue` is provided to the input.</td>
+    <td>No<br></td>
+    <td>true</td>
+  </tr>
+ 
+</tbody>
+</table>
+
 ### **AutoCompleteList**
@@ -493,2 +515,3 @@
 **AutoCompleteGroup** composes [**Box**](https://chakra-ui.com/docs/layout/box) so you can pass all Box props to change its style.
+
 <Table>
@@ -556,3 +579,2 @@ <thead>
 
-
 ### **AutoCompleteItem**
@@ -632,3 +654,3 @@
     <td>onItemSelect</td>
-    <td> 
+    <td>
 
@@ -635,0 +657,0 @@ ```ts

src/helpers/autocomplete-props/onOptionHighlight.ts

@@ -1,4 +0,4 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { runIfFn } from '@chakra-ui/utils';
-import { StoreContext } from '../../store';
+import { useAutoCompleteContext } from '../../store';
 import { Item } from '../../store/reducers/item';
@@ -11,3 +11,3 @@
     },
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
   useEffect(() => {
@@ -14,0 +14,0 @@ runIfFn(onOptionHighlight, activeItem?.value);

src/helpers/input.ts

@@ -1,3 +0,4 @@
-import React, { useContext, useEffect } from 'react';
-import { State, StoreContext, StoreDispatch } from '../store';
+import React, { useEffect } from 'react';
+import { AutoCompleteInputProps } from '../auto-complete-input';
+import { State, useAutoCompleteContext, StoreDispatch } from '../store';
 import { InputAction } from '../store/reducers/input';
@@ -8,3 +9,5 @@ import { ItemAction } from '../store/reducers/item';
 
-export const useOptionsFilter = () => {
+export const useOptionsFilter = (props: AutoCompleteInputProps) => {
+  const { initialFilter = true } = props;
+
   const {
@@ -17,7 +20,9 @@ state: {
     dispatch,
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
   const inputValue = input.value;
   const options = item.list;
   const filteredItems = options.filter(
-    i => i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+    i =>
+      i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
+      i.value.trim().length === 0
   );
@@ -30,3 +35,4 @@
       if (inputValue.trim().length < 1 && rawInputValue.trim().length > 0) {
-        dispatch({ type: InputAction.Set, payload: rawInputValue });
+        if (initialFilter)
+          dispatch({ type: InputAction.Set, payload: rawInputValue });
       }
@@ -33,0 +39,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

Improved metrics

Total package byte prevSize

323191

increased by1.09%

Lines of code

3185

increased by1.11%

Number of lines in readme file

687

increased by3.31%

No dependency changes