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

Comparing version 3.1.0 to 3.2.0

dist/auto-complete-group.d.ts

 import { StackProps, TextProps } from '@chakra-ui/react';
-interface AutoCompleteGroup extends StackProps {
+export interface AutoCompleteGroupProps extends StackProps {
     children?: any;
@@ -9,3 +9,2 @@ title?: string;
 }
-export declare const AutoCompleteGroup: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteGroup>;
-export {};
+export declare const AutoCompleteGroup: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteGroupProps>;

dist/auto-complete-input.d.ts

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

dist/auto-complete-item.d.ts

 import { CSSObject, FlexProps } from '@chakra-ui/react';
-interface AutoCompleteItem extends FlexProps {
+export interface AutoCompleteItemProps extends FlexProps {
     value: string;
@@ -7,3 +7,4 @@ _focus?: CSSObject | any;
 }
-export declare const AutoCompleteItem: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteItem>;
-export {};
+export declare const AutoCompleteItem: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteItemProps>;
+export declare const itemBaseStyles: FlexProps;
+export declare const itemActiveStyles: FlexProps;

dist/auto-complete-list.d.ts

 import { PopoverContentProps } from '@chakra-ui/react';
-interface AutoCompleteList extends PopoverContentProps {
+export interface AutoCompleteListProps extends PopoverContentProps {
 }
-export declare const AutoCompleteList: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteList>;
-export {};
+export declare const AutoCompleteList: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteListProps>;

dist/auto-complete-provider.d.ts

@@ -30,2 +30,3 @@ import { BoxProps, CSSObject } from '@chakra-ui/react';
 }
+export declare type AutoCompleteProps = AutoComplete;
 export declare const AutoComplete: import("@chakra-ui/react").ComponentWithAs<"div", AutoComplete>;

dist/chakra-autocomplete.cjs.development.js

@@ -133,2 +133,19 @@ 'use strict';
 
+var handleListChild = function handleListChild(child, state) {
+  var type = child.type.displayName;
+
+  switch (type) {
+    case 'AutoCompleteItem':
+      return assignChildKey(child);
+
+    case 'AutoCompleteGroup':
+      return handleItemGroup(child, state);
+
+    case 'AutoCompleteFixedItem':
+      return assignChildKey(child);
+
+    default:
+      return child;
+  }
+};
 var handleItemGroup = function handleItemGroup(group, state) {
@@ -144,5 +161,3 @@ var isValidItem = function isValidItem(child) {
     var childrenWithKeys = children.reduce(function (acc, child) {
-      acc.push(isChild(child, 'AutoCompleteItem') ? React__default.cloneElement(child, {
-        optionKey: child.key
-      }) : child);
+      acc.push(isChild(child, 'AutoCompleteItem') ? assignChildKey(child) : child);
       return acc;
@@ -157,2 +172,7 @@ }, []);
 };
+var assignChildKey = function assignChildKey(child) {
+  return React__default.cloneElement(child, {
+    optionKey: child.key || child.props.children.toString()
+  });
+};
 var getItemKeys = function getItemKeys(children) {
@@ -163,5 +183,5 @@ var items = [];
 
-    if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));else return (_child$props$children = child.props.children) == null ? void 0 : _child$props$children.map(function (option) {
+    if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));else if (isChild(child, 'AutoCompleteGroup')) return (_child$props$children = child.props.children) == null ? void 0 : _child$props$children.map(function (option) {
       if (isChild(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
-    });
+    });else if (isChild(child, 'AutoCompleteFixedItem')) items.push(getChildProps(child));
   });
@@ -173,4 +193,4 @@ return items;
   return {
-    key: child.key,
-    value: child.props.value
+    key: child.key || child.props.children.toString(),
+    value: child.props.value || ''
   };
@@ -297,5 +317,8 @@ };
   ItemAction["ResetActive"] = "RESET_ACTIVE_ITEM";
+  ItemAction["AddFixedRef"] = "ADD_FIXED_ITEM_REF";
 })(ItemAction || (ItemAction = {}));
 
 var itemReducer = function itemReducer(state, action) {
+  var _extends2;
+
   switch (action.type) {
@@ -330,2 +353,7 @@ case ItemAction.Set:
 
+    case ItemAction.AddFixedRef:
+      return _extends({}, state, {
+        fixed: _extends({}, state.fixed, (_extends2 = {}, _extends2[action.payload.key] = action.payload.ref, _extends2))
+      });
+
     default:
@@ -380,3 +408,4 @@ return state;
       list: [],
-      filtered: []
+      filtered: [],
+      fixed: {}
     },
@@ -424,2 +453,3 @@ list: {
       focusInputOnSelect = _state$autocomplete.focusInputOnSelect,
+      closeOnselect = _state$autocomplete.closeOnselect,
       item = state.item,
@@ -447,3 +477,3 @@ inputRef = state.input.ref;
     });
-    closeList(state, dispatch);
+    if (closeOnselect) closeList(state, dispatch);
     utils.runIfFn(cb);
