@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/cjs/components/search-box/SearchBox.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _styledComponents = require("styled-components");
 var _calculate = require("../../utils/calculate");
 var _searchBox = require("../../utils/searchBox");
@@ -18,78 +16,58 @@ var _SearchBoxBody = _interopRequireDefault(require("./search-box-body/SearchBox
 var _SearchBoxItem = _interopRequireDefault(require("./search-box-item/SearchBoxItem"));
 var _SearchBoxItem2 = require("./search-box-item/SearchBoxItem.styles");
 var _SearchBox = require("./SearchBox.styles");
+var _uuid = require("../../hooks/uuid");
+var _DropdownBodyWrapper = _interopRequireDefault(require("../dropdown-body-wrapper/DropdownBodyWrapper"));
+var _TagInput = _interopRequireDefault(require("../tag-input/TagInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
-  placeholder,
+  container,
+  customFilter,
+  dropdownDirection,
+  isInvalid = false,
   leftIcons,
   lists,
-  onChange,
   onBlur,
-  onSelect,
+  onChange,
   onKeyDown,
+  onSelect,
+  placeholder,
+  presetValue,
+  hintText,
   selectedId,
-  container,
+  shouldAddInputToList = true,
   shouldHideFilterButtons = false,
-  shouldShowRoundImage,
   shouldShowContentOnEmptyInput = true,
-  shouldAddInputToList = true,
-  shouldShowToggleIcon = false
+  shouldShowRoundImage,
+  shouldShowToggleIcon = false,
+  tagInputSettings
 }, ref) => {
   const [matchingListsItems, setMatchingListsItems] = (0, _react.useState)(lists);
   const [selectedImage, setSelectedImage] = (0, _react.useState)();
-  const [value, setValue] = (0, _react.useState)('');
-  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _react.useState)(typeof presetValue === 'string' && presetValue !== '' ? presetValue : '');
   const [height, setHeight] = (0, _react.useState)(0);
-  const [width, setWidth] = (0, _react.useState)(0);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
   const [hasMultipleGroups, setHasMultipleGroups] = (0, _react.useState)(lists.length > 1);
   const [filteredChildrenArray, setFilteredChildrenArray] = (0, _react.useState)();
   const [inputToListValue, setInputToListValue] = (0, _react.useState)('');
   const [groups, setGroups] = (0, _react.useState)(['all']);
-  const [portal, setPortal] = (0, _react.useState)();
-  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
+  const [shouldShowBody, setShouldShowBody] = (0, _react.useState)(false);
+  const uuid = (0, _uuid.useUuid)();
   const boxRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
+  const tagInputRef = (0, _react.useRef)(null);
   const hasFocusRef = (0, _react.useRef)(false);
   const isAnimatingRef = (0, _react.useRef)(false);
+  const shouldShowPresetValue = (0, _react.useRef)(typeof presetValue === 'string' && presetValue !== '');
   const theme = (0, _styledComponents.useTheme)();
   const {
-    browser
-  } = (0, _chaynsApi.getDevice)();
-  (0, _react.useEffect)(() => {
-    if (boxRef.current && !container) {
-      const el = boxRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('body');
-      setNewContainer(element);
-    }
-  }, [container]);
-  (0, _react.useEffect)(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
-    }
-  }, [container]);
-  (0, _react.useEffect)(() => {
-    if (boxRef.current) {
-      const {
-        x,
-        y
-      } = boxRef.current.getBoundingClientRect();
-      setInternalCoordinates({
-        x,
-        y
-      });
-    }
-  }, []);
+    isTouch
+  } = (0, _chaynsApi.useDevice)();
 
   /**
-   * Checks if Lists are smaller then 1
+   * Checks if there are multiple groups in the lists
    */
   (0, _react.useEffect)(() => {
     setHasMultipleGroups(lists.length > 1);
@@ -153,53 +131,26 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       groupName
     }) => ({
       groupName,
-      list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+      list: list.filter(item => {
+        if (typeof customFilter === 'function') {
+          return customFilter(item);
+        }
+        return !(newMatchingItems.length === 1 && item.text === value);
+      })
     }));
     setMatchingListsItems(filteredMatchingListItems);
     return newLists;
