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

Comparing version 3.0.0 to 3.1.0

dist/auto-complete-provider.d.ts

 import { BoxProps, CSSObject } from '@chakra-ui/react';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import { ReactNode } from 'react';
+import { CreatableProps } from './components/create-input';
 import { OnSelectOptionParams } from './helpers/autocomplete-props/onSelectOption';
@@ -18,3 +19,3 @@ export declare type ChildrenProps = {
     freeSolo?: boolean;
-    creatable?: boolean;
+    creatable?: boolean | ((props: CreatableProps) => ReactNode);
     selectOnFocus?: boolean;
@@ -21,0 +22,0 @@ openOnFocus?: boolean;

dist/chakra-autocomplete.cjs.development.js

@@ -47,6 +47,2 @@ 'use strict';
 
-var returnT = function returnT(variable) {
-  return variable && variable;
-};
-
 var StoreContext = /*#__PURE__*/React.createContext({});
@@ -58,2 +54,44 @@
 
+var InputAction;
+
+(function (InputAction) {
+  InputAction["Set"] = "SET_INPUT_VALUE";
+  InputAction["SetRef"] = "SET_INPUT_REF";
+})(InputAction || (InputAction = {}));
+
+var inputReducer = function inputReducer(state, action) {
+  switch (action.type) {
+    case InputAction.Set:
+      return _extends({}, state, {
+        value: action.payload
+      });
+
+    case InputAction.SetRef:
+      return _extends({}, state, {
+        ref: action.payload
+      });
+
+    default:
+      return state;
+  }
+};
+
+var AutoCompleteAction;
+
+(function (AutoCompleteAction) {
+  AutoCompleteAction["Set"] = "SET_AUTOCOMPLETE_VALUE";
+})(AutoCompleteAction || (AutoCompleteAction = {}));
+
+var AutoCompleteReducer = function AutoCompleteReducer(state, action) {
+  switch (action.type) {
+    case AutoCompleteAction.Set:
+      return _extends({}, state, {
+        value: action.payload
+      });
+
+    default:
+      return state;
+  }
+};
+
 var ListAction;
@@ -89,41 +127,90 @@
 
-var InputAction;
+var isChild = function isChild(child, type) {
+  return child.type.displayName === type ? child.key || true : false;
+};
 
-(function (InputAction) {
-  InputAction["Set"] = "SET_INPUT_VALUE";
-  InputAction["SetRef"] = "SET_INPUT_REF";
-})(InputAction || (InputAction = {}));
+var returnT = function returnT(variable) {
+  return variable && variable;
+};
 
-var inputReducer = function inputReducer(state, action) {
-  switch (action.type) {
-    case InputAction.Set:
-      return _extends({}, state, {
-        value: action.payload
-      });
+var handleItemGroup = function handleItemGroup(group, state) {
+  var isValidItem = function isValidItem(child) {
+    return state.item.filtered.some(function (i) {
+      return i.key === child.key;
+    });
+  };
 
-    case InputAction.SetRef:
-      return _extends({}, state, {
-        ref: action.payload
-      });
+  if (isChild(group, 'AutoCompleteGroup')) {
+    var children = group.props.children;
+    var childrenWithKeys = children.reduce(function (acc, child) {
+      acc.push(isChild(child, 'AutoCompleteItem') ? React__default.cloneElement(child, {
+        optionKey: child.key
+      }) : child);
+      return acc;
+    }, []);
+    return group.props.children.every(function (groupChild) {
+      return !isValidItem(groupChild);
+    }) ? null : React__default.cloneElement(group, {
+      children: childrenWithKeys
+    });
+  } else return group;
+};
+var getItemKeys = function getItemKeys(children) {
+  var items = [];
+  React__default.Children.map(children, function (child) {
+    var _child$props$children;
 
-    default:
-      return state;
-  }
+    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(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
+    });
+  });
+  return items;
 };
 
-var AutoCompleteAction;
+var getChildProps = function getChildProps(child) {
+  return {
+    key: child.key,
+    value: child.props.value
+  };
+};
 
-(function (AutoCompleteAction) {
-  AutoCompleteAction["Set"] = "SET_AUTOCOMPLETE_VALUE";
-})(AutoCompleteAction || (AutoCompleteAction = {}));
+var useRefDimensions = function useRefDimensions(ref) {
+  var _useState = React.useState({
+    width: 1,
+    height: 2
+  }),
+      dimensions = _useState[0],
+      setDimensions = _useState[1];
 
-var AutoCompleteReducer = function AutoCompleteReducer(state, action) {
-  switch (action.type) {
-    case AutoCompleteAction.Set:
-      return _extends({}, state, {
-        value: action.payload
+  React__default.useEffect(function () {
+    if (ref != null && ref.current) {
+      var current = ref.current;
+      var boundingRect = current.getBoundingClientRect();
+      var width = boundingRect.width,
+          height = boundingRect.height;
+      setDimensions({
+        width: Math.round(width),
+        height: Math.round(height)
       });
+    }
+  }, [ref]);
+  return dimensions;
+};
+var closeList = function closeList(state, dispatch) {
+  var _state$autocomplete = state.autocomplete,
+      autoCompleteValue = _state$autocomplete.value,
+      freeSolo = _state$autocomplete.freeSolo,
+      _state$input = state.input,
+      inputValue = _state$input.value,
+      inputRef = _state$input.ref;
+  dispatch({
+    type: ListAction.Hide
+  });
 
-    default:
-      return state;
+  if (inputValue !== autoCompleteValue && !freeSolo) {
+    dispatch({
+      type: InputAction.Set,
+      payload: autoCompleteValue
+    });
+    returnT(inputRef == null ? void 0 : inputRef.current).value = autoCompleteValue;
   }
@@ -140,12 +227,10 @@ };
   var _useContext = React.useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      _useContext$state$aut = _useContext$state.autocomplete,
-      autoCompleteValue = _useContext$state$aut.value,
-      freeSolo = _useContext$state$aut.freeSolo,
-      isOpen = _useContext$state.list.visible,
-      _useContext$state$inp = _useContext$state.input,
-      inputValue = _useContext$state$inp.value,
-      inputRef = _useContext$state$inp.ref,
+      state = _useContext.state,
       dispatch = _useContext.dispatch;
 
+  var autoCompleteValue = state.autocomplete.value,
+      isOpen = state.list.visible,
+      _state$input = state.input,
+      inputValue = _state$input.value,
+      inputRef = _state$input.ref;
   React.useEffect(function () {
@@ -156,13 +241,3 @@ utils.runIfFn(onChange, autoCompleteValue);
   var onClose = function onClose() {
-    dispatch({
-      type: ListAction.Hide
-    });
-
-    if (inputValue !== autoCompleteValue && !freeSolo) {
-      dispatch({
-        type: InputAction.Set,
-        payload: autoCompleteValue
-      });
-      returnT(inputRef == null ? void 0 : inputRef.current).value = autoCompleteValue;
-    }
+    return closeList(state, dispatch);
   };
@@ -260,3 +335,4 @@
 var AutoComplete = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  var emptyState = props.emptyState,
+  var _props$emptyState = props.emptyState,
+      emptyState = _props$emptyState === void 0 ? true : _props$emptyState,
       rollNavigation = props.rollNavigation,
@@ -354,3 +430,3 @@ focusInputOnSelect = props.focusInputOnSelect,
       selectMethod: selectMethod,
-      isNewInput: activeItem.key === 'isNewInput'
+      isNewInput: activeItem.key === 'newInput'
     });
@@ -369,5 +445,3 @@ };
     });
-    dispatch({
-      type: ListAction.Hide
-    });
+    closeList(state, dispatch);
     utils.runIfFn(cb);
@@ -471,5 +545,3 @@ }
   } else if (e.key === 'Escape') {
-    dispatch({
-      type: ListAction.Hide
-    });
+    closeList(state, dispatch);
     e.preventDefault();
@@ -505,2 +577,7 @@ }
   var isEmpty = item.filtered.length < 1 && !emptyState;