@@ -505,3 +535,10 @@ }
   if (e.key === 'Enter') {
-    runOnSelect(state, dispatch, 'keyboard');
+    var activeItem = item.filtered[item.active];
+
+    if (activeItem.value.trim().length === 0) {
+      var _activeItemRef$curren;
+
+      var activeItemRef = item.fixed[activeItem.key];
+      (_activeItemRef$curren = activeItemRef.current) == null ? void 0 : _activeItemRef$curren.onKeyboardSelect();
+    } else runOnSelect(state, dispatch, 'keyboard');
   } else if (e.key === 'ArrowUp') {
@@ -686,3 +723,4 @@ if (item.active === 0) {
       itemValue = props.value,
-      optionKey = props.optionKey,
+      _props$optionKey = props.optionKey,
+      optionKey = _props$optionKey === void 0 ? '' : _props$optionKey,
       _hover = props._hover,
@@ -713,3 +751,3 @@ _focus = props._focus,
       type: ItemAction.SetWithKey,
-      payload: optionKey || ''
+      payload: optionKey
     });
@@ -738,5 +776,5 @@ };
     onClick: handleOnClick
-  }, baseStyles, {
+  }, itemBaseStyles, {
     _hover: _hover
-  }, isActiveItem && (_focus || activeStyles), {
+  }, isActiveItem && (_focus || itemActiveStyles), {
     sx: _extends({}, sx, {
@@ -749,3 +787,3 @@ '.emphasizedItem': emphasizeStyles
 AutoCompleteItem.displayName = 'AutoCompleteItem';
-var baseStyles = {
+var itemBaseStyles = {
   mx: '2',
@@ -757,3 +795,3 @@ px: '2',
 };
-var activeStyles = {
+var itemActiveStyles = {
   bg: 'whiteAlpha.100',
@@ -849,3 +887,3 @@ _light: {
     tabIndex: 0
-  }, baseStyles$1, {
+  }, baseStyles, {
     ref: refs,
@@ -857,5 +895,3 @@ w: width,
   }, rest), React__default.Children.map(children, function (child) {
-    return isChild(child, 'AutoCompleteItem') ? React__default.cloneElement(child, {
-      optionKey: child.key
-    }) : handleItemGroup(child, state);
+    return handleListChild(child, state);
   }), React__default.createElement(CreateInput, null), React__default.createElement(EmptyState, {
@@ -868,3 +904,3 @@ onClick: function onClick() {
 AutoCompleteList.displayName = 'AutoCompleteList';
-var baseStyles$1 = {
+var baseStyles = {
   mt: '4',
@@ -887,2 +923,65 @@ py: '4',
 
+var AutoCompleteFixedItem = /*#__PURE__*/react.forwardRef(function (props, outerRef) {
+  var ref = React.useRef(null);
+  var refs = react.useMergeRefs(outerRef, ref);
+
+  var _props$optionKey = props.optionKey,
+      optionKey = _props$optionKey === void 0 ? '' : _props$optionKey,
+      _focus = props._focus,
+      onMouseOver = props.onMouseOver,
+      onItemSelect = props.onItemSelect,
+      onClick = props.onClick,
+      rest = _objectWithoutPropertiesLoose(props, ["optionKey", "_focus", "onMouseOver", "onItemSelect", "onClick"]);
+
+  var _useContext = React.useContext(StoreContext),
+      _useContext$state$ite = _useContext.state.item,
+      filterdItems = _useContext$state$ite.filtered,
+      activeItemIndex = _useContext$state$ite.active,
+      dispatch = _useContext.dispatch;
+
+  React.useEffect(function () {
+    dispatch({
+      type: ItemAction.AddFixedRef,
+      payload: {
+        key: optionKey,
+        ref: ref
+      }
+    });
+  }, [ref]);
+  var activeItem = filterdItems[activeItemIndex];
+  var isActiveItem = (activeItem == null ? void 0 : activeItem.key) === optionKey;
+
+  var handleMouseOver = function handleMouseOver(e) {
+    utils.runIfFn(onMouseOver, e);
+    dispatch({
+      type: ItemAction.SetWithKey,
+      payload: optionKey
+    });
+  };
+
+  var onItemSelected = function onItemSelected(method) {
+    utils.runIfFn(onItemSelect, method);
+  };
+
+  var handleClick = function handleClick(e) {
+    utils.runIfFn(onClick, e);
+    onItemSelected('click');
+  };
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      onKeyboardSelect: function onKeyboardSelect() {
+        onItemSelected('keyboard');
+      }
+    };
+  });
+  return React__default.createElement(react.Flex, Object.assign({
+    onMouseOver: handleMouseOver,
+    onClick: handleClick
+  }, itemBaseStyles, isActiveItem && (_focus || itemActiveStyles), {
+    ref: refs
+  }, rest));
+});
+AutoCompleteFixedItem.displayName = 'AutoCompleteFixedItem';
+
 var hasFirstOption = function hasFirstOption(children, state) {
@@ -933,2 +1032,3 @@ return children == null ? void 0 : children.some(function (child) {
 exports.AutoComplete = AutoComplete;
+exports.AutoCompleteFixedItem = AutoCompleteFixedItem;
 exports.AutoCompleteGroup = AutoCompleteGroup;
@@ -938,2 +1038,4 @@ exports.AutoCompleteInput = AutoCompleteInput;
 exports.AutoCompleteList = AutoCompleteList;
+exports.itemActiveStyles = itemActiveStyles;
+exports.itemBaseStyles = itemBaseStyles;
 //# sourceMappingURL=chakra-autocomplete.cjs.development.js.map

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"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,o=require("@chakra-ui/utils"),l=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 i(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 c,s=n.createContext({}),p=function(e){return r.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 a({},e,{value:t.payload});case c.SetRef:return a({},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 a({},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 a({},e,{visible:!0});case v.Hide:return a({},e,{visible:!1});case v.SetRef:return a({},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{key:e.key,value:e.props.value}},O=function(e,t){var n=e.autocomplete,r=n.value,o=n.freeSolo,l=e.input,u=l.value,a=l.ref;t({type:v.Hide}),u===r||o||(t({type:c.Set,payload:r}),g(null==a?void 0:a.current).value=r)},I=t.forwardRef((function(e,l){var u,a=e.children,p=e.onChange,d=i(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(){o.runIfFn(p,h)}),[h]);var C=function(){return O(m,y)},b={isOpen:S,onClose:C,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 r.createElement(t.Popover,{autoFocus:!1,closeOnBlur:!0,placement:"bottom",isOpen:S,onClose:C},r.createElement(t.Box,Object.assign({ref:l},d),o.runIfFn(a,b)))}));!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"}(y||(y={}));var C=function(e,t){switch(t.type){case y.Set:return a({},e,{active:t.payload});case y.SetAll:return a({},e,{list:t.payload});case y.SetWithKey:var n=e.filtered.findIndex((function(e){return e.key===t.payload}));return a({},e,{active:n});case y.SetFiltered:return a({},e,{filtered:t.payload});case y.ResetActive:return a({},e,{active:t.payload?e.filtered.length-1:0});default:return e}},b=t.forwardRef((function(e,t){var o=e.emptyState,l=void 0===o||o,u=e.rollNavigation,a=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,O=e.suggestWhenEmpty,b=e.closeOnselect,w=void 0===b||b,x=e.closeOnBlur,F=void 0===x||x,k=i(e,["emptyState","rollNavigation","focusInputOnSelect","freeSolo","creatable","selectOnFocus","openOnFocus","emphasize","defaultIsOpen","onSelectOption","onOptionHighlight","suggestWhenEmpty","closeOnselect","closeOnBlur"]),A=n.useReducer((function(e,t){var n=e.input,r=e.item,o=e.list;return{autocomplete:m(e.autocomplete,t),input:d(n,t),item:C(r,t),list:h(o,t)}}),{autocomplete:{value:"",emptyState:l,rollNavigation:u,focusInputOnSelect:a,freeSolo:c,creatable:s,selectOnFocus:f,openOnFocus:v,emphasize:y,onSelectOption:g,onOptionHighlight:E,suggestWhenEmpty:O,closeOnselect:w,closeOnBlur:F},input:{value:"",ref:void 0},item:{active:-1,list:[],filtered:[]},list:{visible:S||!1,ref:void 0}}),_=A[0],T=A[1],R=n.useMemo((function(){return{state:_,dispatch:T}}),[_,T]);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(p,{value:R},r.createElement(I,Object.assign({ref:t},k)))})),w=function(e,t,n,r){var l=e.autocomplete,u=l.onSelectOption,a=l.focusInputOnSelect,i=e.item,s=e.input.ref,p=i.filtered[i.active];(o.isDefined(u)&&!1!==o.runIfFn(u,{optionValue:p.value,selectMethod:n,isNewInput:"newInput"===p.key})||!o.isDefined(u))&&(g(null==s?void 0:s.current).value=p.value,t({type:c.Set,payload:p.value}),t({type:f.Set,payload:p.value}),O(e,t),o.runIfFn(r)),null!=s&&s.current&&a&&s.current.focus()},x=t.forwardRef((function(e,l){var u=e.onChange,a=e.onKeyDown,p=e.onFocus,d=e.onBlur,m=e.onClick,h=i(e,["onChange","onKeyDown","onFocus","onBlur","onClick"]),S=n.useRef(null),g=t.useMergeRefs(l,S),E=n.useContext(s),I=E.state,C=E.dispatch,b=I.autocomplete,x=I.list,F=x.ref,k=x.visible,A=b.freeSolo,_=b.suggestWhenEmpty,T=b.closeOnBlur,R=b.closeOnselect,j=I.item.filtered.length<1&&!b.emptyState,M=function(){return O(I,C)};return function(){var e=n.useContext(s),t=e.state,r=t.autocomplete.creatable,o=t.input,l=e.dispatch,u=o.value,a=t.item.list,i=a.filter((function(e){return e.value.toLowerCase().indexOf(u.toLowerCase())>-1}));n.useEffect((function(){var e;if(null!=(e=o.ref)&&e.current){var t,n,r=null==(t=o.ref)||null==(n=t.current)?void 0:n.value;u.trim().length<1&&r.trim().length>0&&l({type:c.Set,payload:r})}}),[o.ref]),n.useEffect((function(){var e=r?[].concat(i,[r&&{key:"newInput",value:u}]):i;l({type:y.SetFiltered,payload:e}),l({type:y.ResetActive,payload:!1})}),[u,a])}(),n.useEffect((function(){C({type:c.SetRef,payload:S})}),[]),r.createElement(r.Fragment,null,r.createElement(t.Input,Object.assign({onChange:function(e){o.runIfFn(u,e);var t=e.target.value;C({type:c.Set,payload:t}),A&&C({type:f.Set,payload:t}),j||((null==t?void 0:t.length)<1?_||M():C({type:v.Show}))},onKeyDown:function(e){o.runIfFn(a,e),function(e,t,n){var r=t.autocomplete.rollNavigation,o=t.item;if("Enter"===e.key)w(t,n,"keyboard");else if("ArrowUp"===e.key){if(0===o.active)return r&&n({type:y.ResetActive,payload:!0}),void e.preventDefault();n({type:y.Set,payload:o.active-1}),e.preventDefault()}else if("ArrowDown"===e.key){if(o.active===o.filtered.length-1)return void(r&&n({type:y.ResetActive,payload:!1}));n({type:y.Set,payload:o.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&&(O(t,n),e.preventDefault())}(e,I,C)},onFocus:function(e){o.runIfFn(p,e),b.selectOnFocus&&e.target.select(),b.openOnFocus&&C({type:v.Show}),e.relatedTarget===(null==F?void 0:F.current)&&R&&k&&M()},onBlur:function(e){o.runIfFn(d,e),e.relatedTarget!==(null==F?void 0:F.current)&&T&&M()},onClick:function(e){o.runIfFn(m,e)},ref:g},h)))})),F=t.forwardRef((function(e,l){var u=e.children,c=e.value,p=e.optionKey,f=e._hover,d=e._focus,v=e.onMouseOver,m=e.onClick,h=e.sx,S=i(e,["children","value","optionKey","_hover","_focus","onMouseOver","onClick","sx"]),g=n.useContext(s),E=g.state,O=g.dispatch,I=E.autocomplete.emphasize,C=E.input.value,b=E.item,x=b.filtered[b.active],F=(null==x?void 0:x.key)===p;!function(e){var t=n.useContext(s).state.autocomplete.onOptionHighlight;n.useEffect((function(){o.runIfFn(t,null==e?void 0:e.value)}),[e])}(x);var _=b.filtered.some((function(e){return e.key===p})),T=function(e){var t=e.emphasize,n=e.inputValue,o=e.children,l=e.itemValue,u=("string"==typeof o?o.toString():l).replace(new RegExp(n,"gi"),(function(e){return'<span class="emphasizedItem">'+e+"</span>"})),a=r.createElement("span",{dangerouslySetInnerHTML:{__html:u}});return{itemChild:t?a:o,emphasizeStyles:"object"==typeof t?t:{fontWeight:"extrabold"}}}({emphasize:I,inputValue:C,optionKey:p,children:u,itemValue:c}),R=T.itemChild,j="newInput"===p;return _?r.createElement(t.Flex,Object.assign({onMouseOver:function(e){o.runIfFn(v,e),O({type:y.SetWithKey,payload:p||""})},onClick:function(e){w(E,O,"click",(function(){return o.runIfFn(m,e)}))}},k,{_hover:f},F&&(d||A),{sx:a({},h,{".emphasizedItem":T.emphasizeStyles}),ref:l},S),j?u:R):null}));F.displayName="AutoCompleteItem";var k={mx:"2",px:"2",py:"2",rounded:"md",cursor:"pointer"},A={bg:"whiteAlpha.100",_light:{bg:"gray.200"}},_=function(){var e=n.useContext(s).state,t=e.autocomplete,u=t.creatable,a=t.emphasize,i=e.input.value,c=e.item.list.some((function(e){return e.value===i})),p="object"==typeof a?a:{fontWeight:"extrabold"},f=function(e){return r.createElement(l.chakra.span,Object.assign({sx:p},e),"  ",e.children)};return r.createElement(r.Fragment,null,!!i.trim().length&&u&&!c&&r.createElement(F,{value:i,optionKey:"newInput"},"boolean"==typeof u?r.createElement(r.Fragment,null,"Add",r.createElement(f,null,'"',i,'"')):o.runIfFn(u,{newInput:i,Emphasize:f})))},T=function(e){var t=n.useContext(s).state,o=t.item.filtered,l=t.autocomplete.emptyState;return r.createElement(u.Box,Object.assign({},e),o.length<1&&l&&("boolean"==typeof l?r.createElement(u.Flex,Object.assign({},R),"No options found!"):l))},R={fontSize:"sm",align:"center",justify:"center",fontWeight:"bold",fontStyle:"italic"},j=t.forwardRef((function(e,o){var l=n.useRef(null),u=t.useMergeRefs(l,o),a=e.children,c=i(e,["children"]),p=r.Children.count(a),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 r.Children.map(e,(function(e){var n;if(!S(e,"AutoCompleteItem"))return null==(n=e.props.children)?void 0:n.map((function(e){S(e,"AutoCompleteItem")&&t.push(E(e))}));t.push(E(e))})),t}(a);m({type:y.SetAll,payload:e})}),[p]);var g=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}(h.ref);return r.createElement(t.PopoverContent,Object.assign({tabIndex:0},M,{ref:u,w:g.width,_focus:{boxShadow:"none"}},c),r.Children.map(a,(function(e){return S(e,"AutoCompleteItem")?r.cloneElement(e,{optionKey:e.key}):function(e,t){if(S(e,"AutoCompleteGroup")){var n=e.props.children.reduce((function(e,t){return e.push(S(t,"AutoCompleteItem")?r.cloneElement(t,{optionKey:t.key}):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,d)})),r.createElement(_,null),r.createElement(T,{onClick:function(){O(d,m)}}))}));j.displayName="AutoCompleteList";var M={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"}},z=t.forwardRef((function(e,o){var l=e.title,u=e.titleStyles,a=e.children,c=e.showDivider,p=e.dividerColor,f=i(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)}))}(a,n.useContext(s).state);return r.createElement("div",{ref:o},c&&!d&&r.createElement(t.Flex,Object.assign({},D,{borderColor:p||"inherit"})),r.createElement(t.Stack,Object.assign({spacing:"1"},f),l&&r.createElement(t.Text,Object.assign({},B,u),l),r.createElement(t.Box,null,a)))}));z.displayName="AutoCompleteGroup";var D={border:"0",my:"0.5rem",opacity:"0.6",borderBottom:"solid 1px"},B={ml:"5",mt:"0.5rem",fontSize:"xs",letterSpacing:"wider",fontWeight:"extrabold",textTransform:"uppercase"};exports.AutoComplete=b,exports.AutoCompleteGroup=z,exports.AutoCompleteInput=x,exports.AutoCompleteItem=F,exports.AutoCompleteList=j;
+"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;
 //# 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 } from 'react';
+import React, { createContext, useState, useContext, useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import { runIfFn, isDefined } from '@chakra-ui/utils';
@@ -126,2 +126,19 @@ import { chakra } from '@chakra-ui/system';
 
+var handleListChild = function handleListChild(child, state) {
+  var type = child.type.displayName;
+
+  switch (type) {
+    case 'AutoCompleteItem':
+      return assignChildKey(child);
+
+    case 'AutoCompleteGroup':
+      return handleItemGroup(child, state);
+
+    case 'AutoCompleteFixedItem':
+      return assignChildKey(child);
+
+    default:
+      return child;
+  }
+};
 var handleItemGroup = function handleItemGroup(group, state) {
@@ -137,5 +154,3 @@ var isValidItem = function isValidItem(child) {
     var childrenWithKeys = children.reduce(function (acc, child) {
-      acc.push(isChild(child, 'AutoCompleteItem') ? React.cloneElement(child, {
-        optionKey: child.key
-      }) : child);
+      acc.push(isChild(child, 'AutoCompleteItem') ? assignChildKey(child) : child);
       return acc;
@@ -150,2 +165,7 @@ }, []);
 };
+var assignChildKey = function assignChildKey(child) {
+  return React.cloneElement(child, {
+    optionKey: child.key || child.props.children.toString()
+  });
+};
 var getItemKeys = function getItemKeys(children) {
@@ -156,5 +176,5 @@ var items = [];
 
-    if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));else return (_child$props$children = child.props.children) == null ? void 0 : _child$props$children.map(function (option) {
+    if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));else if (isChild(child, 'AutoCompleteGroup')) return (_child$props$children = child.props.children) == null ? void 0 : _child$props$children.map(function (option) {
       if (isChild(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
-    });
+    });else if (isChild(child, 'AutoCompleteFixedItem')) items.push(getChildProps(child));
   });
@@ -166,4 +186,4 @@ return items;
   return {
-    key: child.key,
-    value: child.props.value
+    key: child.key || child.props.children.toString(),
+    value: child.props.value || ''
   };
@@ -290,5 +310,8 @@ };
   ItemAction["ResetActive"] = "RESET_ACTIVE_ITEM";
+  ItemAction["AddFixedRef"] = "ADD_FIXED_ITEM_REF";
 })(ItemAction || (ItemAction = {}));
 
 var itemReducer = function itemReducer(state, action) {
+  var _extends2;
+
   switch (action.type) {
@@ -323,2 +346,7 @@ case ItemAction.Set:
 
+    case ItemAction.AddFixedRef:
+      return _extends({}, state, {
+        fixed: _extends({}, state.fixed, (_extends2 = {}, _extends2[action.payload.key] = action.payload.ref, _extends2))
+      });
+
     default:
@@ -373,3 +401,4 @@ return state;
       list: [],
-      filtered: []
+      filtered: [],
+      fixed: {}
     },
@@ -417,2 +446,3 @@ list: {
       focusInputOnSelect = _state$autocomplete.focusInputOnSelect,
+      closeOnselect = _state$autocomplete.closeOnselect,
       item = state.item,
@@ -440,3 +470,3 @@ inputRef = state.input.ref;
     });
-    closeList(state, dispatch);
+    if (closeOnselect) closeList(state, dispatch);
     runIfFn(cb);
@@ -498,3 +528,10 @@ }
   if (e.key === 'Enter') {
-    runOnSelect(state, dispatch, 'keyboard');
+    var activeItem = item.filtered[item.active];
+
+    if (activeItem.value.trim().length === 0) {
+      var _activeItemRef$curren;
+
+      var activeItemRef = item.fixed[activeItem.key];
+      (_activeItemRef$curren = activeItemRef.current) == null ? void 0 : _activeItemRef$curren.onKeyboardSelect();
+    } else runOnSelect(state, dispatch, 'keyboard');
   } else if (e.key === 'ArrowUp') {
@@ -679,3 +716,4 @@ if (item.active === 0) {
       itemValue = props.value,
-      optionKey = props.optionKey,
+      _props$optionKey = props.optionKey,
+      optionKey = _props$optionKey === void 0 ? '' : _props$optionKey,
       _hover = props._hover,
@@ -706,3 +744,3 @@ _focus = props._focus,
       type: ItemAction.SetWithKey,
-      payload: optionKey || ''
+      payload: optionKey
     });
@@ -731,5 +769,5 @@ };
     onClick: handleOnClick
-  }, baseStyles, {
+  }, itemBaseStyles, {
     _hover: _hover
-  }, isActiveItem && (_focus || activeStyles), {
+  }, isActiveItem && (_focus || itemActiveStyles), {
     sx: _extends({}, sx, {
@@ -742,3 +780,3 @@ '.emphasizedItem': emphasizeStyles
 AutoCompleteItem.displayName = 'AutoCompleteItem';
-var baseStyles = {
+var itemBaseStyles = {
   mx: '2',
@@ -750,3 +788,3 @@ px: '2',
 };
-var activeStyles = {
+var itemActiveStyles = {
   bg: 'whiteAlpha.100',
@@ -842,3 +880,3 @@ _light: {
     tabIndex: 0
-  }, baseStyles$1, {
+  }, baseStyles, {
     ref: refs,
@@ -850,5 +888,3 @@ w: width,
   }, rest), React.Children.map(children, function (child) {
-    return isChild(child, 'AutoCompleteItem') ? React.cloneElement(child, {
-      optionKey: child.key
-    }) : handleItemGroup(child, state);
+    return handleListChild(child, state);
   }), React.createElement(CreateInput, null), React.createElement(EmptyState, {
@@ -861,3 +897,3 @@ onClick: function onClick() {
 AutoCompleteList.displayName = 'AutoCompleteList';
-var baseStyles$1 = {
+var baseStyles = {
   mt: '4',
@@ -880,2 +916,65 @@ py: '4',
 
+var AutoCompleteFixedItem = /*#__PURE__*/forwardRef(function (props, outerRef) {
+  var ref = useRef(null);
+  var refs = useMergeRefs(outerRef, ref);
+
+  var _props$optionKey = props.optionKey,
+      optionKey = _props$optionKey === void 0 ? '' : _props$optionKey,
+      _focus = props._focus,
+      onMouseOver = props.onMouseOver,
+      onItemSelect = props.onItemSelect,
+      onClick = props.onClick,
+      rest = _objectWithoutPropertiesLoose(props, ["optionKey", "_focus", "onMouseOver", "onItemSelect", "onClick"]);
+
+  var _useContext = useContext(StoreContext),
+      _useContext$state$ite = _useContext.state.item,
+      filterdItems = _useContext$state$ite.filtered,
+      activeItemIndex = _useContext$state$ite.active,
+      dispatch = _useContext.dispatch;
+
+  useEffect(function () {
+    dispatch({
+      type: ItemAction.AddFixedRef,
+      payload: {
+        key: optionKey,
+        ref: ref
+      }
+    });
+  }, [ref]);
+  var activeItem = filterdItems[activeItemIndex];
+  var isActiveItem = (activeItem == null ? void 0 : activeItem.key) === optionKey;
+
+  var handleMouseOver = function handleMouseOver(e) {
+    runIfFn(onMouseOver, e);
+    dispatch({
+      type: ItemAction.SetWithKey,
+      payload: optionKey
+    });
+  };
+
+  var onItemSelected = function onItemSelected(method) {
+    runIfFn(onItemSelect, method);
+  };
+
+  var handleClick = function handleClick(e) {
+    runIfFn(onClick, e);
+    onItemSelected('click');
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      onKeyboardSelect: function onKeyboardSelect() {
+        onItemSelected('keyboard');
+      }
+    };
+  });
+  return React.createElement(Flex, Object.assign({
+    onMouseOver: handleMouseOver,
+    onClick: handleClick
+  }, itemBaseStyles, isActiveItem && (_focus || itemActiveStyles), {
+    ref: refs
+  }, rest));
+});
+AutoCompleteFixedItem.displayName = 'AutoCompleteFixedItem';
+
 var hasFirstOption = function hasFirstOption(children, state) {
@@ -925,3 +1024,3 @@ return children == null ? void 0 : children.some(function (child) {
 
-export { AutoComplete, AutoCompleteGroup, AutoCompleteInput, AutoCompleteItem, AutoCompleteList };
+export { AutoComplete, AutoCompleteFixedItem, AutoCompleteGroup, AutoCompleteInput, AutoCompleteItem, AutoCompleteList, itemActiveStyles, itemBaseStyles };
 //# sourceMappingURL=chakra-autocomplete.esm.js.map

dist/helpers/list.d.ts

 import React from 'react';
 import { State, StoreDispatch } from '../store';
+export declare const handleListChild: (child: any, state: State) => any;
 export declare const handleItemGroup: (group: any, state: State) => any;
+export declare const assignChildKey: (child: any) => React.FunctionComponentElement<{
+    optionKey: any;
+}>;
 export declare const getItemKeys: string[] | any;
@@ -5,0 +9,0 @@ export declare const useRefDimensions: (ref: React.RefObject<HTMLInputElement> | undefined) => {

dist/index.d.ts

 export { AutoComplete, ChildrenProps as AutoCompleteChildProps, } from './auto-complete-provider';
-export { AutoCompleteInput } from './auto-complete-input';
-export { AutoCompleteList } from './auto-complete-list';
-export { AutoCompleteItem } from './auto-complete-item';
-export { AutoCompleteGroup } from './auto-complete-group';
+export * from './auto-complete-input';
+export * from './auto-complete-list';
+export * from './auto-complete-item';
+export * from './auto-complete-fixed-item';
+export * from './auto-complete-group';

dist/store/index.d.ts

@@ -20,2 +20,3 @@ import { BoxProps } from '@chakra-ui/layout';
         filtered: Item[];
+        fixed: Record<string, React.RefObject<HTMLDivElement>>;
     };
@@ -22,0 +23,0 @@ list: {

dist/store/reducers/input.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ActionMap, State } from '..';
@@ -2,0 +3,0 @@ export declare enum InputAction {

dist/store/reducers/item.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ActionMap, State } from '..';
@@ -11,3 +12,4 @@ export interface Item {
     SetFiltered = "SET_FILTERED_ITEMS",
-    ResetActive = "RESET_ACTIVE_ITEM"
+    ResetActive = "RESET_ACTIVE_ITEM",
+    AddFixedRef = "ADD_FIXED_ITEM_REF"
 }
@@ -20,2 +22,6 @@ declare type ItemPayload = {
     [ItemAction.ResetActive]: boolean;
+    [ItemAction.AddFixedRef]: {
+        key: string;
+        ref: React.RefObject<HTMLDivElement>;
+    };
 };
@@ -27,3 +33,4 @@ export declare type ItemActions = ActionMap<ItemPayload>[keyof ActionMap<ItemPayload>];
     filtered: Item[];
+    fixed: Record<string, import("react").RefObject<HTMLDivElement>>;
 };
 export {};

dist/store/reducers/list.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ActionMap, State } from '..';
@@ -2,0 +3,0 @@ export declare enum ListAction {

package.json

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

README.md

 <div align="center">
 
-
   <h1>
@@ -28,6 +27,7 @@ <br/>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-
 </a>
@@ -402,6 +402,15 @@ <br />
     <td>boolean</td>
-    <td>select the text in input when input is focused<br>openOnFocus - Open the suggestions once input is focused.</td>
+    <td>select the text in input when input is focused</td>
     <td>No</td>
     <td>false</td>
   </tr>
+
+ <tr>
+    <td>openOnFocus</td>
+    <td>boolean</td>
+    <td>Open the suggestions once input is focused.</td>
+    <td>No</td>
+    <td>false</td>
+  </tr>
+
   <tr>
@@ -485,4 +494,3 @@ <td>emphasize</td>
 **AutoCompleteGroup** composes [**Box**](https://chakra-ui.com/docs/layout/box) so you can pass all Box props to change its style.
-
-<div class="tg-wrap"><table>
+<Table>
 <thead>
@@ -529,2 +537,3 @@ <tr>
   </tr>
+
   <tr>
@@ -537,2 +546,3 @@ <td>showDivider</td>
   </tr>
+
   <tr>
@@ -546,4 +556,6 @@ <td>dividerColor</td>
 </tbody>
-</table></div>
 
+</table>
+
+
 ### **AutoCompleteItem**
@@ -602,2 +614,38 @@
 
+### **AutoCompleteFixedItem**
+
+This is an item that is not filtered with the other options, but syncs with the highlight and active states.
+
+**AutoCompleteFixedItem** composes [**Flex**](https://chakra-ui.com/docs/layout/flex) so you can pass all Flex props to change its style.
+
+**AutoCompleteFixedItem** composes [**AutoCompleteItem**](https://github.com/anubra266/choc-autocomplete#autocompleteitem) so you can pass all AutoCompleteItem props to change its style.
+
+<table>
+<thead>
+  <tr>
+    <th>Prop<br></th>
+    <th>Type</th>
+    <th>Description</th>
+    <th>Required</th>
+    <th>Default</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>onItemSelect</td>
+    <td> 
+
+```ts
+type onItemSelect = (method: 'click' | 'keyboard') => void;
+```
+
+  </td>
+    <td>Callback to run when Item is selected my mouse or keyboard. Provides the select method</td>
+    <td>No<br></td>
+    <td>&mdash;&mdash;&mdash;</td>
+  </tr>
+ 
+</tbody>
+</table>
+
 ## Contributors ✨
@@ -604,0 +652,0 @@

src/helpers/autocomplete-props/onSelectOption.ts

@@ -21,3 +21,3 @@ import { isDefined, runIfFn } from '@chakra-ui/utils';
   const {
-    autocomplete: { onSelectOption, focusInputOnSelect },
+    autocomplete: { onSelectOption, focusInputOnSelect, closeOnselect },
     item,
@@ -42,3 +42,3 @@ input: { ref: inputRef },
     dispatch({ type: AutoCompleteAction.Set, payload: activeItem.value });
-    closeList(state, dispatch);
+    if (closeOnselect) closeList(state, dispatch);
     runIfFn(cb);
@@ -45,0 +45,0 @@ }

src/helpers/input.ts

@@ -53,3 +53,7 @@ import React, { useContext, useEffect } from 'react';
   if (e.key === 'Enter') {
-    runOnSelect(state, dispatch, 'keyboard');
+    const activeItem = item.filtered[item.active];
+    if (activeItem.value.trim().length === 0) {
+      const activeItemRef: any = item.fixed[activeItem.key];
+      activeItemRef.current?.onKeyboardSelect();
+    } else runOnSelect(state, dispatch, 'keyboard');
   } else if (e.key === 'ArrowUp') {
@@ -56,0 +60,0 @@ if (item.active === 0) {

src/helpers/list.ts

@@ -9,2 +9,19 @@ import React, { ReactNode, useState } from 'react';
 
+export const handleListChild = (child: any, state: State) => {
+  const type = child.type.displayName;
+  switch (type) {
+    case 'AutoCompleteItem':
+      return assignChildKey(child);
+
+    case 'AutoCompleteGroup':
+      return handleItemGroup(child, state);
+
+    case 'AutoCompleteFixedItem':
+      return assignChildKey(child);
+
+    default:
+      return child;
+  }
+};
+
 export const handleItemGroup = (group: any, state: State) => {
@@ -18,5 +35,3 @@ const isValidItem = (child: any) =>
       acc.push(
-        isChild(child, 'AutoCompleteItem')
-          ? React.cloneElement(child, { optionKey: child.key })
-          : child
+        isChild(child, 'AutoCompleteItem') ? assignChildKey(child) : child
       );
@@ -33,2 +48,7 @@ return acc;
 
+export const assignChildKey = (child: any) =>
+  React.cloneElement(child, {
+    optionKey: child.key || child.props.children.toString(),
+  });
+
 export const getItemKeys: string[] | any = (children: ReactNode) => {
@@ -39,3 +59,3 @@ const items: Item[] = [];
     if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));
-    else
+    else if (isChild(child, 'AutoCompleteGroup'))
       return child.props.children?.map((option: any) => {
@@ -46,2 +66,4 @@ if (isChild(option, 'AutoCompleteItem'))
       });
+    else if (isChild(child, 'AutoCompleteFixedItem'))
+      items.push(getChildProps(child));
   });
@@ -52,4 +74,4 @@ return items;
 const getChildProps = (child: any) => ({
-  key: child.key,
-  value: child.props.value,
+  key: child.key || child.props.children.toString(),
+  value: child.props.value || '',
 });
@@ -56,0 +78,0 @@

src/store/reducers/item.ts

@@ -14,2 +14,3 @@ import { ActionMap, State } from '..';
   ResetActive = 'RESET_ACTIVE_ITEM',
+  AddFixedRef = 'ADD_FIXED_ITEM_REF',
 }
@@ -23,2 +24,6 @@
   [ItemAction.ResetActive]: boolean;
+  [ItemAction.AddFixedRef]: {
+    key: string;
+    ref: React.RefObject<HTMLDivElement>;
+  };
 };
@@ -49,2 +54,8 @@
 
+    case ItemAction.AddFixedRef:
+      return {
+        ...state,
+        fixed: { ...state.fixed, [action.payload.key]: action.payload.ref },
+      };
+
     default:
@@ -51,0 +62,0 @@ return state;

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

319718

increased by11.25%

Number of package files

58

increased by3.57%

Lines of code

3150

increased by11.15%

Number of lines in readme file

665

increased by7.78%

No dependency changes