@choc-ui/chakra-autocomplete 4.5.8 → 4.7.0

package/README.md

@@ -24,7 +24,9 @@
 <a><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/anubra266/choc-autocomplete?logo=github&style=for-the-badge">
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 </a>
@@ -145,7 +147,7 @@ function App() {
           <AutoCompleteInput variant="filled" />
           <AutoCompleteList>
             {Object.entries(continents).map(([continent, countries], co_id) => (
-              <AutoCompleteGroup key={co_id} showDivider>
+              <AutoCompleteGroup key={co_id} id={continent} showDivider>
                 <AutoCompleteGroupTitle textTransform="capitalize">
                   {continent}
                 </AutoCompleteGroupTitle>
@@ -153,6 +155,7 @@ function App() {
                   <AutoCompleteItem
                     key={c_id}
                     value={country}
+                    groupId={continent}
                     textTransform="capitalize"
                   >
                     {country}
@@ -175,7 +178,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` and `onClose` methods.
+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.
 
 ```js
 import {
@@ -343,7 +346,7 @@ function App() {
               tags.map((tag, tid) => (
                 <AutoCompleteTag
                   key={tid}
-                  label={tag.value}
+                  label={tag.label}
                   onRemove={tag.onRemove}
                 />
               ))
@@ -773,6 +776,13 @@ This Composes your suggestions
   </tr>
 </thead>
 <tbody>
+  <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>
@@ -985,7 +995,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="http://ericc.netlify.app"><img src="https://avatars.githubusercontent.com/u/1885157?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eric Carboni</b></sub></a><br /><a href="https://github.com/anubra266/choc-autocomplete/commits?author=eric-hc" title="Code">💻</a></td>
   </tr>
 </table>
 

package/dist/autocomplete-item.d.ts

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

package/dist/autocomplete.d.ts

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

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

@@ -9,13 +9,12 @@ 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 autoomplete components within `<AutoComplete />`"
+  errorMessage: "useAutoCompleteContext: `context` is undefined. Seems you forgot to wrap all autocomplete components within `<AutoComplete />`"
 }),
     AutoCompleteProvider = _createContext[0],
     useAutoCompleteContext = _createContext[1];
@@ -147,16 +146,6 @@ 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) {
-    return utils.pick(item.props, ["value", "label", "fixed", "disabled"]);
-  });
-};
 var getFocusedStyles = function getFocusedStyles() {
   return {
     bg: "whiteAlpha.100",
@@ -187,34 +176,20 @@ var getMultipleWrapStyles = function getMultipleWrapStyles(themeInput, multiple)
   });
 };
 
-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 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(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 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 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 hasChildren = function hasChildren(props, filteredList) {
+  return filteredList.some(function (item) {
+    return utils.isDefined(item.groupId) && utils.isDefined(props.id) && item.groupId === props.id;
+  });
 };
 
 var _excluded = ["onBlur", "onChange", "onFocus", "onKeyDown", "variant", "wrapStyles"],
-    _excluded2 = ["_fixed", "_focus", "children", "disabled", "value", "fixed", "onClick", "onMouseOver", "sx"];
+    _excluded2 = ["_fixed", "_focus", "children", "disabled", "label", "value", "fixed", "onClick", "onMouseOver", "sx"];
 /**
  * useAutoComplete that provides all the state and focus management logic
  * for the autocomplete component. It is consumed by the `Autocomplete` component
@@ -254,24 +229,22 @@ function useAutoComplete(autoCompleteProps) {
       onClose = _useDisclosure.onClose,
       onOpen = _useDisclosure.onOpen;
 
-  var children = utils.runIfFn(autoCompleteProps.children, {
-    isOpen: isOpen,
-    onClose: onClose,
-    onOpen: onOpen
-  });
-  var itemList = getItemList(children);
+  var _useState = React.useState([]),
+      itemList = _useState[0],
+      setItemList = _useState[1];
+
   var inputRef = React.useRef(null);
   var inputWrapperRef = React.useRef(null);
   var listRef = React.useRef(null);
   var interactionRef = React.useRef(null);
 
-  var _useState = React.useState(""),
-      query = _useState[0],
-      setQuery = _useState[1];
+  var _useState2 = React.useState(""),
+      query = _useState2[0],
+      setQuery = _useState2[1];
 
-  var _useState2 = React.useState(defaultValues),
-      values = _useState2[0],
-      setValues = _useState2[1];
+  var _useState3 = React.useState(defaultValues),
+      values = _useState3[0],
+      setValues = _useState3[1];
 
   React.useEffect(function () {
     if (!multiple && !utils.isEmpty(defaultValues)) {
@@ -279,13 +252,13 @@ function useAutoComplete(autoCompleteProps) {
     }
   }, []);
 
-  var _useState3 = React.useState((_itemList$ = itemList[0]) == null ? void 0 : _itemList$.value),
-      focusedValue = _useState3[0],
-      setFocusedValue = _useState3[1];
+  var _useState4 = React.useState((_itemList$ = itemList[0]) == null ? void 0 : _itemList$.value),
+      focusedValue = _useState4[0],
+      setFocusedValue = _useState4[1];
 
-  var _useState4 = React.useState(false),
-      listAll = _useState4[0],
-      setListAll = _useState4[1];
+  var _useState5 = React.useState(false),
+      listAll = _useState5[0],
+      setListAll = _useState5[1];
 
   var maxSelections = autoCompleteProps.maxSelections || values.length + 1;
   var filteredResults = itemList.filter(function (i) {
@@ -326,9 +299,11 @@ function useAutoComplete(autoCompleteProps) {
     if (!values.includes(itemValue) && values.length < maxSelections) setValues(function (v) {
       return multiple ? [].concat(v, [itemValue]) : [itemValue];
     });
-    var itemLabel = (_filteredList$find = filteredList.find(function (i) {
+    var itemLabelFromValue = (_filteredList$find = filteredList.find(function (i) {
       return i.value === itemValue;
-    })) == null ? void 0 : _filteredList$find.label;
+    })) == null ? void 0 : _filteredList$find.label; // use value if label is not available
+
+    var itemLabel = itemLabelFromValue || itemValue;
     setQuery(itemLabel);
 
     if (multiple) {
@@ -357,19 +332,24 @@ function useAutoComplete(autoCompleteProps) {
     if (query === itemValue) setQuery("");
   };
 
-  var getItemFromValue = function getItemFromValue(value) {
-    return itemList.find(function (item) {
-      return item.value === value;
-    });
-  };
-
   var tags = multiple ? values.map(function (tag) {
-    return _extends({}, getItemFromValue(tag), {
+    var _itemList$find;
+
+    return {
+      label: ((_itemList$find = itemList.find(function (item) {
+        return item.value === tag;
+      })) == null ? void 0 : _itemList$find.label) || tag,
       onRemove: function onRemove() {
         return removeItem(tag);
       }
-    });
+    };
   }) : [];
+  var children = utils.runIfFn(autoCompleteProps.children, {
+    isOpen: isOpen,
+    onClose: onClose,
+    onOpen: onOpen,
+    tags: tags
+  });
 
   var getInputProps = function getInputProps(props, themeInput) {
     var _onBlur = props.onBlur,
@@ -488,6 +468,7 @@ function useAutoComplete(autoCompleteProps) {
         _focus = props._focus,
         itemChild = props.children,
         disabled = props.disabled,
+        label = props.label,
         value = props.value,
         fixed = props.fixed,
         _onClick = props.onClick,
@@ -499,12 +480,13 @@ function useAutoComplete(autoCompleteProps) {
     var isValidSuggestion = filteredList.findIndex(function (i) {
       return i.value === value;
     }) >= 0;
+    var itemLabel = itemChild || label || value;
     return {
-      item: _extends({}, typeof itemChild !== "string" || !emphasize ? {
-        children: itemChild
+      item: _extends({}, typeof itemLabel !== "string" || !emphasize ? {
+        children: itemLabel
       } : {
         dangerouslySetInnerHTML: {
-          __html: setEmphasis(itemChild, query)
+          __html: setEmphasis(itemLabel, query)
         }
       }, {
         "aria-selected": values.includes(value),
@@ -535,19 +517,21 @@ function useAutoComplete(autoCompleteProps) {
         })
       }, isFocused && (_focus || getFocusedStyles()), fixed && _fixed, rest),
       root: {
-        isValidSuggestion: isValidSuggestion
+        isValidSuggestion: isValidSuggestion,
+        setItemList: setItemList
       }
     };
   };
 
   var getGroupProps = function getGroupProps(props) {
-    var hasItems = hasChildren(props.children, filteredList);
+    var hasItems = hasChildren(props, filteredList);
+    var lastItem = utils.getLastItem(filteredList.filter(function (i) {
+      return utils.isUndefined(i == null ? void 0 : i.noFilter);
+    }));
     return {
       divider: {
-        hasFirstChild: hasFirstItem(props.children, firstItem),
-        hasLastChild: hasLastItem(props.children, utils.getLastItem(filteredList.filter(function (i) {
-          return utils.isUndefined(i == null ? void 0 : i.noFilter);
-        })))
+        hasFirstChild: hasFirstItem(props, firstItem),
+        hasLastChild: hasLastItem(props, lastItem)
       },
       group: {
         display: hasItems ? "initial" : "none"
@@ -630,7 +614,9 @@ var AutoCompleteItem = /*#__PURE__*/react.forwardRef(function (props, forwardedR
   var itemRef = React.useRef();
   var ref = react.useMergeRefs(forwardedRef, itemRef);
   var itemProps = getItemProps(props);
-  var isValidSuggestion = itemProps.root.isValidSuggestion;
+  var _itemProps$root = itemProps.root,
+      isValidSuggestion = _itemProps$root.isValidSuggestion,
+      setItemList = _itemProps$root.setItemList;
   var isFocused = focusedValue === props.value;
   React.useEffect(function () {
     var _itemRef$current;
@@ -640,12 +626,18 @@ var AutoCompleteItem = /*#__PURE__*/react.forwardRef(function (props, forwardedR
       block: "center"
     });
   }, [isFocused, interactionRef]);
+  React.useEffect(function () {
+    setItemList(function (itemList) {
+      return [].concat(itemList, [utils.pick(props, ["value", "label", "fixed", "disabled", "groupId"])]);
+    });
+  }, []);
 
   var _itemProps$item = itemProps.item,
       children = _itemProps$item.children,
       dangerouslySetInnerHTML = _itemProps$item.dangerouslySetInnerHTML,
-      rest = _objectWithoutPropertiesLoose(_itemProps$item, _excluded$1);
+      restProps = _objectWithoutPropertiesLoose(_itemProps$item, _excluded$1);
 
+  var rest = utils.omit(restProps, ["groupId"]);
   return isValidSuggestion ? React__default.createElement(react.Flex, Object.assign({
     ref: ref
   }, baseItemStyles, rest), children ? children : React__default.createElement("span", {