+
+  var hideList = function hideList() {
+    return closeList(state, dispatch);
+  };
+
   useOptionsFilter();
@@ -530,5 +607,3 @@ React.useEffect(function () {
         type: ListAction.Show
-      });else if (!suggestWhenEmpty) dispatch({
-        type: ListAction.Hide
-      });
+      });else if (!suggestWhenEmpty) hideList();
     }
@@ -551,5 +626,3 @@ };
     if (focusedFromList && closeOnselect && listIsVisible) {
-      dispatch({
-        type: ListAction.Hide
-      });
+      hideList();
     }
@@ -565,5 +638,3 @@ };
     var listIsFocused = e.relatedTarget === (listRef == null ? void 0 : listRef.current);
-    if (!listIsFocused && closeOnBlur) dispatch({
-      type: ListAction.Hide
-    });
+    if (!listIsFocused && closeOnBlur) hideList();
   };
@@ -710,11 +781,19 @@
   };
+
+  var EmphasizedValue = function EmphasizedValue(props) {
+    return React__default.createElement(system.chakra.span, Object.assign({
+      sx: emphasizeStyles
+    }, props), "\xA0 ", props.children);
+  };
+
   return React__default.createElement(React__default.Fragment, null, !!inputValue.trim().length && creatable && !itemExists && React__default.createElement(AutoCompleteItem, {
     value: inputValue,
     optionKey: "newInput"
-  }, "Add \xA0", React__default.createElement(system.chakra.span, {
-    sx: emphasizeStyles
-  }, "\"", inputValue, "\"")));
+  }, typeof creatable === 'boolean' ? React__default.createElement(React__default.Fragment, null, "Add", React__default.createElement(EmphasizedValue, null, "\"", inputValue, "\"")) : utils.runIfFn(creatable, {
+    newInput: inputValue,
+    Emphasize: EmphasizedValue
+  })));
 };
 
-var EmptyState = function EmptyState() {
+var EmptyState = function EmptyState(props) {
   var _useContext = React.useContext(StoreContext),
@@ -725,3 +804,3 @@ _useContext$state = _useContext.state,
 
-  return React__default.createElement(React__default.Fragment, null, filtered.length < 1 && emptyState && (typeof emptyState === 'boolean' ? React__default.createElement(layout.Flex, Object.assign({}, emptyStyles), "No options found!") : emptyState));
+  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));
 };