-  }, [groups, lists, shouldAddInputToList, value]);
+  }, [groups, lists, customFilter, shouldAddInputToList, value]);
   const handleOpen = (0, _react.useCallback)(() => {
-    if (boxRef.current) {
-      const {
-        x,
-        y,
-        height: bodyHeight
-      } = boxRef.current.getBoundingClientRect();
-      setInternalCoordinates({
-        x,
-        y: y + bodyHeight
-      });
-      setIsAnimating(true);
-    }
+    setShouldShowBody(true);
   }, []);
   const handleClose = (0, _react.useCallback)(() => {
-    setIsAnimating(false);
+    setShouldShowBody(false);
   }, []);
   const handleFilterButtonsGroupSelect = keys => {
     setGroups(keys.length === 0 ? ['all'] : keys);
   };
 
-  /**
-   * This function closes the list of items
-   */
-  const handleOutsideClick = (0, _react.useCallback)(event => {
-    if (boxRef.current && !boxRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      handleClose();
-    }
-  }, [handleClose]);
-
-  /**
-   * This hook listens for clicks
-   */
-  (0, _react.useEffect)(() => {
-    document.addEventListener('click', handleOutsideClick);
-    window.addEventListener('blur', () => handleClose());
-    return () => {
-      document.removeEventListener('click', handleOutsideClick);
-      window.addEventListener('blur', () => handleClose());
-    };
-  }, [handleOutsideClick, boxRef, handleClose]);
-
   /**
    * This hook calculates the height
    */
@@ -222,21 +173,6 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     setHeight((0, _calculate.calculateContentHeight)(textArray));
   }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);
-
-  /**
-   * This hook calculates the width
-   */
-  (0, _react.useEffect)(() => {
-    const input = document.getElementById('search_box_input');
-    const getInputWidth = () => {
-      if (input) {
-        setWidth(input.offsetWidth);
-      }
-    };
-    if (input) {
-      new ResizeObserver(getInputWidth).observe(input);
-    }
-  }, []);
   (0, _react.useEffect)(() => {
     if (selectedId) {
       activeList.forEach(({
@@ -263,21 +199,22 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
    * should not be reset if the list changes and the selectedId is still undefined.
    */
   (0, _react.useEffect)(() => {
-    if (!selectedId) {
+    if (!selectedId && !shouldShowPresetValue.current) {
       setValue('');
     }
   }, [selectedId]);
   (0, _react.useEffect)(() => {
-    isAnimatingRef.current = isAnimating;
-  }, [isAnimating]);
+    isAnimatingRef.current = shouldShowBody;
+  }, [shouldShowBody]);
   (0, _react.useEffect)(() => {
-    if (matchingListsItems.length !== 0 && !isAnimatingRef.current && hasFocusRef.current) {
+    if ((matchingListsItems.length !== 0 || hintText) && !isAnimatingRef.current && hasFocusRef.current) {
       handleOpen();
     }
-  }, [handleOpen, matchingListsItems.length]);
+  }, [handleOpen, hintText, matchingListsItems.length]);
 
   /**
-   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   * This function handles the focus event of the input and opens the dropdown if the input
+   * should show content on an empty input
    */
   const handleFocus = (0, _react.useCallback)(() => {
     hasFocusRef.current = true;
@@ -309,14 +246,19 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
         groupName
       }) => ({
         groupName,
-        list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+        list: list.filter(item => {
+          if (typeof customFilter === 'function') {
+            return customFilter(item);
+          }
+          return !(newMatchingItems.length === 1 && item.text === value);
+        })
       }));
       setMatchingListsItems(filteredMatchingListItems);
-      if (filteredMatchingListItems.length !== 0) {
+      if (filteredMatchingListItems.length !== 0 || hintText) {
         handleOpen();
       }
     }
-  }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  }, [shouldShowContentOnEmptyInput, activeList, shouldAddInputToList, hintText, value, customFilter, handleOpen]);
 
   /**
    * This function filters the lists by input
@@ -360,12 +302,12 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
   const handleClick = (0, _react.useCallback)(() => {
-    if (isAnimating) {
+    if (shouldShowBody) {
       handleClose();
     } else {
       handleOpen();
     }
-  }, [handleClose, handleOpen, isAnimating]);
+  }, [handleClose, handleOpen, shouldShowBody]);
   const rightElement = (0, _react.useMemo)(() => {
     if (!shouldShowToggleIcon) {
       return undefined;
@@ -377,7 +319,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       color: theme['006']
     }));
   }, [handleClick, shouldShowToggleIcon, theme]);
-  const leftElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  const leftElement = (0, _react.useMemo)(() => (leftIcons || selectedImage) && /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: leftIcons
   }), selectedImage && selectedImage), [leftIcons, selectedImage]);
 
@@ -386,6 +328,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
    */
   const handleChange = (0, _react.useCallback)(event => {
     const filteredLists = [];
+    shouldShowPresetValue.current = false;
     activeList.forEach(({
       list,
       groupName
@@ -432,6 +375,11 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       onBlur(event);
     }
   }, [onBlur]);
+  const handleDropdownOutsideClick = (0, _react.useCallback)(() => {
+    var _tagInputRef$current;
+    (_tagInputRef$current = tagInputRef.current) === null || _tagInputRef$current === void 0 || _tagInputRef$current.blur();
+    return hasFocusRef.current && isTouch;
+  }, [isTouch]);
 
   /**
    * This function handles the item selection
@@ -441,7 +389,14 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       ...item,
       text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
     };
-    setValue(newItem.text);
+    if (tagInputSettings) {
+      var _tagInputRef$current2;
+      setValue('');
+      setInputToListValue('');
+      (_tagInputRef$current2 = tagInputRef.current) === null || _tagInputRef$current2 === void 0 || _tagInputRef$current2.resetValue();
+    } else {
+      setValue(newItem.text);
+    }
     handleClose();
     setSelectedImage(newItem.imageUrl ? /*#__PURE__*/_react.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
       src: newItem.imageUrl,
@@ -451,8 +406,11 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     if (typeof onSelect === 'function') {
       onSelect(newItem);
     }
-  }, [handleClose, onSelect, shouldShowRoundImage]);
+  }, [handleClose, onSelect, shouldShowRoundImage, tagInputSettings]);
   const content = (0, _react.useMemo)(() => {
+    if (hintText && matchingListsItems.length === 0) {
+      return /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxHintText, null, hintText.replace('##value##', value));
+    }
     const items = [];
     matchingListsItems.forEach(({
       groupName,
@@ -473,7 +431,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
         id,
         text,
         imageUrl
-      }) => {
+      }, listIndex) => {
         items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
           key: `${id}_${groupName ?? ''}`,
           id: id,
@@ -481,7 +439,8 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
           imageUrl: imageUrl,
           shouldShowRoundImage: shouldShowRoundImage,
           onSelect: handleSelect,
-          groupName: groupName
+          groupName: groupName,
+          tabIndex: index === 0 && listIndex === 0 ? 0 : -1
         }));
       });
     });
