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

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

@@ -1,7 +1,5 @@
-import { getDevice } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
+import { useDevice } from 'chayns-api';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useTheme } from 'styled-components';
 import { calculateContentHeight } from '../../utils/calculate';
 import { searchList } from '../../utils/searchBox';
@@ -11,77 +9,57 @@ import GroupName from './group-name/GroupName';
 import SearchBoxBody from './search-box-body/SearchBoxBody';
 import SearchBoxItem from './search-box-item/SearchBoxItem';
 import { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';
-import { StyledSearchBox, StyledSearchBoxIcon, StyledSearchBoxLeftWrapper } from './SearchBox.styles';
-const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    placeholder,
-    leftIcons,
-    lists,
-    onChange,
-    onBlur,
-    onSelect,
-    onKeyDown,
-    selectedId,
-    container,
-    shouldHideFilterButtons = false,
-    shouldShowRoundImage,
-    shouldShowContentOnEmptyInput = true,
-    shouldAddInputToList = true,
-    shouldShowToggleIcon = false
-  } = _ref;
+import { StyledSearchBox, StyledSearchBoxHintText, StyledSearchBoxIcon, StyledSearchBoxLeftWrapper } from './SearchBox.styles';
+import { useUuid } from '../../hooks/uuid';
+import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
+import TagInput from '../tag-input/TagInput';
+const SearchBox = /*#__PURE__*/forwardRef(({
+  container,
+  customFilter,
+  dropdownDirection,
+  isInvalid = false,
+  leftIcons,
+  lists,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onSelect,
+  placeholder,
+  presetValue,
+  hintText,
+  selectedId,
+  shouldAddInputToList = true,
+  shouldHideFilterButtons = false,
+  shouldShowContentOnEmptyInput = true,
+  shouldShowRoundImage,
+  shouldShowToggleIcon = false,
+  tagInputSettings
+}, ref) => {
   const [matchingListsItems, setMatchingListsItems] = useState(lists);
   const [selectedImage, setSelectedImage] = useState();
-  const [value, setValue] = useState('');
-  const [isAnimating, setIsAnimating] = useState(false);
+  const [value, setValue] = useState(typeof presetValue === 'string' && presetValue !== '' ? presetValue : '');
   const [height, setHeight] = useState(0);
-  const [width, setWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
   const [hasMultipleGroups, setHasMultipleGroups] = useState(lists.length > 1);
   const [filteredChildrenArray, setFilteredChildrenArray] = useState();
   const [inputToListValue, setInputToListValue] = useState('');
   const [groups, setGroups] = useState(['all']);
-  const [portal, setPortal] = useState();
-  const [internalCoordinates, setInternalCoordinates] = useState({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = useState(container ?? null);
+  const [shouldShowBody, setShouldShowBody] = useState(false);
+  const uuid = useUuid();
   const boxRef = useRef(null);
   const contentRef = useRef(null);
   const inputRef = useRef(null);
+  const tagInputRef = useRef(null);
   const hasFocusRef = useRef(false);
   const isAnimatingRef = useRef(false);
+  const shouldShowPresetValue = useRef(typeof presetValue === 'string' && presetValue !== '');
   const theme = useTheme();
   const {
-    browser
-  } = getDevice();
-  useEffect(() => {
-    if (boxRef.current && !container) {
-      const el = boxRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('body');
-      setNewContainer(element);
-    }
-  }, [container]);
-  useEffect(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
-    }
-  }, [container]);
-  useEffect(() => {
-    if (boxRef.current) {
-      const {
-        x,
-        y
-      } = boxRef.current.getBoundingClientRect();
-      setInternalCoordinates({
-        x,
-        y
-      });
-    }
-  }, []);
+    isTouch
+  } = useDevice();
 
   /**
-   * Checks if Lists are smaller then 1
+   * Checks if there are multiple groups in the lists
    */
   useEffect(() => {
     setHasMultipleGroups(lists.length > 1);
@@ -91,10 +69,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (lists.length <= 1) {
       return items;
     }
-    lists.forEach(_ref2 => {
-      let {
-        groupName
-      } = _ref2;
+    lists.forEach(({
+      groupName
+    }) => {
       if (groupName) {
         items.push({
           id: groupName,
@@ -120,11 +97,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       });
     }
     const newMatchingItems = [];
-    newLists.forEach(_ref3 => {
-      let {
-        list,
-        groupName
-      } = _ref3;
+    newLists.forEach(({
+      list,
+      groupName
+    }) => {
       const newList = searchList({
         items: list,
         searchString: value
@@ -142,77 +118,43 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
         list: []
       });
     }
-    const filteredMatchingListItems = newMatchingItems.map(_ref4 => {
-      let {
-        list,
-        groupName
-      } = _ref4;
-      return {
-        groupName,
-        list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
-      };
-    });
+    const filteredMatchingListItems = newMatchingItems.map(({
+      list,
+      groupName
+    }) => ({
+      groupName,
+      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 = useCallback(() => {
-    if (boxRef.current) {
-      const {
-        x,
-        y,
-        height: bodyHeight
-      } = boxRef.current.getBoundingClientRect();
-      setInternalCoordinates({
-        x,
-        y: y + bodyHeight
-      });
-      setIsAnimating(true);
-    }
+    setShouldShowBody(true);
   }, []);
   const handleClose = useCallback(() => {
-    setIsAnimating(false);
+    setShouldShowBody(false);
   }, []);
   const handleFilterButtonsGroupSelect = keys => {
     setGroups(keys.length === 0 ? ['all'] : keys);
   };
 
-  /**
-   * This function closes the list of items
-   */
-  const handleOutsideClick = useCallback(event => {
-    if (boxRef.current && !boxRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      handleClose();
-    }
-  }, [handleClose]);
-
-  /**
-   * This hook listens for clicks
-   */
-  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
    */
   useEffect(() => {
     const textArray = [];
-    activeList.forEach(_ref5 => {
-      let {
-        list,
-        groupName
-      } = _ref5;
-      list.forEach(_ref6 => {
-        let {
-          text
-        } = _ref6;
-        return textArray.push(text);
-      });
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      list.forEach(({
+        text
+      }) => textArray.push(text));
       if (!groupName) {
         return;
       }
@@ -223,33 +165,14 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     setHeight(calculateContentHeight(textArray));
   }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);
-
-  /**
-   * This hook calculates the width
-   */
-  useEffect(() => {
-    const input = document.getElementById('search_box_input');
-    const getInputWidth = () => {
-      if (input) {
-        setWidth(input.offsetWidth);
-      }
-    };
-    if (input) {
-      new ResizeObserver(getInputWidth).observe(input);
-    }
-  }, []);
   useEffect(() => {
     if (selectedId) {
-      activeList.forEach(_ref7 => {
-        let {
-          list
-        } = _ref7;
-        const selectedItem = list.find(_ref8 => {
-          let {
-            id
-          } = _ref8;
-          return id === selectedId;
-        });
+      activeList.forEach(({
+        list
+      }) => {
+        const selectedItem = list.find(({
+          id
+        }) => id === selectedId);
         if (selectedItem) {
           setValue(selectedItem.text);
           if (selectedItem.imageUrl) {
@@ -268,31 +191,31 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
    * should not be reset if the list changes and the selectedId is still undefined.
    */
   useEffect(() => {
-    if (!selectedId) {
+    if (!selectedId && !shouldShowPresetValue.current) {
       setValue('');
     }
   }, [selectedId]);
   useEffect(() => {
-    isAnimatingRef.current = isAnimating;
-  }, [isAnimating]);
+    isAnimatingRef.current = shouldShowBody;
+  }, [shouldShowBody]);
   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 = useCallback(() => {
     hasFocusRef.current = true;
     if (shouldShowContentOnEmptyInput) {
       const newMatchingItems = [];
-      activeList.forEach(_ref9 => {
-        let {
-          list,
-          groupName
-        } = _ref9;
+      activeList.forEach(({
+        list,
+        groupName
+      }) => {
         const newList = searchList({
           items: list,
           searchString: value
@@ -310,22 +233,24 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
           list: []
         });
       }
-      const filteredMatchingListItems = newMatchingItems.map(_ref10 => {
-        let {
-          list,
-          groupName
-        } = _ref10;
-        return {
-          groupName,
-          list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
-        };
-      });
+      const filteredMatchingListItems = newMatchingItems.map(({
+        list,
+        groupName
+      }) => ({
+        groupName,
+        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
@@ -333,11 +258,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   useEffect(() => {
     const newMatchingItems = [];
-    activeList.forEach(_ref11 => {
-      let {
-        list,
-        groupName
-      } = _ref11;
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
       const newList = searchList({
         items: list,
         searchString: value
@@ -356,14 +280,12 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       });
     }
     if (shouldAddInputToList && inputToListValue !== '') {
-      newMatchingItems.forEach(_ref12 => {
-        let {
-          list
-        } = _ref12;
-        list.forEach(_ref13 => {
-          let {
-            text
-          } = _ref13;
+      newMatchingItems.forEach(({
+        list
+      }) => {
+        list.forEach(({
+          text
+        }) => {
           if (text.toLowerCase() === inputToListValue.toLowerCase()) {
             setInputToListValue('');
           }
@@ -372,12 +294,12 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
   const handleClick = useCallback(() => {
-    if (isAnimating) {
+    if (shouldShowBody) {
       handleClose();
     } else {
       handleOpen();
     }
-  }, [handleClose, handleOpen, isAnimating]);
+  }, [handleClose, handleOpen, shouldShowBody]);
   const rightElement = useMemo(() => {
     if (!shouldShowToggleIcon) {
       return undefined;
@@ -389,7 +311,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       color: theme['006']
     }));
   }, [handleClick, shouldShowToggleIcon, theme]);
-  const leftElement = useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/React.createElement(Icon, {
+  const leftElement = useMemo(() => (leftIcons || selectedImage) && /*#__PURE__*/React.createElement(StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/React.createElement(Icon, {
     icons: leftIcons
   }), selectedImage && selectedImage), [leftIcons, selectedImage]);
 
@@ -398,11 +320,11 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
    */
   const handleChange = useCallback(event => {
     const filteredLists = [];
-    activeList.forEach(_ref14 => {
-      let {
-        list,
-        groupName
-      } = _ref14;
+    shouldShowPresetValue.current = false;
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
       const newList = searchList({
         items: list,
         searchString: event.target.value
@@ -445,6 +367,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur(event);
     }
   }, [onBlur]);
+  const handleDropdownOutsideClick = useCallback(() => {
+    tagInputRef.current?.blur();
+    return hasFocusRef.current && isTouch;
+  }, [isTouch]);
 
   /**
    * This function handles the item selection
@@ -454,7 +380,13 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       ...item,
       text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
     };
-    setValue(newItem.text);
+    if (tagInputSettings) {
+      setValue('');
+      setInputToListValue('');
+      tagInputRef.current?.resetValue();
+    } else {
+      setValue(newItem.text);
+    }
     handleClose();
     setSelectedImage(newItem.imageUrl ? /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
       src: newItem.imageUrl,
@@ -464,14 +396,16 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (typeof onSelect === 'function') {
       onSelect(newItem);
     }
-  }, [handleClose, onSelect, shouldShowRoundImage]);
+  }, [handleClose, onSelect, shouldShowRoundImage, tagInputSettings]);
   const content = useMemo(() => {
+    if (hintText && matchingListsItems.length === 0) {
+      return /*#__PURE__*/React.createElement(StyledSearchBoxHintText, null, hintText.replace('##value##', value));
+    }
     const items = [];
-    matchingListsItems.forEach((_ref15, index) => {
-      let {
-        groupName,
-        list
-      } = _ref15;
+    matchingListsItems.forEach(({
+      groupName,
+      list
+    }, index) => {
       if (hasMultipleGroups) {
         if (list.length <= 0) {
           return;
@@ -483,12 +417,11 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
           }));
         }
       }
-      list.forEach(_ref16 => {
-        let {
-          id,
-          text,
-          imageUrl
-        } = _ref16;
+      list.forEach(({
+        id,
+        text,
+        imageUrl
+      }, listIndex) => {
         items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
           key: `${id}_${groupName ?? ''}`,
           id: id,
@@ -496,7 +429,8 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
           imageUrl: imageUrl,
           shouldShowRoundImage: shouldShowRoundImage,
           onSelect: handleSelect,
-          groupName: groupName
+          groupName: groupName,
+          tabIndex: index === 0 && listIndex === 0 ? 0 : -1
         }));
       });
     });
@@ -504,27 +438,31 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
         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]);
   useEffect(() => {
     const handleKeyDown = e => {
-      if (!isAnimating || matchingListsItems.length === 0) {
+      if (!shouldShowBody || matchingListsItems.length === 0) {
         return;
       }
+      const children = contentRef.current?.children;
+      if (!children) {
+        return;
+      }
+      const childrenArray = Array.from(children);
+      const newChildren = childrenArray.find(child => child.id.startsWith('searchBoxContent__'))?.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') {
         e.preventDefault();
-        const children = contentRef.current?.children;
-        if (!children) {
-          return;
-        }
-        const childrenArray = Array.from(children);
-        const newChildren = childrenArray.find(child => child.id.startsWith('searchbox-content__'))?.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];
@@ -533,11 +471,12 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
           setFocusedIndex(newIndex);
           const newElement = filteredChildren[newIndex];
           newElement.tabIndex = 0;
-          newElement.focus();
         }
-      } else if (e.key === 'Enter' && focusedIndex !== null) {
-        if (filteredChildrenArray) {
-          const element = filteredChildrenArray[focusedIndex];
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (filteredChildren) {
+          const element = filteredChildren[focusedIndex ?? 0];
           if (!element) {
             return;
           }
@@ -556,8 +495,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             imageUrl = element.children[0]?.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
           });
@@ -568,7 +508,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating, matchingListsItems.length]);
+  }, [filteredChildrenArray, focusedIndex, handleSelect, matchingListsItems.length, shouldShowBody]);
   const handleKeyPress = useCallback(event => {
     if (event.keyCode === 27) {
       setMatchingListsItems([]);
@@ -583,39 +523,62 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       document.addEventListener('keydown', handleKeyPress);
     };
   }, [handleKeyPress]);
+
+  /**
+   * Update the value if preset value changes
+   */
   useEffect(() => {
-    if (!newContainer) {
-      return;
+    if (presetValue) {
+      setValue(presetValue);
     }
-    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
-      initial: false
-    }, isAnimating && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput) && /*#__PURE__*/React.createElement(SearchBoxBody, {
-      filterButtons: filterButtons,
-      selectedGroups: groups,
-      width: width,
-      coordinates: internalCoordinates,
-      browser: browser?.name,
-      height: height,
-      ref: contentRef,
-      onGroupSelect: handleFilterButtonsGroupSelect,
-      shouldHideFilterButtons: shouldHideFilterButtons
-    }, content)), newContainer));
-  }, [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 useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
-    ref: boxRef
+    ref: boxRef,
+    key: `search-box-${uuid}`
   }, /*#__PURE__*/React.createElement("div", {
-    id: "search_box_input"
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: inputRef,
-    onChange: handleChange,
+    id: `search_box_input${uuid}`
+  }, tagInputSettings ? /*#__PURE__*/React.createElement(TagInput, {
+    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.createElement(Input, {
+    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.createElement(DropdownBodyWrapper, {
+    anchorElement: boxRef.current,
+    container: container,
+    direction: dropdownDirection,
+    maxHeight: 300,
+    onClose: handleClose,
+    onOutsideClick: handleDropdownOutsideClick,
+    shouldShowDropdown: shouldShowDropdown
+  }, /*#__PURE__*/React.createElement(SearchBoxBody, {
+    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';
 export default SearchBox;