@@ -736,70 +815,2 @@ var emptyStyles = {
 
-var isChild = function isChild(child, type) {
-  return child.type.displayName === type ? child.key || true : false;
-};
-
-var handleItemGroup = function handleItemGroup(group, state) {
-  var isValidItem = function isValidItem(child) {
-    return state.item.filtered.some(function (i) {
-      return i.key === child.key;
-    });
-  };
-
-  if (isChild(group, 'AutoCompleteGroup')) {
-    var children = group.props.children;
-    var childrenWithKeys = children.reduce(function (acc, child) {
-      acc.push(isChild(child, 'AutoCompleteItem') ? React__default.cloneElement(child, {
-        optionKey: child.key
-      }) : child);
-      return acc;
-    }, []);
-    return group.props.children.every(function (groupChild) {
-      return !isValidItem(groupChild);
-    }) ? null : React__default.cloneElement(group, {
-      children: childrenWithKeys
-    });
-  } else return group;
-};
-var getItemKeys = function getItemKeys(children) {
-  var items = [];
-  React__default.Children.map(children, function (child) {
-    var _child$props$children;
-
-    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(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
-    });
-  });
-  return items;
-};
-
-var getChildProps = function getChildProps(child) {
-  return {
-    key: child.key,
-    value: child.props.value
-  };
-};
-
-var useRefDimensions = function useRefDimensions(ref) {
-  var _useState = React.useState({
-    width: 1,
-    height: 2
-  }),
-      dimensions = _useState[0],
-      setDimensions = _useState[1];
-
-  React__default.useEffect(function () {
-    if (ref != null && ref.current) {
-      var current = ref.current;
-      var boundingRect = current.getBoundingClientRect();
-      var width = boundingRect.width,
-          height = boundingRect.height;
-      setDimensions({
-        width: Math.round(width),
-        height: Math.round(height)
-      });
-    }
-  }, [ref]);
-  return dimensions;
-};
-
 var AutoCompleteList = /*#__PURE__*/react.forwardRef(function (props, outRef) {
@@ -848,3 +859,7 @@ var ref = React.useRef(null);
     }) : handleItemGroup(child, state);
-  }), React__default.createElement(CreateInput, null), React__default.createElement(EmptyState, null));
+  }), React__default.createElement(CreateInput, null), React__default.createElement(EmptyState, {
+    onClick: function onClick() {
+      closeList(state, dispatch);
+    }
+  }));
 });