@@ -489,28 +448,32 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
         id: "input-value",
         onSelect: handleSelect,
-        text: `<b>${inputToListValue}</b`
+        text: `<b>${inputToListValue}</b`,
+        tabIndex: items.length === 0 ? 0 : -1
       }));
     }
     return items;
-  }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  }, [hintText, matchingListsItems, shouldAddInputToList, inputToListValue, value, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
-      if (!isAnimating || matchingListsItems.length === 0) {
+      var _contentRef$current, _childrenArray$find;
+      if (!shouldShowBody || matchingListsItems.length === 0) {
+        return;
+      }
+      const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
+      if (!children) {
+        return;
+      }
+      const childrenArray = Array.from(children);
+      const newChildren = (_childrenArray$find = childrenArray.find(child => child.id.startsWith('searchBoxContent__'))) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.children;
+      if (!(newChildren && newChildren.length > 0)) {
         return;
       }
+      const filteredChildren = Array.from(newChildren).filter(child => child.dataset.isgroupname !== 'true');
+      setFilteredChildrenArray(filteredChildren);
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var _contentRef$current, _childrenArray$find;
         e.preventDefault();
-        const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
-        if (!children) {
-          return;
-        }
-        const childrenArray = Array.from(children);
-        const newChildren = (_childrenArray$find = childrenArray.find(child => child.id.startsWith('searchbox-content__'))) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.children;
         if (newChildren && newChildren.length > 0) {
-          const filteredChildren = Array.from(newChildren).filter(child => child.dataset.isgroupname !== 'true');
-          setFilteredChildrenArray(filteredChildren);
           const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + filteredChildren.length) % filteredChildren.length : 0;
           if (focusedIndex !== null) {
             const prevElement = filteredChildren[focusedIndex];
@@ -519,12 +482,13 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
           setFocusedIndex(newIndex);
           const newElement = filteredChildren[newIndex];
           newElement.tabIndex = 0;
-          newElement.focus();
         }
-      } else if (e.key === 'Enter' && focusedIndex !== null) {
-        if (filteredChildrenArray) {
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (filteredChildren) {
           var _element$children$;
-          const element = filteredChildrenArray[focusedIndex];
+          const element = filteredChildren[focusedIndex ?? 0];
           if (!element) {
             return;
           }
@@ -544,8 +508,9 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             imageUrl = (_element$children$2 = element.children[0]) === null || _element$children$2 === void 0 ? void 0 : _element$children$2.attributes.src.nodeValue;
           }
+          const newId = id.replace('search-box-item__', '');
           handleSelect({
-            id: id.replace('search-box-item__', ''),
+            id: newId === 'input-value' ? textContent : newId,
             text: textContent ?? '',
             imageUrl
           });
@@ -556,7 +521,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating, matchingListsItems.length]);
+  }, [filteredChildrenArray, focusedIndex, handleSelect, matchingListsItems.length, shouldShowBody]);
   const handleKeyPress = (0, _react.useCallback)(event => {
     if (event.keyCode === 27) {
       setMatchingListsItems([]);
@@ -571,39 +536,62 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       document.addEventListener('keydown', handleKeyPress);
     };
   }, [handleKeyPress]);
