@choc-ui/chakra-autocomplete 4.8.2 → 4.10.1

package/README.md

@@ -147,7 +147,7 @@ function App() {
           <AutoCompleteInput variant="filled" />
           <AutoCompleteList>
             {Object.entries(continents).map(([continent, countries], co_id) => (
-              <AutoCompleteGroup key={co_id} id={continent} showDivider>
+              <AutoCompleteGroup key={co_id} showDivider>
                 <AutoCompleteGroupTitle textTransform="capitalize">
                   {continent}
                 </AutoCompleteGroupTitle>
@@ -155,7 +155,6 @@ function App() {
                   <AutoCompleteItem
                     key={c_id}
                     value={country}
-                    groupId={continent}
                     textTransform="capitalize"
                   >
                     {country}
@@ -178,7 +177,7 @@ export default App;
 
 ## Accessing the internal state
 
-To access the internal state of the `AutoComplete`, use a function as children (commonly known as a render prop). You'll get access to the internal state `isOpen`, with the `onOpen`, `onClose` methods and the `tags` in multiple mode.
+To access the internal state of the `AutoComplete`, use a function as children (commonly known as a render prop). You'll get access to the internal state `isOpen`, with the `onOpen` and `onClose` methods.
 
 ```js
 import {
@@ -386,6 +385,13 @@ Then add the `AutoCompleteCreatable` component to the bottom of the list. Refer
 
 <img width="517" alt="CleanShot 2021-07-29 at 02 29 20@2x" src="https://user-images.githubusercontent.com/30869823/127417453-e78b9b48-26e8-4ff0-a264-1d6bb4717ab0.png">
 
+### Autocomplete methods
+Assign a ref to the `AutoComplete` component and call the available methods with:
+```js
+ref.current?.resetItems()
+ref.current?.removeItem(itemValue)
+```
+
 ### Codesandbox Link [Here](https://githubbox.com/anubra266/choc-autocomplete/tree/main/demo)
 
 ## API Reference
@@ -560,6 +566,17 @@ boolean | MaybeRenderProp<{ value: Item["value"] }>
             <td>method to call whenever a suggestion is focused</td>
             <td>&mdash;&mdash;&mdash;</td>
         </tr>
+        <tr>
+            <td>onReady</td>
+            <td>
+            
+```ts
+(props:{tags:ItemTag[]}) => void
+```
+</td>
+            <td>method that exposes variables used in component</td>
+            <td>&mdash;&mdash;&mdash;</td>
+        </tr>
         <tr>
             <td>onTagRemoved</td>
             <td>
@@ -794,13 +811,6 @@ val => val;
 
 </td>
   </tr>
-  <tr>
-    <td>groupId</td>
-    <td>string</td>
-    <td>The id of the group, if Item belongs to one. It's required if you need to wrap the items in an HOC.</td>
-    <td>no<br></td>
-    <td>&mdash;&mdash;&mdash;</td>
-  </tr>
   <tr>
     <td>label</td>
     <td>string</td>
@@ -1013,7 +1023,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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> <a href="https://github.com/anubra266/choc-autocomplete/issues?q=author%3Agepd" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://github.com/Buupu"><img src="https://avatars.githubusercontent.com/u/26443341?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sammy Fattah</b></sub></a><br /><a href="https://github.com/anubra266/choc-autocomplete/commits?author=Buupu" title="Code">💻</a></td>
   </tr>
 </table>
 

package/dist/autocomplete-item.d.ts

@@ -7,7 +7,6 @@ export interface AutoCompleteItemProps extends FlexProps {
     disabled?: boolean;
     _fixed?: CSSObject;
     getValue?: (item: AutoCompleteItemProps["value"]) => any;
-    groupId?: string;
 }
 export declare const AutoCompleteItem: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteItemProps>;
 export declare const baseItemStyles: FlexProps;

package/dist/autocomplete.d.ts

@@ -1,5 +1,13 @@
-import { UseAutoCompleteProps, UseAutoCompleteReturn } from "./types";
+import React from "react";
+import { MaybeRenderProp } from "@chakra-ui/react-utils";
+import { AutoCompleteRefMethods, UseAutoCompleteProps } from "./types";
+export declare type AutoCompleteChildProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+};
 export interface AutoCompleteProps extends UseAutoCompleteProps {
-    children: UseAutoCompleteReturn["children"];
+    children: MaybeRenderProp<AutoCompleteChildProps>;
+    ref: React.RefObject<AutoCompleteRefMethods>;
 }
 export declare const AutoComplete: import("@chakra-ui/react").ComponentWithAs<"div", AutoCompleteProps>;

package/dist/chakra-autocomplete.cjs.development.js

@@ -9,12 +9,13 @@ var React__default = _interopDefault(React);
 var reactUtils = require('@chakra-ui/react-utils');
 var react = require('@chakra-ui/react');
 var utils = require('@chakra-ui/utils');
+var reactNanny = require('react-nanny');
 var layout = require('@chakra-ui/layout');
 var tag = require('@chakra-ui/tag');
 
 var _createContext = /*#__PURE__*/reactUtils.createContext({
   name: "AutoCompleteContext",
-  errorMessage: "useAutoCompleteContext: `context` is undefined. Seems you forgot to wrap all autocomplete components within `<AutoComplete />`"
+  errorMessage: "useAutoCompleteContext: `context` is undefined. Seems you forgot to wrap all autoomplete components within `<AutoComplete />`"
 }),
     AutoCompleteProvider = _createContext[0],
     useAutoCompleteContext = _createContext[1];
@@ -136,6 +137,9 @@ function fuzzyScore(str1, str2, gramSize) {
   return hits / total;
 }
 
+var getDefItemValue = function getDefItemValue(item) {
+  return (typeof item === "string" ? item : item[Object.keys(item)[0]]).toString();
+};
 var setEmphasis = function setEmphasis(children, query) {
   if (typeof children !== "string" || utils.isEmpty(query)) {
     return children;
@@ -146,6 +150,25 @@ var setEmphasis = function setEmphasis(children, query) {
   });
   return newChildren;
 };
+var getItemList = function getItemList(children) {
+  var itemChildren = reactNanny.getChildrenDeep(children, function (child) {
+    var _child$type;
+
+    return (child == null ? void 0 : (_child$type = child.type) == null ? void 0 : _child$type.displayName) === "AutoCompleteItem";
+  });
+  return itemChildren.map(function (item) {
+    var itemObj = utils.pick(item.props, ["value", "label", "fixed", "disabled"]);
+    var _item$props$getValue = item.props.getValue,
+        getValue = _item$props$getValue === void 0 ? getDefItemValue : _item$props$getValue;
+    var value = getValue(itemObj.value);
+    var finObj = utils.isDefined(itemObj.label) ? itemObj : _extends({}, itemObj, {
+      label: value
+    });
+    return _extends({}, finObj, {
+      value: value
+    });
+  });
+};
 var getFocusedStyles = function getFocusedStyles() {
   return {
     bg: "whiteAlpha.100",
@@ -176,16 +199,30 @@ var getMultipleWrapStyles = function getMultipleWrapStyles(themeInput, multiple)
   });
 };
 
-var hasFirstItem = function hasFirstItem(props, firstItem) {
-  return utils.isDefined(firstItem == null ? void 0 : firstItem.groupId) && utils.isDefined(props.id) && (firstItem == null ? void 0 : firstItem.groupId) === props.id;
-};
-var hasLastItem = function hasLastItem(props, lastItem) {
-  return utils.isDefined(lastItem == null ? void 0 : lastItem.groupId) && utils.isDefined(props.id) && (lastItem == null ? void 0 : lastItem.groupId) === props.id;
+var hasFirstItem = function hasFirstItem(children, firstItem) {
+  var result = reactNanny.getChildDeep(children, function (child) {
+    var _child$type;
+
+    return (child == null ? void 0 : (_child$type = child.type) == null ? void 0 : _child$type.displayName) === "AutoCompleteItem" && child.props.value === (firstItem == null ? void 0 : firstItem.value);
+  });
+  return result;
 };
-var hasChildren = function hasChildren(props, filteredList) {
-  return filteredList.some(function (item) {
-    return utils.isDefined(item.groupId) && utils.isDefined(props.id) && item.groupId === props.id;
+var hasLastItem = function hasLastItem(children, lastItem) {
+  var result = reactNanny.getChildDeep(children, function (child) {
+    var _child$type2;
+
+    return (child == null ? void 0 : (_child$type2 = child.type) == null ? void 0 : _child$type2.displayName) === "AutoCompleteItem" && child.props.value === (lastItem == null ? void 0 : lastItem.value);
   });
+  return result;
+};
+var hasChildren = function hasChildren(children, filteredList) {
+  return utils.isDefined(reactNanny.getChildDeep(children, function (child) {
+    return filteredList.findIndex(function (i) {
+      var _child$props;
+
+      return i.value === ((_child$props = child.props) == null ? void 0 : _child$props.value);
+    }) >= 0;
+  }));
 };
 
 var _excluded = ["onBlur", "onChange", "onFocus", "onKeyDown", "variant", "wrapStyles"],
@@ -213,6 +250,7 @@ function useAutoComplete(autoCompleteProps) {
       listAllValuesOnFocus = autoCompleteProps.listAllValuesOnFocus,
       maxSuggestions = autoCompleteProps.maxSuggestions,
       multiple = autoCompleteProps.multiple,
+      onReady = autoCompleteProps.onReady,
       defaultIsOpen = autoCompleteProps.defaultIsOpen,
       _autoCompleteProps$sh = autoCompleteProps.shouldRenderSuggestions,
       shouldRenderSuggestions = _autoCompleteProps$sh === void 0 ? function () {
@@ -229,22 +267,24 @@ function useAutoComplete(autoCompleteProps) {
       onClose = _useDisclosure.onClose,
       onOpen = _useDisclosure.onOpen;
 
-  var _useState = React.useState([]),
-      itemList = _useState[0],
-      setItemList = _useState[1];
-
+  var children = utils.runIfFn(autoCompleteProps.children, {
+    isOpen: isOpen,
+    onClose: onClose,
+    onOpen: onOpen
+  });
+  var itemList = getItemList(children);
   var inputRef = React.useRef(null);
   var inputWrapperRef = React.useRef(null);
   var listRef = React.useRef(null);
   var interactionRef = React.useRef(null);
 
-  var _useState2 = React.useState(""),
-      query = _useState2[0],
-      setQuery = _useState2[1];
+  var _useState = React.useState(""),
+      query = _useState[0],
+      setQuery = _useState[1];
 
-  var _useState3 = React.useState(defaultValues),
-      values = _useState3[0],
-      setValues = _useState3[1];
+  var _useState2 = React.useState(defaultValues),
+      values = _useState2[0],
+      setValues = _useState2[1];
 
   React.useEffect(function () {
     if (!multiple && !utils.isEmpty(defaultValues)) {
@@ -252,13 +292,13 @@ function useAutoComplete(autoCompleteProps) {
     }
   }, []);
 
-  var _useState4 = React.useState((_itemList$ = itemList[0]) == null ? void 0 : _itemList$.value),
-      focusedValue = _useState4[0],
-      setFocusedValue = _useState4[1];
+  var _useState3 = React.useState((_itemList$ = itemList[0]) == null ? void 0 : _itemList$.value),
+      focusedValue = _useState3[0],
+      setFocusedValue = _useState3[1];
 
-  var _useState5 = React.useState(false),
-      listAll = _useState5[0],
-      setListAll = _useState5[1];
+  var _useState4 = React.useState(false),
+      listAll = _useState4[0],
+      setListAll = _useState4[1];
 
   var maxSelections = autoCompleteProps.maxSelections || values.length + 1;
   var filteredResults = itemList.filter(function (i) {
@@ -351,6 +391,13 @@ function useAutoComplete(autoCompleteProps) {
     if (query === itemValue) setQuery("");
   };
 
+  var resetItems = function resetItems(focusInput) {
+    var _inputRef$current3;
+
+    setValues([]);
+    if (focusInput) (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+  };
+
   var tags = multiple ? values.map(function (tag) {
     var _itemList$find;
 
@@ -363,12 +410,11 @@ function useAutoComplete(autoCompleteProps) {
       }
     };
   }) : [];
-  var children = utils.runIfFn(autoCompleteProps.children, {
-    isOpen: isOpen,
-    onClose: onClose,
-    onOpen: onOpen,
-    tags: tags
-  });
+  React.useEffect(function () {
+    utils.runIfFn(onReady, {
+      tags: tags
+    });
+  }, [values]);
 
   var getInputProps = function getInputProps(props, themeInput) {
     var _onBlur = props.onBlur,
@@ -383,16 +429,16 @@ function useAutoComplete(autoCompleteProps) {
       wrapper: _extends({
         ref: inputWrapperRef,
         onClick: function onClick() {
-          var _inputRef$current3;
+          var _inputRef$current4;
 
-          inputRef == null ? void 0 : (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+          inputRef == null ? void 0 : (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
         },
         tabIndex: 0
       }, getMultipleWrapStyles(themeInput, multiple), wrapStyles),
       input: _extends({
         isReadOnly: isReadOnly,
         onFocus: function onFocus(e) {
-          utils.runIfFn(_onFocus);
+          utils.runIfFn(_onFocus, e);
           if (autoCompleteProps.openOnFocus && !isReadOnly) onOpen();
           if (autoCompleteProps.selectOnFocus) e.target.select();
           if (listAllValuesOnFocus) setListAll(true);
@@ -400,7 +446,7 @@ function useAutoComplete(autoCompleteProps) {
         onBlur: function onBlur(e) {
           var _inputWrapperRef$curr;
 
-          utils.runIfFn(_onBlur);
+          utils.runIfFn(_onBlur, e);
           var listIsFocused = e.relatedTarget === (listRef == null ? void 0 : listRef.current);
           var inputWrapperIsFocused = (_inputWrapperRef$curr = inputWrapperRef.current) == null ? void 0 : _inputWrapperRef$curr.contains(e.relatedTarget);
 
@@ -426,9 +472,9 @@ function useAutoComplete(autoCompleteProps) {
           var focusedItem = filteredList[focusedIndex];
 
           if (key === "Enter") {
-            var _inputRef$current4;
+            var _inputRef$current5;
 
-            if (focusedItem && !(focusedItem != null && focusedItem.disabled)) selectItem(focusedItem.value);else (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
+            if (focusedItem && !(focusedItem != null && focusedItem.disabled)) selectItem(focusedItem.value);else (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
             e.preventDefault();
             return;
           }
@@ -482,11 +528,9 @@ function useAutoComplete(autoCompleteProps) {
     };
   };
 
-  var getDefItemValue = function getDefItemValue(item) {
-    return (typeof item === "string" ? item : item[Object.keys(item)[0]]).toString();
-  };
-
   var getItemProps = function getItemProps(props) {
+    var _getValue;
+
     var _fixed = props._fixed,
         _focus = props._focus,
         itemChild = props.children,
@@ -501,7 +545,7 @@ function useAutoComplete(autoCompleteProps) {
         sx = props.sx,
         rest = _objectWithoutPropertiesLoose(props, _excluded2);
 
-    var value = getValue(valueProp).toString();
+    var value = (_getValue = getValue(valueProp)) == null ? void 0 : _getValue.toString();
     var isFocused = value === focusedValue;
     var isValidSuggestion = filteredList.findIndex(function (i) {
       return i.value === value;
@@ -523,10 +567,10 @@ function useAutoComplete(autoCompleteProps) {
           userSelect: "none"
         },
         onClick: function onClick(e) {
-          var _inputRef$current5;
+          var _inputRef$current6;
 
           utils.runIfFn(_onClick, e);
-          if (!disabled) selectItem(value);else (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
+          if (!disabled) selectItem(value);else (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.focus();
         },
         onMouseOver: function onMouseOver(e) {
           utils.runIfFn(_onMouseOver, e);
@@ -544,21 +588,19 @@ function useAutoComplete(autoCompleteProps) {
       }, isFocused && (_focus || getFocusedStyles()), fixed && _fixed, rest),
       root: {
         isValidSuggestion: isValidSuggestion,
-        setItemList: setItemList,
         value: value
       }
     };
   };
 
   var getGroupProps = function getGroupProps(props) {
-    var hasItems = hasChildren(props, filteredList);
-    var lastItem = utils.getLastItem(filteredList.filter(function (i) {
-      return utils.isUndefined(i == null ? void 0 : i.noFilter);
-    }));
+    var hasItems = hasChildren(props.children, filteredList);
     return {
       divider: {
-        hasFirstChild: hasFirstItem(props, firstItem),
-        hasLastChild: hasLastItem(props, lastItem)
+        hasFirstChild: hasFirstItem(props.children, firstItem),
+        hasLastChild: hasLastItem(props.children, utils.getLastItem(filteredList.filter(function (i) {
+          return utils.isUndefined(i == null ? void 0 : i.noFilter);
+        })))
       },
       group: {
         display: hasItems ? "initial" : "none"
@@ -597,6 +639,8 @@ function useAutoComplete(autoCompleteProps) {
     onClose: onClose,
     onOpen: onOpen,
     query: query,
+    removeItem: removeItem,
+    resetItems: resetItems,
     setQuery: setQuery,
     tags: tags,
     values: values
@@ -608,7 +652,15 @@ var AutoComplete = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var children = context.children,
       isOpen = context.isOpen,
       onClose = context.onClose,
-      onOpen = context.onOpen;
+      onOpen = context.onOpen,
+      resetItems = context.resetItems,
+      removeItem = context.removeItem;
+  React.useImperativeHandle(ref, function () {
+    return {
+      resetItems: resetItems,
+      removeItem: removeItem
+    };
+  });
   return React__default.createElement(AutoCompleteProvider, {
     value: context
   }, React__default.createElement(react.Popover, {
@@ -643,7 +695,6 @@ var AutoCompleteItem = /*#__PURE__*/react.forwardRef(function (props, forwardedR
   var itemProps = getItemProps(props);
   var _itemProps$root = itemProps.root,
       isValidSuggestion = _itemProps$root.isValidSuggestion,
-      setItemList = _itemProps$root.setItemList,
       value = _itemProps$root.value;
   var isFocused = focusedValue === value;
   React.useEffect(function () {
@@ -655,14 +706,6 @@ var AutoCompleteItem = /*#__PURE__*/react.forwardRef(function (props, forwardedR
     });
   }, [isFocused, interactionRef]);
   React.useEffect(function () {
-    var item = _extends({}, utils.pick(props, ["label", "fixed", "disabled", "groupId"]), {
-      itemVal: props.value,
-      value: value
-    });
-
-    setItemList(function (itemList) {
-      return [].concat(itemList, [item]);
-    });
     if (typeof value !== "string") console.warn("wow");
     if (typeof value !== "string" && utils.isUndefined(props.getValue)) console.error("You must define the `getValue` prop, when an Item's value is not a string");
   }, []);
@@ -684,7 +727,7 @@ var baseItemStyles = {
   mx: "2",
   px: "2",
   py: "2",
-  borderRadius: "md",
+  rounded: "md",
   cursor: "pointer"
 };
 
@@ -864,10 +907,10 @@ var baseStyles = {
   py: "4",
   opacity: "0",
   bg: "#232934",
-  borderRadius: "md",
+  rounded: "md",
   maxH: "350px",
   border: "none",
-  boxShadow: "base",
+  shadow: "base",
   pos: "absolute",
   zIndex: "popover",
   overflowY: "auto",
@@ -912,7 +955,9 @@ exports.AutoCompleteGroupTitle = AutoCompleteGroupTitle;
 exports.AutoCompleteInput = AutoCompleteInput;
 exports.AutoCompleteItem = AutoCompleteItem;
 exports.AutoCompleteList = AutoCompleteList;
+exports.AutoCompleteProvider = AutoCompleteProvider;
 exports.AutoCompleteTag = AutoCompleteTag;
 exports.baseItemStyles = baseItemStyles;
 exports.useAutoComplete = useAutoComplete;
+exports.useAutoCompleteContext = useAutoCompleteContext;
 //# sourceMappingURL=chakra-autocomplete.cjs.development.js.map