@@ -851,0 +866,0 @@ AutoCompleteList.displayName = 'AutoCompleteList';

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=function(e){return e&&e},p=n.createContext({}),f=function(e){return r.createElement(p.Provider,Object.assign({},e))};!function(e){e.Show="SHOW_LIST",e.Hide="HIDE_LIST",e.SetRef="SET_LIST_REF"}(c||(c={}));var d,v=function(e,t){switch(t.type){case c.Show:return a({},e,{visible:!0});case c.Hide:return a({},e,{visible:!1});case c.SetRef:return a({},e,{ref:t.payload});default:return e}};!function(e){e.Set="SET_INPUT_VALUE",e.SetRef="SET_INPUT_REF"}(d||(d={}));var y,m=function(e,t){switch(t.type){case d.Set:return a({},e,{value:t.payload});case d.SetRef:return a({},e,{ref:t.payload});default:return e}};!function(e){e.Set="SET_AUTOCOMPLETE_VALUE"}(y||(y={}));var h,S=function(e,t){switch(t.type){case y.Set:return a({},e,{value:t.payload});default:return e}},g=t.forwardRef((function(e,l){var u,a=e.children,f=e.onChange,v=i(e,["children","onChange"]),m=n.useContext(p),h=m.state,S=h.autocomplete,g=S.value,E=S.freeSolo,O=h.list.visible,I=h.input,C=I.value,b=I.ref,w=m.dispatch;n.useEffect((function(){o.runIfFn(f,g)}),[g]);var x=function(){w({type:c.Hide}),C===g||E||(w({type:d.Set,payload:g}),s(null==b?void 0:b.current).value=g)},F={isOpen:O,onClose:x,inputIsEmpty:!(C.length||null!=b&&null!=(u=b.current)&&u.value.length),resetInput:function(){null!=b&&b.current&&(b.current.value="",b.current.focus()),w({type:d.Set,payload:""}),w({type:y.Set,payload:""})}};return r.createElement(t.Popover,{autoFocus:!1,closeOnBlur:!0,placement:"bottom",isOpen:O,onClose:x},r.createElement(t.Box,Object.assign({ref:l},v),o.runIfFn(a,F)))}));!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"}(h||(h={}));var E=function(e,t){switch(t.type){case h.Set:return a({},e,{active:t.payload});case h.SetAll:return a({},e,{list:t.payload});case h.SetWithKey:var n=e.filtered.findIndex((function(e){return e.key===t.payload}));return a({},e,{active:n});case h.SetFiltered:return a({},e,{filtered:t.payload});case h.ResetActive:return a({},e,{active:t.payload?e.filtered.length-1:0});default:return e}},O=t.forwardRef((function(e,t){var o=e.emptyState,l=e.rollNavigation,u=e.focusInputOnSelect,a=e.freeSolo,c=e.creatable,s=e.selectOnFocus,p=e.openOnFocus,d=e.emphasize,y=e.defaultIsOpen,h=e.onSelectOption,O=e.onOptionHighlight,I=e.suggestWhenEmpty,C=e.closeOnselect,b=void 0===C||C,w=e.closeOnBlur,x=void 0===w||w,F=i(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:S(e.autocomplete,t),input:m(n,t),item:E(r,t),list:v(o,t)}}),{autocomplete:{value:"",emptyState:o,rollNavigation:l,focusInputOnSelect:u,freeSolo:a,creatable:c,selectOnFocus:s,openOnFocus:p,emphasize:d,onSelectOption:h,onOptionHighlight:O,suggestWhenEmpty:I,closeOnselect:b,closeOnBlur:x},input:{value:"",ref:void 0},item:{active:-1,list:[],filtered:[]},list:{visible:y||!1,ref:void 0}}),A=k[0],_=k[1],T=n.useMemo((function(){return{state:A,dispatch:_}}),[A,_]);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(g,Object.assign({ref:t},F)))})),I=function(e,t,n,r){var l=e.autocomplete,u=l.onSelectOption,a=l.focusInputOnSelect,i=e.item,p=e.input.ref,f=i.filtered[i.active];(o.isDefined(u)&&!1!==o.runIfFn(u,{optionValue:f.value,selectMethod:n,isNewInput:"isNewInput"===f.key})||!o.isDefined(u))&&(s(null==p?void 0:p.current).value=f.value,t({type:d.Set,payload:f.value}),t({type:y.Set,payload:f.value}),t({type:c.Hide}),o.runIfFn(r)),null!=p&&p.current&&a&&p.current.focus()},C=t.forwardRef((function(e,l){var u=e.onChange,a=e.onKeyDown,s=e.onFocus,f=e.onBlur,v=e.onClick,m=i(e,["onChange","onKeyDown","onFocus","onBlur","onClick"]),S=n.useRef(null),g=t.useMergeRefs(l,S),E=n.useContext(p),O=E.state,C=E.dispatch,b=O.autocomplete,w=O.list,x=w.ref,F=w.visible,k=b.freeSolo,A=b.suggestWhenEmpty,_=b.closeOnBlur,T=b.closeOnselect,R=O.item.filtered.length<1&&!b.emptyState;return function(){var e=n.useContext(p),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:d.Set,payload:r})}}),[o.ref]),n.useEffect((function(){var e=r?[].concat(i,[r&&{key:"newInput",value:u}]):i;l({type:h.SetFiltered,payload:e}),l({type:h.ResetActive,payload:!1})}),[u,a])}(),n.useEffect((function(){C({type:d.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:d.Set,payload:t}),k&&C({type:y.Set,payload:t}),R||((null==t?void 0:t.length)<1?A||C({type:c.Hide}):C({type:c.Show}))},onKeyDown:function(e){o.runIfFn(a,e),function(e,t,n){var r=t.autocomplete.rollNavigation,o=t.item;if("Enter"===e.key)I(t,n,"keyboard");else if("ArrowUp"===e.key){if(0===o.active)return r&&n({type:h.ResetActive,payload:!0}),void e.preventDefault();n({type:h.Set,payload:o.active-1}),e.preventDefault()}else if("ArrowDown"===e.key){if(o.active===o.filtered.length-1)return void(r&&n({type:h.ResetActive,payload:!1}));n({type:h.Set,payload:o.active+1})}else"Home"===e.key?(n({type:h.ResetActive,payload:!1}),e.preventDefault()):"End"===e.key?(n({type:h.ResetActive,payload:!0}),e.preventDefault()):"Escape"===e.key&&(n({type:c.Hide}),e.preventDefault())}(e,O,C)},onFocus:function(e){o.runIfFn(s,e),b.selectOnFocus&&e.target.select(),b.openOnFocus&&C({type:c.Show}),e.relatedTarget===(null==x?void 0:x.current)&&T&&F&&C({type:c.Hide})},onBlur:function(e){o.runIfFn(f,e),e.relatedTarget!==(null==x?void 0:x.current)&&_&&C({type:c.Hide})},onClick:function(e){o.runIfFn(v,e)},ref:g},m)))})),b=t.forwardRef((function(e,l){var u=e.children,c=e.value,s=e.optionKey,f=e._hover,d=e._focus,v=e.onMouseOver,y=e.onClick,m=e.sx,S=i(e,["children","value","optionKey","_hover","_focus","onMouseOver","onClick","sx"]),g=n.useContext(p),E=g.state,O=g.dispatch,C=E.autocomplete.emphasize,b=E.input.value,F=E.item,k=F.filtered[F.active],A=(null==k?void 0:k.key)===s;!function(e){var t=n.useContext(p).state.autocomplete.onOptionHighlight;n.useEffect((function(){o.runIfFn(t,null==e?void 0:e.value)}),[e])}(k);var _=F.filtered.some((function(e){return e.key===s})),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:C,inputValue:b,optionKey:s,children:u,itemValue:c}),R=T.itemChild,j="newInput"===s;return _?r.createElement(t.Flex,Object.assign({onMouseOver:function(e){o.runIfFn(v,e),O({type:h.SetWithKey,payload:s||""})},onClick:function(e){I(E,O,"click",(function(){return o.runIfFn(y,e)}))}},w,{_hover:f},A&&(d||x),{sx:a({},m,{".emphasizedItem":T.emphasizeStyles}),ref:l},S),j?u:R):null}));b.displayName="AutoCompleteItem";var w={mx:"2",px:"2",py:"2",rounded:"md",cursor:"pointer"},x={bg:"whiteAlpha.100",_light:{bg:"gray.200"}},F=function(){var e=n.useContext(p).state,t=e.autocomplete,o=t.creatable,u=t.emphasize,a=e.input.value,i=e.item.list.some((function(e){return e.value===a})),c="object"==typeof u?u:{fontWeight:"extrabold"};return r.createElement(r.Fragment,null,!!a.trim().length&&o&&!i&&r.createElement(b,{value:a,optionKey:"newInput"},"Add  ",r.createElement(l.chakra.span,{sx:c},'"',a,'"')))},k=function(){var e=n.useContext(p).state,t=e.autocomplete.emptyState;return r.createElement(r.Fragment,null,e.item.filtered.length<1&&t&&("boolean"==typeof t?r.createElement(u.Flex,Object.assign({},A),"No options found!"):t))},A={fontSize:"sm",align:"center",justify:"center",fontWeight:"bold",fontStyle:"italic"},_=function(e,t){return e.type.displayName===t&&(e.key||!0)},T=function(e){return{key:e.key,value:e.props.value}},R=t.forwardRef((function(e,o){var l=n.useRef(null),u=t.useMergeRefs(l,o),a=e.children,s=i(e,["children"]),f=r.Children.count(a),d=n.useContext(p),v=d.state,y=d.dispatch,m=v.input;n.useEffect((function(){y({type:c.SetRef,payload:l})}),[]),n.useEffect((function(){var e=function(e){var t=[];return r.Children.map(e,(function(e){var n;if(!_(e,"AutoCompleteItem"))return null==(n=e.props.children)?void 0:n.map((function(e){_(e,"AutoCompleteItem")&&t.push(T(e))}));t.push(T(e))})),t}(a);y({type:h.SetAll,payload:e})}),[f]);var S=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},j,{ref:u,w:S.width,_focus:{boxShadow:"none"}},s),r.Children.map(a,(function(e){return _(e,"AutoCompleteItem")?r.cloneElement(e,{optionKey:e.key}):function(e,t){if(_(e,"AutoCompleteGroup")){var n=e.props.children.reduce((function(e,t){return e.push(_(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,v)})),r.createElement(F,null),r.createElement(k,null))}));R.displayName="AutoCompleteList";var j={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"}},H=t.forwardRef((function(e,o){var l=e.title,u=e.titleStyles,a=e.children,c=e.showDivider,s=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(p).state);return r.createElement("div",{ref:o},c&&!d&&r.createElement(t.Flex,Object.assign({},M,{borderColor:s||"inherit"})),r.createElement(t.Stack,Object.assign({spacing:"1"},f),l&&r.createElement(t.Text,Object.assign({},D,u),l),r.createElement(t.Box,null,a)))}));H.displayName="AutoCompleteGroup";var M={border:"0",my:"0.5rem",opacity:"0.6",borderBottom:"solid 1px"},D={ml:"5",mt:"0.5rem",fontSize:"xs",letterSpacing:"wider",fontWeight:"extrabold",textTransform:"uppercase"};exports.AutoComplete=O,exports.AutoCompleteGroup=H,exports.AutoCompleteInput=C,exports.AutoCompleteItem=b,exports.AutoCompleteList=R;
+"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;
 //# 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, useContext, useEffect, useReducer, useMemo, useRef, useState } from 'react';