+
+  /**
+   * Update the value if preset value changes
+   */
   (0, _react.useEffect)(() => {
-    if (!newContainer) {
-      return;
+    if (presetValue) {
+      setValue(presetValue);
     }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
-      initial: false
-    }, isAnimating && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput) && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
-      filterButtons: filterButtons,
-      selectedGroups: groups,
-      width: width,
-      coordinates: internalCoordinates,
-      browser: browser === null || browser === void 0 ? void 0 : browser.name,
-      height: height,
-      ref: contentRef,
-      onGroupSelect: handleFilterButtonsGroupSelect,
-      shouldHideFilterButtons: shouldHideFilterButtons
-    }, content)), newContainer));
-  }, [browser === null || browser === void 0 ? void 0 : browser.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons, matchingListsItems.length, value, shouldShowContentOnEmptyInput]);
+  }, [presetValue]);
+  const shouldShowDropdown = shouldShowBody && (matchingListsItems.length !== 0 || !!hintText) && (value.trim() !== '' || shouldShowContentOnEmptyInput);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
-    ref: boxRef
+    ref: boxRef,
+    key: `search-box-${uuid}`
   }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "search_box_input"
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    ref: inputRef,
-    onChange: handleChange,
+    id: `search_box_input${uuid}`
+  }, tagInputSettings ? /*#__PURE__*/_react.default.createElement(_TagInput.default, {
+    leftElement: leftElement,
+    onAdd: tagInputSettings.onAdd,
     onBlur: handleBlur,
+    onChange: handleChange,
     onFocus: handleFocus,
+    onRemove: tagInputSettings.onRemove,
     placeholder: placeholder,
-    onKeyDown: onKeyDown,
+    ref: tagInputRef,
+    shouldAllowMultiple: tagInputSettings.shouldAllowMultiple,
+    shouldPreventEnter: true,
+    tags: tagInputSettings.tags
+  }) : /*#__PURE__*/_react.default.createElement(_Input.default, {
+    isInvalid: isInvalid,
     leftElement: leftElement,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
     rightElement: rightElement,
     value: value
-  })), portal), [handleBlur, handleChange, handleFocus, leftElement, onKeyDown, placeholder, portal, rightElement, value]);
+  })), boxRef.current && /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.default, {
+    anchorElement: boxRef.current,
+    container: container,
+    direction: dropdownDirection,
+    maxHeight: 300,
+    onClose: handleClose,
+    onOutsideClick: handleDropdownOutsideClick,
+    shouldShowDropdown: shouldShowDropdown
+  }, /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
+    filterButtons: filterButtons,
+    height: height,
+    shouldShow: shouldShowDropdown,
+    key: `search-box-body-${uuid}`,
+    onGroupSelect: handleFilterButtonsGroupSelect,
+    ref: contentRef,
+    selectedGroups: groups,
+    shouldHideFilterButtons: shouldHideFilterButtons
+  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, tagInputSettings, uuid, value]);
 });
 SearchBox.displayName = 'SearchBox';
 var _default = exports.default = SearchBox;