+import React, { createContext, useState, useContext, useEffect, useReducer, useMemo, useRef } from 'react';
 import { runIfFn, isDefined } from '@chakra-ui/utils';
 import { chakra } from '@chakra-ui/system';
-import { Flex as Flex$1 } from '@chakra-ui/layout';
+import { Box as Box$1, Flex as Flex$1 } from '@chakra-ui/layout';
 
@@ -40,6 +40,2 @@ function _extends() {
 
-var returnT = function returnT(variable) {
-  return variable && variable;
-};
-
 var StoreContext = /*#__PURE__*/createContext({});
@@ -51,2 +47,44 @@
 
+var InputAction;
+
+(function (InputAction) {
+  InputAction["Set"] = "SET_INPUT_VALUE";
+  InputAction["SetRef"] = "SET_INPUT_REF";
+})(InputAction || (InputAction = {}));
+
+var inputReducer = function inputReducer(state, action) {
+  switch (action.type) {
+    case InputAction.Set:
+      return _extends({}, state, {
+        value: action.payload
+      });
+
+    case InputAction.SetRef:
+      return _extends({}, state, {
+        ref: action.payload
+      });
+
+    default:
+      return state;
+  }
+};
+
+var AutoCompleteAction;
+
+(function (AutoCompleteAction) {
+  AutoCompleteAction["Set"] = "SET_AUTOCOMPLETE_VALUE";
+})(AutoCompleteAction || (AutoCompleteAction = {}));
+
+var AutoCompleteReducer = function AutoCompleteReducer(state, action) {
+  switch (action.type) {
+    case AutoCompleteAction.Set:
+      return _extends({}, state, {
+        value: action.payload
+      });
+
+    default:
+      return state;
+  }
+};
+
 var ListAction;
@@ -82,41 +120,90 @@
 
-var InputAction;
+var isChild = function isChild(child, type) {
+  return child.type.displayName === type ? child.key || true : false;
+};
 
-(function (InputAction) {
-  InputAction["Set"] = "SET_INPUT_VALUE";
-  InputAction["SetRef"] = "SET_INPUT_REF";
-})(InputAction || (InputAction = {}));
+var returnT = function returnT(variable) {
+  return variable && variable;
+};
 
-var inputReducer = function inputReducer(state, action) {
-  switch (action.type) {
-    case InputAction.Set:
-      return _extends({}, state, {
-        value: action.payload
-      });
+var handleItemGroup = function handleItemGroup(group, state) {
+  var isValidItem = function isValidItem(child) {
+    return state.item.filtered.some(function (i) {
+      return i.key === child.key;
+    });
+  };
 
-    case InputAction.SetRef:
-      return _extends({}, state, {
-        ref: action.payload
-      });
+  if (isChild(group, 'AutoCompleteGroup')) {
+    var children = group.props.children;
+    var childrenWithKeys = children.reduce(function (acc, child) {
+      acc.push(isChild(child, 'AutoCompleteItem') ? React.cloneElement(child, {
+        optionKey: child.key
+      }) : child);
+      return acc;
+    }, []);
+    return group.props.children.every(function (groupChild) {
+      return !isValidItem(groupChild);
+    }) ? null : React.cloneElement(group, {
+      children: childrenWithKeys
+    });
+  } else return group;
+};
+var getItemKeys = function getItemKeys(children) {
+  var items = [];
+  React.Children.map(children, function (child) {
+    var _child$props$children;
 
-    default:
-      return state;
-  }
+    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(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
+    });
+  });
+  return items;
 };
 
-var AutoCompleteAction;
+var getChildProps = function getChildProps(child) {
+  return {
+    key: child.key,
+    value: child.props.value
+  };
+};
 
-(function (AutoCompleteAction) {
-  AutoCompleteAction["Set"] = "SET_AUTOCOMPLETE_VALUE";
-})(AutoCompleteAction || (AutoCompleteAction = {}));
+var useRefDimensions = function useRefDimensions(ref) {
+  var _useState = useState({
+    width: 1,
+    height: 2
+  }),
+      dimensions = _useState[0],
+      setDimensions = _useState[1];
 
-var AutoCompleteReducer = function AutoCompleteReducer(state, action) {
-  switch (action.type) {
-    case AutoCompleteAction.Set:
-      return _extends({}, state, {
-        value: action.payload
+  React.useEffect(function () {
+    if (ref != null && ref.current) {
+      var current = ref.current;
+      var boundingRect = current.getBoundingClientRect();
+      var width = boundingRect.width,
+          height = boundingRect.height;
+      setDimensions({
+        width: Math.round(width),
+        height: Math.round(height)
       });
+    }
+  }, [ref]);
+  return dimensions;
+};
+var closeList = function closeList(state, dispatch) {
+  var _state$autocomplete = state.autocomplete,
+      autoCompleteValue = _state$autocomplete.value,
+      freeSolo = _state$autocomplete.freeSolo,
+      _state$input = state.input,
+      inputValue = _state$input.value,
+      inputRef = _state$input.ref;
+  dispatch({
+    type: ListAction.Hide
+  });
 
-    default:
-      return state;
+  if (inputValue !== autoCompleteValue && !freeSolo) {
+    dispatch({
+      type: InputAction.Set,
+      payload: autoCompleteValue
+    });
+    returnT(inputRef == null ? void 0 : inputRef.current).value = autoCompleteValue;
   }
@@ -133,12 +220,10 @@ };
   var _useContext = useContext(StoreContext),
-      _useContext$state = _useContext.state,
-      _useContext$state$aut = _useContext$state.autocomplete,
-      autoCompleteValue = _useContext$state$aut.value,
-      freeSolo = _useContext$state$aut.freeSolo,
-      isOpen = _useContext$state.list.visible,
-      _useContext$state$inp = _useContext$state.input,
-      inputValue = _useContext$state$inp.value,
-      inputRef = _useContext$state$inp.ref,
+      state = _useContext.state,
       dispatch = _useContext.dispatch;
 
+  var autoCompleteValue = state.autocomplete.value,
+      isOpen = state.list.visible,
+      _state$input = state.input,
+      inputValue = _state$input.value,
+      inputRef = _state$input.ref;
   useEffect(function () {
@@ -149,13 +234,3 @@ runIfFn(onChange, autoCompleteValue);
   var onClose = function onClose() {
-    dispatch({
-      type: ListAction.Hide
-    });
-
-    if (inputValue !== autoCompleteValue && !freeSolo) {
-      dispatch({
-        type: InputAction.Set,
-        payload: autoCompleteValue
-      });
-      returnT(inputRef == null ? void 0 : inputRef.current).value = autoCompleteValue;
-    }
+    return closeList(state, dispatch);
   };
@@ -253,3 +328,4 @@
 var AutoComplete = /*#__PURE__*/forwardRef(function (props, ref) {
-  var emptyState = props.emptyState,
+  var _props$emptyState = props.emptyState,
+      emptyState = _props$emptyState === void 0 ? true : _props$emptyState,
       rollNavigation = props.rollNavigation,
@@ -347,3 +423,3 @@ focusInputOnSelect = props.focusInputOnSelect,
       selectMethod: selectMethod,
-      isNewInput: activeItem.key === 'isNewInput'
+      isNewInput: activeItem.key === 'newInput'
     });
@@ -362,5 +438,3 @@ };
     });
-    dispatch({
-      type: ListAction.Hide
-    });
+    closeList(state, dispatch);
     runIfFn(cb);
@@ -464,5 +538,3 @@ }
   } else if (e.key === 'Escape') {
-    dispatch({
-      type: ListAction.Hide
-    });
+    closeList(state, dispatch);
     e.preventDefault();
@@ -498,2 +570,7 @@ }
   var isEmpty = item.filtered.length < 1 && !emptyState;
+
+  var hideList = function hideList() {
+    return closeList(state, dispatch);
+  };
+
   useOptionsFilter();
@@ -523,5 +600,3 @@ useEffect(function () {
         type: ListAction.Show
-      });else if (!suggestWhenEmpty) dispatch({
-        type: ListAction.Hide
-      });
+      });else if (!suggestWhenEmpty) hideList();
     }
@@ -544,5 +619,3 @@ };
     if (focusedFromList && closeOnselect && listIsVisible) {
-      dispatch({
-        type: ListAction.Hide
-      });
+      hideList();
     }
@@ -558,5 +631,3 @@ };
     var listIsFocused = e.relatedTarget === (listRef == null ? void 0 : listRef.current);
-    if (!listIsFocused && closeOnBlur) dispatch({
-      type: ListAction.Hide
-    });
+    if (!listIsFocused && closeOnBlur) hideList();
   };
@@ -703,11 +774,19 @@
   };
+
+  var EmphasizedValue = function EmphasizedValue(props) {
+    return React.createElement(chakra.span, Object.assign({
+      sx: emphasizeStyles
+    }, props), "\xA0 ", props.children);
+  };
+
   return React.createElement(React.Fragment, null, !!inputValue.trim().length && creatable && !itemExists && React.createElement(AutoCompleteItem, {
     value: inputValue,
     optionKey: "newInput"
-  }, "Add \xA0", React.createElement(chakra.span, {
-    sx: emphasizeStyles
-  }, "\"", inputValue, "\"")));
+  }, typeof creatable === 'boolean' ? React.createElement(React.Fragment, null, "Add", React.createElement(EmphasizedValue, null, "\"", inputValue, "\"")) : runIfFn(creatable, {
+    newInput: inputValue,
+    Emphasize: EmphasizedValue
+  })));
 };
 
-var EmptyState = function EmptyState() {
+var EmptyState = function EmptyState(props) {
   var _useContext = useContext(StoreContext),
@@ -718,3 +797,3 @@ _useContext$state = _useContext.state,
 
-  return React.createElement(React.Fragment, null, filtered.length < 1 && emptyState && (typeof emptyState === 'boolean' ? React.createElement(Flex$1, Object.assign({}, emptyStyles), "No options found!") : emptyState));
+  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));
 };
@@ -729,70 +808,2 @@ var emptyStyles = {
 
-var isChild = function isChild(child, type) {
-  return child.type.displayName === type ? child.key || true : false;
-};
-
-var handleItemGroup = function handleItemGroup(group, state) {
-  var isValidItem = function isValidItem(child) {
-    return state.item.filtered.some(function (i) {
-      return i.key === child.key;
-    });
-  };
-
-  if (isChild(group, 'AutoCompleteGroup')) {
-    var children = group.props.children;
-    var childrenWithKeys = children.reduce(function (acc, child) {
-      acc.push(isChild(child, 'AutoCompleteItem') ? React.cloneElement(child, {
-        optionKey: child.key
-      }) : child);
-      return acc;
-    }, []);
-    return group.props.children.every(function (groupChild) {
-      return !isValidItem(groupChild);
-    }) ? null : React.cloneElement(group, {
-      children: childrenWithKeys
-    });
-  } else return group;
-};
-var getItemKeys = function getItemKeys(children) {
-  var items = [];
-  React.Children.map(children, function (child) {
-    var _child$props$children;
-
-    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(option, 'AutoCompleteItem')) items.push(getChildProps(option));else return;
-    });
-  });
-  return items;
-};
-
-var getChildProps = function getChildProps(child) {
-  return {
-    key: child.key,
-    value: child.props.value
-  };
-};
-
-var useRefDimensions = function useRefDimensions(ref) {
-  var _useState = useState({
-    width: 1,
-    height: 2
-  }),
-      dimensions = _useState[0],
-      setDimensions = _useState[1];
-
-  React.useEffect(function () {
-    if (ref != null && ref.current) {
-      var current = ref.current;
-      var boundingRect = current.getBoundingClientRect();
-      var width = boundingRect.width,
-          height = boundingRect.height;
-      setDimensions({
-        width: Math.round(width),
-        height: Math.round(height)
-      });
-    }
-  }, [ref]);
-  return dimensions;
-};
-
 var AutoCompleteList = /*#__PURE__*/forwardRef(function (props, outRef) {
@@ -841,3 +852,7 @@ var ref = useRef(null);
     }) : handleItemGroup(child, state);
-  }), React.createElement(CreateInput, null), React.createElement(EmptyState, null));
+  }), React.createElement(CreateInput, null), React.createElement(EmptyState, {
+    onClick: function onClick() {
+      closeList(state, dispatch);
+    }
+  }));
 });
@@ -844,0 +859,0 @@ AutoCompleteList.displayName = 'AutoCompleteList';

dist/components/create-input.d.ts

@@ -0,1 +1,6 @@
+import { ChakraComponent } from '@chakra-ui/system';
 export declare const CreateInput: () => JSX.Element;
+export declare type CreatableProps = {
+    newInput: string;
+    Emphasize: ChakraComponent<'span', {}>;
+};

dist/components/empty-state.d.ts

@@ -1,1 +0,2 @@
-export declare const EmptyState: () => JSX.Element;
+import { BoxProps } from '@chakra-ui/layout';
+export declare const EmptyState: (props: BoxProps) => JSX.Element;

dist/helpers/list.d.ts

 import React from 'react';
-import { State } from '../store';
+import { State, StoreDispatch } from '../store';
 export declare const handleItemGroup: (group: any, state: State) => any;
@@ -9,1 +9,2 @@ export declare const getItemKeys: string[] | any;
 };
+export declare const closeList: (state: State, dispatch: StoreDispatch) => void;

dist/store/index.d.ts

@@ -34,3 +34,4 @@ import { BoxProps } from '@chakra-ui/layout';
 };
-export declare type StoreDispatch = Dispatch<AutoCompleteActions | InputActions | ItemActions | ListActions>;
+export declare type StoreActions = AutoCompleteActions | InputActions | ItemActions | ListActions;
+export declare type StoreDispatch = Dispatch<StoreActions>;
 declare type ContextValue = {
@@ -37,0 +38,0 @@ state: State;

package.json

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

README.md

 <div align="center">
+
+
   <h1>
@@ -25,2 +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>
@@ -35,3 +42,3 @@ <br />
   <br />
-  <pre>npm i <a href="https://www.npmjs.com/package/@choc-ui/autocomplete">@choc-ui/chakra-autocomplete</a></pre>
+  <pre>npm i <a href="https://www.npmjs.com/package/@choc-ui/chakra-autocomplete">@choc-ui/chakra-autocomplete</a></pre>
   <br />
@@ -47,5 +54,5 @@ <br />
 ```bash
-npm i --save @choc-ui/autocomplete
+npm i --save @choc-ui/chakra-autocomplete
 #or
-yarn add @choc-ui/autocomplete
+yarn add @choc-ui/chakra-autocomplete
 ```
@@ -75,3 +82,3 @@
   AutoCompleteList,
-} from '@choc-ui/autocomplete';
+} from '@choc-ui/chakra-autocomplete';
 
@@ -82,3 +89,3 @@ export default () => {
   return (
-    <AutoComplete>
+    <AutoComplete rollNavigation>
       <AutoCompleteInput
@@ -90,3 +97,3 @@ variant="filled"
       />
-      <AutoCompleteList rollNavigation>
+      <AutoCompleteList>
         {options.map((option, oid) => (
@@ -122,3 +129,3 @@ <AutoCompleteItem
   AutoCompleteList,
-} from '@choc-ui/autocomplete';
+} from '@choc-ui/chakra-autocomplete';
 
@@ -130,3 +137,3 @@ export default () => {
   return (
-    <AutoComplete>
+    <AutoComplete rollNavigation>
       <AutoCompleteInput
@@ -139,3 +146,3 @@ variant="filled"
       />
-      <AutoCompleteList rollNavigation>
+      <AutoCompleteList>
         <AutoCompleteGroup title="Fruits" showDivider>
@@ -191,3 +198,3 @@ {fruits.map((option, oid) => (
   return (
-    <AutoComplete>
+    <AutoComplete rollNavigation>
       {({ isOpen }) => (
@@ -203,3 +210,3 @@ <>
           </InputGroup>
-          <AutoCompleteList rollNavigation>
+          <AutoCompleteList>
             {options.map((option, oid) => (
@@ -252,3 +259,3 @@ <AutoCompleteItem
   return (
-    <AutoComplete>
+    <AutoComplete rollNavigation>
       <AutoCompleteInput
@@ -261,3 +268,3 @@ variant="filled"
       />
-      <AutoCompleteList rollNavigation>
+      <AutoCompleteList>
         {people.map((person, oid) => (
@@ -387,3 +394,16 @@ <AutoCompleteItem
     <td>boolean</td>
-    <td>If true, allows creation of new Items, `freeSolo` must be true.</td>
+    <td>Allows creation of new Items, set to true to show `Add {newInput}` It can also be a function that returns a `ReactNode` and is provided with the `newInput` and an `Emphasize` component.
+    e.g.
+
+```js
+const creatable={({ newInput, Emphasize }) => (
+  <>
+    Add<Emphasize>"{newInput}"</Emphasize>
+  </>
+)}
+```
+
+When using `creatable`, `freeSolo` must be true.
+
+</td>
     <td>No</td>
@@ -589,1 +609,23 @@ <td>false</td>
 </table>
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://anubra266.tk"><img src="https://avatars.githubusercontent.com/u/30869823?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abraham</b></sub></a><br /><a href="https://github.com/anubra266/choc-autocomplete/commits?author=anubra266" title="Code">💻</a></td>
+    <td align="center"><a href="http://margalit.com.au"><img src="https://avatars.githubusercontent.com/u/2268424?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sam Margalit</b></sub></a><br /><a href="https://github.com/anubra266/choc-autocomplete/commits?author=margalit" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/gepd"><img src="https://avatars.githubusercontent.com/u/7091609?v=4?s=100" width="100px;" alt=""/><br /><sub><b>gepd</b></sub></a><br /><a href="https://github.com/anubra266/choc-autocomplete/commits?author=gepd" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/helpers/autocomplete-props/onSelectOption.ts

@@ -5,4 +5,4 @@ import { isDefined, runIfFn } from '@chakra-ui/utils';
 import { InputAction } from '../../store/reducers/input';
-import { ListAction } from '../../store/reducers/list';
 import { returnT } from '../../utils/operations';
+import { closeList } from '../list';
 
@@ -32,3 +32,3 @@ export type OnSelectOptionParams = {
       selectMethod,
-      isNewInput: activeItem.key === 'isNewInput',
+      isNewInput: activeItem.key === 'newInput',
     });
@@ -43,3 +43,3 @@
     dispatch({ type: AutoCompleteAction.Set, payload: activeItem.value });
-    dispatch({ type: ListAction.Hide });
+    closeList(state, dispatch);
     runIfFn(cb);
@@ -46,0 +46,0 @@ }

src/helpers/input.ts

@@ -5,4 +5,4 @@ import React, { useContext, useEffect } from 'react';
 import { ItemAction } from '../store/reducers/item';
-import { ListAction } from '../store/reducers/list';
 import { runOnSelect } from './autocomplete-props/onSelectOption';
+import { closeList } from './list';
 
@@ -78,5 +78,5 @@ export const useOptionsFilter = () => {
   } else if (e.key === 'Escape') {
-    dispatch({ type: ListAction.Hide });
+    closeList(state, dispatch);
     e.preventDefault();
   }
 };

src/helpers/list.ts

 import React, { ReactNode, useState } from 'react';
-import { State } from '../store';
+import { State, StoreDispatch } from '../store';
+import { InputAction } from '../store/reducers/input';
 import { Item } from '../store/reducers/item';
+import { ListAction } from '../store/reducers/list';
 import { isChild } from '../utils/components';
+import { returnT } from '../utils/operations';
 
@@ -62,1 +65,14 @@ export const handleItemGroup = (group: any, state: State) => {
 };
+
+export const closeList = (state: State, dispatch: StoreDispatch) => {
+  const {
+    autocomplete: { value: autoCompleteValue, freeSolo },
+    input: { value: inputValue, ref: inputRef },
+  } = state;
+
+  dispatch({ type: ListAction.Hide });
+  if (inputValue !== autoCompleteValue && !freeSolo) {
+    dispatch({ type: InputAction.Set, payload: autoCompleteValue });
+    returnT(inputRef?.current).value = autoCompleteValue;
+  }
+};

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287395

increased by3.72%

Lines of code

2834

increased by2.53%

Number of lines in readme file

617

increased by7.3%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes